/* Banco de horas. Sale del wireframe aprobado por el cliente: los tokens, los
   tamaños y los radios son los del dibujo. La fuente se sirve desde aca (la
   politica de contenido no admite tipografias de terceros). */

@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fuentes/plex-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fuentes/plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fuentes/plex-mono-600-latin.woff2') format('woff2');
}

:root {
  --azul: #0C4EA2; --azul-hover: #093B7A; --azul-oscuro: #0B2F5E; --amarillo: #FFE00C;
  --texto: #16202E; --texto-suave: #56606E; --sobre-azul: #D5E2F5;
  --fondo: #F3F5F9; --superficie: #FFFFFF; --borde: #DCE2EB; --borde-campo: #C9D1DC; --linea: #E9EDF3;
  --pend-fondo: #FCEFD9; --pend-texto: #8A4A08;
  --ok-fondo: #E3F1E7;   --ok-texto: #1C6B3A;
  --adj-fondo: #E3ECF8;  --adj-texto: #093B7A;
  --neu-fondo: #E9EDF3;  --neu-texto: #444E5B;
  --rojo: #8E2424;       --rech-fondo: #F6E3E3;
  --pista: #EDF1F6;      --jornada: #C9D8EE;     /* la barra Jornada/Evento */
  --apagado: #7A8390;    --ambar-texto: #6E3B06;   /* texto de los avisos ambar */
  --cob-fondo: #E1F2EF;  --cob-texto: #17695C;     /* la pildora Cobertura de la bandeja */
  --sal-fondo: #F0E7F8;  --sal-texto: #5B2A86;     /* la pildora Salida de la bandeja */
  --elegida: #F4F7FC;    --sin-leer: #EEF3FA;
  --fuente: 'IBM Plex Sans', system-ui, sans-serif;
  --fuente-cifra: 'IBM Plex Mono', ui-monospace, monospace;
  --radio: 10px; --radio-tarjeta: 14px; --radio-heroe: 18px; --radio-pildora: 999px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--fuente); color: var(--texto); background: var(--fondo); }
a { color: var(--azul); }
a:hover { color: var(--azul-hover); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .6; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.num { font-family: var(--fuente-cifra); }
.suave { color: var(--texto-suave); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.arranque { margin: 48px 20px; font-size: 15px; color: var(--texto-suave); text-align: center; }

/* Pildoras de estado: el estado SIEMPRE lleva texto, nunca solo color. */
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radio-pildora); font-size: 12px; font-weight: 600; white-space: nowrap; }
.c-pend { background: var(--pend-fondo); color: var(--pend-texto); }
.c-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.c-adj { background: var(--adj-fondo); color: var(--adj-texto); }
.c-neu { background: var(--neu-fondo); color: var(--neu-texto); }
.c-rech { background: var(--rech-fondo); color: var(--rojo); }
.c-cob { background: var(--cob-fondo); color: var(--cob-texto); }
.c-sal { background: var(--sal-fondo); color: var(--sal-texto); }

/* Los contadores: el de la Bandeja en el menu y el de la campana. */
.contador { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radio-pildora); background: var(--amarillo); color: var(--azul-oscuro); font-size: 12px; font-weight: 700; line-height: 1; }
.campana { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radio); background: transparent; color: #fff; flex-shrink: 0; }
.campana svg { width: 22px; height: 22px; }
.campana:hover { background: #0A4390; }
.campana .contador { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }

.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--amarillo); color: var(--azul-oscuro); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

.estado-vacio { padding: 18px 16px; text-align: center; color: var(--texto-suave); font-size: 13px; line-height: 1.45; }
.estado-vacio b { display: block; color: var(--texto); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.estado-vacio p { margin: 0; }

/* El aviso que confirma o dice que hacer. */
.aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 520px); padding: 12px 16px; border-radius: 12px; background: var(--texto); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 6px 24px rgba(11, 47, 94, .28); }
.aviso.error { background: var(--rojo); }

/* ---------- Botones y campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border: 0; border-radius: var(--radio); background: var(--azul); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--azul-hover); }
.btn.sec { height: 40px; border: 1px solid var(--borde-campo); background: #fff; color: var(--texto); font-size: 13px; }
.btn.sec:hover:not(:disabled) { background: var(--fondo); }
.btn.peligro { color: var(--rojo); border-color: #E3C3C3; }
.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
.inp { width: 100%; height: 44px; border: 1px solid var(--borde-campo); border-radius: var(--radio); padding: 0 12px; font: inherit; font-size: 14px; background: #fff; color: var(--texto); }
.inp.num { font-family: var(--fuente-cifra); }

/* ---------- Colaboradora: el tablero del telefono ---------- */
.movil { min-height: 100vh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; background: var(--fondo); }
.cabecera { height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: var(--azul); color: #fff; border-bottom: 4px solid var(--amarillo); flex-shrink: 0; }
.cabecera .marca { font-weight: 700; font-size: 17px; }
.cabecera .quien { display: flex; align-items: center; gap: 8px; }
.cabecera .quien span { font-size: 13px; color: var(--sobre-azul); }
.movil main { flex-grow: 1; padding: 16px 20px; }
.saldo { display: flex; flex-direction: column; gap: 14px; }

.heroe { background: var(--azul); color: #fff; border-radius: var(--radio-heroe); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.heroe .rotulo { font-size: 13px; color: var(--sobre-azul); }
.heroe .cifra { font-family: var(--fuente-cifra); font-size: 48px; font-weight: 600; line-height: 1.15; color: var(--amarillo); }
.heroe .equivale { font-size: 13px; color: var(--sobre-azul); }
.heroe .pie { margin-top: 12px; padding-top: 12px; border-top: 1px solid #3D6DB3; display: flex; justify-content: space-between; font-size: 13px; }
.heroe .pie span:first-child { color: var(--sobre-azul); }
.heroe .pie .num { font-weight: 600; }

.sin-jornada { background: var(--pend-fondo); border-radius: 12px; }
.sin-jornada, .sin-jornada b { color: var(--ambar-texto); }
.sin-jornada { text-align: left; font-size: 13px; padding: 12px 14px; }

.acciones-movil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.abtn { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 600; border: 1px solid transparent; }
.abtn.primario { background: var(--azul); color: #fff; }
.abtn.secundario { background: #fff; color: var(--texto); border-color: var(--borde-campo); }

.encabezado-lista { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.encabezado-lista h2 { margin: 0; font-size: 15px; font-weight: 700; }
.filtros { display: flex; gap: 6px; }
.filtro { height: 32px; padding: 0 12px; border-radius: var(--radio-pildora); border: 1px solid var(--borde-campo); background: #fff; color: var(--texto); font-size: 13px; }
.filtro[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #fff; font-weight: 600; }
.lista-movimientos { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); display: flex; flex-direction: column; }

.cabecera .izquierda { display: flex; align-items: center; gap: 2px; }
.cabecera .volver { width: 44px; height: 44px; margin-left: -13px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #fff; }
.cabecera .volver svg { width: 18px; height: 18px; }
.cabecera .volver:focus-visible, .cabecera .campana:focus-visible { outline-color: var(--amarillo); }
.cabecera .quien { gap: 6px; }
.cabecera > .campana { margin-right: -10px; }

.aviso-saldo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--pend-fondo); color: var(--ambar-texto); font-size: 13px; line-height: 1.45; }
.aviso-saldo svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.aviso-saldo p { margin: 0; }

.mov { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.mov:last-child { border-bottom: 0; }
.mov-datos { min-width: 0; overflow-wrap: anywhere; }
.mov .titulo { font-size: 15px; font-weight: 700; line-height: 1.35; }
.mov .detalle { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.mov-cifras { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.cifra-mov { font-size: 15px; font-weight: 600; }
.cifra-mov.gana { color: var(--ok-texto); }
.cifra-mov.apagada { color: var(--apagado); }
/* Con el margen negativo de `.enlace` el renglon mide 32 px; el de abajo le quita el aire
   que el area de 44 px dejaria bajo "Cancelar", como en el tablero. */
.acciones-mov { margin-top: 2px; margin-bottom: -6px; }
.confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; }
/* Se ven como enlace, pero el area que se toca mide 44 px: el margen negativo la devuelve al renglon. */
.enlace { min-height: 44px; margin: -6px -6px; padding: 0 6px; border: 0; background: none; color: var(--azul); font-size: 13px; font-weight: 600; }
.enlace:hover:not(:disabled) { color: var(--azul-hover); }
.enlace.peligro { color: var(--rojo); }
.enlace.fuerte { font-size: 13px; font-weight: 700; }

/* ---------- Registrar cobertura ---------- */
.cobertura { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; min-width: 0; }
.etiqueta-campo { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--texto); }
.entrada { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--borde-campo); border-radius: var(--radio); background: #fff; color: var(--texto); font: inherit; font-size: 15px; }
select.entrada { appearance: none; }
.entrada::placeholder { color: var(--apagado); }
.ayuda { margin: 0; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
.dos-horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.campo-evento { position: relative; }
.evento-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; margin-top: 4px; font-size: 12px; color: var(--texto-suave); }
.lista-eventos { position: absolute; top: 72px; left: 0; right: 0; z-index: 20; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(11, 47, 94, .14); }
.opcion-evento { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--linea); background: #fff; color: var(--texto); text-align: left; font-size: 14px; }
.opcion-evento:last-child { border-bottom: 0; }
.opcion-evento:hover, .opcion-evento:focus { background: var(--fondo); }
.opcion-evento:focus-visible { outline-offset: -2px; }
.opcion-evento small { font-size: 12px; color: var(--texto-suave); }
.lista-vacia { margin: 0; padding: 12px; font-size: 13px; color: var(--texto-suave); }
.nuevo-evento { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: #fff; }
.nuevo-evento .botones { display: flex; justify-content: flex-end; gap: 8px; }

.tramos { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-tramo { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.cabeza-tramo { display: flex; justify-content: space-between; align-items: center; margin-bottom: -6px; }
.cabeza-tramo h3 { margin: 0; font-size: 15px; font-weight: 700; }
.segmentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; border: 1px solid var(--borde-campo); border-radius: var(--radio); background: #fff; }
.segmentos button { height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--texto); font-size: 13px; }
.segmentos button[aria-pressed="true"] { background: var(--azul); color: #fff; font-weight: 600; }

.calculo { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linea); }
.calculo-titulo { font-size: 15px; font-weight: 700; }
.calculo-sub { margin-top: -8px; font-size: 12px; color: var(--texto-suave); }
.barra { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; row-gap: 10px; margin-top: 4px; font-size: 12px; color: var(--texto-suave); }
.pista-barra { position: relative; height: 12px; border-radius: 4px; background: var(--pista); }
.seg { position: absolute; top: 0; bottom: 0; left: calc(var(--ini) * 100%); width: calc((var(--fin) - var(--ini)) * 100%); border-radius: 4px; }
.seg-jornada, .seg-solape { background: var(--jornada); }
.seg-evento { background: var(--azul); }
.marcas { grid-column: 2; display: flex; justify-content: space-between; margin-top: -2px; font-family: var(--fuente-cifra); font-size: 11px; color: var(--texto); }
.cifras { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; font-size: 14px; }
.cifras div { display: flex; justify-content: space-between; align-items: baseline; }
.cifras dt { color: var(--texto); }
.cifras dd { margin: 0; font-weight: 500; }
.cifras .acreditar { padding-top: 10px; border-top: 1px solid var(--linea); }
.cifras .acreditar dt { font-weight: 700; }
.cifras .acreditar dd { font-size: 20px; font-weight: 600; color: var(--azul); }

.agregar-tramo { height: 44px; border: 1px dashed var(--borde-campo); border-radius: var(--radio); background: transparent; color: var(--azul); font-size: 14px; font-weight: 600; }
.agregar-tramo:hover { background: #fff; }
.total-cobertura { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); font-size: 15px; font-weight: 700; }
.total-cobertura .num { font-size: 22px; font-weight: 600; color: var(--azul); }

.pie-envio { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; text-align: center; }
.pie-envio .abtn { width: 100%; }
.pie-envio .pista { margin: 0; font-size: 12px; color: var(--texto-suave); }
.error-form { margin: 0; padding: 10px 12px; border-radius: var(--radio); background: var(--rech-fondo); color: var(--rojo); font-size: 13px; line-height: 1.45; text-align: left; }

/* En el escritorio la colaboradora ve las mismas pantallas, a lo ancho de un telefono. */
.contenido .saldo, .contenido .cobertura { width: 100%; max-width: 480px; }
.contenido .avisos { width: 100%; max-width: 640px; }

/* ---------- Aprobador, RRHH y gerencia: la barra lateral ---------- */
.escritorio { display: flex; min-height: 100vh; }
/* La columna azul cubre TODA la pagina (se estira con el contenido); lo de adentro queda
   fijo a la altura de la ventana, con el usuario abajo. */
.lateral { width: 240px; flex-shrink: 0; background: var(--azul); color: #fff; }
.lateral-fijo { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; }
.lateral .marca { padding: 0 12px 20px; }
.lateral .marca .logo { display: block; width: 120px; height: auto; margin-bottom: 14px; }
.lateral .marca b { display: block; font-size: 17px; font-weight: 700; }
.lateral .marca span { display: block; font-size: 12px; color: #C9D8EE; margin-top: 2px; }
.lateral .menu { display: flex; flex-direction: column; gap: 4px; }
.nav { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 12px; border: 0; border-radius: var(--radio); background: transparent; color: #E8EEF8; text-decoration: none; font-size: 14px; font-weight: 500; text-align: left; }
.nav:hover { background: #0A4390; color: #fff; }
.nav.on { background: var(--amarillo); color: var(--azul-oscuro); font-weight: 700; }
.nav.on .contador { background: var(--azul); color: #fff; }
.lateral :focus-visible { outline-color: var(--amarillo); }
.lateral .usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid #3D6DB3; }
.lateral .usuario .quien-es { display: flex; flex-direction: column; min-width: 0; }
.lateral .usuario strong { font-size: 14px; font-weight: 600; }
.lateral .usuario .quien-es span { font-size: 12px; color: #C9D8EE; }
.lateral .usuario .campana { margin-left: auto; margin-right: -8px; }

.contenido { flex-grow: 1; min-width: 0; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.pantalla-config { display: flex; flex-direction: column; gap: 20px; }
.contenido h1 { margin: 0; font-size: 26px; font-weight: 700; }
.contenido .subtitulo { font-size: 14px; color: var(--texto-suave); margin-top: 4px; }

.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tarjeta h2 { margin: 0; font-size: 16px; font-weight: 700; }
.tarjeta .sub { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.tarjeta .nota { font-size: 12px; color: var(--texto-suave); }
.tarjeta .cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.tarjeta .pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.tarjeta .pie .botones { display: flex; flex-wrap: wrap; gap: 8px; }
.dos-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Tablas de las tarjetas. Se desplazan DENTRO de su contenedor: la pagina nunca se desplaza en horizontal. */
.envoltorio-tabla { overflow-x: auto; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.tabla th { font-size: 12px; font-weight: 600; color: var(--texto-suave); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: #F7F9FC; }
.tabla td { font-size: 14px; padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.dia { font-weight: 600; }
.tabla .hora { width: 100%; min-width: 0; height: 40px; border: 1px solid var(--borde-campo); border-radius: 8px; padding: 0 6px; font-family: var(--fuente-cifra); font-size: 13px; background: #fff; color: var(--texto); }
.tabla .almuerzo { display: flex; align-items: center; gap: 6px; }
.tabla tr.libre td.dia { color: var(--texto-suave); }
.yes { font-size: 13px; font-weight: 600; color: var(--ok-texto); }
.no { font-size: 13px; color: var(--apagado); }
.tabla tr.viva { background: #EEF3FA; }

.interruptor { width: 44px; height: 26px; border: 0; border-radius: var(--radio-pildora); background: var(--borde-campo); position: relative; padding: 0; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.interruptor[aria-checked="true"] { background: var(--azul); }
.interruptor[aria-checked="true"]::after { left: auto; right: 3px; }

.copiar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px; border-radius: var(--radio); background: var(--fondo); }
.copiar .campo { flex: 1 1 180px; }

/* Feriados y personas. */
.renglones { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); }
.renglones li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--linea); font-size: 14px; }
.renglones li:last-child { border-bottom: 0; }
.renglones .principal { font-weight: 600; }
.renglones .secundario { font-size: 12px; color: var(--texto-suave); }
.renglones .persona { flex-wrap: wrap; }
.renglones .persona .datos { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.renglones .persona .controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.renglones .persona select.inp { width: 150px; }
.renglones .persona input.inp { width: 120px; }
.lista-feriados { max-height: 260px; overflow-y: auto; }
.nuevo-feriado { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: end; }
.subtitulo-lista { margin: 4px 0 -6px; font-size: 13px; font-weight: 600; color: var(--texto-suave); }

/* ---------- Bandeja de aprobacion (tablero 4) ---------- */
.bandeja { display: flex; flex-direction: column; gap: 20px; }
.bandeja-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.filtros-bandeja .filtro { height: 34px; padding: 0 14px; font-size: 13px; }
.filtros-bandeja .filtro:disabled { opacity: 1; color: var(--apagado); border-color: var(--borde); }
.bandeja-cuerpo { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bandeja.vacia .bandeja-cuerpo { grid-template-columns: minmax(0, 1fr); }
.bandeja.vacia .detalle-solicitud { display: none; }
.lista-solicitudes { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lista-solicitudes .estado-vacio { padding: 40px 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.solicitud { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 44px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; color: var(--texto); text-align: left; }
.solicitud:hover { border-color: var(--borde-campo); }
.solicitud[aria-current="true"] { border: 2px solid var(--azul); padding: 15px; background: var(--elegida); }
.sol-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sol-cabeza b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.sol-linea { font-size: 13px; color: var(--texto-suave); overflow-wrap: anywhere; }
.sol-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--texto-suave); }
.sol-horas { font-size: 14px; font-weight: 600; color: var(--ok-texto); white-space: nowrap; }

.detalle-solicitud { min-width: 0; }
.cargando { margin: 0; padding: 24px; color: var(--texto-suave); font-size: 14px; }
.detalle-cobertura { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.volver-bandeja { display: none; }
.detalle-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.detalle-cabeza h2 { margin: 0; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.detalle-meta { margin-top: 4px; font-size: 13px; color: var(--texto-suave); }
.detalle-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: start; }
.mini { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio); min-width: 0; }
.mini h3 { margin: 0; font-size: 14px; font-weight: 700; }
.sol-evento { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.tramo-solicitud { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
.tramo-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.tramo-titulo span { color: var(--texto-suave); }
.tramo-solicitud .calculo { padding-top: 0; border-top: 0; }
/* En el detalle las tres cifras van en una fila: los botones de decidir quedan a la vista. */
.tramo-solicitud .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; font-size: 12px; }
.tramo-solicitud .cifras div { flex-direction: column; align-items: flex-start; gap: 2px; }
.tramo-solicitud .cifras dt, .tramo-solicitud .cifras .acreditar dt { color: var(--texto-suave); font-weight: 400; }
.tramo-solicitud .cifras .acreditar { padding-top: 0; border-top: 0; }
.tramo-solicitud .cifras dd, .tramo-solicitud .cifras .acreditar dd { font-size: 15px; font-weight: 600; }
.tramo-solicitud .calculo-titulo { font-size: 13px; }
.mini .total-cobertura { padding: 12px 0 0; border: 0; border-top: 1px solid var(--linea); border-radius: 0; }
.nota-persona { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px; border-radius: var(--radio); background: var(--fondo); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.nota-persona b { font-size: 12px; color: var(--texto-suave); }
.filas-saldo { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: 14px; }
.filas-saldo div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.filas-saldo dt { color: var(--texto-suave); }
.filas-saldo dd { margin: 0; font-weight: 600; }

.nota-aprobar { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
.nota-aprobar .campo { width: 100%; max-width: 520px; }
[data-titulo]:focus { outline: none; }
[data-titulo]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.decision { padding-top: 20px; border-top: 1px solid var(--linea); background: #fff; }
/* En el escritorio los botones quedan a la vista aunque la solicitud sea larga. */
@media (min-width: 861px) {
  .decision { position: sticky; bottom: 0; z-index: 2; padding-bottom: 16px; margin-bottom: -16px; }
}
.botones-decision { display: flex; flex-wrap: wrap; gap: 10px; }
.dbtn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radio); background: #fff; color: var(--texto); font-size: 14px; font-weight: 600; white-space: nowrap; }
.dbtn.primario { background: var(--azul); color: #fff; }
.dbtn.primario:hover:not(:disabled) { background: var(--azul-hover); }
.dbtn.contorno { border: 2px solid var(--texto); }
.dbtn.contorno[aria-expanded="true"] { background: var(--fondo); }
.dbtn.peligro { border-color: #E3C3C3; color: var(--rojo); }
.dbtn.peligro[aria-expanded="true"], .dbtn.peligro:hover:not(:disabled) { background: var(--rech-fondo); }
.panel-decision { padding: 16px; border-radius: var(--radio); background: var(--fondo); }
.panel-ajuste { display: flex; flex-direction: column; gap: 14px; }
.ajuste-tramo { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 16px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.ajuste-fecha { display: flex; flex-direction: column; gap: 2px; align-self: center; font-size: 13px; }
.ajuste-fecha span { color: var(--texto-suave); }
.cifras-cortas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; font-size: 12px; }
.cifras-cortas dt { color: var(--texto-suave); }
.cifras-cortas dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.cifras-cortas div:last-child dd { color: var(--azul); }
.panel-ajuste .total-cobertura { padding: 0 0 4px; border: 0; background: transparent; }
.pie-ajuste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pie-ajuste .campo-nota { flex: 1 1 260px; }

/* ---------- Centro de avisos ---------- */
.avisos { display: flex; flex-direction: column; gap: 16px; }
.avisos-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.movil .avisos-cabeza h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.movil .avisos-cabeza { justify-content: flex-end; }
.lista-avisos { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
.lista-avisos li + li { border-top: 1px solid var(--linea); }
.aviso-fila { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 14px 16px; border: 0; background: #fff; color: var(--texto); text-align: left; }
.aviso-fila:hover { background: var(--fondo); }
.aviso-fila:focus-visible { outline-offset: -2px; }
.aviso-fila[data-sin-leer] { background: var(--sin-leer); }
.aviso-fila[data-sin-leer] .aviso-titulo { font-weight: 700; }
.aviso-icono { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--adj-fondo); color: var(--azul); flex-shrink: 0; }
.aviso-icono svg { width: 20px; height: 20px; }
.aviso-texto { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.aviso-titulo { font-size: 14px; line-height: 1.4; }
.aviso-nota { font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.aviso-hora { font-size: 12px; color: var(--apagado); }
.punto { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--azul); flex-shrink: 0; }

/* ---------- Salidas (tablero 3, Aceptar ajuste, el detalle en la bandeja) ---------- */
.cifra-mov.usa { color: var(--rojo); }
.heroe .pie-reservado { margin-top: 0; padding-top: 6px; border-top: 0; }
.salida, .ajuste { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-saldo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px 18px; border-radius: var(--radio-tarjeta); background: var(--azul); color: #fff; }
.tarjeta-saldo > div { display: flex; flex-direction: column; gap: 4px; }
.tarjeta-saldo .derecha { align-items: flex-end; }
.tarjeta-saldo .rotulo { font-size: 13px; color: var(--sobre-azul); }
.tarjeta-saldo .cifra { font-size: 28px; font-weight: 600; color: var(--amarillo); }
.segmentos-salida { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmentos-mitad { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.resumen-salida { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); font-size: 14px; }
.resumen-salida div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resumen-salida dt { color: var(--texto-suave); }
.resumen-salida dd { margin: 0; font-weight: 600; }
.resumen-salida .fuerte { padding-top: 10px; border-top: 1px solid var(--linea); }
.resumen-salida .fuerte:first-child { padding-top: 0; border-top: 0; }
.resumen-salida .fuerte dt { color: var(--texto); font-weight: 700; }
.resumen-salida .fuerte dd { font-size: 18px; color: var(--azul); }
.panel-ajuste .resumen-salida { background: transparent; border: 0; padding: 0; }
.intro-ajuste { margin: 0; font-size: 15px; line-height: 1.45; }
.comparar-ajuste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tarjeta-ajuste { background: #fff; }
.tarjeta-ajuste .horario { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.tarjeta-ajuste .cifra-ajuste { margin: 0; font-size: 22px; font-weight: 600; }
.tarjeta-ajuste.pedido .cifra-ajuste { color: var(--apagado); text-decoration: line-through; }
.tarjeta-ajuste.aprobado { border: 2px solid var(--azul); }
.tarjeta-ajuste.aprobado .cifra-ajuste { color: var(--azul); }
.confirmar-ajuste { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radio); background: var(--rech-fondo); text-align: left; }
.confirmar-ajuste p { margin: 0; font-size: 14px; }
.abtn.peligro { background: #fff; color: var(--rojo); border: 1px solid #E3C3C3; }
.choca { font-weight: 600; color: var(--ambar-texto); }
.columna-salida { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detalle-salida .detalle-tarjetas { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
.lista-lotes, .lista-equipo { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.lista-lotes li, .lista-equipo li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.lista-lotes li:first-child, .lista-equipo li:first-child { border-top: 0; padding-top: 0; }
.lista-lotes li > div, .lista-equipo li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lista-lotes span, .lista-equipo span:not(.chip) { font-size: 12px; color: var(--texto-suave); }
.lista-lotes .num { font-size: 14px; font-weight: 600; color: var(--texto); }
.equipo-salida h3 small { font-weight: 400; color: var(--texto-suave); }
.nota-cruce { margin: 0; padding: 10px 12px; border-radius: var(--radio); background: var(--pend-fondo); color: var(--ambar-texto); font-size: 13px; line-height: 1.45; }

/* ---------- Boletas ---------- */
.boletas { display: flex; flex-direction: column; gap: 16px; }
.boletas h1 { margin: 0; }
.boletas .subtitulo { margin: 0; color: var(--texto-suave); font-size: 14px; }
.filtros-boletas { display: grid; grid-template-columns: minmax(180px, 280px) repeat(2, minmax(150px, 200px)); gap: 12px; align-items: end; }
.lista-boletas { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
.fila-boleta { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px 70px auto; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; color: var(--texto); text-decoration: none; border-top: 1px solid var(--linea); }
.fila-boleta:first-child { border-top: 0; }
.fila-boleta:hover { background: var(--fondo); color: var(--texto); }
.fila-boleta .numero { font-weight: 600; color: var(--azul); }
.fila-boleta .persona { overflow-wrap: anywhere; }
.fila-boleta .fecha { font-size: 13px; color: var(--texto-suave); }
.lista-boletas .estado-vacio { padding: 40px 16px; }
.campo-ancho { grid-column: 1 / -1; }
.advertencia { margin: 6px 0 0; font-size: 13px; color: var(--ambar-texto); }

.boleta { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.barra-boleta { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-anular { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radio); background: var(--rech-fondo); }
.panel-anular p { margin: 0; font-size: 14px; }
.documento-boleta { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); font-size: 14px; }
.cabeza-boleta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 4px solid var(--amarillo); }
.marca-boleta { display: flex; flex-direction: column; gap: 2px; }
.marca-boleta .logo-boleta { display: block; width: 132px; height: auto; }
.marca-boleta span, .numero-boleta span { font-size: 13px; color: var(--texto-suave); }
.numero-boleta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.numero-boleta b { font-size: 20px; }
.aviso-anulacion { margin: 0; padding: 10px 12px; border-radius: var(--radio); background: var(--rech-fondo); color: var(--rojo); }
.datos-boleta, .saldo-boleta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
.datos-boleta div, .saldo-boleta div { display: flex; flex-direction: column; gap: 2px; }
.datos-boleta dt, .saldo-boleta dt { font-size: 12px; color: var(--texto-suave); }
.datos-boleta dd, .saldo-boleta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.documento-boleta h3 { margin: 8px 0 0; font-size: 14px; }
.tabla-lotes { width: 100%; border-collapse: collapse; }
.tabla-lotes th, .tabla-lotes td { padding: 8px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-lotes th { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.tabla-lotes .num { text-align: right; }
.constancia { margin: 0; padding-left: 18px; line-height: 1.6; }
.firmas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.firmas div { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 13px; }
.linea-firma { display: block; height: 1px; background: var(--texto); }
.pie-boleta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 11px; color: var(--texto-suave); }
.pie-boleta .huella { font-family: var(--fuente-cifra); overflow-wrap: anywhere; }

/* ---------- Usar en el celular (BH-P8) ---------- */
.celular { display: flex; flex-direction: column; gap: 16px; }
.celular h1 { margin: 0; }
.celular .subtitulo { margin: 0; color: var(--texto-suave); font-size: 14px; }
.pase { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* El QR va sobre blanco fijo y sin escalar en gris: un lector se pierde en un borde suavizado. */
.qr-caja { width: min(264px, 100%); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.qr-caja svg { display: block; width: 100%; height: auto; }
.qr-vencido { font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.pase .instruccion { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.45; }
.pase .cuenta { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.celulares li { flex-wrap: wrap; }
.celulares .datos { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.celulares .controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* ---------- La barra inferior del telefono (BH-34) ---------- */
/* Fija abajo, blanca, con la pestaña activa sobre la pildora amarilla como en la barra lateral.
   Respeta la zona del gesto de inicio (`safe-area-inset-bottom`, con `viewport-fit=cover`). */
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--borde); box-shadow: 0 -2px 12px rgba(11, 47, 94, .06); }
.pestana { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; border: 0; border-radius: var(--radio); background: transparent; color: var(--texto-suave); font-size: 11px; font-weight: 600; text-decoration: none; }
.pestana .icono { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: var(--radio-pildora); }
.pestana svg { width: 22px; height: 22px; }
.pestana .rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pestana:hover { color: var(--azul); }
.pestana.on { color: var(--azul-oscuro); }
.pestana.on .icono { background: var(--amarillo); }
.pestana .contador { position: absolute; top: -4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; background: var(--azul); color: #fff; }
.pestana:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.hoja-mas { position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 29; display: flex; flex-direction: column; padding: 8px 12px; background: #fff; border: 1px solid var(--borde); border-bottom: 0; border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; box-shadow: 0 -8px 24px rgba(11, 47, 94, .12); }
.hoja-mas .opcion { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border: 0; border-radius: var(--radio); background: transparent; color: var(--texto); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; }
.hoja-mas .opcion svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--texto-suave); }
.hoja-mas .opcion.on { background: var(--elegida); color: var(--azul-oscuro); }
.hoja-mas .opcion .contador, .hoja-mas .opcion small { margin-left: auto; }
/* Lo ultimo de cada pantalla no queda debajo de la barra, ni el aviso que aparece abajo. */
.con-barra .movil main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.con-barra .aviso { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 861px) {
  .escritorio .barra-inferior, .escritorio .hoja-mas { display: none; }
  .con-barra .aviso { bottom: 20px; }
}
@media (max-width: 860px) {
  .con-barra .contenido { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Fase 3: lo que vence ---------- */
/* Mi saldo: con "Vencidas" son cuatro filtros y no caben junto al titulo a 390 px: van en su
   propio renglon, del mismo ancho. */
.saldo .encabezado-lista { flex-wrap: wrap; gap: 10px; }
.saldo .filtros { flex: 1 1 100%; }
.saldo .filtro { flex: 1 1 0; min-width: 0; padding: 0 6px; }
/* Mi saldo: las horas por lote (RF-SAL-04), en el orden en que se usan. */
.lotes-saldo { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.lotes-saldo summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 700; cursor: pointer; }
.lotes-saldo ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lote { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.lote:last-child { border-bottom: 0; }
.lote-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lote-datos b { font-size: 14px; }
.lote-datos .detalle, .lote-cifras .vence, .lote-cifras .apartadas { font-size: 12px; color: var(--texto-suave); }
.lote-cifras { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.lote-cifras .num { font-size: 15px; font-weight: 600; }
.lote.pronto .vence { color: var(--ambar-texto); font-weight: 600; }

/* Horas vencidas: una columna de tarjetas, la decision dentro de cada una. */
.vencidas { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; }
.vencidas h1 { margin: 0; }
.venc-ayuda { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.lista-vencidas { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-vencida { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.venc-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.venc-persona { display: block; font-size: 16px; }
.venc-origen { margin-top: 2px; font-size: 14px; color: var(--texto-suave); overflow-wrap: anywhere; }
.venc-cifra { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; font-size: 12px; }
.venc-cifra .num { font-size: 22px; font-weight: 600; color: var(--pend-texto); }
.venc-cuando { margin: 0; font-size: 13px; color: var(--texto); }
.venc-salidas { margin: 0; font-size: 13px; line-height: 1.5; }
.venc-salidas ul { margin: 2px 0 0; padding-left: 18px; }
.venc-respaldo summary { min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--azul); cursor: pointer; }
.venc-respaldo .tabla td { font-size: 13px; padding: 8px 10px; }
.venc-acciones, .venc-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.venc-decision { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radio); background: var(--fondo); }
.venc-pregunta { margin: 0; font-size: 13px; }
.btn.peligro-lleno { background: var(--rojo); }
.btn.peligro-lleno:hover:not(:disabled) { background: #6F1B1B; }

/* Configuracion: el saldo historico. */
.inp.area { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; font-family: var(--fuente-cifra); font-size: 13px; }
.confirmar-historico { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radio); background: var(--pend-fondo); }
.confirmar-historico p { margin: 0; font-size: 14px; color: var(--ambar-texto); }
.confirmar-historico .botones { display: flex; gap: 8px; }
.cargados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cargados:empty { display: none; }

@media (max-width: 860px) {
  .tarjeta-vencida { padding: 16px; }
  .venc-acciones .btn, .venc-botones .btn { flex: 1 1 0; height: 48px; }
  .vencidas .dos-campos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pantallas angostas ---------- */
@media (max-width: 1100px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .detalle-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .ajuste-tramo { grid-template-columns: minmax(0, 1fr); }
}
/* Hasta 860 px la barra lateral es la barra superior del telefono: el titulo, la campana y
   el avatar. Las pantallas van en la barra inferior (BH-34). */
@media (max-width: 860px) {
  .escritorio { flex-direction: column; }
  .lateral { width: auto; border-bottom: 4px solid var(--amarillo); }
  .lateral-fijo { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 4px; min-height: 60px; padding: 4px 8px 4px 20px; }
  .lateral .marca { padding: 0; margin-right: auto; }
  .lateral .marca span, .lateral .marca .logo { display: none; }
  .lateral .usuario { order: 2; margin-top: 0; border-top: 0; padding: 0; gap: 4px; }
  .lateral .usuario .quien-es { display: none; }
  .lateral .usuario .campana { order: -1; margin: 0; }
  .lateral .usuario .avatar { margin: 0 4px; }
  .lateral .menu { display: none; }
  .contenido { padding: 20px 16px; }
  .nuevo-feriado { grid-template-columns: minmax(0, 1fr); }

  .contenido h1 { font-size: 22px; }
  .filtros-bandeja { width: 100%; }
  .filtros-bandeja .filtro { height: 44px; flex: 1 1 0; padding: 0 8px; }
  .bandeja-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .bandeja[data-modo="lista"] .detalle-solicitud { display: none; }
  .bandeja[data-modo="detalle"] .bandeja-cabeza, .bandeja[data-modo="detalle"] .lista-solicitudes { display: none; }
  .detalle-cobertura { padding: 16px; }
  .volver-bandeja { display: flex; align-items: center; gap: 4px; width: max-content; height: 44px; margin: -8px 0 -8px -10px; padding: 0 10px; border: 0; background: transparent; color: var(--azul); font-size: 14px; font-weight: 600; }
  .volver-bandeja svg { width: 16px; height: 16px; }
  .botones-decision { flex-direction: column; }
  .botones-decision .dbtn, .pie-ajuste .dbtn { width: 100%; height: 48px; }

  .detalle-salida .detalle-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .filtros-boletas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filtros-boletas .campo:first-child { grid-column: 1 / -1; }
  .fila-boleta { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'numero chip' 'persona horas' 'fecha fecha'; gap: 2px 12px; }
  .fila-boleta .numero { grid-area: numero; }
  .fila-boleta .persona { grid-area: persona; }
  .fila-boleta .fecha { grid-area: fecha; }
  .fila-boleta .horas { grid-area: horas; text-align: right; }
  .fila-boleta .chip { grid-area: chip; justify-self: end; }
  .documento-boleta { padding: 18px; }
  .datos-boleta, .saldo-boleta { grid-template-columns: minmax(0, 1fr); }
  .barra-boleta .abtn, .barra-boleta .dbtn { flex: 1 1 100%; }
}
@media (max-width: 400px) {
  .comparar-ajuste { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Equipo y Reportes (tableros 5 y 6) ---------- */
.equipo, .reportes { display: flex; flex-direction: column; gap: 18px; }
.equipo h1, .reportes h1 { margin: 0; }
.equipo .subtitulo, .reportes .subtitulo { margin: 4px 0 0; color: var(--texto-suave); font-size: 14px; }
[data-equipo], [data-reporte] { display: flex; flex-direction: column; gap: 16px; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.indicador { padding: 16px 20px; gap: 4px; }
.indicador .rotulo { font-size: 13px; color: var(--texto-suave); }
.indicador .cifra { font-size: 28px; font-weight: 600; }
.indicador .cifra.alerta { color: var(--pend-texto); }
.indicador .nota { font-size: 12px; color: var(--texto-suave); }
.indicador a.nota { color: var(--azul); font-weight: 600; font-size: 13px; }
.tabla-numeros th.num, .tabla-numeros td.num { text-align: right; white-space: nowrap; }
.tabla-numeros th.num { font-family: var(--fuente); }
.tabla-numeros td.persona { font-weight: 600; white-space: nowrap; }
.tabla-numeros td.fecha { white-space: nowrap; }
.tabla-numeros .fuerte { font-weight: 600; }
.tabla-numeros td.accion { text-align: right; white-space: nowrap; font-size: 13px; font-weight: 600; }
.tabla-numeros tr.total td { font-weight: 700; background: #F7F9FC; white-space: nowrap; }
.nota-pie { margin: -6px 0 0; font-size: 12px; color: var(--texto-suave); }
.filtros-reporte { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 16px 20px; }
.filtros-reporte .campo:first-child { flex: 0 1 360px; }
.filtros-reporte .campo { flex: 0 1 200px; }
.filtros-reporte .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.filtros-reporte .acciones .btn.sec { height: 44px; font-size: 14px; text-decoration: none; }
.periodo-reporte { margin: -4px 0 0; font-size: 15px; font-weight: 700; }
.paneles-reporte { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mov-reporte { display: grid; grid-template-columns: 76px minmax(0, 1fr) 80px auto; gap: 10px; align-items: center; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.mov-reporte .num { text-align: right; }
.evento-reporte { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.evento-reporte div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.titulo-impresion { display: none; }

/* ---------- Eventos (sin dibujo) ---------- */
.eventos { display: flex; flex-direction: column; gap: 18px; }
.eventos h1 { margin: 0; }
.eventos .subtitulo { margin: 4px 0 0; color: var(--texto-suave); font-size: 14px; }
.evento-nombre { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 200px; }
.evento-nombre small { font-size: 12px; }
.tabla-numeros td.accion .btn { margin-left: 6px; }
.panel-evento { display: flex; flex-direction: column; gap: 14px; }
.panel-evento h2 { margin: 0; font-size: 16px; }
.panel-evento p { margin: 0; font-size: 14px; color: var(--texto-suave); }
.panel-evento .botones { display: flex; justify-content: flex-end; gap: 8px; }
.campos-evento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 860px) { .campos-evento { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .paneles-reporte { grid-template-columns: minmax(0, 1fr); }
  .filtros-reporte .campo, .filtros-reporte .campo:first-child { flex: 1 1 100%; }
  .filtros-reporte .acciones { margin-left: 0; }
  .mov-reporte { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .mov-reporte > :last-child { grid-column: 2 / -1; }
}

/* La boleta y el reporte se imprimen (o se guardan como PDF desde el navegador) solos, sin
   la aplicacion alrededor: la app no guarda archivos (BH-P6, BH-43). */
@media print {
  body { background: #fff; }
  .lateral, .cabecera, .barra-boleta, .panel-anular, #aviso, .barra-inferior, .hoja-mas, .filtros-reporte, .periodo-reporte { display: none !important; }
  .escritorio, .movil, .contenido, #contenido { display: block; padding: 0; margin: 0; }
  .boleta { max-width: none; }
  .documento-boleta { border: 0; padding: 0; }
  .pie-boleta, .firmas, .tabla-lotes { break-inside: avoid; }
  .titulo-impresion { display: block; margin: 0; font-size: 16px; font-weight: 700; }
  .paneles-reporte { grid-template-columns: minmax(0, 1fr); }
  .envoltorio-tabla { overflow: visible; }
}

/* RF-COB-06: a nombre de quien registra el aprobador. */
.para-quien { margin: 0; padding: 10px 12px; border-radius: var(--radio); background: var(--adj-fondo); color: var(--adj-texto); font-size: 14px; }