:root{
  /* Los grises se movieron de cálidos a fríos con una pizca de azul. Es un
     cambio chico pero es lo que separa un documento de oficina de algo que
     parece producto: el papel deja de verse amarillento y los colores de las
     empresas resaltan contra él. */
  /* EL FONDO ES LO QUE DA PROFUNDIDAD. Estaba en #f5f6f8 —casi blanco—, y
     contra tarjetas blancas eso no separa nada: la pantalla se veía color
     hueso y vacía, sin importar cuánto color tuviera el contenido. Bajarlo a
     un gris azulado de verdad es el cambio que hace que las tarjetas
     floten y que el conjunto se lea como producto y no como documento. */
  --fondo:#e8ebf1; --tarjeta:#ffffff; --tinta:#0e131c; --tinta2:#414b5c;
  --tinta3:#78839a; --linea:#d5dae4; --acento:#232c47;
  /* Las dos superficies de dentro de una tarjeta:
       --papel   lo que va ENCIMA del fondo y debe verse macizo (tarjetas)
       --fondo2  lo que va HUNDIDO dentro de una tarjeta (chips, barras)
     Faltaban, y un `background:var(--…)` que no existe no pinta nada: las
     tarjetas de la bandeja se quedaban transparentes y la pantalla parecía
     a medio cargar. */
  --papel:#ffffff; --fondo2:#eff1f6;
  --bien:#0f9d58; --atencion:#f0a020; --grave:#d64545;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sombra-alta:0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.05);
  --radio:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']){--fondo:#0f141c;--tarjeta:#1a212c;--tinta:#e9edf4;--tinta2:#a3aec0;
        --tinta3:#727f95;--linea:#2b3441;
        /* En oscuro se invierte el sentido: lo que sobresale aclara, lo
           hundido oscurece. Un mismo par de valores para los dos modos
           dejaría las tarjetas blancas sobre fondo negro. */
        --papel:#212a37;--fondo2:#141a23;
        --sombra:0 1px 3px rgba(0,0,0,.4);
        --sombra-alta:0 4px 12px rgba(0,0,0,.5);}
}
:root[data-tema='oscuro']{--fondo:#0f141c;--tarjeta:#1a212c;--tinta:#e9edf4;--tinta2:#a3aec0;
        --tinta3:#727f95;--linea:#2b3441;
        /* En oscuro se invierte el sentido: lo que sobresale aclara, lo
           hundido oscurece. Un mismo par de valores para los dos modos
           dejaría las tarjetas blancas sobre fondo negro. */
        --papel:#212a37;--fondo2:#141a23;
        --sombra:0 1px 3px rgba(0,0,0,.4);
        --sombra-alta:0 4px 12px rgba(0,0,0,.5);}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  /* Se pide primero la tipografía de interfaz del sistema —en Windows es
     Segoe UI Variable, que es notablemente más fina que la clásica— y se
     activan las ligaduras y el kerning, que es lo que hace que el texto se
     vea compuesto y no tecleado. */
  font-family:"Segoe UI Variable Display","Segoe UI Variable Text",
    -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,
    "Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

/* Las cifras siempre en ancho fijo: columnas de dinero que no bailan al
   cambiar un dígito es de lo que más distingue una pantalla cuidada. */
.n,.monto,.hero-cifra .n,.tile .n,td.n,.g-monto,.eg-monto,.grupo-monto{
  font-variant-numeric:tabular-nums lining-nums}

header{background:var(--tarjeta);border-bottom:1px solid var(--linea);padding:13px 24px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.4) blur(8px)}
header .marca{font-weight:700;letter-spacing:-.02em;font-size:15.5px;
  display:flex;align-items:center;gap:9px}
header nav{display:flex;gap:4px;margin-left:auto;align-items:center;font-size:13.5px}
header nav a{padding:6px 11px;border-radius:8px;color:var(--tinta2);
  font-weight:550;transition:background .12s,color .12s}
header nav a:hover{background:var(--fondo);color:var(--tinta);text-decoration:none}
header .quien{color:var(--tinta3);font-size:12.5px;margin-left:10px;
  max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{max-width:900px;margin:0 auto;padding:28px 18px 60px}
h1{font-size:23px;margin:0 0 6px;letter-spacing:-.022em;font-weight:700}
h2{letter-spacing:-.015em}
.sub{color:var(--tinta2);margin:0 0 24px;font-size:14.5px}

.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px 24px;margin-bottom:20px;
  box-shadow:var(--sombra)}
.tarjeta.acento{border-top:4px solid var(--acento)}

.tiles{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.tile{flex:1 1 140px;border:1px solid var(--linea);border-radius:9px;padding:12px 14px;
  background:var(--fondo)}
.tile .n{font-size:27px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .et{font-size:12.5px;color:var(--tinta2);margin-top:3px;display:flex;
  align-items:center;gap:6px}
.tile .mo{font-size:12.5px;color:var(--tinta3);margin-top:5px;
  font-variant-numeric:tabular-nums}
.punto{width:9px;height:9px;border-radius:50%;display:inline-block}

.veredicto{position:relative;border-radius:12px;padding:20px 24px;margin-bottom:20px;color:#fff}
.veredicto h2{margin:0 0 4px;font-size:20px}
.veredicto p{margin:0;opacity:.93;font-size:14.5px}

.seccion{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta3);margin:0 0 10px;font-weight:600}
.item{border-top:1px solid var(--linea);padding:13px 0}
.cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.chip{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:20px;color:#fff;
  white-space:nowrap}
.tit{font-weight:600}
.veces{color:var(--tinta3);font-size:13px;margin-left:auto;
  font-variant-numeric:tabular-nums}
.inst{margin:7px 0 0;font-size:14.5px}
.detalle{margin:9px 0 0;padding-left:13px;border-left:2px solid var(--linea)}
.detalle li{list-style:none;font-size:13.5px;color:var(--tinta2);margin-bottom:5px}
.detalle b{color:var(--tinta);font-weight:600}

form.subida{border:2px dashed var(--linea);border-radius:12px;padding:34px 24px;
  text-align:center;background:var(--fondo)}
input[type=file]{font:inherit;max-width:100%}
input[type=email],input[type=password]{width:100%;padding:11px 13px;border-radius:9px;
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);font:inherit;
  margin-bottom:12px}
label{display:block;font-size:13px;color:var(--tinta2);margin-bottom:5px}
button{background:var(--acento);color:#fff;border:0;border-radius:9px;
  padding:11px 22px;font:inherit;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.12)}
.error{background:#fdecec;color:#9c0006;border-radius:9px;padding:11px 14px;
  margin-bottom:14px;font-size:14px}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .error{background:#3a1c1c;color:#ffb4b4}
}
:root[data-tema='oscuro'] .error{background:#3a1c1c;color:#ffb4b4}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--tinta2);font-weight:600;
  padding:6px 10px 8px 0;border-bottom:1px solid var(--linea)}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--linea);color:var(--tinta2)}
td b{color:var(--tinta)}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;
  border-radius:20px;color:#fff}

.insignias{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.insignia{border:1px solid var(--linea);border-radius:11px;padding:12px 14px;
  min-width:150px;flex:1 1 150px;background:var(--fondo)}
.insignia .ic{font-size:24px;line-height:1}
.insignia .nb{font-weight:650;font-size:14px;margin-top:5px}
.insignia .ds{font-size:12.5px;color:var(--tinta3);margin-top:2px}
.insignia.apagada{opacity:.38}
.racha{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.entrada{max-width:390px;margin:8vh auto}

.suplantando{background:#fab219;color:#3a2a00;padding:10px 22px;font-size:14px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.suplantando a{color:#3a2a00;font-weight:700;text-decoration:underline;margin-left:auto}
.aviso-formato{background:#fff6e0;border:1px solid #f2d68a;border-radius:11px;
  padding:14px 16px;margin-bottom:16px;font-size:14px;color:#6b4e00}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .aviso-formato{background:#2e2510;border-color:#5a4a1e;color:#f0d99a}
}
:root[data-tema='oscuro'] .aviso-formato{background:#2e2510;border-color:#5a4a1e;color:#f0d99a}
.opciones{display:flex;flex-direction:column;gap:9px;text-align:left;
  max-width:430px;margin:0 auto 18px}
.opcion{border:1px solid var(--linea);border-radius:10px;padding:11px 14px;
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:var(--tarjeta)}
.opcion input{margin-top:3px}
.opcion .nb{font-weight:600}
.opcion .ds{font-size:12.5px;color:var(--tinta3)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px 16px}
.rejilla input,.rejilla select{width:100%;padding:9px 11px;border-radius:8px;
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);font:inherit}
.aviso-ok{background:#e6f6e6;color:#0b5c0b;border-radius:9px;padding:11px 14px;
  margin-bottom:14px;font-size:14px}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .aviso-ok{background:#16301a;color:#a9e6ad}
}
:root[data-tema='oscuro'] .aviso-ok{background:#16301a;color:#a9e6ad}

button.peligro{background:transparent;color:var(--grave);border:1px solid var(--grave);
  padding:8px 16px;font-weight:600}
button.peligro:hover{background:var(--grave);color:#fff;filter:none}

/* ── Dos columnas: el trabajo a la izquierda, el ánimo a la derecha ── */
main:has(.columnas){max-width:1180px}
.columnas{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;
  align-items:start}
@media (max-width:900px){.columnas{grid-template-columns:1fr}}
.lateral{position:sticky;top:18px}
.tarjeta.compacta{padding:16px 18px}
.tarjeta.compacta .seccion{margin-bottom:12px}
.pieta{font-size:12px;color:var(--tinta3);margin:10px 0 0}

.mini-tiles{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px;font-size:13.5px;
  color:var(--tinta2)}
.mini-tiles b{font-size:20px;color:var(--tinta);font-variant-numeric:tabular-nums;
  margin-right:5px}
.mini-tiles span{display:block;font-size:12px;color:var(--tinta3)}

.obs{border-top:1px solid var(--linea);padding:12px 0}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acciones form{display:flex;gap:6px;margin:0}
.acciones .preguntar{flex:1 1 240px}
.acciones input{flex:1;padding:7px 10px;border-radius:7px;border:1px solid var(--linea);
  background:var(--fondo);color:var(--tinta);font:inherit;font-size:13px}
button.suave{background:transparent;color:var(--tinta2);border:1px solid var(--linea);
  padding:7px 13px;font-size:13px;font-weight:600;white-space:nowrap}
button.suave:hover{background:var(--acento);color:#fff;border-color:var(--acento);filter:none}
.respuesta{background:var(--fondo);border-left:3px solid var(--bien);border-radius:0 8px 8px 0;
  padding:9px 12px;margin-top:8px;font-size:13.5px}

/* ── Podio y ranking ── */
.podio div{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;
  margin-bottom:10px}
.podio .med{font-size:19px;line-height:1}
.podio b{font-size:13.5px;display:block}
.podio span:not(.med){font-size:11.5px;color:var(--tinta3);grid-column:2}
.tabla-rank{margin-top:12px;font-size:13px}
.tabla-rank td{padding:5px 6px 5px 0;border-bottom:1px solid var(--linea);
  color:var(--tinta2)}
.tabla-rank td:first-child{width:20px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.tabla-rank tr.yo td{color:var(--tinta);font-weight:650}

.chapas{display:flex;gap:7px;flex-wrap:wrap}
.chapa{font-size:21px;line-height:1;cursor:default}
.chapa.apagada{opacity:.22;filter:grayscale(1)}

textarea{width:100%;max-width:460px;padding:10px 12px;border-radius:9px;
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);
  font:inherit;font-size:14px;resize:vertical}
.novedad{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;
  color:var(--tinta2);margin-bottom:9px}
.novedad .ic{font-size:17px;line-height:1.2}
.novedad b{color:var(--tinta);display:block;font-size:13px}
.lista-insignias{display:flex;flex-direction:column;gap:9px}
.li-fila{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:start}
.li-fila .ic{font-size:18px;line-height:1.1}
.li-fila b{font-size:12.5px;display:block;color:var(--tinta)}
.li-fila span{font-size:11.5px;color:var(--tinta3)}
.li-fila.apagada .ic{opacity:.25;filter:grayscale(1)}
.li-fila.apagada b{color:var(--tinta3);font-weight:500}
.semana-pasada{border-top:1px solid var(--linea);margin-top:12px;padding-top:11px;
  font-size:12.5px;color:var(--tinta3)}
.semana-pasada b{color:var(--tinta2)}
.estado-obs{font-size:12.5px;color:var(--tinta3);font-style:italic}
.motivo-obs{display:flex;gap:6px;flex:1 1 260px}

.desglose{margin:8px 0 10px;font-size:13px}
.desglose summary{cursor:pointer;color:var(--acento);font-weight:600;font-size:13px}
.desglose dl{display:grid;grid-template-columns:190px 1fr;gap:5px 14px;margin:10px 0 0;
  padding:12px 14px;background:var(--fondo);border-radius:9px;
  border:1px solid var(--linea)}
.desglose dt{color:var(--tinta3);font-size:12px}
.desglose dd{margin:0;color:var(--tinta);font-size:12.5px;word-break:break-word}
.decidir{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.decidir input{flex:1 1 220px;padding:8px 11px;border-radius:8px;
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);
  font:inherit;font-size:13px}
.decidir button{font-size:13px;padding:8px 14px}

/* ── Encabezado de la semana y botón grande de subir ── */
.hero{background:var(--acento);color:#fff;border-radius:14px;padding:24px 28px;
  margin-bottom:18px}
.hero-etiqueta{margin:0 0 4px;font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;opacity:.75}
.hero-titulo{margin:0 0 10px;font-size:26px;letter-spacing:-.015em;color:#fff}
.hero-estado{margin:0;font-size:14.5px;opacity:.93}
.hero-estado a{color:#fff;text-decoration:underline}
.hero-estado .pill{margin-right:6px}

.subida-grande{background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:14px;padding:22px 24px 24px;margin-bottom:22px}
/* Los pasos numerados de «sube tu solicitud». Se llaman 'paso-guia' y no
   'paso' porque ese nombre ya lo usa la historia de una solicitud: cuando
   compartían clase, esta rejilla de 30px le caía encima a la historia y le
   aplastaba los nombres en una columna de tres letras. */
.paso-guia{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--linea)}
.paso-guia:first-child{padding-top:0}
.paso-guia .num{width:26px;height:26px;border-radius:50%;background:var(--acento);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700}
.paso-guia-cuerpo b{display:block;font-size:15px;margin-bottom:3px}
.paso-guia-cuerpo .ds{font-size:12.5px;color:var(--tinta3);font-weight:400}
.paso-guia-cuerpo input[type=file]{margin-top:9px;font-size:13.5px}
.paso-guia .opciones{margin:10px 0 0}
.extra{margin:14px 0 0;font-size:13.5px}
.extra summary{cursor:pointer;color:var(--acento);font-weight:600}
button.grande{display:block;width:100%;margin-top:18px;padding:16px 22px;
  font-size:16.5px;border-radius:11px;letter-spacing:-.01em}

/* ══════════════════════════════════════════════════════════════
   Tour de bienvenida
   ══════════════════════════════════════════════════════════════ */
.tour-fondo{position:fixed;inset:0;background:rgba(15,15,14,.72);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .25s}
.tour-fondo.visible{opacity:1;pointer-events:auto}
.tour-foco{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(15,15,14,.72),
  0 0 0 3px var(--atencion);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.tour-caja{position:fixed;z-index:92;max-width:370px;background:var(--tarjeta);
  border-radius:16px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.3);
  transition:all .3s cubic-bezier(.4,0,.2,1)}
.tour-caja h3{margin:0 0 6px;font-size:16.5px;letter-spacing:-.01em}
.tour-caja p{margin:0;font-size:14px;color:var(--tinta2);line-height:1.5}
.tour-pie{display:flex;align-items:center;gap:10px;margin-top:16px}
.tour-pasos{display:flex;gap:5px;margin-right:auto}
.tour-punto{width:7px;height:7px;border-radius:50%;background:var(--linea)}
.tour-punto.activo{background:var(--atencion);transform:scale(1.35)}
.tour-caja button{padding:9px 17px;font-size:13.5px;border-radius:9px}
.tour-caja .saltar{background:transparent;color:var(--tinta3);padding:9px 8px}
.tour-caja .saltar:hover{color:var(--tinta);filter:none}
.tour-cab{display:flex;gap:11px;align-items:flex-start}
.ayuda{background:transparent;border:0;color:var(--tinta3);font-size:13px;
  cursor:pointer;padding:0;text-decoration:underline}
.ayuda:hover{color:var(--tinta)}


/* ══════════════════════════════════════════════════════════════
   El ayudante de la esquina
   ══════════════════════════════════════════════════════════════ */
.ayudante-boton{position:fixed;right:20px;bottom:20px;z-index:70;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:50%;
  width:74px;height:74px;padding:0;display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 5px 20px rgba(0,0,0,.2);
  transition:transform .18s}
.estrella{filter:drop-shadow(0 2px 4px rgba(200,140,0,.35))}
.ayudante-boton .estrella{transition:transform .25s}
.ayudante-boton:hover .estrella{transform:rotate(-12deg) scale(1.08)}
.ayudante-cab .estrella{flex:0 0 auto}
.ayudante-boton:hover{transform:translateY(-3px) scale(1.05);filter:none}
.ayudante-punto{position:absolute;top:-2px;right:-2px;background:var(--grave);color:#fff;
  border-radius:11px;min-width:21px;height:21px;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--fondo)}
.ayudante-panel{position:fixed;right:20px;bottom:106px;z-index:71;width:330px;
  max-height:min(560px,calc(100vh - 130px));overflow-y:auto;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:16px;padding:16px 18px 18px;
  box-shadow:0 14px 44px rgba(0,0,0,.22)}
.ayudante-panel[hidden]{display:none}
@media (max-width:520px){.ayudante-panel{right:12px;left:12px;width:auto}}
.ayudante-cab{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.ayudante-cab b{display:block;font-size:14.5px}
.ayudante-cab span{font-size:12px;color:var(--tinta3)}
.cerrar-ayudante{margin-left:auto;background:transparent;color:var(--tinta3);
  padding:2px 6px;font-size:15px}
.cerrar-ayudante:hover{color:var(--tinta);filter:none}
.consejo{border-top:1px solid var(--linea);padding:11px 0}
.consejo-cab{display:flex;gap:7px;align-items:baseline;margin-bottom:5px}
.consejo-cab b{font-size:13px}
.consejo-cab .veces{margin-left:auto;font-size:12px;color:var(--tinta3)}
.consejo p{margin:0;font-size:13px;color:var(--tinta2);line-height:1.5}
.consejo.recordatorio p{color:var(--tinta)}

.repo{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:12px;padding:15px 20px;margin-bottom:20px}
.repo b{display:block;font-size:14.5px}
.repo span{font-size:12.5px;color:var(--tinta3)}
.boton-repo{margin-left:auto;background:var(--acento);color:#fff;border-radius:9px;
  padding:10px 18px;font-weight:600;font-size:14px;text-decoration:none;
  white-space:nowrap}
.boton-repo:hover{filter:brightness(1.12);text-decoration:none}

.repo-acciones{margin-left:auto;display:flex;flex-direction:column;gap:6px;
  align-items:flex-end}
.repo-link{font-size:12.5px;color:var(--tinta3);text-decoration:underline}
.repo-estado{font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:9px;
  background:var(--fondo);border:1px solid var(--linea);color:var(--tinta2)}
.repo-estado.corriendo{border-color:var(--atencion);color:#8a6300}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .repo-estado.corriendo{color:#f0c674}
}
:root[data-tema='oscuro'] .repo-estado.corriendo{color:#f0c674}
.repo-aviso{border-radius:10px;padding:11px 15px;margin:-12px 0 20px;font-size:13.5px}
.repo-aviso.ok{background:#e6f6e6;color:#0b5c0b}
.repo-aviso.mal{background:#fdecec;color:#9c0006}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .repo-aviso.ok{background:#16301a;color:#a9e6ad}
  :root:not([data-tema='claro']) .repo-aviso.mal{background:#3a1c1c;color:#ffb4b4}
}
:root[data-tema='oscuro'] .repo-aviso.ok{background:#16301a;color:#a9e6ad}
:root[data-tema='oscuro'] .repo-aviso.mal{background:#3a1c1c;color:#ffb4b4}

/* En la fila: ni logro ni falla. Que no se vea verde —no ha pasado nada— ni
   rojo —no se rompió nada—: sólo está esperando turno. */
.repo-estado.espera{border-color:var(--linea);color:var(--tinta2)}
.repo-aviso.espera{background:var(--fondo);border:1px solid var(--linea);
  color:var(--tinta2)}
.repo-aviso.espera a{color:inherit;text-decoration:underline}
.repo-cancelar{display:inline;margin-left:6px}
.repo-cancelar button{background:none;border:0;padding:0;font:inherit;
  color:var(--tinta3);text-decoration:underline;cursor:pointer}
.repo-cancelar button:hover{color:var(--tinta)}

/* La bóveda vieja se marca, no se esconde: si el índice lleva días sin
   moverse, el conteo de facturas de arriba no se puede leer como si fuera
   de hoy. */
.repo-boveda{font-weight:600}
.repo-boveda.vieja{color:#8a6300}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .repo-boveda.vieja{color:#f0c674}
}
:root[data-tema='oscuro'] .repo-boveda.vieja{color:#f0c674}

/* El semáforo del agente, en el panel de contabilidad */
.agente{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13.5px;
  background:var(--fondo);border:1px solid var(--linea)}
.agente .punto{width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--tinta3)}
.agente.si .punto{background:#0ca30c;box-shadow:0 0 0 3px rgba(12,163,12,.18)}
.agente.no .punto{background:#d03b3b;box-shadow:0 0 0 3px rgba(208,59,59,.18)}
.agente .detalle{color:var(--tinta3);margin-left:auto}

/* ── Logos de empresa ──────────────────────────────────────────────
   Los archivos vienen en tamaño original (hasta 1500px de ancho), así que
   SIEMPRE hay que acotarlos por los dos lados: sin max-width el logo se
   despliega a su tamaño real y se come la pantalla. */
.logo-empresa{max-height:100%;max-width:100%;object-fit:contain;display:block}
header .marca{display:flex;align-items:center;gap:10px}
header .logo-empresa{height:28px;width:auto;max-width:120px}
.hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero-texto{flex:1 1 320px}
.hero .logo-empresa{height:46px;width:auto;max-width:150px;background:#fff;
  border-radius:9px;padding:6px 10px;flex:0 0 auto}
@media (max-width:620px){
  header .logo-empresa{height:22px;max-width:90px}
  .hero .logo-empresa{height:36px;max-width:120px}
}

/* ══════════════════════════════════════════════════════════════
   Color de la empresa, en pastel
   ──────────────────────────────────────────────────────────────
   El fondo de la página toma el color de cada empresa rebajado con
   blanco: Llanco queda azulito, Prisma durazno, Agro crema, Sanje
   verde salvia. Las tarjetas se quedan claras para que el contenido
   siga leyéndose; el color va alrededor, no debajo del texto.
   ══════════════════════════════════════════════════════════════ */
body{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acento) 13%, #fff) 0%,
      color-mix(in srgb, var(--acento) 6%, #fff) 340px,
      color-mix(in srgb, var(--acento) 4%, #fff) 100%)
    fixed;
}
header{
  background:color-mix(in srgb, var(--acento) 7%, #fff);
  border-bottom-color:color-mix(in srgb, var(--acento) 18%, #fff);
  backdrop-filter:saturate(1.1);
}
.tarjeta,.subida-grande,.repo,.ayudante-panel{
  border-color:color-mix(in srgb, var(--acento) 15%, var(--linea));
  box-shadow:0 1px 2px color-mix(in srgb, var(--acento) 8%, transparent);
}
.tile,.paso-guia-cuerpo input[type=file],.insignia{
  background:color-mix(in srgb, var(--acento) 5%, #fff);
}
.seccion{color:color-mix(in srgb, var(--acento) 55%, var(--tinta3))}
.tabla-rank tr.yo td{background:color-mix(in srgb, var(--acento) 9%, transparent)}

@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) body{background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acento) 26%, #111110) 0%,
      color-mix(in srgb, var(--acento) 12%, #111110) 340px,
      #111110 100%) fixed;}
  :root:not([data-tema='claro']) header{background:color-mix(in srgb, var(--acento) 16%, #1a1a19)}
  :root:not([data-tema='claro']) .tile, :root:not([data-tema='claro']) .insignia{background:color-mix(in srgb, var(--acento) 9%, #1a1a19)}
}
:root[data-tema='oscuro'] body{background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acento) 26%, #111110) 0%,
      color-mix(in srgb, var(--acento) 12%, #111110) 340px,
      #111110 100%) fixed;}
:root[data-tema='oscuro'] header{background:color-mix(in srgb, var(--acento) 16%, #1a1a19)}
:root[data-tema='oscuro'] .tile, :root[data-tema='oscuro'] .insignia{background:color-mix(in srgb, var(--acento) 9%, #1a1a19)}

/* ── Logos, más grandes ── */
header .logo-empresa{height:40px;max-width:170px}
.hero .logo-empresa{height:72px;max-width:230px;padding:9px 14px;border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.14)}
@media (max-width:620px){
  header .logo-empresa{height:30px;max-width:120px}
  .hero .logo-empresa{height:54px;max-width:170px}
}

/* ── Un poco menos rígido ── */
.hero{border-radius:18px;box-shadow:0 6px 22px color-mix(in srgb, var(--acento) 28%, transparent)}
.tarjeta,.subida-grande{border-radius:16px}
button.grande{border-radius:13px;box-shadow:0 4px 14px color-mix(in srgb, var(--acento) 35%, transparent)}

/* ══════════════════════════════════════════════════════════════
   Portada (pantalla de entrar)
   ──────────────────────────────────────────────────────────────
   Dos columnas: a la izquierda para qué sirve, a la derecha el
   acceso. Como aquí todavía no se sabe de qué empresa es quien
   entra, el color es el del grupo, no el de una en particular.
   ══════════════════════════════════════════════════════════════ */
body.portada-fondo{
  background:
    radial-gradient(1100px 620px at 12% -8%, #6b86a8 0%, transparent 62%),
    radial-gradient(900px 560px at 92% 108%, #8fa4bd 0%, transparent 58%),
    linear-gradient(150deg, #2c3c56 0%, #405871 46%, #55708c 100%) fixed;
}
body.portada-fondo main{max-width:1080px;padding-top:0}

.portada{display:grid;grid-template-columns:auto 1fr minmax(330px,.85fr);
  gap:42px;align-content:center;align-items:center;min-height:100vh;padding:40px 0}
@media (max-width:1040px){
  .portada{grid-template-columns:1.05fr .95fr;gap:38px}
}
@media (max-width:900px){
  .portada{grid-template-columns:1fr;gap:26px;min-height:auto;padding:26px 0}
}

.portada-marca{color:#fff}
/* Los logos del grupo, al pie y cruzando las dos columnas. Arriba competían
   con el título; aquí abajo hacen otro trabajo: dan respaldo. Cada uno en su
   cuadrito blanco porque casi todos son oscuros y contra el fondo azul se
   perderían. Alto fijo y ancho libre: las proporciones van de 0.7:1 (Sanje,
   vertical) a 3.5:1 (Prisma, muy horizontal), e igualarlos por ancho los
   deformaría. */
/* Franja vertical con los logos, pegada al borde derecho.
   Cada uno va en un cuadrito blanco del MISMO tamaño, no del tamaño de su
   dibujo: es lo único que hace que una columna se vea alineada cuando las
   proporciones van de 0.7:1 (Sanje, vertical) a 3.5:1 (Prisma, muy
   horizontal). El logo se acomoda dentro sin deformarse. */
/* Va primero en pantalla pero último en el HTML: así quien usa lector de
   pantalla escucha antes el mensaje y el acceso, y sólo al final los logos. */
.marca-grupo{order:-1;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-right:34px;border-right:1px solid rgba(255,255,255,.15)}
.marca-grupo-pie{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#c3d2e2;opacity:.8;text-align:center;line-height:1.6}
.marca-grupo-logos{display:flex;flex-direction:column;gap:9px}
.marca-grupo-logos img{width:84px;height:44px;object-fit:contain;background:#fff;
  border-radius:9px;padding:6px 9px;opacity:.93;
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .18s, opacity .18s}
.marca-grupo-logos img:hover{transform:translateX(3px);opacity:1}

/* En pantalla angosta la columna no cabe: se acuesta y pasa al pie. */
@media (max-width:900px){
  /* En angosto vuelve a su sitio del final: el contenido primero. */
  .marca-grupo{order:0;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;
    padding-right:0;padding-top:22px;border-right:0;
    border-top:1px solid rgba(255,255,255,.16)}
  .marca-grupo-pie{text-align:left;flex:0 0 auto}
  .marca-grupo-pie br{display:none}
  .marca-grupo-logos{flex-direction:row;flex-wrap:wrap}
  .marca-grupo-logos img{width:74px;height:38px}
  .marca-grupo-logos img:hover{transform:translateY(-2px)}
}
@media (max-width:620px){
  .marca-grupo-logos img{width:60px;height:32px;padding:4px 6px}
  .marca-grupo-logos{gap:6px}
}
.portada-marca h1{font-size:clamp(38px,5.4vw,60px);line-height:1.03;margin:0 0 14px;
  letter-spacing:-.03em;color:#fff;font-weight:700}
.lema{font-size:18px;margin:0 0 32px;color:#e8eef6;opacity:.95}

.ventajas{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.ventajas li{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start}
.ventajas .ic{width:42px;height:42px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:19px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22)}
.ventajas b{display:block;color:#fff;font-size:15px;margin-bottom:2px}
.ventajas span span,.ventajas li>span:last-child{color:#dfe8f2;font-size:13.5px;
  line-height:1.5}

.tarjeta-entrada{background:#fcfcfb;border-radius:20px;padding:34px 34px 28px;
  box-shadow:0 22px 60px rgba(12,20,34,.34)}
.tarjeta-entrada h2{margin:0 0 4px;font-size:23px;letter-spacing:-.02em;color:#1a1a19}
.ayuda-entrada{margin:0 0 22px;font-size:14px;color:#77776f}
.tarjeta-entrada label{color:#55554f;font-size:13px;margin-bottom:6px}
.tarjeta-entrada input{width:100%;padding:13px 15px;border-radius:11px;
  border:1px solid #dfdfd9;background:#fff;color:#1a1a19;font:inherit;
  font-size:15px;margin-bottom:16px;transition:border-color .15s, box-shadow .15s}
.tarjeta-entrada input:focus{outline:none;border-color:#405871;
  box-shadow:0 0 0 3px rgba(64,88,113,.16)}
.tarjeta-entrada button{width:100%;padding:14px;font-size:15.5px;border-radius:11px;
  background:#2c3c56;margin-top:4px}
.tarjeta-entrada button:hover{background:#405871;filter:none}
.nota-entrada{margin:20px 0 0;font-size:12.5px;color:#8a8a82;text-align:center;
  line-height:1.5}
.tarjeta-entrada .error{margin-bottom:18px}

/* ── Aviso del corte de los martes ── */
.corte{margin:12px 0 0;font-size:13.5px;padding:9px 13px;border-radius:9px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26)}
.corte.tarde{background:rgba(208,59,59,.9);border-color:rgba(255,255,255,.3)}
.corte.hoy{background:rgba(255,255,255,.2)}

/* ── Alerta grave (REPSE) ── */
.alerta-grave{background:#fdecec;border:1px solid #f3b6b6;border-left:5px solid #d03b3b;
  border-radius:12px;padding:16px 18px;margin-bottom:20px}
.alerta-cab{display:flex;gap:12px;align-items:flex-start}
.alerta-cab .ic{font-size:22px;line-height:1.1}
.alerta-cab b{display:block;font-size:15px;color:#7d1414;margin-bottom:3px}
.alerta-cab span{font-size:13.5px;color:#9c3b3b;line-height:1.5}
.alerta-grave ul{margin:12px 0 0;padding-left:34px}
.alerta-grave li{font-size:13.5px;color:#7d1414;margin-bottom:4px}
.alerta-pie{margin:12px 0 0 34px;font-size:13px;color:#9c3b3b;font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .alerta-grave{background:#3a1c1c;border-color:#6b2b2b}
  :root:not([data-tema='claro']) .alerta-cab b, :root:not([data-tema='claro']) .alerta-grave li{color:#ffc9c9}
  :root:not([data-tema='claro']) .alerta-cab span, :root:not([data-tema='claro']) .alerta-pie{color:#e8a0a0}
}
:root[data-tema='oscuro'] .alerta-grave{background:#3a1c1c;border-color:#6b2b2b}
:root[data-tema='oscuro'] .alerta-cab b, :root[data-tema='oscuro'] .alerta-grave li{color:#ffc9c9}
:root[data-tema='oscuro'] .alerta-cab span, :root[data-tema='oscuro'] .alerta-pie{color:#e8a0a0}

/* ── Buzón de ideas ── */
.consejo.buzon textarea{width:100%;margin:8px 0;font-size:13px;padding:9px 11px;
  border-radius:9px;border:1px solid var(--linea);background:var(--fondo);
  color:var(--tinta);font-family:inherit;resize:vertical}
.consejo.buzon .mias{margin-top:14px;font-size:12px;color:var(--tinta3);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.consejo.buzon .mia{font-size:12.5px;color:var(--tinta2);margin-top:7px;
  padding-top:7px;border-top:1px solid var(--linea)}
.consejo.buzon .mia em{color:var(--tinta3);font-size:11.5px}
.consejo.buzon .respuesta{margin-top:5px;font-size:12.5px;padding:7px 10px}

/* ── El parpadeo ──
   Se anima sólo el grupo de los ojos, no la cara entera, para que la sonrisa
   y los cachetes no se achaten con ellos. El origen va en el centro de los
   ojos: si no, al cerrarse se irían hacia arriba. */
.estrella .ojos{transform-origin:50px 47.5px;animation:parpadear 5.2s infinite}
.ayudante-panel .estrella .ojos{animation-delay:1.7s}   /* a destiempo */
@keyframes parpadear{
  0%, 90%, 100%{transform:scaleY(1)}
  93%{transform:scaleY(.08)}
  96%{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){.estrella .ojos{animation:none}}

/* ── Cuando tiene algo sin leer ───────────────────────────────────
   El guiño dura 0.15 s cada 5.2: es un detalle simpático, no una señal. Si
   hay recados sin leer hace falta algo que de verdad se note desde el otro
   lado de la pantalla, y que se apague solo en cuanto se lean —una señal que
   no para de insistir se vuelve parte del decorado—.
   ══════════════════════════════════════════════════════════════ */
.ayudante-boton:has(.ayudante-punto){animation:llamar 2.4s ease-in-out infinite}
.ayudante-boton:has(.ayudante-punto) .estrella{
  animation:girito 2.4s ease-in-out infinite}
.ayudante-boton:has(.ayudante-punto):hover{animation:none}

@keyframes llamar{
  0%, 62%, 100%{box-shadow:0 5px 20px rgba(0,0,0,.2),
                           0 0 0 0 rgba(214,69,69,.5)}
  30%{box-shadow:0 5px 20px rgba(0,0,0,.2),
                 0 0 0 13px rgba(214,69,69,0)}
}
@keyframes girito{
  0%, 55%, 100%{transform:rotate(0)}
  18%{transform:rotate(-9deg)}
  36%{transform:rotate(7deg)}
}
/* El globito con el número también late, medio segundo después, para que se
   lean como una sola cosa y no como dos animaciones sueltas. */
.ayudante-punto{animation:latido-punto 2.4s ease-in-out .4s infinite}
@keyframes latido-punto{
  0%, 40%, 100%{transform:scale(1)}
  16%{transform:scale(1.22)}
}
@media (prefers-reduced-motion:reduce){
  .ayudante-boton:has(.ayudante-punto),
  .ayudante-boton:has(.ayudante-punto) .estrella,
  .ayudante-punto{animation:none}
  /* Sin movimiento, el color hace el trabajo: el botón se pinta del rojo del
     globito para que se siga notando que hay algo. */
  .ayudante-boton:has(.ayudante-punto){border-color:var(--grave);
    box-shadow:0 5px 20px rgba(214,69,69,.4)}
}

/* ── Mandar la solicitud ya revisada ── */
.tarjeta.enviar{border-left:5px solid var(--bien)}
.opcion-envio{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--linea);padding:14px 0}
.oe-texto{flex:1 1 300px}
.oe-texto b{display:block;font-size:15px;margin-bottom:3px}
.oe-texto span{display:block;font-size:12.5px;color:var(--tinta3);line-height:1.5}
.oe-texto .asunto{color:var(--tinta2);font-style:italic;margin-top:3px}
.oe-botones{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.boton-repo.final{background:var(--bien)}
.oe-gmail{font-size:12.5px;color:var(--tinta3);text-decoration:underline}
.alerta-pie a{color:#7d1414;text-decoration:underline;margin-left:8px;white-space:nowrap}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .alerta-pie a{color:#ffc9c9}
}
:root[data-tema='oscuro'] .alerta-pie a{color:#ffc9c9}

/* ══════════════════════════════════════════════════════════════
   El tablero de revisión
   ──────────────────────────────────────────────────────────────
   Tiene su propio color —el del grupo, no el de una empresa—
   porque quien lo usa las ve todas.
   ══════════════════════════════════════════════════════════════ */
body.panel-fondo{--acento:#2c3c56}
body.panel-fondo main{max-width:1180px}

/* El encabezado. El degradado va más profundo y en diagonal larga, con un
   halo apenas visible arriba a la derecha: es lo que le quita el aire de
   rectángulo de color y lo vuelve una superficie. */
.panel-hero{position:relative;overflow:hidden;
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(122deg,#1b2537 0%,#2c3c56 42%,#3d5570 78%,#4a6b8c 100%);
  background-color:#2c3c56;
  color:#fff;border-radius:18px;padding:28px 32px;margin-bottom:22px;
  box-shadow:0 12px 32px -8px rgba(27,37,55,.45),0 4px 10px -4px rgba(27,37,55,.3)}
.panel-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:18px;border:1px solid rgba(255,255,255,.09)}
.panel-hero>div:first-child{flex:1 1 340px;position:relative}
.hero-etiqueta{text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  font-weight:700;opacity:.72;margin:0 0 6px}
.hero-cifra{text-align:right;position:relative}
.hero-cifra .n{display:block;font-size:38px;font-weight:750;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.hero-cifra .et{font-size:11px;opacity:.78;text-transform:uppercase;
  letter-spacing:.09em;font-weight:600}
@media (max-width:700px){.hero-cifra{text-align:left}}

/* Lo que espera su decisión */
.te-esperan{border-left:5px solid var(--atencion)}
.esperan{display:flex;gap:12px;flex-wrap:wrap}
.espera{flex:1 1 190px;display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--linea);border-radius:11px;padding:13px 15px;
  background:var(--fondo);text-decoration:none;transition:transform .16s}
.espera:hover{transform:translateY(-2px);text-decoration:none;
  border-color:var(--atencion)}
.espera .n{font-size:26px;font-weight:700;color:var(--tinta);line-height:1;
  font-variant-numeric:tabular-nums}
.espera span:last-child{font-size:12.5px;color:var(--tinta2);line-height:1.45}
.espera em{color:var(--tinta3);font-size:11.5px;font-style:normal}

.repse-resumen{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea)}
.repse-resumen b{display:block;font-size:14px;color:var(--grave);margin-bottom:7px}
.repse-resumen ul{margin:0;padding-left:20px}
.repse-resumen li{font-size:13px;color:var(--tinta2);margin-bottom:3px}
.repse-resumen li span{color:var(--tinta3);font-size:12px}
.repse-resumen a{font-size:13px;display:inline-block;margin-top:8px}

/* Marcador de la semana */
.marcador{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.m-tile{flex:1 1 150px;background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:13px;padding:16px 18px;border-top:4px solid var(--tinta3)}
.m-tile .n{display:block;font-size:30px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums}
.m-tile .et{font-size:12.5px;color:var(--tinta2)}
.m-tile.verde{border-top-color:#0ca30c}
.m-tile.ambar{border-top-color:#fab219}
.m-tile.rojo{border-top-color:#d03b3b}
.m-tile.neutro{border-top-color:var(--linea)}

.titulo-seccion{font-size:15px;font-weight:650;margin:0 0 12px;
  letter-spacing:-.01em}

/* Tarjeta por administrador */
.rejilla-admins{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:14px;margin-bottom:24px}
.admin-card{background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:14px;padding:16px 18px 12px;border-top:4px solid var(--acento);
  display:flex;flex-direction:column;gap:11px}
.ac-cab{display:flex;gap:11px;align-items:center}
.ac-cab img{height:34px;width:64px;object-fit:contain;background:#fff;
  border-radius:7px;padding:3px 6px;flex:0 0 auto}
.ac-inicial{width:38px;height:38px;border-radius:50%;background:var(--acento);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;flex:0 0 auto}
.ac-cab b{display:block;font-size:14px;line-height:1.3}
.ac-cab span{font-size:12px;color:var(--tinta3)}
.fmt{color:var(--atencion);font-style:normal;font-weight:600}

.ac-estado{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ac-cuando{font-size:12px;color:var(--tinta3)}
.ac-barra{display:flex;height:7px;border-radius:4px;overflow:hidden;
  background:var(--linea);gap:1px}
.ac-barra span{display:block}
.ac-datos{display:flex;justify-content:space-between;font-size:12.5px;
  color:var(--tinta2);font-variant-numeric:tabular-nums}
.ac-error{margin:0;font-size:12.5px;color:var(--grave);line-height:1.45}
.ac-comentario{margin:0;font-size:12.5px;color:var(--tinta2);font-style:italic;
  background:var(--fondo);border-radius:8px;padding:7px 10px}
.ac-vacio{padding:10px 0}
.ac-vacio span{display:block;font-size:13.5px;color:var(--tinta3);font-weight:600}
.ac-vacio em{font-size:12px;color:var(--tinta3);font-style:normal}
.ac-pie{display:flex;align-items:center;gap:10px;font-size:12.5px;
  border-top:1px solid var(--linea);padding-top:9px;margin-top:auto}
.ac-chapas{font-size:14px;letter-spacing:1px}
.ac-acciones{margin-left:auto;color:var(--tinta3)}

/* ══════════════════════════════════════════════════════════════
   Archivo de solicitudes (línea de tiempo por semana de pago)
   ══════════════════════════════════════════════════════════════ */
.filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.filtros select{padding:9px 12px;border-radius:9px;border:1px solid var(--linea);
  background:var(--tarjeta);color:var(--tinta);font:inherit;font-size:13.5px}
.filtros .chk{display:flex;align-items:center;gap:7px;margin:0;font-size:13.5px;
  color:var(--tinta2);background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:9px;padding:9px 13px;cursor:pointer}
.filtros .chk input{width:auto;margin:0}
.filtros .limpiar{font-size:13px;color:var(--tinta3);text-decoration:underline}

/* La línea vertical que cose las semanas */
.linea{position:relative;padding-left:28px}
.linea::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;
  background:var(--linea)}
.semana{position:relative;margin-bottom:26px}
.semana::before{content:"";position:absolute;left:-24px;top:26px;width:12px;height:12px;
  border-radius:50%;background:var(--acento);border:3px solid var(--fondo)}

.sem-cab{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:13px 13px 0 0;
  padding:14px 18px;border-bottom:0}
.sem-fecha{text-align:center;background:var(--acento);color:#fff;border-radius:10px;
  padding:7px 12px;min-width:58px;flex:0 0 auto}
.sem-fecha .dia{display:block;font-size:21px;font-weight:700;line-height:1.1}
.sem-fecha .mes{display:block;font-size:11px;letter-spacing:.09em;opacity:.9}
.sem-fecha .anio{display:block;font-size:10px;opacity:.7}
.sem-datos{flex:1 1 240px}
.sem-datos b{display:block;font-size:15px}
.sem-datos span{font-size:12.5px;color:var(--tinta3)}
.sem-datos .monto{color:var(--tinta);font-size:12.5px}
.sem-marca{flex:0 0 auto}

.sem-lista{background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:0 0 13px 13px;overflow:hidden}
.sol{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 18px;
  border-top:1px solid var(--linea);border-left:4px solid var(--acento)}
.sol img{height:28px;width:56px;object-fit:contain;background:#fff;border-radius:6px;
  padding:3px 5px;flex:0 0 auto}
.sol-inicial{width:32px;height:32px;border-radius:50%;background:var(--acento);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex:0 0 auto}
.sol-quien{flex:1 1 150px;min-width:0}
.sol-quien b{display:block;font-size:13.5px}
.sol-quien span{font-size:12px;color:var(--tinta3)}
.sol-cifras{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.sol-cifras .renglones{display:block;font-size:12px;color:var(--tinta3)}
.sol-cifras .monto{display:block;font-size:13.5px;font-weight:600}
.sol-estado{flex:0 0 auto;text-align:right}
.sol-estado .cuando{display:block;font-size:11.5px;color:var(--tinta3);margin-top:3px}
.sol-acciones{flex:0 0 auto;display:flex;gap:10px;align-items:center;font-size:12.5px}
.sol-acciones .descargar{color:var(--tinta2)}
.sol-acciones .soportes{color:var(--tinta3)}
@media (max-width:760px){
  .sol-cifras,.sol-estado{text-align:left}
  .linea{padding-left:20px}
  .semana::before{left:-17px}
}

/* ══════════════════════════════════════════════════════════════
   SUPERVISIÓN
   ══════════════════════════════════════════════════════════════ */

/* Notificaciones. Lo urgente se distingue por la franja y por la palabra,
   nunca sólo por el color. */
.avisos{display:flex;flex-direction:column;gap:10px}
.aviso{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-radius:11px;background:var(--fondo2);border-left:4px solid #3b82c4}
.aviso.urgente{border-left-color:#d03b3b;background:#fdf3f3}
.aviso .ico{font-size:19px;line-height:1.2}
.aviso b{display:block;font-size:14.5px}
.aviso span{font-size:13px;color:var(--tinta2)}

/* En qué se va el dinero. Cada renglón trae su nombre y su cifra, así que la
   barra sólo ayuda a comparar: nunca es lo único que identifica la familia. */
.gastos{display:flex;flex-direction:column;gap:9px}
.gasto{display:grid;grid-template-columns:minmax(150px,1.4fr) 3fr auto auto;
  gap:12px;align-items:center;font-size:13.5px}
.g-nombre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-barra{height:9px;border-radius:5px;background:var(--fondo2);overflow:hidden}
.g-barra i{display:block;height:100%;border-radius:5px;background:var(--acento);
  opacity:.85}
.g-monto{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;
  white-space:nowrap}
.g-parte{font-size:12px;color:var(--tinta3);text-align:right;min-width:74px;
  white-space:nowrap}

/* La bandeja */
.bandeja{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.sol-card{background:var(--papel);border:1px solid var(--linea);border-radius:15px;
  padding:16px 18px;border-left:5px solid var(--acento)}
.sc-cab{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sc-cab img{width:34px;height:34px;max-width:34px;max-height:34px;
  object-fit:contain;flex:none}
.sc-inicial{width:34px;height:34px;border-radius:50%;background:var(--acento);
  color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.sc-quien{flex:1;min-width:0}
.sc-quien b{display:block;font-size:15px}
.sc-quien span{font-size:12.5px;color:var(--tinta3)}
.sc-cifras{display:flex;gap:26px;flex-wrap:wrap;padding:10px 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.sc-cifras div{display:flex;flex-direction:column}
.sc-cifras b{font-size:16px;font-variant-numeric:tabular-nums}
.sc-cifras span{font-size:11.5px;color:var(--tinta3)}
.sc-gastos{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.sc-gastos span{font-size:12px;background:var(--fondo2);padding:3px 9px;
  border-radius:20px;color:var(--tinta2)}
.sc-comentario{font-size:13.5px;color:var(--tinta2);margin:11px 0 0;
  font-style:italic}
.sc-pie{display:flex;align-items:center;gap:12px;margin-top:13px;flex-wrap:wrap}
.sc-cuando{font-size:12.5px;color:var(--tinta3)}
.sc-cuando .tarde{color:#d03b3b}
.sc-acciones{margin-left:auto;display:flex;align-items:center;gap:14px}
.sc-acciones .principal{font-weight:600}

/* El formulario de revisión */
.revisar textarea{width:100%;padding:11px 13px;border:1px solid var(--linea);
  border-radius:10px;font:inherit;font-size:14px;resize:vertical}
.revisar .botones{display:flex;gap:11px;flex-wrap:wrap;margin-top:13px}
.revisar button{border:0;border-radius:10px;padding:11px 18px;font:inherit;
  font-weight:600;cursor:pointer;color:#fff}
.revisar button.ok{background:#0ca30c}
.revisar button.malo{background:#d03b3b}

/* Las estrellas se pintan al revés (5→1) para que el CSS pueda colorear la
   elegida y todas las anteriores con el selector de hermanos. */
.estrellas{display:flex;align-items:center;gap:3px;margin-bottom:13px;
  flex-direction:row-reverse;justify-content:flex-end}
.estrellas .et{margin-right:auto;font-size:13.5px;color:var(--tinta2);
  order:1}
.estrellas input{display:none}
.estrellas label{font-size:26px;color:var(--linea);cursor:pointer;
  line-height:1;transition:color .12s}
.estrellas label:hover,.estrellas label:hover ~ label,
.estrellas input:checked ~ label{color:#fab219}

/* Un paso de la historia. El nombre y la fecha iban en el mismo renglón
   suelto, así que un nombre largo se partía y la fecha se le encimaba. Ahora
   el encabezado es una fila con su propio espacio para cada cosa. */
/* La historia de una solicitud: cada paso en UN renglón horizontal, que es
   como se lee una bitácora. Antes el comentario colgaba en una línea aparte y
   tres pasos ocupaban una pantalla entera. */
.paso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 2px;border-bottom:1px solid var(--linea)}
.paso:last-child{border-bottom:0}
.paso:first-child{padding-top:2px}
.paso .p-ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;font-size:13px;flex:none;line-height:1}
.paso .p-quien{font-size:14px;color:var(--tinta2);flex:0 0 auto}
.paso .p-quien b{color:var(--tinta);font-weight:650}
/* La fecha se va hasta la orilla derecha, haya o no comentario en medio. */
.paso .cuando{margin-left:auto;font-size:12px;color:var(--tinta3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.paso .nota{flex:0 0 auto;color:#fab219;letter-spacing:1.5px;white-space:nowrap;
  font-size:13px}
/* Las estrellas que NO se dieron, en gris: así se ve «2 de 5» y no «2». */
.paso .nota i{color:var(--linea);font-style:normal}
/* Lo que dijo, en el mismo renglón. Se le deja crecer y envolver: recortarlo
   con puntos suspensivos escondería justo la parte que hay que leer. */
.p-dijo{flex:1 1 240px;min-width:0;font-size:13.5px;line-height:1.55;
  color:var(--tinta2);font-style:italic;padding-left:14px;
  border-left:2px solid var(--linea)}
.paso p{font-size:14px;line-height:1.6;margin:8px 0 0 36px;color:var(--tinta2);
  padding-left:11px;border-left:2px solid var(--linea)}
@media (max-width:600px){.paso p{margin-left:0}}

.tipo-gasto{font-size:12.5px;white-space:nowrap}
.mini-enlace{font-size:12.5px;font-weight:400;margin-left:10px}
.aviso-error{border-left:4px solid #d03b3b;background:#fdf3f3}

/* Alta de supervisores */
.solo-supervisor{display:none;padding-top:14px;margin-top:6px;
  border-top:1px solid var(--linea)}
.solo-supervisor.abierto{display:block}
.casillas{display:flex;flex-wrap:wrap;gap:8px}
.casillas label{display:flex;align-items:center;gap:6px;font-size:13px;
  background:var(--fondo2);padding:6px 11px;border-radius:20px;cursor:pointer;
  margin:0}
.casillas label span{color:var(--tinta3);font-size:11.5px}
.casillas input{width:auto;margin:0}

@media (max-width:760px){
  .gasto{grid-template-columns:1fr auto;row-gap:4px}
  .g-barra{grid-column:1/-1;order:3}
  .g-parte{order:2}
  .sc-acciones{margin-left:0;width:100%}
}

/* El camino de la solicitud. Cada etapa lleva su texto y su icono: el color
   sólo refuerza, nunca es lo único que dice en cuál se va. */
.camino{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.etapa{flex:1 1 130px;min-width:120px;text-align:center;padding:12px 10px;
  border-radius:12px;background:var(--fondo2);border:1px solid var(--linea);
  opacity:.5}
.etapa .e-ico{display:block;font-size:20px;line-height:1.4}
.etapa .e-txt{font-size:12.5px;color:var(--tinta2);line-height:1.35}
.etapa.hecha{opacity:1;background:#eef7ee;border-color:#c9e3c9}
.etapa.hecha .e-txt{color:#2c6b2c}
.etapa.actual{opacity:1;background:var(--papel);border-color:var(--acento);
  border-width:2px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.etapa.actual .e-txt{color:var(--tinta);font-weight:600}

/* Grupos de la bandeja. El encabezado dice qué espera qué; sin él son quince
   tarjetas seguidas y no se sabe cuál toca.

   Cada grupo es una CAJA SÓLIDA, no un título suelto sobre el fondo. Con sólo
   una raya debajo del título, las tarjetas parecían flotar y no se veía dónde
   empezaba y dónde acababa cada bloque: la pantalla se sentía a medio cargar.
   Ahora el bloque tiene piso, borde y una cinta del color de su estado. */
.grupo{margin-bottom:20px;background:var(--tarjeta);
  border:1px solid var(--linea);border-left:5px solid var(--tono,#44546A);
  border-radius:16px;overflow:hidden;box-shadow:var(--sombra)}
.grupo-cab{display:flex;align-items:center;gap:16px;margin:0;
  padding:15px 20px;border-bottom:1px solid var(--linea);
  /* Un lavado del color del estado, apenas perceptible pero suficiente para
     que el ojo separe encabezado de contenido. */
  background:var(--tono,#44546A)}
.grupo-cab{background:color-mix(in srgb, var(--tono,#44546A) 8%, var(--tarjeta))}
@supports not (background:color-mix(in srgb,#000 8%,#fff)){
  .grupo-cab{background:var(--fondo)}
}
.gc-texto{min-width:0}
.grupo-cab h2{font-size:16.5px;margin:0;display:flex;align-items:center;gap:9px}
.grupo-cab .cuenta{background:var(--tono,var(--acento));color:#fff;
  border-radius:20px;min-width:23px;height:23px;padding:0 7px;
  display:inline-grid;place-items:center;font-size:12.5px;font-weight:700}
.grupo-cab p{margin:3px 0 0;font-size:13px;color:var(--tinta2)}
.grupo-monto{margin-left:auto;text-align:right;white-space:nowrap;
  display:flex;flex-direction:column;line-height:1.25}
.grupo-monto b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.grupo-monto em{font-style:normal;font-size:11.5px;color:var(--tinta3)}

/* El cuerpo va hundido respecto al encabezado: es lo que hace que las
   tarjetas se lean como contenido DENTRO del bloque y no como vecinas suyas. */
.grupo .bandeja{margin:0;padding:14px;gap:12px;background:var(--fondo2)}
.sol-card.apagada{opacity:.62;background:var(--fondo2)}
.sol-card .nota{color:#fab219;letter-spacing:1px;white-space:nowrap}

/* Historial semana por semana. Cada renglón lleva su etiqueta y su estado en
   texto: el color sólo acompaña. */
.hist{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.hsem{background:var(--papel);border:1px solid var(--linea);border-radius:15px;
  padding:16px 18px}
.hsem.cerrada{background:var(--fondo2)}
.hsem-cab{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.hsem-fecha{display:grid;place-items:center;width:56px;padding:7px 0;
  border-radius:11px;background:var(--acento);color:#fff;flex:none;line-height:1.1}
.hsem-fecha .dia{font-size:21px;font-weight:700}
.hsem-fecha .mes{font-size:11px;letter-spacing:.5px}
.hsem-fecha .anio{font-size:10px;opacity:.8}
.hsem-datos{flex:1;min-width:170px}
.hsem-datos b{display:block;font-size:14.5px}
.hsem-datos span{font-size:12.5px;color:var(--tinta3)}
.hsem-datos .monto{display:inline;font-size:13px;color:var(--tinta)}
.hsem-gastos{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:7px}
.hsem-gastos .gasto{grid-template-columns:minmax(140px,1.2fr) 3fr auto}
.hsem-lista{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.hsol{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:20px;
  background:var(--fondo2);text-decoration:none;color:inherit;font-size:12.5px;
  border:1px solid transparent}
.hsol:hover{border-color:var(--acento);background:var(--papel)}
.hs-quien{font-weight:600}
.hs-monto{font-variant-numeric:tabular-nums;color:var(--tinta2)}
.hs-nota{color:#fab219;letter-spacing:.5px}

tr.sin-datos{opacity:.65}

/* El gasto partido por empresa. Cada bloque lleva su logo y su color, que es
   como se distinguen en todo el portal. */
.emp-gasto{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.emp-gasto:first-of-type{border-top:0;padding-top:6px}
.emp-gasto.total{background:var(--fondo2);border-radius:13px;padding:16px;
  border-top:0;margin-top:20px}
.eg-cab{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.eg-cab img{width:30px;height:30px;max-width:30px;max-height:30px;
  object-fit:contain;flex:none}
.eg-inicial{width:30px;height:30px;border-radius:8px;background:var(--acento);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.eg-cab b{display:block;font-size:14.5px}
.eg-cab span{font-size:12px;color:var(--tinta3)}
.eg-monto{margin-left:auto;font-size:15.5px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.nota-parcial{margin:10px 0 4px;font-size:12.5px;color:#8a5a1a;
  background:#fdf6e8;border-left:3px solid #fab219;padding:8px 11px;
  border-radius:0 8px 8px 0;line-height:1.5}

/* Las empresas en rejilla. Con cuatro apiladas había que bajar tres pantallas
   para compararlas, que es justo lo que se quiere ver de un vistazo. */
.rejilla-empresas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px}
.rejilla-empresas .emp-gasto{margin:0;padding:14px;border:1px solid var(--linea);
  border-radius:13px;border-top:1px solid var(--linea)}
.rejilla-empresas .emp-gasto:first-of-type{padding:14px}
.gastos.compactos .gasto{grid-template-columns:minmax(0,1.5fr) 1.6fr auto auto;
  gap:8px;font-size:12.5px}
.gastos.compactos .g-parte{min-width:34px}
.gastos.compactos .g-barra{height:7px}
.gastos.compactos .pieta{grid-column:1/-1;margin:2px 0 0}

/* El total de la semana, partido por empresa, dentro del encabezado. */
.hero-empresas{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;
  margin-top:9px}
.hero-empresas span{font-size:11.5px;background:rgba(255,255,255,.16);
  padding:3px 9px;border-radius:20px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.hero-empresas b{font-weight:700;margin-right:3px}

/* En dos columnas, el desglose por empresa cabe de a uno por renglón. */
@media (max-width:1100px){
  .rejilla-empresas{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   ACABADO
   ══════════════════════════════════════════════════════════════ */

/* Bajar todo de un clic. Va antes que cualquier tabla porque es lo que la
   persona viene a hacer: llevarse el paquete y trabajarlo. */
.descargar-todo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-left:5px solid var(--acento)}
.descargar-todo>div{flex:1 1 320px}
.descargar-todo .boton-grande{white-space:nowrap}

.hsem-bajar{width:32px;height:32px;border-radius:9px;display:grid;
  place-items:center;background:var(--fondo);border:1px solid var(--linea);
  color:var(--tinta2);font-size:14px;text-decoration:none;flex:none;
  transition:all .14s}
.hsem-bajar:hover{background:var(--acento);color:#fff;border-color:var(--acento);
  text-decoration:none}

/* La tira de logos del grupo, al pie. No adorna: recuerda de quién es esta
   herramienta, que es lo que hace que se sienta de la casa y no un programa
   cualquiera. */
/* Ahora vive al pie de TODAS las páginas, así que se centra sola y respeta
   el ancho de cada pantalla en vez de heredar el del contenido. */
.tira-logos{max-width:1180px;margin:44px auto 0;padding:28px 18px 34px;
  border-top:1px solid var(--linea);text-align:center}
.tira-logos p{font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tinta3);margin:0 0 16px;font-weight:600}
.tira-logos div{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:30px}
.tira-logos img{height:30px;max-height:30px;max-width:110px;object-fit:contain;
  filter:grayscale(1);opacity:.42;transition:filter .22s,opacity .22s}
.tira-logos img:hover{filter:none;opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .tira-logos img{opacity:.5;filter:grayscale(1) brightness(1.6)}
  :root:not([data-tema='claro']) .tira-logos img:hover{filter:brightness(1.15);opacity:1}
}
:root[data-tema='oscuro'] .tira-logos img{opacity:.5;filter:grayscale(1) brightness(1.6)}
:root[data-tema='oscuro'] .tira-logos img:hover{filter:brightness(1.15);opacity:1}

/* Detalles que separan "funciona" de "se ve producido". */
.tarjeta{transition:box-shadow .18s}
.grupo-cab h2{letter-spacing:-.018em}
.sol-card{box-shadow:var(--sombra);transition:box-shadow .18s,transform .18s}
.sol-card:hover{box-shadow:var(--sombra-alta)}
.hsem{box-shadow:var(--sombra)}
.emp-gasto{transition:box-shadow .18s}
.rejilla-empresas .emp-gasto{box-shadow:var(--sombra)}
.rejilla-empresas .emp-gasto:hover{box-shadow:var(--sombra-alta)}
.pill{letter-spacing:.01em;box-shadow:0 1px 2px rgba(16,24,40,.12)}
.seccion{font-size:11px;letter-spacing:.09em;font-weight:700}
.titulo-seccion{letter-spacing:-.015em;font-weight:700}
.boton-grande{box-shadow:var(--sombra-alta)}

/* ══════════════════════════════════════════════════════════════
   QUÉ SE PAGA Y QUÉ NO
   ══════════════════════════════════════════════════════════════ */

/* El renglón excluido se marca por tres vías —fondo, texto tachado y la
   palabra "No se paga"— y no sólo por color: es una decisión de dinero y
   tiene que leerse igual en una pantalla mala o impresa en blanco y negro. */
tr.excluido{background:#fdf3f3}
tr.excluido td:not(.celda-pago){opacity:.6;text-decoration:line-through}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) tr.excluido{background:#2a1a1a}
}
:root[data-tema='oscuro'] tr.excluido{background:#2a1a1a}

.tabla-renglones td{vertical-align:top}
.celda-pago{min-width:190px}
.no-se-paga b{display:block;font-size:12.5px;color:var(--grave)}
.no-se-paga span{display:block;font-size:12.5px;color:var(--tinta2);margin:2px 0}
.no-se-paga em{display:block;font-size:11px;color:var(--tinta3);font-style:normal}
.no-se-paga form{margin-top:6px}
.no-se-paga button{padding:4px 10px;font-size:12px}

details.quitar summary{cursor:pointer;font-size:12.5px;color:var(--tinta3);
  list-style:none;padding:3px 9px;border:1px dashed var(--linea);
  border-radius:16px;display:inline-block}
details.quitar summary::-webkit-details-marker{display:none}
details.quitar summary:hover{border-color:var(--grave);color:var(--grave)}
details.quitar[open] summary{color:var(--grave);border-style:solid}
details.quitar form{margin-top:8px;display:flex;flex-direction:column;gap:6px}
details.quitar input{width:100%;padding:7px 10px;border:1px solid var(--linea);
  border-radius:8px;font:inherit;font-size:12.5px;background:var(--fondo);
  color:var(--tinta)}
details.quitar button{padding:6px 12px;font-size:12.5px}
details.quitar .err{color:var(--grave);font-size:11.5px;margin:4px 0 0}

.mini-tiles b.rojo{color:var(--grave)}
.mini-tiles b.verde{color:var(--bien)}

.tarjeta.sin-factura{border-left:5px solid var(--atencion)}

/* Qué cambió contra la semana pasada */
.cambios{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px}
.cambio{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:11px 13px;border-radius:11px;background:var(--fondo);
  border-left:3px solid var(--linea)}
.cambio.sube{border-left-color:var(--grave)}
.cambio.baja{border-left-color:var(--bien)}
.c-fam{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.c-flecha{font-size:12.5px;font-weight:700;text-align:right;white-space:nowrap}
.cambio.sube .c-flecha{color:var(--grave)}
.cambio.baja .c-flecha{color:var(--bien)}
.c-hoy{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.c-antes{font-size:11.5px;color:var(--tinta3);text-align:right;
  font-variant-numeric:tabular-nums}

/* Filtro por planta */
.filtro-plantas{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.filtro-plantas button{background:var(--tarjeta);color:var(--tinta2);
  border:1px solid var(--linea);border-radius:20px;padding:6px 14px;
  font-size:12.5px;font-weight:600;box-shadow:none}
.filtro-plantas button:hover{border-color:var(--acento);color:var(--tinta);
  filter:none}
.filtro-plantas button.activo{background:var(--acento);color:#fff;
  border-color:var(--acento)}

/* ══════════════════════════════════════════════════════════════
   DOCUMENTOS DE SOPORTE
   ══════════════════════════════════════════════════════════════ */

.soportes-lista{display:flex;flex-direction:column;gap:8px}
.soporte{border:1px solid var(--linea);border-radius:11px;background:var(--fondo);
  overflow:hidden}
.soporte summary,.soporte.plano{display:flex;align-items:center;gap:11px;
  padding:11px 14px;cursor:pointer;list-style:none;font-size:13.5px;
  text-decoration:none;color:inherit}
.soporte summary::-webkit-details-marker{display:none}
.soporte summary:hover,.soporte.plano:hover{background:var(--tarjeta);
  text-decoration:none}
.s-ico{font-size:18px;flex:none;line-height:1}
.s-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600}
.s-peso{color:var(--tinta3);font-size:12px;white-space:nowrap}
.s-ver{color:var(--acento);font-size:12.5px;font-weight:600;white-space:nowrap;
  padding:3px 10px;border-radius:16px;background:var(--tarjeta);
  border:1px solid var(--linea)}
.soporte[open] summary{border-bottom:1px solid var(--linea);
  background:var(--tarjeta)}
.soporte[open] .s-ver::after{content:" ▲"}
.soporte:not([open]) .s-ver::after{content:" ▼"}

/* El visor. Alto fijo para que abrir un PDF no empuje media pantalla: dentro
   se puede hacer scroll, y quien quiera verlo grande tiene el enlace. */
.s-visor{padding:12px 14px 14px;background:var(--tarjeta)}
.s-visor iframe{width:100%;height:520px;border:1px solid var(--linea);
  border-radius:9px;background:#fff}
.s-visor img{max-width:100%;max-height:520px;display:block;margin:0 auto;
  border-radius:9px;border:1px solid var(--linea)}
.s-pie{display:flex;gap:16px;margin-top:10px;font-size:12.5px}
@media (max-width:700px){.s-visor iframe{height:380px}}

/* Filas que llevan a algún lado */
table.clicable tr:not(:first-child){cursor:pointer;transition:background .12s}
table.clicable tr:not(:first-child):hover{background:var(--fondo)}

/* Comparativo por planta. Cada tarjeta lleva su logo y su color; el número y
   la flecha van en texto, así que el color sólo acompaña. */
.cambios{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cambio{display:block;padding:13px 15px;border-left-width:4px}
.c-cab{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.c-cab img{width:22px;height:22px;max-width:22px;max-height:22px;
  object-fit:contain;flex:none}
.c-cab b{font-size:14px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.c-cifras{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.c-porque{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--linea)}
.c-porque span{font-size:11.5px;background:var(--tarjeta);padding:3px 9px;
  border-radius:16px;color:var(--tinta2);border:1px solid var(--linea)}
.c-porque b{color:var(--tinta);margin-left:3px}

/* Renglón señalado para corregir */
tr.senalado{background:#fff9ec}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) tr.senalado{background:#2b2413}
}
:root[data-tema='oscuro'] tr.senalado{background:#2b2413}
.a-corregir b{display:block;font-size:12.5px;color:#8a5a1a}
.a-corregir span{display:block;font-size:12.5px;color:var(--tinta2);margin:2px 0}
.a-corregir form{margin-top:6px}
.a-corregir button{padding:4px 10px;font-size:12px}
details.quitar .ayudita{font-size:11px;color:var(--tinta3);margin:6px 0 0;
  line-height:1.4}
details.quitar form button{width:100%}

/* ══════════════════════════════════════════════════════════════
   EL CAMINO, HASTA ARRIBA
   ══════════════════════════════════════════════════════════════ */

/* Responde de un vistazo la única pregunta que se hace el administrador al
   entrar: «¿ya quedó o me falta algo?». Y la acción va DENTRO del paso, no en
   otra tarjeta: el camino y lo que hay que hacer son la misma cosa. */
.pasos-tarjeta{border-top:4px solid var(--acento);padding:18px 20px}
.paso-accion{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--linea)}
.pa-texto{flex:1 1 300px}
.pa-texto b{display:block;font-size:15.5px;letter-spacing:-.01em}
.pa-texto span{font-size:13.5px;color:var(--tinta2);line-height:1.5}
.paso-accion form{margin:0}
.paso-accion .boton-repo{white-space:nowrap}

/* Marcar un renglón: el campo siempre visible, sin desplegar nada. Un
   acordeón para escribir dos palabras es un clic de más en algo que se hace
   veinte veces seguidas. */
.marcar-renglon{display:flex;gap:5px;align-items:center}
.marcar-renglon input{flex:1;min-width:0;padding:5px 9px;font-size:12px;
  border:1px solid var(--linea);border-radius:7px;background:var(--fondo);
  color:var(--tinta);font-family:inherit}
.marcar-renglon input:focus{outline:none;border-color:var(--acento)}
.marcar-renglon button{padding:5px 10px;font-size:11.5px;white-space:nowrap;
  box-shadow:none}
.celda-pago .err{color:var(--grave);font-size:11px;margin:4px 0 0}

/* ══════════════════════════════════════════════════════════════
   BAJAR TODO — la función principal de tesorería
   ══════════════════════════════════════════════════════════════ */

.bajar-todo{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:linear-gradient(118deg,#14532d 0%,#166534 45%,#1f7a45 100%);
  color:#fff;border-radius:16px;padding:24px 28px;margin-bottom:22px;
  box-shadow:0 10px 26px -8px rgba(20,83,45,.45)}
.bt-texto{flex:1 1 320px}
.bt-texto b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:5px}
.bt-texto p{margin:0;font-size:14px;line-height:1.55;opacity:.92}
.bt-texto b b{display:inline;font-size:inherit}
.bt-boton{display:flex;align-items:center;gap:13px;background:#fff;color:#14532d;
  border-radius:13px;padding:15px 24px;text-decoration:none;font-weight:700;
  font-size:15.5px;white-space:nowrap;transition:transform .16s,box-shadow .16s;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bt-boton:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.24)}
.bt-ico{font-size:24px;line-height:1}
.bt-boton em{display:block;font-style:normal;font-size:11.5px;font-weight:500;
  opacity:.72;margin-top:2px}
@media (max-width:700px){
  .bajar-todo{padding:20px}
  .bt-boton{width:100%;justify-content:center}
}

/* Los avisos llevan a su sección */
a.aviso{text-decoration:none;color:inherit;align-items:center}
a.aviso:hover{text-decoration:none;background:var(--tarjeta)}
a.aviso .ir{margin-left:auto;color:var(--tinta3);font-size:15px;flex:none}
a.aviso:hover .ir{color:var(--acento)}

/* Que el encabezado fijo no tape la sección a la que se salta */
section.grupo,#equipo{scroll-margin-top:76px}

/* ══════════════════════════════════════════════════════════════
   EL ARCHIVO — lo pedido contra lo pagado
   ══════════════════════════════════════════════════════════════ */

.sem-plata{text-align:right;margin-left:auto;padding-right:14px}
.sp-pagado{display:block;font-size:19px;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.sp-detalle{font-size:11.5px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.sp-detalle b{color:var(--grave)}

/* Las tres cifras de cada solicitud. La de abajo —lo que se paga— es la
   grande: es la que se compara contra el banco. */
.sol-cifras{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  min-width:150px}
.c-pedido{font-size:11.5px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.c-fuera{font-size:11.5px;color:var(--grave);font-weight:600;
  font-variant-numeric:tabular-nums}
.c-pagado{font-size:16px;font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}

.sol-estado .pill.suave{opacity:.72;font-size:10.5px;padding:1px 7px}
.estrellitas{color:#f0a020;letter-spacing:.5px}

/* Lo que no se pagó, colgando de su solicitud */
.sol-fuera{margin:-4px 0 12px 0;padding:11px 15px 11px 46px;
  background:#fdf3f3;border-radius:0 0 12px 12px;border:1px solid #f3d9d9;
  border-top:0}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .sol-fuera{background:#2a1a1a;border-color:#3d2626}
}
:root[data-tema='oscuro'] .sol-fuera{background:#2a1a1a;border-color:#3d2626}
.sol-fuera>b{display:block;font-size:12.5px;color:var(--grave);margin-bottom:7px}
.sf-renglon{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto auto;
  gap:12px;align-items:baseline;font-size:12.5px;padding:4px 0;
  border-top:1px dashed #f0dcdc}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .sf-renglon{border-color:#3d2626}
}
:root[data-tema='oscuro'] .sf-renglon{border-color:#3d2626}
.sf-renglon:first-of-type{border-top:0}
.sf-quien{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-motivo{color:var(--tinta2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sf-monto{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;
  white-space:nowrap}
.sf-decidio{font-size:11px;color:var(--tinta3);white-space:nowrap;min-width:56px;
  text-align:right}
@media (max-width:760px){
  .sol-fuera{padding-left:16px}
  .sf-renglon{grid-template-columns:1fr auto;row-gap:2px}
  .sf-motivo{grid-column:1/-1}
  .sem-plata{text-align:left;margin-left:0;padding-right:0}
}

/* Por dónde van las de la semana. Cada casilla lleva al archivo ya filtrado
   por ese estado: mirarlo y luego tener que buscarlo era el paso que sobraba. */
.avance{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.av-paso{flex:1 1 150px;background:var(--tarjeta);border:1px solid var(--linea);
  border-left:4px solid var(--acento);border-radius:12px;padding:13px 15px;
  text-decoration:none;color:inherit;box-shadow:var(--sombra);
  transition:transform .14s,box-shadow .14s}
a.av-paso:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:var(--sombra-alta)}
.av-n{display:block;font-size:25px;font-weight:750;letter-spacing:-.02em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.av-t{font-size:12px;color:var(--tinta2)}
.av-paso.pagado{border-left-color:var(--bien);background:#f0f9f2}
.av-paso.pagado .av-n{font-size:20px;color:#14532d}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .av-paso.pagado{background:#132a1c}
  :root:not([data-tema='claro']) .av-paso.pagado .av-n{color:#8fd9a8}
}
:root[data-tema='oscuro'] .av-paso.pagado{background:#132a1c}
:root[data-tema='oscuro'] .av-paso.pagado .av-n{color:#8fd9a8}

.bajar-excel{margin-left:auto;font-size:13px;font-weight:600;padding:7px 14px;
  border:1px solid var(--linea);border-radius:9px;background:var(--tarjeta);
  white-space:nowrap}
.bajar-excel:hover{border-color:var(--bien);color:var(--bien);
  text-decoration:none}

/* ══════════════════════════════════════════════════════════════
   EL PANEL, CON COLOR
   ══════════════════════════════════════════════════════════════ */

/* Los títulos de sección: más peso y una barra de color que los ancla. Antes
   eran texto suelto y las secciones se confundían entre sí. */
.titulo-seccion{position:relative;font-size:16.5px;font-weight:750;
  letter-spacing:-.022em;margin:30px 0 14px;padding-left:14px;color:var(--tinta)}
.titulo-seccion::before{content:"";position:absolute;left:0;top:.18em;
  bottom:.18em;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--acento),#4a6b8c)}
.titulo-seccion .mini-enlace{font-weight:500}

/* La tira de números bajo el encabezado */
.tira-datos{display:flex;gap:0;flex-wrap:wrap;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden;
  margin:-8px 0 22px;box-shadow:var(--sombra)}
.tira-datos>div{flex:1 1 110px;padding:14px 16px;text-align:center;
  border-right:1px solid var(--linea);position:relative}
.tira-datos>div:last-child{border-right:0}
.tira-datos>div::before{content:"";position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--tinta3);opacity:.28}
.tira-datos .bien::before{background:var(--bien);opacity:1}
.tira-datos .atencion::before{background:var(--atencion);opacity:1}
.tira-datos .grave::before{background:var(--grave);opacity:1}
.tira-datos .pagado::before{background:#14532d;opacity:1}
.tira-datos b{display:block;font-size:26px;font-weight:750;letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.tira-datos b em{font-style:normal;font-size:16px;color:var(--tinta3);
  font-weight:600}
.tira-datos span{font-size:11.5px;color:var(--tinta2);display:block;margin-top:3px}
.tira-datos .bien b{color:var(--bien)}
.tira-datos .atencion b{color:#b57608}
.tira-datos .grave b{color:var(--grave)}
.tira-datos .pagado b{color:#14532d}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .tira-datos .atencion b{color:var(--atencion)}
  :root:not([data-tema='claro']) .tira-datos .pagado b{color:#8fd9a8}
}
:root[data-tema='oscuro'] .tira-datos .atencion b{color:var(--atencion)}
:root[data-tema='oscuro'] .tira-datos .pagado b{color:#8fd9a8}

.hero-pagado{display:block;margin-top:8px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.17);padding:4px 11px;border-radius:20px;
  display:inline-block}

/* Las tarjetas de «te están esperando», cada una con su color */
.espera{position:relative;padding-left:46px;border-left:4px solid var(--acento)}
.espera .e-ico{position:absolute;left:13px;top:14px;font-size:19px;line-height:1}
.espera .n{color:var(--acento)}
.espera:hover{border-color:var(--acento)}

/* Las tarjetas de cada administrador: el encabezado con el color de su
   empresa, para reconocerlas de un vistazo en una rejilla de seis. */
.admin-card .ac-cab{margin:-16px -16px 12px;padding:13px 16px;
  border-radius:13px 13px 0 0;
  background:color-mix(in srgb, var(--acento) 12%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--acento) 22%, transparent)}
.admin-card .ac-cab b{color:var(--tinta);font-weight:700}
.admin-card{border-top:0;border-left:4px solid var(--acento)}
.ac-estado .pill.suave{opacity:.7;font-size:10.5px;padding:1px 7px}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .admin-card .ac-cab{background:var(--fondo2)}
}

/* ══════════════════════════════════════════════════════════════
   LA PANTALLA DEL ADMINISTRADOR
   ══════════════════════════════════════════════════════════════ */

/* «Ésta era de práctica». Discreta a propósito: es una salida, no una
   invitación — pero tiene que estar a la vista o nadie la encuentra. */
.era-prueba{margin-top:14px;padding-top:13px;border-top:1px dashed var(--linea);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.era-prueba button{background:transparent;color:var(--tinta2);
  border:1px solid var(--linea);border-radius:20px;padding:7px 15px;
  font-size:12.5px;font-weight:600;box-shadow:none}
.era-prueba button:hover{border-color:var(--tinta3);background:var(--fondo);
  filter:none}
.era-prueba span{font-size:12px;color:var(--tinta3)}

/* La alerta de meses ya cerrados: es la única de esta pantalla que significa
   dinero perdido, así que se distingue de las demás por peso, no por gritar. */
.alerta-cierre{background:#fdf3f3;border:1px solid #f0d4d4;
  border-left:5px solid var(--grave);border-radius:0 12px 12px 0;
  padding:14px 17px;margin:0 0 16px}
.alerta-cierre b{display:block;font-size:14.5px;color:#a02020;margin-bottom:5px}
.alerta-cierre u{text-decoration-thickness:2px;text-underline-offset:2px}
.alerta-cierre span{font-size:13.5px;line-height:1.6;color:var(--tinta2)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .alerta-cierre{background:#2a1a1a;border-color:#3d2626}
  :root:not([data-tema='claro']) .alerta-cierre b{color:#ff9b9b}
}
:root[data-tema='oscuro'] .alerta-cierre{background:#2a1a1a;border-color:#3d2626}
:root[data-tema='oscuro'] .alerta-cierre b{color:#ff9b9b}
tr.urge{background:#fdf6f6}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) tr.urge{background:#241818}
}
:root[data-tema='oscuro'] tr.urge{background:#241818}
.mini-tiles b.rojo{color:var(--grave)}

/* El punto de severidad, en lugar del código del sistema. A quien captura no
   le dice nada que algo sea «F04»; el color y la frase sí. */
.punto-sev{width:9px;height:9px;border-radius:50%;display:inline-block;
  flex:none;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 8%, transparent)}

/* ══════════════════════════════════════════════════════════════
   YA SALIÓ — y la salida por si hay corrección
   ══════════════════════════════════════════════════════════════ */

.tarjeta.ya-salio{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  border-left:5px solid var(--bien);background:linear-gradient(100deg,
    color-mix(in srgb, var(--bien) 7%, var(--tarjeta)), var(--tarjeta) 60%)}
.ya-salio>div{flex:1 1 300px}
.ya-salio b{display:block;font-size:16.5px;letter-spacing:-.015em;margin-bottom:3px}
.ya-salio span{font-size:13.5px;color:var(--tinta2)}

/* La salida existe, pero hay que ir a buscarla: si fuera un botón grande,
   subir otra versión encima sería tan fácil como no hacerlo. */
.reabrir{margin:-8px 0 18px}
.reabrir summary{cursor:pointer;list-style:none;font-size:12.5px;
  color:var(--tinta3);display:inline-block;padding:5px 0;
  border-bottom:1px dashed var(--linea)}
.reabrir summary::-webkit-details-marker{display:none}
.reabrir summary:hover{color:var(--tinta2);border-color:var(--tinta3)}
.reabrir p{font-size:12.5px;color:var(--tinta3);line-height:1.55;
  margin:10px 0 0;max-width:60ch}
.zona-subida.oculta{display:none}
.reabrir[open]+.zona-subida.oculta{display:block;animation:aparecer .22s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}

/* ══════════════════════════════════════════════════════════════
   LO BONITO — la pantalla de quien más la usa
   ══════════════════════════════════════════════════════════════ */

/* El encabezado con el color de SU empresa, no el azul de todos. Quien entra
   ve su casa, no el corporativo. */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 150% at 85% -10%, rgba(255,255,255,.22) 0%, transparent 58%),
    linear-gradient(118deg,
      color-mix(in srgb, var(--acento) 88%, #000) 0%,
      var(--acento) 55%,
      color-mix(in srgb, var(--acento) 72%, #fff) 100%);
  border-radius:20px;padding:30px 34px;
  box-shadow:0 14px 34px -10px color-mix(in srgb, var(--acento) 55%, transparent)}
.hero::after{content:"";position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);pointer-events:none}
.hero .hero-titulo{font-size:29px;font-weight:750;letter-spacing:-.028em}
.hero .hero-etiqueta{letter-spacing:.12em;opacity:.8}
.hero .logo-empresa{background:#fff;padding:11px 14px;border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* Los pasos del camino, con más aire y vida */
.etapa{padding:14px 11px;transition:transform .18s}
.etapa.actual{transform:translateY(-2px)}
.etapa.actual .e-ico{animation:latido 2.6s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}}
.etapa .e-ico{font-size:22px}

/* Los tres pasos del formulario: el número con el color de la casa */
.subida-grande .paso-guia .num{background:var(--acento);color:#fff;
  box-shadow:0 3px 8px color-mix(in srgb, var(--acento) 40%, transparent)}
.subida-grande{border-color:color-mix(in srgb, var(--acento) 26%, var(--linea))}
.subida-grande:hover{border-color:color-mix(in srgb, var(--acento) 45%, var(--linea))}
button.grande{background:linear-gradient(100deg,
    color-mix(in srgb, var(--acento) 92%, #000), var(--acento));
  box-shadow:0 8px 20px -6px color-mix(in srgb, var(--acento) 60%, transparent);
  transition:transform .16s,box-shadow .16s}
button.grande:hover{transform:translateY(-2px);filter:none;
  box-shadow:0 12px 26px -6px color-mix(in srgb, var(--acento) 70%, transparent)}

/* Las tarjetas de aviso, cada una con su temperatura */
.tarjeta.te-esperan{background:linear-gradient(100deg,#fffdf7,var(--tarjeta) 55%)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .tarjeta.te-esperan{background:linear-gradient(100deg,#221e14,var(--tarjeta) 55%)}
}
:root[data-tema='oscuro'] .tarjeta.te-esperan{background:linear-gradient(100deg,#221e14,var(--tarjeta) 55%)}

/* El repositorio, con cara de tarjeta y no de renglón suelto */
.repo{border-left:5px solid var(--acento);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--acento) 6%, var(--tarjeta)), var(--tarjeta) 55%)}

/* Las insignias ganadas brillan; las demás esperan */
.li-fila:not(.apagada) .ic{filter:drop-shadow(0 2px 4px rgba(240,160,32,.45))}
.li-fila:not(.apagada){background:color-mix(in srgb, var(--atencion) 8%, transparent);
  border-radius:9px}

@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .hero{background:linear-gradient(118deg,#1b2537,#2c3c56 55%,#4a6b8c)}
  .subida-grande .paso-guia .num{background:var(--acento)}
}

/* ══════════════════════════════════════════════════════════════
   LA MARCA DEL ENCABEZADO
   ══════════════════════════════════════════════════════════════ */

header .marca{gap:0}
header .marca .logo-empresa{height:34px;max-height:34px;max-width:104px;
  object-fit:contain;margin-right:14px}
.marca-linea{width:1px;height:26px;background:var(--linea);margin-right:14px}
.marca-texto{display:flex;flex-direction:column;line-height:1.2}
.marca-texto b{font-size:15.5px;font-weight:750;letter-spacing:-.022em}
.marca-texto em{font-style:normal;font-size:10.5px;color:var(--tinta3);
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;margin-top:2px}
@media (max-width:620px){.marca-texto em{display:none}}

/* ══════════════════════════════════════════════════════════════
   LA GRÁFICA DEL GASTO
   ══════════════════════════════════════════════════════════════ */

/* Una sola barra partida. Los tramos se separan con 2 px del color del papel
   —no con una línea— para que dos colores contiguos no se lean como uno. */
.barra-gasto{display:flex;height:34px;border-radius:9px;overflow:hidden;
  background:var(--fondo2);margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)}
.barra-gasto i{display:block;height:100%;
  box-shadow:inset -2px 0 0 var(--tarjeta);transition:filter .14s}
.barra-gasto i:last-child{box-shadow:none}
.barra-gasto:hover i{filter:saturate(.55) opacity(.55)}
.barra-gasto i:hover{filter:none}

/* Cada tramo repetido en texto: el color acompaña, nunca informa solo. */
.leyenda-gasto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2px 20px}
.lg-fila{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;
  align-items:center;padding:6px 0;font-size:13px;
  border-bottom:1px solid var(--linea)}
.lg-color{width:11px;height:11px;border-radius:3px;flex:none}
.lg-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-parte{font-size:12px;color:var(--tinta3);font-variant-numeric:tabular-nums;
  min-width:38px;text-align:right}
.lg-monto{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}

.grafica-gasto{border-left:5px solid var(--acento)}

/* Desde cuándo se cuentan los complementos. Discreto pero visible: la lista
   no es todo el histórico y quien la mire tiene que saberlo. */
.desde-cuando{font-size:12px;color:var(--tinta3);margin-top:12px;
  padding-top:11px;border-top:1px dashed var(--linea);line-height:1.55}

/* Complementos al día: una línea, no una tarjeta grande. Sirve para saber
   que la sección sigue viva, no para ocupar pantalla. */
.ppd-al-dia{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-left:4px solid var(--bien)}
.ppd-al-dia .pd-ico{font-size:22px;line-height:1;flex:none}
.ppd-al-dia b{font-size:14.5px}
.ppd-al-dia>div>span{display:block;font-size:12.5px;color:var(--tinta3);
  margin-top:2px;line-height:1.5}

/* ══════════════════════════════════════════════════════════════
   LOGOS CUADRADOS
   ══════════════════════════════════════════════════════════════ */

/* Tres formas, tres tamaños. El portal MIDE cada archivo al arrancar y le
   pone su clase, así que cambiar un logo por otro de distinta proporción no
   obliga a tocar nada aquí.

     alto   ≈1:1  — Agro y Xanat: marca arriba, nombre debajo
     medio  1.3-2.2 — Santa Cecilia, Constru, GIX, CCA
     ancho  >2.2  — Prisma, HNL

   Un logo alto al alto de uno ancho deja su nombre en tres píxeles; uno ancho
   al alto de uno alto se sale de la barra. Por eso no hay una sola medida. */
header .marca .logo-empresa.logo-alto{height:42px;max-height:42px;max-width:48px;
  margin-right:12px}
header .marca .logo-empresa.logo-medio{height:38px;max-height:38px;max-width:78px;
  margin-right:13px}
.hero .logo-empresa.logo-alto{max-height:92px;max-width:92px;padding:9px}
.hero .logo-empresa.logo-medio{max-height:80px;max-width:130px;padding:9px}
.tira-logos img.logo-alto{height:42px;max-height:42px;max-width:48px}
.tira-logos img.logo-medio{height:38px;max-height:38px;max-width:80px}
@media (max-width:620px){
  header .marca .logo-empresa.logo-alto{height:34px;max-height:34px;max-width:38px}
  header .marca .logo-empresa.logo-medio{height:32px;max-height:32px;max-width:62px}
}

/* ══════════════════════════════════════════════════════════════
   EL ENCABEZADO DE SUPERVISIÓN
   ══════════════════════════════════════════════════════════════ */

/* Reemplaza el hero con la cifra grande. El total del grupo se quitó a
   propósito: las empresas son independientes, así que sumarlas produce un
   número que nadie puede explicar. En su lugar va una tarjeta por empresa,
   que sí es una cifra de la que alguien responde. */
.cab-sup{position:relative;overflow:hidden;border-radius:20px;padding:28px 30px;
  margin-bottom:24px;color:#fff;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(255,255,255,.20) 0%, transparent 55%),
    radial-gradient(70% 120% at 0% 110%, rgba(120,180,255,.22) 0%, transparent 60%),
    linear-gradient(115deg,#14213d 0%,#1d3557 45%,#2a5c8a 100%);
  box-shadow:0 16px 40px -12px rgba(20,33,61,.55)}
.cab-sup::after{content:"";position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);pointer-events:none}
.cs-saludo{position:relative}
.cs-hola{font-size:14px;opacity:.78;margin:0 0 4px;font-weight:600}
.cab-sup h1{font-size:31px;font-weight:750;letter-spacing:-.03em;margin:0 0 8px;
  color:#fff;line-height:1.15}
.cs-sub{margin:0;font-size:14px;opacity:.82;line-height:1.55}

/* Una tarjeta por empresa, en fila. Cada una lleva a su filtro. */
.cs-empresas{position:relative;display:flex;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.cs-emp{flex:1 1 150px;background:rgba(255,255,255,.10);border-radius:14px;
  padding:14px 16px;text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.14);transition:all .16s;
  display:flex;flex-direction:column;gap:2px}
.cs-emp:hover{background:rgba(255,255,255,.18);text-decoration:none;
  transform:translateY(-2px);border-color:rgba(255,255,255,.3)}
.cs-emp img{height:26px;max-height:26px;max-width:76px;object-fit:contain;
  background:#fff;border-radius:7px;padding:4px 6px;margin-bottom:7px;
  align-self:flex-start}
.cs-emp img.logo-alto{max-width:34px;height:30px;max-height:30px}
.cs-emp img.logo-medio{max-width:56px;height:28px;max-height:28px}
.ce-etiqueta{font-size:11px;opacity:.72;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700}
.ce-monto{font-size:19px;font-weight:750;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.ce-sol{font-size:11.5px;opacity:.68}

/* Elegir de qué semana ver el gasto */
.selector-semana{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  margin:0 0 16px}
.ss-et{font-size:12px;color:var(--tinta3);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;margin-right:4px}
.selector-semana button{background:var(--tarjeta);color:var(--tinta2);
  border:1px solid var(--linea);border-radius:9px;padding:6px 12px;
  font-size:12.5px;font-weight:600;box-shadow:none;
  font-variant-numeric:tabular-nums}
.selector-semana button:hover{border-color:var(--acento);color:var(--tinta);
  filter:none}
.selector-semana button.activo{background:var(--acento);color:#fff;
  border-color:var(--acento)}
.ss-hoy{font-size:11.5px;color:var(--tinta3)}

/* Cuando no hay nada, se dice qué va a aparecer ahí */
.vacio-sup{display:flex;align-items:center;gap:16px}
.vacio-sup .v-ico{font-size:30px;line-height:1;flex:none;opacity:.7}
.vacio-sup b{display:block;font-size:15.5px;margin-bottom:3px}
.vacio-sup span{font-size:13.5px;color:var(--tinta2)}

@media (max-width:700px){
  .cab-sup{padding:22px 20px}
  .cab-sup h1{font-size:25px}
  .cs-emp{flex:1 1 100%}
}

/* ══════════════════════════════════════════════════════════════════
   El signo de admiración que se explica solo
   ══════════════════════════════════════════════════════════════════
   Era una pastilla muda: avisaba que algo pasaba con ese renglón y para
   averiguar qué había que bajar a otra tarjeta y buscar la fila a mano.
   Ahora se toca y cuenta lo que sabe. Va con <details> a propósito: abre
   con clic y con teclado, y funciona aunque el JS no cargue. */
.obs-pop{position:relative;display:inline-block}
.obs-pop summary{cursor:pointer;list-style:none;user-select:none}
.obs-pop summary::-webkit-details-marker{display:none}
.obs-pop summary::marker{content:""}
.obs-pop summary:hover{filter:brightness(1.12)}
.obs-pop summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.obs-globo{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:330px;
  max-width:78vw;background:var(--papel);border:1px solid var(--linea);
  border-radius:13px;padding:13px 15px;box-shadow:var(--sombra-alta);
  text-align:left;font-weight:400;white-space:normal}
/* Cerca del borde derecho el globo se saldría de la pantalla. */
.tabla-renglones td:last-child .obs-globo,
.celda-obs .obs-globo{right:auto;left:0}
.og-tit{margin:0 0 9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta3);font-weight:700}
.og-linea{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px;
  font-size:13px;line-height:1.5;color:var(--tinta)}
.og-linea .chip{flex:0 0 auto;color:#fff;border-radius:6px;padding:1px 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em}
.og-pie{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--linea);
  font-size:12px;color:var(--tinta3);line-height:1.5}

/* ══════════════════════════════════════════════════════════════════
   Marcar un renglón como malo, y escribirlo arriba
   ══════════════════════════════════════════════════════════════════ */
.marcar-mal{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:5px 10px;border:1px solid var(--linea);border-radius:9px;
  font-size:12.5px;color:var(--tinta2);background:var(--papel);
  transition:border-color .15s,background .15s,color .15s;white-space:nowrap}
.marcar-mal:hover{border-color:#d08b1a;color:var(--tinta)}
.marcar-mal input{width:15px;height:15px;accent-color:#d08b1a;margin:0;cursor:pointer}
.marcar-mal:has(input:checked){background:#fff4de;border-color:#d08b1a;
  color:#8a5a1a;font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .marcar-mal:has(input:checked){background:#3a2f14;color:#f0c079}
}
:root[data-tema='oscuro'] .marcar-mal:has(input:checked){background:#3a2f14;color:#f0c079}

/* La lista que sube a la tarjeta de revisión. */
.senalados{border:1px solid #e8c88a;background:#fffaf0;border-radius:13px;
  padding:14px 16px;margin:0 0 14px}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .senalados{background:#241d10;border-color:#5c4620}
}
:root[data-tema='oscuro'] .senalados{background:#241d10;border-color:#5c4620}
.sn-tit{margin:0;font-size:14.5px;color:var(--tinta);display:flex;
  align-items:center;gap:9px}
.sn-cuenta{font-size:11.5px;font-weight:700;color:#8a5a1a;background:#f6e2bd;
  border-radius:20px;padding:2px 10px}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .sn-cuenta{background:#4a3a1c;color:#f0c079}
}
:root[data-tema='oscuro'] .sn-cuenta{background:#4a3a1c;color:#f0c079}
.sn-inst{margin:6px 0 12px;font-size:13px;color:var(--tinta2);line-height:1.55}
.sn-fila{display:grid;grid-template-columns:minmax(120px,1.1fr) auto minmax(160px,2fr) auto;
  gap:10px;align-items:center;padding:8px 0;border-top:1px solid #f0e0c0}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .sn-fila{border-color:#3d3320}
}
:root[data-tema='oscuro'] .sn-fila{border-color:#3d3320}
.sn-quien{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sn-monto{font-size:12.5px;color:var(--tinta2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.sn-fila input{width:100%;min-width:0;padding:7px 11px;font:inherit;font-size:13px;
  border:1px solid var(--linea);border-radius:9px;background:var(--papel);
  color:var(--tinta)}
.sn-fila input:focus{outline:none;border-color:#d08b1a;
  box-shadow:0 0 0 3px rgba(208,139,26,.18)}
.sn-quitar{border:0;background:transparent;color:var(--tinta3);cursor:pointer;
  font-size:15px;line-height:1;padding:5px 7px;border-radius:7px}
.sn-quitar:hover{background:#f2e5cc;color:var(--grave)}
.sn-vacio{margin:0 0 14px;font-size:13px;color:var(--tinta3);line-height:1.55;
  padding:11px 14px;background:var(--fondo2);border-radius:11px}

@media (max-width:760px){
  .sn-fila{grid-template-columns:1fr auto;grid-template-areas:
    "quien monto" "nota nota" "quitar quitar"}
  .sn-quien{grid-area:quien} .sn-monto{grid-area:monto}
  .sn-fila input{grid-area:nota} .sn-quitar{grid-area:quitar;justify-self:end}
  .obs-globo{width:min(330px,86vw)}
}

/* ══════════════════════════════════════════════════════════════════
   TESORERÍA — el tablero de quien saca el dinero
   ══════════════════════════════════════════════════════════════════
   Formal a propósito: aquí se mueve dinero y la pantalla tiene que verse
   como algo de lo que uno se puede fiar. Verde profundo en vez del azul de
   supervisión, porque son dos trabajos distintos y conviene notarlo al
   entrar. */
.cab-tes{position:relative;overflow:hidden;border-radius:20px;padding:26px 30px;
  margin-bottom:20px;color:#fff;display:flex;gap:26px;align-items:center;
  flex-wrap:wrap;
  background:linear-gradient(135deg,#0f2c24 0%,#16443a 48%,#1d6350 100%);
  box-shadow:0 12px 32px -12px rgba(15,44,36,.55)}
.cab-tes::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 220px at 8% -30%,rgba(255,255,255,.16),transparent 62%),
             radial-gradient(520px 260px at 96% 130%,rgba(64,196,155,.22),transparent 60%)}
.cab-tes>*{position:relative}
.ct-saludo{flex:1 1 340px;min-width:0}
.ct-hola{margin:0 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#9fd8c4;font-weight:700}
.cab-tes h1{margin:0;font-size:31px;line-height:1.15;letter-spacing:-.02em;
  font-weight:750}
.ct-sub{margin:9px 0 0;font-size:14.5px;color:#cfe6dc;line-height:1.6}
.ct-sub b{color:#fff}
.ct-hoy{background:rgba(255,255,255,.16);border-radius:9px;padding:3px 10px}
.ct-movida{display:inline-block;margin-left:8px;background:rgba(255,214,120,.2);
  color:#ffe0a3;border-radius:8px;padding:2px 9px;font-size:12.5px}

/* El botón de bajar todo: es lo que más usa en la semana. */
.ct-bajar{flex:0 1 380px;display:flex;align-items:center;gap:15px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  border-radius:15px;padding:15px 18px;color:#fff;text-decoration:none;
  transition:background .18s,transform .18s,border-color .18s}
.ct-bajar:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);text-decoration:none}
.cb-ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:#fff;
  color:#16443a;display:grid;place-items:center;font-size:22px;font-weight:700}
.cb-texto{display:flex;flex-direction:column;min-width:0}
.cb-texto b{font-size:15.5px}
.cb-texto em{font-style:normal;font-size:12px;color:#bfdcd0;line-height:1.5;
  margin-top:3px}

/* Las cajas de arriba: una por empresa, con su avance. */
.tes-cajas{display:grid;gap:12px;margin-bottom:20px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tc-caja{display:flex;flex-direction:column;gap:5px;padding:15px 16px 13px;
  background:var(--tarjeta);border:1px solid var(--linea);
  border-top:4px solid var(--acento);border-radius:15px;color:inherit;
  text-decoration:none;box-shadow:var(--sombra);
  transition:transform .18s,box-shadow .18s}
.tc-caja:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);
  text-decoration:none}
.tc-caja.lista{background:var(--fondo2)}
.tcc-cab{display:flex;align-items:center;gap:9px;min-height:26px}
.tcc-cab img{max-height:24px;max-width:78px;object-fit:contain}
.tcc-etiqueta{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta3);font-weight:700;margin-left:auto}
.tcc-monto{font-size:23px;font-weight:750;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.tcc-monto.pagado{color:var(--bien)}
.tcc-pie{font-size:12px;color:var(--tinta3)}
.tcc-pie i{font-style:normal;color:var(--bien)}
.tcc-barra{height:5px;border-radius:3px;background:var(--fondo2);overflow:hidden;
  margin-top:4px}
.tcc-barra i{display:block;height:100%;background:var(--bien);border-radius:3px}

/* Cada caja, abierta: solicitudes con su botón de pagar y su desglose. */
.caja{background:var(--tarjeta);border:1px solid var(--linea);
  border-left:5px solid var(--acento);border-radius:16px;overflow:hidden;
  box-shadow:var(--sombra);margin-bottom:18px}
.caja-cab{display:flex;align-items:center;gap:15px;padding:15px 20px;
  border-bottom:1px solid var(--linea);flex-wrap:wrap}
.caja-cab{background:color-mix(in srgb, var(--acento) 7%, var(--tarjeta))}
@supports not (background:color-mix(in srgb,#000 7%,#fff)){
  .caja-cab{background:var(--fondo)}
}
.caja-cab img{max-height:34px;max-width:104px;object-fit:contain}
.cc-quien{min-width:0}
.cc-quien h2{margin:0;font-size:17px;letter-spacing:-.015em}
.cc-quien p{margin:2px 0 0;font-size:12.5px;color:var(--tinta3)}
.cc-dinero{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.cc-cifra{display:flex;flex-direction:column;text-align:right}
.cc-cifra b{font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cc-cifra em{font-style:normal;font-size:11px;color:var(--tinta3);
  text-transform:uppercase;letter-spacing:.06em}
.cc-cifra.ok b{color:var(--bien)}
.cc-cifra.fuera b{color:var(--grave)}

.caja-pagos{padding:14px;background:var(--fondo2);display:flex;
  flex-direction:column;gap:11px}
.pago-fila{background:var(--papel);border:1px solid var(--linea);
  border-radius:13px;padding:14px 16px;display:grid;gap:11px;
  grid-template-columns:minmax(180px,1.3fr) auto 1fr auto;align-items:center}
.pago-fila.pagada{opacity:.72;background:var(--fondo2)}
.pf-quien{min-width:0}
.pf-quien b{display:block;font-size:14.5px}
.pf-quien span{font-size:12.5px;color:var(--tinta3)}
.pf-nota{font-style:normal;color:#fab219;letter-spacing:1px;margin-left:6px}
.pf-cifras{display:flex;gap:20px}
.pf-cifras span{display:flex;flex-direction:column}
.pf-cifras b{font-size:15.5px;font-variant-numeric:tabular-nums}
.pf-cifras em{font-style:normal;font-size:11px;color:var(--tinta3)}
.pf-cifras .fuera b{color:var(--grave)}
.pf-gastos{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.pf-gastos span{font-size:11.5px;background:var(--fondo2);padding:3px 9px;
  border-radius:20px;color:var(--tinta2);white-space:nowrap}
.pf-acciones{display:flex;align-items:center;gap:13px;justify-self:end;
  flex-wrap:wrap}
.pf-excel,.pf-abrir{font-size:12.5px;white-space:nowrap}
.pf-pagar{display:flex;align-items:center;gap:10px;margin:0}
.boton-pagar{border:0;border-radius:10px;padding:10px 20px;font:inherit;
  font-size:14px;font-weight:700;color:#fff;background:var(--bien);
  cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px -2px rgba(15,157,88,.5);
  transition:filter .15s,transform .15s}
.boton-pagar:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* Estrellas de la fila: se pintan al pasar, como en el resto del portal. */
.pf-estrellas{display:inline-flex;flex-direction:row-reverse;gap:1px}
.pf-estrellas input{position:absolute;opacity:0;width:0;height:0}
.pf-estrellas label{cursor:pointer;font-size:17px;color:var(--linea);
  transition:color .12s}
.pf-estrellas label:hover,.pf-estrellas label:hover~label,
.pf-estrellas input:checked~label{color:#fab219}

.pf-fuera{grid-column:1/-1;margin:2px 0 0;padding:10px 14px;list-style:none;
  background:var(--fondo2);border-radius:10px;font-size:12.5px;
  color:var(--tinta2)}
.pf-fuera li{padding:3px 0}

.caja-gasto{padding:16px 20px;border-top:1px solid var(--linea)}
.cg-tit{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta3);font-weight:700}
.cg-mas{margin:8px 0 0;font-size:12.5px;color:var(--tinta3)}

/* La lista de semanas del lado derecho. */
.tes-sem{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;
  align-items:center;padding:10px 12px;border-radius:11px;color:inherit;
  text-decoration:none;border:1px solid var(--linea);margin-bottom:8px;
  background:var(--papel)}
.tes-sem:hover{border-color:var(--acento);text-decoration:none}
.tes-sem.cerrada{background:var(--fondo2)}
.ts-fecha{font-size:12.5px;font-weight:700;color:var(--tinta2)}
.ts-monto{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  text-align:right}
.ts-bajar{grid-row:1/3;font-size:15px;color:var(--tinta3)}
.ts-estado{grid-column:1/3;font-size:11.5px;color:var(--tinta3)}

/* ══════════════════════════════════════════════════════════════════
   EL CALENDARIO DE PAGOS
   ══════════════════════════════════════════════════════════════════ */
.cal-inst{margin:0 0 16px;font-size:13.5px;color:var(--tinta2);line-height:1.6}
.cal-semanas{display:flex;flex-direction:column;gap:9px}
.cal-fila{display:grid;gap:12px;align-items:end;padding:12px 14px;
  border:1px solid var(--linea);border-radius:13px;background:var(--papel);
  grid-template-columns:minmax(130px,auto) auto auto minmax(150px,1fr) auto auto}
.cal-fila.actual{border-color:var(--acento);box-shadow:0 0 0 3px rgba(35,44,71,.08)}
.cal-fila.pasada{opacity:.66}
.cal-fila.movida{background:#fffaf0;border-color:#e8c88a}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .cal-fila.movida{background:#241d10;border-color:#5c4620}
}
:root[data-tema='oscuro'] .cal-fila.movida{background:#241d10;border-color:#5c4620}
.cf-cuando{display:flex;flex-direction:column;gap:3px}
.cf-cuando b{font-size:13.5px;font-variant-numeric:tabular-nums}
.cf-tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--acento);border-radius:20px;
  padding:2px 9px;width:fit-content}
.cf-tag.pasada{background:var(--tinta3)}
.cf-tag.futura{background:transparent;color:var(--tinta3);border:1px solid var(--linea)}
.cf-campo{display:flex;flex-direction:column;gap:3px}
.cf-campo span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta3);font-weight:700}
.cf-campo input{padding:7px 10px;font:inherit;font-size:13px;
  border:1px solid var(--linea);border-radius:9px;background:var(--papel);
  color:var(--tinta)}
.cf-campo input:focus{outline:none;border-color:var(--acento)}
.cf-campo em{font-style:normal;font-size:11px;color:var(--tinta3)}
.cf-nota{padding:8px 11px;font:inherit;font-size:13px;border:1px solid var(--linea);
  border-radius:9px;background:var(--papel);color:var(--tinta);min-width:0}
.cf-nota:focus{outline:none;border-color:var(--acento)}
.cf-ok{border:0;border-radius:9px;padding:9px 16px;font:inherit;font-size:13px;
  font-weight:650;color:#fff;background:var(--acento);cursor:pointer}
.cf-ok:hover{filter:brightness(1.15)}
.cf-listo{font-size:12.5px;color:var(--bien);font-weight:650;white-space:nowrap}
.cal-pie{margin:14px 0 0;font-size:12.5px;color:var(--tinta3)}

/* La tira que ven todos los demás. */
.cal-tira{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;margin-bottom:16px;border-radius:12px;
  background:var(--tarjeta);border:1px solid var(--linea);font-size:13.5px}
.cal-tira.movida{background:#fffaf0;border-color:#e8c88a}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .cal-tira.movida{background:#241d10;border-color:#5c4620}
}
:root[data-tema='oscuro'] .cal-tira.movida{background:#241d10;border-color:#5c4620}
.ct-ico{font-size:16px}
.ct-dato b{color:var(--tinta3);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;margin-right:6px}
.ct-flecha{color:var(--tinta3)}
.ct-hoy{font-style:normal;background:var(--atencion);color:#fff;border-radius:20px;
  padding:1px 9px;font-size:11px;font-weight:700;margin-left:6px}
.ct-hoy.pago{background:var(--bien)}
.ct-aviso{margin-left:auto;font-size:12.5px;color:#8a5a1a}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .ct-aviso{color:#f0c079}
}
:root[data-tema='oscuro'] .ct-aviso{color:#f0c079}

@media (max-width:900px){
  .pago-fila{grid-template-columns:1fr}
  .pf-acciones{justify-self:stretch}
  .cal-fila{grid-template-columns:1fr 1fr}
  .cf-cuando,.cf-nota{grid-column:1/-1}
  .cab-tes h1{font-size:25px}
}

/* ══════════════════════════════════════════════════════════════════
   Correcciones y color — tesorería, equipo, calendario
   ══════════════════════════════════════════════════════════════════ */

/* La fila del pago en ÁREAS y no en columnas sueltas. Antes las acciones
   vivían en una columna estrecha con `justify-self:end`, y al no caber se
   desbordaban hacia la izquierda encima de los tipos de gasto: el texto se
   encimaba literalmente. Con áreas nombradas cada cosa tiene su renglón y no
   hay forma de que se pisen. */
.pago-fila{display:grid;gap:10px 20px;align-items:center;
  grid-template-columns:minmax(190px,1.4fr) auto minmax(220px,auto);
  grid-template-areas:
    "quien  cifras  acciones"
    "gastos gastos  gastos"
    "fuera  fuera   fuera"}
.pf-quien{grid-area:quien}
.pf-cifras{grid-area:cifras}
.pf-acciones{grid-area:acciones;justify-self:end;min-width:0;
  justify-content:flex-end}
.pf-gastos{grid-area:gastos}
.pf-fuera{grid-area:fuera}
.pf-archivos{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Los archivos, que es a lo que viene: como botones, no como texto suelto. */
.pf-excel,.pf-adjuntos{display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none;
  padding:6px 12px;border-radius:9px;border:1px solid var(--linea);
  background:var(--papel);color:var(--tinta2);transition:all .15s}
.pf-excel:hover{border-color:#0f9d58;color:#0f9d58;text-decoration:none;
  background:#eefaf3}
.pf-adjuntos:hover{border-color:#3b82c4;color:#3b82c4;text-decoration:none;
  background:#eef5fc}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .pf-excel:hover{background:#12261c}
  :root:not([data-tema='claro']) .pf-adjuntos:hover{background:#121e2c}
}
:root[data-tema='oscuro'] .pf-excel:hover{background:#12261c}
:root[data-tema='oscuro'] .pf-adjuntos:hover{background:#121e2c}
.pf-abrir{font-size:12.5px;white-space:nowrap}
.pf-gastos span{background:color-mix(in srgb,var(--acento) 12%,var(--fondo2));
  color:var(--tinta2)}
@supports not (background:color-mix(in srgb,#000 12%,#fff)){
  .pf-gastos span{background:var(--fondo2)}
}

/* Semana por semana: SIN cifras de dinero (sumar empresas no significa nada),
   con el avance del pago, que sí se puede leer de un vistazo. */
.tes-sem{display:grid;grid-template-columns:auto 1fr auto;gap:5px 12px;
  align-items:center;padding:11px 13px;border-radius:12px;color:inherit;
  text-decoration:none;border:1px solid var(--linea);margin-bottom:9px;
  background:var(--papel);transition:border-color .15s,transform .15s}
.tes-sem:hover{border-color:var(--bien);transform:translateX(2px);
  text-decoration:none}
.tes-sem.cerrada{background:#eefaf3;border-color:#bfe6d1}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .tes-sem.cerrada{background:#12261c;border-color:#26503a}
}
:root[data-tema='oscuro'] .tes-sem.cerrada{background:#12261c;border-color:#26503a}
.ts-fecha{font-size:13px;font-weight:700;color:var(--tinta)}
.ts-estado{font-size:12px;color:var(--tinta2)}
.ts-bajar{grid-row:1/3;font-size:16px;color:var(--tinta3)}
.ts-barra{grid-column:1/3;height:6px;border-radius:4px;background:var(--fondo2);
  overflow:hidden}
.ts-barra i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#3fbf84,#0f9d58)}

/* ══════════════════════════════════════════════════════════════════
   CÓMO VIENE EL EQUIPO — la parte relajada, igual en todos los perfiles
   ══════════════════════════════════════════════════════════════════ */
.equipo{display:flex;flex-direction:column;gap:9px}
.eq-fila{display:grid;gap:3px 12px;align-items:center;padding:10px 13px;
  border-radius:12px;border:1px solid var(--linea);background:var(--papel);
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"med quien datos" "med barra barra";
  transition:transform .15s,border-color .15s}
.eq-fila:hover{transform:translateX(2px);border-color:var(--acento)}
.eq-fila.apagada{opacity:.6;grid-template-areas:"med quien nada"}
.eq-medalla{grid-area:med;font-size:21px;line-height:1}
.eq-quien{grid-area:quien;min-width:0;display:flex;flex-direction:column}
.eq-quien b{font-size:14px}
.eq-quien em{font-style:normal;font-size:11.5px;color:var(--tinta3)}
.eq-datos{grid-area:datos;display:flex;gap:11px;font-size:12.5px;
  color:var(--tinta2);white-space:nowrap;flex-wrap:wrap;justify-content:flex-end}
.eq-estrellas{color:#d99a12;font-weight:650}
.eq-nada{grid-area:nada;font-size:12px;color:var(--tinta3);font-style:italic}
.eq-barra{grid-area:barra;height:5px;border-radius:3px;background:var(--fondo2);
  overflow:hidden;margin-top:3px}
.eq-barra i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#f0a020,#3fbf84)}

/* Ideas y comentarios, en todos los perfiles. */
.ideas{border-top:4px solid #a66750}
.ideas-inst{margin:0 0 12px;font-size:13px;color:var(--tinta2);line-height:1.55}
.ideas-forma textarea{width:100%;padding:10px 12px;border:1px solid var(--linea);
  border-radius:11px;font:inherit;font-size:13.5px;background:var(--papel);
  color:var(--tinta);resize:vertical}
.ideas-forma textarea:focus{outline:none;border-color:#a66750}
.ideas-forma button{margin-top:9px}
.ideas .mias{margin:16px 0 8px;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta3);font-weight:700}
.ideas .mia{font-size:12.5px;color:var(--tinta2);padding:9px 12px;
  background:var(--fondo2);border-radius:10px;margin-bottom:7px;line-height:1.5}
.ideas .mia em{font-style:normal;color:var(--tinta3);font-size:11.5px}
.ideas .respuesta{margin-top:6px;padding-top:6px;
  border-top:1px solid var(--linea);color:var(--tinta)}

/* ══════════════════════════════════════════════════════════════════
   CALENDARIO — con color y con el aviso pegado al cambio
   ══════════════════════════════════════════════════════════════════ */
.calendario{border-top:4px solid #3b82c4}
.cal-fila{display:grid;gap:12px;align-items:end;padding:13px 15px;
  border:1px solid var(--linea);border-radius:14px;background:var(--papel);
  grid-template-columns:minmax(140px,auto) auto auto minmax(150px,1fr) auto auto;
  transition:border-color .15s,box-shadow .15s}
.cal-fila.actual{border-color:#3b82c4;box-shadow:0 0 0 3px rgba(59,130,196,.13)}
.cal-fila.movida{background:linear-gradient(180deg,#fffaf0,#fff6e4);
  border-color:#e8b661}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .cal-fila.movida{background:#241d10;border-color:#5c4620}
}
:root[data-tema='oscuro'] .cal-fila.movida{background:#241d10;border-color:#5c4620}
.cf-cuando b{font-size:12px;color:var(--tinta3);font-weight:600}
.cf-cuando b i{font-style:normal}
.cal-fila.movida .cf-cuando b{color:#8a5a1a;font-weight:750;font-size:12.5px}
.cf-tag.ahora{background:linear-gradient(135deg,#3b82c4,#2a5c8a)}
.cf-campo.corte input:focus{border-color:#f0a020;
  box-shadow:0 0 0 3px rgba(240,160,32,.18)}
.cf-campo.pago input:focus{border-color:#0f9d58;
  box-shadow:0 0 0 3px rgba(15,157,88,.18)}
.cf-campo.corte span{color:#b07b18}
.cf-campo.pago span{color:#0f9d58}
.cf-ok{background:linear-gradient(135deg,#3b82c4,#2a5c8a)}
.cf-estado{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.cf-avisar{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12.5px;font-weight:650;padding:7px 13px;border-radius:9px;
  color:#fff;background:linear-gradient(135deg,#e08a1e,#c46a12);
  text-decoration:none;box-shadow:0 2px 8px -2px rgba(196,106,18,.5)}
.cf-avisar:hover{filter:brightness(1.1);text-decoration:none}

/* La tira de todos, con color según lo que toca hoy. */
.cal-tira{background:linear-gradient(135deg,var(--tarjeta),var(--fondo2))}
.cal-tira.movida{background:linear-gradient(135deg,#fffaf0,#fff2dd)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .cal-tira.movida{background:#241d10}
}
:root[data-tema='oscuro'] .cal-tira.movida{background:#241d10}

/* El aviso ya escrito. */
.avisar-fechas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:18px 20px;border-radius:15px;margin:4px 0 0;
  background:linear-gradient(135deg,#fffaf0,#fff2dd);border:1px solid #e8b661}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .avisar-fechas{background:#241d10;border-color:#5c4620}
}
:root[data-tema='oscuro'] .avisar-fechas{background:#241d10;border-color:#5c4620}
.af-dato{display:flex;flex-direction:column;gap:2px}
.af-et{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:#b07b18}
.af-dato.pago .af-et{color:#0f9d58}
.af-dato b{font-size:17px;letter-spacing:-.015em}
.af-dato em{font-style:normal;font-size:12px;color:var(--tinta3)}
.af-flecha{font-size:20px;color:#c9a15e}
.avisar-nota{margin:12px 0 0;font-size:13.5px;color:var(--tinta2);font-style:italic}
.avisar-cuerpo{margin:10px 0 0;padding:14px 16px;background:var(--fondo2);
  border-radius:11px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--tinta2)}

@media (max-width:900px){
  .cal-fila{grid-template-columns:1fr 1fr}
  .cf-cuando,.cf-nota,.cf-estado{grid-column:1/-1}
  .cf-estado{flex-direction:row;align-items:center}
}

/* ══════════════════════════════════════════════════════════════════
   El botón del tema
   ══════════════════════════════════════════════════════════════════ */
.tema{background:transparent;border:1px solid var(--linea);color:var(--tinta2);
  border-radius:20px;padding:5px 13px;font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.tema:hover{border-color:var(--acento);color:var(--tinta);background:var(--fondo2);
  filter:none}
.tema-ico{font-size:14px;line-height:1}

/* ══════════════════════════════════════════════════════════════════
   Cómo viene el equipo — de vuelta a tabla, con emojis y flecha
   ══════════════════════════════════════════════════════════════════ */
.tabla-equipo{width:100%;border-collapse:collapse;font-size:13px}
.tabla-equipo th{text-align:left;font-size:12px;font-weight:700;
  color:var(--tinta3);padding:0 6px 8px;border-bottom:1px solid var(--linea)}
.tabla-equipo th.n{text-align:right;font-size:14px}
.tabla-equipo td{padding:9px 6px;border-bottom:1px solid var(--linea);
  vertical-align:middle}
.tabla-equipo tr:last-child td{border-bottom:0}
.tabla-equipo tr:hover td{background:var(--fondo2)}
.tabla-equipo td.n{text-align:right;font-variant-numeric:tabular-nums}
.tabla-equipo b{font-size:13.5px;display:block;line-height:1.3}
.te-donde{font-size:11px;color:var(--tinta3)}
.te-nada{color:var(--tinta3);font-size:12.5px;font-style:italic;text-align:right}
.tabla-equipo tr.apagada{opacity:.62}
.te-limpias{display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:12px;font-weight:700}
.te-limpias.bien{background:#dcf5e6;color:#0a6b3c}
.te-limpias.media{background:#fdefd4;color:#8a5a1a}
.te-limpias.baja{background:#f6e0e0;color:#933}
.te-estrella{color:#d99a12;font-size:13.5px;display:inline!important}
.te-sin{color:var(--tinta3)}
.te-ir{width:24px;text-align:right}
.te-ir a{display:inline-block;color:var(--tinta3);font-size:16px;
  text-decoration:none;transition:transform .15s,color .15s}
.te-ir a:hover{color:var(--acento);transform:translateX(3px);text-decoration:none}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .te-limpias.bien{background:#15321f;color:#7fd6a3}
  :root:not([data-tema='claro']) .te-limpias.media{background:#332812;color:#f0c079}
  :root:not([data-tema='claro']) .te-limpias.baja{background:#331c1c;color:#f0a3a3}
}
:root[data-tema='oscuro'] .te-limpias.bien{background:#15321f;color:#7fd6a3}
:root[data-tema='oscuro'] .te-limpias.media{background:#332812;color:#f0c079}
:root[data-tema='oscuro'] .te-limpias.baja{background:#331c1c;color:#f0a3a3}

/* ══════════════════════════════════════════════════════════════════
   El renglón del calendario ya no se corta
   ══════════════════════════════════════════════════════════════════
   Al aparecer «Avisar a todos» la fila crecía más que su contenedor y el
   botón quedaba cortado contra el borde de la tarjeta. Ahora las fechas
   ocupan lo que necesitan, la nota se encoge y el estado se va a su propio
   renglón cuando no cabe. */
.cal-fila{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;
  padding:14px 16px}
.cf-cuando{flex:0 0 auto;min-width:120px}
.cf-campo{flex:0 0 auto}
.cf-campo input{width:150px}
.cf-nota{flex:1 1 180px;min-width:0}
.cf-ok{flex:0 0 auto}
.cf-estado{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;
  margin-left:auto}
.cal-fila.movida .cf-estado{width:100%;justify-content:flex-end}

/* ══════════════════════════════════════════════════════════════════
   Las tarjetas de empresa del encabezado de tesorería
   ══════════════════════════════════════════════════════════════════ */
.cs-emp.pagada{background:rgba(120,230,180,.16);border-color:rgba(120,230,180,.34)}
.ce-barra{height:4px;border-radius:3px;background:rgba(255,255,255,.18);
  overflow:hidden;margin-top:9px}
.ce-barra i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#6fe0aa,#33c98a)}
.ct-arriba{position:relative;display:flex;gap:26px;align-items:center;
  flex-wrap:wrap;width:100%}
.cab-tes{display:block}
.cab-tes .cs-empresas{border-top-color:rgba(255,255,255,.16)}

/* ══════════════════════════════════════════════════════════════════
   Un poco más de cuerpo en general
   ══════════════════════════════════════════════════════════════════
   Con el fondo más denso, las tarjetas necesitan menos sombra y más borde:
   así se ven apoyadas y no flotando. */
.tarjeta{border:1px solid var(--linea)}
.pieta a{font-size:12.5px}

/* ══════════════════════════════════════════════════════════════════
   HUECOS DEL MODO OSCURO
   ══════════════════════════════════════════════════════════════════
   Fondos claros escritos a mano que se quedaron sin versión oscura: encima
   les tocaba texto claro y quedaban ilegibles —el aviso rosa pálido con
   letras blancas era el caso más visible—. Salieron de un recorrido de la
   hoja buscando `background` con un color claro fijo cuyo selector no
   apareciera en ningún bloque oscuro. */

@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .aviso.urgente{background:#2c1a1a}
  :root:not([data-tema='claro']) .aviso-error{background:#2c1a1a;border-color:#5a2b2b;color:#f5b5b5}
  :root:not([data-tema='claro']) .etapa.hecha{background:#16301a}
  :root:not([data-tema='claro']) .nota-parcial{background:#2e2510;color:#f0d99a}
  :root:not([data-tema='claro']) .tarjeta-entrada{background:var(--tarjeta)}
  :root:not([data-tema='claro']) .tarjeta-entrada input{background:var(--papel);color:var(--tinta)}
  :root:not([data-tema='claro']) .sn-quitar:hover{background:#3a2f14}
  :root:not([data-tema='claro']) .bt-boton{background:var(--papel);color:var(--tinta)}
  :root:not([data-tema='claro']) .s-visor iframe{background:var(--papel)}
}
:root[data-tema='oscuro'] .aviso.urgente{background:#2c1a1a}
:root[data-tema='oscuro'] .aviso-error{background:#2c1a1a;border-color:#5a2b2b;color:#f5b5b5}
:root[data-tema='oscuro'] .etapa.hecha{background:#16301a}
:root[data-tema='oscuro'] .nota-parcial{background:#2e2510;color:#f0d99a}
:root[data-tema='oscuro'] .tarjeta-entrada{background:var(--tarjeta)}
:root[data-tema='oscuro'] .tarjeta-entrada input{background:var(--papel);color:var(--tinta)}
:root[data-tema='oscuro'] .sn-quitar:hover{background:#3a2f14}
:root[data-tema='oscuro'] .bt-boton{background:var(--papel);color:var(--tinta)}
:root[data-tema='oscuro'] .s-visor iframe{background:var(--papel)}

/* Los logos del pie.
   Dos de los ocho traen fondo opaco dentro del propio PNG (HNL y CICSA), así
   que en oscuro salían como rectángulos claros flotando entre los demás. En
   vez de pelear con cada archivo, en oscuro TODOS van sobre la misma placa
   clara: se ven parejos y además legibles, que es lo que se busca. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .tira-logos img{
    filter:grayscale(1);opacity:.55;background:#eef1f6;
    border-radius:8px;padding:6px 10px;box-sizing:content-box}
  :root:not([data-tema='claro']) .tira-logos img:hover{filter:none;opacity:1;background:#fff}
}
:root[data-tema='oscuro'] .tira-logos img{
  filter:grayscale(1);opacity:.55;background:#eef1f6;
  border-radius:8px;padding:6px 10px;box-sizing:content-box}
:root[data-tema='oscuro'] .tira-logos img:hover{filter:none;opacity:1;background:#fff}

/* ══════════════════════════════════════════════════════════════
   ELEGIR LA SEMANA QUE SE ESTÁ TRABAJANDO

   Normalmente es la de hoy y nadie toca esto. Existe para dos cosas: cargar
   el historial de las semanas que ya pasaron —para que quien entre por
   primera vez no encuentre una pantalla en blanco— y subir tarde lo de la
   semana que acaba de cerrar.

   Va junto al título de la sección y no dentro del formulario: es una
   decisión previa a escoger el archivo, no un paso más de la subida.
   ══════════════════════════════════════════════════════════════ */
.cabeza-seccion{display:flex;align-items:center;justify-content:space-between;
  gap:12px 18px;flex-wrap:wrap;margin:30px 0 14px}
.cabeza-seccion .titulo-seccion{margin:0}

.elige-semana{display:flex;align-items:center;gap:9px}
.elige-semana label{font-size:11.5px;font-weight:650;color:var(--tinta3);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.elige-semana select{font:inherit;font-size:13px;font-weight:600;
  color:var(--tinta);background:var(--papel);border:1px solid var(--linea);
  border-radius:9px;padding:7px 11px;cursor:pointer;
  max-width:min(340px,58vw);box-shadow:var(--sombra)}
.elige-semana select:hover{border-color:var(--tinta3)}
.elige-semana select:focus-visible{outline:2px solid var(--acento);
  outline-offset:1px}

/* Cuando NO es la semana de hoy hay que decirlo fuerte: es la diferencia
   entre cargar historial y sembrar una solicitud en la semana equivocada. */
.fuera-de-semana{background:#fff6e0;border:1px solid #f2d68a;border-radius:11px;
  padding:12px 15px;margin:0 0 16px;font-size:13.5px;color:#6b4e00}
.fuera-de-semana a{color:inherit;font-weight:650;margin-left:6px}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .fuera-de-semana{background:#2e2510;
    border-color:#5a4a1e;color:#f0d99a}
}
:root[data-tema='oscuro'] .fuera-de-semana{background:#2e2510;
  border-color:#5a4a1e;color:#f0d99a}

@media (max-width:620px){
  .cabeza-seccion{align-items:flex-start;flex-direction:column;gap:9px}
  .elige-semana{width:100%}
  .elige-semana select{flex:1;max-width:none}
}

/* ══════════════════════════════════════════════════════════════
   COMPROBACIÓN DE CAJA

   Dos piezas: la casilla que abre el apartado al subir, y el resumen de la
   revisión. Van visualmente separadas de la solicitud a propósito —otro
   trámite, otro responsable— pero con el mismo lenguaje de tarjetas, para
   que no parezca un módulo pegado con cinta.
   ══════════════════════════════════════════════════════════════ */
.marca-comprobacion{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.marca-comprobacion input{margin-top:4px;flex:none}
.marca-comprobacion .ds{display:block;margin-top:2px}

.zona-caja{margin-top:13px;padding:14px 16px;border-radius:11px;
  background:var(--fondo2);border:1px dashed var(--linea);
  display:flex;flex-direction:column;gap:7px}
.zona-caja input[type=file]{margin-top:4px}
.nota-caja{margin:2px 0 0;font-size:12.5px}

/* El resumen: cuatro cifras que se leen de un golpe. */
.caja-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px}
.caja-cifras>div{display:flex;flex-direction:column;gap:1px;padding:11px 13px;
  border-radius:10px;background:var(--fondo2)}
.caja-cifras b{font-size:20px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.caja-cifras span{font-size:11.5px;color:var(--tinta3);font-weight:600;
  letter-spacing:.02em}
.caja-cifras .falta b{color:var(--atencion)}

.caja-aviso{margin:13px 0 0;padding:11px 14px;border-radius:10px;
  font-size:13.5px;background:#fff6e0;border:1px solid #f2d68a;color:#6b4e00}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .caja-aviso{background:#2e2510;
    border-color:#5a4a1e;color:#f0d99a}
}
:root[data-tema='oscuro'] .caja-aviso{background:#2e2510;border-color:#5a4a1e;
  color:#f0d99a}

.caja-hoja .seccion{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.caja-quien{font-size:12.5px;font-weight:600;color:var(--tinta3);
  letter-spacing:.01em}

.caja-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.caja-lista li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.5;padding-left:11px;border-left:3px solid var(--linea)}
.caja-lista li.sev-rojo{border-left-color:var(--grave)}
.caja-lista li.sev-ambar{border-left-color:var(--atencion)}
.caja-cod{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--tinta3);padding-top:2px;font-variant-numeric:tabular-nums}
.caja-msg{color:var(--tinta2)}
.caja-msg b{color:var(--tinta)}

/* ══════════════════════════════════════════════════════════════
   EL COMPROBANTE DEL PAGO, EN EL TABLERO DE TESORERÍA

   Se adjunta desde el mismo renglón, sin abrir la solicitud: pagar es el
   movimiento más repetido del jueves y sacarlo de ahí lo volvería un trámite.
   ══════════════════════════════════════════════════════════════ */
.pf-adjunta{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--tinta3);padding:5px 9px;
  border:1px dashed var(--linea);border-radius:8px;white-space:nowrap}
.pf-adjunta:hover{color:var(--tinta);border-color:var(--tinta3)}
.pf-adjunta input{display:none}
.pf-adjunta.falta{border-color:var(--atencion);color:var(--atencion)}
/* Cuando ya se eligió archivo, el navegador no lo dice —el input está
   oculto—; el foco del teclado es la única señal, y hay que dejarla ver. */
.pf-adjunta:focus-within{outline:2px solid var(--acento);outline-offset:1px}

.pf-comprobado{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  font-weight:600;color:var(--bien);white-space:nowrap}

/* ══════════════════════════════════════════════════════════════
   CUANDO ALGUIEN DICE QUE EL SISTEMA SE EQUIVOCÓ

   El pulgar de un ámbar tiene que ser discreto: a quien lo ve no le cambia
   nada, y si pesa visualmente compite con lo que sí tiene que hacer. Se
   asoma al pasar el ratón y se queda puesto cuando alguien lo eligió.
   ══════════════════════════════════════════════════════════════ */
.detalle li{position:relative}
.pulgares{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle;
  opacity:.28;transition:opacity .15s}
.detalle li:hover .pulgares,
.pulgares:focus-within,
.detalle li.opinado .pulgares{opacity:1}
.pulgares form{display:inline}
.pulgares button{background:none;border:1px solid transparent;border-radius:7px;
  cursor:pointer;font-size:13px;line-height:1;padding:3px 5px;filter:grayscale(1)}
.pulgares button:hover{background:var(--fondo2);filter:none}
.pulgares button.puesto{filter:none;background:var(--fondo2);
  border-color:var(--linea)}

/* La objeción formal de un rojo: sí pesa, porque detiene una solicitud. */
.objetar{margin-top:9px;border:1px solid var(--linea);border-radius:10px;
  background:var(--fondo2);padding:9px 12px}
.objetar>summary{cursor:pointer;font-size:12.5px;font-weight:650;
  color:var(--tinta2);list-style:none}
.objetar>summary::-webkit-details-marker{display:none}
.objetar>summary:hover{color:var(--tinta)}
.objetar textarea{width:100%;margin:8px 0;font:inherit;font-size:13px;
  padding:9px 11px;border:1px solid var(--linea);border-radius:9px;
  background:var(--papel);color:var(--tinta);resize:vertical}
.boton-objetar{font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
  padding:7px 14px;border-radius:9px;border:1px solid var(--acento);
  background:var(--acento);color:#fff}
.esperando{margin:8px 0 0}
.resuelta{margin:9px 0 0;padding:9px 11px;border-radius:9px;font-size:13px}
.resuelta.a-favor{background:#e7f6ec;border:1px solid #b7e0c4;color:#155c2c}
.resuelta.en-contra{background:#fdecec;border:1px solid #f3c2c2;color:#8c2020}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .resuelta.a-favor{background:#122a1a;
    border-color:#255c37;color:#93d7a9}
  :root:not([data-tema='claro']) .resuelta.en-contra{background:#2c1414;
    border-color:#5e2626;color:#eba0a0}
}
:root[data-tema='oscuro'] .resuelta.a-favor{background:#122a1a;
  border-color:#255c37;color:#93d7a9}
:root[data-tema='oscuro'] .resuelta.en-contra{background:#2c1414;
  border-color:#5e2626;color:#eba0a0}

/* Mandarla con los rojos asumidos. Se ve seria a propósito: es una firma. */
.bajo-responsabilidad{margin-top:14px;padding:14px 16px;border-radius:11px;
  background:#fff6e0;border:1px solid #f2d68a;color:#6b4e00}
.bajo-responsabilidad p{margin:0 0 11px;font-size:13.5px;line-height:1.55}
.bajo-responsabilidad .ds{margin:10px 0 0;color:inherit;opacity:.85}
.bajo-responsabilidad a{color:inherit;font-weight:650}
.boton-responsabilidad{font:inherit;font-size:13.5px;font-weight:650;
  cursor:pointer;padding:10px 18px;border-radius:10px;border:1px solid #b8860b;
  background:#b8860b;color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .bajo-responsabilidad{background:#2e2510;
    border-color:#5a4a1e;color:#f0d99a}
}
:root[data-tema='oscuro'] .bajo-responsabilidad{background:#2e2510;
  border-color:#5a4a1e;color:#f0d99a}

/* La pantalla donde se resuelven */
.objecion{border-left:4px solid var(--grave)}
.ob-cab{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  margin-bottom:10px}
.ob-cod{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  padding:4px 9px;border-radius:7px;background:var(--fondo2);color:var(--tinta2)}
.ob-quien{flex:1;min-width:190px;display:flex;flex-direction:column;gap:1px}
.ob-quien span{font-size:12.5px;color:var(--tinta3)}
.ob-asumida{color:var(--atencion);font-weight:650}
.ob-ver{font-size:12.5px;font-weight:600;white-space:nowrap}
.ob-regla{margin:0;font-weight:650;font-size:14.5px}
.ob-donde{margin:3px 0 11px;font-size:12.5px;color:var(--tinta3)}
.ob-uuid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.ob-dice{margin:0 0 13px;padding:11px 14px;border-left:3px solid var(--linea);
  background:var(--fondo2);border-radius:0 9px 9px 0;font-size:13.5px;
  line-height:1.6;color:var(--tinta)}
.ob-resolver textarea{width:100%;font:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--linea);border-radius:9px;background:var(--papel);
  color:var(--tinta);resize:vertical;margin-bottom:10px}
.ob-botones{display:flex;gap:9px;flex-wrap:wrap}
.ob-botones button{font:inherit;font-size:13px;font-weight:650;cursor:pointer;
  padding:9px 15px;border-radius:9px;border:1px solid var(--linea);
  background:var(--papel);color:var(--tinta)}
.ob-si:hover{border-color:var(--bien);color:var(--bien)}
.ob-no:hover{border-color:var(--grave);color:var(--grave)}

.tabla-scroll{overflow-x:auto}
.tabla-aprende{width:100%;border-collapse:collapse;font-size:13px}
.tabla-aprende th{text-align:left;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta3);padding:0 10px 8px;
  border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla-aprende td{padding:9px 10px;border-bottom:1px solid var(--linea)}
.tabla-aprende .n{text-align:right;font-variant-numeric:tabular-nums}
.tabla-aprende .descripcion{color:var(--tinta2)}
.tabla-aprende tr.molesta{background:#fff6e0}
.tabla-aprende tr.molesta td{color:#6b4e00}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .tabla-aprende tr.molesta{background:#2e2510}
  :root:not([data-tema='claro']) .tabla-aprende tr.molesta td{color:#f0d99a}
}
:root[data-tema='oscuro'] .tabla-aprende tr.molesta{background:#2e2510}
:root[data-tema='oscuro'] .tabla-aprende tr.molesta td{color:#f0d99a}

/* ══════════════════════════════════════════════════════════════
   «¿POR QUÉ?» — DE DÓNDE SALE LA REGLA

   Cerrado por omisión: casi nunca hace falta, y cuando hace falta hace mucha
   falta —hay que llamarle a un proveedor a pedirle que reexpida—. Ahí lo que
   zanja la discusión es el artículo, así que el fundamento va primero y las
   ligas después.
   ══════════════════════════════════════════════════════════════ */
.porque{margin:0 0 9px;font-size:12.5px}
.porque>summary{cursor:pointer;display:inline-block;color:var(--tinta3);
  font-weight:650;padding:3px 9px;border:1px solid var(--linea);
  border-radius:8px;list-style:none;user-select:none}
.porque>summary::-webkit-details-marker{display:none}
.porque>summary:hover{color:var(--tinta);border-color:var(--tinta3)}
.porque[open]>summary{margin-bottom:8px;color:var(--tinta)}
.pq-fund{margin:0;font-weight:650;color:var(--tinta);font-size:13px}
.pq-nota{margin:5px 0 0;color:var(--tinta2);line-height:1.55}
.pq-ligas{margin:8px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.pq-ligas a{font-weight:600;white-space:nowrap}

/* El correo de una objeción, pegado a su explicación. */
.mandar-correo{margin:10px 0 0;padding:9px 12px;border-radius:9px;
  background:var(--papel);border:1px solid var(--linea);font-size:12.5px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mandar-correo a{font-weight:650}
.mandar-correo .ds{flex-basis:100%;margin:0;font-size:11.5px}

/* El archivo de práctica: sólo lo ve quien no ha subido nada todavía. */
.practica{margin:0 0 16px;padding:13px 16px;border-radius:11px;font-size:13.5px;
  line-height:1.6;background:var(--fondo2);border:1px dashed var(--linea);
  color:var(--tinta2)}
.practica b{color:var(--tinta)}
.practica a{font-weight:650}

/* El correo de bienvenida, listo para copiar. */
.cuerpo-correo{width:100%;font:inherit;font-size:12.5px;line-height:1.6;
  padding:14px 16px;border:1px solid var(--linea);border-radius:10px;
  background:var(--fondo2);color:var(--tinta);resize:vertical;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.pedir-clave{display:flex;gap:9px;flex-wrap:wrap}
.pedir-clave input{flex:1;min-width:230px;font:inherit;font-size:13.5px;
  padding:9px 12px;border:1px solid var(--linea);border-radius:9px;
  background:var(--papel);color:var(--tinta)}
.aviso-clave{background:#fff6e0;border-color:#f2d68a;color:#6b4e00}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .aviso-clave{background:#2e2510;
    border-color:#5a4a1e;color:#f0d99a}
}
:root[data-tema='oscuro'] .aviso-clave{background:#2e2510;border-color:#5a4a1e;
  color:#f0d99a}

/* El aviso de «está en la fila»: texto arriba, el botón debajo. Con el
   formulario a media frase, el navegador partía las oraciones en columnas. */
.repo-aviso.espera{display:flex;flex-direction:column;align-items:flex-start;
  gap:8px}
.repo-aviso.espera p{margin:0;max-width:74ch}
.repo-aviso .repo-cancelar{margin:0}

/* ── La hoja en PDF, dentro de la banda del veredicto ──────────────
   Va en blanco translúcido y no en un color propio: la banda ya es roja,
   ámbar o verde según cómo salió la solicitud, y un botón con su propio color
   pelearía con ese semáforo, que es lo primero que hay que leer. */
.veredicto h2,.veredicto p{padding-right:230px}
.boton-hoja{position:absolute;right:22px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);
  color:#fff;border-radius:9px;padding:10px 16px;font-weight:600;
  font-size:13.5px;text-decoration:none;white-space:nowrap;backdrop-filter:blur(2px)}
.boton-hoja:hover{background:rgba(255,255,255,.34);text-decoration:none}
@media (max-width:720px){
  /* En el teléfono no hay hueco a la derecha: se pone debajo, a lo ancho. */
  .veredicto h2,.veredicto p{padding-right:0}
  .boton-hoja{position:static;transform:none;display:block;margin-top:14px;
    text-align:center}
}

/* ══════════════════════════════════════════════════════════════
   EL CONTROL DE GASTOS DE COCOS, EN DOS COLUMNAS

   Los renglones a la izquierda, las fotos a la derecha, a la misma altura.
   No se emparejan solas —en su archivo hay importes repetidos el mismo día—
   así que lo que se optimiza es poder mirarlas juntas, no adivinar.
   ══════════════════════════════════════════════════════════════ */
.cg-semana{font-size:12.5px;font-weight:600;color:var(--tinta3);
  margin-left:10px;letter-spacing:0}
.cg-cuadro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:16px;align-items:start}
@media (max-width:900px){.cg-cuadro{grid-template-columns:1fr}}

.cg-total{float:right;font-variant-numeric:tabular-nums;color:var(--tinta2)}
.cg-descuadre{margin:0 0 12px;padding:9px 12px;border-radius:9px;
  font-size:13px;background:#fff6e0;border:1px solid #f2d68a;color:#6b4e00}
.cg-grupo{margin:14px 0 7px;font-size:12px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--tinta3);
  display:flex;justify-content:space-between;align-items:baseline}
.cg-grupo.mirar{color:var(--atencion)}
.cg-grupo span{font-variant-numeric:tabular-nums}

.cg-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:2px}
.cg-lista li{display:flex;gap:11px;align-items:center;padding:9px 11px;
  border-radius:9px;font-size:13.5px}
.cg-lista.sueltos li{padding:6px 11px;font-size:12.5px;color:var(--tinta3)}
.cg-fila{background:var(--fondo2);border-left:3px solid var(--atencion)}
.cg-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cg-datos b{font-size:13.5px;line-height:1.3}
.cg-concepto{font-size:12.5px;color:var(--tinta2)}
.cg-meta{font-size:11.5px;color:var(--tinta3)}
.cg-meta .fuera{color:var(--grave)}
.cg-prov{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cg-fact{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.cg-monto{flex:none;font-weight:650;font-variant-numeric:tabular-nums}

.cg-faltan{float:right;font-size:12px;font-weight:650;color:var(--atencion)}
.cg-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px}
.cg-foto{display:flex;flex-direction:column;gap:5px;text-decoration:none;
  border:1px solid var(--linea);border-radius:10px;overflow:hidden;
  background:var(--papel)}
.cg-foto:hover{border-color:var(--acento)}
.cg-foto img{width:100%;height:96px;object-fit:cover;display:block}
.cg-foto span{font-size:10.5px;color:var(--tinta3);padding:0 7px 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-foto.plano{align-items:center;justify-content:center;min-height:96px;
  padding-top:14px}
.cg-ico{font-size:26px;padding:0}

/* El saldo: la cifra que importa, arriba de todo. */
.saldo-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:12px}
.saldo-cifras>div{display:flex;flex-direction:column;gap:1px;padding:12px 14px;
  border-radius:10px;background:var(--fondo2)}
.saldo-cifras b{font-size:21px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.saldo-cifras span{font-size:11.5px;color:var(--tinta3);font-weight:600}
.saldo.debe .destacado b{color:var(--atencion)}
.saldo.a-favor .destacado b{color:var(--bien)}
.saldo-frase{margin:0;font-size:14px;font-weight:600}

.ir-caratula{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.ir-caratula .ds{display:block;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   EL CONTROL DE GASTOS, ARRIBA DE TODO

   Donde hay carátula, ahí va la mayor parte del dinero. Estaba al final en
   una tarjeta discreta y se leía como un anexo. Toda la tarjeta es el enlace
   —no un botón al margen— porque lo que hay que invitar es a entrar.
   ══════════════════════════════════════════════════════════════ */
.gastos-primero{display:block;text-decoration:none;color:inherit;
  margin-bottom:18px;border-left:5px solid var(--acento);
  transition:border-color .15s,transform .1s}
.gastos-primero:hover{border-left-color:#4a6b8c;transform:translateY(-1px)}
.gastos-primero.atencion{border-left-color:var(--atencion)}
.gp-cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:13px}
.gp-cab .seccion{margin:0}
.gp-semana{font-size:12.5px;font-weight:600;color:var(--tinta3)}
.gp-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:11px}
.gp-cifras>div{display:flex;flex-direction:column;gap:1px;padding:12px 14px;
  border-radius:10px;background:var(--fondo2)}
.gp-cifras b{font-size:21px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.gp-cifras span{font-size:11.5px;color:var(--tinta3);font-weight:600}
.gp-cifras .falta b{color:var(--atencion)}
.gp-pie{margin:13px 0 0;font-size:13.5px;color:var(--tinta2)}
.gp-pie b{color:var(--acento);margin-left:6px}
.gastos-primero.atencion .gp-pie{color:var(--atencion);font-weight:600}

/* La comprobación externa se enseña pero no suma: hay que decirlo donde se ve,
   o quien revisa suma mentalmente algo que no salió de la caja. */
.caja-externa{display:inline-block;font-size:11px;font-weight:650;
  padding:2px 9px;border-radius:20px;background:var(--fondo2);
  color:var(--tinta3);letter-spacing:0;text-transform:none}

/* Las cajas, arriba y una por una. A quien hay que pedirle el comprobante es
   a alguien concreto, así que el nombre va primero y el número después. */
.cajas-primero{display:block;text-decoration:none;color:inherit;
  margin-bottom:18px;border-left:5px solid var(--acento)}
.cajas-primero:hover{border-left-color:#4a6b8c}
.cj-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:10px}
.cj{display:flex;flex-direction:column;gap:1px;padding:11px 13px;
  border-radius:10px;background:var(--fondo2);
  border-left:3px solid var(--atencion)}
.cj.ok{border-left-color:var(--bien)}
.cj.grave{border-left-color:var(--grave)}
.cj.externa{border-left-color:var(--linea);opacity:.72}
.cj b{font-size:13.5px;line-height:1.3}
.cj-hoja{font-size:11px;font-weight:650;color:var(--tinta3);
  letter-spacing:.03em;text-transform:uppercase}
.cj-estado{font-size:12.5px;color:var(--tinta2);margin-top:3px}
.cj.ok .cj-estado{color:var(--bien)}
.cj.grave .cj-estado{color:var(--grave);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   EL RECADO DEL SUPERVISOR

   Alguien miró la solicitud y dejó dicho algo antes de que se vuelva a
   subir. Si se ve como una tarjeta más, se sube el archivo sin leerlo y el
   recado no sirvió de nada — que es exactamente lo que este portal vino a
   quitar. Se le da el peso que tiene: color propio, borde ancho y una
   respiración al aparecer, para que la vista vaya ahí primero.
   ══════════════════════════════════════════════════════════════ */
.recado-fuerte{border:2px solid var(--atencion);border-left-width:6px;
  background:#fffaf0;box-shadow:0 3px 14px -4px rgba(240,160,32,.45);
  animation:recado-entra .5s ease-out}
@keyframes recado-entra{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.recado-fuerte{animation:none}}
.recado-cab{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  color:#8a5a00;font-size:15.5px}
.recado-urge{font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 10px;border-radius:20px;
  background:var(--atencion);color:#fff}
.recado-fuerte .obs{border-left:3px solid var(--atencion);padding-left:13px}
.recado-fuerte .tit{font-size:14.5px}
.recado-fuerte .acciones .suave{border-color:var(--atencion);
  color:#8a5a00;font-weight:650}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .recado-fuerte{background:#2b2410;
    box-shadow:0 3px 14px -4px rgba(0,0,0,.6)}
  :root:not([data-tema='claro']) .recado-cab{color:#f5cf7a}
}
:root[data-tema='oscuro'] .recado-fuerte{background:#2b2410;
  box-shadow:0 3px 14px -4px rgba(0,0,0,.6)}
:root[data-tema='oscuro'] .recado-cab{color:#f5cf7a}

/* Cuando te devuelven una solicitud. Antes esto sólo cambiaba un estado en
   algún lado: quien entraba veía su pantalla igual que siempre y volvía a
   subir el mismo archivo sin saberlo. */
.devuelta-aviso{border:2px solid var(--grave);border-left-width:6px;
  background:#fef5f5;box-shadow:0 3px 14px -4px rgba(214,69,69,.4)}
.devuelta-aviso .seccion{color:#9c0006;font-size:15.5px;margin-bottom:8px}
.dv-texto{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--tinta2)}
.devuelta-aviso .boton-repo{background:var(--grave);border-color:var(--grave)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .devuelta-aviso{background:#2c1414;
    box-shadow:0 3px 14px -4px rgba(0,0,0,.6)}
  :root:not([data-tema='claro']) .devuelta-aviso .seccion{color:#eba0a0}
}
:root[data-tema='oscuro'] .devuelta-aviso{background:#2c1414;
  box-shadow:0 3px 14px -4px rgba(0,0,0,.6)}
:root[data-tema='oscuro'] .devuelta-aviso .seccion{color:#eba0a0}

/* «Ya se pagó, ¿le avisas?» — en el mismo tablero, para que dar el aviso no
   cueste salirse de lo que se está haciendo. */
.aviso-pagado{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;border:2px solid var(--bien);background:#eef7ef;
  margin-bottom:16px}
.aviso-pagado b{font-size:15px;color:#155c2c}
.aviso-pagado .ds{display:block;margin-top:2px}
.aviso-pagado .acciones{margin:0}
@media (prefers-color-scheme:dark){
  :root:not([data-tema='claro']) .aviso-pagado{background:#122a1a}
  :root:not([data-tema='claro']) .aviso-pagado b{color:#93d7a9}
}
:root[data-tema='oscuro'] .aviso-pagado{background:#122a1a}
:root[data-tema='oscuro'] .aviso-pagado b{color:#93d7a9}