body {
  font-family: Arial, sans-serif;
  display: flex;
  margin: 0;
  height: 100%;
  overflow: hidden; /* ya lo tengo, bien hecho */
}

header {
  background-color: #0B3D91;
  color: white;
  text-align: center;
  padding: 1rem;
}

nav {
  width: 250px;
  background-color: #f1f1f1;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}

nav a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  color: #333;
  margin-bottom: 0.5rem;
  border-radius: 5px;
}

nav a:hover {
  background-color: #ddd;
}

main {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;       /* Agregado */
  display: block;         /* Asegura que no tenga márgenes o espacios fantasma */
}

.table-header {
  background-color: #0B3D91;
  color: white;
  text-align: left;
  padding: 0.5rem;
}


body { font-family: Arial, sans-serif; margin:0; }
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); align-items:center; justify-content:center; z-index:9999; }
.modal .card { width: 640px; max-width: calc(100% - 32px); background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:18px 20px; }
.modal h2 { margin:0 0 10px 0; font-size:22px; display:flex; align-items:center; gap:8px; }
.modal label { display:block; font-weight:600; margin-top:10px; }
.modal input[type="text"], .modal input[type="email"], .modal input[type="file"] {
  width:100%; padding:8px 10px; border:1.5px solid #333; border-radius:8px; outline:none;
}
.modal .actions { display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }
.btn { border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600; }
.btn.cancelar { background:#e74c3c; color:#fff; }
.btn.enviar { background:#27ae60; color:#fff; }
/* menú lateral simple */
nav { width:260px; background:#f4f4f4; padding:10px; height:100vh; overflow:auto; box-shadow:2px 0 5px rgba(0,0,0,.1); }
/* --- Reset mínimo y box-sizing coherente --- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* ¡Asegura que el scroll NUNCA se esconda! */
  overflow: auto; 
  background: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- Título bien alineado --- */
h2 {
  margin: 16px 16px 8px 16px;
  line-height: 1.25;
  font-weight: 700;
  font-size: 20px;
}

/* --- Envolvente con scroll y altura calculada a la vista --- */
.table-wrap {
  /* ocupa el ancho disponible y permite scroll en ambas direcciones */
  width: 100%;
  overflow: auto;
  /* deja espacio para el título y respiración visual */
  max-height: calc(100vh - 76px);
  border-top: 1px solid #e5e7eb;
}

/* --- Tabla estable (sin "adivinar" anchos) --- */
.tabla-anexo {
  border-collapse: collapse;
  table-layout: fixed;   /* clave para que respeten los <col> */
  width: 1200px;         /* ancho base para evitar “aplastamiento” en pantallas chicas */
  min-width: 100%;
  background: #fff;
}

/* --- Encabezado pegajoso para UX pro --- */
.tabla-anexo thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 8px;
  text-align: left;
  font-size: 13px;
}

/* --- Celdas consistentes --- */
.tabla-anexo td {
  vertical-align: top;
  padding: 10px 8px;
  border-bottom: 1px solid #f1f5f9;
  word-wrap: break-word;
  overflow-wrap: anywhere;  /* corta enlaces largos */
  font-size: 13px;
  line-height: 1.35;
}

/* --- Columnas angostas: centra y evita salto feo --- */
.tabla-anexo td:nth-child(1),
.tabla-anexo td:nth-child(6) {
  text-align: center;
  white-space: nowrap;
}

/* --- Enlaces en listas: mejor legibilidad --- */
.tabla-anexo a { text-decoration: none; }
.tabla-anexo a:hover { text-decoration: underline; }

/* --- Botón subir: que no descuadre celdas --- */
.btn-subir {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

/* --- Modal (por si algún CSS global lo tapa) --- */
.modal { display: none; }
.modal[style*="display: flex"] { display: flex !important; }