/* ═══════════════════════════════════════════════════════════════════════
   HumanaJobs — sistema visual «Instrumental»
   Un panel de instrumento de medición: reglas de 1px en vez de sombras,
   etiquetas grabadas, cifras tabulares, ámbar calibrado como única lectura.
   La escala del match se imprime una vez en la cabecera y cada fila se
   mide contra ella.

   Reemplaza a Tailwind 2 (CDN), style.css y styleh.css.
   Sin CDN, sin build step. Modo noche por defecto.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-var-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ─────────────────────────── tokens ─────────────────────────── */
/* Noche es el estado por defecto. Día es la alternativa. */
:root{
  --p0:#0E1115; --p1:#14181D; --p2:#1B2129; --well:#0A0D10;
  --rule:#2A313A; --rule2:#3D4650;
  --ink:#E9EDF1; --ink2:#A5B0BB; --ink3:#7E8B97;
  --brand:#7FB8D6; --brand2:#A5B7DB; --on-brand:#0E1115;
  --signal:#F0A63C; --signal-f:#E08E1E; --base-f:#4E6178;
  --alarm:#E5675B; --alarm-bg:rgba(229,103,91,.12);
  --brick:#A34A38; --on-brick:#FFFFFF;
  --ok:#68B58B;
  --focus:#6BA8F0;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.8);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:32px; --sp-7:48px;
  --r:2px; --r-lg:3px;
  --rail:52px;
}

:root[data-theme="light"]{
  --p0:#E3E7EA; --p1:#F2F5F7; --p2:#FAFBFC; --well:#D7DDE2;
  --rule:#C6CDD4; --rule2:#A9B3BC;
  --ink:#14181D; --ink2:#4B5661; --ink3:#5E6B76;
  --brand:#0A2E74; --brand2:#2E6E92; --on-brand:#FFFFFF;
  --signal:#A85D07; --signal-f:#E09A2E; --base-f:#6E7F98;
  --alarm:#93261C; --alarm-bg:rgba(147,38,28,.08);
  --brick:#8E3323; --on-brick:#FFFFFF;
  --ok:#1F6B44;
  --focus:#1C6BD6;
  --shadow:0 1px 2px rgba(20,24,29,.07), 0 8px 24px -12px rgba(20,24,29,.22);
}

/* ─────────────────────────── base ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

/* El atributo `hidden` tiene que ganarle a los display del sistema: sin esto
   un .btn o un .well marcados hidden siguen apareciendo. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--p0);
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

a{color:var(--brand)}
img{max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}

:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r)}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--signal-f); color:#14181D}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--p0)}
::-webkit-scrollbar-thumb{background:var(--rule2); border:2px solid var(--p0); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--ink3)}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:10px 16px; background:var(--p1); border:1px solid var(--rule2);
  border-radius:var(--r); color:var(--ink); text-decoration:none;
}
.skip:focus{left:8px; top:8px}

/* etiqueta grabada: el ancho estrecho del variable + versalita espaciada */
.label,.field > label,th,.plate,.tag{
  font-size:9.5px; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
  font-variation-settings:'wdth' 82;
}

/* ─────────────────────────── chasis ─────────────────────────── */
.chassis{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:var(--sp-5);
  height:var(--rail);
  /* el contenido del chasis se alinea con la columna de la página */
  padding-inline:max(var(--sp-4), calc((100% - 1180px) / 2 + var(--sp-4)));
  background:var(--p1); border-bottom:1px solid var(--rule);
}
.mark{
  display:inline-flex; align-items:center; gap:2px;
  font-size:13px; font-weight:750; letter-spacing:.06em;
  font-variation-settings:'wdth' 118;
  color:var(--brand); text-decoration:none; white-space:nowrap;
}
.mark span{color:var(--ink2); font-weight:500}
.mark:hover{text-decoration:none}

.nav{display:flex; gap:2px; flex:1; min-width:0}
.nav a{
  padding:6px 11px; border-radius:var(--r); text-decoration:none; color:var(--ink3);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-variation-settings:'wdth' 86; white-space:nowrap;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink); background:var(--well)}

.chassis-end{display:flex; align-items:center; gap:var(--sp-3); margin-left:auto}
.who{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:12px; color:var(--ink3);
  padding-left:var(--sp-4); border-left:1px solid var(--rule); height:26px;
}
.avatar{
  width:22px; height:22px; border-radius:var(--r); background:var(--well);
  border:1px solid var(--rule2); display:grid; place-items:center;
  font-size:10px; font-weight:700; color:var(--ink2);
}
.burger{
  display:none; align-items:center; justify-content:center;
  width:34px; height:32px; border:1px solid transparent; border-radius:var(--r);
  background:transparent; color:var(--ink2); cursor:pointer;
}
.burger:hover{border-color:var(--rule2); background:var(--well); color:var(--ink)}

/* interruptor de dos posiciones DÍA / NOCHE */
.rocker{
  display:inline-flex; padding:2px; gap:2px; border-radius:var(--r-lg);
  background:var(--well); border:1px solid var(--rule2);
}
.rocker button{
  appearance:none; border:0; cursor:pointer; border-radius:var(--r);
  padding:4px 9px; background:transparent; color:var(--ink3);
  font-size:9.5px; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  font-variation-settings:'wdth' 84;
  transition:background .14s ease, color .14s ease;
}
.rocker button:hover{color:var(--ink2)}
.rocker button[aria-pressed="true"]{background:var(--p1); color:var(--ink); box-shadow:var(--shadow)}

.mobile-menu{display:none; background:var(--p1); border-bottom:1px solid var(--rule);
  padding:var(--sp-2) max(var(--sp-2), calc((100% - 1180px) / 2 + var(--sp-2)))}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block; padding:11px var(--sp-3); border-radius:var(--r);
  text-decoration:none; color:var(--ink2);
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 86;
}
.mobile-menu a[aria-current]{color:var(--ink); background:var(--well)}

@media (max-width:860px){
  .nav{display:none}
  .who span.name{display:none}
  .burger{display:inline-flex}
  .chassis{gap:var(--sp-3)}
}

/* ─────────────────────────── layout ─────────────────────────── */
.page{max-width:1180px; margin:0 auto; padding:0 var(--sp-4) var(--sp-7)}
.page.narrow{max-width:840px}
.panel{background:var(--p1); border:1px solid var(--rule); border-radius:var(--r-lg)}

/* franja de lectura: saludo + cifra + controles */
.readout{
  display:flex; align-items:flex-end; gap:var(--sp-5); flex-wrap:wrap;
  padding:var(--sp-5) 0 var(--sp-4);
}
.greet{display:flex; flex-direction:column; gap:2px}
.greet .hi{font-size:13px; color:var(--ink3)}
.greet .line{display:flex; align-items:baseline; gap:11px}
.greet .num{
  font-size:46px; line-height:.86; font-weight:700; letter-spacing:-.035em;
  font-variation-settings:'wdth' 112; font-variant-numeric:tabular-nums;
}
.greet .unit{font-size:14px; color:var(--ink2); max-width:23ch; line-height:1.3}
.controls{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-left:auto; align-items:flex-end}

.field{display:flex; flex-direction:column; gap:5px}
.field > label{color:var(--ink3)}
.well{
  display:flex; align-items:center; gap:7px; height:32px; padding:0 9px;
  background:var(--well); border:1px solid var(--rule2); border-radius:var(--r);
  font-size:12.5px; color:var(--ink);
}
.well svg{flex:none; color:var(--ink3)}
.well input,.well select{
  border:0; background:transparent; outline:none; width:100%;
  font-size:12.5px; color:var(--ink); padding:0;
}
.well input::placeholder{color:var(--ink3)}
.well select{appearance:none; cursor:pointer; padding-right:14px}
.well.sel{position:relative}
.well.sel::after{
  content:''; position:absolute; right:9px; top:50%; width:6px; height:6px;
  border-right:1.5px solid var(--ink3); border-bottom:1.5px solid var(--ink3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.well:focus-within{border-color:var(--focus); box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 25%,transparent)}
.well.wide{min-width:210px}

/* campos de formulario a ancho completo */
.form{display:grid; gap:var(--sp-5)}
.form .field > label{color:var(--ink2); font-size:10px}
/* Marca de los campos que son perfil declarado y no entran en el puntaje: se
   pueden dejar en blanco. Hereda la caja de la etiqueta grabada, un tono abajo. */
.field > label .opt{color:var(--ink3); font-weight:500}
.field > label .opt::before{content:'· '}
.form .well{height:38px}
.form-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; padding-top:var(--sp-2)}

/* ─────────────────────────── tipografía ─────────────────────────── */
h1.title{
  margin:0; font-size:clamp(22px,3vw,28px); font-weight:700; letter-spacing:-.022em;
  font-variation-settings:'wdth' 106; text-wrap:balance;
}
h2.sub{
  margin:0 0 var(--sp-3); font-size:18px; font-weight:650; letter-spacing:-.012em;
  font-variation-settings:'wdth' 104;
}
.muted{color:var(--ink2)}
.dim{color:var(--ink3)}
.prose{max-width:66ch; color:var(--ink2); line-height:1.62}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px; padding-left:19px}
.prose li{margin-bottom:5px}

/* ─────────────────────────── botones ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:34px; padding:0 14px; border-radius:var(--r);
  border:1px solid var(--rule2); background:var(--p1); color:var(--ink);
  font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .13s ease, border-color .13s ease;
}
.btn:hover{background:var(--well)}
.btn svg{flex:none}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.08); background:var(--brand)}
.btn.danger{border-color:var(--alarm); color:var(--alarm)}
.btn.danger:hover{background:var(--alarm-bg)}
/* Ladrillo: acción propia de la lista de ofertas (filtrar), distinta del azul
   que manda una búsqueda. No es --alarm: eso queda reservado para el error. */
.btn.brick{background:var(--brick); border-color:var(--brick); color:var(--on-brick)}
.btn.brick:hover{filter:brightness(1.08); background:var(--brick)}
.btn.sm{min-height:28px; padding:0 10px; font-size:11.5px}
.btn.block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45; pointer-events:none}

.iconbtn{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:var(--r);
  border:1px solid transparent; color:var(--ink3); background:transparent;
  cursor:pointer; text-decoration:none; flex:none;
}
.iconbtn:hover{border-color:var(--rule2); background:var(--well); color:var(--ink)}
.iconbtn[disabled]{opacity:.35; pointer-events:none}

/* ─────────────────────────── placas y lámparas ─────────────────────────── */
.plate{
  display:inline-block; padding:2px 6px; border:1px solid var(--rule2);
  border-radius:var(--r); color:var(--ink3); white-space:nowrap;
}
.lamp{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:650;
  letter-spacing:.11em; text-transform:uppercase; font-variation-settings:'wdth' 84}
.lamp i{width:7px; height:7px; border-radius:50%; flex:none; font-style:normal}
.lamp.on{color:var(--ink)}
.lamp.on i{background:var(--signal-f); box-shadow:0 0 0 3px color-mix(in srgb,var(--signal-f) 22%,transparent)}
.lamp.off{color:var(--ink3)}
.lamp.off i{background:var(--rule2)}

.notice{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 14px; border:1px solid var(--rule2); border-radius:var(--r);
  background:var(--p1); font-size:13px; color:var(--ink2);
}
.notice svg{flex:none; margin-top:2px}
.notice.error{border-color:var(--alarm); background:var(--alarm-bg); color:var(--alarm)}
.notice.ok{border-color:var(--ok); color:var(--ok)}

/* ═══════════════ la escala del match ═══════════════
   La regla se graba una vez en la cabecera; cada fila lleva su barra
   alineada al mismo origen: 26px (la cifra) + 11px (el hueco).
   Los segmentos bajo 60 van en gris azulado; lo que pasa el umbral, en ámbar. */
.ruler{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.rscale{display:block; width:104px; margin-left:37px}
.rticks{position:relative; display:block; height:8px}
.rticks i{position:absolute; bottom:0; width:1px; background:var(--rule2)}
.rticks i.t0{left:0; height:5px}
.rticks i.t60{left:60%; height:8px; background:var(--signal)}
.rticks i.t100{right:0; height:5px}
.rnums{
  position:relative; display:block; height:11px; font-size:9px; font-weight:600;
  letter-spacing:.04em; color:var(--ink3); font-variation-settings:'wdth' 84;
}
.rnums b{position:absolute; top:0; font-weight:600; letter-spacing:.04em}
.rnums b.n0{left:0}
.rnums b.n60{left:60%; transform:translateX(-50%); color:var(--signal)}
.rnums b.n100{right:0}

.scale-cell{display:flex; align-items:center; gap:11px}
.scale-num{
  font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  font-variation-settings:'wdth' 106; width:26px; text-align:right; flex:none;
  font-variant-numeric:tabular-nums;
}
.scale-wrap{position:relative; display:block; width:104px; height:12px; flex:none}
.scale{
  position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 5.2px);
  mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 5.2px);
}
.scale i{position:absolute; top:0; bottom:0; display:block}
.s-track{left:0; right:0; background:var(--rule)}
.s-base{
  left:0; width:calc(min(var(--v),60) * 1%); background:var(--base-f);
  transform-origin:left center;
  animation:sweep .62s cubic-bezier(.16,1,.3,1) backwards; animation-delay:var(--d,0ms);
}
.s-over{
  left:60%; width:calc(max(var(--v) - 60,0) * 1%); background:var(--signal-f);
  transform-origin:left center;
  animation:sweep .62s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--d,0ms) + 90ms);
}
.scale-wrap::after{
  content:''; position:absolute; left:60%; top:-2px; bottom:-2px; width:1px; background:var(--rule2);
}
@keyframes sweep{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.s-base,.s-over{animation:none}}

/* desglose por canal */
.channels{display:flex; flex-direction:column; gap:7px}
.chan{display:grid; grid-template-columns:74px 48px minmax(60px,88px); align-items:center; gap:10px}
.chan .cname{color:var(--ink3)}
.chan .cval{font-size:12.5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.chan .cval b{color:var(--ink); font-weight:650}
.cbar{
  height:8px; background:var(--rule); position:relative; overflow:hidden;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 5.2px);
  mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 5.2px);
}
.cbar i{position:absolute; inset:0 auto 0 0; width:calc(var(--f) * 1%); background:var(--base-f)}

/* ═══════════════ la tabla de ofertas ═══════════════ */
/* un solo panel envuelve tabla, lista móvil y pie: los bordes internos se apagan */
.listpanel{border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; background:var(--p1)}
.listpanel .tablewrap,.listpanel .mlist{border:0; border-radius:0}
.listpanel .footrail{border-radius:0}
.tablewrap{
  overflow-x:auto; background:var(--p1);
  border:1px solid var(--rule); border-radius:var(--r-lg);
}
table.offers{
  width:100%; min-width:920px; border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.offers thead th{
  text-align:left; padding:11px 14px 12px; vertical-align:bottom;
  border-bottom:1px solid var(--rule2); color:var(--ink3); white-space:nowrap;
}
.offers tbody td{padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:middle}
.offers tbody tr:last-child td{border-bottom:0}
.offers tbody tr.row{cursor:pointer}
.offers tbody tr.row:hover{background:var(--p2)}
.offers tbody tr.row:hover .cargo{text-decoration:underline; text-underline-offset:2px}
.offers tbody tr.row:hover .rowgo{border-color:var(--brand); background:var(--well)}

/* el cargo ES el enlace, y se ve como tal desde el primer vistazo */
.cargo{
  display:block; font-size:14.5px; font-weight:600; color:var(--brand);
  text-decoration:none; letter-spacing:-.005em; line-height:1.3;
}
.cargo:hover{text-decoration:underline; text-underline-offset:2px}
.sub{display:block; font-size:12.5px; color:var(--ink2); margin-top:2px}
.remu{font-size:13.5px; color:var(--ink); font-weight:550; white-space:nowrap}
.remu.none{color:var(--ink3); font-weight:400}
.when{font-size:13px; color:var(--ink2); white-space:nowrap}
.when.fresh{color:var(--signal); font-weight:600}
.loc{font-size:13px; color:var(--ink2)}

/* dónde se hace clic: botón visible siempre, no sólo en hover */
.acts{white-space:nowrap}
.acts .in{display:flex; align-items:center; justify-content:flex-end; gap:7px}
.rowgo{
  display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 8px 0 10px;
  border:1px solid var(--rule2); border-radius:var(--r); background:transparent;
  color:var(--brand); font-size:11.5px; font-weight:650; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
}
.rowgo:hover{border-color:var(--brand); background:var(--well); text-decoration:none}
.rowgo svg{flex:none}

/* cajón del desglose */
tr.drawer > td{padding:0 !important; border-bottom:1px solid var(--rule)}
tr.drawer[hidden]{display:none}
.drawer-in{
  display:flex; gap:clamp(20px,4vw,56px); flex-wrap:wrap; align-items:flex-start;
  padding:16px 14px 18px 13px; background:var(--p2);
  border-left:1px solid var(--signal-f);
}
.drawer-why{max-width:27rem}
.drawer-why .cname{display:block; margin-bottom:6px; color:var(--ink3)}
.drawer-why p{margin:0; font-size:12.5px; color:var(--ink3); line-height:1.55}
.kw{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px}
.kw span{
  padding:2px 7px; border-radius:var(--r); background:var(--well);
  border:1px solid var(--rule); font-size:11.5px; color:var(--ink2);
}
.drawer-acts{display:flex; gap:var(--sp-2); align-items:flex-start; margin-left:auto}
.scorebtn{
  appearance:none; border:0; background:transparent; padding:0; cursor:pointer;
  display:flex; align-items:center; gap:11px; text-align:left;
}
.scorebtn:hover .scale-num{color:var(--signal)}

/* pie de la tabla */
.footrail{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:11px 14px; border-top:1px solid var(--rule2);
  font-size:12px; color:var(--ink3); background:var(--p1);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.footrail b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.pager{display:flex; align-items:center; gap:6px; margin-left:auto}

/* ═══════════════ filas en celular ═══════════════ */
.mlist{display:none; border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden}
.mruler{
  padding:10px 13px 9px; border-bottom:1px solid var(--rule2); background:var(--p1);
  color:var(--ink3);
  font-size:9.5px; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
  font-variation-settings:'wdth' 82;
}
.mruler .rscale{width:88px}
.mrow{
  display:grid; grid-template-columns:minmax(0,1fr) 20px; column-gap:12px; align-items:center;
  padding:13px; border-bottom:1px solid var(--rule);
  background:var(--p1); text-decoration:none; min-height:52px;
}
.mrow:last-child{border-bottom:0}
.mrow > .top,.mrow > .cargo,.mrow > .sub,.mrow > .meta{grid-column:1}
.mrow .go{grid-column:2; grid-row:1 / span 4; align-self:stretch; display:grid; place-items:center; color:var(--ink3)}
.mrow:active{background:var(--p2)}
.mrow:active .go{color:var(--brand)}
.mrow .top{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.mrow .scale-num{font-size:15px}
.mrow .scale-wrap{width:88px}
.mrow .meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:7px}
.mrow .meta .remu{font-size:12.5px}
.mrow .meta .dot{width:2px; height:2px; border-radius:50%; background:var(--rule2)}

@media (max-width:760px){
  .tablewrap{display:none}
  .mlist{display:block}
  .readout{padding-top:var(--sp-4)}
  .greet .num{font-size:38px}
  .controls{margin-left:0; width:100%}
  .controls .field{flex:1; min-width:130px}
  .controls .well.wide{min-width:0; width:100%}
}

/* ═══════════════ detalle de la oferta ═══════════════ */
.det{padding:var(--sp-5); background:var(--p1); border-bottom:1px solid var(--rule)}
.det-head{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start}
.det-main{flex:1; min-width:280px}
.det-main h1{
  margin:0 0 5px; font-size:clamp(21px,3vw,26px); line-height:1.14; font-weight:700;
  letter-spacing:-.024em; font-variation-settings:'wdth' 104; max-width:26ch; text-wrap:balance;
}
.det-main .org{font-size:14px; color:var(--ink2)}
.det-meter{
  flex:none; margin-left:auto; width:258px; max-width:100%;
  padding:14px 16px 15px; background:var(--p0);
  border:1px solid var(--rule2); border-radius:var(--r);
}
.det-meter .mlab{color:var(--ink3); margin-bottom:7px}
.det-meter .mnum{
  font-size:34px; font-weight:700; line-height:1; letter-spacing:-.03em;
  font-variation-settings:'wdth' 108; font-variant-numeric:tabular-nums; margin-bottom:9px;
}
.det-meter .scale-wrap{width:100%}
.det-meter .rscale{margin-left:0; width:100%; margin-top:5px}
.det-meter .chan{grid-template-columns:60px 42px minmax(0,1fr)}
.det-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:1px; background:var(--p1); margin:20px 0 0;
}
/* box-shadow en vez de fondo compartido: con un número impar de datos, la
   celda que falta no deja un rectángulo del color de la regla. */
.det-facts > div{background:var(--p1); padding:11px 13px; box-shadow:0 0 0 1px var(--rule)}
.det-facts dt{color:var(--ink3); margin-bottom:3px}
.det-facts dd{margin:0; font-size:13.5px; color:var(--ink); font-weight:550}
.det-body{padding:var(--sp-5); background:var(--p1)}
.det-body h2{margin:0 0 10px; color:var(--ink3); font-size:9.5px; font-weight:650;
  letter-spacing:.13em; text-transform:uppercase; font-variation-settings:'wdth' 82}
.det-actions{
  display:flex; gap:var(--sp-2); flex-wrap:wrap; padding:var(--sp-4) var(--sp-5);
  background:var(--p1); border-top:1px solid var(--rule2);
  position:sticky; bottom:0; border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* ═══════════════ búsquedas ═══════════════ */
.scards{display:grid; gap:var(--sp-3)}
.scard{background:var(--p1); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden}
.scard-top{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:12px 15px; border-bottom:1px solid var(--rule)}
.scard-top .made{font-size:12px; color:var(--ink3); margin-left:auto}
.scard-body{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--rule)}
.scard-body > div{background:var(--p1); padding:11px 15px}
.scard-body dt{color:var(--ink3); margin-bottom:5px}
.scard-body dd{margin:0; display:flex; flex-wrap:wrap; gap:4px}
.scard-body dd.plain{font-size:13.5px; color:var(--ink); font-weight:550; display:block}
.scard-acts{display:flex; gap:var(--sp-2); flex-wrap:wrap; padding:11px 15px; border-top:1px solid var(--rule)}
.scard.inactive .scard-body > div,.scard.inactive .scard-top{opacity:.6}

/* ═══════════════ tablas administrativas ═══════════════ */
table.grid{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:760px}
.grid thead th{
  text-align:left; padding:10px 13px; border-bottom:1px solid var(--rule2);
  color:var(--ink3); white-space:nowrap; background:var(--p1);
}
.grid tbody td{padding:10px 13px; border-bottom:1px solid var(--rule); font-size:13.5px}
.grid tbody tr:hover{background:var(--p2)}
.grid tbody tr:last-child td{border-bottom:0}
.grid td.num{text-align:right}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden}
.kpi{background:var(--p1); padding:14px 16px}
.kpi .k{color:var(--ink3); display:block; margin-bottom:6px}
.kpi .v{display:block; font-size:28px; font-weight:700; line-height:1; letter-spacing:-.03em;
  font-variation-settings:'wdth' 110; font-variant-numeric:tabular-nums}
.kpi .d{display:block; font-size:12px; color:var(--ink3); margin-top:5px}

/* ═══════════════ estados vacíos ═══════════════ */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:clamp(40px,8vw,72px) var(--sp-4); text-align:center;
  background:var(--p1); border:1px solid var(--rule); border-radius:var(--r-lg);
}
.empty .zero{
  font-size:44px; font-weight:700; line-height:1; letter-spacing:-.035em;
  font-variation-settings:'wdth' 112; color:var(--ink3); font-variant-numeric:tabular-nums;
}
.empty p{margin:0; max-width:44ch; color:var(--ink2); font-size:14px}

/* ═══════════════ acceso (login y afines) ═══════════════ */
.auth{min-height:100vh; display:grid; grid-template-columns:1fr}
.auth-art{display:none; position:relative; background:var(--p1); overflow:hidden}
/* La foto es atmósfera, no contenido: se atenúa y se oscurece hacia abajo
   para que el texto se lea y para que la interfaz que aparece dentro del
   monitor no compita con la real. */
.auth-art img{width:100%; height:100%; object-fit:cover; opacity:.34; filter:saturate(.65)}
.auth-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,17,21,.25) 0%, rgba(14,17,21,.10) 55%, rgba(14,17,21,.55) 100%);
}
.auth-form{display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,6vw,64px)}
.auth-box{width:100%; max-width:390px; margin:0 auto}
.auth-box .mark{font-size:17px; margin-bottom:var(--sp-6)}
.auth-box h1{margin:0 0 6px; font-size:24px; font-weight:700; letter-spacing:-.022em;
  font-variation-settings:'wdth' 106}
.auth-box .intro{margin:0 0 var(--sp-5); color:var(--ink2); font-size:14px}
.auth-box .form{gap:var(--sp-4)}
.auth-links{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-4); font-size:13px}
.auth-links a{color:var(--brand2)}
@media (min-width:880px){
  .auth{grid-template-columns:1fr 1fr}
  .auth-art{display:block}
}

/* ═══════════════ utilidades ═══════════════ */
.stack{display:flex; flex-direction:column; gap:var(--sp-4)}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mb-4{margin-bottom:var(--sp-4)}
.nowrap{white-space:nowrap}

/* ═══════════════ Tagify, vestido con los tokens del panel ═══════════════
   La librería es una dependencia funcional del formulario de búsquedas;
   acá sólo se le quitan los estilos de fábrica para que no rompa el sistema.
   Su hoja del CDN se carga con `vendor_css` (ver _head.html), o sea antes que
   ésta: sin ese orden gana la cascada de fábrica, porque los selectores son
   los mismos y con la misma especificidad. */
.tagify{
  --tag-bg:var(--well);
  --tag-hover:var(--p2);
  --tag-text-color:var(--ink);
  --tag-remove-bg:var(--alarm-bg);
  --tags-border-color:var(--rule2);
  --tags-hover-border-color:var(--rule2);
  --tags-focus-border-color:var(--focus);
  --tag-pad:3px 7px;
  --tag-inset-shadow-size:1.2em;
  background:var(--well);
  border:1px solid var(--rule2);
  border-radius:var(--r);
  padding:5px;
  min-height:38px;
  align-content:center;
}
.tagify:hover{border-color:var(--rule2)}
.tagify--focus{border-color:var(--focus); box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 25%,transparent)}
.tagify__tag > div{border-radius:var(--r); color:var(--ink)}
.tagify__tag > div::before{box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--p2) inset !important}
.tagify__tag:hover:not([readonly]) div::before{box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--rule) inset !important}
.tagify__tag-text{font-size:12.5px; color:var(--ink)}
.tagify__tag__removeBtn{color:var(--ink3)}
.tagify__tag__removeBtn:hover{background:var(--alarm); color:#fff}
.tagify__input{color:var(--ink); font-size:12.5px; padding:5px 6px}
.tagify__input::before{color:var(--ink3) !important; font-size:12.5px}
/* El menú de sugerencias se cuelga del <body>, fuera del formulario, así que
   hereda `color` del documento (tinta clara) mientras el fondo lo pone la
   librería. Sus variables se redeclaran acá sobre el propio elemento —no en
   :root— para que ganen aunque el orden de las hojas se rompa: si no, el panel
   queda blanco con texto claro encima y las opciones no se leen. */
.tagify__dropdown{
  --tagify-dd-bg-color:var(--p1);
  --tagify-dd-color-primary:var(--rule2);
  --tagify-dd-item-pad:6px 9px;
  z-index:60;
}
.tagify__dropdown .tagify__dropdown__wrapper{
  background:var(--p1); border:1px solid var(--rule2); border-radius:var(--r);
  box-shadow:var(--shadow); color:var(--ink);
}
.tagify__dropdown .tagify__dropdown__item{
  font-size:13px; border-radius:var(--r); padding:6px 9px; color:var(--ink);
}
/* La fila apuntada se marca como en las tablas: un paso más claro que el panel.
   --well iba al revés —más oscuro que el menú— y no se distinguía. */
.tagify__dropdown .tagify__dropdown__item:hover{background:var(--p2); color:var(--ink)}
/* La que sigue el teclado lleva además la regla ámbar del cajón de desglose,
   como inset para que el texto no se corra un par de píxeles al recorrer. */
.tagify__dropdown .tagify__dropdown__item--active{
  background:var(--p2); color:var(--ink);
  box-shadow:inset 2px 0 0 var(--signal-f);
}

/* cabeceras ordenables de las tablas administrativas */
.sortbtn{
  appearance:none; border:0; background:transparent; padding:0; cursor:pointer;
  color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit;
  display:inline-flex; align-items:center; gap:5px;
}
.sortbtn::after{
  content:''; width:0; height:0; opacity:.45;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
}
.sortbtn:hover{color:var(--ink)}

/* El input crudo, antes de que Tagify lo tome (o si el CDN no responde):
   sin esto queda con los estilos del navegador, blanco sobre el panel. */
.tagify-input{
  width:100%; min-height:38px; padding:8px 10px;
  background:var(--well); border:1px solid var(--rule2); border-radius:var(--r);
  color:var(--ink); font-size:12.5px;
}
.tagify-input::placeholder{color:var(--ink3)}