/* =============================================================================
   Sistema de Licencias, Permisos y Asistencia — GAM Camiri
   Hoja de estilos. Diseño premium, coherente con la marca institucional.
   ========================================================================== */

:root {
  /* Marca (mismo azul que la documentación institucional) */
  --brand:      #1c4e6b;
  --brand-600:  #163e55;
  --brand-050:  #eaf1f5;
  --brand-100:  #d5e3ec;

  /* Tinta y neutros */
  --ink:    #1b2430;
  --muted:  #4f5c6b;   /* AA sobre blanco */
  --faint:  #66707e;   /* AA para texto secundario chico */
  --line:   #e5e9ef;
  --line-2: #eef1f6;
  --bg:     #eef2f7;
  --card:   #ffffff;

  /* Semánticos */
  --good: #1a7f37; --good-bg: #e9f4ec; --good-bd: #bfe0c7;
  --warn: #8a5b00; --warn-bg: #f7efd9; --warn-bd: #ecdca6;
  --crit: #b42318; --crit-bg: #fbe4e0; --crit-bd: #f0c2ba;
  --info: #1c4e6b; --info-bg: #eaf1f5; --info-bd: #cfe0e9;

  /* Compat con nombres viejos usados en el HTML */
  --azul: var(--brand);
  --azul-claro: #2b6f96;
  --borde: var(--line);
  --texto: var(--ink);
  --gris: var(--bg);
  --tenue: var(--muted);

  --r:     18px;   /* tarjetas */
  --r-md:  14px;   /* fieldset, avisos, tablas */
  --r-sm:  11px;   /* inputs y botones */
  --r-pill: 999px;
  --ctrl-h: 44px;  /* alto único de inputs y botones, para que todo alinee */
  --sh-sm: 0 1px 2px rgba(20,30,45,.05);
  --sh:    0 2px 6px rgba(20,30,45,.05), 0 14px 34px rgba(20,30,45,.06);
  --sh-lg: 0 18px 50px rgba(20,30,45,.16);
  --focus: 0 0 0 3px rgba(28,78,107,.18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-100); }

/* --- Accesibilidad (WCAG AA) --------------------------------------------- */
/* Foco visible para quien navega con teclado (no se pierde en ningún control). */
a:focus-visible, button:focus-visible, .boton:focus-visible, .acc:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus); border-radius: var(--r-sm);
}
/* En la barra oscura el anillo azul no se ve: se usa uno claro. */
.barra a:focus-visible { box-shadow: 0 0 0 2px #fff; }
/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Ayuda para lectores de pantalla: texto visible solo para ellos. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Salto al contenido: aparece al tabular, para saltear el menú. */
.saltar {
  position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--brand); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm); transition: top .15s ease;
}
.saltar:focus { top: 8px; }

/* ---------------------------------------------------------------- Layout --- */
.fondo-login { display: flex; align-items: center; min-height: 100vh; padding: 24px; }

.hoja {
  max-width: 980px;
  margin: 22px auto;
  padding: 30px 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.hoja--angosta { max-width: 430px; }
.hoja--form { max-width: 740px; }

/* Encabezado institucional */
.encabezado { display: flex; align-items: center; gap: 18px; }
.encabezado img { height: 60px; width: auto; }
.encabezado .titulos { flex: 1; text-align: center; }
.institucion { font-weight: 700; font-size: 18px; letter-spacing: .2px; color: var(--ink); }
.gestion {
  font-weight: 700; font-size: 12px; color: var(--brand);
  letter-spacing: .8px; margin-top: 3px; text-transform: uppercase;
}
.formulario-titulo { font-weight: 600; font-size: 13.5px; margin-top: 3px; color: var(--muted); }
.direccion-nombre {
  text-align: center; font-weight: 700; margin: 14px 0 22px;
  letter-spacing: .3px; border-bottom: 2px solid var(--brand); padding-bottom: 9px; color: var(--ink);
}

h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  text-align: center; margin: 4px 0 20px; color: var(--ink);
}
h2 { font-size: 16px; font-weight: 700; }

/* ------------------------------------------------------------- Formularios - */
fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0 0 18px;
  padding: 18px 20px 8px;
  background: #fcfdfe;
}
legend {
  font-weight: 700; font-size: 10.5px; padding: 0 8px;
  text-transform: uppercase; color: var(--brand); letter-spacing: .8px;
}

label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #3d4855; }

input[type="text"], input[type="password"], input[type="date"],
input[type="time"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--ctrl-h);
  padding: 11px 14px;
  border: 1.5px solid #d6dde5;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23566472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: #aeb8c4; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus);
}
textarea { resize: vertical; min-height: 66px; line-height: 1.5; }

/* Subida de archivo: táctil y clara. En el celular el botón abre Cámara / Galería
   / Archivos (el sistema decide, porque aceptamos foto y PDF). */
input[type="file"] {
  width: 100%; font-size: 13.5px; color: var(--ink);
  padding: 9px 12px; border: 1.5px dashed #c3ccd6; border-radius: var(--r-sm);
  background: #fbfcfe; min-height: var(--ctrl-h);
}
input[type="file"]::file-selector-button {
  font-family: inherit; font-weight: 600; font-size: 13px; color: #fff; background: var(--brand);
  border: none; border-radius: var(--r-sm); padding: 9px 15px; margin-right: 12px; cursor: pointer;
  min-height: 38px;
}
input[type="file"]::file-selector-button:hover { background: var(--brand-600); }

.fila { display: flex; gap: 16px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 170px; }
.campo { margin-bottom: 14px; }

.ayuda { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; }
.alerta { color: var(--crit); font-weight: 700; }

.regla {
  background: var(--brand-050); border-left: 3px solid var(--brand);
  padding: 11px 14px; font-size: 12.5px; line-height: 1.55; border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #2c3947;
}

/* Manejo de errores por campo: resumen arriba (con enlaces) + error en cada campo. */
.error-resumen {
  border: 2px solid var(--crit); border-radius: var(--r-md); padding: 15px 18px; margin: 0 0 20px;
  background: #fff;
}
.error-resumen:focus { outline: none; box-shadow: var(--focus); }
.error-resumen h2 { color: var(--crit); font-size: 15.5px; margin: 0 0 8px; }
.error-resumen ul { margin: 0; padding-left: 18px; }
.error-resumen li { margin: 3px 0; }
.error-resumen a { color: var(--crit); font-weight: 600; text-decoration: underline; }
.campo-error { color: var(--crit); font-weight: 600; font-size: 12.5px; margin: 0 0 6px; }
.campo--error > input, .campo--error > select, .campo--error > textarea,
.campo--error .combo-input, .campo--error .marcas-check {
  border-color: var(--crit) !important; box-shadow: 0 0 0 3px rgba(180,35,24,.12);
}
.campo--error .marcas-check { padding: 8px; border: 1.5px solid var(--crit); border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- Botones -- */
button, .boton {
  background: var(--brand); color: #fff; min-height: var(--ctrl-h); padding: 0 22px;
  border: none; border-radius: var(--r-sm); cursor: pointer; font-weight: 600;
  font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--sh-sm); transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
  font-family: inherit; line-height: 1;
}
button:hover, .boton:hover { background: var(--brand-600); box-shadow: var(--sh); }
button:disabled, .boton:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { background: var(--brand); }
button:active, .boton:active { transform: translateY(1px); box-shadow: var(--sh-sm); }
button:focus-visible, .boton:focus-visible { outline: none; box-shadow: var(--focus); }
.boton--gris { background: #64707e; } .boton--gris:hover { background: #505b68; }
.boton--peligro { background: #b03636; } .boton--peligro:hover { background: #8f2a2a; }
.boton--chico { padding: 5px 10px; font-size: 13px; }

/* Reporte de contrato: cada dirección colapsable (nativo <details>). */
.dir-det { border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 10px; background: #fff; }
.dir-det > summary { cursor: pointer; padding: 11px 13px; display: flex; justify-content: space-between;
  align-items: center; gap: 8px; flex-wrap: wrap; background: #f6f9fb; border-radius: var(--r-sm); list-style: none; }
.dir-det[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.dir-det > summary::-webkit-details-marker { display: none; }
.dir-det .dir-nom { flex: 1; min-width: 0; }
.dir-det .dir-nom::before { content: '▸'; color: var(--faint); margin-right: 7px; font-size: 12px; }
.dir-det[open] .dir-nom::before { content: '▾'; }
.dir-det .dir-nom .est { margin-left: 6px; }
.dir-det .dir-cuerpo { padding: 6px 10px 10px; }
.dir-det .datos { margin-top: 0; }
.datos tfoot .fila-total td { border-top: 2px solid var(--line); background: #f4f7fa; font-weight: 600; }
.boton--ok   { background: var(--good); } .boton--ok:hover { background: #15662c; }
.boton--no   { background: var(--crit); } .boton--no:hover { background: #911c12; }

.acciones { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Avisos --- */
.aviso {
  padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 13.5px;
  border: 1px solid transparent; line-height: 1.5;
}
.aviso--error { background: var(--crit-bg); border-color: var(--crit-bd); color: #8c1d13; }
.aviso--ok    { background: var(--good-bg); border-color: var(--good-bd); color: #14622e; }
.aviso--info  { background: var(--info-bg); border-color: var(--info-bd); color: var(--brand); }

/* ------------------------------------------------------------ Barra / nav -- */
.barra {
  background: var(--brand);
  color: #fff; padding: 11px 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; flex-wrap: wrap; gap: 8px;
  position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 10px rgba(20,30,45,.14);
}
.barra strong { font-weight: 700; }
.barra a { color: #eaf2f8; text-decoration: none; padding: 6px 9px; border-radius: 7px;
  transition: background .13s ease, color .13s ease; }
.barra a:hover { background: rgba(255,255,255,.14); color: #fff; }
.barra-sep { opacity: .72; margin-left: 8px; font-size: 12.5px; }
.barra-menu { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.barra-toggle { display: none; background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.4); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 8px 13px; border-radius: 8px; cursor: pointer; }
.barra-toggle:hover { background: rgba(255,255,255,.3); }
.barra-top { display: flex; align-items: center; gap: 10px; }
.chip {
  background: #ffcf47; color: #4a3800; border-radius: var(--r-pill);
  padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 4px;
}

/* ---------------------------------------------------------------- Tablas --- */
table.datos { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
table.datos th, table.datos td { padding: 10px 13px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-2); }
table.datos thead th {
  background: #f6f8fb; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); border-bottom: 1px solid var(--line);
}
table.datos tbody tr:last-child td { border-bottom: none; }
table.datos tbody tr { transition: background .12s ease; }
table.datos tbody tr:hover { background: #f8fafc; }
table.datos small { color: var(--muted); }
table.datos small.alerta { color: var(--crit); font-weight: 700; }

/* Tabla de cotejo (análisis de RRHH, 5 columnas). En el celular no se apila en
   tarjetas: es una grilla comparativa, así que se desplaza en horizontal dentro
   de su caja y nunca rompe el ancho de la página. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
table.cot { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
table.cot th, table.cot td { padding: 8px 11px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-2); }
table.cot th { background: #f6f8fb; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted); font-weight: 700; }
table.cot tr.persona td { background: var(--brand-050); font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--brand-100); }
@media (max-width: 640px) { table.cot { min-width: 560px; } }

/* Tarjeta de un ítem en las listas de descargos (falta por justificar, visto bueno,
   por revisar). Cada una se lee como una pieza separada -- sombra y aire entre ellas --
   en vez de un bloque continuo. */
.tarjeta-desc {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 18px; background: #fff; box-shadow: var(--sh-sm);
}
.tarjeta-desc:last-child { margin-bottom: 0; }

/* --------------------------------------------- Control de personal de contrato */
/* Diseñado para listas grandes (hasta ~60 personas): filas de una línea, todos en
   Presente por defecto, se cambian solo las excepciones. */
.control-fecha { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 14px; }
.control-fecha-hoy { text-align: center; }
.control-fecha-hoy input[type="date"] { width: auto; text-align: center; min-height: 40px; }

/* Barra fija: resumen en vivo + buscador + acciones. */
.control-top { position: sticky; top: 0; z-index: 20; background: var(--card);
  padding: 10px 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.control-resumen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.control-resumen .r { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
.control-resumen .r-p { background: var(--good-bg); color: var(--good); }
.control-resumen .r-o { background: var(--warn-bg); color: var(--warn); }
.control-resumen .r-a { background: var(--crit-bg); color: var(--crit); }
.control-resumen .r-d { background: #e2e8ee; color: #46505c; }
.control-resumen .r-sin { background: var(--warn-bg); color: var(--warn); border: 1px dashed var(--warn); }
.control-herr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; }
.control-herr input[type="search"] { flex: 1; min-width: 160px; min-height: 40px; }
.control-solo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink);
  white-space: nowrap; cursor: pointer; }
.control-solo input { width: auto; min-height: 0; }
.control-acc { display: flex; gap: 8px; }
.control-acc button { flex: 1; }

.leyenda.leyenda { font-size: 12px; margin: 4px 0 12px; }
.lg { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center;
  justify-content: center; font-weight: 800; font-size: 12px; margin-right: 2px; }
.lg-p { background: var(--good-bg); color: var(--good); } .lg-o { background: var(--warn-bg); color: var(--warn); }
.lg-a { background: var(--crit-bg); color: var(--crit); } .lg-d { background: #e2e8ee; color: #46505c; }

/* Filas compactas, tintadas por estado (para escanear las excepciones de un vistazo). */
.cp-lista { display: flex; flex-direction: column; gap: 6px; }
.cp-fila { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: var(--r-sm);
  flex-wrap: wrap; }
.cp-fila.st-observacion { border-left-color: var(--warn); }
.cp-fila.st-ausente    { border-left-color: var(--crit); }
.cp-fila.st-descanso   { border-left-color: #6b7683; }
.cp-fila.st-sin        { border-left-color: var(--warn); border-left-style: dashed; background: #fffdf7; }
.cp-fila .nom { flex: 1; min-width: 130px; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.cp-fila .nom small { font-weight: 400; color: var(--muted); font-size: 11px; }
.mini { display: flex; gap: 4px; }
.mini label { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #d6dde5; border-radius: 9px; font-weight: 800; font-size: 13px; color: var(--faint);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.mini input { position: absolute; opacity: 0; width: 0; height: 0; }
.mini label.m-p:has(input:checked) { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.mini label.m-o:has(input:checked) { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.mini label.m-a:has(input:checked) { background: var(--crit-bg); border-color: var(--crit); color: var(--crit); }
.mini label.m-d:has(input:checked) { background: #e2e8ee; border-color: #6b7683; color: #46505c; }
.mini label:has(input:focus-visible) { box-shadow: var(--focus); }
.mas { width: 34px; height: 36px; border: none; background: transparent; color: var(--faint);
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; }
.mas:hover { background: var(--brand-050); color: var(--brand); }
.cp-extra2 { flex-basis: 100%; display: none; gap: 8px; margin-top: 8px; }
.cp-fila.abierto .cp-extra2 { display: flex; }
.cp-extra2 select { max-width: 150px; } .cp-extra2 input { flex: 1; }

.control-guardar { position: sticky; bottom: 0; background: var(--card); padding: 12px 0;
  margin-top: 10px; border-top: 1px solid var(--line); }
.control-guardar button { width: 100%; }
@media (max-width: 640px) {
  .control-fecha .boton { padding: 0 12px; font-size: 12.5px; }
  .cp-extra2 { flex-direction: column; } .cp-extra2 select { max-width: none; }
}
/* Filas de una tabla de listado: se distinguen mejor con franjas suaves y más aire. */
table.datos.rayada th, table.datos.rayada td { padding: 12px 13px; }
table.datos.rayada tbody tr:nth-child(even) td { background: #f8fafc; }

/* Acciones en tabla */
.acc { display: inline-block; padding: 7px 14px; font-size: 12px; font-weight: 600; border-radius: 9px;
  text-decoration: none; border: 1px solid var(--line); color: var(--brand);
  background: #fff; white-space: nowrap; transition: background .12s, border-color .12s; }
.acc:hover { background: var(--brand-050); border-color: var(--brand-100); }
.acc + .acc { margin-left: 5px; }
.acc--baja { color: var(--crit); border-color: var(--crit-bd); }
.acc--baja:hover { background: var(--crit-bg); }

/* --------------------------------------------------------------- Estados --- */
.est {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: .2px;
}
.est--pend { background: var(--warn-bg); color: var(--warn); }
.est--ok   { background: var(--good-bg); color: var(--good); }
.est--no   { background: var(--crit-bg); color: var(--crit); }
.est--obs  { background: #fde7cf; color: #8a4b00; }
.est--reg  { background: #e2e8ee; color: #35495e; }

/* Estado vacío: en vez de una tabla o pantalla muda, guía qué hacer. */
.vacio { text-align: center; padding: 42px 22px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-md); background: #fbfcfe; }
.vacio .icono { font-size: 32px; line-height: 1; opacity: .55; margin-bottom: 10px; }
.vacio h3 { margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 700; }
.vacio p { margin: 0 0 14px; font-size: 13.5px; }

/* Casillas para elegir cuáles marcas faltaron: opciones tocables, no texto libre. */
.marcas-check { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.mk { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 13.5px; color: var(--ink);
  padding: 11px 14px; border: 1.5px solid #d6dde5; border-radius: var(--r-sm); cursor: pointer;
  min-height: var(--ctrl-h); transition: background .12s, border-color .12s; }
.mk:hover { background: var(--brand-050); border-color: var(--brand-100); }
.mk:has(input:checked) { background: var(--brand-050); border-color: var(--brand); font-weight: 600; }
.mk input { width: auto; min-height: 0; accent-color: var(--brand); }
@media (max-width: 640px) { .marcas-check { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ Buscador (combo) --- */
.combo { position: relative; }
.combo-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238792a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat; background-position: 12px center; padding-left: 38px !important;
}
.combo-list {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); max-height: 300px; overflow: auto; display: none; padding: 6px;
}
.combo-list.open { display: block; }
.combo-opt {
  padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: baseline; gap: 12px;
}
.combo-opt:hover, .combo-opt.active { background: var(--brand-050); }
.combo-opt .nom { font-weight: 600; color: var(--ink); }
.combo-opt .sub { color: var(--faint); font-size: 12px; white-space: nowrap; }
.combo-opt mark { background: #fff2b8; color: inherit; border-radius: 3px; padding: 0 1px; }
.combo-empty { padding: 12px; color: var(--muted); text-align: center; font-size: 13px; }
.combo-elegido {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px;
  background: var(--brand-050); color: var(--brand); border: 1px solid var(--brand-100);
  padding: 4px 10px; border-radius: var(--r-pill); font-weight: 600;
}

/* --------------------------------------------------------- Papel / firmas -- */
.nota {
  border: 1.5px solid #333; padding: 12px; font-size: 11.5px; line-height: 1.55;
  background: #fbfbe8; border-radius: 4px;
}
.firmas { display: flex; gap: 40px; margin-top: 44px; }
.firmas div { flex: 1; text-align: center; font-size: 11px; border-top: 1px solid #333; padding-top: 7px; }
.pie { text-align: center; font-size: 12px; color: var(--muted); margin: 16px 0; }

/* Bitácora */
.bitacora { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.bitacora li { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.bitacora li:last-child { border-bottom: none; }
.bitacora .cuando { color: var(--faint); }

.solo-imprimir { display: none; }

/* Secciones dentro de una pantalla larga */
h2.seccion {
  font-size: 15px; color: var(--brand); margin: 30px 0 6px; font-weight: 700;
  border-bottom: 2px solid var(--brand-100); padding-bottom: 6px;
}
h2.seccion .chip { background: #ffcf47; color: #4a3800; }

/* Pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 20px; }
.pest {
  padding: 9px 18px; text-decoration: none; font-size: 13px; font-weight: 600;
  color: var(--muted); background: transparent; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .12s, border-color .12s;
}
.pest:hover { color: var(--brand); }
.pest--activa { color: var(--brand); border-bottom-color: var(--brand); }

/* Personal */
.fila-dir td { background: var(--brand-050); border-top: 2px solid var(--brand); font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------------- Celular --- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .hoja { margin: 0; padding: 18px 15px; border-radius: 0; border-left: none; border-right: none; box-shadow: none; }
  .encabezado { gap: 10px; } .encabezado img { height: 42px; }
  .institucion { font-size: 15px; } .gestion, .formulario-titulo { font-size: 11px; }
  .fila { flex-direction: column; gap: 0; }
  .barra { flex-direction: column; align-items: stretch; padding: 11px 15px; }
  .barra-top { width: 100%; justify-content: space-between; }
  .barra-toggle { display: block; }
  .barra-menu { display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 3px; margin-top: 6px; }
  .barra-menu.abierta { display: flex; }
  .barra-menu a { padding: 11px 12px; border-radius: 8px; }
  .barra-sep { display: block; margin: 2px 0 0; }
  .firmas { flex-direction: column; gap: 26px; }
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones button, .acciones .boton { width: 100%; justify-content: center; padding: 13px; }

  table.datos, table.datos tbody, table.datos tr, table.datos td { display: block; width: 100%; }
  table.datos { border: none; background: transparent; }
  table.datos thead { display: none; }
  table.datos tr { border: 1px solid var(--line); border-radius: var(--r-sm);
    margin-bottom: 12px; padding: 4px 0; background: #fff; box-shadow: var(--sh-sm); }
  table.datos td { border: none; border-bottom: 1px solid var(--line-2); padding: 9px 13px; }
  table.datos td:last-child { border-bottom: none; }
  table.datos td::before { content: attr(data-th); display: block;
    font-size: 10px; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; font-weight: 700; }
  table.datos th { display: block; width: 100% !important; border: none; background: transparent;
    padding: 9px 13px 0; font-size: 10px; text-transform: uppercase; color: var(--faint); }
  @media (max-width: 640px) { .fila-dir td::before { content: none; } }
}

/* ------------------------------------------------------------- Impresión --- */
/* Carta (el formato usual de la alcaldía). Se compacta el espaciado SOLO al
   imprimir, para que hasta el caso más cargado —descargo largo, visto bueno y
   resolución con nota, nombres y cargos largos— entre en una sola hoja. En
   pantalla el documento sigue holgado y legible. */
@media print {
  body { background: #fff; }
  .no-imprimir { display: none !important; }
  .solo-imprimir { display: flex !important; }
  .hoja { max-width: none; margin: 0; border: none; border-radius: 0; padding: 0; box-shadow: none;
          font-size: 12.5px; }
  .barra { display: none !important; }
  table.datos { box-shadow: none; }
  table.datos th, table.datos td { padding: 6px 12px; }
  .encabezado img { height: 48px; }
  .direccion-nombre { margin: 7px 0 !important; padding-bottom: 6px !important; }
  .hoja h2 { margin-top: 11px !important; margin-bottom: 4px !important; font-size: 14.5px; }
  .hoja p  { margin-top: 5px; margin-bottom: 5px; }
  .traza { margin-top: 10px !important; padding: 10px 14px !important; }
  .traza p { line-height: 1.45 !important; }
  .firmas { margin-top: 22px; }
  @page { size: letter; margin: 12mm 15mm; }

  /* Reporte de contrato: al imprimir se muestran TODAS las direcciones expandidas
     (aunque en pantalla estén colapsadas) y se evita cortar una dirección o una
     fila entre páginas. */
  .dir-det, .dir-det[open] { border: 1px solid #bbb; margin-top: 7px; page-break-inside: auto; }
  .dir-det > .dir-cuerpo { display: block !important; }
  .dir-det > summary { background: #eef2f5; padding: 5px 10px; }
  .dir-det .dir-nom::before { content: '' !important; margin: 0 !important; }
  /* filas compactas para gastar menos papel (en pantalla siguen holgadas) */
  .dir-det .datos th, .dir-det .datos td { padding: 2px 9px; line-height: 1.25; }
  .dir-det .datos small { font-size: 9px; color: #555; }
  .dir-det .datos tr { break-inside: avoid; page-break-inside: avoid; }
  .dir-det .est { padding: 0 5px; }
}