/* Panel Color Flex: diseño adaptable, primero celular. Sin dependencias externas.
   Identidad según el Manual de marca Color Flex:
   - Paleta: #fc4b2d, #000000, #666460, #e5dfdd, #ffffff (págs. de color).
   - Títulos en Alexandria, textos en Poppins, datos técnicos en Azeret Mono.
   - Combinaciones permitidas: texto negro sobre naranja, blanco sobre negro,
     negro o naranja sobre #e5dfdd y sobre blanco.
   - Etiquetas en forma de píldora con borde fino; íconos de línea con bordes redondeados.
   - El naranja se usa en superficies, bordes y cifras grandes; el texto pequeño va en negro
     o gris oscuro para conservar la legibilidad. */

@font-face { font-family: "Alexandria"; font-weight: 400; font-display: swap; src: url("fuentes/alexandria-latin-400-normal.7f09ac6af14a.woff2") format("woff2"); }
@font-face { font-family: "Alexandria"; font-weight: 700; font-display: swap; src: url("fuentes/alexandria-latin-700-normal.c1c892c4b9dd.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fuentes/poppins-latin-400-normal.9212f6f9860f.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fuentes/poppins-latin-500-normal.a09f2fccfee3.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fuentes/poppins-latin-600-normal.72993dddf88a.woff2") format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-weight: 400; font-display: swap; src: url("fuentes/azeret-mono-latin-400-normal.114dca1169b7.woff2") format("woff2"); }

:root {
  /* Paleta oficial */
  --naranja: #fc4b2d;
  --negro: #000000;
  --gris: #666460;
  --arena: #e5dfdd;
  --blanco: #ffffff;
  /* Usos derivados (solo transparencias de la paleta oficial) */
  --linea: rgba(0, 0, 0, .55);
  --linea-suave: rgba(0, 0, 0, .14);
  --naranja-suave: rgba(252, 75, 45, .12);
  --titulos: "Alexandria", "Poppins", system-ui, sans-serif;
  --textos: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radio: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 15px/1.55 var(--textos); color: var(--negro); background: var(--arena); }
a { color: var(--negro); text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--gris); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* --- Encabezado: fondo negro plano con el isotipo naranja (manual: fondos planos) --- */
header { background: var(--negro); color: var(--blanco); }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 1rem; max-width: 1240px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: .75rem; color: var(--blanco); text-decoration: none; margin-right: auto; }
.marca:hover { color: var(--blanco); }
/* Área de seguridad del isotipo: el margen alrededor equivale a la altura de la "O". */
.marca img { height: 24px; width: auto; margin: 4px 0; display: block; }
.marca span { font: 700 .95rem/1.15 var(--titulos); text-transform: uppercase; letter-spacing: .02em; border-left: 1px solid var(--gris); padding-left: .75rem; }
nav { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; order: 3; }
nav a { color: var(--blanco); text-decoration: none; padding: .3rem .85rem; border: 1px solid var(--gris); border-radius: 999px; font-size: .88rem; white-space: nowrap; }
nav a:hover { color: var(--blanco); border-color: var(--blanco); }
nav a.activo { background: var(--naranja); border-color: var(--naranja); color: var(--negro); font-weight: 600; }
.sesion { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--arena); }
.sesion form { margin: 0; }
.sesion button[type=submit] { background: transparent; color: var(--blanco); border: 1px solid var(--blanco); padding: .2rem .8rem; border-radius: 999px; cursor: pointer; font: inherit; }
.sesion button[type=submit]:hover { background: var(--blanco); color: var(--negro); }

/* --- Contenido --- */
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 2rem; flex: 1; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; }
.literal { text-transform: none; }
h1 { font-size: clamp(1.5rem, 4.5vw, 2.3rem); margin: .3rem 0 1.1rem; }
h2 { font-size: 1.1rem; margin: 1.8rem 0 .7rem; }
ol, ul { padding-left: 1.3rem; }
li { margin-bottom: .3rem; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; }
.tarjeta .cifra { font: 700 2.4rem/1 var(--titulos); color: var(--naranja); }
.tarjeta .etiqueta { display: inline-block; margin-top: .6rem; padding: .1rem .7rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .8rem; color: var(--negro); }

.tabla-contenedor { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { font: 700 .76rem/1.2 var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: var(--negro); background: var(--blanco); border-bottom: 1px solid var(--linea); white-space: nowrap; }
tbody tr:hover td { background: rgba(229, 223, 221, .45); }
tr.con-error td { background: var(--naranja-suave); }
tr.con-error td:first-child { box-shadow: inset 4px 0 0 var(--naranja); }
td:first-child { white-space: nowrap; }

/* --- Formularios --- */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1rem; }
.filtros label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--gris); font-weight: 500; }
input, select, textarea { font: inherit; color: var(--negro); padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--naranja); outline-offset: 0; border-color: var(--naranja); }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--naranja); }
.boton, button[type=submit] { display: inline-flex; align-items: center; gap: .4rem; background: var(--naranja); color: var(--negro); border: 1px solid var(--naranja); padding: .5rem 1.15rem; border-radius: 999px; text-decoration: none; cursor: pointer; font: 600 .92rem/1.3 var(--textos); }
.boton:hover, button[type=submit]:hover { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.boton.secundario { background: transparent; color: var(--negro); border: 1px solid var(--negro); }
.boton.secundario:hover { background: var(--negro); color: var(--blanco); }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.formulario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem; max-width: 660px; }
.formulario p { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .9rem; }
.formulario p label { font-weight: 600; font-size: .9rem; }
.formulario .helptext { color: var(--gris); font-size: .82rem; }
.errorlist { list-style: none; color: var(--negro); margin: .2rem 0; padding: .35rem .7rem; font-size: .86rem; background: var(--naranja-suave); border-left: 4px solid var(--naranja); border-radius: 6px; }

/* --- Mensajes y estados --- */
.mensaje, .aviso { padding: .7rem 1rem; border-radius: var(--radio); margin: 0 0 1rem; background: var(--blanco); border: 1px solid var(--linea); border-left-width: 6px; }
.mensaje.success { border-left-color: var(--negro); }
.mensaje.error { border-color: var(--naranja); border-left-color: var(--naranja); }
.mensaje.warning, .aviso { border-left-color: var(--gris); }
.estado { display: inline-flex; align-items: center; gap: .35rem; padding: .05rem .65rem; border: 1px solid var(--negro); border-radius: 999px; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gris); }
.estado.ACTIVO::before, .estado.APLICADO::before, .estado.VALIDADO::before { background: var(--negro); }
.estado.ACTIVO::before, .estado.ACTIVA::before, .estado.VALIDA::before, .estado.OTORGADO::before { background: var(--negro); }
.estado.BAJA, .estado.CON_ERRORES, .estado.REVOCADA, .estado.DUPLICADA, .estado.REVOCADO { border-color: var(--naranja); }
.estado.BAJA::before, .estado.CON_ERRORES::before, .estado.REVOCADA::before, .estado.DUPLICADA::before, .estado.REVOCADO::before { background: var(--naranja); }
.etiqueta-incidencia { display: inline-block; margin: 0 .2rem .2rem 0; padding: 0 .55rem; border: 1px solid var(--naranja); border-radius: 999px; font-size: .74rem; white-space: nowrap; }
.codigo-grande { display: inline-block; font: 400 2rem/1.2 var(--mono); letter-spacing: .12em; padding: .3rem .9rem; border: 2px solid var(--negro); border-radius: var(--radio); background: var(--blanco); }
.foto-evidencia { display: block; max-width: min(100%, 360px); height: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.acciones form { margin: 0; }
.formulario .texto { margin: 0 0 1rem; }
.foto-evidencia { margin-bottom: 1rem; }
td .boton, td button[type=submit] { white-space: nowrap; padding: .3rem .8rem; font-size: .82rem; }
td form { display: inline; margin: 0 .4rem 0 0; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; margin: 0 0 1rem; }
.ficha dt { color: var(--gris); font-size: .88rem; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.paginacion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; font-size: .88rem; }
code { font-family: var(--mono); background: var(--arena); padding: .05rem .4rem; border-radius: 6px; font-size: .82rem; }
.dato { font-family: var(--mono); font-size: .86rem; }

/* --- Pie: banda con borde fino como en el manual --- */
.pie { max-width: 1240px; width: calc(100% - 2rem); margin: 0 auto 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .45rem 1.1rem; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--gris); font-size: .78rem; }

/* --- Inicio de sesión --- */
.pantalla-entrada { display: grid; gap: 1.5rem; align-items: center; max-width: 1100px; margin: 1rem auto 2rem; }
.presentacion { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
/* Logotipos: archivos SVG oficiales, sin recortes, sombras ni efectos.
   Espacio seguro: medida x = altura de la "O" (manual, pág. 13), 0.467 veces la altura del logotipo
   simplificado. En la submarca se aplica la misma proporción. */
.presentacion { --x-submarca: 26px; --x-logo: 72px; }
.presentacion .logo-simplificado { display: none; }
.presentacion .submarca { width: 200px; height: auto; margin: calc(var(--x-submarca) - 1.6rem) 0 0; }
.presentacion .submarca + .lema { margin-top: calc(var(--x-submarca) - 1.6rem); }
.lema { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; font: 700 clamp(.95rem, 3.6vw, 1.5rem)/1 var(--titulos); text-transform: uppercase; }
.presentacion .lema { color: var(--negro); }
.lema span { border: 1.5px solid var(--negro); border-radius: 999px; padding: .4rem .8rem; }
.presentacion p { margin: 0; color: var(--gris); max-width: 34rem; }
.entrada { width: 100%; max-width: 420px; }
.entrada h1 { font-size: 1.5rem; }
.entrada .formulario { padding: 1.5rem; }
.entrada .formulario input:not([type=hidden]) { width: 100%; }
.entrada button[type=submit] { width: 100%; justify-content: center; padding: .65rem 1rem; }
/* Textura geométrica inspirada en el isotipo (manual: texturas visuales) */
.textura { height: 96px; margin-top: 1rem; border-radius: var(--radio); background-color: var(--naranja); background-repeat: space;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23e5dfdd' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: center 0; }

@media (min-width: 900px) {
  nav { width: auto; order: 0; }
  .marca { margin-right: 1rem; }
  .sesion { margin-left: auto; }
  main { padding: 1.75rem 1.5rem 2.5rem; }
  .pie { border-radius: 999px; }
}
@media (min-width: 1100px) {
  .pantalla-entrada { grid-template-columns: 1fr 420px; gap: 3rem; margin-top: 3rem; }
  /* En pantallas anchas, logotipo a 600 px (155 px de alto: x = 72 px de espacio seguro). */
  .presentacion .logo-simplificado { display: block; width: 600px; height: auto; margin: calc(var(--x-logo) - 1.6rem) 0; }
  .presentacion .submarca { display: none; }
}
@media print {
  header, .pie, .acciones, .filtros, .paginacion { display: none; }
  body { background: var(--blanco); }
}

/* Formulario de consentimiento para imprimir y firmar (Fase 3). */
.documento { max-width: 760px; background: var(--blanco); border: 1px solid var(--gris); border-radius: 16px; padding: 32px; }
.documento h2 { margin-top: 1.4em; font-size: 1.05rem; }
.documento ol, .documento ul { padding-left: 1.3em; }
.documento li { margin: 0.35em 0; }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.firmas div { border-top: 1px solid var(--negro); padding-top: 6px; font-size: 0.9rem; }
.casilla { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--negro); margin-right: 8px; vertical-align: -2px; }
@media print {
  body { background: #fff; }
  header, nav, footer, .acciones, .mensaje, .no-imprimir { display: none !important; }
  .documento { border: 0; padding: 0; max-width: none; }
}


/* Firma en pantalla del consentimiento y su constancia (ADR-0010). */
[hidden] { display: none !important; }
.firma-consentimiento { max-width: 760px; margin-top: 1.5rem; }
.firma-consentimiento .opciones, .firma-consentimiento .declaraciones { display: grid; gap: .6rem; }
.opcion { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; line-height: 1.35; }
.opcion input { flex: none; margin-top: .15rem; }
.opcion input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--naranja); }
.lienzo-firma { display: block; width: 100%; height: 200px; background: #fff; border: 2px dashed var(--gris); border-radius: 12px; touch-action: none; cursor: crosshair; }
.firma-imagen { display: block; max-width: 360px; width: 100%; border-bottom: 1px solid var(--negro); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-marcada { list-style: none; padding-left: 0; }
.lista-marcada li::before { content: "\2611"; margin-right: .5rem; }
.huella { word-break: break-all; font-size: .8rem; }
.pequeno { font-size: .8rem; color: var(--gris); }
@media print {
  .documento .ficha { break-inside: avoid; }
  .firma-imagen { max-width: 300px; }
}

/* Documento con la identidad Color Flex (manual de marca): membrete con el logotipo simplificado
   oficial y su espacio seguro (x = 0.467 x alto del logotipo = 28 px a 60 px de alto), franja
   naranja plana, títulos en Alexandria, sello de decisión en negro sobre naranja y pie con el lema
   en píldoras. Lo firmado (el texto) no cambia: el membrete va por fuera y la huella se conserva. */
.documento-marca { position: relative; overflow: hidden; border-top: 10px solid var(--naranja); padding-top: 0; }
.membrete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 1.4rem; padding: 28px 0; border-bottom: 1.5px solid var(--negro); }
.membrete-logo { display: block; width: 232px; max-width: 70%; height: auto; }
.membrete-datos { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; font-size: .82rem; color: var(--gris); }
.membrete-area { font: 700 .82rem/1.2 var(--titulos); text-transform: uppercase; letter-spacing: .04em; color: var(--negro); }
.documento-marca h1 { font-size: clamp(1.25rem, 3.4vw, 1.7rem); margin: 0 0 .5rem; }
.documento-marca h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: .8rem; background: var(--naranja); border-radius: 999px; }
.documento-marca h2 { display: flex; align-items: center; gap: .6rem; font-size: .98rem; margin: 1.7rem 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--linea-suave); }
.documento-marca h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); }
.documento-marca > p.dato:first-of-type { display: inline-block; border: 1px solid var(--negro); border-radius: 999px; padding: .15rem .7rem; }
.documento-marca strong { font-weight: 600; }
.sello { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1.1rem; border-radius: var(--radio); background: var(--naranja); color: var(--negro); }
.sello.NO_ACEPTA { background: var(--arena); }
.sello p { margin: 0; font-weight: 600; flex: 1 1 18rem; }
.sello-etiqueta { font: 700 .9rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .04em; border: 1.5px solid var(--negro); border-radius: 999px; padding: .4rem .9rem; background: var(--blanco); }
.bloque-firma { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 2rem; }
.bloque-firma p { margin: 0; font-size: .9rem; }
.documento-marca .ficha { background: var(--arena); border-color: var(--arena); }
.pie-documento { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1.5px solid var(--negro); font-size: .75rem; color: var(--gris); }
.lema-documento { font-size: .62rem; gap: .25rem; }
.lema-documento span { padding: .25rem .55rem; border-width: 1px; }
@media (max-width: 560px) {
  .membrete-datos { align-items: flex-start; text-align: left; }
}
@media print {
  @page { size: letter; margin: 14mm 15mm 16mm; }
  .documento-marca { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-top: 8px solid var(--naranja); border-radius: 0; }
  .documento-marca h2 { break-after: avoid; }
  .sello, .bloque-firma, .pie-documento { break-inside: avoid; }
  .documento-marca { font-size: 9.5pt; line-height: 1.45; }
  .documento-marca h2 { margin: 1.1rem 0 .4rem; }
  .documento-marca p, .documento-marca li { margin-top: .25em; margin-bottom: .35em; }
  .membrete { padding: 20px 0; margin-bottom: 1rem; }
  .pie-documento { margin-top: 1.2rem; }
}

/* Vacaciones (Fase 5) */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; width: auto; order: 0; }
.subnav a { color: var(--negro); text-decoration: none; padding: .3rem .9rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .9rem; background: var(--blanco); }
.subnav a:hover { color: var(--negro); border-color: var(--negro); }
.subnav a.activo, .subnav a.activo:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.saldo-vacaciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-width: 560px; margin: 0 0 1rem; }
.saldo-vacaciones div { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .7rem .9rem; display: flex; flex-direction: column; }
.saldo-vacaciones div:first-child { background: var(--naranja); border-color: var(--naranja); }
.saldo-vacaciones .cifra { font: 700 2rem/1.1 var(--titulos); }
.saldo-vacaciones span:last-child { font-size: .85rem; }
.estado.APROBADA::before { background: var(--negro); }
.estado.PENDIENTE::before { background: var(--gris); }
.estado.RECHAZADA, .estado.CANCELADA { border-color: var(--naranja); }
.estado.RECHAZADA::before, .estado.CANCELADA::before { background: var(--naranja); }
.mes-calendario { align-self: center; font-family: var(--titulos); text-transform: uppercase; }
.calendario-vacaciones th, .calendario-vacaciones td { text-align: center; padding: .25rem; min-width: 1.6rem; }
.calendario-vacaciones td:first-child, .calendario-vacaciones th:first-child { text-align: left; white-space: nowrap; }
.calendario-vacaciones .domingo { background: var(--arena); }
.calendario-vacaciones td.aprobada, .muestra.aprobada { background: var(--negro); }
.calendario-vacaciones td.pendiente, .muestra.pendiente { background: var(--gris); }
.calendario-vacaciones td.coincide, .muestra.coincide { background: var(--naranja); }
.muestra { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; }
@media (max-width: 560px) { .saldo-vacaciones .cifra { font-size: 1.5rem; } }

/* Aviso de vacaciones por aprobar en Inicio */
.aviso-pendiente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; margin: 0 0 1.25rem; background: var(--blanco); border: 1px solid var(--linea); border-left: 6px solid var(--naranja); border-radius: var(--radio); }

/* Asistencia (Fase 4) */
.jornadas tr.libre td { color: var(--gris); background: var(--arena); }
.jornadas tr.alerta td:first-child { box-shadow: inset 4px 0 0 var(--naranja); }
.jornadas .nota { color: var(--gris); font-size: .85em; }
form.en-linea { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
form.en-linea input { width: auto; min-width: 9rem; }
.estado.DISPONIBLE, .estado.APROBADO { border-color: var(--naranja); }
.estado.VENCIDO, .estado.ANULADO { color: var(--gris); }
.saldo-vacaciones.resumen-asistencia { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 900px; }
@media (max-width: 700px) { .saldo-vacaciones.resumen-asistencia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Recibo de horas extra (impresión en carta, uno por hoja) */
.recibo { margin-bottom: 2rem; }
.recibo-datos { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
.recibo-tabla { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.recibo-tabla th { text-align: left; border-bottom: 1.5px solid var(--negro); padding: .3rem .4rem; }
.recibo-tabla td { padding: .25rem .4rem; border-bottom: 1px solid var(--linea); }
.recibo-tabla td.dato, .recibo-tabla th:nth-child(n+4) { text-align: right; }
.recibo-tabla tfoot td { border-bottom: 0; }
.recibo-tabla tr.total td { font-weight: 700; border-top: 2px solid var(--naranja); font-size: 1rem; }
.recibo-letras { padding: .6rem .8rem; background: var(--arena); border-radius: 8px; }
@media print {
  .recibo { break-after: page; margin: 0; }
  .recibo:last-of-type { break-after: auto; }
  .recibo-tabla { font-size: 9.5pt; }
}
.recibo-tabla td:first-child, .recibo-tabla th:first-child { text-align: left; }
@media print {
  @page { size: letter; margin: 10mm 12mm; }
  .recibo .membrete { padding: 10px 0; margin-bottom: .6rem; }
  .recibo .membrete-logo { width: 170px; }
  .recibo h1 { font-size: 1.1rem; margin: 0 0 .3rem; }
  .recibo h1::after { height: 4px; margin-top: .4rem; }
  .recibo .recibo-datos { font-size: 9pt; padding: .4rem .6rem; }
  .recibo-tabla { font-size: 8.5pt; margin: .5rem 0; }
  .recibo-tabla td, .recibo-tabla th { padding: .12rem .3rem; }
  .recibo p { font-size: 9pt; margin: .35rem 0; }
  .recibo .firmas { margin-top: 28px; }
}
@media print {
  .recibo .recibo-datos { grid-template-columns: max-content 1fr max-content 1fr; gap: .1rem .8rem; }
  .recibo-tabla { font-size: 8pt; }
  .recibo-tabla td, .recibo-tabla th { padding: .05rem .3rem; line-height: 1.25; }
  .recibo .firmas { margin-top: 22px; }
  .recibo .membrete { padding: 6px 0; }
}
.saldo-vacaciones.montos .cifra { font-size: 1.45rem; white-space: nowrap; }
@media print {
  .recibo .pie-documento { margin-top: 14px; padding-top: 8px; }
  .recibo .lema-documento span { font-size: 7.5pt; padding: 2px 8px; }
}

/* Reportes (Fase 6): tabla ancha, en carta horizontal al imprimir */
.documento-reporte { max-width: none; }
.tabla-reporte { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabla-reporte th { text-align: left; vertical-align: bottom; border-bottom: 1.5px solid var(--negro); padding: .3rem .4rem; }
.tabla-reporte td { padding: .22rem .4rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-reporte td.numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-reporte td.corto { white-space: nowrap; }
.tabla-reporte tr.total td { font-weight: 700; border-top: 2px solid var(--naranja); border-bottom: 0; }
@page reporte { size: letter landscape; margin: 10mm 10mm 12mm; }
@media print {
  .documento-reporte { page: reporte; font-size: 8pt; }
  .documento-reporte .tabla-contenedor { overflow: visible; border: 0; }
  .tabla-reporte { font-size: 7.5pt; }
  .tabla-reporte thead { display: table-header-group; }
  .tabla-reporte tr { break-inside: avoid; }
  .tabla-reporte td, .tabla-reporte th { padding: .08rem .25rem; }
}

/* Avisos por correo */
.tarjeta-aviso { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.2rem; margin-bottom: 1rem; max-width: 760px; }
.tarjeta-aviso h2 { margin-top: 0; font-size: 1.05rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.tarjeta-aviso textarea { width: 100%; }
.tarjeta-aviso .formulario { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; max-width: none; }

/* Novedades del empleado en Inicio */
.novedades { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem 1.2rem; margin-bottom: 1.2rem; max-width: 760px; }
.novedades h2 { margin-top: 0; font-size: 1.05rem; }
.novedades ul { list-style: none; padding: 0; margin: 0 0 .6rem; }
.novedades li { padding: .45rem 0; border-bottom: 1px solid var(--linea-suave, var(--linea)); }
.novedades li:last-child { border-bottom: 0; }
.novedades li.no-leida { font-weight: 600; }
.novedades li.no-leida::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 50%; background: var(--naranja); }

/* Finiquito (Fase 8): texto autorizado, una hoja carta por parte */
.finiquito { margin-bottom: 2rem; }
.finiquito-titulo { font-size: 1.15rem; }
.finiquito p { text-align: justify; }
.finiquito-seccion { font-weight: 700; margin-top: 1rem; }
.finiquito-tabla { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.finiquito-tabla td { padding: .3rem .4rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.finiquito-tabla td.numero { text-align: right; white-space: nowrap; }
.finiquito-tabla tr.total td { font-weight: 700; border-top: 2px solid var(--naranja); border-bottom: 0; }
.finiquito-firma { display: flex; gap: 2rem; align-items: flex-end; margin-top: 3.5rem; }
.finiquito-firma-linea { flex: 1; border-top: 1px solid var(--negro); padding-top: .4rem; text-align: center; }
.finiquito-huella { width: 110px; height: 120px; border: 1px solid var(--gris); border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding-bottom: .3rem; }
@media print {
  .finiquito { break-after: page; margin: 0; font-size: 9.5pt; }
  .finiquito:last-of-type { break-after: auto; }
  .finiquito p { margin: .3rem 0; }
  .finiquito-tabla td { padding: .12rem .3rem; }
  .finiquito-firma { margin-top: 2.2rem; }
}
@media print {
  .finiquito { font-size: 8.6pt; line-height: 1.32; }
  .finiquito .membrete { padding: 6px 0; margin-bottom: .4rem; }
  .finiquito .membrete-logo { width: 150px; }
  .finiquito-titulo { font-size: 11pt; margin: 0 0 .3rem; }
  .finiquito-titulo::after { height: 4px; margin-top: .3rem; }
  .finiquito p { margin: .18rem 0; }
  .finiquito-tabla { margin: .35rem 0; }
  .finiquito-tabla td { padding: .05rem .3rem; line-height: 1.25; }
  .finiquito-firma { margin-top: 1.6rem; break-inside: avoid; }
  .finiquito-huella { height: 90px; width: 95px; }
  .finiquito .pie-documento { margin-top: 10px; padding-top: 6px; }
  .finiquito .lema-documento span { font-size: 7pt; padding: 1px 7px; }
}
.formulario-finiquito fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem 1rem; margin: 0 0 1rem; }
.formulario-finiquito legend { font-weight: 700; padding: 0 .4rem; }
.tabla-pagos input, .tabla-pagos select { width: 100%; min-width: 8rem; }
.finiquito-tabla tr.subtotal td { font-weight: 700; border-top: 1px solid var(--negro); }
.finiquito-pagos th { text-align: left; font-size: .8rem; border-bottom: 1px solid var(--negro); padding: .2rem .3rem; }
.finiquito-pagos .linea-firma { border-bottom: 1px solid var(--negro); min-width: 7rem; }
@media print { .finiquito-pagos th { font-size: 7.5pt; } }
.finiquito-tabla { table-layout: fixed; }
.finiquito-tabla td { overflow-wrap: anywhere; }
.finiquito-tabla td.numero, .finiquito-tabla th.numero { width: 8.5rem; }
.finiquito-pagos th:nth-child(1), .finiquito-pagos td:nth-child(1) { width: 5rem; }
.finiquito-pagos th:nth-child(2), .finiquito-pagos td:nth-child(2) { width: 6rem; }
.finiquito-pagos th:nth-child(3), .finiquito-pagos td:nth-child(3) { width: 7rem; }
.finiquito-pagos th:nth-child(4), .finiquito-pagos td:nth-child(4) { width: 7rem; }
@media print {
  .finiquito .pequeno { font-size: 7.2pt; line-height: 1.2; }
  .finiquito-pagos { break-inside: avoid; }
  .finiquito-firma { break-inside: avoid; }
}
.finiquito-tabla td:first-child, .tabla-reporte td:first-child { white-space: normal; }

/* Contratos de ingreso (ADR-0017). */
.contrato { margin-bottom: 2rem; text-align: justify; }
.contrato-titulo { text-align: center; font-size: 1rem; line-height: 1.4; }
.contrato-titulo.espaciado { letter-spacing: .2em; }
.contrato-centro { text-align: center; }
.contrato-espacio { height: .5rem; }
.contrato-acta { line-height: 1.8; }
.contrato-firmas.izquierda { justify-content: flex-start; text-align: left; }
.contrato-firmas.escalonadas { flex-direction: column; gap: 2rem; }
.contrato-firmas.escalonadas .contrato-firma:nth-child(2) { align-self: flex-end; }
.contrato-fecha { text-align: right; }
.contrato-lista li { margin-bottom: .4rem; }
.contrato-firmas { display: flex; gap: 3rem; justify-content: space-around; margin: 3.5rem 0 1.5rem; text-align: center; }
.contrato-firma { flex: 1; max-width: 280px; }
.contrato-linea { display: block; border-top: 1px solid var(--negro); margin-bottom: .3rem; }
.pasos-tramite li { margin-bottom: .3rem; }
.pasos-tramite li.hecho { color: var(--gris); }
.pasos-tramite li.hecho::marker { content: "✓ "; }
@media print {
  .contrato { break-after: page; margin: 0; font-size: 10.5pt; line-height: 1.45; }
  .contrato:last-of-type { break-after: auto; }
}