/* =====================================================================
   PLANILLA — hoja de estilos
   ===================================================================== */
/* X365 · paleta de la propuesta de marca (oct 2026): azul institucional
   + blanco + gris claro; el celeste guía las acciones. Siempre clara: la
   identidad es esa, no sigue el modo oscuro del sistema. */
:root{
  /* Lote 163 (José, 21/10): una sola letra en todo el sistema, moderna, con números de ancho fijo */
  --fuente:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f0f2f6; --surface-3:#e3e7ed;
  --ink:#253554; --ink-2:#5b6a85; --ink-3:#8a96ab;
  --rule:#e3e7ed; --rule-2:#cdd4df;

  --azul:#2f8cff; --azul-2:#1a73e0; --azul-soft:#eaf4ff;
  --verde:#22a06b; --verde-soft:#e3f4ec;
  --naranja:#e3961a; --naranja-soft:#fdf2dc;
  --rojo:#e35d6a; --rojo-soft:#fcebed;
  --morado:#8b5cd6; --morado-soft:#f1eafc;
  --amarillo:#a97400; --amarillo-soft:#fdf3d7;
  --gris-estado:#a3adbc;

  --accent:var(--azul); --accent-soft:var(--azul-soft);
  --ok:var(--verde); --ok-soft:var(--verde-soft);
  --clay:var(--naranja); --clay-soft:var(--naranja-soft);
  --alert:var(--rojo); --alert-soft:var(--rojo-soft);

  --nav-bg:#253554; --nav-ink:#c9d2e3; --nav-ink-2:#8d9ab5; --nav-on:#ffffff; --nav-on-bg:#36497a; --nav-pop:#2c3e63;

  --sh-1:0 1px 2px rgba(37,53,84,.06);
  --sh-2:0 2px 4px rgba(37,53,84,.05), 0 6px 16px -8px rgba(37,53,84,.18);
  --sh-3:0 12px 40px -12px rgba(37,53,84,.32);
  --r:10px; --r-sm:7px;
}
/* el logo (blanco y celeste: va sobre el azul institucional) */
.logo-x365{background:url(data:image/png;base64,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) left center/contain no-repeat;
  width:150px; aspect-ratio:360/179}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
  font-family:var(--fuente);
  -webkit-font-smoothing:antialiased;
}
/* Los números: la misma letra, con cifras de ancho fijo para que las columnas se alineen.
   Los negativos van con «−» y en rojo (marcarNegativos, a_core.js). */
.mono,code,.num,table,.kpi dd,input[type=number],tfoot{font-family:var(--fuente); font-variant-numeric:tabular-nums lining-nums}
.mono{letter-spacing:.01em}
.neg{color:var(--rojo) !important}
h1,h2,h3{margin:0; letter-spacing:-.015em}
button{font:inherit;color:inherit}
a{color:var(--azul)}

/* ============ ESTRUCTURA ============ */
#shell{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh}
@media (max-width:900px){ #shell{grid-template-columns:1fr} }

aside{
  background:var(--nav-bg); color:var(--nav-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media (max-width:900px){ aside{position:static; height:auto} }
.brand{padding:20px 20px 14px}
.brand .logo-x365{width:92px}
/* Es el logo de la plataforma: que pese. */
.brand .n{font-size:27px; font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1.05}
/* La marca: Raleway, que es la tipografía de la casa. Solo aquí — el resto
   de la aplicación va en Inter (Lote 163), con números de ancho fijo. */
.marca{font-family:"Raleway",var(--fuente); font-weight:700; letter-spacing:-.01em}
.brand .s{font-family:var(--fuente); font-variant-numeric:tabular-nums; font-size:9px; letter-spacing:.1em; white-space:nowrap; text-transform:uppercase; color:var(--nav-ink-2); margin-top:7px}
/* align-content:start — si no, con pocas entradas la rejilla las reparte por
   todo el alto y el menú queda con agujeros entre renglones. */
nav{padding:4px 12px; display:grid; gap:2px; flex:1; align-content:start}
nav button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0;
  padding:9px 12px; border-radius:var(--r-sm); cursor:pointer; color:var(--nav-ink); font-size:14px;
  transition:background .12s, color .12s; position:relative;
}
nav button:hover{background:rgba(255,255,255,.06); color:#fff}
nav button.on{background:var(--nav-on-bg); color:var(--nav-on); font-weight:600}
nav button.on::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; background:var(--azul); border-radius:0 3px 3px 0}
nav button svg{width:17px;height:17px;flex:none;opacity:.9}
nav .grp{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--nav-ink-2); padding:16px 12px 6px; font-weight:600}
/* El selector de país vive abajo, junto al usuario: el país es el contexto
   de todo el menú, no una sección más de él. */
#ambitoSel{padding:0 12px 4px}
.ambito{position:relative; display:flex; flex-direction:column}
.ambito .actual{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:rgba(255,255,255,.06); border:0; color:var(--nav-ink); cursor:pointer;
  padding:9px 12px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600;
  transition:background .12s, color .12s}
.ambito .actual:hover{background:rgba(255,255,255,.12); color:#fff}
.ambito .actual svg{width:16px; height:16px; flex:none; opacity:.8}
.ambito .actual > span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ambito .actual .chev{width:13px; height:13px; opacity:.6; transition:transform .15s}
.ambito.abierto .actual .chev{transform:rotate(180deg)}
/* La lista se abre encima del botón, flotando: si empujara el menú, el
   propio selector se saldría de la pantalla en un monitor bajo. */
.ambito .opciones{display:grid; gap:2px; position:absolute; bottom:100%; left:0; right:0;
  margin-bottom:6px; padding:6px; z-index:6; background:var(--nav-pop, #1b2437);
  border:1px solid rgba(255,255,255,.10); border-radius:var(--r-sm);
  box-shadow:0 12px 34px rgba(0,0,0,.45)}
.ambito .opciones button{display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--nav-ink);
  padding:8px 12px; border-radius:var(--r-sm); font-size:13.5px}
.ambito .opciones button:hover{background:rgba(255,255,255,.08); color:#fff}
.ambito .opciones button.on{background:var(--nav-on-bg); color:var(--nav-on); font-weight:600}
.ambito .opciones .porque{font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--nav-ink-2); font-weight:500}
/* Un módulo que no existe todavía, o al que esta persona no llega: se ve en
   gris, sin explicación escrita al lado. La explicación sale al tocarlo. */
nav button.apagado{opacity:.42}
nav button.apagado:hover{background:rgba(255,255,255,.04); color:var(--nav-ink)}
/* Una raya en vez de un título para lo de abajo: dice lo mismo sin texto. */
nav .raya{height:1px; background:rgba(255,255,255,.09); margin:14px 12px 8px}
/* Las pantallas del módulo donde estás parado, colgando de él */
nav .sub{display:grid; gap:2px; margin:2px 0 6px 13px; padding-left:11px;
  border-left:1px solid rgba(255,255,255,.10)}
nav .sub button{font-size:13.5px; padding:7px 10px}
nav .sub button svg{width:15px;height:15px}
nav .sub button.on::before{left:-12px}
nav .grp.chico{padding:9px 10px 3px; font-size:9px; opacity:.75}
.who{padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:var(--nav-ink-2);
  display:flex; flex-direction:column; align-items:stretch; gap:10px}
.who .acc{display:flex; gap:8px}
.who > span{min-width:0}
.who b{color:#fff; font-weight:600; display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who button{background:rgba(255,255,255,.08);border:0;color:var(--nav-ink);cursor:pointer;font-size:11.5px;
  padding:5px 11px;font-weight:600;border-radius:99px;flex:none}
.who button:hover{background:rgba(255,255,255,.16);color:#fff}

main{min-width:0; padding:28px 32px 80px; max-width:1560px}
@media (max-width:600px){ main{padding:20px 16px 60px} }
.page-h{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.page-h h1{font-size:27px; font-weight:700; line-height:1.15}
.page-h p{margin:6px 0 0; color:var(--ink-2); font-size:14px; max-width:78ch}
.actions{display:flex; gap:9px; flex-wrap:wrap}

/* ============ CONTROLES ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--rule-2); background:var(--surface); font-size:14px; font-weight:600; white-space:nowrap;
  box-shadow:var(--sh-1); transition:transform .08s, box-shadow .12s, background .12s;
}
.btn:hover{background:var(--surface-2); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--azul); border-color:var(--azul); color:#fff}
.btn.pri:hover{background:var(--azul-2); border-color:var(--azul-2)}
.btn.dgr{color:var(--rojo); border-color:var(--rojo)}
.btn.dgr:hover{background:var(--rojo-soft)}
.btn:disabled{opacity:.42; cursor:not-allowed; box-shadow:none; transform:none}
.btn.sm{padding:5px 11px; font-size:12.5px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

input,select,textarea{
  font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--rule-2); border-radius:var(--r-sm); padding:8px 11px; width:100%;
  transition:border-color .12s, box-shadow .12s;
}
/* Una casilla no es un campo de texto: el width:100% de arriba la estiraba
   por toda la fila y dejaba la etiqueta a un metro de distancia. */
input[type=checkbox],input[type=radio]{
  width:auto; min-width:0; flex:none; padding:0; margin:0;
  accent-color:var(--azul); cursor:pointer;
}
input[type=checkbox]:disabled{cursor:not-allowed; opacity:.45}

/* =====================================================================
   LO QUE NO SE PUEDE TOCAR, SE VE QUE NO SE PUEDE TOCAR

   Los campos del maestro salían apagados de verdad —con disabled— pero
   solo los desplegables SE VEÍAN apagados, porque el navegador los pinta
   grises por su cuenta y a los campos de texto no. El resultado era peor
   que no apagarlos: la planillera veía «Nombre completo» en blanco, con su
   borde de siempre, escribía encima y no pasaba nada.

   Un campo que no acepta lo que le escribes tiene que decirlo ANTES, no
   después. Y el cursor de «prohibido» al pasar por encima lo confirma sin
   que haya que intentarlo.
   ===================================================================== */
input:disabled,select:disabled,textarea:disabled{
  background:var(--surface-2); color:var(--ink-3);
  border-color:var(--rule); cursor:not-allowed; opacity:1;
}
input:disabled:hover,select:disabled:hover,textarea:disabled:hover{border-color:var(--rule)}

input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-soft)}
button:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
select{cursor:pointer}
textarea{font-family:var(--fuente); font-variant-numeric:tabular-nums; font-size:12.5px; line-height:1.6; resize:vertical}
label.f{display:grid; gap:5px}
label.f > span{font-size:12px; font-weight:600; color:var(--ink-2)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.searchbar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
.searchbar input,.searchbar select{width:auto; min-width:160px; flex:0 1 auto}
.searchbar .grow{flex:1 1 240px; min-width:180px}


/* ============ TARJETAS ============ */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--sh-2); overflow:hidden}
.card > .hd{padding:15px 18px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.card > .hd h2{font-size:15.5px; font-weight:700}
.card > .hd .sub{font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:2px}
.card > .bd{padding:18px}
.stack{display:grid; gap:16px}

/* ============ INDICADORES ============ */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:15px 17px; box-shadow:var(--sh-1)}
/* José, 24/10: títulos arriba y números abajo, alineados aunque un título ocupe dos líneas */
.kpi{display:flex; flex-direction:column; justify-content:space-between}
.kpi dt{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; font-weight:600}
.kpi dd{margin:0; font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.1}
.kpi dd small{font-size:14px; color:var(--ink-3); font-weight:600; letter-spacing:0; margin-right:1px}

/* ============ TABLAS ============ */
.tw{overflow:auto; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); max-height:70vh; box-shadow:var(--sh-1)}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:13.5px}
thead th{
  position:sticky; top:0; z-index:2; text-align:left; background:var(--surface-2);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--rule-2); white-space:nowrap;
}
tbody td{
  padding:8px 12px; border-bottom:1px solid var(--rule); vertical-align:middle;
  white-space:nowrap;              /* un renglón = una línea: se leen más filas de un vistazo */
}
/* Para la columna que sí puede traer texto largo: se recorta con puntos
   suspensivos y el texto completo queda en el tooltip. */
.tw td.corta{max-width:0; overflow:hidden; text-overflow:ellipsis}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--surface-2)}
td.r,th.r{text-align:right}
td.num,th.num{font-variant-numeric:tabular-nums; font-family:var(--fuente); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
tfoot td{padding:12px 14px; border-top:2px solid var(--rule-2); font-weight:700; background:var(--surface-2); font-variant-numeric:tabular-nums}
tr.bad > td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
tr.bad{background:var(--rojo-soft)}
tr.muted td{color:var(--ink-3)}
tr.bad:hover{background:var(--rojo-soft); filter:brightness(.98)}
tr.warn > td:first-child{box-shadow:inset 3px 0 0 var(--naranja)}
tr.warn{background:var(--naranja-soft)}
tr.warn:hover{background:var(--naranja-soft); filter:brightness(.98)}
.rowbtn{background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2);cursor:pointer;font-size:12.5px;padding:4px 9px;border-radius:99px;font-weight:600;transition:all .12s}
.rowbtn:hover{background:var(--azul); border-color:var(--azul); color:#fff}
/* El ojito y el lápiz. Redondos, del mismo tamaño y con el dibujo
   centrado: dos palabras en cada una de trescientas filas eran ruido, y el
   par ver/editar se reconoce por la forma antes que por la letra. */
.iconbtn{width:30px; height:30px; padding:0; display:inline-flex; align-items:center;
         justify-content:center; line-height:0}
.iconbtn svg{width:15px; height:15px; display:block; fill:none; stroke:currentColor;
             stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ============ ETIQUETAS ============ */
/* Sin color propio, la pastilla sale gris con letra oscura. Antes salía con
   letra blanca sobre nada: invisible (José, 16/10: «las pastillas que no se ven»). */
.tag{display:inline-block; font-size:11px; letter-spacing:.01em; padding:3px 10px; border-radius:99px; font-weight:700; white-space:nowrap;
     background:var(--surface-3); color:var(--ink-2)}
.tag.si{background:var(--azul); color:#fff}
.tag.no{background:var(--surface-3); color:var(--ink-2)}
.tag.ok{background:var(--verde); color:#fff}
.tag.wa{background:var(--naranja); color:#fff}
.tag.er{background:var(--rojo); color:#fff}
/* El origen de un pago: corriente (verde azulado), manual (naranja),
   liquidación (morado). */
.tag.co{background:#0f8b8d; color:#fff}
.tag.am{background:#facc15; color:#3f3200}
.tag.li{background:#7c5cbf; color:#fff}
/* Gris claro con letras blancas. Es para «eventual»: ni verde de al día ni
   ámbar de pendiente — un estado que existe y no pide nada. */
.tag.gr{background:var(--ink-3); color:#fff}

/* ============ AVISOS ============ */
.note{font-size:13px; color:var(--ink-3); max-width:82ch}
.callout{border-left:4px solid var(--azul); background:var(--azul-soft); padding:13px 16px; border-radius:var(--r-sm); font-size:13.5px}
.callout.wa{border-left-color:var(--naranja); background:var(--naranja-soft)}
.callout.er{border-left-color:var(--rojo); background:var(--rojo-soft)}
.callout > b:first-child{display:block; margin-bottom:4px; font-weight:700}
.callout b{font-weight:700}
.empty{padding:56px 24px; text-align:center; color:var(--ink-3)}
.empty h3{font-size:19px; font-weight:700; color:var(--ink); margin-bottom:8px}
.empty p{margin:0 auto 18px; max-width:48ch; font-size:14px}

/* ============ VENTANAS ============ */
.veil{position:fixed; inset:0; background:rgba(18,24,38,.5); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:36px 16px; z-index:50; overflow-y:auto}
.modal{background:var(--surface); border-radius:14px; width:100%; max-width:640px; box-shadow:var(--sh-3); overflow:hidden}
.modal.wide{max-width:min(1400px, 94vw)}
/* Un formulario no es una tabla: 1400px le sobran y los campos se estiran
   hasta quedar ridículos. Pero 640 tampoco alcanzan cuando adentro va una
   tabla. Este es el punto medio. */
.modal.medio{max-width:min(900px, 94vw)}
/* Nada de lo que va adentro puede estirar la ventana: si una tabla o una tira
   de indicadores no cabe, se desplaza dentro de su propia caja. */
.modal .mb{min-width:0}
.modal .mb > *{min-width:0; max-width:100%}
.modal .kpis{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.modal .mh{padding:17px 22px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:14px}
.modal .mh h2{font-size:17px; font-weight:700}
.modal .mb{padding:22px; display:grid; gap:16px; max-height:74vh; overflow-y:auto}
.modal .mf{padding:15px 22px; border-top:1px solid var(--rule); display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; background:var(--surface-2)}
/* una acción destructiva se va al extremo contrario, lejos del botón que se
   presiona sin mirar */
.modal .mf .lejos{margin-right:auto}
.x{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:22px;line-height:1;padding:3px 8px;border-radius:var(--r-sm)}
.x:hover{background:var(--surface-2);color:var(--ink)}

/* ============ NOTIFICACIONES ============ */
#toasts{position:fixed; bottom:20px; right:20px; display:grid; gap:10px; z-index:90; max-width:360px}
.toast{background:var(--surface); border-radius:var(--r-sm); border-left:4px solid var(--azul); padding:12px 16px; font-size:13.5px; box-shadow:var(--sh-3); font-weight:500}
.toast.er{border-left-color:var(--rojo)}
.toast.wa{border-left-color:var(--naranja)}

/* ============ VARIOS ============ */
.split{display:grid; gap:18px; grid-template-columns:minmax(0,1fr) 320px; align-items:start}
@media (max-width:1040px){ .split{grid-template-columns:1fr} }
.bar{height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--azul)}
.steps{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap}
.step{flex:1; min-width:150px; padding:11px 15px; font-size:13px; color:var(--ink-3); display:flex; gap:9px; align-items:center;
  background:var(--surface-2); border-radius:99px; font-weight:600}
.step.on{background:var(--azul); color:#fff}
.step.done{background:var(--verde-soft); color:var(--verde)}
.step i{font-size:11px; font-style:normal; opacity:.75; font-family:var(--fuente); font-variant-numeric:tabular-nums}
.chk{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--rule)}
.chk:last-child{border-bottom:0}
.chk .ic{width:19px;height:19px;flex:none;border-radius:99px;display:grid;place-items:center;font-size:11px;margin-top:1px;font-weight:800;color:#fff}
.chk .ic.ok{background:var(--verde)}
.chk .ic.er{background:var(--rojo)}
.chk .ic.wa{background:var(--naranja)}
.chk .tx b{font-weight:700}
.chk .tx span{display:block;color:var(--ink-3);font-size:12.5px}
.pill-row{display:flex;gap:6px;flex-wrap:nowrap}
.saving{position:fixed;bottom:20px;left:20px;background:var(--surface);border-radius:99px;padding:9px 18px;font-size:13px;color:var(--ink-2);box-shadow:var(--sh-3);z-index:90;display:none;align-items:center;gap:9px;font-weight:600}
.saving.on{display:flex}
.spin{width:13px;height:13px;border:2.5px solid var(--rule-2);border-top-color:var(--azul);border-radius:99px;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation:none} .btn,.rowbtn,tbody tr{transition:none} }
.hide{display:none !important}

/* ============ ENTRADA ============ */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--bg)}
.login-card{width:100%; max-width:404px; background:var(--surface); border-radius:16px; border:1px solid var(--rule); box-shadow:var(--sh-3); overflow:hidden}
.login-brand{padding:30px 30px 26px; background:var(--nav-bg); display:flex; justify-content:center}
.login-brand .logo-x365{width:180px; background-position:center}
.login-brand .n{font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1.05}
.login-brand .s{font-family:var(--fuente); font-variant-numeric:tabular-nums; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--nav-ink); margin-top:12px; font-weight:600}
.login-body{padding:24px 30px 30px; display:grid; gap:16px}
.login-body .btn{width:100%; padding:11px}

/* ============ AUXILIARES ============ */
.mini{font-size:12px; color:var(--ink-3)}
.rowsub{font-size:12px; color:var(--ink-3); display:block}
.linkish{background:none;border:0;padding:0;color:var(--azul);cursor:pointer;font:inherit;font-size:inherit;text-align:left;font-weight:600}
.linkish:hover{text-decoration:underline}
.tabs{display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap}
.tabs button{background:var(--surface-2);border:1px solid var(--rule);padding:8px 16px;cursor:pointer;font-size:13.5px;color:var(--ink-2);border-radius:99px;font-weight:600;transition:all .12s}
.tabs button.on{color:#fff; background:var(--azul); border-color:var(--azul)}
.tabs button:hover:not(.on){background:var(--surface-3); color:var(--ink)}
.rec{background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--naranja); border-radius:var(--r-sm); padding:14px 17px; display:grid; gap:6px}
.rec .t{font-weight:700; font-size:14.5px}
.dl{display:grid; grid-template-columns:auto 1fr; gap:7px 20px; font-size:13.5px}
.dl dt{color:var(--ink-3); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; padding-top:2px; font-weight:600}
.dl dd{margin:0}
.comprobante{max-width:740px; margin:0 auto; background:var(--surface); border:1px solid var(--rule); padding:32px 36px; border-radius:var(--r); box-shadow:var(--sh-2)}
.comprobante h2{font-size:23px; font-weight:700}
.cmp-head{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:2px solid var(--rule-2); padding-bottom:16px; margin-bottom:18px}

/* cada renglón de la liquidación se imprime en su propia hoja: el de planilla
   lo firma el trabajador, el de servicios es informativo */
.salto-pagina{height:26px}
#papel{display:none}
@media print{
  /* Sin margen de página el navegador no tiene dónde imprimir su encabezado
     (fecha, título) ni su pie (la URL y el número de página). El margen de
     verdad lo pone el papel. */
  @page{margin:0}
  .salto-pagina{break-before:page; page-break-before:always; height:0}
  aside,#toasts,.saving,.no-print{display:none !important}
  #shell{grid-template-columns:1fr}
  main{padding:14mm}
  body{background:#fff}
  .card,.comprobante,.tw{box-shadow:none}
  /* Cuando se manda a imprimir un documento, es lo único que sale. */
  body.imprimiendo > *{display:none !important}
  body.imprimiendo > #papel{display:block !important; padding:14mm}
  #papel .comprobante{margin:0}
  /* El salto de página también deja el margen de arriba de la hoja nueva:
     si no, el segundo documento empieza pegado al borde del papel. */
  #papel .salto-pagina{height:14mm}
}

/* ---- tabla de captura: pagos sueltos ---- */
.tw.pagos{max-height:52vh}
.tw.pagos tbody td{padding:6px 8px}
.tw.pagos tbody td input,
.tw.pagos tbody td select{font-size:13px; padding:6px 8px; border-radius:6px}
.tw.pagos tbody td input[type=number]{text-align:right; font-family:var(--fuente); font-variant-numeric:tabular-nums}
.tw.pagos tbody tr.bad td{background:var(--rojo-soft)}
.tw.pagos .rowbtn{width:28px; height:28px; padding:0}

/* Una tabla dentro de una ventana que scrollea no puede llevar la cabecera
   pegada: se pega al marco de la ventana, no al suyo, y sale flotando encima
   del título y de la tira de totales. */
.tw.suelta thead th{position:static}

/* ---- liquidaciones: quincenas fuera de la base ---- */
.tw tbody tr.apagada td{opacity:.45}
.tw tbody tr.grupo td{background:var(--surface-2); font-weight:600; border-top:1px solid var(--rule-2)}

/* ---- tira de resultado siempre visible en una ventana larga ---- */
.tira{position:sticky; top:-14px; z-index:3; background:var(--surface); padding:8px 0 10px;
      margin:-4px 0 4px; border-bottom:1px solid var(--rule)}
.tira .kpis{margin:0}
.tira .kpi{padding:8px 12px}
.tira .kpi dd{font-size:19px}

/* ---- las flechitas de los campos numéricos estorban más de lo que ayudan ---- */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* =====================================================================
   ASISTENCIA · la grilla de la quincena

   Doce columnas fijas más el cronograma. Los clientes no llevan subtotal:
   se separan con una banda blanca y una gris, que es lo único que
   significan. El domingo va en color normal — se trabaja domingo.
   ===================================================================== */
.tw table.grilla{font-size:12.5px; table-layout:fixed}
.tw table.grilla thead th{padding:7px 8px; white-space:normal; line-height:1.25}
.tw table.grilla tbody td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tw table.grilla thead th{position:sticky; top:0; z-index:2}
.tw table.grilla thead th.dia{width:27px; min-width:27px; padding:4px 2px;
      text-align:center; font-size:11px}
.tw table.grilla td.dia{width:27px; min-width:27px; padding:4px 2px;
      text-align:center; font-family:var(--fuente); font-variant-numeric:tabular-nums;
      color:var(--ink-2); border-left:1px solid var(--rule)}
.tw table.grilla tbody td{padding:6px 8px; vertical-align:middle}
.tw table.grilla tbody tr.banda td{background:var(--surface-2)}
/* José, 17/10: el cliente cuyos puestos la gerencia todavía no revisó contra el
   contrato sale en amarillo claro; al marcarlo «revisado» se pone blanco. */
.tw table.grilla tbody tr.porrevisar td{background:#fff8d6}
.note .claves .mu.porrevisar{background:#fff8d6; border:1px solid var(--rule)}
@supports (background: color-mix(in srgb, red 10%, white)){
  .tw table.grilla tbody tr.porrevisar td{background:color-mix(in srgb, var(--amarillo) 9%, var(--surface))}
  .note .claves .mu.porrevisar{background:color-mix(in srgb, var(--amarillo) 9%, var(--surface))}
}

/* La barra del centro de costo. Tres en toda la pantalla, no ciento treinta. */
.tw table.grilla tbody tr.bloque td{background:var(--azul-soft,#dce6f1);
      font-weight:700; letter-spacing:.02em; padding:7px 10px;
      border-top:1px solid var(--rule-2)}

/* Un puesto sin persona: existe, se ve, y suma cero. */
.tw table.grilla tbody tr.vacante td{background:var(--naranja-soft,#fbe5d6)}
.tw table.grilla tbody tr.vacante td.dia{background:var(--naranja-soft,#fbe5d6)}

/* =====================================================================
   UN BRUTO ESCRITO A MANO NO PIDE EXPLICACIÓN: SE VE

   Iba con un amarillo de relleno fijo y el texto heredado, así que en
   tema oscuro quedaba texto claro sobre amarillo claro —ilegible— y
   encima la banda gris que separa clientes le ganaba por especificidad:
   el 100 de ALEXIS GARCÍA estaba guardado y se veía como si no.

   Va con la misma receta que los días del cronograma: la ruta larga de
   selector para ganarle a la banda, el color mezclado al 18% y el texto
   del mismo color. Un color, dos usos, la misma gramática.
   ===================================================================== */
.tw table.grilla tbody td.num.amano{background:var(--amarillo-soft,#fdf3d7);
      color:var(--amarillo); font-weight:700}
@supports (background: color-mix(in srgb, red 10%, white)){
  .tw table.grilla tbody td.num.amano{background:color-mix(in srgb, var(--amarillo) 18%, var(--surface))}
  .note .claves .mu.amano{background:color-mix(in srgb, var(--amarillo) 18%, var(--surface))}
}
.note .claves .mu.amano{background:var(--amarillo-soft); color:var(--amarillo)}

.tw table.grilla tbody tr.total td{background:var(--surface-3,#edf2f9); font-weight:600;
      border-top:1px solid var(--rule-2)}
/* José, 22/10: «achicar tamaño de letra para que se vea el total»: los totales en letra más chica y sin «…» */
.tw table.grilla tbody tr.total.gran td{background:var(--azul-soft,#dce6f1); font-weight:700;
      font-size:12px; border-top:2px solid var(--rule-2)}
.tw table.grilla tbody tr.total td.num{font-size:12px; overflow:visible; text-overflow:clip; white-space:nowrap}

/* El cronograma se escribe una semana y el sistema la reparte. */
.patron{display:flex; gap:6px; flex-wrap:wrap}
.patron label{display:flex; flex-direction:column; gap:4px; align-items:center; min-width:56px}
.patron label span{font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase}
.patron input{width:56px; text-align:center; font-family:var(--fuente); font-variant-numeric:tabular-nums}

/* Un texto que además se toca. Se usa donde poner un botón de verdad sería
   ruido: la marca del pago de más vive debajo del nombre en la tabla de
   detalle, y ES el camino para abrirlo. */
button.enlace{background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
      text-align:left; cursor:pointer; display:block; width:100%}
button.enlace:hover{text-decoration:underline}
button.enlace:focus-visible{outline:2px solid var(--focus,#2563eb); outline-offset:2px; border-radius:3px}

/* Lo de adentro de una ventana no la estira nunca. La regla de `.mb > *` solo
   alcanza a los hijos directos, y una tabla metida dentro de una tarjeta que a
   su vez está dentro de un div quedaba fuera: la ventana salía con barra de
   desplazamiento horizontal y los campos cortados. */
.modal .mb .card,
.modal .mb .tw,
.modal .mb .stack,
.modal .mb .grid2,
.modal .mb .bd{min-width:0; max-width:100%}

/* Un texto que se toca tiene que parecerlo. Dentro de una nota gris, el
   enlace se confundía con el resto del párrafo y nadie lo apretaba. */
.note button.enlace,
p.note button.enlace{color:var(--azul,#2563eb); font-weight:600; text-decoration:underline;
      text-underline-offset:2px}

/* =====================================================================
   UN DATO QUE NO SE ESCOGE

   La razón social ya no es un desplegable en ninguna pantalla de pago: la
   manda el maestro. Pero un texto suelto donde antes había un control se
   lee como si faltara algo, así que se le da forma de campo apagado —
   se ve que está ahí, se ve que no se toca.
   ===================================================================== */
.fijo{display:flex; align-items:center; min-height:34px; padding:6px 9px;
      border:1px solid var(--rule); border-radius:var(--r-sm);
      background:var(--surface-2); color:var(--ink-2);
      font-size:13px; line-height:1.25}
td.fijo{display:table-cell; border:0; background:none; padding:5px 6px;
        min-height:0; font-size:12.5px}

/* =====================================================================
   UN CAMPO QUE NO CUADRA

   El cuadre de horas se explica con palabras debajo, pero el ojo tiene que
   saber ANTES de leer cuáles son los dos campos en discusión. El borde rojo
   marca los dos lados de la comparación, no uno solo: cualquiera de los dos
   puede ser el equivocado y el sistema no sabe cuál.
   ===================================================================== */
input.malo, .patron input.malo{
  border-color:var(--alert); background:var(--alert-soft)}
input.malo:focus{outline:2px solid var(--alert); outline-offset:1px}

/* =====================================================================
   A DÓNDE SE LLEGA

   Toda la ventana del renglón es cómo se calcula; esto es el resultado.
   Bruto, retención y neto con el peso que tienen: son los tres números
   que alguien va a comparar contra el banco.
   ===================================================================== */
.cuenta{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface-2);
        padding:12px 14px; margin:2px 0 4px}
.cuenta .tres{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end}
.cuenta .tres > div{display:flex; flex-direction:column; gap:1px}
.cuenta .tres span{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                   color:var(--ink-3); font-weight:600}
.cuenta .tres b{font-family:var(--fuente); font-variant-numeric:tabular-nums; font-variant-numeric:tabular-nums;
                font-size:20px; letter-spacing:-.01em}
/* El neto es el que sale del banco: va aparte y va en azul. */
.cuenta .tres .fin{margin-left:auto; text-align:right; padding-left:18px;
                   border-left:1px solid var(--rule)}
.cuenta .tres .fin b{color:var(--azul); font-size:23px}
.cuenta .como{margin-top:8px; padding-top:8px; border-top:1px dashed var(--rule);
              font-size:12px; color:var(--ink-2)}
@media (max-width:620px){
  .cuenta .tres .fin{margin-left:0; padding-left:0; border-left:0; text-align:left}
}

/* Quince días no caben en una fila: que envuelvan y que respiren. */
.patron.largo{gap:5px 6px}
.patron.largo label{min-width:50px}
.patron.largo input[type=number]{width:50px}

/* El bono se marca, no se escribe: el número no significaba nada. */
.patron input[type=checkbox]{width:22px; height:22px; margin:5px 0; accent-color:var(--azul); cursor:pointer}

/* =====================================================================
   UN DÍA QUE NO SALIÓ COMO ESTABA PROGRAMADO

   La casilla tiene que contarlo sin que nadie lea nada. Rojo: faltó y le
   costó plata. Morado: incapacidad — se le paga igual, así que no es lo
   mismo aunque el cliente se haya quedado corto igual. Y el borde grueso
   de la izquierda dice que nadie lo cubrió, que es lo único que de verdad
   hay que perseguir en una quincena de 400 renglones.
   ===================================================================== */
td.dia.tocable{cursor:pointer}
td.dia.tocable:hover{outline:1px solid var(--azul); outline-offset:-1px}
/* El color contesta una sola pregunta: ¿el cliente recibió su turno?

   Van con el selector completo —.tw table.grilla tbody— a propósito: la
   banda gris que separa clientes se pinta con esa misma ruta larga, y con
   un selector corto le ganaba al color del día. Un reemplazo que caía en
   un cliente de banda gris se veía gris.

   Y los tonos «soft» de la paleta están hechos para bloques grandes; en
   una casilla de veintisiete píxeles no se distinguen del fondo. Se mezcla
   el color al 18%, que es lo que hace falta para leerlo de lejos sin
   gritar. El soft queda de respaldo si el navegador no entiende color-mix. */
.tw table.grilla tbody td.dia.falta.sola    {background:var(--alert-soft); color:var(--alert); font-weight:700}
.tw table.grilla tbody td.dia.falta.cubierta{background:var(--azul-soft);  color:var(--azul);  font-weight:700}
.tw table.grilla tbody td.dia.cubriendo     {background:var(--verde-soft); color:var(--verde); font-weight:700}
@supports (background: color-mix(in srgb, red 10%, white)){
  .tw table.grilla tbody td.dia.falta.sola    {background:color-mix(in srgb, var(--alert) 18%, var(--surface))}
  .tw table.grilla tbody td.dia.falta.cubierta{background:color-mix(in srgb, var(--azul)  18%, var(--surface))}
  .tw table.grilla tbody td.dia.cubriendo     {background:color-mix(in srgb, var(--verde) 18%, var(--surface))}
  .note .claves .mu.falta.sola    {background:color-mix(in srgb, var(--alert) 18%, var(--surface))}
  .note .claves .mu.falta.cubierta{background:color-mix(in srgb, var(--azul)  18%, var(--surface))}
  .note .claves .mu.cubriendo     {background:color-mix(in srgb, var(--verde) 18%, var(--surface))}
}
td.dia .de{opacity:.55; font-weight:400; font-size:.85em}
/* Y si fue incapacidad, un asterisco. Un cuarto color no se habría leído. */
td.dia .ast{font-weight:700; margin-left:1px; vertical-align:super; font-size:.8em}

/* =====================================================================
   LA CABECERA DEL CRONOGRAMA NO SE VA

   Con 400 renglones, bajar tres pantallas dejaba una parrilla de números
   sin saber qué día era cuál. La letra y el número se quedan pegados
   arriba.

   Las dos líneas van dentro de UNA sola celda. Antes iban en dos filas
   de encabezado y cada fila se pegaba por su cuenta: la de los días
   quedaba a distinta altura que la de Cliente/Colaborador y el bloque
   de fechas se veía flotando, desalineado del resto.
   ===================================================================== */
table.grilla thead th{position:sticky; top:0; z-index:4; background:var(--surface-2);
      vertical-align:bottom}
.tw table.grilla thead th.dia{line-height:1.15; padding:5px 2px}
.tw table.grilla thead th.dia .l{display:block; font-size:10px; color:var(--ink-3);
      font-weight:600; letter-spacing:.03em}
.tw table.grilla thead th.dia .n{display:block; font-size:11.5px;
      font-family:var(--fuente); font-variant-numeric:tabular-nums}

/* =====================================================================
   UNA DESVIACIÓN SE LEE DE UN VISTAZO

   El número y su porcentaje van juntos y en la misma celda: por separado
   obligan a hacer la división mental. Y el color solo aparece cuando pasa
   del 5% — si todo estuviera pintado, nada resaltaría.
   ===================================================================== */
.desv{display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.2;
      font-family:var(--fuente); font-variant-numeric:tabular-nums; font-variant-numeric:tabular-nums}
.desv .p{font-size:11px; opacity:.75}
.desv.sube{color:var(--alert); font-weight:700}
.desv.baja{color:var(--clay); font-weight:700}
.desv.igual{color:var(--ink-2)}

/* La leyenda de colores: cuadritos del mismo color que las casillas, para
   que no haya que traducir palabras a colores mirando de un lado a otro. */
.note .claves{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:9px}
.note .claves span{display:inline-flex; align-items:center; gap:7px}
.note .claves .mu{width:20px; height:18px; border-radius:4px; display:inline-flex;
  align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:12px}
.note .claves .mu.falta.sola    {background:var(--alert-soft); color:var(--alert)}
.note .claves .mu.falta.cubierta{background:var(--azul-soft);  color:var(--azul)}
.note .claves .mu.cubriendo     {background:var(--verde-soft); color:var(--verde)}

/* Un número que se escribe donde se lee. Ocupa exactamente la celda para
   que la tabla no dé un salto al abrirlo. */
td .enCelda{width:100%; padding:2px 4px; text-align:right; font-size:13px;
  font-family:var(--fuente); font-variant-numeric:tabular-nums; border:1px solid var(--azul);
  border-radius:4px; background:var(--surface); color:var(--ink)}
.tw table.grilla tbody td.num.tocable{cursor:pointer}
.tw table.grilla tbody td.num.tocable:hover{outline:1px solid var(--azul); outline-offset:-1px}

/* =====================================================================
   UN RENGLÓN QUE ENTRA SÍ O SÍ

   En una liquidación, los renglones con pagos en el sistema no se pueden
   dejar por fuera: la persona quedaría con saldo colgando. Ahí no hay
   casilla que marcar —no hay decisión— así que en su lugar va esta marca.
   Se pintó a mano porque una casilla marcada y deshabilitada la dibuja el
   navegador en gris, y ese gris se lee como «apagado».
   ===================================================================== */
.fijo{display:inline-flex; align-items:center; justify-content:center;
      width:16px; height:16px; flex:0 0 16px; border-radius:4px;
      background:var(--azul,#2563eb); color:#fff; font-size:11px; line-height:1;
      font-weight:800; cursor:default}
/* José, 22/10: «en cargar pagos sueltos no se ve la empresa del maestro»: la regla de arriba (la casilla
   azul) también le caía a la celda de la razón social (td.fijo) y la pintaba en blanco de 16px. */
td.fijo{display:table-cell; width:auto; height:auto; flex:none; border-radius:0; background:none;
        color:var(--ink-2); font-size:12.5px; line-height:1.25; font-weight:400; cursor:auto; text-align:left}

/* =====================================================================
   EL LECTOR DE QUINCENA BAJO UNA FECHA

   Una fecha no dice en qué quincena cae, y el calendario tiene un salto
   que no se adivina: el día 31 pertenece a la Q1 del mes SIGUIENTE. Ahí
   se equivocaron cinco liquidaciones seguidas. El lector lo enseña; y
   cuando la quincena cae en otro mes que la fecha, sube la voz.
   ===================================================================== */
.lector{font-size:12px; color:var(--ink-3); margin-top:5px; line-height:1.35}
.lector b{color:var(--ink-2); font-weight:700}
.lector.salta{color:var(--clay)}
.lector.salta b{color:var(--clay)}

/* =====================================================================
   EL GANCHO DE «AL DÍA»

   Trescientas filas con la palabra «al día» escrita son una columna de
   ruido que tapa las seis que sí piden algo. El gancho se reconoce sin
   leerlo: la vista salta lo verde y se queda en lo que no lo es.
   ===================================================================== */
.gancho{display:inline-flex; align-items:center; justify-content:center;
        width:19px; height:19px; border-radius:50%; background:var(--verde);
        vertical-align:middle}
.gancho svg{width:12px; height:12px; display:block; fill:none; stroke:#fff;
            stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* =====================================================================
   MODO PRODUCCIÓN
   José: «oculta todas estas "instrucciones fijas / explicaciones"
   limpiemos la plataforma, ya pasó etapa de "aprendizaje" ya estamos en
   modo producción y mejora continua». Las notas fijas llevan la clase
   «ayuda» y el subtítulo de cada pantalla es su explicación: se esconden.
   Los avisos con datos (cuántos, quiénes, cuánto) siguen a la vista.
   ===================================================================== */
.ayuda{display:none !important}
.page-h > div > p{display:none}
tr.amarillo > td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}
tr.amarillo{background:var(--amarillo-soft)}
tr.amarillo:hover{background:var(--amarillo-soft); filter:brightness(.98)}
.burbuja{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px;
  border-radius:50%; background:var(--amarillo); color:#fff; font-size:11px; font-weight:800; cursor:help;
  vertical-align:middle; border:0; padding:0; line-height:1}
.burbuja:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#burbujaTip{position:fixed; z-index:9999; max-width:380px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); border:1px solid var(--rule-2); box-shadow:var(--sh-3);
  font-size:12.5px; line-height:1.45; white-space:pre-line; pointer-events:none}
#burbujaTip b{display:block; margin-top:6px}
#burbujaTip b:first-child{margin-top:0}

/* Facturación: la cuadrícula de contratos */
.fac-grid td.fac-celda{cursor:pointer; font-variant-numeric:tabular-nums; white-space:nowrap}
.fac-grid td.fac-celda:hover{outline:2px solid var(--azul); outline-offset:-2px}
.fac-grid td.fac-pagada{background:#16a34a; color:#fff; font-weight:600}
.fac-grid td.fac-abonada{background:#f59e0b; color:#fff; font-weight:600}
.fac-grid td.fac-enviada{background:#e5e7eb; color:#111827}
.fac-grid td.fac-incobrable{background:#dc2626; color:#fff; text-decoration:line-through}
.fac-grid td.fac-proyectada{background:var(--surface); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--rule)}
.fac-grid td.fac-alerta{box-shadow:inset 0 0 0 2px #f5c518}
.fac-grid td.fac-nota{background-image:linear-gradient(225deg, var(--naranja) 6px, transparent 6px)}
.fac-ley{display:inline-block; width:14px; height:10px; border:1px solid var(--rule); vertical-align:middle; margin:0 2px 0 6px; background:var(--surface)}
.fac-ley.fac-pagada{background:#16a34a} .fac-ley.fac-abonada{background:#f59e0b} .fac-ley.fac-enviada{background:#e5e7eb} .fac-ley.fac-incobrable{background:#dc2626} .fac-ley.fac-alerta{box-shadow:inset 0 0 0 2px #f5c518}
.fac-grid .fac-fija3{position:sticky; left:204px; width:84px; min-width:84px; z-index:1; background:var(--surface); box-shadow:inset -1px 0 0 var(--rule-2)}
.fac-grid thead .fac-fija3{z-index:3; background:var(--surface-2)} .fac-grid tfoot .fac-fija3{background:var(--surface-2)}
.fac-grid .fac-fija3 .tag{font-size:10.5px; padding:2px 8px}
/* José, 22/10: el estado es una lista desplegable, sin píldoras afuera */
.fac-estados .msel-btn{min-width:180px}
.fac-est-pop{min-width:200px}
.fac-est-pop .msel-op{padding-left:2px; align-items:center}
.punto{display:inline-block; width:9px; height:9px; border-radius:99px; margin-right:8px; vertical-align:middle; background:var(--ink-3)}
.punto.ok{background:var(--verde)} .punto.wa{background:var(--naranja)} .punto.am{background:#e0b100} .punto.si{background:var(--azul)}
.campo-est{display:grid; gap:5px} .campo-est > span{font-size:12px; font-weight:600; color:var(--ink-2)}
.fac-cli{color:var(--ink); text-decoration:none; font-weight:600} .fac-cli:hover{color:var(--azul)}
/* Pagos: el gancho del pago completo y las opciones del lápiz */
.listo-ok{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:99px;background:var(--ok);color:#fff;font-weight:800;font-size:13px}
.opcion-pago{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.opcion-pago span{font-size:12.5px;color:var(--ink-2)}
.opcion-pago:hover{border-color:var(--azul)}
/* Facturación: código y nombre se quedan quietos al correr los meses */
.fac-grid{font-size:12.5px}
.fac-grid thead th,.fac-grid tbody td,.fac-grid tfoot td{padding:6px 7px}
.fac-grid thead th.num,.fac-grid td.num{min-width:72px}
.fac-grid .fac-fija1{position:sticky; left:0; width:44px; min-width:44px; z-index:1; background:var(--surface)}
.fac-grid .fac-fija2{position:sticky; left:44px; width:160px; min-width:160px; max-width:160px; overflow:hidden; text-overflow:ellipsis; z-index:1; background:var(--surface)}
.fac-grid td.fac-mas,.fac-ley.fac-mas{background-image:linear-gradient(45deg, var(--azul) 5px, transparent 5px)}
.fac-grid thead .fac-fija1,.fac-grid thead .fac-fija2{z-index:3; background:var(--surface-2)}
.fac-grid tfoot .fac-fija1,.fac-grid tfoot .fac-fija2{background:var(--surface-2)}
.tw .fac-grid tbody tr.apagada td.fac-fija1,.tw .fac-grid tbody tr.apagada td.fac-fija2,.tw .fac-grid tbody tr.apagada td.fac-fija3{opacity:1; color:var(--ink-3); background:var(--surface)}
/* Clientes: los periodos del contrato de facturación */
.contrato-fac{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2)}
.contrato-fac.vivo{background:var(--surface);border-color:var(--azul)}
.fac-grid td.fac-virtual{color:var(--ink-3); font-style:italic}
/* Clientes: la hoja de costos */
.costos-cli td{padding:5px 10px}
.costos-cli tr.grupo td{background:var(--surface-2); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); font-weight:700}
.costos-cli td.num{text-align:right; white-space:nowrap}
.costos-cli input{width:120px; text-align:right; font-family:var(--fuente); font-variant-numeric:tabular-nums; padding:5px 8px}
.fac-grid td.fac-nota.fac-mas{background-image:linear-gradient(225deg, var(--naranja) 6px, transparent 6px), linear-gradient(45deg, var(--azul) 5px, transparent 5px)}
/* Operaciones: el color de cada supervisor y la planificación */
.tag-sup{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 35%, transparent)}
.plan-sup{gap:12px} .plan-cab{font-size:15px}
/* Registrar pago: más aire, y la lista para distribuir */
.modal .linea-pago .bd{padding:14px 16px}
.modal .linea-pago .grid2{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px 16px}
.pago-soportes{align-items:start}
.reparto-lista{display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; max-height:300px; overflow:auto; padding:4px 2px}
.reparto-cli{display:flex; gap:8px; align-items:center; font-size:12.5px}
@media (max-width:720px){ .reparto-lista{grid-template-columns:1fr} }
.costos-cli .costo-solo{display:inline-block; min-width:120px; text-align:right; font-family:var(--fuente); font-variant-numeric:tabular-nums; color:var(--ink-2); padding:5px 8px}
/* El menú plegado: solo íconos (José: que La Corriente quepa en una pantalla) */
.who button.plegar{padding:5px 8px; margin-left:auto; display:inline-flex; align-items:center}
#shell.plegado{grid-template-columns:64px minmax(0,1fr)}
#shell.plegado main{max-width:none; padding:22px 20px 80px}
#shell.plegado .brand{padding:18px 10px 12px}
#shell.plegado .brand .logo-x365{width:44px}
#shell.plegado nav{padding:4px 8px}
#shell.plegado nav button{justify-content:center; padding:9px 0}
#shell.plegado nav button > span, #shell.plegado nav .grp, #shell.plegado nav .raya{display:none}
#shell.plegado nav button.on::before{left:-8px}
#shell.plegado nav .sub{margin:2px 0 6px; padding-left:0; border-left:0}
#shell.plegado nav .sub button.on::before{left:-8px}
#shell.plegado #ambitoSel{padding:0 8px 4px}
#shell.plegado .ambito .actual{justify-content:center; padding:9px 0}
#shell.plegado .ambito .actual > span, #shell.plegado .ambito .actual .chev{display:none}
#shell.plegado .ambito .opciones{left:0; right:auto; width:220px}
#shell.plegado .who{padding:12px 8px 16px; align-items:center}
#shell.plegado .who > span, #shell.plegado .who #btnConfig, #shell.plegado .who #btnSalir{display:none}
#shell.plegado .who button.plegar{margin:0}
#shell.plegado .who button.plegar svg{transform:rotate(180deg)}
@media (max-width:900px){ #shell.plegado{grid-template-columns:1fr} .who button.plegar{display:none} }
/* La Corriente: el lápiz cabe en su columna y la rejilla entra en una pantalla */
.tw table.grilla tbody td{padding:5px 6px}
.tw table.grilla thead th{padding:7px 6px}
.tw table.grilla th.lapiz, .tw table.grilla td.lapiz{padding:2px 4px; text-align:center; overflow:visible}
.tw table.grilla td .rowbtn{padding:3px 7px; font-size:11.5px}
/* Pagos: el texto largo se recorta en su columna en vez de empujar la tabla */
.corta-txt{min-width:0; max-width:100%; overflow:hidden}
.corta-txt > b, .corta-txt > .rowsub{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.papel-programa h2{margin:0 0 10px;font-size:18px} .papel-programa table{font-size:11px} .papel-programa td{padding:3px 6px}

/* Espacio entre secciones (José, 14/10: «tener más cuidado con los espacios»):
   lo que va uno debajo del otro en la página no se pega. */
#view > .card + .card, #view > .card + .searchbar, #view > .card + .callout, #view > .card + .kpis,
#view > .callout + .card, #view > .callout + .searchbar, #view > .callout + .callout, #view > .callout + .kpis,
#view > .kpis + .card, #view > .kpis + .searchbar, #view > .kpis + .callout{margin-top:16px}
#view > .card + .note, #view > .tw + .note{margin-top:10px}

/* Operaciones · la barra de la programación */
.prog-barra{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap}
.prog-barra label.f{min-width:230px; margin:0}
.prog-info{font-size:13px; color:var(--ink-2); padding-bottom:9px}
.prog-info b{color:var(--ink)}

/* Operaciones · Resumen: la ficha de cada supervisor */
.res-ficha{display:grid; gap:18px}
.res-cab{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--rule)}
.res-quien{display:flex; align-items:center; gap:10px; font-size:16px}
.res-datos{display:flex; gap:10px; flex-wrap:wrap}
.res-dato{background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r-sm); padding:7px 12px; min-width:92px}
.res-dato b{display:block; font-size:18px; line-height:1.1; color:var(--ink)}
.res-dato span{font-size:11px; color:var(--ink-3)}
.res-cuerpo{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:1100px){ .res-cuerpo{grid-template-columns:1fr} }
.res-col{display:grid; gap:10px; align-content:start}
.res-tit{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:6px}
.res-col .res-tit:first-child{margin-top:0}
.res-lista{display:grid; gap:6px}
.res-item{display:flex; gap:8px; align-items:flex-start; font-size:13px; padding:8px 10px; background:var(--surface-2);
  border-radius:var(--r-sm)}
.res-item details{margin-top:3px}
.res-yo{font-size:12px; color:var(--ink-2)}
.hist-rel{margin-top:8px; font-size:13px} .hist-rel summary{cursor:pointer; color:var(--ink-2)} .hist-rel div{margin:4px 0}

/* Operaciones · compacto (José, 15/10) */
.tarea{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.veces{font-size:11px; color:var(--ink-3)}
.tag-na{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600;
  background:var(--surface-3); color:var(--ink-3); border:1px solid var(--rule)}
table.compacta td{padding-top:7px; padding-bottom:7px}
details.pers summary{cursor:pointer; font-size:12.5px}
details.pers .mini{margin-top:4px; white-space:normal}
.sup-tablero{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px}
.sup-card{all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:12px; padding:16px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--sh-1)}
.sup-card:hover{border-color:var(--azul); box-shadow:var(--sh-2)}
.sup-card-cab{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px}
.sup-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.sup-num{background:var(--surface-2); border-radius:var(--r-sm); padding:8px 10px}
.sup-num b{display:block; font-size:22px; line-height:1.1}
.sup-num span{font-size:11px; color:var(--ink-3)}
.sup-forms{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-2)}
.sup-forms b{color:var(--ink)}

/* Política (Configuración) */
.pol-barra{display:flex; gap:10px; align-items:center; margin-bottom:14px}
.pol-barra input[type=search]{flex:1; max-width:420px}
.pol-lista{display:flex; flex-direction:column}
.pol-item{padding:10px 0; border-bottom:1px solid var(--rule)}
.pol-item:last-child{border-bottom:0}
.pol-item.prop{padding-left:10px; border-left:3px solid var(--naranja); margin-bottom:6px}
.pol-cab{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.pol-t{font-size:14px} .pol-t .tag{margin-left:6px; font-size:10.5px; padding:2px 8px}
.pol-acc{display:flex; gap:6px; flex-shrink:0}
.pol-r{margin-top:4px; font-size:13.5px; max-width:90ch}
.pol-p{margin-top:3px; font-size:12.5px; color:var(--ink-2); font-style:italic; max-width:90ch}
.pol-ant{margin-top:5px; font-size:12.5px; color:var(--ink-3); max-width:90ch}
.pol-m{margin-top:4px; font-size:11.5px; color:var(--ink-3)}
@media (max-width:640px){ .pol-cab{flex-direction:column} }

/* Facturación · dashboard */
svg.fac-dash{width:100%; height:auto; display:block}
svg.fac-dash .g{stroke:var(--rule); stroke-width:1}
svg.fac-dash .ax{font-size:11px; fill:var(--ink-3)}
svg.fac-dash .drec{fill:var(--verde)}
svg.fac-dash .drecp{fill:var(--verde); opacity:.38}
svg.fac-dash .dpro{fill:var(--azul)}
svg.fac-dash .dprop{fill:var(--azul); opacity:.35}
svg.fac-dash .hit{fill:transparent}
svg.fac-dash g.mes:hover .hit{fill:var(--surface-2)}
/* José, 23/10: sin el bloque gris detrás del mes en curso (el nombre del mes ya va en negrita) */
svg.fac-dash .ax.hoy{font-weight:700; fill:var(--ink)}
/* La leyenda del dashboard. Antes se llamaba .fac-ley, igual que los
   cuadritos de la leyenda de Contratos, y los volvía bloques sueltos abajo
   a la izquierda (José: «unos gráficos extraños»). Y «.rec» ya era la
   tarjeta de los recordatorios: por eso las clases llevan «d». */
.fac-dley{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:8px}
.fac-dley i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.fac-dley i.drec{background:var(--verde)} .fac-dley i.drecp{background:var(--verde); opacity:.38}
.fac-dley i.dpro{background:var(--azul)} .fac-dley i.dprop{background:var(--azul); opacity:.35}
.fac-proy{color:var(--ink-3); font-style:italic}
.desc-ctrl{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.desc-ctrl select{min-width:0}
.pres-cuentas td{vertical-align:top; white-space:nowrap}
.pres-cuentas td:first-child{white-space:normal; min-width:200px}
/* Cambio de trabajador: los días que no le tocan a cada uno */
.tw table.grilla tbody td.dia.fuera{background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--rule) 4px, var(--rule) 5px); color:var(--ink-3)}
table.grilla.cambio td.dia{padding:2px}

/* m237: la programación del pago en el renglón (el Excel de José) */
table.grilla.programa{width:auto;margin:2px 0}
table.grilla.programa th,table.grilla.programa td{padding:3px 6px;font-size:12px}
table.grilla.programa td.dia{padding:2px;width:46px}
table.grilla.programa td.dia input{width:44px;padding:2px 4px;text-align:right}
table.grilla.programa tr.puesto td{background:var(--surface-3);color:var(--ink-2);font-weight:600}
table.grilla.programa tr.suma td{border-top:1px solid var(--rule-2);font-weight:600}
table.grilla.programa.resumen tr.total td{border-top:1px solid var(--rule-2);font-weight:700}
/* Registro de pagos: comprobante, soporte y número en una línea (José, 18/10) */
.pago-soportes.tres{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 16px; align-items:end}
@media (max-width:720px){ .pago-soportes.tres{grid-template-columns:1fr} }
/* m241: el renglón que paga una liquidación, tachado */
.tw table.grilla tbody tr.liquidado td{text-decoration:line-through; color:var(--ink-3)}
.tw table.grilla tbody tr.liquidado td.lapiz{text-decoration:none}

/* Requisición (m243) */
dl.ficha{display:grid; grid-template-columns:150px 1fr; gap:6px 14px; margin:0; font-size:13.5px}
dl.ficha dt{color:var(--ink-3); font-weight:600}
dl.ficha dd{margin:0}
.tw table tbody tr.vacante td{background:var(--naranja-soft,#fbe5d6)}
.tw table tbody tr.rq-cancelada td{color:var(--ink-3)}
.tabs button .mini{color:inherit; opacity:.8; margin-left:4px}
@media (max-width:640px){ dl.ficha{grid-template-columns:1fr} }
.rowsub.rq-revisar{color:var(--clay,#b45309); font-weight:600}
/* Requisición · diseño de José (Puesto · Tag · Sale/Entra · Trabajador · Fecha · Programar) */
table.rq td{vertical-align:middle; padding:6px 10px}
table.rq tr.rq-primera td{border-top:2px solid var(--rule)}
table.rq td.rq-puesto, table.rq td.rq-tag, table.rq td.rq-prog{vertical-align:top}
table.rq td.rq-tag{max-width:260px}
table.rq .rq-burbuja{margin-left:6px; opacity:.35; font-size:13px}
table.rq .rq-burbuja.llena{opacity:1}
table.rq .rq-razon{white-space:normal; margin-top:4px}
table.rq .rq-mov{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3)}
table.rq .rq-mov.sale{color:var(--rojo,#c2410c)}
table.rq .rq-mov.entra{color:var(--verde,#15803d)}
table.rq .rq-mov.vuelve{color:var(--azul,#2563eb)}
table.rq input.rq-in{width:100%; min-width:0; padding:5px 8px; font-size:13px}
table.rq td.rq-dos{white-space:nowrap}
table.rq td.rq-dos input.rq-in{width:auto}
table.rq td.rq-prog .rq-estado{margin-top:6px}
table.rq tr.rq-nuevo td{background:var(--surface-2)}
.btn.apagado{opacity:.5}
/* Filtro con casillas (Proyectos · estado) */
details.filtro-chk{position:relative}
details.filtro-chk > summary{list-style:none; cursor:pointer; border:1px solid var(--rule); border-radius:8px; padding:8px 30px 8px 12px; font-size:13.5px; background:var(--surface); white-space:nowrap; min-width:150px; position:relative}
details.filtro-chk > summary::after{content:'▾'; position:absolute; right:10px; color:var(--ink-3)}
details.filtro-chk > summary::-webkit-details-marker{display:none}
details.filtro-chk .filtro-chk-panel{position:absolute; z-index:20; top:calc(100% + 4px); left:0; background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:8px 10px; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:6px; min-width:180px}
details.filtro-chk .filtro-chk-panel label{display:flex; gap:8px; align-items:center; cursor:pointer}

/* José, 20/10: la cabeza de La Corriente (desde la Q2 de octubre): una sola
   letra para todos los títulos, en una línea, a la izquierda y al medio de su alto. */
.tw table.grilla thead.cabeza-nueva th{font-family:inherit; text-align:left; white-space:nowrap;
  font-size:11px; letter-spacing:.03em; text-transform:uppercase; vertical-align:middle; padding:7px 4px}
.tw table.grilla thead.cabeza-nueva th.dia{white-space:normal}

/* Reporte CECO (José, 21/10): la columna del cliente fija al correr a la derecha; grupos que se colapsan */
.tw.ceco table{border-collapse:separate; border-spacing:0; font-size:13px}
.tw.ceco th, .tw.ceco td{white-space:nowrap}
.tw.ceco td{padding:6px 10px}
/* la columna del cliente, fija a la izquierda (cfix: «fijo» ya es otra cosa en la app) */
.tw.ceco .cfix{position:sticky; left:0; z-index:3; background:var(--surface); min-width:230px; max-width:270px;
  box-shadow:inset -1px 0 0 var(--rule-2); text-align:left}
.tw.ceco td.cfix b{font-weight:600; color:var(--ink)}
.tw.ceco td.cfix .corta-txt{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tw.ceco td.cfix .corta-txt > b{display:inline}
.tw.ceco td.cfix .cod{color:var(--ink-3); font-size:12px; margin-right:8px; display:inline-block; min-width:34px}
.tw.ceco td.cfix .rowsub{margin-left:6px; display:inline}
.tw.ceco thead th{font-family:inherit}
/* cabecera fija: dos renglones de alto conocido */
.tw.ceco thead th{position:sticky; z-index:5; padding:0 10px; vertical-align:middle; letter-spacing:.04em}
.tw.ceco thead tr.h1 th{top:0; height:36px}
.tw.ceco thead tr.h2 th{top:var(--ceco-h1, 36px); height:40px; font-size:10.5px; font-weight:600; text-transform:none; letter-spacing:0;
  white-space:normal; line-height:1.2; min-width:92px; max-width:150px; cursor:pointer}
.tw.ceco thead th.cfix{z-index:6; background:var(--surface-3); color:var(--ink); font-size:11.5px}
.tw.ceco thead th.fin{background:var(--surface-3); color:var(--ink); text-align:right; min-width:96px}
.tw.ceco thead th.grupo{cursor:pointer; text-align:center; font-size:11.5px}
.tw.ceco thead th.g1{background:#cfe9d9; color:#14532d} .tw.ceco thead tr.h2 th.g1{background:#e6f4ec; color:#14532d}
.tw.ceco thead th.g2{background:#fbdcb8; color:#7c3a0a} .tw.ceco thead tr.h2 th.g2{background:#fdeedd; color:#7c3a0a}
.tw.ceco thead th.g3{background:#d6dcfa; color:#2a347f} .tw.ceco thead tr.h2 th.g3{background:#eaedfd; color:#2a347f}
.tw.ceco thead th.g4{background:#e5e7eb; color:#374151} .tw.ceco thead tr.h2 th.g4{background:#f1f2f4; color:#374151}
/* una raya entre grupos y antes de los márgenes */
.tw.ceco .ini{border-left:2px solid var(--rule-2)}
/* barras separadoras: Contratos y Proyectos */
/* la barra pegada es el tr (su caja es su tbody: la empuja la siguiente sección) */
.tw.ceco tbody tr.bloque{position:sticky; top:var(--ceco-top, 76px); z-index:4}
.tw.ceco tbody tr.bloque td{background:#334155; color:#fff; font-weight:700; padding:8px 10px; border-bottom:0}
.tw.ceco tbody tr.bloque td.cfix{z-index:4; background:#334155; color:#fff; letter-spacing:.06em; text-transform:uppercase; font-size:12px}
.tw.ceco tbody tr.bloque td b, .tw.ceco tbody tr.bloque td .mini{color:#fff !important}
.tw.ceco tbody tr.bloque td.cfix .mini{opacity:.7; margin-left:6px}
.tw.ceco tbody tr.sin-repartir td{background:#fff3df}
.tw.ceco tfoot td{position:sticky; bottom:0; background:var(--surface-3); font-weight:700; border-top:2px solid var(--rule-2)}
.tw.ceco tfoot td.cfix{z-index:4; background:var(--surface-3)}
/* José, 21/10: cómo se reparte cada cuenta (catálogo y Pagos) */
.regla-cta{font-size:12px; line-height:1.4; white-space:normal; color:var(--ink-2); min-width:300px; max-width:620px}
.regla-cta b{color:var(--ink); font-weight:600}
.linea-pago .regla-cta{max-width:none; min-width:0; background:var(--surface-2); border-radius:6px; padding:6px 9px}
/* José, 21/10: Operaciones → Listas */
.pill-ev{display:inline-block; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; color:#fff; background:var(--c); white-space:nowrap}
.tw.listas td{vertical-align:top}
.tw.listas tr.bloque-lista td{background:var(--surface-3); position:sticky; top:38px; z-index:1}
.tw.listas .det-lista{white-space:normal; max-width:340px; font-size:12.5px; line-height:1.35}
.tw.listas .btn.si{color:var(--ok); font-weight:700} .tw.listas .btn.no{color:var(--alert); font-weight:700}
.modal .btn.si{color:var(--ok); font-weight:700} .modal .btn.no{color:var(--alert); font-weight:700}
.tag-lista{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px; border:1px solid var(--naranja); background:var(--naranja-soft);
  color:#8a4b0f; font-size:10.5px; font-weight:700; cursor:pointer; vertical-align:middle}
.tag-lista:hover{background:var(--naranja); color:#fff}
/* José, 21/10: el Resumen de pendientes por persona */
.ficha-pend .hd h2{font-size:15px}
.ficha-pend.mia{border-color:var(--azul); box-shadow:0 0 0 1px var(--azul) inset}
.ficha-sec{font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin:4px 0 6px}
.pend-fila{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--rule)}
.pend-fila .pend-n{min-width:38px; text-align:center; font-weight:700; background:var(--naranja-soft); color:#8a4b0f; border-radius:99px; padding:2px 8px}
.pend-fila .pend-t{flex:1}
.tarea-fila{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule)}
.tarea-fila > div:first-child, .tarea-fila .tarea-t{flex:1}
.tarea-fila .tarea-t{font-weight:600}
.act-item{font-size:12.5px; padding-bottom:9px; border-bottom:1px solid var(--rule)}
details.quien-atiende > summary{cursor:pointer; list-style:none}

/* Lote 163 — selector de conceptos con checklist (Quincenas · Histórico) */
.msel{position:relative}
.msel-btn{min-width:230px; text-align:left; padding:7px 32px 7px 12px; line-height:1.5; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--surface);
  font:inherit; color:var(--ink); cursor:pointer; position:relative}
.msel-btn::after{content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink-3)}
.msel-pop{position:absolute; z-index:40; top:calc(100% + 4px); left:0; width:max-content; min-width:340px; max-width:440px; max-height:60vh; overflow:auto; background:var(--surface);
  border:1px solid var(--rule); border-radius:12px; box-shadow:var(--sh-3); padding:8px 10px}
.msel-pop[hidden]{display:none}
.msel-rap{display:flex; gap:6px; padding:2px 0 8px; border-bottom:1px solid var(--rule); margin-bottom:6px}
.msel-grupo,.msel-op{display:flex; gap:9px; align-items:flex-start; padding:4px 2px; font-size:13px; line-height:1.35; cursor:pointer}
.msel-grupo{font-weight:700; margin-top:6px; color:var(--ink)}
.msel-op{padding-left:24px; color:var(--ink-2)}
.msel-grupo > span,.msel-op > span{flex:1 1 auto; min-width:0}
/* que no le caigan las reglas de los inputs de la barra (min-width 160px) */
.msel-pop input[type=checkbox]{width:15px; height:15px; min-width:0; flex:none; margin:1px 0 0; padding:0}
.msel-campo{display:grid; gap:5px}
.msel-campo > span{font-size:12px; font-weight:600; color:var(--ink-2)}
.nota-puesto{color:var(--ink-2); font-style:italic; white-space:normal}
/* La Corriente: el nombre abre el renglón (José, 21/10: sin lapicitos) */
.tw table.grilla a.nom-ren{color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:3px; cursor:pointer}
.tw table.grilla a.nom-ren:hover{color:var(--azul); text-decoration-color:var(--azul)}
/* La rotación: la vista previa de los días que cambian de dueño (José, 21/10) */
.rot-prev{border:1px solid var(--rule); border-radius:10px; padding:8px 12px; max-height:240px; overflow:auto; background:var(--surface-2)}
.rot-prev .rot-dia{font-size:13px; padding:3px 0; border-bottom:1px dashed var(--rule)}
.rot-prev .rot-dia:last-child{border-bottom:none}
.rot-prev .rot-dia b{display:inline-block; min-width:78px}
.rot-prev .rot-dia.antes{color:var(--ink-3)}
.rot-prev .rot-dia.doble{color:var(--rojo); font-weight:700}

/* José, 22/10 (Descuentos): el botón de la pestaña arriba a la derecha, en la línea de las pestañas;
   y las bandas con el mismo aire entre ellas */
.des-tabs{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.des-tabs .tabs{margin-bottom:0}
.des-accion{margin-left:auto; display:flex; gap:8px}
.des-caja{gap:14px}
.des-caja > .callout, .des-caja > .card{margin:0}

/* José, 22/10: en La Corriente, la banda de la sección se pega bajo el encabezado al bajar */
.tw table.grilla tbody tr.bloque td{position:sticky; top:var(--grilla-top, 40px); z-index:3; background:var(--azul-soft,#dce6f1)}

/* José, 22/10 (Presupuesto): el nombre del cliente no muerde las columnas (burbuja al pasar el ratón) y la lectura en chico */
.elip{display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lectura{font-size:12px; line-height:1.35; color:var(--ink-2); white-space:normal}

/* José, 22/10: menú de acciones (Agregar ▾, ⋯) */
details.menu-btn{position:relative; display:inline-block}
details.menu-btn > summary{list-style:none; cursor:pointer}
details.menu-btn > summary::-webkit-details-marker{display:none}
details.menu-btn .menu-btn-panel{position:absolute; z-index:30; top:calc(100% + 4px); left:0; background:var(--surface); border:1px solid var(--rule);
  border-radius:10px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; flex-direction:column; min-width:220px}
details.menu-btn.der .menu-btn-panel{left:auto; right:0}
details.menu-btn .menu-btn-panel button{background:none; border:0; text-align:left; padding:8px 10px; border-radius:6px; font-size:13.5px; cursor:pointer; color:var(--ink)}
details.menu-btn .menu-btn-panel button:hover{background:var(--surface-2)}

/* =====================================================================
   José, 22/10: «cada sección debe tener su espacio, no pueden haber
   bloques pegados» — en toda la plataforma, no solo en el primer nivel.
   Donde el contenedor ya reparte con gap (stack, grid, kpis…), no se suma.
   ===================================================================== */
#view :is(.card,.callout,.kpis,.tw,.searchbar,.tabs) + :is(.card,.callout,.kpis){margin-top:16px}
#view :is(.stack,.grid2,.split,.kpis,.res-cuerpo,.res-col,.sup-tablero,.pol-lista,.des-tabs,.actions,.pill-row,.searchbar,.page-h) > :is(.card,.callout,.kpis){margin-top:0}

/* m336: enlace de Google Maps de una sucursal */
a.mapa{font-size:11.5px;font-weight:600;color:var(--azul,#2b6cb0);text-decoration:none;white-space:nowrap;margin-left:4px}
a.mapa:hover{text-decoration:underline}

/* 29/10: aviso de la entrada cuando app.js no cargó. Escondido; sale solo a los 6 s si nadie lo quitó. */
.sin-carga{visibility:hidden;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;
  animation:x365SinCarga 0s linear 6s forwards}
@keyframes x365SinCarga{to{visibility:visible;max-height:200px;padding-top:13px;padding-bottom:13px}}

/* José, 29/10: puestos internos en bloques (Supervisión, Comerciales, Administración, vacíos) */
.tw table.internos tbody tr.bloque td{background:var(--azul-soft,#dce6f1); border-top:1px solid var(--rule)}