/* ENTRAGENTE — Panel interno · VERSION: v82-encabezado-celular · 2026-09-22 */

/* VIOLETA EN LOS BORDES, la misma que el sitio público (A-137).
   #FFFFFF blanco protagonista · #0A0A0A negro · #3A15C4 violeta en las
   franjas · #00FF48 neón solo adentro de las franjas.

   En el panel esto rinde especialmente: es donde alguien pasa horas mirando
   números, y el blanco con letra negra es lo que menos cansa. El color queda
   arriba —la barra— y abajo —el zócalo—, y en el medio solo tienen color las
   cosas que significan algo: los estados.

   Los tres significados de siempre no cambian:
     verde    → «esto está bien»
     amarillo → «mirá esto»
     magenta  → «esto está mal» o «esto no se puede deshacer»
   Sobre blanco van en su versión honda, porque el neón (1,36:1), el
   amarillo (1,1:1) y el magenta de marca (3,35:1) no se leen como letra. */
:root{
  color-scheme:light;
  accent-color:#0A0A0A;

  --bg:#FFFFFF; --paper:#FFFFFF; --paper2:#F7F8F6;
  --ink:#0A0A0A; --ink2:#3A3D39; --muted:#666B65;
  --line:#E4E6E2; --line2:#EEF0EC;

  /* La acción en el cuerpo es negra: el neón sobre blanco no se ve. */
  --ac:#0A0A0A; --acink:#FFFFFF; --acbg:#F2F3F1;

  --ok:#0B6B25; --okbg:#E9FFEF; --ok-texto:#0B6B25;
  --av:#6B5E00; --avbg:#FBF7D8; --av-texto:#6B5E00;
  --er:#A4006F; --erbg:#FFE9F7; --er-texto:#A4006F;

  --franja:#3A15C4; --franja-ink:#FFFFFF; --franja-ink2:#D5CCFF;
  --franja-linea:#5433D6; --franja-campo:#2E0FA6;
  --neon:#00FF48; --neon-ink:#0A0A0A;

  --f:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --fd:"Chivo","Archivo","Segoe UI",system-ui,sans-serif;
  --fm:ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* Hay una sola versión: no hay modo claro/oscuro que siga al sistema. */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f);-webkit-font-smoothing:antialiased}
body.centrado{display:grid;place-items:center;min-height:100vh;padding:1.5rem}

a{color:inherit}
h1{font-family:var(--fd);font-weight:900;font-size:1.9rem;letter-spacing:-.035em;margin:0 0 .4rem;line-height:1.08}
h2{font-family:var(--fd);font-weight:700;font-size:1.06rem;letter-spacing:-.018em;margin:0 0 .9rem}
.lead{color:var(--ink2);margin:0 0 2rem}
.mono{font-family:var(--fm);font-size:.9em}

/* ---------- barra ---------- */
.barra{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.barra__in{max-width:64rem;margin:0 auto;padding:.75rem 1.25rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.marca{font-family:var(--fd);font-weight:900;letter-spacing:-.042em;text-decoration:none;font-size:1.12rem}
.nav{display:flex;gap:1rem;flex:1}
.nav a{text-decoration:none;color:var(--muted);font-size:.93rem;padding:.2rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ac)}
.usuario{display:flex;align-items:center;gap:.8rem;font-size:.85rem;color:var(--muted)}
.usuario span{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.usuario em{font-style:normal;font-family:var(--fm);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.usuario button{font:inherit;font-size:.85rem;padding:.35rem .7rem;background:transparent;color:var(--ink2);
  border:1px solid var(--line);border-radius:4px;cursor:pointer}
.usuario button:hover{border-color:var(--ac);color:var(--ink)}

.wrap{max-width:64rem;margin:0 auto;padding:2rem 1.25rem 4rem}
.pie{max-width:64rem;margin:0 auto;padding:1.5rem 1.25rem 3rem;color:var(--muted);font-size:.82rem;
  border-top:1px solid var(--line2)}

/* ---------- acceso ---------- */
.acceso{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:2.25rem;width:100%;max-width:23rem}
.acceso__marca{font-family:var(--fd);font-size:1.8rem;font-weight:900;letter-spacing:-.042em;margin:0}
.acceso__sub{color:var(--muted);font-size:.88rem;margin:.1rem 0 1.75rem}
.acceso label{display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:1rem 0 .3rem}
.acceso input{width:100%;padding:.65rem .8rem;background:var(--paper2);border:1px solid var(--line);
  border-radius:4px;color:var(--ink);font:inherit;font-size:.95rem}
.acceso input:focus{outline:2px solid var(--ac);outline-offset:1px}
.acceso button{margin-top:1.6rem;width:100%;padding:.75rem;background:var(--ac);color:var(--acink);
  border:0;border-radius:5px;font:inherit;font-weight:700;cursor:pointer}
.acceso button:hover{filter:brightness(1.08)}
.acceso__pie{margin:1.5rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.45}

/* ---------- alertas ---------- */
.alerta{padding:.85rem 1.05rem;border-radius:5px;margin-bottom:1.5rem;font-size:.93rem;border-left:3px solid}
.alerta--ok{background:var(--okbg);border-color:var(--ok)}
.alerta--aviso{background:var(--avbg);border-color:var(--av)}
.alerta--error{background:var(--erbg);border-color:var(--er)}

/* ---------- bloques ---------- */
.bloque{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1.4rem;margin-bottom:1.25rem}

.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla td{padding:.55rem .5rem;border-bottom:1px solid var(--line2);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla__nombre{color:var(--ink2);white-space:nowrap;width:1%;padding-right:1.5rem!important}
.tabla__detalle{color:var(--muted)}

.pill{display:inline-block;font-family:var(--fm);font-size:.7rem;letter-spacing:.05em;
  padding:.15rem .45rem;border-radius:3px;white-space:nowrap}
.pill--ok{background:var(--okbg);color:var(--ok)}
.pill--aviso{background:var(--avbg);color:var(--av)}
.pill--error{background:var(--erbg);color:var(--er)}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin-bottom:1.25rem}
.cifra{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.15rem}
.cifra b{font-family:var(--fd);font-weight:900;font-size:2rem;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cifra span{font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- progreso ---------- */
.progreso{margin-bottom:1.25rem}
.progreso__meta{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.progreso__barra{height:6px;background:var(--line2);border-radius:99px;overflow:hidden}
.progreso__fill{height:100%;background:var(--ac);border-radius:99px}

.pasos{list-style:none;margin:0;padding:0}
.paso{display:flex;gap:.7rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line2);
  color:var(--muted);font-size:.93rem}
.paso:last-child{border-bottom:0}
.paso--ok{color:var(--ink)}
.paso__marca{flex:0 0 auto;width:1.15rem;height:1.15rem;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:.7rem}
.paso--ok .paso__marca{background:var(--ac);border-color:var(--ac);color:var(--acink)}

/* ===================== Eventos ===================== */

.cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  margin-bottom:1.5rem;flex-wrap:wrap}
.cabecera h1{margin:.2rem 0 .2rem}
.cabecera__acciones{display:flex;gap:.5rem;flex-wrap:wrap}
.migas{margin:0 0 .2rem;font-size:.85rem}
.migas a{color:var(--muted);text-decoration:none}
.migas a:hover{color:var(--ink)}

.boton{display:inline-block;padding:.55rem 1rem;background:var(--ac);color:var(--acink);
  border:1px solid var(--ac);border-radius:5px;font:inherit;font-weight:600;font-size:.92rem;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.boton:hover{filter:brightness(1.08)}
.boton:disabled{opacity:.45;cursor:not-allowed;filter:none}
.boton--suave{background:transparent;color:var(--ink2);border-color:var(--line)}
.boton--suave:hover{border-color:var(--ac);color:var(--ink);filter:none}
.boton--peligro{background:transparent;color:var(--er-texto);border-color:var(--er-texto)}
.boton--peligro:hover{background:var(--erbg);color:var(--er);filter:none}
.boton--chico{padding:.35rem .7rem;font-size:.85rem}

.filtros{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}
.filtros input,.filtros select{padding:.5rem .7rem;background:var(--paper);border:1px solid var(--line);
  border-radius:4px;color:var(--ink);font:inherit;font-size:.9rem}
.filtros input{flex:1;min-width:12rem}
.filtros button{padding:.5rem 1rem;background:transparent;color:var(--ink2);border:1px solid var(--line);
  border-radius:4px;font:inherit;font-size:.9rem;cursor:pointer}

.vacio{background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:3rem 1.5rem;
  text-align:center}
.vacio h2{margin:0 0 .4rem}
.vacio p{color:var(--muted);margin:0 0 1.25rem}

.lista-eventos{display:flex;flex-direction:column;gap:.6rem}
.ev{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:1rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.8rem;
  text-decoration:none;color:inherit;transition:border-color .12s}
.ev:hover{border-color:var(--ac)}
.ev__img{width:4.5rem;height:6rem;border-radius:4px;overflow:hidden;background:var(--paper2);
  display:grid;place-items:center}
.ev__img img{width:100%;height:100%;object-fit:cover}
.ev__sinimg{font-size:.6rem;color:var(--muted);text-align:center;padding:.3rem}
.ev__top{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem}
.ev__cuerpo h3{font-family:var(--fd);font-weight:700;margin:0 0 .25rem;font-size:1.05rem;letter-spacing:-.02em}
.ev__meta{margin:0;font-size:.86rem;color:var(--ink2)}
.ev__meta--suave{color:var(--muted);font-size:.8rem}
.ev__venta{text-align:right;min-width:7rem}
.ev__venta b{font-family:var(--fd);font-weight:900;display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.03em}
.ev__venta b span{font-size:.8rem;color:var(--muted);font-weight:400}
.ev__venta span{font-size:.72rem;color:var(--muted);font-family:var(--fm)}
.ev__sin{font-size:.75rem;color:var(--av-texto)}
@media (max-width:38rem){
  .ev{grid-template-columns:3.5rem minmax(0,1fr)}
  .ev__img{width:3.5rem;height:4.6rem}
  .ev__venta{grid-column:1/-1;text-align:left}
}

.mini{height:4px;background:var(--line2);border-radius:99px;overflow:hidden;margin:.3rem 0}
.mini__fill{height:100%;background:var(--ac)}

/* ---------- estados ---------- */
.pill--borrador{background:var(--line2);color:var(--ink)}
.pill--en_revision{background:var(--avbg);color:var(--av)}
.pill--aprobado{background:var(--okbg);color:var(--ok)}
.pill--publicado{background:var(--ac);color:var(--acink)}
.pill--finalizado{background:var(--line2);color:var(--ink)}
.pill--cancelado{background:var(--erbg);color:var(--er)}
.pill--rechazado{background:var(--erbg);color:var(--er)}
.pill--vendiendo{background:var(--okbg);color:var(--ok)}
.pill--agotado{background:var(--erbg);color:var(--er)}
.pill--proximo{background:var(--avbg);color:var(--av)}
.pill--cerrado{background:var(--line2);color:var(--ink)}
.pill--inactivo{background:var(--line2);color:var(--ink)}

/* ---------- formularios ---------- */
.form{display:flex;flex-direction:column;gap:1.25rem}
.bloque__cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.bloque__cab h2{margin:0}
.campo{margin-bottom:1.1rem}
.campo:last-child{margin-bottom:0}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
label{display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .35rem}
/* TODOS los campos de escribir, no una lista de tipos.
   Acá había una lista enumerada —text, number, email, url, search,
   datetime-local, password— y `type="date"` y `type="tel"` no estaban. Con el
   panel claro no se notaba: un campo sin pintar queda blanco, igual que el
   resto. Con el panel oscuro esos dos campos salían como una caja blanca con
   letra negra en el medio de la pantalla. Se da vuelta la regla: se pinta
   todo lo que sea un campo de escribir, y se excluyen los que no lo son.
   Así el día que aparezca un `type` nuevo, ya está pintado. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
select,textarea{
  width:100%;padding:.6rem .75rem;background:var(--paper2);border:1px solid var(--line);
  border-radius:4px;color:var(--ink);font:inherit;font-size:.95rem}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:1px}
input[type=file]{font-size:.88rem;color:var(--ink2)}
.ayuda{font-size:.8rem;color:var(--muted);margin:.3rem 0 0;line-height:1.45}
.ayuda--bloque{margin:0 0 1.1rem}
.ayuda--pasado{color:var(--er-texto)}
.error{font-size:.82rem;color:var(--er-texto);margin:.3rem 0 0}
.previa{width:6rem;margin-bottom:.5rem;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.previa--ancha{width:100%;max-width:16rem}
.previa img{display:block;width:100%}

.tilde{display:flex;gap:.7rem;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-size:.93rem;color:var(--ink2);margin:0 0 1rem;cursor:pointer}
.tilde input{margin-top:.25rem;flex:0 0 auto}
.tilde b{display:block;color:var(--ink);font-weight:600;margin-bottom:.1rem}
.tilde span{line-height:1.45}

.acciones{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.revision textarea{margin-bottom:1rem}
.cancelar{margin-top:1.5rem;border-top:1px solid var(--line2);padding-top:1rem}
.cancelar summary{cursor:pointer;color:var(--er-texto);font-size:.9rem}
.cancelar textarea{margin:.75rem 0}

/* ---------- ficha ---------- */
.sub{font-size:.95rem;margin:1.5rem 0 .5rem}
.richtext{color:var(--ink2);font-size:.95rem}
.richtext p{margin:0 0 .7rem}
.suave{color:var(--muted)}
.historial{list-style:none;margin:0;padding:0;font-size:.9rem}
.historial li{padding:.6rem 0;border-bottom:1px solid var(--line2)}
.historial li:last-child{border-bottom:0}
.historial p{margin:.3rem 0 0;font-size:.88rem}
.volver{margin-top:1.5rem;font-size:.9rem}
.volver a{color:var(--muted);text-decoration:none}
.volver a:hover{color:var(--ink)}

/* ---------- tickets ---------- */
.ticket{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:1.25rem;margin-bottom:.9rem}
.ticket--off{opacity:.6}
.ticket__cab{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.ticket__cab h2{margin:0 0 .2rem;font-size:1.1rem}
.ticket__cab p{margin:0;font-size:.88rem}
.ticket__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin-bottom:.75rem}
.ticket__datos>div{display:flex;flex-direction:column;gap:.1rem}
.ticket__datos span{font-family:var(--fm);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.ticket__datos b{font-size:1rem;font-variant-numeric:tabular-nums}
.ticket__datos em{font-style:normal;font-size:.8rem;color:var(--muted)}
.ticket__pie{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line2);flex-wrap:wrap;font-size:.82rem}
.ticket__acciones{display:flex;gap:.4rem;flex-wrap:wrap}
.ticket__acciones form{display:inline}

/* ---------- lugares ---------- */
.lugares{display:flex;flex-direction:column;gap:.6rem}
.lugar{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1rem 1.15rem}
.lugar--off{opacity:.6}
.lugar__cuerpo h3{margin:0 0 .2rem;font-size:1.02rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lugar__cuerpo p{margin:0;font-size:.88rem}
.lugar__meta{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:.3rem!important}
.lugar__acciones{display:flex;gap:.4rem;flex-wrap:wrap}
.lugar__acciones form{display:inline}
.ayuda a{color:var(--ac)}

/* Destello breve cuando un campo se completa solo */
@keyframes destello{0%{background:var(--acbg);border-color:var(--ac)}100%{background:var(--paper2);border-color:var(--line)}}
.campo--auto{animation:destello .9s ease-out}
@media (prefers-reduced-motion:reduce){.campo--auto{animation:none}}

/* ===================== Ficha del evento ===================== */

/* LA CABECERA DE LA FICHA.
   Los botones van en su PROPIA fila, no en una tercera columna.
   Estaban en `auto` al lado del titulo, y con siete botones se llevaban 868 px
   de los 1024 disponibles: la columna del titulo quedaba en 0 px y el nombre
   del evento salia una palabra por renglon, 328 px de alto. Medido, no
   estimado. Y la cantidad de botones creció con cada paquete, asi que el
   problema iba a volver: en su propia fila no depende de cuantos sean (A-131). */
.ficha__cab{display:grid;grid-template-columns:76px minmax(0,1fr);gap:1rem 1.25rem;
  align-items:center;margin-bottom:1.5rem}
.ficha__acciones{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:40rem){.ficha__cab{grid-template-columns:60px minmax(0,1fr)}
  .ficha__titulo h1{font-size:1.5rem}}
.ficha__mini{width:76px;height:101px;border-radius:8px;overflow:hidden;background:var(--paper2);
  border:1px solid var(--line);display:grid;place-items:center}
@media (max-width:40rem){.ficha__mini{width:60px;height:80px}}
.ficha__mini img{width:100%;height:100%;object-fit:cover;display:block}
.ficha__mini span{font-size:.62rem;color:var(--muted);text-align:center;line-height:1.3}
.ficha__pills{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
/* Un nombre sin espacios —«Superlargofestival…»— no puede desbordar la caja. */
.ficha__titulo h1{margin:0 0 .25rem;overflow-wrap:break-word;hyphens:auto}
.ficha__titulo .lead{margin:0;font-size:.93rem}

.columnas{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:1.25rem;align-items:start}
@media (max-width:64rem){.columnas{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column}
.col--lateral .bloque{position:relative}

.cifra em{font-style:normal;font-size:.78rem;color:var(--muted);margin-top:.25rem}

.mini-tipos{display:flex;flex-direction:column;gap:.65rem}
.mini-tipo{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;
  padding-bottom:.65rem;border-bottom:1px solid var(--line2);font-size:.9rem}
.mini-tipo:last-child{border-bottom:0;padding-bottom:0}
.mini-tipo b{display:block;font-weight:600;margin-bottom:.2rem}
.mini-tipo__n{text-align:right;white-space:nowrap;font-weight:600}
.mini-tipo__n em{display:block;font-style:normal;font-weight:400;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums}

.lista-datos{margin:0;padding-left:1.05rem;font-size:.89rem;color:var(--ink2)}
.lista-datos li{margin-bottom:.3rem}

/* campo modificado y sin guardar */
.campo--tocado{border-color:var(--ac)!important;background:var(--acbg)!important}

/* barra de cambios pendientes */
.barra-cambios{position:sticky;bottom:0;z-index:20;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;
  background:var(--paper);border:1.5px solid var(--ac);border-radius:10px;
  padding:.85rem 1.1rem;box-shadow:0 6px 24px rgba(10,10,10,.14)}
.barra-cambios b{font-family:var(--fd);font-weight:900;font-size:1.15rem;color:var(--ac)}
.barra-cambios__acciones{display:flex;gap:.5rem}

/* explicación del precio */
.explicacion{border-color:var(--ac)}
.explicacion__cuentas{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.9rem;align-items:stretch;
  margin-bottom:1rem}
@media (max-width:52rem){.explicacion__cuentas{grid-template-columns:1fr}.cuenta__mas{text-align:left}}
.cuenta{background:var(--paper2);border:1px solid var(--line2);border-radius:8px;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.15rem}
.cuenta--total{background:var(--acbg);border-color:var(--ac)}
.cuenta__r{font-family:var(--fm);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cuenta b{font-family:var(--fd);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.cuenta em{font-style:normal;font-size:.82rem;color:var(--ink2);line-height:1.45;margin-top:.2rem}
.cuenta__mas{display:grid;place-items:center;font-family:var(--fd);font-weight:900;font-size:1.3rem;
  color:var(--ac)}

/* ========================= Links de venta ========================= */
.miga-panel{margin:0 0 .4rem;font-size:.85rem}
.miga-panel a{color:var(--muted);text-decoration:none}
.miga-panel a:hover{color:var(--ac)}

.canal__link{margin:.5rem 0 .6rem}
.canal__link input{width:100%;padding:.45rem .6rem;font-family:var(--fm);font-size:.78rem;
  color:var(--ink2);background:var(--bg);border:1px solid var(--line);
  border-radius:6px;cursor:pointer}
.canal__link input:focus{outline:2px solid var(--ac);outline-offset:1px}

.cifra--sola{display:grid;gap:.1rem;padding:0}
.cifra--sola b{font-family:var(--fd);font-size:2rem;line-height:1}
.cifra--sola span{font-size:.85rem;color:var(--ink2)}
.cifra--sola em{font-style:normal;font-size:.85rem;color:var(--ac);font-weight:600}

/* Con qué productora está trabajando el staff de la plataforma */
.aviso-productora{background:var(--acbg);border:1px solid var(--ac);color:var(--ink);
  padding:.7rem 1rem;border-radius:10px;margin:0 0 1.5rem;font-size:.88rem}
.aviso-productora a{color:var(--ac)}

/* El atributo hidden gana siempre.
   Sin esto, cualquier regla que ponga display deja el elemento visible
   aunque el HTML diga hidden. Paso con el panel de resultado del lector:
   quedaba a pantalla completa, invisible, tapando todos los botones.
   Con !important la posicion en la hoja no importa (A-95). */
[hidden] { display: none !important; }

/* ====================================================================
   LISTADOS — rehechos
   --------------------------------------------------------------------
   Antes cada ítem era una caja con borde y sombra ADENTRO de otra caja
   con borde: doble marco. Eso es lo que hacía que todo se viera suelto
   y desperdiciara media pantalla en aire.

   Ahora es una lista con líneas divisorias, que es como se lee un
   listado. Se gana densidad sin apretar, y la jerarquía queda clara:
   el nombre pesa, los datos acompañan, las acciones no compiten.
   ==================================================================== */

.lugares{display:flex;flex-direction:column;gap:0;margin:0 -.4rem}

.lugar{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.5rem;flex-wrap:wrap;
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--line2);
  padding:.9rem .4rem;
  transition:background .12s ease;
}
.lugar:last-child{border-bottom:0}
.lugar:hover{background:var(--paper2)}
.lugar--off{opacity:.5}

.lugar__cuerpo{min-width:0;flex:1 1 22rem}
.lugar__cuerpo h3{
  margin:0 0 .25rem;font-size:1.02rem;font-weight:600;line-height:1.3;
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
}
.lugar__cuerpo p{margin:0;font-size:.88rem;line-height:1.45}

/* Los datos de acompañamiento: legibles, no una etiqueta en mayúsculas.
   Acá adentro van emails, plata y fechas — en mayúsculas chiquitas se
   leen mal. */
.lugar__meta{
  font-family:var(--f);font-size:.85rem;letter-spacing:normal;
  text-transform:none;color:var(--ink2);margin-top:.2rem!important;
}
.lugar__meta b{color:var(--ink);font-weight:600}
.lugar__meta + .lugar__meta{margin-top:.1rem!important}

/* Las acciones no compiten con el contenido: van a la derecha, alineadas
   entre sí, y aparecen enteras al pasar por encima. */
.lugar__acciones{
  display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;
  flex:0 0 auto;padding-top:.1rem;
}
.lugar__acciones form{display:inline}
.lugar__acciones .boton--suave{opacity:.75;transition:opacity .12s ease}
.lugar:hover .lugar__acciones .boton--suave{opacity:1}

/* ---------- Tablas ---------- */

/* Los encabezados no tenían ningún estilo: se leían igual que los datos
   y no se distinguía dónde empezaba cada columna. */
.tabla th{
  text-align:left;padding:.4rem .5rem .5rem;
  font-family:var(--f);font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tabla{font-variant-numeric:tabular-nums}
.tabla tbody tr:hover td,
.tabla tr:hover td{background:var(--paper2)}
.tabla td{transition:background .12s ease}
.tabla td p{margin:.15rem 0 0;line-height:1.35}

/* ---------- Encabezado de cada bloque ---------- */

.bloque > h2:first-child{
  margin:0 0 1rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line2);
  font-size:1.05rem;letter-spacing:-.01em;
}
.bloque > h2:first-child .suave{font-weight:400;color:var(--muted)}

/* Un listado pegado al borde del bloque respira mejor que uno con doble
   margen: el bloque ya pone el aire. */
.bloque > .lugares{margin-bottom:0}

/* ---------- Cifras ---------- */

.cifra b{letter-spacing:-.02em}
.cifra span{color:var(--ink2)}
.cifra em{color:var(--muted)}

/* ---------- Chips de filtro ---------- */

.filtros{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}

/* ---------- Columnas de números ----------
   En una tabla de plata los importes van a la derecha: así las comas caen
   en la misma columna y se comparan de un vistazo. A la izquierda, cada
   número arranca en un lugar distinto y hay que leerlos de a uno. */
.tabla .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla .num p{text-align:right}

/* La fila de totales cierra la tabla: línea más marcada y sin resaltado,
   porque no es una fila más sobre la que se pueda hacer algo. */
.tabla__total td{border-top:2px solid var(--line);border-bottom:0!important;
  padding-top:.7rem;background:transparent!important}

/* Los enlaces dentro de una tabla no van subrayados: con cinco filas, cinco
   subrayados son cinco líneas compitiendo con las de la propia tabla. */
.tabla a:not(.pill):not(.boton){text-decoration:none;color:var(--ink);font-weight:600}
.tabla a:not(.pill):not(.boton):hover{color:var(--ac);text-decoration:underline}

/* El dato secundario debajo del principal: pegado, chico y gris. */
.tabla td p.suave{margin:.12rem 0 0;font-size:.8rem;line-height:1.3;color:var(--muted)}

/* ====================================================================
   ARREGLOS DE PRESENTACIÓN
   ==================================================================== */

/* `.cifra--sola` viene de otra pantalla y trae `padding:0`, que dentro de
   la grilla de cifras le saca el recuadro a la tarjeta: quedaban tres con
   marco y una sin, desalineada. Acá se le devuelve la caja. */
.cifras .cifra--sola{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.15rem;
}
.cifras .cifra--sola span{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.cifra em{
  font-style:normal;font-size:.78rem;color:var(--muted);
  font-weight:400;margin-top:.15rem;
}
.cifras .cifra--sola em{color:var(--muted);font-weight:400;font-size:.78rem}

/* Las columnas de números se encogen a su contenido y el sobrante se lo
   queda la primera. Antes el nombre del evento ocupaba media tabla y los
   importes quedaban desparramados en la otra mitad. */
.tabla .num{width:1%;padding-left:1.5rem!important}
.tabla th:first-child{width:auto}

/* El importe principal de cada fila pesa un poco más que el resto: es el
   número que se busca al entrar. */
.tabla .num b{font-size:.98rem;color:var(--ink)}

/* Filas más compactas y con la línea más suave: la tabla se lee como un
   bloque, no como una sucesión de renglones sueltos. */
.tabla td{padding:.6rem .5rem;border-bottom:1px solid var(--line2)}
.tabla th{padding:.35rem .5rem .45rem}

/* El texto de ayuda va pegado a lo que explica, no flotando en el medio. */
.bloque > .ayuda{margin:-.3rem 0 .9rem}

/* La tabla ocupa todo el bloque, sin doble margen. */
.bloque > .tabla{margin-top:.2rem}

/* ====================================================================
   CADA RENGLÓN, SU RECUADRO
   --------------------------------------------------------------------
   Sobre un bloque blanco, filas blancas separadas por una línea fina
   quedan planas: hay que seguir la línea con el ojo para no cambiarse
   de renglón. Con cada fila en su propia caja, el ojo agarra la fila
   entera de una y los importes de la derecha no se despegan del nombre
   de la izquierda.

   El tono es apenas más oscuro que el papel: alcanza para separar y no
   compite con el contenido. El color de marca queda para el hover, que
   es donde sí tiene que llamar la atención.
   ==================================================================== */

.tabla{border-collapse:separate;border-spacing:0 .3rem}

.tabla td{
  background:var(--paper2);
  border-bottom:0;
  padding:.75rem .6rem;
  vertical-align:middle;
}
.tabla td:first-child{border-radius:7px 0 0 7px;padding-left:.85rem}
.tabla td:last-child{border-radius:0 7px 7px 0;padding-right:.85rem}

/* Al pasar por encima, la fila entera se tiñe del color de la marca.
   Es la señal de "esta es la fila que estás mirando". */
.tabla tr:hover td{background:var(--acbg)}

/* El encabezado no es una fila más: sin caja, y con su línea. */
.tabla th{background:transparent;border-bottom:1px solid var(--line)}

/* La fila de totales cierra: fondo más marcado, sin reaccionar al mouse
   porque no hay nada que hacer con ella. */
.tabla__total td{
  background:var(--line2)!important;border-top:0;
  font-weight:600;padding-top:.8rem;padding-bottom:.8rem;
}

/* Los listados siguen el mismo criterio, para que las dos formas de
   mostrar una lista se vean de la misma familia. */
.lugares{gap:.3rem}
.lugar{
  background:var(--paper2);border-bottom:0;border-radius:7px;
  padding:.85rem .9rem;
}
.lugar:hover{background:var(--acbg)}
.lugar--off{background:var(--paper2);opacity:.65}

/* ====================================================================
   PARTICIPACIONES — una línea por fecha
   --------------------------------------------------------------------
   Adentro de la ficha de una persona hay poco ancho. Una tabla ahí parte
   los nombres en dos renglones y agrega un tercer nivel de recuadros:
   caja de persona > caja de tabla > caja de fila. Se lee peor que si no
   hubiera nada.

   Acá cada fecha es una línea que fluye, con los datos separados por
   aire en vez de por columnas.
   ==================================================================== */

.parts{list-style:none;margin:.7rem 0 0;padding:0;
  border-top:1px solid var(--line2)}
.part{
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  padding:.5rem .1rem;font-size:.88rem;
  border-bottom:1px solid var(--line2);
}
.part:last-child{border-bottom:0}
.part--off{opacity:.6}

.part__ev{font-weight:600;color:var(--ink);text-decoration:none}
.part__ev:hover{color:var(--ac);text-decoration:underline}
.part__fecha{color:var(--muted);font-variant-numeric:tabular-nums}
.part__rol{color:var(--ink2)}

/* Lo que trajo empuja hacia la derecha: es el dato que se compara entre
   una persona y otra. */
.part__trajo{margin-left:auto;color:var(--ink2);white-space:nowrap}
.part__trajo b{color:var(--ink)}

.part__accion{
  font-size:.82rem;color:var(--muted);text-decoration:none;
  white-space:nowrap;padding-left:.3rem;
}
.part__accion:hover{color:var(--ac);text-decoration:underline}

/* ---------- Ajustes que trajo verlo funcionando ---------- */

/* Una tabla adentro de un listado NO lleva recuadros: ya está adentro de
   uno. La regla vale para cualquier tabla anidada que aparezca después. */
.lugar .tabla{border-collapse:collapse;border-spacing:0}
.lugar .tabla td{background:transparent!important;border-radius:0;
  border-bottom:1px solid var(--line2);padding:.45rem .4rem}
.lugar .tabla tr:hover td{background:transparent!important}

/* El resaltado de una ficha entera al pasar el mouse era demasiado: se
   pintaba media pantalla. Queda un tono apenas perceptible. */
.lugar:hover{background:var(--paper2)}

/* Las etiquetas en monoespaciada y mayúsculas pesan al lado de un nombre
   propio. Misma tipografía que el resto, en chico. */
.pill{font-family:var(--f);font-size:.72rem;letter-spacing:.01em;
  text-transform:none;font-weight:600;padding:.12rem .5rem;border-radius:999px}

/* =====================================================================
   Menú agrupado
   ---------------------------------------------------------------------
   Trece entradas sueltas en una barra no son un menú: son una lista donde
   hay que buscar. Los grupos son <details>, así que funcionan sin
   JavaScript: la CSP del panel no permite scripts en línea, y un menú que
   depende de un archivo que puede no cargar es un menú que a veces no
   existe (A-112). El JS solo agrega la comodidad de cerrar el que quedó
   abierto.
   ===================================================================== */
.nav{align-items:center;gap:1.15rem}

.nav__g{position:relative}
.nav__g>summary{
  list-style:none;cursor:pointer;color:var(--muted);font-size:.93rem;
  padding:.2rem 0;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:.34rem;
  -webkit-user-select:none;user-select:none;
}
.nav__g>summary::-webkit-details-marker{display:none}
.nav__g>summary::after{
  content:"";width:.33rem;height:.33rem;margin-top:-.22rem;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.5;transition:transform .15s ease;
}
.nav__g[open]>summary::after{transform:rotate(-135deg);margin-top:.1rem}
.nav__g>summary:hover,
.nav__g[open]>summary{color:var(--ink)}
.nav__g--aqui>summary{color:var(--ink);border-bottom-color:var(--ac)}

.nav__caja{
  position:absolute;top:calc(100% + .6rem);left:-.6rem;z-index:60;
  min-width:12.5rem;padding:.35rem;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 30px rgba(10,10,10,.16), 0 2px 6px rgba(10,10,10,.08);
  display:flex;flex-direction:column;gap:.1rem;
}
.nav__caja a{
  display:block;padding:.5rem .65rem;border-radius:8px;border-bottom:0;
  color:var(--ink2);white-space:nowrap;font-size:.92rem;
}
.nav__caja a:hover{background:var(--bg);color:var(--ink)}
.nav__caja a[aria-current]{background:var(--acbg);color:var(--ac);font-weight:600}

/* En pantalla chica no hay lugar para un panel flotante: el grupo se abre
   hacia abajo y empuja, que es lo que uno espera en un teléfono. */
@media (max-width:720px){
  .nav{flex-wrap:wrap;gap:.9rem}
  .nav__g{width:100%}
  .nav__caja{
    position:static;box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;padding:.25rem 0 .25rem .85rem;margin:.4rem 0 .2rem;min-width:0;
  }
}

/* El aviso de que hay algo esperando en el menú. Un punto en la barra —que
   solo dice «entrá»— y el número adentro, donde efectivamente se resuelve. */
.nav__punto{
  width:.42rem;height:.42rem;border-radius:99px;
  background:var(--av-texto);display:inline-block;margin-left:.1rem;
  align-self:flex-start;margin-top:.15rem;
}
.nav__caja a{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.nav__cuenta{
  font-family:var(--fm);font-size:.7rem;font-weight:600;line-height:1;
  background:var(--avbg);color:var(--av);
  padding:.2rem .4rem;border-radius:99px;
}

/* La marca del panel: el símbolo al lado del nombre, mismo tamaño de línea. */
.marca{display:inline-flex;align-items:center;gap:.45rem}
.marca__svg{flex:none}

/* =====================================================================
   Acá vivía una segunda paleta que templaba los grises hacia el rosa.
   Se fue con el cambio de identidad: los colores ahora salen todos del
   :root de arriba, uno solo. Dos bloques de variables para lo mismo es
   la forma más segura de que un día no coincidan (A-134).
   ===================================================================== */

/* La barra de arriba con la franja de color: es el mismo gesto de la
   portada —una línea magenta que arranca bajo el contenido y se apaga— y
   ata las dos partes del producto sin repintar nada. */
.barra{position:sticky;top:0}
.barra::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    var(--ac) 0, var(--ac) 6%, var(--line) 30%, var(--line) 100%);
}

/* ===================== Estás adentro de otra productora =====================
   Una franja del ancho de la pantalla, no una nota al pie. Alguien de
   EntraGente metido en el panel de una productora ve los numeros de ella, y
   eso tiene que ser imposible de no ver (A-123). */
.prestada{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; margin:0 0 1.6rem;
  padding:.75rem 1rem; border-radius:10px;
  background:var(--acbg); border:1px solid var(--ac);
}
.prestada__que{font-size:.95rem; color:var(--ink)}
.prestada__que b{font-weight:700}
.prestada__et{color:var(--ink2)}
.prestada__acciones{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.prestada__acciones form{margin:0}

/* ===================== Equipo de EntraGente ===================== */
.rol-ficha{border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; background:var(--paper2)}
.rol-ficha h3{margin:0 0 .3rem; font-size:.98rem}
.rol-ficha p{margin:.15rem 0; font-size:.88rem; color:var(--ink2)}
.rol-ficha .no{color:var(--er-texto)}
.roles{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1rem}
.clave-link{
  font-family:var(--fm); font-size:.78rem; word-break:break-all;
  background:var(--paper2); border:1px solid var(--line); border-radius:8px;
  padding:.6rem .7rem; margin:.6rem 0 0;
}

/* ===================== Mapa del sistema ===================== */
.mapa__cab{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.2rem}
.mapa__cab h2{margin:0}
.mapa{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));margin-top:1rem}
.mapa__item{
  display:flex;flex-direction:column;gap:.2rem;
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);text-decoration:none;color:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
a.mapa__item:hover{border-color:var(--ac);transform:translateY(-1px)}
.mapa__item b{font-size:.96rem}
.mapa__item span{font-size:.84rem;color:var(--ink2);line-height:1.4}
.mapa__item em{font-style:normal;font-size:.72rem;color:var(--muted);margin-top:.2rem}
.mapa__item--off{background:var(--paper2);opacity:.72}
.mapa__falta{font-size:.76rem;color:var(--av-texto);margin-top:.2rem}

/* ===================== Fichas de gente ===================== */
/* Se usa en Equipo y en Asociados: una persona es una ficha, no una fila de
   planilla. Con cuatro botones por fila, una tabla se vuelve ilegible. */
.gente{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));margin-top:1.1rem}
.persona{border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--paper);
  display:flex;flex-direction:column;gap:.55rem}
.persona--off{background:var(--paper2);opacity:.75}
.persona__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.persona__ini{
  flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--fd);font-weight:900;font-size:.92rem;
  background:var(--acbg);color:var(--ac);
}
.persona__quien{display:flex;gap:.7rem;align-items:center;min-width:0}
.persona__nombre{font-weight:700;font-size:.98rem;line-height:1.2}
.persona__mail{font-size:.8rem;color:var(--muted);word-break:break-all}
.persona__acciones{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.15rem}
.persona__acciones form{margin:0}
.persona__rol{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.persona__rol select{font:inherit;font-size:.85rem;padding:.3rem .45rem;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}

/* ===================== Elegir un rol, con tarjetas ===================== */
/* Radios de verdad escondidos + labels que se pintan solas. Sin JavaScript,
   que en el panel no está permitido, y accesible con el teclado: el foco cae
   en el radio y se mueve con las flechas como corresponde. */
.roles-elegir{border:0;padding:0;margin:1.4rem 0 0;
  display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.roles-elegir legend{
  padding:0;margin:0 0 .2rem;grid-column:1/-1;
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.roles-elegir__radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* Ojo: la tarjeta es un <label>, y panel.css pinta TODOS los labels en
   mayuscula chica y gris —son las etiquetas de los campos de formulario—.
   Eso se hereda adentro y el texto de la tarjeta salia todo en mayusculas.
   Hay que devolverle la tipografia normal a mano. */
.rol-ficha--elegible{
  position:relative;cursor:pointer;padding-right:2.4rem;display:block;margin:0;
  font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--ink);
  transition:border-color .12s ease, background .12s ease;
}
.rol-ficha--elegible:hover{border-color:var(--ac)}
.rol-ficha__tilde{
  position:absolute;top:.9rem;right:.9rem;width:1.15rem;height:1.15rem;
  border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;
}
.roles-elegir__radio:checked + .rol-ficha--elegible{
  border-color:var(--ac);background:var(--acbg);
}
.roles-elegir__radio:checked + .rol-ficha--elegible .rol-ficha__tilde{
  background:var(--ac);border-color:var(--ac);
}
.roles-elegir__radio:checked + .rol-ficha--elegible .rol-ficha__tilde::after{
  content:"";width:.42rem;height:.24rem;margin-top:-.1rem;
  border-left:2px solid var(--acink);border-bottom:2px solid var(--acink);transform:rotate(-45deg);
}
/* El foco del teclado tiene que verse: el radio está escondido, así que se
   pinta la tarjeta. */
.roles-elegir__radio:focus-visible + .rol-ficha--elegible{
  outline:2px solid var(--ac);outline-offset:2px;
}

/* ===================== Contabilidad de la plataforma ===================== */
.mes-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1.4rem}
.mes-nav b{font-family:var(--fd);font-weight:900;font-size:1.05rem;text-transform:capitalize}

.cifra--roja b{color:var(--er-texto)}

/* La plata que no es nuestra: se destaca para que nunca se confunda con el
   resultado. Es el numero que funde a una tiquetera (A-127). */
.bloque--custodia{border-color:var(--av);background:var(--avbg)}
.cifra-gigante{font-family:var(--fd);font-weight:900;font-size:2.1rem;letter-spacing:-.03em;
  margin:.2rem 0 .8rem;color:var(--ink)}
/* En custodia sí es «mirá esto»: amarillo, adentro de su isla oscura. En el
   informe de la fecha las tres cifras son neutras (A-135). */
.bloque--custodia .cifra-gigante{color:var(--av)}

.monto--eg{color:var(--er-texto)}
.monto--in{color:var(--ok-texto)}

/* Grafico de barras sin ninguna biblioteca: el panel no admite scripts de
   afuera, y doce meses de dos barras no necesitan una. */
.grafico{display:flex;align-items:flex-end;gap:.5rem;height:11rem;margin:1.2rem 0 .5rem;
  padding-bottom:1.4rem;position:relative}
.grafico__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;text-decoration:none;color:inherit;border-radius:6px;padding:.2rem .1rem;
  transition:background .12s ease}
.grafico__col:hover{background:var(--paper2)}
.grafico__col--aqui{background:var(--acbg)}
.grafico__barras{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%}
.grafico__in,.grafico__eg{width:42%;min-height:2px;border-radius:3px 3px 0 0;display:block}
.grafico__in{background:var(--ok-texto)}
.grafico__eg{background:var(--er-texto);opacity:.72}
.grafico__et{display:block;text-align:center;font-size:.7rem;color:var(--muted);
  margin-top:.35rem;white-space:nowrap}
.grafico__ref{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;
  flex-wrap:wrap;margin:0}
.grafico__punto{width:.7rem;height:.7rem;border-radius:3px;display:inline-block;margin-left:.6rem}
.grafico__punto--in{background:var(--ok-texto);margin-left:0}
.grafico__punto--eg{background:var(--er-texto);opacity:.72}

/* El acuerdo comercial en el panel del productor: solo lo ve quien tiene uno. */
.bloque--acuerdo{border-color:var(--ok);background:var(--okbg)}
.bloque--acuerdo .cifra-gigante{color:var(--ok)}
.progreso__fill--ok{background:var(--ok-texto)}

/* ===================== Gastos de una fecha ===================== */
/* Ficha por gasto y no fila de tabla: cada uno tiene su forma de pago y dos
   formularios plegados, y eso en una celda de tabla no entra (A-132). */
.gasto{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;
  background:var(--paper);margin-bottom:.7rem}
.gasto--liquidacion{border-color:var(--ok);background:var(--okbg)}
.gasto__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.gasto__que{font-weight:700;margin:0 0 .15rem}
.gasto__monto{font-family:var(--fd);font-weight:900;font-size:1.15rem;margin:0;white-space:nowrap}
.gasto__estado{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.55rem 0 .1rem;font-size:.85rem}
.gasto__acciones{display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-start;margin-top:.6rem}
.gasto__acciones form{margin:0}
.gasto__prog{flex:0 0 auto}
.gasto__prog[open]{flex:1 1 100%;border:1px solid var(--line);border-radius:10px;
  padding:.8rem;background:var(--paper2);margin-top:.3rem}
.gasto__prog summary{list-style:none;cursor:pointer;display:inline-block}
.gasto__prog summary::-webkit-details-marker{display:none}
.gasto__prog[open] summary{margin-bottom:.7rem}

/* ===================== Informe de una fecha ===================== */
/* Las tres cosas del mismo tamaño: la plata, la gente y quien la trajo. Sin
   jerarquia, por decision del usuario (A-133). */
.informe-tres{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-bottom:1rem}
.informe-caja{margin:0}
.informe-caja .cifra-gigante{color:var(--ink);margin:.2rem 0 .4rem}
.informe-bloques{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.informe-check{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper2);cursor:pointer;
  text-transform:none;letter-spacing:normal;font-size:.92rem;color:var(--ink);margin:0}
.informe-check input{width:auto;margin:0}
.informe-check:hover{border-color:var(--ac)}

/* ===================== LAS FRANJAS VIOLETA (A-137) =====================
   La barra de arriba y el zócalo. Redefinen las variables en vez de
   repintar cada cosa: adentro, la letra es blanca, la acción es neón y los
   campos y menús son un violeta más hondo. El menú desplegable, la pestaña
   activa y el punto de «hay algo» se acomodan solos. */
.barra,.pie{
  --ink:#FFFFFF; --ink2:var(--franja-ink2); --muted:var(--franja-ink2);
  --line:var(--franja-linea); --line2:var(--franja-linea);
  --bg:var(--franja-campo); --paper:var(--franja-campo); --paper2:var(--franja-campo);
  --ac:var(--neon); --acink:var(--neon-ink); --acbg:var(--franja-campo);
  --ok:#5BFF8E; --okbg:#1E0B78; --ok-texto:#5BFF8E;
  --av:#F4FF1E; --avbg:#1E0B78; --av-texto:#F4FF1E;
  --er:#FF8AD8; --erbg:#1E0B78; --er-texto:#FF8AD8;
  background:var(--franja); color:var(--ink);
}
.barra{border-bottom:1px solid var(--franja-linea)}
.barra .marca{color:#FFFFFF}
.nav a{color:var(--muted)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}

/* El zócalo: de lado a lado, con el contenido alineado a la columna del
   panel sin tocar el HTML. */
.pie{
  max-width:none; margin:3rem 0 0;
  padding:1.6rem max(1.25rem, calc((100% - 64rem) / 2 + 1.25rem)) 2.2rem;
  border-top:0; color:var(--franja-ink2);
}
.pie a{color:#FFFFFF}
.pie a:hover{color:var(--neon)}
/* En el menú desplegable, el fondo y el hover no pueden ser el mismo violeta. */
.barra .nav__caja a:hover,.barra .nav__caja a[aria-current]{background:var(--franja)}

/* LA PÁGINA DE INGRESO (A-137). Es la única pantalla del panel sin barra ni
   zócalo, así que la franja se vuelve el fondo entero y la tarjeta blanca
   queda en el medio. Sin esto era blanco sobre blanco, sin nada de la marca. */
body.centrado{background:var(--franja)}
.acceso{border-color:transparent;box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.acceso__pie a{color:var(--ink);font-weight:600}