/* PayNas - hoja de estilos principal.
   Salio de un bloque <style> dentro de index.html el 26 jul 2026.
   El contenido es identico: solo cambio de casa. */
  :root{
    --ink:#16181D;--ink2:#26282E;--bg:#F7F7F5;--card:#fff;--line:#ECECE8;--line2:#F2F2EF;
    --nar:#FF6A2B;--nar2:#FF8F3D;--narbg:#FFF3EB;--ok:#0E9F6E;--okbg:#ECFDF5;--rojo:#DC2626;--rojobg:#FEF2F2;
    /* El color de marca en crudo, para las sombras. Antes cada sombra traia el
       naranja escrito a mano y no cambiaba con el restaurante: en Lukka salian
       halos naranjas alrededor de elementos azules. TEMA_LUKKA lo sobreescribe
       y asi sirve para cualquier opacidad. */
    --narRGB:255,106,43;
    /* --amarbg FALTABA. barraHist lo pedia desde siempre y salia sin fondo:
       el aviso ambar se veia como una tarjeta cualquiera. Los temas no tocan
       el ambar (igual que no tocan --rojobg), asi que vive aqui y ya. */
    --amar:#B45309;--amarbg:#FFFBEB;--gris:#6B7280;--gris2:#696D75;
    --f1:11px;--f2:13px;--f3:15px;--f4:20px;--f5:28px;
    --sh:0 1px 2px rgba(16,17,20,.05),0 2px 8px rgba(16,17,20,.05);
    --sh2:0 4px 20px rgba(16,17,20,.10);
  }
  *{box-sizing:border-box;margin:0}
  body{background:var(--bg);font-family:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);font-size:var(--f2);-webkit-font-smoothing:antialiased;line-height:1.45}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
  .btn{border:none;border-radius:9px;padding:10px 16px;font-weight:700;font-size:var(--f2);cursor:pointer;background:var(--ink);color:#fff;transition:transform .06s,box-shadow .15s,background .15s;box-shadow:var(--sh)}
  .btn:hover{background:var(--ink2)}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
  .btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
  .btn.sec:hover{background:#FAFBFA;border-color:var(--gris2)}
  /* Aqui estaban .tabs/.tab, de la barra de pestanas vieja (vHeader).
     Se fueron con ella el 26 jul 2026. Los contadores de la barra lateral
     usan .sb-it .badge, que se define mas abajo y no se toco. */

  /* ---- LA PAGINA ----
     Cada vista traia su propio relleno: margin:16px, padding:18px 20px,
     padding:20px 24px, padding:16px... Cambiar de pestaña movia el borde del
     contenido. Ahora todas usan .page y el borde se queda quieto.
     En pantalla chica se aprieta, que antes no lo hacia ninguna. */
  /* ---- GRUPOS DENTRO DE UNA PANTALLA ----
     Para pantallas que apilaban tarjetas sin orden (Admin tenia ocho). El
     encabezado dice QUE HACES en ese grupo, no solo como se llama. Un grupo
     sin contenido no se dibuja: nada de secciones vacias ocupando espacio. */
  .grpH{margin:0 0 9px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .grpH b{font-size:var(--f3);letter-spacing:-.01em}
  .grpH small{font-size:var(--f1);color:var(--gris)}
  .grp + .grp{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

  /* ---- ICONOS ----
     Los emojis se cambiaron por SVG del set ICO. Un emoji tomaba su tamano del
     font-size del contenedor; un SVG no, asi que aqui se les da medida y color.
     La ventaja: se dibujan igual en Windows, Mac y Android, y toman el color
     del tema en vez de traer el suyo. */
  .hubC .hi svg,.wg .ic svg{width:19px;height:19px}
  .hubC .hi svg{color:var(--nar)}
  .wg .ic svg{color:var(--nar)}
  .hubHead svg{width:22px;height:22px;color:var(--nar)}
  .empty .ico svg{width:30px;height:30px;opacity:.55}
  /* dentro de un titulo o una pestana el icono se alinea con el texto */
  h1 svg,h2 svg,.segb svg{vertical-align:-2px}

  /* Tope de ancho: en un monitor de 1700px el contenido se estiraba de lado a
     lado y las pantallas con pocas columnas quedaban con un vacio enorme a la
     derecha. 1360 es suficiente para la rejilla de captura de 18 columnas y
     evita que el resto se disperse. Las tablas anchas siguen desplazandose
     dentro de su contenedor, igual que antes. */
  .page{padding:18px 20px;max-width:1360px}
  .page.rejilla{display:grid;gap:16px}
  .page.ancho{max-width:760px}
  /* cuando la tarjeta ES la pagina: estados de guardia y de carga */
  .cardPage{margin:18px 20px}
  @media(max-width:640px){ .page{padding:13px 11px} .cardPage{margin:13px 11px} }

  /* ---- HOME: contenido a la izquierda, riel de estado a la derecha ----
     Antes eran filas de tarjetas del mismo peso que dejaban la mitad de la
     pantalla vacia. En pantalla angosta se apila en una sola columna. */
  .homeGrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.85fr);gap:13px;align-items:start}
  @media(max-width:1000px){.homeGrid{grid-template-columns:1fr}}

  /* ---- HOME: piezas compartidas por los tres modulos ----
     Payroll, People y Time contestan preguntas distintas pero se leen igual:
     arriba lo que FALTA, en medio los numeros, abajo lo que se puede empezar.
     Estas clases son ese idioma comun. */
  .homeSub{font-size:var(--f3);color:var(--ink);margin:2px 0 15px;font-weight:600}
  .homeSub b{font-weight:800;color:var(--nar)}

  /* La caja de lo urgente. Lleva el borde de marca porque es lo unico de la
     pantalla que pide algo AHORA; si todo llevara acento, ninguno destacaria. */
  .hAhora{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--nar);
    border-radius:12px;box-shadow:var(--sh);overflow:hidden;margin-bottom:14px}
  .hAhoraC{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--narbg)}
  .hAhoraC b{font-size:var(--f2);font-weight:800}
  .hAhoraC .cnt{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.09em;
    color:var(--amar);white-space:nowrap}

  /* Una fila = una persona esperando. Alto fijo para que seis filas se barran
     de un vistazo sin que las descripciones largas las descuadren. */
  .hFila{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--line2)}
  .hFila .ht{min-width:0;flex:1}
  .hFila .ht b{display:block;font-size:var(--f2);font-weight:700;line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hFila .ht small{display:block;font-size:var(--f1);color:var(--gris);font-weight:500;
    line-height:1.35;margin-top:1px}
  .hFila .ht small b{display:inline;font-size:inherit;color:var(--ink)}
  .hFila .hIr{margin-left:auto;padding:6px 13px;font-size:11px;white-space:nowrap;flex:0 0 auto}
  .hFila .hIco{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;flex:0 0 auto;background:var(--line2);color:var(--gris)}
  .hFila .hIco.am{background:#FEF6E7;color:var(--amar)}
  .hFila .hIco.ro{background:var(--rojobg);color:var(--rojo)}
  .hMas{padding:8px 15px;border-top:1px solid var(--line2);font-size:var(--f1);color:var(--gris)}

  /* Cuanto lleva esperando. El numero de dias importa mas que la categoria:
     una solicitud de tres dias urge mas que un documento que vence en tres
     semanas, aunque el documento suene mas grave. */
  .hFila .chip{display:inline-flex;align-items:center;flex:0 0 auto;font-size:9.5px;
    font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:99px;white-space:nowrap;
    background:var(--line2);color:var(--gris2)}
  /* El texto del chip es de 9.5px: eso NO cuenta como texto grande aunque vaya
     en negrita, asi que pide 4.5:1. --rojo y --ok sobre sus propios fondos
     claros se quedan en 4.41 y 3.21, por eso aqui van dos tonos mas oscuros. */
  .hFila .chip.r{background:var(--rojobg);color:#B91C1C}
  .hFila .chip.a{background:#FEF6E7;color:var(--amar)}
  .hFila .chip.v{background:var(--okbg);color:#047857}

  /* Nada pendiente. Un renglon con aire, no una tarjeta vacia del tamano de la
     que habria si hubiera trabajo: el vacio no debe pesar igual que el lleno. */
  .hVacio{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;box-shadow:var(--sh);padding:15px 17px;margin-bottom:14px;flex-wrap:wrap}
  .hVacio .ico{width:28px;height:28px;border-radius:50%;background:var(--okbg);color:var(--ok);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .hVacio b{font-size:var(--f2)}
  .hVacio small{flex:1 1 100%;font-size:var(--f1);color:var(--gris);padding-left:39px}
  @media(max-width:520px){ .hVacio small{padding-left:0} }
  .hCargando{background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--sh);padding:22px;text-align:center;color:var(--gris);font-size:var(--f2);
    margin-bottom:14px}

  /* Los numeros. Tres caben en una fila; abajo de 900px se apilan de dos y en
     movil de una, nunca apretados. */
  .hStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
  @media(max-width:900px){ .hStats{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(max-width:560px){ .hStats{grid-template-columns:1fr} }
  .hStat{background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--sh);padding:13px 15px;min-width:0}
  .hStat .hi{width:26px;height:26px;border-radius:8px;background:var(--line2);color:var(--gris);
    display:flex;align-items:center;justify-content:center;margin-bottom:8px}
  .hStat .hk{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gris)}
  /* Cifra tabular: apiladas en columna, los digitos quedan alineados. */
  .hStat .hv{font-size:var(--f4);font-weight:800;letter-spacing:-.02em;line-height:1.15;
    margin-top:2px;font-variant-numeric:tabular-nums}
  .hStat .hd{font-size:var(--f1);color:var(--gris);margin-top:2px}
  .hStat .hd.bien{color:#047857}   /* var(--ok) sobre blanco solo da 3.39:1 */
  .hStat .hd.mal{color:var(--rojo)}

  /* Desglose en barras. Un total de 15 documentos no dice que hacer hoy;
     partido en vencidos / esta semana / este mes, si. */
  .hDesg{background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--sh);padding:13px 15px;margin-bottom:14px}
  .hBar{display:flex;align-items:center;gap:10px;font-size:var(--f2);padding:5px 0}
  .hBar .bl{flex:0 0 118px;color:var(--gris);font-size:var(--f1)}
  .hBar .bb{flex:1;height:7px;border-radius:99px;background:var(--line2);overflow:hidden;min-width:40px}
  .hBar .bb i{display:block;height:100%;border-radius:99px}
  .hBar .bn{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums;min-width:22px;
    text-align:right}

  /* Lo que se le pidio al admin. Se ve aunque no se pueda hacer sola: esconder
     el proceso no lo ensena, hace que se pregunte por WhatsApp. */
  .hCaja{background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--sh);padding:12px 15px;margin-bottom:14px}
  .hCajaT{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gris);margin-bottom:8px}
  .hPed{display:flex;align-items:center;gap:10px;font-size:var(--f2);padding:7px 0;
    border-top:1px solid var(--line2)}
  .hPed:first-of-type{border-top:none}
  .hPed .chip{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.06em;
    padding:3px 8px;border-radius:99px;background:var(--line2);color:var(--gris2);white-space:nowrap}
  .hPed .chip.r{background:var(--rojobg);color:#B91C1C}
  .hPed .chip.a{background:#FEF6E7;color:var(--amar)}
  .hPed .chip.v{background:var(--okbg);color:#047857}
  .hPed.hecho{color:var(--gris)}

  /* Accesos rapidos. ABAJO a proposito: arriba esta lo que FALTA, aqui lo que
     se puede EMPEZAR. Si van primero, compiten con lo urgente y ganan por ser
     mas bonitos. */
  .hQA{background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--sh);padding:13px 15px}
  .hQA>b{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gris);margin-bottom:10px}
  .hQAi{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;color:inherit;
    background:none;border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;
    margin-top:7px}
  .hQAi:first-of-type{margin-top:0}
  .hQAi:hover{border-color:var(--nar);box-shadow:0 4px 14px rgba(var(--narRGB),.11)}
  .hQAi .qi{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;
    justify-content:center;flex:0 0 auto}
  .hQAi .qi.na{background:var(--narbg);color:var(--nar)}
  .hQAi .qi.az{background:#EEF2FF;color:#4F46E5}
  .hQAi .qi.am{background:#FEF6E7;color:var(--amar)}
  .hQAi .qi.ve{background:var(--okbg);color:var(--ok)}
  .hQAi .qi.mo{background:#F5F0FF;color:#7C3AED}
  .hQAi .qt{min-width:0}
  .hQAi .qt b{display:block;font-size:var(--f2);font-weight:700;line-height:1.3}
  .hQAi .qt small{display:block;font-size:var(--f1);color:var(--gris);font-weight:500;
    line-height:1.35;margin-top:1px}

  /* ---- SIDEBAR LAYOUT ---- */
  .layout{display:flex;min-height:100vh;align-items:stretch}
  .sb{width:214px;flex-shrink:0;background:var(--ink);color:#E9EFEA;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60}
  /* overflow-x:hidden NO es un parche: el menu se desplaza en vertical y nunca
     en horizontal. Sin esto, un renglon que no quepa -- una etiqueta larga, un
     badge de dos cifras -- saca una barra de desplazamiento gris al pie del
     sidebar. Se veia roto y nadie sabia de donde salia. */
  .sb nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:8px;scrollbar-width:thin}
  /* Y si algo no cabe, que se corte con puntos suspensivos en vez de empujar. */
  .sb-it .sb-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .sb.min{width:58px}
  .sb-logo{padding:16px 14px 8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
  .sb-logo b{font-size:20px;font-weight:700;letter-spacing:-.03em;color:#fff;white-space:nowrap}
  .sb-logo b i{font-style:normal;background:linear-gradient(90deg,var(--nar),var(--nar2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .sb-col{border:none;background:rgba(255,255,255,.08);color:rgba(233,239,234,.8);border-radius:7px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
  .sb-col:hover{background:rgba(255,255,255,.16);color:#fff}
  .sb-sec{padding:15px 18px 4px;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(233,239,234,.42);white-space:nowrap}
  .sb-it{display:flex;align-items:center;gap:10px;margin:1px 8px;padding:9px 10px;border-radius:9px;border:none;background:none;color:rgba(233,239,234,.82);font-size:13px;font-weight:600;cursor:pointer;width:calc(100% - 16px);text-align:left;white-space:nowrap;font-family:inherit}
  .sb-it svg{flex-shrink:0;opacity:.85}
  .sb-it:hover{background:rgba(255,255,255,.07);color:#fff}
  .sb-it.on{background:linear-gradient(135deg,var(--nar),var(--nar2));color:#fff;font-weight:700;box-shadow:0 6px 20px rgba(var(--narRGB),.35)}
  .sb-it.on svg{opacity:1}
  .sb-it .badge{background:var(--rojo);color:#fff;border-radius:99px;font-size:10px;padding:1px 6px;margin-left:auto;font-weight:700}
  .sb-div{border-top:1px solid rgba(255,255,255,.12);margin:8px 14px}
.sb-dom{display:flex;align-items:center;gap:6px;padding:13px 18px 4px;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(233,239,234,.42);white-space:nowrap}
.sb-dom:hover{color:rgba(233,239,234,.85)}
.sb-dom.abre{color:#FF9A62}
/* El nombre de la sección es <button>: hereda la tipografía y el color de
   .sb-dom para verse igual que cuando era un <span>. */
.sb-domN{cursor:pointer;flex:1;background:none;border:none;padding:0;text-align:left;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.sb-car{margin-left:auto;background:none;border:none;color:inherit;font-size:10px;line-height:1;cursor:pointer;padding:3px 5px;opacity:.75;border-radius:6px}
.sb-car:hover{background:rgba(255,255,255,.1);opacity:1}
.sb.min .sb-domN,.sb.min .sb-car{display:none}
.sb.min .sb-dom{border-top:1px solid rgba(255,255,255,.12);margin:7px 12px 0;padding:5px 0}
.hubW{padding:18px;max-width:760px}
.hubC{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-top:9px;cursor:pointer;box-shadow:0 1px 2px rgba(16,17,20,.05)}
.hubC:hover{border-color:var(--nar);box-shadow:0 6px 18px rgba(var(--narRGB),.13)}
/* .hubC es un <button>: necesita resetear el cromado y ocupar el ancho */
.hubC{width:100%;text-align:left;font:inherit;color:inherit}
.hubC .hi{width:36px;height:36px;border-radius:11px;background:var(--line2);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.hubC b{display:block;font-size:13.5px}
.hubC small{display:block;font-size:11px;color:var(--gris);font-weight:500;margin-top:1px}
.hubC .hgo{margin-left:auto;font-size:11px;font-weight:800;color:var(--nar);white-space:nowrap}
  .sb-foot{padding:11px 14px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(233,239,234,.78);white-space:nowrap}
  .sb-foot .punto{background:#22C55E;box-shadow:0 0 8px #22C55E}
  .sb-out{border:none;background:none;color:rgba(233,239,234,.6);cursor:pointer;margin-left:auto;padding:4px;border-radius:6px;display:flex}
  .sb-out:hover{background:rgba(255,255,255,.1);color:#fff}
  .sb.min .sb-txt,.sb.min .sb-sec,.sb.min .sb-logo b,.sb.min .sb-foot .sb-txt{display:none}
  .sb.min .sb-it{justify-content:center;padding:9px 0}
  .sb.min .sb-it .badge{position:absolute;margin:0;transform:translate(10px,-8px)}
  .sb.min .sb-logo{justify-content:center;padding:16px 6px 8px}
  /* Con la barra plegada solo caben 58px: el punto y cerrar sesion. La guia
     es secundaria, se esconde en vez de apretujar los tres. */
  .sb.min .sb-guia{display:none}
  .sb.min .sb-foot{justify-content:center}
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;gap:13px;padding:13px 18px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh);flex-wrap:wrap}
  .sb-burger{display:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;width:36px;height:36px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
  .sb-velo{display:none}
  @media(max-width:920px){
    .sb{position:fixed;left:0;top:0;bottom:0;height:100%;transform:translateX(-105%);transition:transform .18s;width:230px!important}
    .sb.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
    .sb.min .sb-txt,.sb.min .sb-sec,.sb.min .sb-logo b{display:initial}
    .sb.min .sb-it{justify-content:flex-start;padding:9px 10px}
    .sb-burger{display:flex}
    .sb-velo.show{display:block;position:fixed;inset:0;background:rgba(10,25,20,.45);z-index:55}
  }
  table{border-collapse:collapse;width:100%;font-size:var(--f2)}
  /* Tabla que se ajusta a su contenido en vez de estirarse a todo lo ancho.
     Con pocas columnas, width:100% las separa hasta el otro extremo de la
     pantalla y hay que cruzar 1,500 px con la vista para leer una fila. */
  /* La tabla llena su contenedor, pero el sobrante se lo queda la ULTIMA
     columna en vez de repartirse entre todas. Asi las columnas miden lo que
     mide su contenido y la fila se lee de corrido, sin huecos de 200px entre
     el nombre y el banco. */
  table.ajusta th,table.ajusta td{white-space:nowrap}
  /* Una columna vacia al final se come todo el sobrante, para que las demas
     midan lo que mide su contenido Y los botones de la fila se queden junto a
     los datos en vez de irse a la orilla de la pantalla. */
  table.ajusta th.relleno,table.ajusta td.relleno{width:100%;padding:0;border-left:0}
  th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);background:#F8F8F6;padding:9px 10px;text-align:right;position:sticky;top:0;font-weight:700;border-bottom:1px solid var(--line)}
  th:first-child,td:first-child{text-align:left}
  td{padding:8px 10px;border-top:1px solid var(--line2);text-align:right;font-variant-numeric:tabular-nums}
  tbody tr{transition:background .12s}
  tbody tr:hover{background:#FAFBFA}
  /* La celda en reposo es NEUTRA, no naranja. Antes todas iban con el fondo de
     marca, y como el 89% de la rejilla esta vacia el resultado era un muro de
     naranja donde los datos se perdian. Ahora manda el dato: lo lleno resalta
     y lo vacio se calla. El naranja se guarda para el foco, que es donde de
     verdad dice "aqui estas escribiendo". */
  input.cap{width:64px;padding:6px 7px;text-align:right;font-size:var(--f2);border:1px solid transparent;background:#F4F2EF;border-radius:7px;outline:none;transition:border-color .15s,box-shadow .15s;font-variant-numeric:tabular-nums}
  input.cap:focus{border-color:var(--nar);background:var(--card);box-shadow:0 0 0 3px rgba(var(--narRGB),.14)}
  input.cap:hover:not([readonly]){background:#EFEDE9}

  /* ================= REJILLA DE CAPTURA =================
     Las 14 columnas editables son cuatro familias distintas: horas, propinas,
     tiempo libre y dinero. Antes corrian seguidas con el mismo peso y el ojo
     no tenia donde aterrizar. Las bandas son deliberadamente tenues: guian
     sin competir con el naranja de "aqui se captura". */
  .capT th.g1,.capT td.g1{background:#FFFBF7}
  .capT th.g2,.capT td.g2{background:#F9FCFD}
  .capT th.g3,.capT td.g3{background:#FBFAFD}
  .capT th.g4,.capT td.g4{background:#FAFCFA}
  /* La cinta de procedencia se metio ARRIBA de esta fila, asi que ya no va
     pegada a 0: va debajo de ella. */
  .capT thead .fam th{font-size:9px;font-weight:800;letter-spacing:.1em;padding:6px 8px 4px;
    text-align:center;color:var(--gris);border-bottom:0;top:var(--capProc,22px);background:var(--card)}
  .capT thead .fam th.g1{background:#FFF7F1}
  .capT thead .fam th.g2{background:#F3F8FB}
  .capT thead .fam th.g3{background:#F6F4FA}
  .capT thead .fam th.g4{background:#F4F8F4}
  /* Tres filas se quedan pegadas arriba al hacer scroll: familias, columnas y
     totales. Sus desplazamientos estaban a mano (0, 23 y 46 px), pero medidos
     dan 34 y 57: la fila de columnas es alta porque debajo del nombre va la
     unidad ("hrs", "$"). Resultado: la fila de totales se pegaba 34 px arriba
     de su sitio y tapaba el 60% del encabezado al bajar. En un celular de
     375 px la fila mide 59, no 57, asi que tampoco sirve otro numero fijo.
     Ahora ajustarStickyCaptura() mide las dos filas de verdad y
     escribe --capFam y --capCols; los px de reserva son solo por si el JS no
     alcanza a correr. */
  .capT thead .cols th{top:calc(var(--capProc,22px) + var(--capFam,34px));text-align:center;color:#54606B}
  .capT thead .cols th.g1{background:#FFF1E6}
  .capT thead .cols th.g2{background:#EAF2F7}
  .capT thead .cols th.g3{background:#F0EBF7}
  .capT thead .cols th.g4{background:#EDF4ED}
  .capT th .un{display:block;font-weight:500;text-transform:none;font-size:9px;color:var(--gris);letter-spacing:0}
  /* el embudo del filtro: aparece al pasar el mouse, para que el encabezado
     deje de parecer que ordena cuando en realidad filtra */
  .capT th .fx{opacity:0;font-size:9px;margin-left:3px;transition:opacity .12s}
  /* :focus-within porque el embudo vive dentro de un <button>: con teclado no
     hay hover, y sin esto no se ve cuál columna se va a filtrar. */
  .capT th:hover .fx, .capT th:focus-within .fx{opacity:.6}
  .capT th.filtrada{background:var(--nar)!important;color:#fff!important}
  .capT th.filtrada .fx{opacity:1}
  /* la columna del nombre no se va con el scroll horizontal: la tabla mide
     ~1400px y sin esto se captura en una fila anonima */
  .capT .fija{position:sticky;left:0;z-index:3;background:var(--card);box-shadow:2px 0 0 var(--line)}
  /* El encabezado va SIEMPRE por encima de la fila de totales. Antes los <th>
     no llevaban z-index (o sea 0) y los totales llevaban 2: por eso, aunque el
     desplazamiento fuera correcto, el redondeo de un pixel dejaba los totales
     pintados sobre las etiquetas. */
  .capT thead th{z-index:6}
  .capT thead .cols .fija{background:#F8F8F6;z-index:7}
  .capT thead .fam .fija{background:var(--card);z-index:7}
  .capT tbody tr:hover .fija{background:#FAFBFA}
  .capT .resumen td{font-weight:800;background:#EFEFEC;border-top:1px solid var(--ink);
    border-bottom:2px solid var(--ink);position:sticky;
    top:calc(var(--capProc,22px) + var(--capFam,34px) + var(--capCols,57px));z-index:2}
  .capT .resumen td.fija{z-index:4;background:#EFEFEC}
  .capT .na{color:var(--gris2);font-size:var(--f1)}

  /* ---- CINTA DE PROCEDENCIA ----
     Dice de donde sale el dato de cada columna. Es la fila mas alta del
     encabezado, asi que las otras dos se desplazan por debajo de ella. */
  .capT thead .proc th{top:0;font-size:8px;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;padding:5px 8px 4px;text-align:center;
    background:var(--card);color:var(--gris2);border-bottom:0}
  .capT thead .proc .fija{background:var(--card);z-index:7}
  .capT thead .proc th.deArchivo{background:#F1F7FC;color:#2C6FA8}
  /* Time Off no es un archivo ni es a mano: el empleado lo pide desde su
     telefono, alguien lo aprueba, y cae aqui solo. */
  .capT thead .proc th.deOff{background:#F2FAF5;color:#2F7A57}
  .capT thead .proc th.aMano{background:#FCF8F1;color:#8A6A38}

  /* ---- VACIO NO ES CERO ----
     Un cero escrito se ve; una celda que nadie toco se queda plana. Antes las
     dos eran identicas y no habia forma de saber que filas ya se revisaron. */
  .capT input.cap.lleno{background:var(--card);border-color:#E4DFD8;font-weight:600}
  .capT input.cap.cero{background:var(--card);border-color:#E4DFD8;color:var(--gris2)}
  .capT tr.sinTocar .fija{box-shadow:2px 0 0 var(--line), inset 3px 0 0 var(--nar)}

  /* ---- EL TOTAL, JUNTO AL NOMBRE ----
     Estaba despues de 18 columnas de scroll horizontal. Es el numero que mas
     se revisa y era el mas dificil de alcanzar. */
  .capT .totFila{font-size:var(--f2);font-weight:800;white-space:nowrap;text-align:right;
    min-width:64px;flex:0 0 auto;font-variant-numeric:tabular-nums}
  .capT .totFila.nada{color:var(--gris2);font-weight:600}
  .capT .empCell{gap:10px}

  /* ---- CONGELADA ----
     La semana ya se entrego, se aprobo o se cerro. Los numeros pierden su caja:
     nada que no se pueda tocar debe parecer tocable. Antes los campos seguian
     viendose como campos y el aviso llegaba DESPUES de intentar escribir. */
  .capCongelada{display:flex;align-items:center;gap:12px;padding:11px 15px;
    background:#F2F0FD;border-bottom:1px solid #DDD6F5}
  .capCongelada .ic{width:30px;height:30px;border-radius:9px;background:var(--card);color:#6D4AFF;
    display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .capCongelada .ic svg{width:15px;height:15px}
  .capCongelada .tx b{display:block;font-size:var(--f2);font-weight:700;color:#3D2F8F}
  .capCongelada .tx small{display:block;font-size:var(--f1);color:#6357A8}
  .capT.congelada input.cap{background:transparent;border-color:transparent;color:var(--gris);
    pointer-events:none;font-weight:600}
  .capT.congelada input.cap.lleno,.capT.congelada input.cap.cero{
    background:transparent;border-color:transparent}
  .capT.congelada tr.sinTocar .fija{box-shadow:2px 0 0 var(--line)}
  /* barra de herramientas por grupos: buscar | importar | limpiar */
  .capBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line)}
  .capBar .sep{width:1px;height:22px;background:var(--line);flex:0 0 auto}
  .capBar .grp{display:flex;gap:6px;align-items:center}
  .capBar .btn.peligro{color:var(--rojo);border-color:#F5C2C2}
  .capAvance{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:var(--f2);color:var(--gris)}
  .capAvance b{color:var(--ink);font-variant-numeric:tabular-nums}
  .capAvance .barrita{width:90px;height:6px;border-radius:99px;background:var(--line2);overflow:hidden}
  .capAvance .barrita i{display:block;height:100%;background:var(--nar);border-radius:99px}
  /* etiquetas de filtro activo, para que nunca haya un filtro puesto sin verse */
  .capChips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:9px 14px;
    background:var(--narbg);border-bottom:1px solid #F5DCC8;font-size:var(--f1)}
  .capChips .chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);
    border:1px solid #F0D9BE;border-radius:99px;padding:3px 10px;font-weight:600;color:var(--nar)}
  .capChips .chip button{border:none;background:none;color:var(--nar);cursor:pointer;font-weight:800;padding:0;font-size:12px}
  input.cap.chica{width:48px}
  input.cap.err{background:var(--rojobg);border-color:var(--rojo)}
  /* el placeholder estaba a 1.9:1 sobre el naranja claro: ilegible */
  input.cap::placeholder{color:#B99A6E;opacity:1}
  input.txt,select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:var(--f2);outline:none;background:#fff;transition:border-color .15s,box-shadow .15s;color:var(--ink)}
  /* este verde venia de una paleta que ya no existe en el proyecto */
  input.txt:focus,select:focus{border-color:var(--ink2);box-shadow:0 0 0 3px rgba(var(--narRGB),.12)}
  .chip{display:flex;gap:8px;font-size:var(--f2);padding:5px 0;color:#3C4A43;align-items:flex-start}
  .chip b{font-size:var(--f3);line-height:1}
  .kpi{padding:18px;border-radius:14px}
  /* ---- CAPTURE: pestanas, y el aviso pegado a su fila ----
     Los avisos vivian en tres cajas arriba que se comian la pantalla entera y
     hablaban de filas que estaban 900 pixeles mas abajo. Ahora cada uno cae
     debajo de SU fila, y estas pestanas llevan a los que hay que mirar. */
  .capSegs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);
    background:var(--card);overflow-x:auto;scrollbar-width:thin}
  .capSeg{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
    border:none;background:none;font:inherit;color:var(--gris);cursor:pointer;
    font-size:var(--f2);font-weight:600;padding:11px 14px;border-bottom:2px solid transparent;
    margin-bottom:-1px;white-space:nowrap}
  .capSeg:hover{color:var(--ink)}
  .capSeg .n{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px;
    background:var(--line2);color:var(--gris2);font-variant-numeric:tabular-nums}
  .capSeg.on{color:var(--ink);font-weight:800;border-bottom-color:var(--nar)}
  /* La cifra activa va sobre --ink, no sobre --nar: blanco sobre el naranja de
     marca da 2.86:1 y esto es texto de 10.5px, que pide 4.5. Que la pestana
     esta elegida ya lo dicen el subrayado y la negrita; el color de marca no
     tiene que repetirlo a costa de que el numero no se lea. */
  .capSeg.on .n{background:var(--ink);color:#fff}
  /* La de "hay algo que mirar" se distingue aunque no este elegida: es la unica
     pestana que puede costar dinero si se ignora. */
  .capSeg.aviso .n{background:#FEF6E7;color:var(--amar)}
  .capSeg.aviso.on .n{background:var(--amar);color:#fff}

  /* El renglon del aviso, debajo de la fila de esa persona.
     La celda ocupa las 15 columnas -- 1336 px -- pero el CONTENIDO se queda
     pegado a la izquierda y mide solo lo que se ve (--capVis, que mide
     ajustarStickyCaptura). Sin esto los botones Entered/NA quedaban a 1300 px
     a la derecha, fuera de pantalla: el aviso no se podia despachar sin
     recorrer la tabla entera. */
  tr.capAviso>td{padding:0;background:#FFFCF5;border-bottom:1px solid var(--line2)}
  .capAvW{position:sticky;left:0;width:var(--capVis,100%);max-width:100%;
    box-sizing:border-box;padding-left:14px;border-left:3px solid #E8A33D}
  .capAvI{display:flex;align-items:flex-start;gap:9px;padding:8px 13px 8px 0;font-size:var(--f2)}
  .capAvI+.capAvI{border-top:1px dashed #F0E2C8}
  .capAvI .ic{width:19px;height:19px;border-radius:50%;background:#FEF6E7;color:var(--amar);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    font-size:11px;font-weight:800;margin-top:1px}
  .capAvI.malo .ic{background:var(--rojobg);color:var(--rojo)}
  .capAvI .tx{flex:1;min-width:0;line-height:1.4}
  /* La etiqueta del importador ("MISSING PUNCH") es de que TIPO es el aviso, no
     parte de la frase: va como marca, no como texto corrido. */
  .capAvI .tx .et{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;color:var(--amar);background:#FEF6E7;border-radius:4px;
    padding:2px 6px;margin-right:7px;vertical-align:1px}
  .capAvI .tx b{font-weight:700;color:var(--ink)}
  /* Que hay que hacer, en segunda linea: el que lee ya sabe que pasa. */
  .capAvI .tx small{display:block;font-size:var(--f1);color:var(--gris);font-weight:500;
    line-height:1.4;margin-top:2px}
  .capAvI.malo .tx b{color:#B91C1C}
  .capAvI.malo .tx .et{color:var(--rojo);background:var(--rojobg)}
  .capAvI .ac{display:flex;gap:5px;flex:0 0 auto;margin-top:1px}

  /* Lo que es de la semana entera y no de nadie: no tiene fila donde caer. */
  .capSem{padding:9px 14px;background:#FFFCF5;border-bottom:1px solid #F0E2C8}
  .capSemI{display:flex;align-items:center;gap:9px;font-size:var(--f2);padding:4px 0}
  .capSemI+.capSemI{border-top:1px dashed #F0E2C8;margin-top:4px;padding-top:8px}
  .capSemI .ic{color:var(--amar);display:flex;flex:0 0 auto}
  .capSemI .tx{flex:1;min-width:0;line-height:1.4}
  .capSemI .ac{display:flex;gap:5px;flex:0 0 auto}

  /* ---- EL COMPROBANTE DEL PAGO ----
     Va junto al momento en que se marca la semana como pagada. Sin comprobante
     no grita: es opcional, y si el banco todavia no dio el acuse hay que poder
     marcar igual. */
  .cmpb{margin:0 20px 10px;padding:0;overflow:hidden}
  .cmpb .tt{display:flex;align-items:center;gap:9px;padding:12px 15px 0;font-size:13.5px}
  .cmpb .tt svg{width:16px;height:16px;color:var(--gris)}
  .cmpb .tt .lab{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gris2)}
  .cmpb .fl{display:flex;align-items:center;gap:11px;padding:11px 15px 14px;flex-wrap:wrap}
  .cmpb .mn{width:44px;height:56px;object-fit:cover;object-position:top center;
    border:1px solid var(--line);border-radius:7px;flex:0 0 auto;background:#FAFAF8}
  .cmpb .ic{width:36px;height:36px;border-radius:9px;background:var(--line2);color:var(--gris);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .cmpb .t{flex:1;min-width:150px}
  .cmpb .t b{display:block;font-size:12.5px;font-weight:700}
  .cmpb .t small{display:block;font-size:10.5px;color:var(--gris2);margin-top:1px}
  .cmpb .fl .btn{padding:6px 12px;font-size:11.5px;margin:0;flex:0 0 auto;
    text-decoration:none;cursor:pointer}
  .cmpb .fl label.btn input{display:none}
  .cmpb .fl .btn.x{width:32px;padding:6px 0;text-align:center;color:var(--gris)}
  .cmpb .fl.vacia{background:#FBFAF8;border-top:1px solid var(--line2);margin-top:10px}
  .cmpb .na{font-size:11px;color:var(--gris2)}

  /* ---- CABECERA DEL EXPEDIENTE ----
     Antes decia el nombre y poco mas, y para pasar al siguiente expediente
     habia que volver a escribir en el buscador. */
  .expCab{margin:0 0 12px;padding:14px 16px}
  .expQuien{display:flex;gap:13px;row-gap:11px;align-items:center;flex-wrap:wrap;
    margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
  .expQuien .av{width:46px;height:46px;border-radius:13px;flex:0 0 auto;
    background:linear-gradient(135deg,#33333F,#16161C);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
  .expQuien .nom{min-width:150px}
  .expQuien .nom b{display:block;font-size:16px;font-weight:800;line-height:1.2}
  .expQuien .est{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;
    padding:3px 9px;border-radius:99px;margin-top:3px;letter-spacing:.03em}
  .expQuien .est::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
  .expQuien .est.si{background:var(--okbg);color:#047857}
  .expQuien .est.no{background:var(--rojobg);color:#B91C1C}
  /* Los datos que se consultan de un vistazo, sin abrir pestañas. */
  .expMet{display:flex;gap:18px;flex-wrap:wrap;padding-left:13px;border-left:1px solid var(--line)}
  .expMet span{display:block;font-size:9px;color:var(--gris2);text-transform:uppercase;
    letter-spacing:.06em}
  .expMet b{font-size:12.5px;font-weight:600}
  .expMet b.bien{color:#047857}
  .expMet b.mal{color:#B91C1C}
  .expMet b.gris{color:var(--gris)}
  /* Pasar de expediente y mandar la liga son dos cosas distintas: van
     separadas, no pegadas. Antes "82 of 116" y el boton se tocaban. */
  .expNav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    row-gap:8px;justify-content:flex-end}
  .expNav .paso{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
  .expNav .paso button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
    background:var(--card);color:var(--ink);cursor:pointer;font:inherit;font-size:13px;
    display:flex;align-items:center;justify-content:center;padding:0}
  .expNav .paso button:hover{border-color:var(--nar);color:var(--nar)}
  .expNav .paso i{font-style:normal;font-size:11.5px;color:var(--gris);
    font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:2px}
  .expNav .acc{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
  .expNav .acc .btn{padding:7px 14px;font-size:12px;white-space:nowrap;margin:0}
  .expNav .sinLiga{font-size:11.5px;color:var(--gris2);white-space:nowrap}
  /* Pestañas con contador: se sabe que falta sin entrar a buscarlo. */
  .expTabs{display:flex;gap:2px;overflow-x:auto;margin-top:12px;scrollbar-width:thin}
  .expTabs button{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    border:none;background:none;font:inherit;cursor:pointer;color:var(--gris);
    font-size:12.5px;font-weight:600;padding:9px 13px;border-bottom:2px solid transparent;
    white-space:nowrap;margin-bottom:-1px}
  .expTabs button:hover{color:var(--ink)}
  .expTabs button.on{color:var(--ink);font-weight:800;border-bottom-color:var(--nar)}
  .expTabs .c{font-style:normal;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:99px;
    background:var(--line2);color:var(--gris2);font-variant-numeric:tabular-nums}
  .expTabs .c.al{background:#FEF6E7;color:var(--amar)}
  .expTabs button.on .c.al{background:var(--amar);color:#fff}

  .expQuien .volver{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
    background:var(--card);color:var(--gris);cursor:pointer;font:inherit;font-size:14px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;padding:0}
  .expQuien .volver:hover{border-color:var(--nar);color:var(--nar)}
  .expMet b .mono{font-family:ui-monospace,Consolas,monospace;font-size:11.5px}
  .expTabs .c.cero{background:var(--line2);color:var(--gris2)}

  /* ---- EL EXPEDIENTE EN DOS COLUMNAS ----
     Lo largo a la izquierda -- los datos y el historial --, las tarjetas cortas
     a la derecha. En monitor ancho se acababa el desierto de la derecha. */
  .expDos{display:grid;grid-template-columns:1fr;gap:13px;align-items:start}
  @media(min-width:900px){ .expDos{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr)} }
  .expLado{display:flex;flex-direction:column;gap:13px}
  .expLado.sola{max-width:520px}
  .expSec{padding:0;overflow:hidden;margin-bottom:13px}
  .expSec:last-child{margin-bottom:0}
  .expSec .tt,.expLado .tar .tt,.tarOjo .tt{display:flex;align-items:center;gap:9px;
    padding:12px 15px 0;font-size:14px;font-weight:800}
  .expSec .tt .lab,.expLado .tar .tt .lab{margin-left:auto;font-size:10.5px;color:var(--gris2);font-weight:500}
  .expLado .tar{background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--sh);overflow:hidden}
  .expLado .tar .tt b{font-size:14px}
  .expLado .tar .mini{margin-left:auto;padding:3px 10px;font-size:11px}

  /* Los campos: dos por renglon, y se editan en el propio campo. */
  .expCampos{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:10px 15px 14px}
  @media(max-width:560px){ .expCampos{grid-template-columns:1fr} }
  .expCampos .cmp,.expCampos .ro{padding:9px 12px 9px 0;border-bottom:1px solid var(--line2);min-width:0}
  .expCampos .cmp:nth-last-child(-n+2),.expCampos .ro:nth-last-child(-n+2){border-bottom:0}
  .expCampos span{display:block;font-size:10px;color:var(--gris2);margin-bottom:2px}
  .expCampos b{font-size:13.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis}
  .expCampos b.vacio{color:var(--gris2);font-weight:400}
  .expCampos .ed{width:100%;border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;
    color:inherit;padding:1px 0;border-bottom:1px solid transparent}
  .expCampos .ed:hover{border-bottom-color:var(--line)}
  .expCampos .ed:focus{border-bottom-color:var(--nar);outline:none}
  .expCampos .ed::placeholder{color:var(--gris2);font-weight:400}
  .expDelRoster{margin:0 15px 14px;padding-top:12px;border-top:1px dashed var(--line)}
  .expDelRoster b{font-size:12.5px}
  .expDelRoster small{display:block;font-size:var(--f1);color:var(--gris);margin-bottom:2px}
  .expDelRoster .expCampos{padding:0}

  /* Lo que esta persona necesita: el tablero de cumplimiento, de una sola. */
  .tarOjo{background:#FFFBEB;border:1px solid #F5DFA8;border-radius:14px;overflow:hidden}
  .tarOjo .tt{color:var(--amar)}
  .tarOjo .tt svg{width:16px;height:16px}
  .tarOjo .fl{border-color:#F0E2BC}
  .tarOjo>.btn{margin:0 15px 14px;padding:6px 12px;font-size:11.5px}
  .expLado .tar>.btn{margin:2px 15px 14px;padding:6px 12px;font-size:11.5px}

  .tarOjo .fl,.expLado .tar .fl{display:flex;align-items:center;gap:10px;
    padding:9px 15px;border-top:1px solid var(--line2);font-size:13px}
  .tarOjo .fl .t,.expLado .tar .fl .t{flex:1;min-width:0}
  .tarOjo .fl .t b,.expLado .tar .fl .t b{display:block;font-size:12.5px;font-weight:700;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tarOjo .fl .t small,.expLado .tar .fl .t small{display:block;font-size:10.5px;color:var(--gris2)}
  .tarOjo .chip,.expLado .tar .chip{flex:0 0 auto;font-size:9.5px;font-weight:800;padding:3px 9px;
    border-radius:99px;white-space:nowrap;background:var(--line2);color:var(--gris2)}
  .tarOjo .chip.ok,.expLado .tar .chip.ok{background:var(--okbg);color:#047857}
  .tarOjo .chip.al,.expLado .tar .chip.al{background:#FEF6E7;color:var(--amar)}
  .tarOjo .chip.no,.expLado .tar .chip.no{background:var(--rojobg);color:#B91C1C}
  .expLado .mas,.expSec .mas{padding:7px 15px;font-size:var(--f1);color:var(--gris2)}

  .kpi3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px 15px 12px}
  .kpi3 div{background:#FAFAF8;border:1px solid var(--line);border-radius:10px;
    padding:9px 6px;text-align:center;min-width:0}
  .kpi3 b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
  .kpi3 span{font-size:8.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}

  .nota{background:#FAFAF8;border-left:3px solid var(--line);margin:0 15px 10px;
    padding:9px 12px;font-size:12.5px;border-radius:0 8px 8px 0;line-height:1.4}
  .nota:first-of-type{margin-top:10px}
  .nota .meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--gris2);margin-bottom:3px}
  .nota .meta .x{margin-left:auto;border:none;background:none;color:var(--gris2);cursor:pointer;
    font:inherit;font-size:11px;padding:0 2px;line-height:1}
  .nota .meta .x:hover{color:var(--rojo)}

  /* Historial: sale del log de cambios, que ya guarda quien y cuando. */
  .filaH{display:flex;align-items:center;gap:10px;padding:9px 15px;
    border-top:1px solid var(--line2);font-size:13px}
  .filaH .ic{width:28px;height:28px;border-radius:8px;background:#FAFAF8;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:13px;color:var(--gris)}
  .filaH .t{flex:1;min-width:0}
  .filaH .t b{display:block;font-size:12.5px;font-weight:700}
  .filaH .t small{display:block;font-size:10px;color:var(--gris2)}
  .filaH .chip{flex:0 0 auto;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:99px;
    white-space:nowrap;background:var(--line2);color:var(--gris2)}

  /* ---- DOCUMENTS EN REJILLA ----
     Era una lista de renglones donde los ocho papeles se veian iguales y habia
     que leer el nombre para distinguirlos. Con la primera pagina dibujada se
     reconocen de un vistazo. Lo que FALTA tambien es una tarjeta, punteada:
     una pantalla que solo enseña lo que existe no sirve para pedir lo que no. */
  .docTools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:12px 15px;border-bottom:1px solid var(--line)}
  .docFils{display:flex;gap:3px;background:var(--line2);border-radius:99px;padding:3px;flex-wrap:wrap}
  /* --gris2 y no --gris: sobre --line2, --gris se queda en 4.31:1 y esto es
     texto de 11.5px, que pide 4.5. */
  .docFil{border:none;background:none;font:inherit;cursor:pointer;color:var(--gris2);
    font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:99px;white-space:nowrap}
  .docFil .n{font-style:normal;font-size:9.5px;margin-left:4px;opacity:.75;
    font-variant-numeric:tabular-nums}
  .docFil.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(16,17,20,.06)}
  .docCuenta{margin-left:auto;font-size:var(--f1);color:var(--gris);
    font-variant-numeric:tabular-nums}

  .docRej{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
    gap:13px;padding:15px}
  .docT{background:var(--card);border:1px solid var(--line);border-radius:14px;
    overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}
  /* Un asterisco marca lo obligatorio PARA ESE PUESTO: un cocinero necesita
     manejo de alimentos, un cajero no. */
  .docT.oblig .tit::after{content:" *";color:var(--rojo)}
  .docT .prev{height:132px;background:#FAFAF8;border-bottom:1px solid var(--line);
    position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
  /* La miniatura se ancla ARRIBA: en un permiso o un contrato lo que identifica
     el papel es el membrete, no el centro de la hoja. */
  .docT .prev .mn{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .docT .prev .vacia,.docT .prev .sinMini{display:flex;flex-direction:column;align-items:center;
    gap:5px;color:var(--gris2)}
  .docT .prev .vacia svg,.docT .prev .sinMini svg{width:26px;height:26px;opacity:.5}
  .docT .prev .vacia small,.docT .prev .sinMini small{font-size:10.5px}
  .docT .cinta{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;
    padding:3px 8px;border-radius:99px;letter-spacing:.04em;color:#fff}
  /* Sobre color pleno y a 9px: se usan los tonos oscuros, no los claros. */
  .docT .cinta.ok{background:#047857}
  .docT .cinta.al{background:var(--amar)}
  .docT .cinta.no{background:#B91C1C}
  .docT .cinta.g{background:#5C6470}
  .docT .cuerpo{padding:11px 12px 12px;flex:1;display:flex;flex-direction:column}
  .docT .tit{font-size:13px;font-weight:700;line-height:1.25}
  .docT .meta{font-size:10.5px;color:var(--gris2);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* La fecha decide, asi que va en la tarjeta y se edita aqui mismo. */
  .docT .vence{font-size:11px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line2);
    display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
  .docT .vence .et{color:var(--gris)}
  .docT .vence b{font-weight:700}
  .docT .vence b.gris{color:var(--gris2);font-weight:500}
  .docT .vence .fv{border:1px solid var(--line);border-radius:7px;padding:2px 5px;
    font:inherit;font-size:10.5px;color:inherit;background:var(--card);max-width:118px}
  .docT .acc{display:flex;gap:6px;margin-top:10px}
  /* "Replace" y no "Download": estos papeles se renuevan, no se consultan. */
  .docT .acc .btn{flex:1;padding:7px 6px;font-size:11.5px;text-align:center;
    text-decoration:none;margin:0;cursor:pointer}
  .docT .acc label.btn{display:block}
  .docT .acc label.btn input{display:none}
  .docT .acc .btn.kb{flex:0 0 auto;width:32px;padding:7px 0;color:var(--gris)}
  .docT.falta{border-style:dashed;border-color:#D9D9D3;background:#FAFAF8;box-shadow:none}
  .docT.falta .prev{background:transparent;border-bottom-style:dashed;border-color:#E4E4DE}
  .docPie{padding:0 15px 15px;font-size:var(--f1);color:var(--gris2)}
  .docPie b{color:var(--rojo)}

  .fila-nom{font-size:var(--f1);color:var(--gris2)}
  .naranja{color:var(--nar)}
  h1{font-size:var(--f5);font-weight:700;letter-spacing:-.02em}
  h2{font-size:var(--f3);margin-bottom:4px;font-weight:750}
  .sub{font-size:12px;color:var(--gris);margin-bottom:12px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:900px){.grid2,.grid4{grid-template-columns:1fr}}
  .vivo{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);background:var(--okbg);color:var(--ok);padding:5px 11px;border-radius:99px;font-weight:600}
  .punto{width:6px;height:6px;border-radius:99px;background:var(--ok);animation:pulso 1.6s infinite}
  @keyframes pulso{50%{opacity:.3}}
  .delta{font-size:var(--f1);font-weight:700;display:inline-flex;align-items:center;gap:2px}
  .delta.up{color:var(--rojo)}.delta.down{color:var(--ok)}.delta.flat{color:var(--gris2)}
  .empty{text-align:center;padding:36px 20px;color:var(--gris)}
  .empty .ico{font-size:32px;opacity:.5;margin-bottom:8px}
  .empty .t{font-weight:700;color:var(--ink);font-size:var(--f3);margin-bottom:3px}
  .empty .d{font-size:12px;max-width:320px;margin:0 auto}
  .talon{page-break-inside:avoid}
  #errbox{display:none;position:fixed;inset:auto 12px 12px 12px;background:var(--rojobg);border:2px solid var(--rojo);border-radius:12px;padding:14px;z-index:99;font-size:var(--f2)}
  #toasts{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px}
  .toast{background:var(--ink);color:#fff;padding:11px 16px;border-radius:10px;font-size:var(--f2);font-weight:600;box-shadow:var(--sh2);display:flex;align-items:center;gap:8px;animation:toastIn .25s ease;max-width:320px}
  .toast.ok{background:var(--ok)}.toast.err{background:var(--rojo)}.toast.info{background:var(--ink2)}
  @keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
  @keyframes toastOut{to{opacity:0;transform:translateX(20px)}}
  @media print{body.pshist>*:not(#psHistOv){display:none!important}body.pshist #psHistOv{position:static!important;background:none!important}body.pshist #psHistCard{max-width:none!important;box-shadow:none!important}.no-print{display:none!important}.sb{display:none!important}body{background:#fff}.qbgrid{display:block!important}.qbgrid .card{max-height:none!important}.qbgrid table{max-height:none!important}.qbgrid [style*='max-height']{max-height:none!important;overflow:visible!important}}

/* -------- modales propios (reemplazan alert/confirm/prompt) -------- */
#mOverlay{ position:fixed; inset:0; background:rgba(10,20,15,.45); z-index:9000; display:flex; align-items:center; justify-content:center; padding:18px; animation:mFade .12s ease; }
@keyframes mFade{ from{opacity:0} to{opacity:1} }
.mCard{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(10,25,18,.25); max-width:440px; width:100%; padding:20px 22px; animation:mPop .14s ease; }
@keyframes mPop{ from{transform:translateY(8px) scale(.98); opacity:0} to{transform:none; opacity:1} }
.mTit{ font-weight:800; font-size:15px; color:var(--ink); margin-bottom:8px; display:flex; align-items:flex-start; gap:8px; line-height:1.35; }
.mMsg{ font-size:13px; color:var(--gris); line-height:1.55; white-space:normal; }
.mMsg b{ color:var(--ink); }
.mLbl{ font-size:10px; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 4px; }
.mInp{ width:100%; font-size:16px; font-weight:700; }
.mHint{ margin-top:8px; background:#F4F7F4; border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:12px; color:var(--gris); line-height:1.45; }
.mBtns{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.mBtns .btn{ padding:8px 18px; font-size:13px; }
.btnRojo{ background:var(--rojo) !important; color:#fff !important; border-color:var(--rojo) !important; }

/* piezas del mockup aprobado */
.saludo{font-size:13px;color:var(--gris);margin-bottom:2px}
.pillDraft{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--nar);background:var(--narbg);border:1px solid #FFD6BB;border-radius:99px;padding:4px 11px;vertical-align:middle;margin-left:10px}
.pillDraft .pp{width:6px;height:6px;border-radius:50%;background:var(--nar);animation:ppulse 1.6s infinite}
@keyframes ppulse{0%,100%{opacity:1}50%{opacity:.35}}
.estadoCard{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:var(--sh);flex-wrap:wrap}
.estadoCard .ek{font-size:10.5px;font-weight:600;color:var(--gris);letter-spacing:.05em;text-transform:uppercase}
.estadoCard .ev{font-variant-numeric:tabular-nums;font-weight:700;font-size:21px;font-variant-numeric:tabular-nums}
.estadoCard .ev small{font-size:13px;color:var(--gris);font-weight:500}
.estadoCard .ev.money{background:linear-gradient(90deg,var(--nar),var(--nar2));-webkit-background-clip:text;background-clip:text;color:transparent}
.eTrack{height:7px;border-radius:99px;background:var(--line2);overflow:hidden;margin-top:6px;min-width:150px}
.eFill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--nar),var(--nar2))}
.btnPri{background:linear-gradient(135deg,var(--nar),var(--nar2))!important;box-shadow:0 6px 20px rgba(var(--narRGB),.35)!important}
.wgRow{display:flex;gap:10px;margin:10px 0 0;flex-wrap:wrap}
.wg{flex:1;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;box-shadow:var(--sh);display:flex;align-items:center;gap:11px}
.wg .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--narbg);flex:0 0 auto}
.wg .k{font-size:10px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.wg .v{font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px;margin-top:1px}
.wg .v small{font-size:11px;color:var(--gris);font-weight:500}
.avI{display:inline-flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#fff;flex:0 0 auto}
.empCell{display:flex;align-items:center;gap:10px}

/* Schedule rediseñado */
.schRow .cpw{opacity:0;transition:opacity .12s}
/* :focus-visible va aquí porque "copy week" solo aparece al pasar el mouse.
   Con teclado no hay mouse: sin esta línea el foco caía en un botón invisible. */
.schRow:hover .cpw, .schRow .cpw.viva, .schRow .cpw:focus-visible{opacity:1}
@media(hover:none){ .schRow .cpw{opacity:1} }
.schCel{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:11px;font-weight:700;
  padding:4px 3px;border-radius:7px;max-width:78px;width:100%;text-align:center;cursor:pointer}
.schCel.vac{border:1px solid transparent;background:transparent;color:#C9C9D2}
.schCel.vac:hover{border-color:var(--line);background:var(--card)}
.schCel.llena{border:1px solid #FFD6BB;background:#FFF7F2;color:var(--ink)}
.schCel.off{border:1px solid var(--line);background:var(--card);color:var(--gris)}
/* Las pestañas de departamento son <button>: font-family:inherit evita que
   el navegador les meta su propia tipografía. */
.schDep{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:9px;
  font-family:inherit;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap;color:var(--gris)}
.schDep.on{border-color:var(--nar);background:#FFF6F1;color:var(--nar)}

  /* Espacios de trabajo. El selector es CONTEXTO: se lee, no grita.
     Quien manda visualmente es el renglon activo del menu. */
  .sb-esp{display:flex;gap:2px;margin:0 12px 14px;padding:2px;background:rgba(255,255,255,.05);border-radius:9px;position:relative}
  .sb-esp button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border:none;background:none;
    border-radius:7px;color:rgba(233,239,234,.42);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    cursor:pointer;font-family:inherit;transition:color .13s,background .13s;min-width:0}
  .sb-esp button svg{width:15px;height:15px;stroke-width:1.9}
  .sb-esp button:hover{color:rgba(233,239,234,.8)}
  .sb-esp button.on{background:rgba(255,255,255,.09);color:#fff}
  .sb-esp button.on::after{content:"";position:absolute;bottom:-1px;height:2px;width:22px;border-radius:2px;background:var(--nar)}
  .sb-esp button.on.people::after{background:#8E79C9}
  .sb-esp button.on.time::after{background:#5D9BC4}
  .sb-esp .e-tx{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .sb.min .sb-esp{flex-direction:column;margin:0 8px 12px}
  .sb.min .sb-esp .e-tx{display:none}
  .sb.min .sb-esp button.on::after{display:none}
  .sb.esp-people .sb-it.on{background:linear-gradient(135deg,#5B4B8A,#7A66B0);box-shadow:0 6px 20px rgba(91,75,138,.35)}
  .sb.esp-time .sb-it.on{background:linear-gradient(135deg,#2F5E7C,#4A88AE);box-shadow:0 6px 20px rgba(47,94,124,.35)}

  /* ---- FOCO DE TECLADO ----
     Antes solo lo tenian los campos de texto. Los botones no se veian al
     navegar con Tab, y quien captura horas todo el lunes usa mucho el teclado.
     :focus-visible sale con teclado y NO al hacer click con el mouse, asi que
     no ensucia el uso normal. Los campos ya tienen su propio aro arriba. */
  button:focus-visible,.btn:focus-visible,a:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--nar);outline-offset:2px;border-radius:6px}
  /* El aro nativo se quita SOLO a los campos que ya tienen el suyo propio
     (input.cap, input.txt y los select, definidos mas arriba con box-shadow).
     Antes esta regla decia "input, select, textarea" a secas, asi que dejaba
     sin NINGUN indicador de foco a los checkboxes y a cualquier campo sin
     clase. Se corrigio el 26 jul 2026: la introduje yo tratando de AGREGAR
     foco visible. */
  input.cap:focus-visible,input.txt:focus-visible,select:focus-visible{outline:none}
  /* Los checkboxes son chiquitos: el aro va pegado para que se note */
  input[type=checkbox]:focus-visible{outline:2px solid var(--nar);outline-offset:1px}
  /* En la barra lateral el naranja no contrasta contra el fondo oscuro */
  .sb button:focus-visible{outline-color:#fff}

  /* ================= MOVIMIENTO REDUCIDO =================
     Quien tenga el sistema puesto en "reducir movimiento" (Windows, iOS,
     Android y macOS lo ofrecen) no deberia ver nada moverse. En esta app lo
     que mas molesta son los dos puntos que parpadean en bucle infinito: el
     "Live" del pie de la barra y el de DRAFT. Los demas son entradas cortas
     de avisos y ventanas.

     Se acortan las duraciones en vez de poner animation:none, para que cada
     animacion llegue a su estado FINAL de inmediato. Con animation:none, una
     ventana que entra desde opacity:0 podria quedarse invisible. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* Aviso de columnas escondidas. Va DEBAJO de la tabla y no arriba: no es una
     alerta, es una explicacion de por que la rejilla se ve mas corta. */
  .capOcultas{padding:8px 15px;font-size:var(--f1);color:var(--gris);
    background:#FBFAF8;border-top:1px solid var(--line)}

  /* ---- LAS DOS SALIDAS DE UN AVISO ----
     Antes cada aviso era una linea de texto con una ✕. No decia de quien era ni
     que hacer, y despacharlo no dejaba rastro: "ya lo capture" y "no aplica"
     terminaban igual. Los botones sobrevivieron al cambio de sitio; las cajas
     que los contenian, no: ahora el aviso va debajo de su propia fila. */
  .colaOk,.colaNa{border:1px solid #EBD9A8;background:var(--card);cursor:pointer;font:inherit;
    font-size:10.5px;font-weight:700;border-radius:7px;padding:3px 9px;white-space:nowrap}
  .colaOk{color:var(--ok);border-color:#C7E9D7}
  .colaOk:hover{background:var(--ok);color:var(--card);border-color:var(--ok)}
  .colaNa{color:var(--gris)}
  .colaNa:hover{background:var(--gris);color:var(--card);border-color:var(--gris)}

  /* la fila a la que te acaban de llevar: se senala y se apaga sola */
  .capT tr.resaltada td{background:#FFF6E5}
  .capT tr.resaltada td.fija{background:#FFF6E5;box-shadow:2px 0 0 var(--line), inset 3px 0 0 var(--amar)}

  /* ---- Recruitment: el formulario de una vacante ----
     Dos cosas que no eran obvias y se vieron pintando, no leyendo:

     1. La regla de arriba es "input.txt", NO ".txt". Un <textarea class="txt">
        no recibia nada: ni borde, ni tipografia, ni relleno. Salia con la
        monoespaciada del navegador.
     2. input.txt no lleva width, asi que todo quedaba del ancho por defecto
        y el formulario se apretaba contra la izquierda con media pantalla
        vacia al lado.

     No se toca ".txt" global -- eso movería todas las pantallas de golpe.
     Y el ancho se limita a una medida legible: un campo de 1400px no se lee. */
  /* ★ El tope va en la TARJETA, no solo en el formulario. Con el tope solo
     dentro, la tarjeta se estiraba a todo el ancho y quedaban ~430px de blanco
     muerto a su derecha -- que es justo lo que se veia mal. Ahora la tarjeta
     encoge a su contenido. */
  .page.rejilla > .card:has(.recForm){max-width:708px}
  .recForm{max-width:660px}
  /* Y con el preview abierto, el formulario deja de estar centrado solo: la
     rejilla manda, y el hueco de la derecha deja de ser hueco. */
  .recDos > .card{max-width:none}
  .recForm input.txt,.recForm select,.recForm textarea.txt{width:100%}
  .recForm textarea.txt{padding:7px 9px;border:1px solid var(--line);border-radius:7px;
    font-size:var(--f2);font-family:inherit;background:#fff;color:var(--ink);outline:none;
    resize:vertical;line-height:1.55;transition:border-color .15s,box-shadow .15s}
  .recForm textarea.txt:focus,.recForm input.txt:focus,.recForm select:focus{
    border-color:var(--ink2);box-shadow:0 0 0 3px rgba(var(--narRGB),.12)}
  /* El sueldo y las plazas son cifras cortas: no tienen por que ocupar media
     pantalla cada una solo porque la tarjeta sea ancha. */
  .recPar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  @media(max-width:560px){ .recPar{grid-template-columns:1fr} }

  /* Etiquetas del formulario de vacante. ".et" solo existia dentro de
     .capAvI y .docT, asi que aqui no la agarraba ninguna regla: salian
     identicas al texto normal y lo unico que decia "esto es una etiqueta"
     era que debajo hubiera una caja. */
  .recForm .et{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--gris);margin:14px 0 5px}
  .recForm .et:first-of-type{margin-top:0}
  /* Y "chip n" tampoco existia: CLOSED caia en .chip a secas, que es estilo
     de fila de lista (display:flex), asi que se bajaba de renglon y se leia
     como segunda linea del titulo en vez de como estado. */
  .recFila .chip.n{display:inline-block;background:var(--line2,#EFEFEC);color:var(--gris);
    font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:20px;
    vertical-align:2px}
  /* .peligro solo estaba definida dentro de .capBar, asi que Delete salia
     con el estilo exacto de Close, a 12px de distancia. */
  .recFila .btn.peligro{color:var(--rojo)}
  .recFila .btn.peligro:hover{border-color:var(--rojo)}

  /* Formulario + preview. El hueco de la derecha no era espacio sobrante:
     era el unico lugar donde tiene sentido ver lo que se va a publicar antes
     de publicarlo. Estirar los campos hasta ahi habria sido peor -- un campo
     de texto de 1400px no se lee. */
  /* Topado y centrado: sin el max-width la tarjeta se estiraba a 1125px con el
     formulario topado en 660 dentro, o sea 465px de blanco DENTRO de la
     tarjeta. El hueco no se quita estirando el campo, se quita encogiendo la
     tarjeta hasta su contenido. */
  .recDos{display:grid;grid-template-columns:minmax(0,708px) minmax(0,392px);gap:20px;
    align-items:start;max-width:1120px;margin:0 auto}
  @media(max-width:1080px){ .recDos{grid-template-columns:1fr} }
  .recPrevW{position:sticky;top:16px}
  /* En el panel derecho la lista de vacantes va compacta. */
  .recLado .card{padding:15px 14px}
  .recLado .btn{font-size:12px;padding:7px 10px}
  .recPrevH{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--gris);margin-bottom:8px}
  .recPrevPie{font-size:11px;color:var(--gris);margin-top:9px;line-height:1.5}
  /* La tarjeta del candidato se ve como el sitio publico, no como la app:
     por eso el acento del restaurante manda aqui y en ningun otro lado. */
  .recPrev{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:18px 17px;box-shadow:0 8px 26px rgba(22,24,29,.07)}
  .recPrev .pvCab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--nar)}
  .recPrev .pvTit{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:4px;line-height:1.15}
  .recPrev .pvDep{font-size:12px;color:var(--gris);margin-top:2px}
  .recPrev .pvPago{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:12px;
    font-variant-numeric:tabular-nums}
  .recPrev .pvPago small{font-size:13px;font-weight:600;color:var(--gris);letter-spacing:0}
  .recPrev .pvFalta{color:#B9B9B2;font-weight:400;font-size:14px;letter-spacing:0}
  .recPrev .pvMeta{font-size:12px;color:var(--gris);margin-top:3px}
  .recPrev .pvSum{font-size:13px;line-height:1.6;margin-top:13px;color:#3A3E46}
  .recPrev .pvT{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--gris);margin-top:15px}
  .recPrev .pvL{margin:6px 0 0;padding-left:17px;font-size:13px;line-height:1.65;color:#3A3E46}
  .recPrev .pvL li{margin-bottom:3px}
  .recPrev .pvBtn{margin-top:17px;padding:11px;border-radius:10px;background:var(--nar);color:#fff;
    font-weight:800;font-size:13px;text-align:center}

  /* ---- Recruitment: la bandeja de candidatos ----
     La bandeja ES la pantalla; las vacantes viven en el panel de la derecha.
     Abrir una vacante es un boton, no un destino. */
  .recDos2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:18px;align-items:start}
  @media(max-width:1000px){ .recDos2{grid-template-columns:1fr} }
  .recLado{position:sticky;top:16px}
  .recFrase{font-size:15px;line-height:1.6}
  .recFrase b{font-weight:800}

  /* El embudo son los filtros: dice donde esta la gente Y deja ir ahi. Un
     embudo que solo se mira no sirve de nada. */
  .recEmb{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}
  .recEt{flex:1;min-width:96px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:11px 12px;cursor:pointer;text-align:left;
    transition:border-color .15s,background .15s}
  .recEt:hover{border-color:var(--ink)}
  .recEt.on{border-color:var(--nar);background:var(--narbg,#FFF3EB)}
  .recEt b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;line-height:1.1}
  .recEt span{display:block;font-size:11px;color:var(--gris);margin-top:2px}
  .recEt.on b,.recEt.on span{color:var(--nar)}
  /* Banco y descartados NO son un paso adelante: son salidas. Por eso se ven
     distintos, no como una etapa mas del embudo. */
  .recEt.sec{background:transparent;border-style:dashed}
  .recEt.sec b{font-size:17px;color:var(--gris)}

  .recFil{margin-bottom:10px}
  .recFil select{max-width:280px}

  .recBarra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--ink);
    color:#fff;border-radius:12px;padding:10px 13px;margin-bottom:10px}
  .recBarra b{font-size:13px;margin-right:4px}
  .recBb{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;
    border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer}
  .recBb:hover{background:rgba(255,255,255,.2)}
  .recBb.pri{background:var(--nar);border-color:var(--nar)}
  .recBb.pri:hover{background:var(--nar2,#FF8F3D)}
  .recBb.mal{color:#FFB4B4}
  .recBb.fin{margin-left:auto;background:transparent;border-color:transparent;color:#A8ADB5}

  .recTablaW{padding:0;overflow-x:auto}
  .recT{width:100%;border-collapse:collapse;font-size:13px}
  .recT th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;color:var(--gris);padding:12px 10px;border-bottom:1px solid var(--line);
    white-space:nowrap}
  /* text-align:left explicito: hay una regla global que alinea los td a la
     derecha, y tiene sentido en las tablas de nomina -- son numeros. Esta es
     de nombres, telefonos y etiquetas. */
  .recT td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
  .recT tbody tr:last-child td{border-bottom:none}
  .recT tbody tr:hover{background:var(--fondo,#F7F7F5)}
  .recT tr.sel{background:var(--narbg,#FFF3EB)}
  .cChk{width:38px;cursor:pointer}
  /* El blanco es la CELDA entera, no el cuadrito de 16px: se ve igual y se
     acierta siempre, sobre todo con el dedo. */
  .recChk{width:17px;height:17px;border:1.5px solid #C9C9C3;border-radius:5px;background:#fff;
    cursor:pointer;padding:0;display:block}
  .recChk.on{background:var(--nar);border-color:var(--nar);position:relative}
  .recChk.on::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
  .cQuien b{display:block;font-weight:700}
  .cQuien span{display:block;font-size:11px;color:var(--gris);font-variant-numeric:tabular-nums}
  .recPronto{color:var(--ok);font-size:12px}
  .recGris{color:var(--gris);font-size:12px}
  .recCu{display:block;font-size:10px;color:var(--gris2,#8A9099)}

  /* Las etiquetas de elegibilidad. Tres colores, tres significados:
     verde esta listo, ambar le falta poco, rojo no puede todavia. */
  .recTg{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;
    margin:1px 3px 1px 0;white-space:nowrap}
  .recTg.v{background:var(--okbg,#EAF7F0);color:var(--ok)}
  .recTg.a{background:var(--amarbg,#FBF5E5);color:var(--amar,#B7791F)}
  .recTg.n{background:var(--rojobg,#FDECEC);color:var(--rojo)}
  .recTg.g{background:#F0F0EC;color:var(--gris)}

  /* WhatsApp es un enlace manual a proposito: avisar.js manda correo, los
     candidatos contestan por WhatsApp, y NO hay puente entre los dos. */
  .recWa{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
    border-radius:9px;background:#25D366;color:#fff;text-decoration:none;font-size:15px}
  .recWa:hover{background:#1FB855}
  /* La carta firmada NO es un chat: se abre para guardar el PDF. Verde de
     WhatsApp en un boton que no manda un mensaje seria mentir con el color. */
  .recWa.pdf{background:var(--ink);font-size:10px;font-weight:800;letter-spacing:.03em;width:auto;
    padding:0 9px}
  .recWa.pdf:hover{background:#000}

  /* ---- Las notas de la entrevista ----
     Se ACUMULAN: cada apunte con quien y cuando. Un campo que se pisa borra la
     entrevista de julio al escribir la de septiembre, que es justo la que se
     queria leer. */
  .recNotas{margin-top:10px}
  .recNota{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line2)}
  .recNota:first-child{border-top:none}
  .recNotaQ{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ink);
    color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}
  .recNotaC{min-width:0;flex:1}
  .recNotaT{font-size:13.5px;line-height:1.55;color:var(--ink)}
  .recNotaM{font-size:11px;color:var(--gris);margin-top:3px;font-weight:600}
  .recNotaVacia{font-size:12.5px;color:var(--gris);padding:12px 0;line-height:1.55}

  /* Las etiquetas rapidas. Son las que se repiten de verdad en una entrevista;
     escribirlas a mano cada vez es como se acaba con la nota vacia. Naranja las
     que suman, rojo las que van a hacer dudar dentro de tres meses. */
  .recEtqs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
  .recEtqs.recPfAcc{margin:2px 0 12px}
  .recEtq{background:var(--card);border:1px solid var(--line);border-radius:20px;
    padding:6px 12px;font-size:12px;font-weight:700;color:var(--gris);cursor:pointer;
    font-family:inherit}
  .recEtq:hover{border-color:var(--ink);color:var(--ink)}
  .recEtq.on{background:var(--narbg);border-color:var(--nar);color:var(--nar)}
  .recEtq.mal.on{background:var(--rojobg);border-color:var(--rojo);color:var(--rojo)}
  .recEtq b{font-weight:800}

  /* "No se presento" se marca en la entrevista, no como un motivo al final:
     "no vino" y "no quedo" son cosas distintas, y a los tres meses esa
     diferencia es la que decide si se le vuelve a llamar. */
  .recNoVino{background:transparent;border:1px solid var(--line);border-radius:20px;
    padding:6px 11px;font-size:12px;font-weight:700;color:var(--gris);cursor:pointer;
    font-family:inherit;white-space:nowrap}
  .recNoVino:hover{border-color:var(--rojo);color:var(--rojo)}
  .recNoVino.on{background:var(--rojobg);border-color:var(--rojo);color:var(--rojo)}

  .recVacia{padding:34px 20px;text-align:center;color:var(--gris);font-size:13px;line-height:1.6}

  /* ---- Recruitment: los paneles de la derecha ---- */
  .recPanel{padding:15px 14px;margin-bottom:12px}
  .recPanel h3{font-size:14px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
  .recPanel p{font-size:12px;color:var(--gris);line-height:1.6}
  .recPanel p b{color:var(--ink)}
  .recPanel .btn{margin-top:11px;width:100%;font-size:12px}
  .recPf{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line)}
  .recPf:first-of-type{border-top:none;padding-top:0}
  .recPn{flex:1;min-width:0}
  .recPn b{display:block;font-size:12.5px;font-weight:700}
  .recPn span{display:block;font-size:11px;color:var(--gris)}
  .recPpie{font-size:10.5px;color:var(--gris2,#8A9099);margin-top:9px;padding-top:8px;
    border-top:1px solid var(--line);line-height:1.5}

  /* Una barra apilada, no una dona: en 280px una dona de cinco rebanadas no se
     lee, y aqui lo que importa es el orden y el porcentaje. */
  .recBar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-bottom:11px;background:var(--line)}
  .recBar i{display:block;height:100%}
  .recPl{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}
  .recPl i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
  .recPl span{flex:1;color:var(--gris)}
  .recPl b{font-variant-numeric:tabular-nums}

  /* Lo urgente no es "la que lleva mas dias": es la que lleva dias Y no tiene
     a nadie a quien llamar. */
  .recU{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;white-space:nowrap}
  .recU.alta{background:var(--rojobg,#FDECEC);color:var(--rojo)}
  .recU.media{background:var(--amarbg,#FBF5E5);color:var(--amar,#B7791F)}
  .recU.baja{background:#F0F0EC;color:var(--gris)}

  .recPanel.banco{background:var(--narbg,#FFF3EB);border-color:#F5CDAF}

  /* ---- la calificacion ----
     Las estrellas van DESPUES de leer el curriculum. Calificar por el nombre y
     tres etiquetas es inventarse una opinion, y la calificacion es lo que
     decide quien pasa al banco de talento. */
  .cEst{white-space:nowrap}
  .recEst{display:inline-flex;gap:1px;vertical-align:middle}
  .recStar{background:none;border:none;padding:0 1px;cursor:pointer;font-size:15px;
    line-height:1;color:#DCDCD6}
  .recStar:hover{color:var(--amar,#B7791F)}
  .recStar.on{color:var(--amar,#B7791F)}
  .recCv{background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px 9px;
    font-size:11px;font-weight:700;cursor:pointer;color:var(--ink)}
  .recCv:hover{border-color:var(--ink)}
  .recCv.chico{margin-left:7px;padding:2px 6px;font-size:10px;color:var(--gris)}
  /* Mando un archivo y no subio. Decirlo es distinto de no decir nada: a esta
     persona se le puede pedir que lo reenvie. */
  .recSinCv{font-size:11px;color:var(--rojo);font-weight:700}

  /* La barra de la bandeja: filtrar, buscar, abrir. "New opening" vive aqui y
     no en un panel propio -- es un boton, y un boton se busca en la barra de
     la pantalla, no en una tarjeta al fondo de la columna de al lado. */
  .recBarraSup{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
  .recBarraSup .recSelVac{flex:0 0 auto;max-width:190px}
  .recBarraSup .recQ{flex:1;min-width:170px}
  .recBarraSup .btn{flex:0 0 auto;margin-left:auto}
  @media(max-width:620px){
    .recBarraSup .recQ{min-width:100%;order:3}
    .recBarraSup .btn{margin-left:0}
  }

  /* Cerrar y borrar dentro del panel de vacantes: los botones aparecen al
     pasar por encima para que la fila se lea primero y se actue despues. En
     tactil no hay hover, asi que ahi se ven siempre. */
  .recPv{position:relative}
  .recPacc{display:none;gap:5px;flex:0 0 auto}
  .recPv:hover .recPacc,.recPv:focus-within .recPacc{display:flex}
  .recPv:hover .recU,.recPv:focus-within .recU{display:none}
  @media(hover:none){
    .recPacc{display:flex}
    .recPv .recU{display:none}
  }
  .recPb{background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 8px;
    font-size:10px;font-weight:700;cursor:pointer;color:var(--ink)}
  .recPb:hover{border-color:var(--ink)}
  .recPb.mal{color:var(--rojo)}
  .recPb.mal:hover{border-color:var(--rojo)}
  .recPcer{font-size:11px;color:var(--gris);margin-top:10px;padding-top:9px;
    border-top:1px solid var(--line);line-height:1.6}
  .recPlink{background:none;border:none;padding:0;font-size:11px;color:var(--nar);
    font-weight:700;cursor:pointer;text-decoration:underline}

  /* El titulo de la bandeja. La barra de arriba tambien dice "Recruitment",
     pero su subtitulo es "Weekly payroll · <fechas>" -- una semana de nomina,
     que aqui no significa nada: reclutar no va por semanas. Este titulo dice
     de que casa son estos candidatos, que es lo unico que hay que saber para
     no confundirse al cambiar de restaurante. */
  .recTit{font-size:20px;font-weight:800;letter-spacing:-.025em;margin-bottom:3px}
  .recTit span{font-weight:600;color:var(--gris)}

  /* La cola de WhatsApp. wa.me abre UN chat, y el navegador bloquea las
     ventanas que no salen de un clic directo -- por eso cada "Next" es su
     propio clic, que ademas es como se hace de verdad: escribir, mandar,
     pasar al siguiente. */
  .recBarra.wa{background:#0F3D24}
  .recWaQ{flex:1;min-width:120px;font-size:12px;color:#CFE6D8}
  .recWaQ i{display:block;font-style:normal;font-size:11px;color:#8FBFA3;
    font-variant-numeric:tabular-nums}
  .recBarra.wa .recBb.pri{background:#25D366;border-color:#25D366;color:#06301B}
  .recBarra.wa .recBb.pri:hover{background:#3FE07C}
  /* El mensaje se VE antes de abrir el chat. Antes abria en blanco y cada quien
     improvisaba -- o no mandaba nada. La caja ocupa el renglon completo dentro
     de la barra: es lo que se va a leer del otro lado, no un detalle. */
  .recWaMsj{flex:1 0 100%;margin-top:9px}
  .recWaMsj label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:#8FBFA3;margin-bottom:5px}
  .recWaMsj textarea{width:100%;background:rgba(255,255,255,.07);color:#EAF7EF;
    border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:9px 11px;
    font-family:inherit;font-size:13px;line-height:1.55;resize:vertical}
  .recWaMsj textarea:focus{outline:none;border-color:#25D366;background:rgba(255,255,255,.12)}
  .recWaPie{display:block;font-size:11px;color:#8FBFA3;margin-top:5px}
  /* Si el correo no salio, se dice -- y se dice que entonces WhatsApp es el
     unico camino. Un "enviado" falso deja a RH esperando una respuesta que
     nadie recibio. */
  .recMailW{margin-top:9px;font-size:12px;line-height:1.55}
  .recMailE.ok{color:var(--ok);font-weight:700}
  .recMailE.esp{color:var(--gris)}
  .recMailE.mal{color:var(--rojo);font-weight:700}

  /* Agendar entrevista: RH propone horarios, el candidato elige uno. */
  .recAg{border-color:var(--nar);margin-bottom:11px}
  .recAg h3{font-size:16px;font-weight:800;letter-spacing:-.02em}
  .recAgS{font-size:12px;color:var(--gris);margin-bottom:13px}
  .recAgF{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:10px}
  @media(max-width:700px){ .recAgF{grid-template-columns:1fr 1fr} }
  .recAgF input.txt{width:100%}
  .recAgN{font-size:12px;color:var(--gris);margin-top:12px;line-height:1.6}
  .recAgN b{color:var(--ink)}
  .recAgE{font-size:12px;color:var(--rojo);font-weight:700;margin-top:10px}
  .recAgB{display:flex;gap:8px;margin-top:14px}
  /* Las ligas de alta recien creadas: una fila por persona, con su enlace a la
     vista. El enlace se ENSEÑA aunque haya boton de mandar -- si el WhatsApp
     falla, que no sea la unica forma de llegar a el. */
  .recOnbN{font-size:12px;color:var(--gris);line-height:1.6;margin:8px 0 11px}
  .recOnbF{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #C6E9D8;
    border-radius:10px;padding:9px 11px;margin-bottom:7px}
  .recOnbQ{flex:1;min-width:0}
  .recOnbQ b{display:block;font-size:13px}
  .recOnbQ span{display:block;font-family:ui-monospace,Consolas,monospace;font-size:10.5px;
    color:var(--gris);word-break:break-all;margin-top:2px}
  .recOnbF .recBb{flex:0 0 auto;background:#25D366;border-color:#25D366;color:#06301B}
  .recOnbF .recBb:hover{background:#1FB855}

  .recLiga{background:var(--okbg,#EAF7F0);border-color:#C6E9D8;margin-bottom:11px;font-size:13px}
  .recLigaU{font-family:ui-monospace,Consolas,monospace;font-size:11px;background:#fff;
    border:1px solid #C6E9D8;border-radius:8px;padding:9px 10px;margin-top:9px;
    word-break:break-all;color:var(--gris)}
  /* Lo que el candidato eligio */
  .recHora{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
  .recHora.ok{background:var(--okbg,#EAF7F0);color:var(--ok)}
  .recHora.esp{background:var(--amarbg,#FBF5E5);color:var(--amar,#B7791F)}
  .recHora.mal{background:var(--rojobg,#FDECEC);color:var(--rojo)}

  /* ---- Banco de talento ----
     Tarjetas, no tabla: lo que se lee aqui no es una columna de datos, es
     "quien era esta persona y por que no quedo". Eso es un parrafo corto, y
     un parrafo en una celda de tabla no se lee. */
  .recRej{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:11px}
  .recPer{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
  .recPer.sel{border-color:var(--nar);background:var(--narbg,#FFF3EB)}
  /* Los frios se atenuan, no se esconden: siguen ahi por si sirven, pero no
     compiten con quien acaba de aplicar. */
  .recPer.frio{opacity:.62}
  .recPer.frio .recIni{background:var(--gris2,#8A9099)}
  .recPer.frio:hover{opacity:1}
  .recPerT{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px}
  .recIni{width:34px;height:34px;border-radius:10px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#33333F,#16181D);color:#fff;font-weight:700;font-size:12px;
    flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  .recIni:hover{box-shadow:0 0 0 3px rgba(255,106,43,.25)}
  .recPerQ{flex:1;min-width:0}
  .recPerQ b{display:block;font-size:13.5px;line-height:1.25}
  .recPerQ span{display:block;font-size:10.5px;color:var(--gris2,#8A9099)}
  .recPerE{font-size:11px;color:var(--amar,#B7791F);white-space:nowrap;flex:0 0 auto}
  /* ★ El porque. Es lo unico que hace util al banco a los tres meses, asi que
     tiene su propio bloque y no se confunde con las etiquetas. */
  .recMotivo{background:var(--fondo,#F7F7F5);border-left:3px solid var(--line);
    border-radius:0 8px 8px 0;padding:7px 10px;font-size:11.5px;color:#3A3D45;margin-bottom:9px}
  .recMotivo b{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--gris2,#8A9099);margin-bottom:2px}
  .recTags{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:10px}
  .recPerA{display:flex;gap:6px}
  .recPerB{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px;
    font-size:11px;font-weight:700;color:#3A3D45;cursor:pointer;text-align:center;
    text-decoration:none;display:block}
  .recPerB:hover{border-color:var(--ink)}
  .recPerB.wa{background:#25D366;border-color:#25D366;color:#0B3D22}
  .recPerB.wa:hover{background:#1FB855}

  /* La sugerencia: quien del banco sirve para una vacante que lleva dias.
     Contratar de ahi es mas rapido y mas barato que publicar otra vez. */
  .recSug{background:linear-gradient(180deg,var(--narbg,#FFF3EB),var(--card));
    border-color:#F5CDAF;margin-bottom:11px}
  .recSugT{display:block;font-size:14.5px;color:var(--nar);margin-bottom:4px}
  .recSug p{font-size:13px;color:#7A4210;margin:0 0 10px;line-height:1.55}
  .recSugP{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .recSugP span{background:#fff;border:1px solid #F5CDAF;border-radius:99px;padding:5px 12px;
    font-size:12px;font-weight:600}
  .recSugP span b{color:var(--nar)}
  .recSugB{background:var(--nar);border:1px solid var(--nar);color:#fff;border-radius:99px;
    padding:5px 13px;font-size:12px;font-weight:700;cursor:pointer}
  .recSugB:hover{background:var(--nar2,#FF8F3D)}

  .recChips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}
  .recChip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;
    font-size:11.5px;font-weight:700;color:var(--gris);cursor:pointer}
  .recChip:hover{border-color:var(--ink)}
  .recChip.on{border-color:var(--nar);background:var(--narbg,#FFF3EB);color:var(--nar)}
  .recChip b{font-variant-numeric:tabular-nums}

  /* Los motivos de una linea: se pulsa uno y se llena el campo. Escribir el
     porque desde cero cada vez es como se deja de escribirlo. */
  .recMot{display:flex;gap:5px;flex-wrap:wrap}
  .recMotB{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 11px;
    font-size:11.5px;color:#3A3D45;cursor:pointer;text-align:left}
  .recMotB:hover{border-color:var(--nar);color:var(--nar)}
  .recPie{font-size:11.5px;color:var(--gris2,#8A9099);margin-top:12px;line-height:1.6}
  .recBancoCab{margin-bottom:11px}

  /* ---- Onboarding: la lista, no un formulario ----
     Seis pasos visibles y se ve exactamente que falta. El boton de dar de alta
     se queda APAGADO hasta que este todo: sin NIB o sin banco, el jueves esa
     persona no cobra. El sistema lo impide, no lo advierte. */
  .onbKpi{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .onbKpi div{flex:1;min-width:112px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:10px 13px}
  .onbKpi b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
    font-variant-numeric:tabular-nums}
  .onbKpi span{font-size:9.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;
    font-weight:700}
  .onbKpi div.al{background:var(--amarbg,#FBF5E5);border-color:#F0E2BC}
  .onbKpi div.al b{color:var(--amar,#B7791F)}
  .onbKpi div.ok{background:var(--okbg,#EAF7F0);border-color:#B6E3C8}
  .onbKpi div.ok b{color:var(--ok)}

  .onbPers{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:15px 17px;margin-bottom:11px}
  .onbCab{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
  .onbIni{width:42px;height:42px;border-radius:12px;flex:0 0 auto;color:#fff;font-weight:700;
    font-size:14px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#8A9099,#6B7280)}
  .onbIni.ok{background:linear-gradient(135deg,#0E9F6E,#3FBF92)}
  .onbIni.al{background:linear-gradient(135deg,#B7791F,#E0A94A)}
  .onbQ{flex:1;min-width:0}
  .onbQ b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
  .onbQ span{display:block;font-size:11.5px;color:var(--gris)}
  .onbDer{margin-left:auto;text-align:right;flex:0 0 auto}
  .onbPct{display:block;font-size:19px;font-weight:800;color:var(--gris2,#8A9099);
    font-variant-numeric:tabular-nums}
  .onbPct.ok{color:var(--ok)} .onbPct.al{color:var(--amar,#B7791F)}
  .onbDer span:last-child{font-size:10px;color:var(--gris2,#8A9099);text-transform:uppercase;
    letter-spacing:.06em}
  .onbBar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:12px}
  .onbBar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#3FBF92);
    transition:width .3s}
  .onbBar i.am{background:linear-gradient(90deg,var(--amar,#B7791F),#E0A94A)}
  .onbPasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:7px}
  .onbPaso{display:flex;gap:8px;align-items:center;font-size:12px;padding:7px 9px;border-radius:9px;
    background:var(--fondo,#F7F7F5);border:1px solid var(--line)}
  .onbPaso i{width:17px;height:17px;border-radius:50%;flex:0 0 auto;display:flex;
    align-items:center;justify-content:center;font-size:10px;font-weight:800;font-style:normal;
    background:var(--line);color:var(--gris2,#8A9099)}
  .onbPaso.ok{background:var(--okbg,#EAF7F0);border-color:#C6E9D8}
  .onbPaso.ok i{background:var(--ok);color:#fff}
  .onbPaso.al{background:var(--amarbg,#FBF5E5);border-color:#F0E2BC}
  .onbPaso.al i{background:var(--amar,#B7791F);color:#fff}
  .onbPaso b{font-weight:600}
  .onbNota{font-size:11px;color:var(--gris2,#8A9099);margin-top:10px;line-height:1.5}
  .onbPie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:11px;margin-top:11px;
    border-top:1px solid var(--line)}
  .onbLiga{font-size:11px;color:var(--gris);font-family:ui-monospace,Consolas,monospace;
    background:var(--fondo,#F7F7F5);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
  .onbCuando{font-size:11px;color:var(--gris)}
  .onbCuando b{color:var(--ok)}
  .onbWa{background:#25D366;color:#0B3D22;border-radius:9px;padding:7px 12px;font-size:11.5px;
    font-weight:700;text-decoration:none}
  .onbRate{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:12px;color:var(--gris)}
  .onbRate input{width:66px;padding:6px 7px}
  .onbAlta{background:var(--ok);color:#fff;border:none;border-radius:10px;padding:9px 15px;
    font-size:12.5px;font-weight:700;cursor:pointer}
  .onbAlta:hover:not(:disabled){background:#0C8B60}
  .onbAlta:disabled{background:var(--line);color:var(--gris2,#8A9099);cursor:not-allowed}
  .onbNo{background:none;border:none;color:var(--gris);font-size:11.5px;font-weight:700;
    cursor:pointer;text-decoration:underline}
  .onbNo:hover{color:var(--rojo)}

  /* RH revisando documentos con la persona enfrente. Subido NO es aceptado:
     entre los dos esta RH mirando la foto. */
  .onbDocs{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
  .onbDocsT{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gris);margin-bottom:7px}
  .onbDocsT b{color:var(--amar,#B7791F)}
  .onbDocsVacio{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
    font-size:11.5px;color:var(--gris2,#8A9099);line-height:1.55}
  .onbDoc{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
    border:1px solid var(--line);background:var(--fondo,#F7F7F5);margin-bottom:6px;flex-wrap:wrap}
  .onbDoc.espera{background:var(--amarbg,#FBF5E5);border-color:#F0E2BC}
  .onbDoc.ok{background:var(--okbg,#EAF7F0);border-color:#C6E9D8}
  .onbDoc.no{background:var(--rojobg,#FDECEC);border-color:#F5C2C2}
  .onbDocN{flex:1;min-width:110px}
  .onbDocN b{display:block;font-size:12px;font-weight:700}
  .onbDocN span{display:block;font-size:10px;color:var(--gris);font-family:ui-monospace,Consolas,monospace;
    word-break:break-all}
  .onbDocV{background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 11px;
    font-size:11px;font-weight:700;cursor:pointer;color:var(--ink)}
  .onbDocV:hover{border-color:var(--ink)}
  .onbDocB{border-radius:7px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;
    border:1px solid var(--line);background:#fff}
  .onbDocB.no{color:var(--rojo)}
  .onbDocB.no:hover{border-color:var(--rojo)}
  .onbDocB.si{background:var(--ok);border-color:var(--ok);color:#fff}
  .onbDocB.si:hover{background:#0C8B60}
  .onbDocE{font-size:11px;font-weight:700}
  .onbDocE.ok{color:var(--ok)} .onbDocE.no{color:var(--rojo)}

  /* ---- La ventana para pedir documentos, lado de RH ----
     No es pantalla nueva: es un interruptor en la liga que el empleado ya
     tiene. Se prende con la persona enfrente y se apaga sola esa noche. */
  .venCerrada{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;
    color:var(--gris);margin-bottom:12px}
  .venCerrada b{color:var(--ink)}
  .venCerrada .btn{margin-left:auto;flex:0 0 auto}
  .venSel{border-color:var(--nar);margin-bottom:12px}
  .venT{font-size:14px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
  .venTipos{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  @media(max-width:560px){ .venTipos{grid-template-columns:1fr} }
  .venTipo{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);
    border-radius:9px;padding:8px 10px;cursor:pointer;font-size:12.5px}
  .venTipo:hover{border-color:var(--ink)}
  .venTipo.on{border-color:var(--nar);background:var(--narbg,#FFF3EB)}
  .venTipo input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--nar);cursor:pointer}
  .venNota{font-size:11px;color:var(--gris);margin-top:10px;line-height:1.55}
  .venNota b{color:var(--ink)}
  .venErr{font-size:12px;color:var(--rojo);font-weight:700;margin-top:9px}
  .venBtns{display:flex;gap:8px;margin-top:12px}
  .venAbierta{border-color:#F5CDAF;background:var(--narbg,#FFF3EB);margin-bottom:12px}
  .venCab{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .venCab b{flex:1;font-size:13px}
  .venPunto{width:8px;height:8px;border-radius:50%;background:var(--nar);flex:0 0 auto;
    box-shadow:0 0 0 3px rgba(255,106,43,.2)}
  .venFila{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #F5CDAF;
    flex-wrap:wrap}
  .venNm{flex:1;min-width:120px;font-size:12.5px}
  .venNm b{display:block;font-weight:700}
  .venNm small{display:block;color:var(--gris);font-size:11px}
  .venB{border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 11px;
    font-size:11px;font-weight:700;cursor:pointer;color:var(--ink)}
  .venB:hover{border-color:var(--ink)}
  .venB.no{color:var(--rojo)}
  .venB.si{background:var(--ok);border-color:var(--ok);color:#fff}
  .venB.si:hover{background:#0C8B60}
  .venEst{font-size:11px;font-weight:700}
  .venEst.ok{color:var(--ok)} .venEst.no{color:var(--rojo)} .venEst.espera{color:var(--amar,#B7791F)}
  .venPie{font-size:11px;color:var(--gris);margin-top:10px;padding-top:9px;
    border-top:1px solid #F5CDAF;line-height:1.6}
  .venPie b{color:var(--ink)}

  /* ---- Abrir una vacante: los cuatro bloques del mockup ----
     El texto de una vacante sale de TRES sitios, y por eso casi nunca se
     escribe. Cada bloque dice de quien es y a que mas afecta -- sin eso,
     alguien edita las condiciones creyendo que toca solo esta vacante y se las
     cambia a todas. */
  .recH1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
  .recLede{font-size:14px;color:var(--gris);margin-bottom:16px;max-width:70ch;line-height:1.55}
  .recLeyenda{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;
    background:var(--fondo,#F7F7F5);border:1px solid var(--line);border-radius:10px;margin-bottom:18px}
  .recLeyenda .t{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--gris);margin-right:2px}
  .recF{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    padding:3px 9px;border-radius:20px;white-space:nowrap}
  .recF i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .recF.f-vac{background:#FFF3EB;color:#B4530A}       .recF.f-vac i{background:var(--nar)}
  .recF.f-puesto{background:#EEF2FB;color:#3A5BA0}    .recF.f-puesto i{background:#5B7FCF}
  .recF.f-casa{background:#EFF6F1;color:#2C6B4F}      .recF.f-casa i{background:#3E9E73}

  .recBloque{border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px;margin-bottom:14px}
  .recCab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  .recCab h2{font-size:16px;font-weight:800;letter-spacing:-.02em;flex:1;min-width:150px}
  /* El porque: lo que se pierde si esto se edita sin pensar. No es relleno --
     es la unica advertencia antes de cambiarle las condiciones a todo el
     restaurante. */
  .recPorque{font-size:12.5px;color:var(--gris);line-height:1.6;margin-bottom:14px;max-width:78ch}
  .recPorque b{color:var(--ink)}
  .recEco{font-size:11.5px;color:var(--gris);margin-top:7px;line-height:1.55}
  .recEco b{color:var(--ink)}
  .recAviso{background:var(--amarbg,#FBF5E5);border:1px solid #F0E2BC;border-radius:9px;
    padding:10px 12px;font-size:12px;color:#6B4A08;margin-bottom:12px;line-height:1.55}
  .recAviso b{color:var(--ink)}
  .recTres{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px}
  @media(max-width:640px){ .recTres{grid-template-columns:1fr} }
  /* El $ pegado al campo: se ve que es dinero sin tener que leer la etiqueta. */
  .recConPre{display:flex;align-items:center;background:#fff;border:1px solid var(--line);
    border-radius:9px;padding-left:10px;transition:border-color .15s,box-shadow .15s}
  .recConPre:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(22,24,29,.07)}
  .recConPre span{font-size:14px;color:var(--gris);font-weight:600}
  .recConPre input.txt{border:none!important;box-shadow:none!important;background:transparent!important}
  .recForm .et span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--gris2,#8A9099)}
  .recAcc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
  .recResumen{font-size:12px;color:var(--gris)}

  /* El preview va AL LADO, no debajo: debajo queda a una pantalla del campo
     que estas escribiendo, y entonces no sirve para comparar -- que es lo
     unico para lo que se abre. Y se queda pegado al hacer scroll, porque el
     formulario es largo y el preview tiene que seguir ahi. */
  .recPrevW2{position:sticky;top:16px;margin:0}
  .recPrevW2 .recPrev{max-width:none;margin:0}
  .recPrevW2 .btn{margin-top:12px;width:100%}
  @media(max-width:1080px){ .recPrevW2{position:static} }

  /* ---- Compartirla ----
     Publicar no es el final: lo que sigue es repartirla, y ahi se decide de
     donde va a llegar la gente. Cada boton arma SU PROPIO enlace, asi que la
     fuente no depende de que el candidato la recuerde. */
  .recComp{border-color:var(--ok);margin-bottom:12px}
  .recPub{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    background:var(--okbg,#EAF7F0);color:var(--ok);padding:3px 10px;border-radius:20px}
  .recCanales{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
  .recCnl{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 15px;
    font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink)}
  .recCnl:hover{border-color:var(--ink)}
  .recCnl.wa{background:#25D366;border-color:#25D366;color:#06301B}
  .recCnl.wa:hover{background:#3FE07C}
  .recCnl.fb{background:#1877F2;border-color:#1465CE;color:#fff}
  .recCnl.fb:hover{background:#3387F5}
  .recUrl{font-family:ui-monospace,Consolas,monospace;font-size:11px;background:var(--fondo,#F7F7F5);
    border:1px solid var(--line);border-radius:7px;padding:7px 9px;margin-top:7px;word-break:break-all}
  .recQR{display:flex;gap:15px;align-items:flex-start;margin-top:14px;padding-top:14px;
    border-top:1px solid var(--line);font-size:12.5px;color:var(--gris);line-height:1.6}
  .recQR b{color:var(--ink)}
  .recQRc{width:64px;height:64px;flex:0 0 auto;border-radius:7px;background:var(--ink);
    background-image:
      linear-gradient(90deg,#fff 25%,transparent 25% 50%,#fff 50% 62%,transparent 62%),
      linear-gradient(#fff 25%,transparent 25% 50%,#fff 50% 62%,transparent 62%);
    background-size:16px 16px}
  .recLugares{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .recLugar{border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 11px;
    font-size:11px;font-weight:700;color:var(--ink);cursor:pointer}
  .recLugar:hover{border-color:var(--nar);color:var(--nar)}