/* GE-Connect — panel de control.
   Misma paleta que el resto de documentos de la casa: papel hueso, tinta casi negra y un
   verde oliva de acento. Nada de azul corporativo.

   Tres decisiones que no son de gusto:
     · Modo oscuro de verdad, con las variables redefinidas y no con un filtro. El panel se
       mira de noche cuando algo va mal.
     · Cifras con `tabular-nums` para poder comparar columnas de numeros de un vistazo.
     · El color nunca lleva informacion solo: cada pildora lleva su palabra escrita. */

:root{
  --paper:#faf9f5; --surface:#ffffff; --sunk:#f2f1ea; --hover:#f6f5ee;
  --ink:#12150c; --body:#2f3328; --muted:#6b7060; --line:#deded3;
  --accent:#5f7a04; --accent-suave:#eef3d8; --lima:#d0fd71;
  --bien:#2c6e49; --bien-fondo:#e6f0e8;
  --mal:#a53a16; --mal-fondo:#f8e9e2;
  --atencion:#8a6d10; --atencion-fondo:#f6eed7;
  --info:#1d5c78; --info-fondo:#e2eef4;
  --sombra:0 1px 2px rgba(18,21,12,.05), 0 8px 24px -16px rgba(18,21,12,.25);
  --radio:10px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --paper:#14160f; --surface:#1b1e15; --sunk:#22261a; --hover:#262a1c;
    --ink:#f2f3e9; --body:#d3d6c6; --muted:#979c89; --line:#333828;
    --accent:#a8c64a; --accent-suave:#2a3117; --lima:#d0fd71;
    --bien:#7fc092; --bien-fondo:#1e2c22;
    --mal:#e09071; --mal-fondo:#33201a;
    --atencion:#d4b45c; --atencion-fondo:#302814;
    --info:#7fb5cd; --info-fondo:#16282f;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-tema="oscuro"]{
  --paper:#14160f; --surface:#1b1e15; --sunk:#22261a; --hover:#262a1c;
  --ink:#f2f3e9; --body:#d3d6c6; --muted:#979c89; --line:#333828;
  --accent:#a8c64a; --accent-suave:#2a3117;
  --bien:#7fc092; --bien-fondo:#1e2c22;
  --mal:#e09071; --mal-fondo:#33201a;
  --atencion:#d4b45c; --atencion-fondo:#302814;
  --info:#7fb5cd; --info-fondo:#16282f;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--ink);letter-spacing:-.015em;margin:0}
h1{font-size:clamp(23px,4vw,30px);line-height:1.15;font-weight:700}
h2{font-size:15px;line-height:1.3;font-weight:650}
h3{font-size:14px;font-weight:650}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
.num,.n,td.num,th.num{font-variant-numeric:tabular-nums}

/* ---------- estructura ---------- */
.barra-sup{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.barra-sup .interior{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:18px; min-height:56px; flex-wrap:wrap;
}
.marca{font-weight:700;color:var(--ink);letter-spacing:-.02em;font-size:16px;white-space:nowrap}
.marca span{color:var(--accent)}
/* ⚠️ `nowrap` y no `wrap`: al envolver, entre 700 y 900 px «Ajustes» caia a una segunda
   linea el solo y la barra quedaba partida. Si no cabe, se desliza. */
nav.menu{display:flex;gap:2px;flex:1;flex-wrap:nowrap;margin-left:6px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
nav.menu::-webkit-scrollbar{display:none}
nav.menu a{
  padding:7px 11px;border-radius:7px;color:var(--muted);font-weight:550;font-size:14px;
  white-space:nowrap;
}
nav.menu a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
nav.menu a.activo{background:var(--accent-suave);color:var(--accent)}
.yo{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.yo .quien{color:var(--ink);font-weight:600}

main{max-width:1180px;margin:0 auto;padding:26px 20px 80px}
.cabecera-pagina{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  justify-content:space-between;margin-bottom:22px;
}
.cabecera-pagina .lede{color:var(--muted);margin:7px 0 0;max-width:62ch;font-size:14.5px}

.rejilla{display:grid;gap:16px}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ancho-total{grid-column:1/-1}

/* ---------- tarjetas ---------- */
.tarjeta{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;position:relative;
}
.tarjeta .cab{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface);
}
.tarjeta .cuerpo{padding:18px}
.tarjeta .cuerpo > :first-child{margin-top:0}
.tarjeta .cuerpo > :last-child{margin-bottom:0}
.tarjeta .pie{
  padding:12px 18px;border-top:1px solid var(--line);background:var(--sunk);
  font-size:13.5px;color:var(--muted);
}
.tarjeta .acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Franja de severidad: se ve desde lejos, antes de leer nada. */
.franja-bien::before,.franja-mal::before,.franja-atencion::before,.franja-info::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
}
.franja-bien::before{background:var(--bien)}
.franja-mal::before{background:var(--mal)}
.franja-atencion::before{background:var(--atencion)}
.franja-info::before{background:var(--info)}

/* ---------- cifras ---------- */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radio);overflow:hidden;margin-bottom:18px;
}
.cifra{background:var(--surface);padding:16px 18px 15px}
.cifra .n{
  font-size:29px;line-height:1.05;font-weight:700;color:var(--ink);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.cifra .n .u{font-size:15px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0}
.cifra .l{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.35}
.cifra .p{font-size:12.5px;color:var(--muted);margin-top:7px;opacity:.85}
.cifra.mal .n{color:var(--mal)}
.cifra.bien .n{color:var(--bien)}
.cifra.atencion .n{color:var(--atencion)}

/* ---------- pildoras ---------- */
.pildora{
  display:inline-block;font-size:11.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;white-space:nowrap;
  border:1px solid transparent;
}
.pildora.bien{background:var(--bien-fondo);color:var(--bien)}
.pildora.mal{background:var(--mal-fondo);color:var(--mal)}
.pildora.atencion{background:var(--atencion-fondo);color:var(--atencion)}
.pildora.info{background:var(--info-fondo);color:var(--info)}
.pildora.neutro{background:var(--sunk);color:var(--muted);border-color:var(--line)}
.pildora.pausada{background:var(--sunk);color:var(--ink);border-color:var(--ink)}

/* ---------- tablas ---------- */
.tablawrap{overflow-x:auto;margin:0 -18px;padding:0 18px;
  /* Sombra al borde derecho mientras quede tabla por ver: en el movil, si no, nadie sabe
     que la tabla sigue. */
  background:linear-gradient(to right,var(--surface) 30%,transparent),
             linear-gradient(to left,var(--surface) 30%,transparent) 100% 0,
             linear-gradient(to right,rgba(0,0,0,.12),transparent 14px),
             linear-gradient(to left,rgba(0,0,0,.12),transparent 14px) 100% 0;
  background-repeat:no-repeat; background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;}
/* `min-width` fijo y no `min(100%,520px)`: con el segundo, en un movil la tabla se comprimia
   al ancho de la pantalla y cada celda se partia en cinco lineas. Asi se mantiene legible y el
   contenedor la desliza en horizontal, que es lo unico que puede hacer scroll lateral. */
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
/* Para tablas de pocas columnas y valores cortos: no necesitan 520 px y así no obligan a
   deslizar dentro de una tarjeta a media anchura. */
table.compacta{min-width:340px}
th{
  font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--hover)}
/* 🔴 Las columnas numericas se alinean a la derecha para poder compararlas por la coma. Lo
   que NO se puede hacer —y fue el fallo— es ponerles `padding-right:0`: eso borra el hueco
   con la columna siguiente y dos cabeceras seguidas se leen como una sola palabra
   («TOTALPROPORCION»). El borde derecho lo flushea solo la ULTIMA celda de la fila. */
td.num,th.num{text-align:right;padding-left:28px;font-variant-numeric:tabular-nums}
th:last-child,td:last-child{padding-right:0}
.tenue{color:var(--muted)}
.fuerte{color:var(--ink);font-weight:600}
.vacio{color:var(--muted);font-style:italic;margin:6px 0}

/* ---------- barras ---------- */
.barra{display:flex;align-items:center;gap:10px;margin:7px 0}
.barra .rail{flex:1;height:7px;background:var(--sunk);border-radius:100px;overflow:hidden}
.barra .rail i{display:block;height:100%;border-radius:100px;background:var(--accent)}
.barra .rail i.mal{background:var(--mal)}
.barra .rail i.atencion{background:var(--atencion)}
.barra .rail i.bien{background:var(--bien)}
.barra .pct{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);
  min-width:56px;text-align:right;font-weight:600}
.barra .be{font-size:13px;color:var(--muted);min-width:96px}

/* ---------- avisos ---------- */
.aviso{
  border-radius:8px;padding:11px 14px;font-size:14px;margin:0 0 14px;
  border-left:3px solid;line-height:1.5;
}
.aviso.atencion{background:var(--atencion-fondo);color:var(--atencion);border-color:var(--atencion)}
.aviso.mal{background:var(--mal-fondo);color:var(--mal);border-color:var(--mal)}
.aviso.bien{background:var(--bien-fondo);color:var(--bien);border-color:var(--bien)}
.aviso.info{background:var(--info-fondo);color:var(--info);border-color:var(--info)}
.aviso a{color:inherit;text-decoration:underline}

/* ---------- botones y formularios ---------- */
.boton{
  display:inline-block;font:inherit;font-size:14px;font-weight:600;border:1px solid var(--line);
  border-radius:8px;padding:9px 16px;background:var(--surface);color:var(--ink);
  cursor:pointer;white-space:nowrap;
}
.boton:hover{background:var(--hover);text-decoration:none}
.boton.principal{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.boton.principal:hover{opacity:.87;background:var(--ink)}
.boton.peligro{color:var(--mal);border-color:var(--mal)}
.boton.peligro:hover{background:var(--mal-fondo)}
.boton.tenue{color:var(--muted)}
.boton:disabled{opacity:.45;cursor:not-allowed}
.boton.menudo{padding:5px 11px;font-size:13px}

.campo{margin-bottom:15px}
.campo label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px}
.campo small{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink);
}
.campo textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;
  resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent);
}
.fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}

.definiciones{margin:0;display:grid;gap:0}
.definiciones > div{
  display:grid;grid-template-columns:minmax(130px,34%) 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.definiciones > div:last-child{border-bottom:0}
.definiciones dt{font-size:13px;color:var(--muted)}
.definiciones dd{margin:0;color:var(--ink);font-size:14px;word-break:break-word}

/* ---------- graficas ---------- */
.gr{margin:0}
.gr .gt{font-size:13px;color:var(--muted);margin-bottom:10px}
.gr svg{width:100%;height:auto;display:block;overflow:visible}
.gr .rejilla{stroke:var(--line);stroke-width:1}
.gr .eje{fill:var(--muted);font-size:10.5px;font-family:inherit}
.gr .linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr .linea.s0{stroke:var(--accent)} .gr .area.s0{fill:var(--accent);opacity:.10}
.gr .linea.s1{stroke:var(--info)}   .gr .area.s1{fill:var(--info);opacity:.08}
.gr .linea.s2{stroke:var(--mal)}    .gr .area.s2{fill:var(--mal);opacity:.07}
.gr .b{fill:var(--accent)}
.gr .b.mal{fill:var(--mal)} .gr .b.atencion{fill:var(--atencion)} .gr .b.bien{fill:var(--bien)}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.leyenda .clave{display:flex;align-items:center;gap:6px}
.leyenda .clave::before{content:"";width:11px;height:3px;border-radius:2px;background:var(--muted)}
.leyenda .clave.s0::before{background:var(--accent)}
.leyenda .clave.s1::before{background:var(--info)}
.leyenda .clave.s2::before{background:var(--mal)}

/* ---------- registro de actividad ---------- */
.linea-tiempo{list-style:none;margin:0;padding:0}
.linea-tiempo li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);
}
.linea-tiempo li:last-child{border-bottom:0}
.linea-tiempo .cuando{font-size:12.5px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:82px}
.linea-tiempo .que{font-size:14px;color:var(--body);line-height:1.45}
.linea-tiempo .que .quien{color:var(--ink);font-weight:600}
.linea-tiempo .que .accion{font-size:12px;color:var(--muted);margin-left:6px}

/* ---------- entrar ---------- */
.entrar{display:grid;place-items:center;min-height:100vh;padding:24px}
.entrar .caja{max-width:24rem;width:100%}

/* ---------- previsualizacion de plantilla ---------- */
.previsualizacion{
  width:100%;height:620px;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.editor-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.editor-dos{grid-template-columns:1fr}}

/* ---------- movil ---------- */
@media (max-width:700px){
  main{padding:18px 14px 70px}
  .barra-sup .interior{padding:0 14px;gap:10px}
  /* `flex:0 0 100%` y no `width:100%`: con el `flex:1` de la regla base, el menu se quedaba
     en la misma linea que la marca y se salia por la derecha. Se vio en el movil, no leyendo. */
  nav.menu{order:3;flex:0 0 100%;margin:0 0 8px;overflow-x:auto;flex-wrap:nowrap;
    padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .cifra .n{font-size:25px}
  /* Con dos columnas y un numero impar de cifras queda un hueco. La ultima ocupa la fila. */
  .cifra:last-child:nth-child(odd){grid-column:1/-1}
  .tablawrap{margin:0 -14px;padding:0 14px}
  .tarjeta .cuerpo{padding:14px}
  .definiciones > div{grid-template-columns:1fr;gap:3px}
  .yo .quien{display:none}
}

/* ---------- el menú, a su propia fila antes de llegar al móvil ----------
   Con nueve secciones el menú deja de caber junto a la marca y el usuario bastante antes de
   los 700 px: se comía el nombre de la última sección y se solapaba con el usuario. A partir
   de aquí baja a su propia línea y, si aun así no cabe, se desliza.
   ⚠️ `flex:0 0 100%` y no `width:100%`: con el `flex:1` de la regla base no bajaba. */
@media (max-width:1080px){
  .barra-sup .interior{padding-block:8px}
  nav.menu{order:3;flex:0 0 100%;margin:0;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .yo{margin-left:auto}
}

@media print{
  .barra-sup,.acciones,.boton{display:none}
  .tarjeta{box-shadow:none;break-inside:avoid}
}


/* =========================================================================================
   Piezas de informe
   =========================================================================================
   El color de las series sale de aqui y de ningun otro sitio. Si algun dia hay que cambiar
   la paleta de las graficas, es este bloque y nada mas. */

:root{
  --s-a:var(--accent); --s-b:var(--info); --s-c:#8a6d10; --s-d:#7a4e8f;
  --s-e:#2c6e49; --s-f:#a53a16;
}

/* ---------- embudo ---------- */
.embudo .gt{font-size:13px;color:var(--muted);margin:0 0 14px}
.embudo ol{list-style:none;margin:0;padding:0}
.embudo li{margin-bottom:14px}
.embudo li:last-child{margin-bottom:0}
.embudo .eti{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.embudo .eti small{color:var(--muted);font-size:12.5px}
.embudo .eti{font-size:13.5px;font-weight:600;color:var(--ink)}
.embudo .linea{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.embudo .tira{height:26px;background:var(--sunk);border-radius:6px;overflow:hidden}
.embudo .tira i{display:block;height:100%;border-radius:6px;background:var(--accent);
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.embudo .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);font-size:16px;
  min-width:64px;text-align:right}
.embudo .pc{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:52px;text-align:right}
.embudo .caida{display:inline-block;margin-top:5px;font-size:12px;color:var(--mal);
  font-variant-numeric:tabular-nums;cursor:help}
.embudo li.p0 .tira i{opacity:1}
.embudo li.p1 .tira i{opacity:.9}
.embudo li.p2 .tira i{opacity:.8}
.embudo li.p3 .tira i{opacity:.7}
.embudo li.p4 .tira i{opacity:.62}
.embudo li.p5 .tira i{opacity:.55}

/* ---------- ranking ---------- */
.ranking .gt{font-size:13px;color:var(--muted);margin:0 0 12px}
.ranking ul{list-style:none;margin:0;padding:0}
.ranking li{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;gap:12px;
  align-items:center;padding:7px 0}
.ranking li + li{border-top:1px solid var(--line)}
.ranking .eti{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ranking .tira{height:9px;background:var(--sunk);border-radius:100px;overflow:hidden}
.ranking .tira i{display:block;height:100%;border-radius:100px;background:var(--accent);
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.ranking .tira i.mal{background:var(--mal)}
.ranking .tira i.atencion{background:var(--atencion)}
.ranking .tira i.info{background:var(--info)}
.ranking .v{font-size:13.5px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- anillo ---------- */
.anillo .gt{font-size:13px;color:var(--muted);margin:0 0 12px}
.anillo .cuerpo{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.anillo svg{width:140px;height:140px;flex:0 0 auto}
.anillo .t{transition:stroke-width .18s ease}
.anillo .t:hover{stroke-width:21}
.anillo .t.a{stroke:var(--s-a)} .anillo .t.b{stroke:var(--s-b)} .anillo .t.c{stroke:var(--s-c)}
.anillo .t.d{stroke:var(--s-d)} .anillo .t.e{stroke:var(--s-e)} .anillo .t.f{stroke:var(--s-f)}
.anillo text.c{fill:var(--ink);font:700 21px/1 inherit;font-variant-numeric:tabular-nums}
.anillo text.cp{fill:var(--muted);font:400 10px/1 inherit;letter-spacing:.08em;
  text-transform:uppercase}
.leyenda-anillo{list-style:none;margin:0;padding:0;flex:1;min-width:160px}
.leyenda-anillo li{display:grid;grid-template-columns:10px 1fr auto auto;gap:9px;
  align-items:center;padding:5px 0;font-size:13.5px}
.leyenda-anillo li + li{border-top:1px solid var(--line)}
.leyenda-anillo i{width:10px;height:10px;border-radius:3px}
.leyenda-anillo i.a{background:var(--s-a)} .leyenda-anillo i.b{background:var(--s-b)}
.leyenda-anillo i.c{background:var(--s-c)} .leyenda-anillo i.d{background:var(--s-d)}
.leyenda-anillo i.e{background:var(--s-e)} .leyenda-anillo i.f{background:var(--s-f)}
.leyenda-anillo span{color:var(--body);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.leyenda-anillo b{color:var(--ink);font-variant-numeric:tabular-nums}
.leyenda-anillo small{color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px;
  text-align:right}

/* ---------- chispa ---------- */
.chispa{width:90px;height:22px;display:inline-block;vertical-align:middle;overflow:visible}
.chispa polyline{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.chispa circle{r:2.2}
.chispa.sube polyline{stroke:var(--bien)} .chispa.sube circle{fill:var(--bien)}
.chispa.baja polyline{stroke:var(--mal)}  .chispa.baja circle{fill:var(--mal)}
.chispa.vacia{color:var(--muted);width:auto}

/* ---------- barras por hora ---------- */
.gr.horas .guia{stroke:var(--lima);stroke-width:1.5;stroke-dasharray:3 4;opacity:.65}
.gr.horas .b{fill:var(--accent);opacity:.55;transition:opacity .15s ease}
.gr.horas .b:hover{opacity:1}
.gr.horas .b.destacada{fill:var(--lima);opacity:1}
.leyenda .clave.destacada::before{background:var(--lima)}

/* ---------- medidor ---------- */
.medidores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  justify-items:center}
.medidor{text-align:center;width:100%;max-width:180px}
.medidor svg{width:100%;height:auto}
/* ⚠️ `--line` y no `--sunk`: en modo oscuro el hundido y la superficie de la tarjeta se
   diferencian en tres puntos de luminosidad, así que el carril del medidor no se veía y el
   arco de color parecía flotar sin referencia. */
.medidor .rail{stroke:var(--line)}
.medidor .valor{stroke:var(--accent);stroke-linecap:round;
  transition:stroke-dasharray .6s cubic-bezier(.22,.61,.36,1)}
.medidor.bien .valor{stroke:var(--bien)}
.medidor.atencion .valor{stroke:var(--atencion)}
.medidor.mal .valor{stroke:var(--mal)}
.medidor text.v{fill:var(--ink);font:700 20px/1 inherit;font-variant-numeric:tabular-nums}
.medidor .l{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.3}


/* ---------- lista de comprobación antes de aprobar ---------- */
.revision{margin-bottom:16px}
.comprobaciones{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.comprobaciones li{background:var(--surface);padding:12px 14px 12px 34px;position:relative}
.comprobaciones li::before{
  position:absolute;left:12px;top:12px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;
}
.comprobaciones li.bien::before{content:"✓";background:var(--bien-fondo);color:var(--bien)}
.comprobaciones li.atencion::before{content:"!";background:var(--atencion-fondo);
  color:var(--atencion)}
.comprobaciones li.mal::before{content:"×";background:var(--mal-fondo);color:var(--mal);
  font-size:13px}
.comprobaciones b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.comprobaciones span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}

/* ---------- micro-interacciones ----------
   Cortas y solo donde dicen algo: que un botón responde, que una fila se puede pulsar. Nada
   de animaciones de entrada: el panel se abre para mirar un número, no para verlo aparecer.
   Y todo se apaga si el sistema pide menos movimiento. */
.boton,.pildora,nav.menu a,.tarjeta,tbody tr{transition:background-color .14s ease,
  border-color .14s ease,color .14s ease,transform .14s ease,box-shadow .18s ease}
.boton:active{transform:translateY(1px)}
.tarjeta:hover{box-shadow:0 1px 2px rgba(18,21,12,.06),0 14px 34px -20px rgba(18,21,12,.4)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.barra .rail i{transition:width .5s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ---------- subtítulos dentro de una tarjeta ---------- */
h3.sub{font-size:13px;font-weight:650;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;margin:22px 0 12px;padding-top:16px;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tarjeta .cuerpo > h3.sub:first-child{margin-top:0;padding-top:0;border-top:0}
h3.sub .mono{text-transform:none;letter-spacing:0;font-weight:400}

/* ---------- interruptor de parada ---------- */
.parada .cuerpo p{margin:0 0 14px;max-width:70ch}
.parada .campo{max-width:520px}

/* ---------- casillas de permisos ---------- */
.casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.casilla{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  transition:border-color .14s ease,background-color .14s ease}
.casilla:hover{border-color:var(--accent);background:var(--hover)}
.casilla input{margin:2px 0 0;accent-color:var(--accent);flex:0 0 auto}
.casilla:has(input:checked){border-color:var(--accent);background:var(--accent-suave)}
.casilla b{display:block;font-size:13px;color:var(--ink);font-weight:600;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.casilla small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}

/* ---------- un secreto que se enseña una sola vez ---------- */
pre.secreto{background:var(--sunk);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  color:var(--ink);overflow-x:auto;white-space:pre-wrap;word-break:break-all;
  margin:0 0 14px;user-select:all}
pre.secreto.pequeno{font-size:12.5px;line-height:1.55;user-select:text}

code.corto{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}

/* ---------- etiquetas de variable ---------- */
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.etiqueta{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--accent-suave);color:var(--accent);padding:4px 9px;border-radius:6px;
  border:1px solid transparent}
.etiqueta.sin-valor{background:var(--atencion-fondo);color:var(--atencion);
  border-color:var(--atencion)}
.etiqueta.sin-valor::after{content:" · sin ejemplo";opacity:.75;font-size:11px}

/* ---------- hitos de un envío ---------- */
.hitos{list-style:none;margin:0;padding:0}
.hitos li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0 9px 20px;
  position:relative;align-items:baseline}
.hitos li::before{content:"";position:absolute;left:3px;top:15px;width:9px;height:9px;
  border-radius:50%;background:var(--line);border:2px solid var(--surface);z-index:1}
.hitos li::after{content:"";position:absolute;left:7px;top:22px;bottom:-9px;width:1px;
  background:var(--line)}
.hitos li:last-child::after{display:none}
.hitos li.hecho::before{background:var(--bien)}
.hitos li.pendiente b,.hitos li.pendiente .cuando{color:var(--muted);font-weight:500}
.hitos .cuando{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hitos b{color:var(--ink);font-size:13.5px}


/* ---------- estados vacíos ----------
   No son un «no hay nada»: dicen qué es esto, por qué está vacío y cuál es el paso siguiente. */
.hueco{text-align:center;padding:34px 20px;color:var(--muted)}
.hueco .t{font-size:15.5px;color:var(--ink);font-weight:600;margin:0 0 8px}
.hueco .e{font-size:14px;line-height:1.6;margin:0 auto;max-width:52ch}
.hueco .acciones{justify-content:center;margin-top:18px}

/* ---------- paginación ---------- */
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;
  flex-wrap:wrap}
.paginacion .boton[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}


/* =========================================================================================
   Pulido final
   ========================================================================================= */

/* ---------- jerarquía en la fila de cifras ----------
   Las cinco cifras no valen lo mismo. La primera es la que se viene a mirar, así que se le
   da tamaño y las demás se apoyan en ella. Antes eran cinco bloques idénticos y el ojo no
   sabía por dónde empezar. */
.cifras .cifra:first-child{background:var(--surface)}
.cifras .cifra:first-child .n{font-size:35px;letter-spacing:-.03em}
.cifras .cifra:first-child .l{font-size:13.5px;color:var(--body)}
@media (max-width:700px){.cifras .cifra:first-child .n{font-size:30px}}

/* ---------- la barra superior se despega del contenido ---------- */
.barra-sup{box-shadow:0 1px 0 var(--line),0 6px 18px -14px rgba(18,21,12,.35)}
nav.menu a.activo{background:var(--accent-suave);color:var(--accent);font-weight:650}

/* ---------- filas de tabla que llevan a algún sitio ---------- */
tbody tr:has(a[href]):hover{cursor:default}
tbody tr:has(a[href]):hover a[href]{text-decoration:underline}

/* ---------- las barras crecen al cargar ----------
   Medio segundo, una sola vez y sin rebote. No es un adorno: enseña que la barra representa
   una proporción y no un bloque de color. Se apaga entero si el sistema pide menos
   movimiento — la regla está más arriba y cubre también esto. */
@keyframes ge-crecer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.embudo .tira i,.ranking .tira i,.barra .rail i{
  transform-origin:left center;
  animation:ge-crecer .55s cubic-bezier(.22,.61,.36,1) both;
}
.medidor .valor{animation:ge-dibujar .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes ge-dibujar{from{stroke-dasharray:0 144.51}}
.anillo .t{animation:ge-girar .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes ge-girar{from{opacity:0}to{opacity:1}}

/* ---------- el aviso de la parte de arriba pesa menos cuando es informativo ---------- */
.aviso.info{border-left-width:3px}

/* ---------- el pie de una tarjeta, más tranquilo ---------- */
.tarjeta .pie code{font-size:.85em;background:var(--surface)}