/* ============================================================
   ESTILOS COMPARTIDOS — Integramente (Cambios PHP)
   ============================================================
   Misma paleta y tipografía que tu proyecto general
   (panel_evaluador.html) — para que ambos sistemas se vean como
   una sola marca mientras conviven.
   ============================================================ */

:root{
  --azul-900:#0A1830; --azul-700:#0058B0; --azul-600:#0074E0; --azul-400:#4FA8E8;
  --acento:#00B4E8; --acento-suave:#E1F4FB;
  --papel:#F8FAFC; --papel-card:#FFFFFF; --linea:#E2E8F0; --hover-bg:#EEF2F7;
  --tinta:#0F172A; --tinta-suave:#64748B;
  --verde-bg:#E1F4FB; --verde-suave-bg:#DCFCE7; --amarillo-bg:#FEF9C3; --naranja-bg:#FFE4CC; --rojo-bg:#FEE2E2; --rojo:#B23A2E;
  --marca-fondo:#0A1830; --marca-texto:#FFFFFF;
  /* Alto real del encabezado -- lo actualiza el <script> de
     encabezado.php apenas carga la página. Este valor es solo el
     respaldo por si ese script todavía no corrió. */
  --alto-encabezado:76px;
}
/* Modo oscuro -- mismos nombres de variable que el proyecto general,
   mismos valores exactos, para que ambos sistemas luzcan idénticos al
   cambiar de tema. */
html[data-theme="dark"]{
  --azul-900:#EAF1FB; --azul-700:#5CB0F5; --azul-600:#3B9AF5; --azul-400:#6EC2F5;
  --acento:#00C8F5; --acento-suave:#123A5C;
  --papel:#0A1830; --papel-card:#111F3A; --linea:#22314D; --hover-bg:#1A2C4E;
  --tinta:#EAF1FB; --tinta-suave:#90A5C4;
  --verde-bg:#123A5C; --verde-suave-bg:#163A26; --amarillo-bg:#4A3D0F; --naranja-bg:#5A2E0F; --rojo-bg:#4A1F1B; --rojo:#F0776D;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  background:var(--papel-card) !important; color:var(--tinta) !important; border-color:var(--linea);
}
html[data-theme="dark"] select option{
  background:var(--papel-card) !important; color:var(--tinta) !important;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
}
.logo-claro{ display:inline-block !important; }
.logo-oscuro{ display:none !important; }
html[data-theme="dark"] .logo-claro{ display:none !important; }
html[data-theme="dark"] .logo-oscuro{ display:inline-block !important; }

*{box-sizing:border-box;}
body{
  background:var(--papel); color:var(--tinta);
  font-family:'Inter',Arial,sans-serif;
  margin:0; min-height:100vh;
}
h1,h2,h3{ font-family:'Inter',Arial,sans-serif; color:var(--azul-900); }

.contenedor{ max-width:1000px; margin:0 auto; padding:24px 20px 60px; }
.contenedor.angosto{ max-width:760px; }

/* ---------- Encabezado ---------- */
.ledger{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border-bottom:2px solid var(--azul-900); padding:12px 20px 12px 1cm;
  /* "left:0" además de "top:0" -- así el encabezado (con el botón del
     menú adentro) queda anclado también de lado a lado, no solo hacia
     abajo. Si alguna página llega a tener algo más ancho que la
     pantalla, el encabezado y el botón del menú nunca se van a ir de la
     vista al desplazarse hacia los lados. */
  position:sticky; top:0; left:0; z-index:200; background:var(--papel); width:100%;
}
/* "flex-wrap" aquí es la pieza que faltaba: sin esto, el botón ☰ +
   el logo + el nombre "Panel del Evaluador" estaban obligados a caber
   en una sola fila -- y como ninguno de los tres podía encogerse más
   (el logo tiene alto fijo, el texto es negrita grande), en un
   celular angosto esa fila por sí sola ya era más ancha que la
   pantalla, y empujaba TODA la página (encabezado, tarjetas, tabla)
   a desbordarse hacia la derecha -- por eso se veían todos cortados
   por el mismo lado a la vez. Con "flex-wrap:wrap" ahora el nombre
   simplemente baja a su propia línea si hace falta, sin empujar nada. */
.ledger .marca{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
.ledger .marca img{ height:52px; width:auto; }
.ledger .brand{ font-family:'Inter',sans-serif; font-weight:800; font-size:1.55rem; color:var(--azul-900); border-left:1px solid var(--linea); padding-left:14px; min-width:0; }
.ledger .brand span{ color:var(--acento); }
.ledger .acciones{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ledger .acciones span{ font-size:.82rem; color:var(--tinta-suave); }

/* ---------- Botones ---------- */
button, .btn, a.btn-primario{
  font-family:inherit; cursor:pointer; border-radius:8px; font-weight:700;
  border:none; padding:10px 18px; font-size:.9rem;
}
/* Un <a class="btn-primario"> (en vez de <button>) necesita además
   estas tres -- no las trae un enlace por defecto. */
a.btn-primario{ text-decoration:none; display:inline-block; text-align:center; }
.btn-primario, button[type="submit"]:not([class]){ background:var(--azul-600); color:#fff; }
.btn-primario:hover, button[type="submit"]:not([class]):hover{ background:var(--azul-700); }
.btn-detalle, .detail-btn{
  background:var(--papel-card); color:var(--azul-900); border:1px solid var(--linea);
  padding:8px 14px; font-size:.85rem; font-weight:600; border-radius:8px; cursor:pointer;
}
.btn-detalle:hover, .detail-btn:hover{ border-color:var(--azul-600); }
button.btn-peligro, .btn-peligro{ color:#fff; background:#B91C1C; border:1px solid #B91C1C; }
button.btn-peligro:hover, .btn-peligro:hover{ background:#991616; border-color:#991616; }
.btn-mini{
  background:var(--papel-card); color:var(--azul-900); border:1px solid var(--linea);
  padding:6px 12px; font-size:.8rem; font-weight:600; border-radius:7px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.btn-mini:hover{ border-color:var(--azul-600); }

/* Un <form> suelto alrededor de un solo botón (para que el botón pueda
   mandar su propio POST) no debe heredar el estilo de "tarjeta" de
   abajo (form, .tarjeta) -- si no, cada botoncito queda metido en su
   propia cajita con borde y relleno de 22px. */
.form-en-linea{ display:inline; background:none; border:none; padding:0; margin:0; border-radius:0; }

/* ---------- Formularios ---------- */
form, .tarjeta{
  background:var(--papel-card); border:1px solid var(--linea); border-radius:12px;
  padding:22px; margin-bottom:24px;
}
label{ display:block; font-size:.82rem; font-weight:600; color:var(--tinta); margin:10px 0 4px; }
input, select, textarea{
  width:100%; min-width:0; padding:9px 12px; border:1px solid var(--linea); border-radius:8px;
  font-family:inherit; font-size:.92rem; color:var(--tinta); background:var(--papel-card);
  box-sizing:border-box;
}
/* Las cuadrículas (grid) de campos/tarjetas por todo el sistema
   (.grid-2, .grid-3, .agregador, .check-grid, etc.) ya se adaptan a
   una columna en pantallas angostas -- pero eso no basta: por
   defecto, un elemento dentro de un grid o flex (y en especial un
   <select> con una opción larga) se niega a encogerse más allá del
   ancho de SU PROPIO contenido, sin importar que su columna sea más
   angosta. Eso empujaba toda la fila -- y con ella la página entera
   -- más ancha que la pantalla del celular. Esto se lo quita a los
   hijos directos de cualquier cuadrícula conocida del sistema. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .check-grid > *, .servicios-check > *,
.dos-columnas-gestion > *, .dos-col > *, .agregador > *, .agregador-fila > *,
.agregador-facturas > *, .agregador-pagos > *, .grid-checks-pruebas > *,
.foda-grid > *, .fotos-grid > *, .encabezado-pedido > *, .stat-cards > *{
  min-width:0;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--azul-600); }
input.campo-faltante, select.campo-faltante, textarea.campo-faltante{
  border-color:var(--rojo); box-shadow:0 0 0 3px var(--rojo-bg);
}
.hint{ font-size:.78rem; color:var(--tinta-suave); font-weight:400; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; }
th, td{ border:1px solid var(--linea); padding:9px 12px; font-size:.87rem; text-align:left; }
td a, td button{ vertical-align:middle; }
td > form{ display:inline-flex; align-items:center; vertical-align:middle; margin:0; }
th{ background:var(--papel); color:var(--azul-900); font-weight:700; }
tr:hover td{ background:var(--hover-bg); }
/* Cuando una tabla tiene más columnas de las que caben en la pantalla
   (sobre todo en celular), se envuelve en este contenedor: la tabla se
   desplaza de lado a lado dentro de su propio espacio, en vez de estirar
   toda la página (que es lo que causaba el "salto" hacia la derecha y
   escondía el menú). */
.tabla-scroll{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
/* Este "encoger columnas / nowrap + scroll horizontal" solo tiene sentido
   en celular, donde no cabe todo el ancho de la tabla en pantalla. En PC
   sí cabe (o el usuario prefiere verlo todo sin tener que desplazarse de
   lado a lado), así que estas dos reglas -- las que provocan el scroll --
   solo aplican debajo de 900px; en pantallas más anchas la tabla vuelve a
   su comportamiento normal (100% de ancho, texto que se envuelve). */
@media(max-width:900px){
  /* "table{width:100%}" (arriba) hace que, sin esto, la tabla siempre se
     encoja para caber en su contenedor -- comprimiendo las columnas hasta
     quedar ilegibles, en vez de mantenerse a su ancho natural y dejar que
     ESTE contenedor sea el que se desplace de lado a lado. Con "width:auto"
     la tabla puede ser más ancha que la pantalla cuando le hace falta, y
     entonces sí aparece el desplazamiento horizontal dentro de su propio
     recuadro. */
  .tabla-scroll table{ width:auto; min-width:100%; }
  /* Sin esto, las celdas partían su texto en varias líneas para
     apretarse y caber -- y entonces la tabla NUNCA llegaba a ser más
     ancha que su recuadro, así que el scroll de arriba nunca se
     activaba (no había nada que desplazar). Con "nowrap" cada celda
     mantiene su ancho natural, la tabla sí se vuelve más ancha que la
     pantalla cuando le hace falta, y ESO es lo que dispara el
     desplazamiento horizontal real dentro de su propio recuadro. */
  .tabla-scroll th, .tabla-scroll td{ white-space:nowrap; }
}
/* En celular, la barra de scroll normalmente está escondida por defecto
   (solo aparece mientras se toca), así que aunque SÍ se puede desplazar
   la tabla, no se nota que se puede. Esto la deja siempre visible. */
.tabla-scroll{ scrollbar-width:thin; scrollbar-color:var(--tinta-suave) var(--papel); }
.tabla-scroll::-webkit-scrollbar{ height:9px; }
.tabla-scroll::-webkit-scrollbar-track{ background:var(--papel); }
.tabla-scroll::-webkit-scrollbar-thumb{ background:var(--tinta-suave); border-radius:5px; }
/* Aviso que se agrega solo, por JavaScript, encima de una tabla SOLO
   cuando esa tabla en particular de verdad necesita desplazarse (ver
   encabezado.php) -- para que quede claro que hay más columnas hacia el
   lado, en vez de asumir que eso ya se entiende solo. */
.aviso-scroll-tabla{
  display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--tinta-suave);
  background:var(--acento-suave); border-radius:6px; padding:5px 10px; margin-bottom:8px;
}

/* ---------- Mensajes ---------- */
.msg{ padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:.9rem; }
.msg.exito{ background:var(--acento-suave); color:#0369A1; }
.msg.error{ background:var(--rojo-bg); color:var(--rojo); }

/* ---------- Insignias ---------- */
.badge{ padding:3px 11px; border-radius:12px; font-size:.75rem; font-weight:700; display:inline-block; }
.badge.reco{ background:#DCFCE7; color:#15803D; }
.badge.no{ background:var(--rojo-bg); color:var(--rojo); }
.badge.revisar{ background:var(--amarillo-bg); color:#92400E; }

/* ---------- Tarjetas de estadística ---------- */
.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card{ background:var(--papel-card); border:1px solid var(--linea); border-radius:10px; padding:12px 14px; }
.stat-card .num{ font-size:1.3rem; font-weight:700; color:var(--azul-900); }
.stat-card .lbl{ font-size:.62rem; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.03em; line-height:1.3; }
.stat-card.clicable{ cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.stat-card.clicable:hover{ border-color:var(--azul-600); }
.stat-card.clicable.seleccionada{ background:var(--acento-suave); border-color:var(--azul-600); }

a{ color:var(--azul-600); }

/* ============================================================
   LAYOUT CON MENÚ LATERAL — igual estructura que el proyecto
   general: encabezado fijo arriba, menú vertical a la izquierda
   agrupado por categoría, contenido a la derecha.
   ============================================================ */
/* Antes se centraba con "margin:0 auto", lo que dejaba un espacio en
   blanco igual de ancho a la izquierda y a la derecha en pantallas
   anchas de computadora -- ahora se ancla a la izquierda, con solo 1cm
   de aire desde el borde de la ventana (en vez de ese espacio variable). */
.wrap{ max-width:1200px; margin:0; padding:22px 20px 70px 1cm; }
/* Páginas con tablas anchas (candidatos, empresas, asignaciones): en computadora usan todo el ancho
   disponible y la tabla no muestra barra de desplazamiento; el texto largo baja de línea.
   En celular (900px o menos) sigue el desplazamiento lateral de siempre. */
.wrap.ancho{ max-width:none; padding-right:1cm; }
@media(min-width:901px){
  .wrap.ancho .tabla-scroll{ overflow-x:visible; }
  .wrap.ancho .tabla-scroll td{ overflow-wrap:anywhere; }
}
.app-layout{ display:flex; gap:28px; align-items:flex-start; }

/* "sticky" solo se queda fijo DESPUÉS de que el scroll llega a su propio
   punto de partida -- como el menú empieza apenas unos px más abajo de
   ese punto, el primer scroll todavía lo movía un poco antes de que se
   "trabara". Con "fixed" en cambio queda anclado a la ventana desde el
   primer píxel, nunca se mueve. Al sacarlo así del flujo del layout, el
   contenido principal (.main-content) necesita su propio margen
   izquierdo para no quedar tapado detrás de él (ver más abajo). Se le da
   también su propia altura máxima (lo que quede de la ventana debajo del
   encabezado) con scroll interno propio -- así, si el menú cabe
   completo, nunca se mueve ni un poco; si no cabe, se puede desplazar él
   solo, sin que eso afecte al resto del contenido. */
.sidebar{
  width:200px; flex-shrink:0; position:fixed; top:calc(var(--alto-encabezado) + 1cm); left:1cm;
  max-height:calc(100vh - var(--alto-encabezado) - 1cm - 20px);
  overflow-y:auto;
  /* Fondo sólido y por encima del contenido -- si no, al hacer scroll
     horizontal en una tabla ancha (como en detalle de pedido), lo que
     pasa por debajo se veía "mezclado" con el menú, que quedaba
     transparente al ser "fixed". También por encima del propio
     encabezado -- así, aunque el alto calculado se desajuste un poco
     (por ejemplo justo mientras carga la página), el menú nunca queda
     tapado detrás de él. */
  background:var(--papel); z-index:250;
}
.sidebar-group{ margin-bottom:20px; }
.sidebar-group-label{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; }
.sidebar-group-label .flecha{ font-size:.7rem; transition:transform .25s ease; }
.sidebar-group:not(.abierto) .sidebar-group-label .flecha{ transform:rotate(-90deg); }
.sidebar-group .tab-btn{
  max-height:50px; opacity:1; overflow:hidden;
  transition:max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease .05s, margin .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1);
}
.sidebar-group:not(.abierto) .tab-btn{
  max-height:0; opacity:0; margin-bottom:0; padding-top:0; padding-bottom:0;
  pointer-events:none; transition:max-height .22s cubic-bezier(.4,0,.2,1), opacity .15s ease, margin .22s cubic-bezier(.4,0,.2,1), padding .22s cubic-bezier(.4,0,.2,1);
}
.sidebar-group-label{
  font-size:.8rem; font-weight:800; color:var(--acento); text-transform:uppercase;
  letter-spacing:.06em; padding:14px 10px 6px; margin-bottom:4px; border-top:1px solid var(--linea);
}
.sidebar-group:first-child .sidebar-group-label{ border-top:none; padding-top:0; }
.sidebar .tab-btn{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px;
  font-family:inherit; font-weight:600; font-size:.86rem; color:var(--tinta-suave);
  text-decoration:none; white-space:nowrap; margin-bottom:2px;
}
.sidebar .tab-btn.active{ background:var(--verde-bg); color:var(--azul-900); }
.sidebar .tab-btn:hover{ background:var(--acento-suave); }
.sidebar .tab-btn.active:hover{ background:var(--verde-bg); }

/* El menú ahora es "fixed" (ver arriba) y ya no ocupa espacio dentro del
   flex -- por eso el contenido principal necesita este margen para no
   quedar tapado detrás de él (200px de ancho del menú + 28px del "gap"
   que antes ponía el flex entre ambos). */
.main-content{ flex:1; min-width:0; margin-left:228px; }

.menu-hamburguesa{
  display:none; background:none; border:1px solid var(--linea); border-radius:8px;
  padding:8px 12px; font-size:1.1rem; cursor:pointer; color:var(--tinta);
}
.sidebar-overlay-fondo{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:490; }
.sidebar-overlay-fondo.abierto{ display:block; }

/* Usuario, tema y cerrar sesión, repetidos aquí arriba del menú lateral
   -- solo se ven en celular (ver el @media de abajo), donde reemplazan a
   los mismos controles del encabezado para dejarlo más angosto. En PC se
   quedan ocultos porque ahí ya están visibles en el encabezado de
   siempre. */
.sidebar-cuenta{ display:none; }

@media (max-width:900px){
  .wrap{ padding:3px 16px 70px; }
  /* El encabezado también tenía "1cm" de espacio fijo a la izquierda
     (pensado para pantalla de computadora) -- en celular eso solo
     robaba ancho útil sin ninguna razón. */
  .ledger{ padding-left:14px; padding-right:14px; }
  /* ".app-layout" (arriba) trae "align-items:flex-start" pensado para
     cuando el menú y el contenido están LADO A LADO (de ahí que el
     contenido no se "estire" verticalmente más de lo que necesita).
     Pero en celular este mismo "app-layout" pasa a ser de columna, y
     ahí "align-items" ya no es vertical -- pasa a controlar el ANCHO.
     Con "flex-start" el contenido dejaba de estirarse hasta el ancho
     de la pantalla y en cambio se encogía o crecía según lo que
     tuviera adentro -- así, una tabla ancha (que a propósito debe ser
     más ancha que la pantalla para poder desplazarse DENTRO de su
     propio recuadro) terminaba estirando TODO el contenido, y con él
     la página entera, más ancha que la pantalla -- de ahí que hubiera
     que hacer zoom para verla bien. "stretch" hace que el contenido
     siempre ocupe exactamente el ancho de la pantalla, sin importar
     qué tan ancho sea algo adentro de él. */
  .app-layout{ flex-direction:column; gap:14px; align-items:stretch; }
  .main-content{ margin-left:0; }
  .menu-hamburguesa{ display:inline-flex; }
  /* El menú ya se muestra deslizándose desde la izquierda con "transform"
     (ver ".sidebar" abajo) -- eso solo mueve al menú, nunca empuja el
     resto de la página. Antes también se le daba "margin-left" al body
     completo para "empujarlo", pero esto duplicaba el efecto: hacía que
     la página completa se volviera más ancha que la pantalla y apareciera
     una barra de desplazamiento horizontal, obligando a moverse a la
     derecha para ver el contenido empujado -- y con eso, el menú (fijo a
     la ventana) terminaba pareciendo que se "escondía" a la izquierda.
     Ya no se empuja el body -- el menú se superpone (con su fondo
     semitransparente para cerrarlo al tocar fuera) en vez de correr todo
     lo demás. */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; height:100vh; height:100dvh; width:280px; max-width:82vw;
    background:var(--papel-card); z-index:9999; padding:70px 16px 20px;
    transform:translateX(-100%); transition:transform .25s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:2px 0 20px rgba(0,0,0,.2);
  }
  body.menu-abierto .sidebar{ transform:translateX(0); }
  .sidebar .tab-btn{ padding:11px 12px; font-size:.9rem; }
  .sidebar-overlay-fondo{ z-index:9998; }
  /* El nombre de usuario, el botón de tema y "Cerrar sesión" se mueven
     del encabezado (donde ocupaban una fila completa aparte) a este
     bloque arriba del menú de hamburguesa -- así el encabezado en
     celular se reduce a solo el logo y el botón ☰. */
  .ledger .acciones{ display:none; }
  .sidebar-cuenta{
    display:block; margin-bottom:18px; padding-bottom:16px;
    border-bottom:1px solid var(--linea);
  }
  .sidebar-cuenta .sidebar-cuenta-nombre{
    font-size:.82rem; color:var(--tinta-suave); margin-bottom:10px;
  }
  .sidebar-cuenta .detail-btn{
    display:block; width:100%; box-sizing:border-box; text-align:center;
    margin-bottom:8px; text-decoration:none;
  }
  .sidebar-cuenta .detail-btn:last-child{ margin-bottom:0; }
  /* Algunos navegadores de celular apilan un encabezado "sticky" por
     encima de otros elementos "fixed" aunque tengan un z-index menor --
     es un comportamiento inconsistente del navegador, no algo que se
     pueda arreglar solo con el número de z-index. Por eso, mientras el
     menú está abierto, se baja al encabezado de la capa visual por
     completo -- así no hay forma de que tape al menú. */
  body.menu-abierto .ledger{ z-index:1; }
  /* Mientras el menú está abierto, la página de atrás no se debe poder
     mover (ni de lado a lado ni hacia abajo) -- si no, un dedo que
     resbala hacia el menú puede terminar desplazando la página en vez de
     tocar un botón, y de ahí la sensación de "se pierde el menú". */
  body.menu-abierto{ overflow:hidden; }
}

/* Celulares angostos (la mayoría) -- el logo y el nombre "Panel del
   Evaluador" del encabezado se achican un poco para que quepan
   cómodos junto al botón ☰ sin depender solo del salto de línea. */
@media (max-width:480px){
  .ledger{ padding-left:10px; padding-right:10px; gap:8px; }
  .ledger .marca{ gap:8px; }
  .ledger .marca img{ height:34px; }
  .ledger .brand{ font-size:1.05rem; padding-left:8px; }
  .ledger .acciones span{ font-size:.74rem; }
  .stat-card{ padding:9px 10px; }
  .stat-card .num{ font-size:1.05rem; }
}