/* =============================================================
   HUB de PÚBLiCA · PÚBLiCA
   ÚNICO CSS global de la aplicación.

   La estética es la del Organizador de producción, medida sobre el
   sitio de ellos y no aproximada a ojo: fondo blanco puro, sidebar
   apenas más fría que el blanco, bordes grises neutros, hero casi
   negro de 280px y tarjetas de radio 14 con una sombra mínima.

   El hero sí es propio: un resplandor que toma el color del capítulo
   abierto y deriva detrás del título, en lugar de la foto de 4 MB que
   usan ellos.

   Y el acento no es uno solo: cada capítulo tiene el suyo.

   Convención de aislamiento: cada sección prefija sus IDs y sus
   clases propias (cap-, eq-, kpi-, pres-, lic-). Lo que está acá
   es lo compartido y nada más.
   ============================================================= */

:root{
  /* Neutros, tomados del Organizador. Son fríos: el blanco es blanco
     de verdad y los grises tiran a azul, no a beige. Eso es lo que lo
     hace ver limpio. */
  --c-bg:#FFFFFF;
  --c-surface:#FFFFFF;
  --c-side:#FAFCFE;
  --c-hero:#07090D;
  --c-text:#11161F;
  --c-muted:#606369;
  --c-suave:#7D8086;
  --c-border:#DCDEE2;
  --c-hover:#F4F6F9;

  /* El naranja de la marca es #ff7400, leído del logo oficial de
     publicalab.com. Venía usando #FC6100, que era parecido pero no era.

     Se usa tal cual en los momentos de identidad, donde es puro color
     y no lleva texto encima. Es lo único que NO cambia con el capítulo.

     Para los rellenos que llevan texto blanco encima nunca se usa el
     tono puro: da 2,8:1 de contraste y el mínimo legible es 4,5:1. Para
     eso está --cap-ui de cada capítulo, más abajo. */
  --c-marca:#ff7400;

  /* Semáforo. Se mantiene el de CAPs, el Cotizador y AlwaysOn. */
  --c-green:#1E8449; --c-green-bg:#D5F5E3;
  --c-yellow:#B7950B; --c-yellow-bg:#FEF9E7;
  --c-red:#C0392B;    --c-red-bg:#FADBD8;
  --c-blue:#2E86C1;   --c-blue-bg:#D6EAF8;
  /* Fuera del semáforo: no dicen bien ni mal, sólo distinguen. Son los
     colores de dos roles —PM y colaborador—, de la misma paleta que los
     de arriba. */
  --c-orange:#BA4A00; --c-orange-bg:#FAE5D3;
  --c-violet:#8E44AD; --c-violet-bg:#EBDEF0;
  /* Y los dos roles de arriba de todo: Dirección y Socio (sql/137). */
  --c-slate:#2C3E50;  --c-slate-bg:#D6DBDF;
  --c-rose:#A4286A;   --c-rose-bg:#F7DCEB;

  --font-title:'Barlow Semi Condensed','Barlow',sans-serif;
  --font-body:'Raleway',sans-serif;
  --radius:14px;
  --radius-sm:9px;
  /* Los controles chicos —una × de cerrar, un botón de 28px— llevan su
     propio radio: el de 9px sobre algo de veinte píxeles de alto queda
     casi redondo y deja de leerse como el mismo material que el resto.
     Estaban escritos a mano en 4, 6 y 8 según el día. */
  --radius-xs:6px;
  --sombra:0 1px 2px rgba(17,22,31,.05);
  --side-w:236px;
}

/* ---------------- el color del capítulo ----------------
   Cada grupo de la sidebar tiene el suyo, y con él viajan el
   resplandor del hero, el eyebrow, el item activo, los botones y los
   chips. Sirve para saber dónde estás sin leer.

   Lo que NO viaja es el punto de la "i" del logo: ese queda naranja
   siempre. Es el ancla de marca — si todo cambia de color, PÚBLiCA se
   queda sin ninguno propio.

   Los cuatro tonos de cada juego tienen un trabajo distinto:
     --cap       vivo, para color puro sin texto encima (puntos, barras)
     --cap-ui    verificado ≥4,5:1 con texto blanco: botones y chips
     --cap-dark  el hover de los anteriores
     --cap-claro sobre el hero oscuro, donde hace falta luminosidad
     --cap-soft  el fondo tenue del item activo
     --cap-glow  el resplandor del hero: casi siempre igual a --cap, pero
                 separado porque ahí abajo hay texto y manda el contraste */

/* El juego por defecto va en :root y NO en .shell. Parece un detalle y
   no lo es: los modales se montan en <body>, fuera del shell, así que
   ahí adentro las variables del capítulo no existen. El botón de
   confirmar quedaba con `background: var(--cap-ui)` sin valor —o sea
   transparente— y se leía texto blanco sobre el fondo blanco del
   modal. Invisible.
   Con el juego en :root, cualquier cosa fuera del shell hereda el
   naranja de marca, y adentro sigue mandando el capítulo. */
:root,.gate{
  /* Como el teal: el resplandor va un escalón más profundo que el color
     de marca. Con #ff7400 puro la bajada del hero caía a 4,42:1, y el
     mínimo es 4,5. En una luz difusa la diferencia no se ve; en el texto
     encima, sí. El punto de la "i" del logo NO usa esto: usa --c-marca,
     que es el naranja oficial sin tocar. */
  --cap:#ff7400; --cap-ui:#BB5400; --cap-dark:#9C4600;
  --cap-claro:#FFAF74; --cap-soft:#FFF2E8; --cap-glow:#F06B00;
}
/* Administración no es un capítulo de trabajo: es el motor. Tenía el
   naranja de Equipo por descarte —era el valor por defecto del shell— y
   se confundían. El azul dice "esto es otra cosa" sin competir con los
   tres colores de las secciones. */
/* EQUIPO, ESCRITO. Nunca había tenido bloque propio: era el valor por
   defecto de arriba, y mientras el shell entero se pintaba de un solo
   capítulo por vez eso alcanzaba.

   Dejó de alcanzar con la portada. Ahí conviven los cuatro colores en la
   misma pantalla —cada tarjeta redefine los tokens con su `data-cap`— y
   las de Equipo no redefinían nada, así que heredaban el grafito del
   shell y se veían iguales a Inicio. Recursos y Gestión salían bien
   sólo porque ellos sí tenían su bloque.

   Los valores son los mismos de :root: no cambia ningún color, cambia
   que ahora Equipo lo dice en vez de darlo por sentado. */
[data-cap="equipo"]{
  --cap:#ff7400; --cap-ui:#BB5400; --cap-dark:#9C4600;
  --cap-claro:#FFAF74; --cap-soft:#FFF2E8; --cap-glow:#F06B00;
}
/* LA PORTADA NO ES UN CAPÍTULO, así que no lleva color de capítulo.

   Arrancó con el naranja por descarte —era el valor por defecto del
   shell— y se confundía con Equipo, que es el naranja de verdad.
   Inventarle un quinto color tampoco servía: los tres tonos de las
   secciones significan "estás en Equipo / en Recursos / en Gestión", y
   sumar uno más al mismo juego diría que la portada es un capítulo más.

   Va en grafito frío. Es la única familia que no compite con ninguno de
   los cuatro y que se lee como estructura y no como categoría: el marco
   del HUB, no una de sus partes. */
[data-cap="inicio"]{
  --cap:#7C8794; --cap-ui:#4F5B69; --cap-dark:#3B4653;
  --cap-claro:#AAB4C0; --cap-soft:#F2F4F7; --cap-glow:#5E6B7A;
}
/* CONFIGURACIÓN: ÍNDIGO, Y SE MOVIÓ EL 29/9.

   Era `#4A90E2`, un azul de matiz 211°. Información es `#2E86C1`, de
   204°. **Siete grados de diferencia**, y ése es el número que explica
   lo que Mateo levantó: "información es celeste y configuración es
   azul, pero parecen muy parecidos". No era impresión — dos capítulos
   vecinos en la barra, con el mismo tono y distinta luz, se leen como
   el mismo capítulo con dos estados.

   Ahora está en 244°: cuarenta grados de Información, que es más que
   la distancia que hay entre Gestión y Nómina.

   ÍNDIGO Y NO OTRO, por el mismo descarte que eligió a los demás:
   naranja es Equipo, teal Gestión, verde Nómina, borravino
   Transversal, grafito la portada y azul Información. Queda el violeta
   de Recursos a 273°, treinta grados de acá — pero ése es un lavanda
   claro y brillante y éste es un azul de noche: de reojo no se
   confunden, que es justamente como se mira el color de un capítulo.

   Y más oscuro a propósito. Configuración es la sala de máquinas: cuatro
   pantallas que sólo abre administración. Que pese un poco más que el
   resto dice de qué lado de la herramienta estás parado.

   `--cap-ui` es el que lleva texto blanco encima: `#3B34A0` da 9,6:1,
   bien arriba del 4,5 que pide el mínimo. */
[data-cap="admin"]{
  --cap:#4F46C4; --cap-ui:#3B34A0; --cap-dark:#2E288A;
  --cap-claro:#9B94E8; --cap-soft:#EFEEFB; --cap-glow:#443BB0;
}
/* TRANSVERSAL: la agencia entera, no una cuenta.

   Es capítulo propio y necesitaba color propio. Se eligió el borravino
   por descarte, y el descarte es el argumento: verde y teal se pisan
   con Gestión, índigo ya es Configuración, naranja es Equipo, violeta es
   Recursos y el grafito es la portada. El borravino es la única familia
   que no compite con ninguna de las cinco.

   Y desaturado a propósito. Un rojo pleno diría "cuidado" en una
   pantalla donde no pasa nada malo: son listas para mirar. */
[data-cap="transversal"]{
  --cap:#A6455C; --cap-ui:#8E3B4F; --cap-dark:#73303F;
  --cap-claro:#D18E9E; --cap-soft:#FAEFF2; --cap-glow:#963E53;
}
[data-cap="recursos"]{
  --cap:#9554D2; --cap-ui:#8749A4; --cap-dark:#6E3A86;
  --cap-claro:#C192F5; --cap-soft:#F7F0FF; --cap-glow:#9554D2;
}
[data-cap="gestion"]{
  /* El teal se subió por saturación, no por brillo: medido, ya era el
     más luminoso de los tres sobre el negro (0,033 contra 0,030 del
     naranja). Lo que le faltaba era croma — el cian sobre fondo oscuro
     se lee más lavado que un naranja de la misma luz.

     Y por lo mismo su resplandor va un escalón más profundo: al subir
     la intensidad, el teal puro blanqueaba el fondo abajo del título y
     la bajada se caía a 3,8:1. Con este tono el glow se ve igual de
     fuerte y el texto sigue arriba de 4,5:1. */
  --cap:#00BEBF; --cap-ui:#008384; --cap-dark:#006A6B;
  --cap-claro:#5AD5D6; --cap-soft:#E5F8F8; --cap-glow:#009C9D;
}
/* NÓMINA: capítulo propio, color propio.

   Venía prestado del naranja de Equipo, y era razonable mientras fuera
   "lo mismo pero del otro lado": Equipo core es la nómina que MIRA el
   PM, Carga de equipo la que ESCRIBE Staff. Pero ya no son la misma
   pantalla con dos permisos — una lee una foto publicada y la otra es
   la única que puede cambiar el dato de toda la agencia. Compartir
   color decía que estabas en el mismo lugar.

   Verde, otra vez por descarte, que es el mejor argumento que hay para
   elegir un color en un sistema que ya tiene varios: naranja es Equipo,
   índigo Configuración, borravino Transversal, violeta Recursos, teal
   Gestión y grafito la portada. El verde es la única familia que queda
   sin pisar a nadie.

   Y desplazado al bosque, lejos del teal de Gestión: un verde brillante
   y el teal se confunden de reojo, que es justamente como se mira el
   color de un capítulo. */
[data-cap="nomina"]{
  --cap:#3E9E5F; --cap-ui:#2C7A46; --cap-dark:#215F36;
  --cap-claro:#7CC694; --cap-soft:#EDF7F0; --cap-glow:#2F8A4E;
}

/* INFORMACIÓN: lo que se consulta y no se toca — Estructura y
   Herramientas. Azul, que es el único lugar del círculo que quedaba
   libre entre el verde de Nómina y el violeta de Recursos, y el que
   mejor se lee como "esto es para mirar". Mismo método que los otros:
   `--cap` es el tono de identidad y `--cap-ui` el que lleva texto
   blanco encima, verificado a 4,5:1. */
[data-cap="informacion"]{
  --cap:#2E86C1; --cap-ui:#1F6A9E; --cap-dark:#17547C;
  --cap-claro:#7FC0E8; --cap-soft:#ECF5FB; --cap-glow:#2478B0;
}

/* PRODUCCIÓN: OLIVA. Capítulo propio, color propio, el 29/9.

   Nació prestado del verde de Nómina —le puse `cap:'nomina'` al armarlo
   y eso fue un valor por omisión, no una decisión—. Mateo lo levantó el
   mismo día que Información y Configuración: son dos grupos vecinos en
   la barra con el mismo color, que es exactamente el problema que
   acabábamos de arreglar.

   Y ADEMÁS SON COSAS DISTINTAS, que es la razón de fondo: Nómina es la
   GENTE —quién está, con qué rol, con qué herramientas— y Producción es
   el TRABAJO. Compartir color decía que estabas en el mismo lugar, que
   es lo mismo que ya se corrigió una vez cuando Nómina se separó de
   Equipo.

   OLIVA POR DESCARTE, como todos los demás, y esta vez el descarte tenía
   un hueco grande: entre el naranja de Equipo —27°— y el verde de
   Nómina —142°— no había nadie. Ciento quince grados libres. Un ámbar
   quedaba a quince grados del naranja, así que va más adentro del
   hueco: 67°, a cuarenta del naranja y a setenta y cinco del verde.

   `--cap-ui` da 5,4:1 con texto blanco. Los amarillos hay que bajarlos
   bastante para que sostengan texto, y por eso éste tira a oliva y no a
   dorado. */
/* SE QUEDA AUNQUE HOY NINGUNA PANTALLA LO USE. Producción tenía un solo
   capítulo —Entregables audiovisual— y se fue el 30/9 con él. El color
   no estorba: son seis variables que nadie lee mientras no haya un
   `data-cap="produccion"` en la página, y el día que Producción vuelva a
   tener pantalla propia el hueco de 67° ya está medido y elegido. Volver
   a buscarlo costaría más que dejarlo. */
[data-cap="produccion"]{
  --cap:#9BAA1C; --cap-ui:#64700F; --cap-dark:#4E580B;
  --cap-claro:#C8D461; --cap-soft:#F6F8E6; --cap-glow:#7E8D14;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:var(--font-body);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-title);margin:0;font-weight:700;letter-spacing:-.01em}
a{color:inherit}
button{font-family:var(--font-body);cursor:pointer}
input,select,textarea{font-family:var(--font-body);font-size:14px}
[hidden]{display:none!important}

/* ---------------- estructura ---------------- */

.shell{display:flex;min-height:100vh}

.side{
  width:var(--side-w);flex-shrink:0;background:var(--c-side);
  border-right:1px solid var(--c-border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
/* ---------------- la marca ----------------
   El logo de verdad es un SVG y vive en assets/logo.js: son los dos
   paths del archivo oficial de publicalab.com, sin retocar. Toma el
   color del texto que lo rodea, así que el mismo sirve en la sidebar
   clara y en el hero oscuro. */

.logo{display:block;width:auto}

/* Lo de abajo NO es el logo: es el respaldo tipográfico de la pantalla
   que aparece al abrir index.html con doble clic. Esa pantalla la
   dibuja un script clásico, porque los módulos no corren desde file://,
   y por eso no puede importar el SVG. Se ve sólo ahí.

   El truco es un degradado recortado al texto que corta a los 36% de la
   caja: ahí cae el hueco entre el punto y el asta de la "i" en Barlow
   Semi Condensed 800. Medido sobre el render, no estimado. */

.wm{
  font-family:var(--font-title);font-weight:800;
  letter-spacing:-.02em;color:var(--c-text);line-height:1;display:block;
}
.wm i{
  font-style:normal;display:inline-block;line-height:1;
  background:linear-gradient(to bottom,var(--c-marca) 0 36%,var(--c-text) 36%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Si el navegador no soporta recortar el fondo al texto, la "i" queda
   naranja entera antes que invisible. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wm i{background:none;color:var(--c-marca)}
}

.side .marca{padding:22px 18px 10px}
.side .marca .logo{margin-bottom:2px}
.side .marca > span{
  display:block;margin-top:7px;font-size:10px;color:var(--c-suave);
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
}

/* LA MARCA NO SE PASA A MAYÚSCULAS, y por eso existe esta clase.

   El rótulo de abajo del logo se escribe en versalitas —es lo que lo
   hace leer como un rótulo y no como un título— pero desde que dice
   "HUB de PÚBLiCA" eso se lleva puesto lo único que la marca no
   negocia: la i minúscula. En mayúsculas queda "PÚBLICA", que es otra
   palabra.

   Así que el transform sigue valiendo para "HUB de" y se cancela sólo
   sobre el nombre. Lo mismo en la pantalla de acceso, abajo. */
.side .marca > span .marca-nombre,
.hero .eyebrow .marca-nombre,
.gate .box .kicker .marca-nombre{ text-transform:none }

.side nav{flex:1;overflow-y:auto;padding:4px 12px 16px}
.side .grupo{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--c-suave);padding:18px 10px 6px;
}

/* EL CORTE DEL MENÚ. Separa lo que ve cualquiera de lo que ven los
   transversales, y no pliega nada: todo sigue abierto y del mismo
   peso. Es una línea con una palabra encima, no un capítulo — por eso
   la raya cruza el ancho entero y el rótulo va más chico y más gris
   que los rótulos de grupo, que son sus hijos. */
.side .corte{
  margin:22px 10px 2px;padding-top:12px;border-top:1px solid var(--c-border);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--c-suave);opacity:.75;
}
.side nav a{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;
  color:#4B5563;font-size:13.5px;font-weight:500;margin-bottom:1px;
}
.side nav a::before{
  content:'';width:5px;height:5px;border-radius:99px;
  background:#CDD1D8;flex-shrink:0;
}
.side nav a:hover{background:var(--c-hover);color:var(--c-text)}
.side nav a.on{background:var(--cap-soft);color:var(--cap-dark);font-weight:700}
.side nav a.on::before{background:var(--cap)}

.side .pie{
  border-top:1px solid var(--c-border);padding:14px 18px;
  font-size:11.5px;color:var(--c-muted);
}
.side .pie b{
  display:block;color:var(--c-text);font-family:var(--font-title);
  font-size:13.5px;font-weight:700;
}
.side .pie button{
  margin-top:8px;background:none;border:1px solid var(--c-border);
  color:var(--c-muted);padding:5px 10px;border-radius:var(--radius-sm);font-size:11.5px;
}
.side .pie button:hover{border-color:var(--cap-ui);color:var(--cap-ui)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------------- hero ----------------
   Casi negro, dos capas, ninguna imagen.

   El resplandor está DETRÁS DEL TÍTULO, abajo a la izquierda, no en una
   esquina cualquiera: así la luz ilumina algo y se lee como intencional.
   Toma el color del capítulo abierto y deriva muy despacio.

   El truco para que el cambio de capítulo sea un fundido y no un salto:
   la capa es un color sólido con una máscara radial, en lugar de un
   degradado de color. Un `background-color` sí se puede transicionar;
   un `background-image` con degradados, no.

   Encima va un grano finísimo, que no se ve y no es decorativo: los
   degradados grandes sobre casi negro producen bandas escalonadas en
   pantallas de 8 bits, y el grano las disuelve. */

.hero{
  position:relative;overflow:hidden;flex-shrink:0;
  min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--c-hero);color:#fff;padding:34px 40px 40px;
}

/* resplandor del capítulo
   El núcleo aguanta más lejos (el stop del medio pasó de .5 a .62) para
   que la luz se sienta plantada abajo del título en vez de disolverse
   apenas sale del centro. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-color:var(--cap-glow);
  -webkit-mask-image:radial-gradient(54% 100% at 13% 74%,#000 0%,rgba(0,0,0,.62) 34%,transparent 76%);
          mask-image:radial-gradient(54% 100% at 13% 74%,#000 0%,rgba(0,0,0,.62) 34%,transparent 76%);
  opacity:.54;
  transition:background-color .55s ease;
  animation:heroLuz 12s ease-in-out infinite alternate;
}

/* grano anti-bandeo */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* LA RESPIRACIÓN, UN POCO MÁS ARRIBA DEL UMBRAL.

   El resplandor ya se movía —y se movía bien: 19 segundos, 41 píxeles
   de deriva y un 29% de aclarado—. El problema es que repartido en
   diecinueve segundos eso da 0,74% por segundo, que está por debajo de
   lo que el ojo registra en un degradado suave. O sea que la animación
   existía, corría, y nadie la había visto nunca. Una animación que no
   se percibe no es sutil: es una animación que no está.

   Lo que se sube es el RITMO, no el escándalo: el mismo gesto en doce
   segundos y con el doble de recorrido de brillo. Da alrededor de 2,2%
   por segundo, tres veces lo de antes. Mirando la pantalla fija se nota
   que el hero respira; leyendo la tabla de abajo, no.

   Arrancó en quince segundos y Mateo lo pidió apenas más perceptible.
   Se acortó el ciclo en vez de subir el brillo: los extremos son los
   mismos, así que el contraste medido más abajo no cambia ni un punto.
   Subir la opacidad habría comido el margen de la bajada en el teal,
   que es el único texto que estaba cerca del límite.

   La referencia de cuánto es demasiado la da el marco del modo prueba:
   seis segundos y un cambio grande, pensado justamente para que no se
   te pase. Esto tiene que ser lo contrario —que esté, y que no pida
   nada—, y por eso el ciclo completo sigue durando medio minuto.

   Y SE MIDIÓ EL CONTRASTE, porque el capítulo teal está ajustado al
   filo: su comentario cuenta que subir la intensidad le bajaba la
   bajada a 3,8:1. Con estos valores, en el teal y en el instante más
   brillante del ciclo, medido en la posición real de cada texto:
   título 7,48 · bajada 5,07 · eyebrow 9,80. El mínimo de AA es 4,5.

   El cálculo a ojo daba mucho peor —4,05 para el eyebrow— porque
   suponía la máscara al máximo en todos lados, y la máscara en el
   eyebrow apenas llega a 0,16. Vale la pena medir donde está el texto y
   no en el peor punto teórico: la diferencia fue de reprobar a sobrar.
 */
@keyframes heroLuz{
  from { transform:translate3d(0,0,0)       scale(1);    opacity:.44 }
  to   { transform:translate3d(7%,-3.5%,0)  scale(1.22); opacity:.70 }
}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
}

.hero > *{position:relative}
.hero .eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--cap-claro);margin-bottom:12px;
}
.hero .eyebrow::before{
  content:'';width:6px;height:6px;border-radius:99px;background:var(--cap);
}
.hero h1{font-size:52px;line-height:.96;letter-spacing:-.01em;font-weight:800}
/* Blanco con alfa, no un gris fijo: así la bajada se despega igual del
   negro plano que de la zona iluminada por el resplandor, sea del color
   que sea. Un #9AA0A9 fijo se hundía justo donde pega la luz. */
.hero p{margin:14px 0 0;color:rgba(255,255,255,.78);font-size:14px;max-width:660px}

.cuerpo{padding:30px 40px 56px;max-width:1320px;width:100%}

/* ---------------- selector de cuenta ---------------- */

.cuentas{padding:12px 12px 4px}
.cuentas label{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--c-suave);padding:0 10px 6px;
}
.cuentas select,.cuentas .sel-btn{
  width:100%;padding:9px 10px;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);background:#fff;
  font-family:var(--font-title);font-size:15px;font-weight:700;
  color:var(--c-text);letter-spacing:-.01em;
}
.cuentas select:focus{outline:none;border-color:var(--cap-ui)}
.cuentas .sola{
  padding:9px 10px;font-family:var(--font-title);font-size:16px;font-weight:700;
  letter-spacing:-.01em;
}

/* Una sola cuenta: rótulo y nombre en el mismo renglón. El padding de
   `.sola` está para que el nombre caiga alineado con el texto del
   desplegable; sin desplegable no hay nada con qué alinearlo y esos
   nueve píxeles quedan de hueco. Acá se sacan.

   `flex-wrap` deja que un nombre largo baje solo en vez de apretarse
   contra el rótulo: en 236px de barra, PROYECTO DE INDUSTRIA
   COMPETITIVA no entra al lado de nada. */
/* CON UNA CUENTA SOLA, EL NOMBRE VA DONDE IRÍA EL SELECTOR.

   Antes el rótulo y el nombre iban en la misma línea, y eso hacía que
   el bloque midiera 46px contra los 103px de la versión con selector:
   al mirar el HUB con los ojos de un PM de una sola cuenta, el nombre
   —y todo el menú detrás— saltaba 57px hacia arriba. Medido. Cambiar de
   vista no tiene que mover la pantalla de lugar.

   Ahora se apila igual que el selector y el nombre cae exactamente
   donde caería el control. El borde transparente no es un adorno: el
   selector tiene uno de 1px, y sin él el texto quedaría un pixel más
   arriba que el del selector. */
.cuenta-sola > span{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--c-suave);padding:0 10px 6px;
}
.cuenta-sola .sola{
  padding:9px 10px;border:1px solid transparent;
  font-family:var(--font-title);font-size:15px;font-weight:700;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- botones ---------------- */

.btn{
  background:var(--cap-ui);color:#fff;border:none;padding:9px 16px;
  border-radius:var(--radius-sm);font-weight:600;font-size:13.5px;
}
.btn:hover{background:var(--cap-dark)}
.btn.ghost{background:#fff;border:1px solid var(--c-border);color:var(--c-text)}
.btn.ghost:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
.btn.sm{padding:5px 11px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------------- tarjetas ---------------- */

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:16px}
.card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:20px;box-shadow:var(--sombra);
  transition:border-color .12s,transform .12s,box-shadow .12s;
}
.card.click{cursor:pointer}
.card.click:hover{
  border-color:var(--cap);transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(17,22,31,.07);
}

/* EL NOMBRE DE LA CUENTA, COMO TÍTULO DE LA TARJETA.
   Estaba arriba a la izquierda, y en una grilla de tarjetas eso lo hace
   leer como un dato más de los que tiene adentro. Centrado y con una
   línea abajo, deja de ser el primer renglón y pasa a ser el encabezado
   de todo lo que sigue: se ve de un vistazo dónde empieza cada cuenta. */

/* ---------------- las dos tarjetas de Equipo core ----------------

   La primera lleva un NOMBRE y no una cifra —qué proyecto estás
   mirando— así que necesita más ancho que el tope de 250 que usan las
   de números, y un cuerpo más chico que un número gigante.

   Abajo, cuántas cuentas tiene adentro. Va como `details` y no como
   lista abierta porque la respuesta larga —los cuatro nombres— sólo
   hace falta cuando alguien pregunta; lo que se lee de un vistazo es
   que son cuatro y no una. */
.eq-kpis{grid-template-columns:minmax(230px,480px) minmax(150px,250px)}
.eq-kpi-proy{align-items:flex-start;text-align:left}
/* EL NOMBRE BAJA DE RENGLÓN EN VEZ DE SALIRSE (29/10). "ADP - Aprender
   de Plata" y "BID RD - META 2036" se salían del cuadro: la cifra de las
   otras tarjetas no se parte nunca (`nowrap`), pero un nombre sí puede.
   El cuadro crece con él, y el de al lado lo acompaña. */
.eq-kpi-proy .val{font-size:25px;line-height:1.15;letter-spacing:-.01em}
.eq-kpis .eq-kpi-proy .val{white-space:normal;overflow-wrap:break-word}
.eq-dentro{margin-top:9px}
.eq-dentro summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-title);font-size:11.5px;font-weight:700;
  letter-spacing:.02em;color:var(--cap-ui);
}
.eq-dentro summary::-webkit-details-marker{display:none}
.eq-dentro summary:hover{text-decoration:underline}
.eq-dentro[open] .mes-caret{transform:rotate(180deg)}
.eq-dentro ul{margin:9px 0 0;padding:0 0 0 15px;display:grid;gap:4px}
.eq-dentro li{font-size:12.5px;color:var(--c-muted)}
@media (max-width:640px){ .eq-kpis{grid-template-columns:1fr} }

.eq-top{
  text-align:center;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--c-border);
}
.eq-top .sub{margin-top:2px}
.card h3{font-size:16px}
.card .sub{font-size:11.5px;color:var(--c-muted);margin-top:2px}

/* Cifra sola: número grande y etiqueta chica, como los contadores
   de PODS / CUENTAS / PERSONAS del Organizador. */
.nums{display:flex;gap:18px;flex-wrap:wrap}
.num .lbl{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-muted);font-weight:600;
}
.num .val{font-family:var(--font-title);font-size:19px;font-weight:700;margin-top:1px}
.num .val.neg{color:var(--c-red)}

/* LAS TARJETAS DEJAN DE ESTIRARSE. Con `1fr` cada una se llevaba una
   parte igual del ancho, así que la misma tarjeta medía un tercio de la
   pantalla en Equipo core y la mitad en Licencias, que tiene dos. Un
   número de dos dígitos adentro de una caja de 400px es mucho mueble
   para poco dato, y encima el tamaño cambiaba de pantalla en pantalla.

   Con un tope, todas miden lo mismo en todos lados y el sobrante queda
   libre a la derecha, alineado con el resto de la página. */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,250px));
  gap:12px;margin-bottom:24px;
}
/* CON TRES O MÁS, LLENAN EL ANCHO.
   El tope de 250 existe para que DOS tarjetas no se transformen en dos
   cajas enormes con un número adentro. Con tres ese riesgo ya no existe:
   a 1200 cada una queda en 392, que es el ancho de una tarjeta normal, y
   a cambio la fila termina donde termina el bloque de abajo —antes
   cortaba 400px antes y se veía como un escalón—.

   Estuvo puesto en cuatro y era muy tarde: las pantallas de tres
   tarjetas —Usuarios entre ellas— quedaban con la fila corta y media
   hoja vacía al lado. El límite real del argumento es dos, no cuatro.

   Acortar la barra de progreso para emparejar habría sido peor: su
   largo significa algo, es el 100% del CAP.

   Si el navegador no entiende `:has()`, queda la regla de arriba, que
   es lo que había. */
.kpis:has(> :nth-child(3)){
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}

/* EN EL CELULAR, DE A DOS. `auto-fit` cuenta cuántas columnas entran
   usando el MÁXIMO del `minmax`, no el mínimo: con 250px de tope,
   dos columnas piden 512px y en un teléfono hay 343, así que caía a
   una sola y las tres tarjetas de Licencias ocupaban 260px de alto
   —tres números, media pantalla— antes de que empezara el contenido.
   Con `1fr` de tope entran dos de 166px, las etiquetas siguen en un
   renglón y el bloque baja a 170px.

   El tope de 250px se queda para pantalla grande, donde sí hace falta:
   ahí evita que dos tarjetas se conviertan en dos cajas enormes con un
   número adentro. */
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
.kpi{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--sombra);
  /* Centradas en todas las pantallas. Estuvieron alineadas a la
     izquierda por un motivo real —cuatro importes puestos para
     compararse se leen mejor arrancando en la misma línea vertical— pero
     tener unas centradas y otras no es peor que cualquiera de las dos
     cosas hecha en todos lados. Con el ancho topeado a 250 la diferencia
     de lectura es chica; la de prolijidad, no. */
  text-align:center;
}
.kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-suave);font-weight:700}
/* LA CIFRA NO SE PARTE NUNCA, Y POR ESO SE ACHICA SOLA.

   En el celular la tarjeta mide 166px y "-US$ 3.850" a 30px mide 133
   contra 128 de caja: por cinco píxeles se partía en dos renglones. Y
   sólo les pasaba a los negativos, porque el signo de menos es el
   carácter que sobra — o sea que la cifra se rompía justo cuando hay
   que leerla de un vistazo, que es cuando la cuenta se pasó del CAP.

   `nowrap` sola no alcanzaba: el guión del menos es punto de corte por
   derecho propio, así que pasaba a cortar ahí —un "-" solo arriba— que
   es peor. Con el cuerpo atado al ancho de la pantalla entra entera, y
   arriba de 470px vuelve a los 30px de siempre. */
.kpi .val{
  font-family:var(--font-title);font-weight:800;line-height:1.05;margin-top:5px;
  font-size:clamp(21px, 6.4vw, 30px);
  white-space:nowrap;
}

/* LAS CIFRAS QUE AVISAN. Pedido de Mateo el 22/9/2026: que el número
   que reclama algo se vea, y no sólo el rótulo. Dos escalones, los
   mismos de la portada y del CAP — amarillo es "hay algo tuyo por
   hacer", rojo es "esto ya está mal". */
.kpi .val.avisa{color:var(--c-yellow)}
.kpi .val.neg{color:var(--c-red)}

/* Dos tramos, uno al lado del otro: lo consumido y, apoyado encima, lo
   que está a definir. Por eso la barra es flex y los tramos no llevan
   redondeo propio — lo pone el contenedor, así los dos juntos terminan
   en una sola punta redonda en vez de dos cápsulas pegadas. */
.bar{height:6px;background:#EEF0F3;border-radius:99px;overflow:hidden;display:flex}
.bar i{display:block;height:100%;background:var(--cap)}
.bar i.warn{background:var(--c-yellow)}
.bar i.bad{background:var(--c-red)}
/* A definir: rayado, no lleno. El relleno diría "esto ya pasó"; las
   rayas dicen "esto todavía puede no pasar", que es exactamente lo que
   significa. */
.bar i.def{
  background:repeating-linear-gradient(
    -45deg, var(--c-yellow) 0 4px, var(--c-yellow-bg) 4px 8px);
}
.cap-def{color:var(--c-yellow);font-weight:700}

/* TODAS LAS FILAS DEL MISMO ALTO.
   El detalle es el único texto largo de la tabla, así que era el que
   decidía cuánto medía cada fila: una descripción corta daba 46px y una
   larga 62, y con veinte movimientos la tabla quedaba con el pulso
   irregular. Un renglón y, si no entra, tres puntos —el texto completo
   está en el `title`, y además nunca es el dato que se busca: para eso
   están la fecha, el rubro y el monto—.
   El `max-width` va en un div y no en la celda porque una tabla de
   ancho automático ignora el `max-width` de un `<td>`. */
.cap-detalle{
  max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Una fecha y un nombre de cuenta no se parten. "9 de septiembre" en dos
   renglones no ahorra ancho —la columna igual reserva el más largo— y
   agranda todas las filas. */
.nw{white-space:nowrap}

.pill{
  font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;
  white-space:nowrap;font-family:var(--font-title);letter-spacing:.02em;
}
.pill.ok{background:var(--c-green-bg);color:var(--c-green)}
.pill.warn{background:var(--c-yellow-bg);color:var(--c-yellow)}
.pill.bad{background:var(--c-red-bg);color:var(--c-red)}
.pill.na{background:#EEF0F3;color:var(--c-muted)}
.pill.info{background:var(--c-blue-bg);color:var(--c-blue)}
.pill.naranja{background:var(--c-orange-bg);color:var(--c-orange)}
.pill.violeta{background:var(--c-violet-bg);color:var(--c-violet)}
.pill.pizarra{background:var(--c-slate-bg);color:var(--c-slate)}
.pill.rosa{background:var(--c-rose-bg);color:var(--c-rose)}
/* Una pastilla puede ser un link —el estado del plan lleva al plan—.
   Sin esto tomaba el subrayado y el azul de los enlaces y dejaba de
   leerse como un estado. */
a.pill{display:inline-block;text-decoration:none;cursor:pointer}
/* El acceso confidencial de Usuarios (sql/139): una pastilla que se
   aprieta. Verde es que lo tiene; gris, que no. */
button.pill.adm-conf{border:0;cursor:pointer;line-height:inherit}
button.pill.adm-conf:hover{filter:brightness(.94)}
a.pill:hover{filter:brightness(.94)}

/* ---------------- las firmas de una licencia ----------------

   Una chapita por cuenta que tiene que dar el visto. Más chicas que las
   `.pill` a propósito: son hasta cuatro en una celda y con el peso de
   una pastilla normal la fila se vuelve un semáforo.

   La que falta va en hueco y la firmada en lleno. Es la diferencia que
   importa de un vistazo —cuánto queda— y se lee sin tener que
   distinguir dos colores parecidos. */
.firmas{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.firma{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;
  white-space:nowrap;font-family:var(--font-title);letter-spacing:.02em;
  border:1px solid transparent;
}
.firma.ok{background:var(--c-green-bg);color:var(--c-green)}
.firma.no{background:var(--c-red-bg);color:var(--c-red)}
.firma.pend{color:var(--c-muted);border-color:var(--c-border)}

/* ---------------- historial de cotizaciones ----------------

   La franja de estado al borde de la fila. La pastilla ya decía el
   estado, pero hay que leerla una por una; la franja se lee de arriba
   abajo de una pasada y contesta la pregunta real: qué está terminado y
   qué no.

   Franja y no fila entera: pintar el fondo de cada fila deja una tabla
   de colores donde no se distingue nada, y los borradores —que son la
   mayoría— quedarían gritando. Los dos estados terminados llevan color
   pleno; los que están a mitad de camino, gris y azul, que es
   justamente lo que se quiere ver como "todavía no". */
.pres-fila td:first-child{border-left:4px solid transparent;padding-left:10px}
.pres-fila.e-borrador      td:first-child{border-left-color:var(--c-borde-fuerte,#C7CBD1)}
.pres-fila.e-brief         td:first-child{border-left-color:var(--c-blue)}
.pres-fila.e-presupuestado td:first-child{border-left-color:var(--c-yellow)}
.pres-fila.e-cerrado       td:first-child{border-left-color:var(--c-green)}
.pres-fila.e-cancelada     td:first-child{border-left-color:var(--c-red)}

/* EL MODO PRUEBA TOMA EL COLOR DEL CAPÍTULO, no uno propio.

   Estaba en borravino fijo, elegido antes de que ese color significara
   algo: ahora es el capítulo Transversal, así que el aviso parecía
   estar hablando de otra pantalla. Y un color fijo cualquiera tendría
   el mismo problema el día que se use para otra cosa.

   Con el color del capítulo el aviso pertenece a la pantalla donde
   está, y sigue destacando: es un bloque tintado con la primera frase
   en negrita, en medio de una tabla que no tiene ningún fondo. */
.pill.prueba{background:var(--cap-soft);color:var(--cap-ui)}

.pres-prueba{
  margin:0 0 14px;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--cap-soft);color:var(--cap-ui);font-size:12.5px;line-height:1.5;
}

/* Los dos botones van uno al lado del otro y no se apilan: apilados
   suben el alto de TODAS las filas y la tabla pasa a ocupar el doble.
   Si no entran, la tabla ya scrollea sola. */
.pres-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.pres-acts .btn{white-space:nowrap}
/* LA PAPELERA, al pie y separada del historial por una línea: es otra
   cosa —lo que ya no está en la cuenta— y no puede leerse como la
   continuación de la tabla de arriba. */
.pres-pap{margin-top:28px;padding-top:18px;border-top:1px dashed var(--c-border)}

/* chips de filtro, como los PODs del Organizador */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}
/* Una tira de chips vacía no deja el margen colgado. Con una sola área
   los filtros no se dibujan, y ese margen abría un hueco sin motivo. */
.chips:empty{display:none}

/* KPIs: el selector de mes y el botón de abrir todo comparten renglón,
   igual que en Licencias. Los dos mandan sobre la lista entera, y el
   botón solo se llevaba una fila para él. El `margin-bottom:0` pisa el
   de `.periodo`, que acá lo pone la fila. */
.kpi-barra-sup{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.kpi-barra-sup > div{flex:1 1 auto}
.kpi-barra-sup .periodo{margin-bottom:0}
.kpi-barra-sup .btn{flex:none}
.chip{
  background:#fff;border:1px solid var(--c-border);border-radius:99px;
  padding:6px 14px;font-size:12px;font-weight:600;color:var(--c-muted);
}
.chip:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
.chip.on{background:var(--cap-ui);border-color:var(--cap-ui);color:#fff}

/* ---------------- tablas ---------------- */

table{
  width:100%;border-collapse:collapse;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--sombra);
}
th{
  background:var(--c-side);text-align:left;padding:11px 14px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-suave);
  font-weight:700;border-bottom:1px solid var(--c-border);
}
td{padding:11px 14px;border-bottom:1px solid #EFF1F4;font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
/* Toda tabla ancha scrollea adentro de su caja. El body nunca. */
.wrap{overflow-x:auto}

.panel{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:var(--sombra);
}
.panel h3{font-size:15px;margin-bottom:4px}
.panel .hint{font-size:12.5px;color:var(--c-muted);margin:0 0 14px}

/* ---------------- estados: vacío, cargando, error ----------------
   Los tres viven acá y no en cada sección, a propósito: es lo que
   evita que Presupuestos termine sintiéndose como otra app pegada
   adentro del HUB. */

.estado{
  text-align:center;padding:56px 24px;border-radius:var(--radius);
  background:var(--c-side);border:1px dashed var(--c-border);color:var(--c-muted);
}
.estado .ico{font-size:24px;line-height:1;margin-bottom:12px;opacity:.45}
.estado h4{font-size:15px;color:var(--c-text);margin-bottom:6px}
.estado p{margin:0 auto;max-width:430px;font-size:13px}
.estado.malo{border-style:solid;border-color:var(--c-red-bg);background:var(--c-red-bg);color:var(--c-red)}
.estado.malo h4{color:var(--c-red)}
/* Lo que falta, no lo que se rompió. Mismo cartel en ámbar: la persona
   entiende que tiene que esperar a alguien, no que la página falló. */
.estado.ojo{border-style:solid;border-color:var(--c-yellow-bg);background:var(--c-yellow-bg);color:var(--c-yellow)}
.estado.ojo h4{color:var(--c-yellow)}
.estado-acts{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;
}
.estado-acts .btn{text-decoration:none}

.cargando{display:flex;align-items:center;gap:10px;color:var(--c-muted);font-size:13px;padding:36px 4px}
.cargando::before{
  content:'';width:14px;height:14px;border-radius:99px;flex-shrink:0;
  border:2px solid var(--c-border);border-top-color:var(--cap);
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cargando::before{animation-duration:2.4s}}

/* ---------------- formularios ---------------- */

.field{margin-bottom:13px}
/* Los rótulos en tinta plena. Estaban en gris medio y, con todos los
   campos del mismo alto y del mismo ancho, un formulario largo se leía
   como un bloque parejo donde había que buscar dónde empieza cada cosa.
   El gris queda para las ayudas de abajo, que sí son secundarias. */
.field label{
  display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--c-text);margin-bottom:5px;
}
.field input,.field select,.field textarea,.field .sel-btn{
  width:100%;padding:9px 11px;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cap-ui)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* ---------------- modal y aviso ---------------- */

.veil{
  position:fixed;inset:0;background:rgba(7,9,13,.5);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.modal{
  /* `relative` para que la conversión del gasto pueda colgarse de su
     borde derecho sin medir nada a mano. */
  position:relative;
  background:var(--c-surface);border-radius:var(--radius);width:100%;max-width:520px;
  max-height:92vh;overflow:auto;padding:26px;box-shadow:0 18px 50px rgba(7,9,13,.22);
}
.modal h2{font-size:19px;margin-bottom:3px}
.modal .hint{color:var(--c-muted);font-size:12.5px;margin:0 0 18px}
.modal .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}

.msg{padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px}
.msg.err{background:var(--c-red-bg);color:var(--c-red)}
.msg.ok{background:var(--c-green-bg);color:var(--c-green)}
.msg.info{background:var(--c-blue-bg);color:var(--c-blue)}
.msg.aviso{background:var(--c-yellow-bg);color:var(--c-yellow)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--c-hero);color:#fff;padding:11px 18px;border-radius:99px;
  font-size:13px;font-weight:600;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ---------------- portón de entrada ---------------- */

.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.gate .box{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:40px;width:100%;max-width:420px;
  text-align:center;box-shadow:var(--sombra);
}
.gate .box .wm{font-size:31px;text-align:center}
.gate .box .logo{margin:0 auto}
.gate .box .kicker{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--c-suave);font-weight:700;margin-top:8px;
}
.gate .box p{color:var(--c-muted);font-size:13px;margin:22px 0 22px}
.gate .btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);font-weight:600;font-size:14px;color:var(--c-text);
}
.gate .btn-google:hover{border-color:var(--cap-ui);box-shadow:var(--sombra)}
.gate .btn-google svg{width:18px;height:18px;flex-shrink:0}
.gate .pie{font-size:11.5px;color:var(--c-suave);margin-top:22px}

/* La segunda puerta, para el que sólo viene a cotizar. Separada por una
   línea y no por espacio: espacio solo se lee como que la tarjeta
   terminó mal, y esto es otra cosa, no la continuación de la de arriba. */
.gate .gate-otra{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--c-border);
  font-size:11.5px;color:var(--c-suave);line-height:1.6;
}
.gate .gate-otra a{
  display:block;margin-top:4px;font-weight:700;color:var(--cap-ui);
  text-decoration:none;
}
.gate .gate-otra a:hover{text-decoration:underline}

/* ---------------- responsive ---------------- */

@media (max-width:900px){
  .shell{flex-direction:column}
  /* Marca y usuario comparten la primera fila: en un teléfono, cada
     píxel que la sidebar se queda es contenido que no se ve. */
  .side{
    width:100%;height:auto;position:static;
    border-right:none;border-bottom:1px solid var(--c-border);
    display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"marca pie" "cuentas cuentas" "nav nav";
    align-items:center;
  }
  .side .marca{grid-area:marca;padding:14px 16px 8px}
  .side .marca .logo{height:24px}
  .side .marca > span{display:none}
  .side .cuentas{grid-area:cuentas;padding:0 16px}
  .side .cuentas label{display:none}
  /* El rótulo CUENTA se esconde porque el selector se explica solo. El
     interruptor de modo prueba no: si desaparece, quedás en modo prueba
     sin manera de salir. */
  .side .cuentas label.modo-prueba{display:flex;margin:0 0 0 4px;padding:0}
  .side nav{grid-area:nav;display:flex;gap:5px;overflow-x:auto;padding:10px 12px 12px}
  .side .grupo{display:none}
  /* En el teléfono el menú es una tira horizontal: el corte pasa de ser
     una raya a ser un separador vertical, porque ahí no hay arriba y
     abajo que separar. */
  .side .corte{
    margin:0;padding:0 0 0 10px;border-top:0;border-left:1px solid var(--c-border);
    align-self:center;white-space:nowrap;
  }
  .side nav a{white-space:nowrap;padding:7px 12px}
  .side .pie{
    grid-area:pie;border-top:none;padding:14px 16px 8px;
    display:flex;align-items:center;gap:10px;text-align:right;
  }
  .side .pie b{font-size:12.5px}
  .side .pie .rol{display:none}
  .side .pie button{margin-top:0;font-size:11px}
  .hero{min-height:190px;padding:22px 20px 26px}
  .hero h1{font-size:36px}
  .cuerpo{padding:22px 16px 44px}
  .row2{grid-template-columns:1fr}
}

/* ---------------- impresión ----------------
   El Cotizador imprime en A4 con margin:0 en @page para que Chrome no
   dibuje su encabezado ni su pie. Acá sólo hace falta sacar del medio
   al shell: la sidebar y el hero no van al papel. */

@media print{
  @page{ size:A4; margin:0; }
  html,body{background:#fff!important;height:auto!important;margin:0!important}
  .side,.hero,.toast,.no-print{display:none!important}
  .shell{display:block!important}
  .cuerpo{padding:0!important;max-width:none!important}
  .card,.panel,table,.kpi{border-color:#ddd!important;box-shadow:none!important}
}

/* ---------------- 1 · Equipo core ----------------
   Prefijo eq- en todo, según la convención de aislamiento. */

.eq-rol{margin-top:14px}
.eq-rol:first-of-type{margin-top:4px}
/* EL RÓTULO DE CADA ROL, con su punto.
   Eran ocho renglones de la misma letra chica y gris, y encontrar dónde
   empieza cada grupo obligaba a recorrer la tarjeta entera. Con el punto
   y la tinta oscura, cada rol marca dónde arranca su gente y los nombres
   quedan claramente colgando de él.

   No se les cambia el tamaño: si crecieran, la tarjeta tendría dos
   jerarquías de título y volvería a costar leerla. Alcanza con que
   salten del gris. */
.eq-rol-tit{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--c-text);margin-bottom:6px;
  display:flex;align-items:center;gap:5px;
}
.eq-rol-tit::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--cap);flex:none;
  /* CENTRADO ÓPTICO, no geométrico. `align-items:center` centra el punto
     en la CAJA de la línea, pero el texto es todo mayúsculas: sus trazos
     ocupan de la base para arriba y debajo queda el hueco de las
     descendentes, que ninguna letra usa. El centro de lo que se ve queda
     más arriba que el centro de la caja, y el punto se leía caído.

     El píxel está medido, no estimado: con la línea de 14,25 y la
     mayúscula de 8, el centro de la banda de mayúsculas cae en 6,63 y el
     del punto en 7,13. Un margen abajo lo sube la mitad de su valor, así
     que 1px lo deja clavado.

     La referencia es la banda de mayúsculas y no la palabra entera: en
     "EDICIÓN" la tilde sube el trazo más alto y correría el centro medio
     píxel, pero el ojo no centra contra la tilde. */
  margin-bottom:1px;
}
.eq-persona{
  position:relative;display:flex;width:100%;align-items:baseline;
  justify-content:space-between;gap:10px;text-align:left;
  padding:6px 8px;margin:0 -8px 1px;border:none;background:none;
  border-radius:var(--radius-sm);font-size:13px;color:var(--c-text);
}
.eq-persona:hover{background:var(--c-hover)}
/* La persona que quedó clavada. Se marca con el color del capítulo para
   que se sepa de quién es el globo abierto cuando el cursor ya está en
   otro lado. */
.eq-persona.fijo{background:var(--cap-soft);color:var(--cap-dark);font-weight:600}
.eq-persona.fijo em{color:var(--cap-ui)}
.eq-persona em{font-style:normal;font-size:11.5px;color:var(--c-suave);font-variant-numeric:tabular-nums}

/* Con qué otras cuentas se comparte el recurso. Sin montos: la función
   de la base directamente no los selecciona. */
.eq-pop{
  position:absolute;left:0;top:calc(100% + 4px);z-index:20;width:max-content;
  max-width:260px;background:var(--c-hero);color:#fff;
  border-radius:var(--radius-sm);padding:10px 12px;
  box-shadow:0 10px 30px rgba(7,9,13,.28);cursor:default;
}
.eq-pop b{display:block;font-family:var(--font-title);font-size:13.5px;font-weight:700}
.eq-pop i{display:block;font-style:normal;font-size:11px;color:#9AA0A9;margin-top:2px}
.eq-pop ul{list-style:none;margin:8px 0 0;padding:0}
.eq-pop li{
  display:flex;justify-content:space-between;gap:14px;
  font-size:12.5px;padding:3px 0;border-top:1px solid rgba(255,255,255,.08);
}
.eq-pop li span{color:var(--cap-claro);font-variant-numeric:tabular-nums}
/* Cuando abajo no entra. Sin esto, las personas del final de una tarjeta
   larga eran las únicas imposibles de consultar: el globo caía fuera de
   la pantalla y bajar con el cursor lo cerraba. */
.eq-pop.arriba{top:auto;bottom:calc(100% + 4px)}

@media (max-width:900px){
  .eq-pop{left:auto;right:0}
}

/* Licencias: los dos números y el botón comparten renglón. Sin esto,
   dos tarjetas de 250 dejaban media pantalla vacía a su derecha y el
   botón se llevaba una fila entera para él solo. El `margin-bottom:0`
   pisa el de `.kpis`, que acá lo pone la fila. */
.lic-cabecera{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;
}
.lic-cabecera > div{flex:1 1 auto}
.lic-cabecera .kpis{margin-bottom:0}
.lic-cabecera .btn{flex:none;text-decoration:none}
@media (max-width:640px){
  .lic-cabecera .btn{width:100%;text-align:center}
}

/* ---------------- la portada de la cuenta ----------------

   Cinco puertas, no cinco párrafos. Cada tarjeta lleva el color de su
   capítulo en el rótulo del grupo: es lo que la ata con el lugar de la
   barra lateral donde va a quedar marcada después de entrar.

   `data-cap` en la tarjeta redefine los tokens del capítulo SÓLO
   adentro de ella, que es el mismo mecanismo que usa el shell para
   pintar la sección entera. Por eso el hover de cada tarjeta se pone
   de su color sin una sola regla por capítulo. */
/* `auto-fill` Y NO `auto-fit`, QUE ES UNA LETRA Y TODA LA DIFERENCIA.

   Con `auto-fit` las columnas que sobran se colapsan a cero y lo que
   queda se reparte el ancho entero. Con seis tarjetas no se nota; con
   UNA —que es lo que ve un PM abajo de "Información", donde por ahora
   sólo está Estructura— la tarjeta se estiraba de punta a punta de la
   pantalla y dejaba de parecer una tarjeta: un cartel de 700px con tres
   palabras adentro y un océano de blanco a la derecha.

   `auto-fill` deja las columnas vacías en su lugar, así que una tarjeta
   sola mide exactamente lo mismo que cualquiera de las de arriba. Es la
   regla de la portada: todas las puertas son del mismo tamaño, haya
   seis o haya una. */
.ini-grilla{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.ini-tarjeta{
  display:block;text-decoration:none;color:inherit;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:20px 22px;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.ini-tarjeta:hover{
  border-color:var(--cap-ui);box-shadow:0 6px 18px rgba(17,22,31,.07);
  transform:translateY(-1px);
}
.ini-tarjeta:focus-visible{outline:2px solid var(--cap-ui);outline-offset:2px}
/* El rótulo del grupo a la izquierda y el número a la derecha, con el
   número anclado arriba: los cinco quedan a la misma altura aunque uno
   sea "US$ 8.400" y otro "2". */
.ini-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  min-height:20px;
}
.ini-grupo{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cap-dark);
  padding-top:3px;
}
/* El número llega después de la primera pintada, así que aparece con
   una transición corta: sin ella, cinco cifras que se materializan de
   golpe se leen como un salto de la pantalla. */
.ini-dato{
  text-align:right;flex:none;line-height:1.15;
  animation:iniDato .22s ease-out;
}
.ini-dato:empty{display:none}
.ini-dato b{
  display:block;font-family:var(--font-title);font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:var(--c-text);font-variant-numeric:tabular-nums;
}
/* EL COLOR DEL SEMÁFORO, EN EL NÚMERO DE LA PORTADA. Sólo warn y bad:
   el verde no se pinta, porque "todo bien" es el caso normal y pintarlo
   volvería a encender la portada entera. Ver el comentario de `poner`
   en inicio.js. */
.ini-dato.warn b{color:var(--c-yellow)}
.ini-dato.bad  b{color:var(--c-red)}
.ini-dato span{
  display:block;font-size:10px;color:var(--c-suave);margin-top:2px;
  white-space:nowrap;
}
@keyframes iniDato{ from{opacity:0;transform:translateY(-3px)} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .ini-dato{animation:none} }

/* EL NÚMERO NO SE PINTA. NINGUNO.

   Pasó por dos versiones y las dos estaban de más. Primero se pintaba
   con el color del capítulo —Licencias en naranja, Entregables en verde
   azulado—, y seis colores distintos en seis tarjetas que se miran
   juntas no se leen como un estado compartido: se leen como
   decoración. Después se unificó en el amarillo de los avisos, y
   funcionaba como señal pero pesaba demasiado: un bloque de color
   arriba a la derecha de una sola tarjeta se lleva la portada entera.

   Lo que faltaba ver es que el color era REDUNDANTE. El rótulo de abajo
   ya lo dice con palabras —"esperan tu visto", "sin cargar"— y las
   palabras no compiten con nada. Un número negro con "esperan tu visto"
   debajo se entiende igual de rápido y deja la portada tranquila, que
   es lo que tiene que ser la primera pantalla del día.

   Queda escrito para que no vuelva por tercera vez. */

/* ---- entrar a una sección ----

   El router reemplaza el nodo de golpe, así que cambiar de pantalla era
   un corte seco: lo que estabas mirando desaparecía y aparecía otra
   cosa en el mismo cuadro, sin nada que conectara las dos. Ciento
   treinta milisegundos de fundido con dos píxeles de subida alcanzan
   para que se lea como que una cosa dio lugar a la otra.

   Es corto a propósito. Una transición que se nota es una transición
   que en la décima vez del día molesta; ésta termina antes de que
   llegues a leer el título. Y no la lleva `actualizar`, así que cambiar
   de mes o de cuenta adentro de una pantalla no la hace parpadear. */
.sec-entra{animation:secEntra .13s ease-out}
@keyframes secEntra{
  from{opacity:0;transform:translateY(2px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .sec-entra{animation:none} }
.ini-grupo::before{
  content:'';width:6px;height:6px;border-radius:99px;background:var(--cap);
}
.ini-tarjeta h3{
  font-family:var(--font-title);font-size:20px;letter-spacing:-.01em;
  color:var(--c-text);margin:9px 0 6px;
}
.ini-tarjeta p{font-size:13px;line-height:1.55;color:var(--c-muted);margin:0}

/* ---------------- interruptor de dos opciones ----------------
   El mismo del Cotizador, traído tal cual: dos botones pegados adentro
   de una pastilla, y la pastilla se pinta del color de lo elegido. Que
   la moneda tenga color no es adorno — es lo que hace que un monto en
   pesos no se pueda confundir con uno en dólares de un vistazo. */
.seg{
  display:inline-flex;background:var(--c-hover);border-radius:99px;
  padding:3px;gap:2px;
}
.seg button{
  border:0;background:none;color:var(--c-muted);
  font-family:var(--font-title);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;padding:5px 14px;border-radius:99px;cursor:pointer;
}
.seg button.on{background:var(--c-surface);color:var(--c-text);box-shadow:var(--sombra)}
.seg.ars{background:var(--c-blue-bg)}
.seg.ars button.on{background:var(--c-blue);color:#fff}
.seg.usd{background:var(--c-green-bg)}
.seg.usd button.on{background:var(--c-green);color:#fff}

/* El monto del gasto: el interruptor pegado al campo, para que se lea
   como una sola cosa —"tanto en pesos"— y no como dos preguntas. Los
   dos centrados entre sí, que era lo que quedaba corrido. */
.cap-monto{display:flex;gap:8px;align-items:center}
.cap-monto .seg{flex:none;align-self:center}
.cap-monto input{flex:1;min-width:0}

/* ---------------- la conversión, al costado del formulario ----------------
   Colgada del borde derecho del modal: adentro parecía un campo más
   para completar, y no lo es. `.modal` es el ancestro posicionado, así
   que se ancla solo sin medir nada. */
/* Anclado al velo y no al modal, porque el modal tiene `overflow:auto`
   y recorta lo que se cuelgue de su borde. El velo ocupa la pantalla
   entera y centra al modal, así que el borde derecho del modal está
   siempre en 50% + la mitad de sus 520px: de ahí sale el 274. */
.cap-tc{
  position:absolute;left:calc(50% + 274px);top:50%;transform:translateY(-50%);
  width:190px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--sombra);
}
.cap-tc-tit{
  font-family:var(--font-title);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-text);
  margin-bottom:10px;
}
.cap-tc label{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-suave);margin-bottom:4px;
}
.cap-tc-fila{display:flex;gap:6px;align-items:center}
.cap-tc-fila input{
  flex:1;min-width:0;padding:6px 9px;font-size:13px;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  font-variant-numeric:tabular-nums;
}
.cap-tc-fila button{
  flex:none;width:28px;height:28px;border-radius:var(--radius-xs);
  border:1px solid var(--c-border);background:none;color:var(--c-muted);
  font-size:14px;line-height:1;cursor:pointer;
}
.cap-tc-fila button:hover{border-color:var(--cap-ui);color:var(--cap-dark)}
.cap-tc-fuente{margin-top:6px;font-size:10.5px;color:var(--c-suave);font-style:italic;line-height:1.4}
/* Lo convertido, que es lo que de verdad se va a guardar: la cifra que
   hay que mirar antes de apretar Declarar. */
.cap-tc-usd{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--c-border);
  font-family:var(--font-title);font-size:19px;font-weight:800;
  color:var(--cap-dark);font-variant-numeric:tabular-nums;
}

/* Sin lugar al costado vuelve abajo, que es preferible a que se salga
   de la pantalla. El modal mide 520 y el papelito 190 más 14 de aire:
   por debajo de 900 ya no entran los dos con margen. */
@media (max-width:900px){
  .cap-tc{
    position:static;transform:none;width:100%;max-width:520px;margin:14px 0 0;
    box-shadow:none;background:var(--c-hover);
  }
}

/* ---------------- 2 · Recursos disponibles (CAP) ---------------- */

.cap-linea{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cap-pie{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--c-muted);margin-top:8px}
.cap-refs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 18px}
.cap-refs-tit{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--c-suave);
}
.ref{
  background:#fff;border:1px solid var(--c-border);border-radius:99px;
  padding:5px 13px;font-size:12.5px;color:var(--c-muted);
}
.ref b{font-family:var(--font-title);font-size:13px;color:var(--cap-ui);margin-right:5px}
.mini{font-size:11.5px;color:var(--c-suave)}

/* ---------------- 3 · KPIs ---------------- */

/* Un bloque por área. Hoy hay una sola —producción audiovisual— así
   que el encabezado dice de qué son estos indicadores en lugar de
   partirlos en las cuatro familias, que son subdivisiones de la misma
   área y hacían parecer cuatro capítulos donde hay uno. */
.kpi-area + .kpi-area{margin-top:36px}
.kpi-area > h3{
  display:flex;align-items:center;gap:9px;margin:0 0 14px;
  padding-bottom:11px;border-bottom:1px solid var(--c-border);
  font-family:var(--font-title);font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:var(--c-text);
}
.kpi-area > h3::before{
  content:'';flex:none;width:7px;height:7px;border-radius:99px;background:var(--cap-ui);
}
.kpi-fila{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);margin-bottom:8px;box-shadow:var(--sombra);overflow:hidden;
}
.kpi-cab{
  display:grid;width:100%;align-items:center;gap:14px;
  grid-template-columns:34px 1fr auto auto 20px;
  padding:14px 18px;background:none;border:none;text-align:left;
}
.kpi-cab:hover{background:var(--c-hover)}
.kpi-n{
  font-family:var(--font-title);font-size:12px;font-weight:700;
  color:var(--c-suave);font-variant-numeric:tabular-nums;
}
.kpi-nombre{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.kpi-valor{
  font-family:var(--font-title);font-size:22px;font-weight:800;
  letter-spacing:-.01em;white-space:nowrap;
}
.kpi-valor.flojo{font-size:14px;font-weight:600;color:var(--c-suave)}
/* Cuando la cifra es una PALABRA y no un número —hoy sólo el catálogo,
   que lidera con el tipo más producido—. Un poco más chica porque
   "Planificación estratégica" no entra a 22px, y sin `nowrap`, que está
   puesto para que no se parta un importe y acá partiría una frase. */
.kpi-valor.texto{font-size:17px;white-space:normal;line-height:1.2}
.kpi-flecha{color:var(--c-suave);font-size:11px;transition:transform .15s}
.kpi-fila.abierto .kpi-flecha{transform:rotate(180deg)}
.kpi-detalle{display:none;padding:0 18px 16px 66px;color:var(--c-muted);font-size:13px}
.kpi-fila.abierto .kpi-detalle{display:block}
.kpi-detalle p{margin:0 0 4px}

/* EN ANGOSTO LA FILA SE PARTE EN DOS RENGLONES.

   Acá decía `.kpi-cab .pill:last-of-type{display:none}` y ese selector
   NO ALCANZA A NADA. Los cinco hijos de la fila son `<span>`, así que
   `:last-of-type` es el último span de todos —la flechita— y la
   flechita no es `.pill`. O sea que la intención era esconder la meta
   en el celular y nunca se escondió.

   Y como la grilla pasa a tres columnas pero los hijos siguen siendo
   cinco, la pastilla caía sola en el renglón de abajo, adentro de la
   columna de 28px del número. Con `white-space:nowrap`, el texto no
   entraba y se salía de la cápsula de color: se leía "meta 20%" con la
   cola afuera del fondo amarillo.

   No se esconde: la meta es justamente lo que dice si un 16,2% está
   bien o mal, y en el celular hace más falta, no menos. Se le da el
   renglón entero a partir de la segunda columna, alineada con el
   nombre, y `justify-self:start` para que la cápsula mida lo que mide
   el texto en vez de estirarse. El `<span>` vacío que va cuando el KPI
   no tiene meta se saca del medio, o dejaría un renglón en blanco. */
@media (max-width:900px){
  .kpi-cab{grid-template-columns:28px 1fr auto;gap:10px;padding:12px 14px}
  .kpi-flecha{display:none}
  .kpi-cab > .pill{grid-column:2 / -1;justify-self:start}
  .kpi-cab > span:empty{display:none}
  .kpi-detalle{padding:0 14px 14px 52px}
}

/* ---------------- selector de mes ----------------
   Muestra el mes abierto y guarda el resto. Con una tira de chips por
   mes, a los dos años hay veinticuatro y se desborda. */

.mes{position:relative;display:inline-block;margin-bottom:22px}
.mes>summary{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:8px 14px;box-shadow:var(--sombra);
  font-family:var(--font-title);font-size:16px;font-weight:700;
  letter-spacing:-.01em;color:var(--c-text);
}
.mes>summary::-webkit-details-marker{display:none}
.mes>summary:hover{border-color:var(--cap-ui)}
.mes[open]>summary{border-color:var(--cap-ui)}
.mes-caret{font-size:10px;color:var(--c-suave)}
.mes[open] .mes-caret{transform:rotate(180deg)}
.mes-lista{
  position:absolute;left:0;top:calc(100% + 5px);z-index:25;min-width:100%;
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:5px;box-shadow:0 10px 30px rgba(17,22,31,.12);
  /* Alto para que los doce meses entren sin scroll —doce por 33px— y
     un tope en pantallas bajas, donde el panel se saldría. */
  max-height:min(420px, 60vh);overflow-y:auto;
}
.mes-lista button{
  display:block;width:100%;text-align:left;white-space:nowrap;
  background:none;border:none;border-radius:var(--radius-xs);padding:7px 12px;
  font-size:13.5px;color:var(--c-text);
}
.mes-lista button:hover{background:var(--c-hover)}
.mes-lista button.on{background:var(--cap-soft);color:var(--cap-dark);font-weight:700}
.mes-solo{
  display:inline-block;margin-bottom:22px;
  font-family:var(--font-title);font-size:16px;font-weight:700;letter-spacing:-.01em;
}

/* ---------------- selector de año + mes ----------------
   Dos controles chicos en vez de una tarjeta grande. */

.periodo{display:flex;gap:8px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.periodo .mes,.periodo .mes-solo{margin-bottom:0}

.mes.chico>summary{padding:6px 11px;font-size:14px}
/* El año cuando hay uno solo: misma pastilla que el mes, misma tinta.
   Estaba en gris para decir "esto no se toca", pero al lado de un mes en
   negro se leía como apagado, y dos controles gemelos con distinta
   intensidad se ven desprolijos antes que informativos. Lo que dice que
   no se abre es que no tiene flechita, y con eso alcanza: nadie intenta
   apretar dos veces algo que no responde. */
.mes-solo.chico{
  font-size:14px;padding:6px 11px;margin-bottom:0;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);background:#fff;
}

/* "EN VIVO", la pastilla de Equipo core. Misma forma que el año y el mes
   —es el mismo control— y un punto que se prende en verde cuando está
   elegida: el verde de "Cerrado" en Colaboradores, el de "esto está
   bien así". Apagada se lee como un botón más del selector. */
.periodo-vivo{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--font-title);font-size:14px;font-weight:700;letter-spacing:-.01em;
  padding:6px 11px;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;color:var(--c-text);box-shadow:var(--sombra);
}
.periodo-vivo::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-suave)}
.periodo-vivo:hover{border-color:var(--cap-ui)}
.periodo-vivo.on{border-color:#1E9E6A;color:#14724C;background:color-mix(in oklab, #1E9E6A 10%, #fff)}
.periodo-vivo.on::before{background:#1E9E6A;box-shadow:0 0 0 3px color-mix(in oklab, #1E9E6A 22%, transparent)}

/* Con muchos meses, dos columnas para que entren sin scroll. Con pocos
   —un año que recién arranca— una sola: dos columnas para tres meses
   deja un hueco que parece un error. */
.mes-lista button{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

/* ---------------- barra de filtros + acción ---------------- */

.cap-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.cap-barra .btn{flex-shrink:0;text-decoration:none;display:inline-block}
.chip-num{opacity:.6;font-variant-numeric:tabular-nums;font-weight:600}
.chip.on .chip-num{opacity:.75}
.cap-x{
  background:none;border:none;color:var(--c-suave);font-size:18px;
  line-height:1;padding:2px 7px;border-radius:var(--radius-xs);
}
.cap-x:hover{background:var(--c-red-bg);color:var(--c-red)}
/* EDITAR NO SE PINTA DE ROJO. Comparte la caja con la × de borrar
   —misma fila, mismo tamaño— pero el rojo es el aviso de que lo que
   sigue no tiene vuelta atrás, y corregir sí la tiene. El lápiz va un
   punto más chico: la × es un glifo flaco y alto, y al mismo tamaño el
   lápiz se ve más grande que ella. */
.cap-x[data-editar]{font-size:17px}
.cap-x[data-editar]:hover{background:var(--c-hover);color:var(--cap-ui)}

/* ---------------- administración ---------------- */

.adm-cuentas{display:flex;gap:6px;flex-wrap:wrap}
.adm-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--cap-soft);color:var(--cap-dark);
  border-radius:99px;padding:3px 5px 3px 11px;font-size:12px;font-weight:600;
}
.adm-chip button{
  background:none;border:none;color:inherit;opacity:.55;
  font-size:15px;line-height:1;padding:0 4px;border-radius:99px;
}
.adm-chip button:hover{opacity:1;background:rgba(0,0,0,.08)}

/* QUIÉN ESTÁ ESPERANDO QUE LO HABILITEN.

   Es el mismo amarillo de los avisos y no un color propio: no es una
   alarma nueva, es el aviso de "sin cuentas" contando una cosa más
   precisa. Lo que cambia es que trae nombres, así que necesita ser una
   lista y no un renglón. */
/* El botón de bajar el informe y lo que trae, en el mismo renglón: el
   botón dice qué hace y el texto de al lado dice qué va a encontrar
   adentro, que es lo que uno quiere saber antes de apretarlo. Envuelve
   en pantalla angosta en vez de apretar el botón. */
.exp-bajar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.exp-bajar .mini{max-width:46ch;line-height:1.45}

/* Las dos fechas y los atajos, en un renglón. Reusa `.adm-lic`, que es
   la fila de campos del resto de administración: los atajos se cuelgan
   al final como una caja más, alineados abajo para quedar a la altura
   de los campos y no de sus etiquetas. */
.exp-rango{margin-bottom:18px}
.exp-rango label{max-width:200px}
.exp-atajos{display:flex;gap:8px;align-self:end;flex-wrap:wrap;padding-bottom:1px}
.exp-atajos .chip{margin:0}

.adm-piden ul{margin:8px 0 9px;padding-left:17px}
.adm-piden li{margin:4px 0;line-height:1.45}
.adm-piden .mini{color:inherit;opacity:.72}

/* La misma marca, en la fila donde se le asigna la cuenta. En chico y
   en mayúsculas de rótulo: tiene que encontrarse barriendo la columna
   con la vista, sin competir con el nombre de la persona, que es lo que
   se lee primero. */
.adm-pide{
  display:inline-block;margin-top:4px;
  background:var(--c-yellow-bg);color:var(--c-yellow);
  border-radius:99px;padding:2px 9px;
  font-family:var(--font-title);font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
/* El período de la pantalla de CAPs: una vez, arriba de todo. Cuando
   hay uno solo no es un selector sino un rótulo, y va escrito. */
.adm-per-barra{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.adm-per-barra .chips{margin-bottom:0}
.adm-per-barra > b{font-family:var(--font-title);font-size:16px;letter-spacing:-.01em}

/* Sumar una cuenta al período: va debajo de la tabla porque es lo que
   se hace DESPUÉS de mirarla y no encontrar la que se buscaba. */
.adm-cap-sumar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
}
.adm-cap-sumar select,.adm-cap-sumar .sel-btn{
  width:auto;min-width:230px;max-width:320px;
  padding:7px 10px;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);background:#fff;font-size:13.5px;
}

/* Sacada la columna del período, el monto es lo último de la fila y se
   alinea a la derecha: son catorce importes para comparar entre sí. */
.adm-cap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.adm-cap input{
  width:130px;padding:7px 10px;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;
}
.adm-cap input:focus{outline:none;border-color:var(--cap-ui)}

/* ---------------- alta de licencia (Administración) ----------------
   Rejilla que se acomoda sola: en escritorio entran cuatro campos por
   fila, en un teléfono se apilan. Sin media queries. */
.adm-lic{
  display:grid;gap:12px 14px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.adm-lic label{
  display:flex;flex-direction:column;gap:5px;
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--c-suave);
}
.adm-lic input,.adm-lic select,.adm-lic .sel-btn{
  padding:8px 10px;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);background:#fff;color:var(--c-text);
  font-size:13.5px;text-transform:none;letter-spacing:normal;font-weight:400;
}
.adm-lic input:focus,.adm-lic select:focus{outline:none;border-color:var(--cap-ui)}
.adm-lic button{align-self:end;height:36px}

/* Items de la sidebar sin destino: quien todavía no fue habilitado ve
   las cinco secciones —para saber qué trae la herramienta— pero no
   llevan a ningún lado. */
.side nav a.off{opacity:.42;cursor:default}
.side nav a.off:hover{background:none;color:#4B5563}
.cuentas .sola.mini{font-size:13px;color:var(--c-suave);font-weight:600}

/* ---------------- el rol, como un solo control ----------------
   Antes eran dos cosas pegadas: la pastilla de color que decía el rol y,
   abajo, un desplegable sin estilo para cambiarlo. Dos objetos para un
   solo dato.

   Ahora el desplegable ES la pastilla: se lee igual, y al tocarlo se
   cambia. `appearance:none` saca el estilo del sistema; la flechita va
   como fondo para que se entienda que se despliega. */
/* TODAS DEL MISMO LARGO, el del rol de nombre más largo.
   Sin ancho fijo cada pastilla mide lo que mide su palabra, y la
   columna queda como un borde roto: "Administrador" largo,
   "Transversal" corto, la flecha de cada una en un lugar distinto.
   Con un ancho único la columna se lee como una pila de pastillas
   iguales y lo único que cambia es el color y el texto. */
/* EL BOTÓN DE `desplegable.js` TAMBIÉN, y por eso está nombrado dos veces.
   El <select> se reemplaza por un <button.sel-btn> que copia sus clases, y
   `.sel-btn` trae `width:100%`. Las dos reglas pesan lo mismo —una clase—
   así que ganaba la que está más abajo en el archivo, que es `.sel-btn`: el
   desplegable se estiraba a toda la celda mientras que la pastilla del rol
   fijo, que es un <span> y no pasa por ahí, se quedaba en su ancho. La
   columna terminaba con dos formas distintas para el mismo dato. Nombrando
   las dos clases juntas pesa más y gana ésta. */
.rol-sel,.sel-btn.rol-sel{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;
  font-family:var(--font-title);font-size:11px;font-weight:700;letter-spacing:.02em;
  /* EL ANCHO ES EL DEL TEXTO MÁS LARGO Y NI UN PÍXEL MÁS.
     Eran 148px fijos y sobraban casi treinta: la etiqueta más larga de
     las cuatro —"Project Manager"— mide 89px con esta tipografía, y con
     el aire de los costados y el lugar de la flecha llega a 121. Los
     otros treinta eran una pastilla más grande sin nada adentro, y en
     una columna de cinco filas eso se lee como un botón, no como una
     etiqueta.

     SIGUE SIENDO UN ANCHO FIJO y no `auto`. Con `auto` cada una mide lo
     suyo —Staff 62, Administrador 115— y la columna queda dentada; y
     peor, un `select` se achica o se agranda al cambiarle el rol, así
     que la fila se movería sola justo cuando estás mirando si el cambio
     entró. Todas iguales y del tamaño de la más larga. */
  width:122px;height:28px;
  padding:4px 20px 4px 10px;border-radius:99px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;max-width:100%;
  background-repeat:no-repeat;background-position:right 9px center;background-size:9px;
}
.rol-sel:focus{outline:none;border-color:currentColor}
.rol-sel.ok{background-color:var(--c-green-bg);color:var(--c-green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231E8449' stroke-width='1.6'/%3E%3C/svg%3E")}
.rol-sel.info{background-color:var(--c-blue-bg);color:var(--c-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232E86C1' stroke-width='1.6'/%3E%3C/svg%3E")}
/* FALTABA EL ÁMBAR, y era el de Staff. `ROLES.staff.pill` dice
   `warn` desde que el rol existe, pero acá sólo había `ok`, `info` y
   `na`: el desplegable de esa fila caía al estilo base y quedaba sin
   fondo, como si el rol no tuviera color o la fila estuviera a medio
   cargar. Un color que falta no se lee como "este rol no tiene
   color": se lee como que algo no terminó de dibujarse. */
.rol-sel.warn{background-color:var(--c-yellow-bg);color:var(--c-yellow);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B7950B' stroke-width='1.6'/%3E%3C/svg%3E")}
/* CADA ROL CON SU COLOR. Mateo, 19/10: PMs y colaboradores eran grises
   los dos, y gris es también "Sin asignar". Ahora el gris queda sólo
   para el que todavía no tiene rol. */
.rol-sel.naranja{background-color:var(--c-orange-bg);color:var(--c-orange);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23BA4A00' stroke-width='1.6'/%3E%3C/svg%3E")}
.rol-sel.violeta{background-color:var(--c-violet-bg);color:var(--c-violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E44AD' stroke-width='1.6'/%3E%3C/svg%3E")}
.rol-sel.pizarra{background-color:var(--c-slate-bg);color:var(--c-slate);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232C3E50' stroke-width='1.6'/%3E%3C/svg%3E")}
.rol-sel.rosa{background-color:var(--c-rose-bg);color:var(--c-rose);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A4286A' stroke-width='1.6'/%3E%3C/svg%3E")}
.rol-sel.na{background-color:#EEF0F3;color:var(--c-muted);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23606369' stroke-width='1.6'/%3E%3C/svg%3E")}

/* El valor lleva su nota debajo, alineada a la derecha:
   "48 / Diseño 33 · Edición 15". */
.kpi-nombre{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.kpi-nombre b{font-size:14px;font-weight:600;line-height:1.25}
.kpi-cifra{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.kpi-nota{
  font-style:normal;font-size:11px;color:var(--c-suave);
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;
}

/* La apertura del indicador, adentro del detalle. Barras finas en vez
   de un gráfico: lo que hay que poder leer de un vistazo es la
   proporción entre dos o tres categorías, y para eso alcanza. */
.kpi-ap{margin-top:12px;display:flex;flex-direction:column;gap:7px}
/* Cómo se contó, al pie de la apertura: primero el dato, después la
   letra chica para el que se pregunta de dónde salió el número. */
.kpi-ap-nota{margin:5px 0 0;font-size:11.5px}
.kpi-ap h4{
  margin:0 0 3px;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;color:var(--c-suave);
}
.kpi-barra{display:grid;grid-template-columns:120px 1fr 96px;align-items:center;gap:12px}
.kpi-barra-l{font-size:12.5px;color:var(--c-texto);font-weight:500}
.kpi-barra-t{height:7px;border-radius:99px;background:var(--c-hover);overflow:hidden}
.kpi-barra-t i{
  display:block;height:100%;border-radius:99px;min-width:3px;
  /* Escalón de intensidad por posición: la primera barra es el tono
     pleno del capítulo y cada siguiente se aclara hacia el fondo. La
     línea de arriba es el respaldo para navegadores sin color-mix. */
  background:var(--cap-ui);
  background:color-mix(in oklab, var(--cap-ui) var(--tono,100%), var(--c-bg));
}
.kpi-barra-n{font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.kpi-barra-n em{font-style:normal;font-weight:500;color:var(--c-suave);margin-left:5px}
@media (max-width:860px){
  .kpi-barra{grid-template-columns:88px 1fr 76px;gap:8px}
}

/* La barra de "ver como". Va arriba de todo, cruzada, en el naranja de
   marca: tiene que leerse como una capa puesta encima del HUB y no
   como parte de la pantalla, porque justamente avisa que lo que se ve
   abajo no es tu vista. La salida está siempre a la vista. */
/* LA FRANJA DE VISTA PRESTADA: chica, pero siempre.

   Era una banda naranja gruesa que se iba con el scroll. Es la peor
   combinación de las dos posibles: grita cuando no hace falta —arriba
   de todo, donde igual te acordás— y no está justo cuando sí, que es
   tres pantallas abajo, cuando ya te olvidaste de que estás mirando con
   los ojos de otro.

   El daño de olvidarse no son datos mal cargados —la vista prestada no
   cambia nada, la sesión sigue siendo la tuya— sino salir a buscar un
   bug que no existe: "¿por qué no me aparece Administración?".

   Contra eso sirve un recordatorio PERMANENTE, no uno fuerte. Entonces:
   se queda pegada arriba, y a cambio baja el volumen —se achica y toma
   el color del capítulo en vez del naranja fijo—. Quieta y presente
   gana a ruidosa y ausente. */
.espia{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:7px 40px;
  background:var(--cap-soft);color:var(--cap-dark);
  border-bottom:1px solid color-mix(in oklab, var(--cap) 26%, transparent);
  font-size:12px;line-height:1.4;
}
.espia b{font-weight:700}
.espia span{flex:1;min-width:200px}
.espia button{
  flex:none;border:1px solid color-mix(in oklab, var(--cap) 40%, transparent);
  background:transparent;color:var(--cap-dark);
  font:inherit;font-weight:700;font-size:11px;
  padding:4px 12px;border-radius:99px;cursor:pointer;
}
.espia button:hover{background:#fff;border-color:var(--cap-ui)}

/* El desplegable de vista ocupa el lugar de la pastilla del rol en el
   pie de la barra: mismo tamaño, mismo peso, para que no grite. */
.side .pie .ver-como{
  margin-top:3px;max-width:100%;
  font-size:11px;font-family:inherit;color:var(--c-muted);
  background:var(--c-hover);border:1px solid var(--c-border);
  border-radius:99px;padding:3px 8px;cursor:pointer;
}
.side .pie .ver-como:hover{border-color:var(--c-marca);color:var(--c-text)}
@media (max-width:860px){
  .espia{padding:10px 16px}
}

/* ---------------- Usuarios y cuentas, prolijo ----------------

   La columna del rol es una sola forma repetida: la misma pastilla
   para el que se puede cambiar y para el que no. Lo único que cambia
   es el ícono de la derecha —flecha o candado—, que es justamente el
   dato: si esto se toca o no. Antes el fijo era una pastilla más chica
   con una leyenda debajo, y contra las otras quedaba corrido. */
.rol-sel.fijo{
  cursor:default;
  background-size:8px;
}
.rol-sel.fijo.ok{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.4 6.2V4.3a2.6 2.6 0 0 1 5.2 0v1.9' fill='none' stroke='%231E8449' stroke-width='1.5'/%3E%3Crect x='1.7' y='5.9' width='8.6' height='7.2' rx='1.7' fill='%231E8449'/%3E%3C/svg%3E")}
.rol-sel.fijo.info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.4 6.2V4.3a2.6 2.6 0 0 1 5.2 0v1.9' fill='none' stroke='%232E86C1' stroke-width='1.5'/%3E%3Crect x='1.7' y='5.9' width='8.6' height='7.2' rx='1.7' fill='%232E86C1'/%3E%3C/svg%3E")}
.rol-sel.fijo.warn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.4 6.2V4.3a2.6 2.6 0 0 1 5.2 0v1.9' fill='none' stroke='%23B7950B' stroke-width='1.5'/%3E%3Crect x='1.7' y='5.9' width='8.6' height='7.2' rx='1.7' fill='%23B7950B'/%3E%3C/svg%3E")}
.rol-sel.fijo.na{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.4 6.2V4.3a2.6 2.6 0 0 1 5.2 0v1.9' fill='none' stroke='%23606369' stroke-width='1.5'/%3E%3Crect x='1.7' y='5.9' width='8.6' height='7.2' rx='1.7' fill='%23606369'/%3E%3C/svg%3E")}

/* El "+ cuenta" es un chip más de la misma fila, punteado para que se
   lea como un hueco a llenar y no como una cuenta ya asignada. */
.adm-mas{
  appearance:none;-webkit-appearance:none;
  border:1px dashed var(--c-border);background:transparent;color:var(--c-suave);
  border-radius:99px;padding:3px 11px;font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;width:86px;text-overflow:ellipsis;
}
.adm-mas:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
.adm-mas:focus{outline:none;border-style:solid;border-color:var(--cap-ui);color:var(--cap-ui)}

/* Quien no es PM ve todas las cuentas y no hay nada que asignarle: la
   celda dice eso y nada más. Va en la tipografía de los rótulos para
   que se lea como un valor de la tabla y no como una aclaración.

   EL PADDING NO ES DECORATIVO: es el mismo desplazamiento que tiene el
   texto adentro de un chip de cuenta. Sin él, "TODAS" arrancaba once
   píxeles a la izquierda de "ALACERO" en la columna de al lado, y dos
   valores de la misma columna que no arrancan en el mismo lugar se leen
   como un error de armado. */
.adm-todas{
  display:inline-block;padding-left:11px;
  font-family:var(--font-title);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--c-suave);
}

/* Anchos estables: sin esto la columna del rol se ensancha o se angosta
   según qué nombres de cuenta haya, y la tabla se mueve sola al asignar. */
/* LAS CUATRO COLUMNAS SE REPARTEN EL ANCHO ENTERO.

   Tercer intento, y los dos anteriores fallaron por el mismo motivo de
   fondo: el sobrante se juntaba todo en un solo lugar y se leía como un
   pozo. Primero se lo llevaba Cuentas —665px para mostrar la palabra
   TODAS, con el hueco justo en el medio de la fila—. Después apreté las
   cuatro contra la izquierda y el pozo se mudó a la derecha, que es
   peor: media hoja vacía al lado de una tabla chiquita.

   Lo que corresponde es que no haya un sobrante que ubicar. Persona
   arranca pegada al borde izquierdo, Última visita termina pegada al
   derecho, y los porcentajes reparten lo del medio: a 1200 quedan
   450 / 360 / 240 / 150, o sea unos 230px de aire entre bloque y bloque
   —parejo, que es lo que hace que se lea como una tabla y no como dos
   columnas y un desierto—.

   VAN EN PORCENTAJE Y NO EN PÍXELES para que el reparto se sostenga en
   cualquier pantalla, y con `table-layout` automático —el de siempre—
   para que el porcentaje sea una intención y no una tijera: un apellido
   largo o un PM con cinco cuentas ensanchan su columna y las otras
   ceden, en vez de que el texto se corte.

   La última va alineada a la derecha porque es la que cierra la fila
   contra el borde. */
.adm-usuarios th:nth-child(1),.adm-usuarios td:nth-child(1){width:37.5%}
.adm-usuarios th:nth-child(2),.adm-usuarios td:nth-child(2){width:30%}
.adm-usuarios th:nth-child(3),.adm-usuarios td:nth-child(3){width:20%}
/* `nowrap` para que "hace 2 semanas" no se parta en dos renglones y
   desnivele la fila cuando la tabla se achica. */
.adm-usuarios th:nth-child(4),.adm-usuarios td:nth-child(4){
  width:12.5%;text-align:right;white-space:nowrap;
}
.adm-usuarios td{vertical-align:middle}

/* ---------------- elegir entre pocas opciones ----------------

   Faltaba: los tres radios de "¿de dónde sale?" se dibujaban con el
   estilo crudo del navegador, así que el bloque quedaba desalineado
   contra los campos de arriba y la opción elegida no se distinguía.

   Van como tres tarjetas del mismo ancho, en la misma grilla que el
   resto del formulario. El radio se esconde pero sigue ahí: el teclado
   y los lectores de pantalla lo siguen viendo, y el `name` compartido
   hace que sólo una pueda estar marcada. */
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.choice label{
  display:flex;flex-direction:column;gap:2px;cursor:pointer;
  padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;transition:border-color .12s,background .12s;
}
.choice label:hover{border-color:var(--cap-ui)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice b{font-size:13px;font-weight:700;color:var(--c-text);line-height:1.2}
.choice em{font-style:normal;font-size:11px;color:var(--c-suave);line-height:1.3}
/* La marcada se pinta con el color del capítulo, y el borde se engrosa
   por dentro para que la tarjeta no cambie de tamaño al elegirla. */
.choice label:has(input:checked){
  border-color:var(--cap-ui);background:var(--cap-soft);
  box-shadow:inset 0 0 0 1px var(--cap-ui);
}
.choice label:has(input:checked) b{color:var(--cap-dark)}
.choice label:has(input:focus-visible){outline:2px solid var(--cap-ui);outline-offset:2px}
/* La misma tarjeta, pero como botón: en el modal de definir un gasto no
   hay que elegir y después confirmar —hay dos caminos y se toma uno—,
   así que la tarjeta ES la acción. Sólo dos, así que la grilla también
   es de dos. */
.choice.cap-elegir{grid-template-columns:repeat(2,1fr)}
.choice.cap-elegir button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  cursor:pointer;text-align:left;font:inherit;
  padding:14px 16px;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;transition:border-color .12s,background .12s;
}
.choice.cap-elegir button:hover{border-color:var(--cap-ui);background:var(--cap-soft)}
.choice.cap-elegir button:hover b{color:var(--cap-dark)}
.choice.cap-elegir button[disabled]{opacity:.5;cursor:default}

/* La pastilla de "a definir" en la tabla, que se puede apretar. Hereda
   el color de la pastilla y suma lo que la vuelve un botón. */
.cap-definir{border:1px dashed currentColor;cursor:pointer;font:inherit}
.cap-definir:hover{background:var(--c-yellow);color:#fff;border-style:solid}

@media (max-width:560px){
  .choice{grid-template-columns:1fr}
}

/* ---------------- Sincronización ----------------

   Antes las tres tarjetas y las dos tablas de nombres caían una atrás
   de otra, con tamaños de letra distintos y sin jerarquía: no se
   entendía qué pertenecía a qué ni de dónde salía cada cosa.

   Ahora cada fuente es una tarjeta cerrada, con su botón adentro —el
   botón que sincroniza la nómina vive en la tarjeta de la nómina, así
   que no hace falta preguntarse cuál es cuál— y siempre en el mismo
   orden de lectura: qué es, de dónde sale, cómo le fue, qué trajo,
   qué quedó por mirar. */
/* LA TARJETA DE FUENTE SE PLIEGA.

   Arriba queda lo que se mira todos los días —de dónde sale, si está al
   día, cuándo corrió, el botón— y adentro lo que se mira una vez: qué
   trae exactamente y qué escribió la última corrida. Tres tarjetas
   abiertas con sus descripciones y sus cinco cifras cada una eran media
   pantalla para contestar algo que se contesta con una pastilla. */
.sync-fuente{padding:0;overflow:hidden}
.sync-fuente > summary{cursor:pointer;list-style:none}
.sync-fuente > summary::-webkit-details-marker{display:none}
.sync-fuente > summary:hover .sync-origen{color:var(--cap-ui)}
/* La flecha va pegada al nombre y no al borde: ahí dice "esto se abre",
   contra el borde derecho competiría con la pastilla de estado. */
.sync-fuente > summary h3::after{
  content:'▸';display:inline-block;margin-left:8px;
  color:var(--c-suave);font-weight:400;transition:transform .15s;
}
.sync-fuente[open] > summary h3::after{transform:rotate(90deg)}
.sync-detalle{padding:18px 22px 22px;border-top:1px solid var(--c-border)}
.sync-detalle .sync-da{margin:0}
.sync-err{margin:0 22px 16px}
@media (max-width:860px){ .sync-detalle{padding:16px} .sync-err{margin:0 16px 14px} }
.sync-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 22px 0;
}
.sync-cab h3{margin:0 0 2px;font-size:16px}
.sync-origen{
  margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--cap-ui);
}
.sync-fuente .sync-da{
  margin:10px 22px 0;font-size:13px;line-height:1.5;color:var(--c-muted);max-width:72ch;
}
.sync-nums{margin:16px 22px 0;gap:26px}

/* Los avisos y las notas comparten el ancho de la tarjeta, para que se
   lea que son de ESA fuente y no del bloque siguiente. */
.sync-fuente .msg{margin:16px 22px 0}
.sync-fuente .msg ul{margin:6px 0 0;padding-left:18px}
.sync-fuente .msg p{margin:8px 0 0}

/* LO QUE DEJÓ LA ÚLTIMA CORRIDA, afuera de las tarjetas.

   Estaba adentro de cada una, y ahí hacía dos daños: la tarjeta de
   Nómina —que tiene que contestar "¿entró la nómina?" de un vistazo—
   terminaba con tres párrafos de letra chica abajo de sus números, y
   como cada fuente deja cosas distintas, las tres medían distinto.

   Se mantiene la regla de siempre: lo que hay que CORREGIR lleva color,
   lo que sólo se informa no. Si pesaran igual, lo segundo —que es
   siempre más— taparía lo primero. */
.sync-dejo{margin-top:22px;display:grid;gap:16px}

/* DOS CAJAS Y SE DISTINGUEN DE LEJOS.

   "Para corregir" pide una acción y por eso lleva el amarillo de aviso
   y una barra al costado; "Para saber" explica por qué los números son
   los que son y va en gris. Si pesaran igual, lo segundo —que es
   siempre más— taparía lo primero, y el día que aparezca algo para
   corregir tiene que saltar sin que nadie lo esté buscando. */
.sync-corregir,.sync-saber{
  border:1px solid var(--c-border);border-radius:var(--radius);padding:16px 18px;
}
.sync-corregir{
  background:var(--c-yellow-bg);border-color:#EBD9A0;border-left:4px solid var(--c-yellow);
}
.sync-saber{background:var(--c-hover)}

.sync-dejo h4{
  font-family:var(--font-title);font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;margin:0 0 14px;
}
.sync-corregir h4{color:var(--c-yellow)}
.sync-saber h4{color:var(--c-suave)}

/* Cada fuente, su título y sus líneas. La fuente iba adelante de cada
   frase y se leía como parte de ella —"Licencias 6 pedidos son de
   gente que…"—; arriba, cada aviso vuelve a ser una unidad. */
.sync-grupo + .sync-grupo{margin-top:14px;padding-top:14px;border-top:1px solid var(--c-border)}
.sync-corregir .sync-grupo + .sync-grupo{border-top-color:#EBD9A0}
.sync-grupo h5{
  display:flex;align-items:center;gap:7px;margin:0 0 6px;
  font-family:var(--font-title);font-size:12px;font-weight:700;color:var(--c-text);
}
/* Cuántos hay de esa fuente, sin tener que contarlos. */
.sync-cuantos{
  min-width:17px;height:17px;padding:0 5px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-surface);border:1px solid var(--c-border);
  font-size:10px;font-weight:700;color:var(--c-muted);
}
.sync-grupo ul{margin:0;padding-left:17px}
.sync-grupo li{margin:0 0 5px;font-size:12.5px;line-height:1.55;color:var(--c-muted)}
.sync-grupo li:last-child{margin-bottom:0}
.sync-grupo li b{color:var(--c-text)}
.sync-grupo li ul{margin:5px 0 0}

/* El pie cierra la tarjeta con una banda: cuándo corrió y el botón. */
.sync-pie{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:12px 22px;
  background:var(--c-hover);border-top:1px solid var(--c-border);
  font-size:12px;color:var(--c-muted);
}

/* ---------------- el detalle, plegado ----------------

   Los tres bloques de diagnóstico eran tres formas distintas apiladas y
   siempre abiertas: cuatro mil pixeles donde nada indicaba por dónde
   empezar. Ahora son tres cabeceras iguales, cerradas salvo que tengan
   algo que resolver, y la pastilla de la derecha dice cuánto hay sin
   necesidad de abrirlas. */
/* "3 de 3": el segundo número es contexto, no una cifra más. Si tuviera
   el mismo cuerpo, se leerían como dos datos distintos. */
/* "3 de 3": el segundo número es contexto, no una cifra más. Se
   distingue por COLOR y no por tamaño — con dos cuerpos distintos en el
   mismo renglón la línea se ve rota, y lo que se quería decir era
   simplemente "de estas tres, tres". Mismo tamaño, gris. */
.kpi .kpi-de{color:var(--c-suave)}

.sync-mas{margin-top:14px;padding:0;overflow:hidden}
.sync-mas > summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-title);font-weight:700;font-size:14px;
}
.sync-mas > summary::-webkit-details-marker{display:none}
.sync-mas > summary:hover{background:var(--c-hover)}
/* La flecha la ponemos nosotros: la nativa cambia de forma en cada
   navegador y acá hay tres cabeceras que tienen que verse iguales. */
.sync-mas > summary .sync-mas-tit::before{
  content:'▸';display:inline-block;width:16px;color:var(--c-suave);
  transition:transform .15s;
}
.sync-mas[open] > summary .sync-mas-tit::before{transform:rotate(90deg)}
.sync-mas[open] > summary{border-bottom:1px solid var(--c-border)}
.sync-mas-cuerpo{padding:20px 22px 22px}
/* Adentro del plegable el bloque ya no necesita su propio marco ni su
   propio título: la cabecera del <details> cumple las dos funciones. */
.sync-mas-cuerpo > .panel{border:0;padding:0;margin:0;box-shadow:none}
@media (max-width:860px){
  .sync-mas > summary{padding:14px 16px}
  .sync-mas-cuerpo{padding:16px}
}

@media (max-width:860px){
  .sync-cab,.sync-fuente .sync-da,.sync-nums,.sync-fuente .msg{
    margin-left:16px;margin-right:16px;padding-left:0;padding-right:0;
  }
  .sync-cab{padding:16px 16px 0}
  .sync-pie{padding:12px 16px}
}

/* El interruptor de modo prueba, abajo del selector de cuenta. Discreto
   a propósito: sólo lo ve un admin y no es una acción de todos los
   días, pero tiene que estar donde se elige la cuenta, porque es la
   misma pregunta —¿sobre qué estoy trabajando?— con otra respuesta. */
/* SE ESCRIBE `.cuentas label.modo-prueba` Y NO `.modo-prueba` A SECAS.

   Vive adentro de `.cuentas`, donde ya hay una regla para el `label`
   del selector de cuenta: la del rótulo CUENTA, en mayúsculas y con
   `display:block`. Esa regla es más específica, así que le ganaba —
   medido, el flex nunca se aplicaba y el cuadrado quedaba 3px más alto
   que el texto, alineado a la línea de base como si fueran dos
   palabras.

   Y había algo peor que el desalineado: en pantalla angosta el rótulo
   CUENTA se esconde, y como esto también era un `label` de `.cuentas`,
   el interruptor desaparecía entero. */
/* EL TEXTO VA EN EL COLOR DEL CAPÍTULO, y eso arregla dos cosas de una.

   Estaba en blanco al 62% —escrito pensando en una barra oscura, y esta
   barra es CLARA—, así que era blanco sobre blanco: se veía el cuadrado
   y al lado nada. Con `--cap-ui`, que es el tono del capítulo pensado
   para leerse sobre claro, el texto aparece y además cambia con la
   sección, como el resto de la barra. */
.cuentas label.modo-prueba{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;padding:0 10px;cursor:pointer;
  font-size:11.5px;font-weight:700;letter-spacing:normal;text-transform:none;
  color:var(--cap-ui);
}
/* La caja del texto medía más que su renglón, así que su centro no era
   el centro de lo que se ve. Con line-height 1 los dos centros
   coinciden. El tamaño del cuadrado va explícito por lo mismo: sin él
   lo decide el sistema operativo y cambia entre Windows y Mac. */
.cuentas label.modo-prueba span{line-height:1}
.cuentas label.modo-prueba input{
  margin:0;cursor:pointer;flex:none;width:13px;height:13px;
  /* El tilde toma el color del capítulo, como el item activo del menú.
     Antes era borravino fijo, elegido cuando ese color no significaba
     nada; desde que existe el capítulo Transversal, significa otra
     cosa. */
  accent-color:var(--cap-ui);
}
.cuentas label.modo-prueba:hover{color:var(--cap-dark)}

/* ---------------- el árbol de cuentas ----------------

   Los subproyectos van indentados debajo de su consolidada. Indentación
   y no color: en esa tabla el color ya significa estado —apagada, sin
   hoja, con CAP— y sumarle un tercer sentido la vuelve ilegible.

   La línea vertical es lo que hace que se lean como un grupo y no como
   filas sueltas más adentro. Va en el borde de la celda del nombre, que
   es la única columna donde la jerarquía significa algo. */
/* CON CONECTOR, no sólo con sangría.

   Doce píxeles de sangría no alcanzan: en una columna de treinta y seis
   filas el ojo no compara márgenes, y una consolidada sin hijos y un
   subproyecto terminaban pareciéndose. El conector es explícito —una
   línea que baja desde el padre y dobla hacia cada hijo— y se entiende
   sin haber leído ninguna explicación, que es lo que tiene que pasar
   con una jerarquía.

   Se dibuja con bordes y no con caracteres: un "└" depende de la
   tipografía, cambia de alto entre sistemas y no se puede alinear con
   la fila. */
.cta-hija > td:first-child{padding-left:38px;position:relative}

/* El tramo vertical. En la última hija llega hasta el codo y no sigue
   de largo: si bajara hasta el borde apuntaría a la fila siguiente, que
   es de otra cuenta. */
.cta-hija > td:first-child::before{
  content:'';position:absolute;left:18px;top:0;bottom:0;
  border-left:1px solid var(--c-borde-arbol,#C7CBD1);
}
.cta-hija.ultima > td:first-child::before{bottom:auto;height:50%}

/* El codo. */
.cta-hija > td:first-child::after{
  content:'';position:absolute;left:18px;top:50%;width:11px;
  border-top:1px solid var(--c-borde-arbol,#C7CBD1);
}

.cta-hija > td:first-child > b{font-weight:600}

/* La consolidada encabeza su bloque: el nombre en la tipografía de
   título, como los rótulos de sección. No es color —el color en esta
   tabla ya significa estado— es jerarquía tipográfica. */
.cta-raiz.con-hijas > td:first-child > b{
  font-family:var(--font-title);font-size:15px;letter-spacing:-.2px;
}

/* Sin línea entre una consolidada y sus hijos: se leen como un bloque
   y no como filas sueltas que quedaron más adentro. */
.cta-raiz + .cta-hija > td,.cta-hija + .cta-hija > td{border-top-color:transparent}

/* UNA CUENTA APAGADA SE VE APAGADA.

   Era `opacity:.55`, o sea un gris más entre varios: la tabla ya tiene
   grises para el bloque de CG, para el "sin hoja" y para el nombre de
   los subproyectos, así que la fila apagada quedaba apenas más clara.
   Y es el estado que más importa: decide si la cuenta existe para el
   resto del HUB.

   Se apaga el fondo y se le baja el contraste al texto, pero los
   botones se quedan enteros: son justamente lo que hay que apretar para
   volver a prenderla. */
.cta-off > td{background:var(--c-hover);color:var(--c-suave)}
.cta-off > td > b{color:var(--c-suave);font-weight:600}
.cta-off > td .mini{opacity:.75}
.cta-off > td .btn{opacity:1}

/* ---------------- la lista, cápsula por cápsula ----------------

   VERTICAL Y CAPSULADO, CON DOS JERARQUÍAS Y NO UNA.

   Antes esto era una tabla de seis columnas más una tira de pastillas
   abajo, y todos los nombres pesaban lo mismo: "Placas" se dibujaba
   igual que "Estrategia", así que no había forma de ver que una cuelga
   de una familia y la otra está sola en el primer nivel.

   Ahora hay dos y se distinguen a simple vista:

   · TÍTULO — una familia o un entregable suelto. Versalita sobre la
     banda gris que encabeza la cápsula.
   · SUBTÍTULO — lo que vive adentro de una familia. Minúscula, más
     chico, sobre el cuerpo blanco.

   La banda gris es la que hace de tapa: mientras la cápsula esté
   cerrada es todo lo que se ve, y contesta sola cómo viene la familia. */
/* Los tres momentos, numerados. Van como lista y no como párrafo porque
   son tres cosas que pasan en momentos distintos del mes: de corrido se
   leían como una sola instrucción larga. */

/* El porqué de "Otros", adentro de su cápsula: explica una vez, donde
   hace falta, en vez de vivir apretado en la banda. */
/* Lo que dice la banda de un entregable suelto que se tilda. */
/* El cuerpo de un entregable que va solo: una línea de controles, no
   una grilla de columnas — hay una sola fila que alinear. */


/* Una familia sin nada cargado NO desaparece ni se achica: sigue
   ocupando su lugar porque es parte de lo que le damos al cliente, y
   que esté apagada es justamente el dato. Se apaga entera —banda y
   cuerpo del mismo gris— para que se lea de lejos cuál tiene algo. */

/* LA BANDA: la tapa de la cápsula. */
/* Todas las bandas abren, así que todas responden al mouse igual. */

/* El título no se parte nunca: si el ancho no alcanza, lo que baja a un
   segundo renglón son los controles. "SEGUIMIENTO / SEMANAL" cortado en
   dos deja de leerse como un título y desalinea la banda entera. */
/* El resumen contesta desde la banda cómo viene la familia, así que la
   pantalla entera se puede leer sin abrir una sola cápsula. */
/* La flechita del resto del HUB es de diez píxeles y vive pegada a la
   palabra que abre —"4 cuentas ▾"—. Acá está sola contra el borde
   derecho de una banda ancha, y a ese tamaño no se ve: es lo único que
   dice que la cápsula se abre. */

/* EL CUERPO ES UNA GRILLA Y LAS FILAS NO DIBUJAN NADA.

   Cada fila es `display:contents`, así que sus celdas son hijas
   directas de la grilla y los números de todas las filas caen en la
   misma vertical. Con una caja por fila, cada una repartía su ancho por
   su cuenta y las columnas no existían. */

/* Los nombres de las columnas: una vez por cápsula y no una por fila.
   Diez filas llevaban veinte etiquetas repitiendo "plan" y "entregado". */

/* El SUBTÍTULO: el nombre de algo que vive adentro de una familia. */
.c-nom{font-size:13px;font-weight:500;color:var(--c-text)}


.c-num{display:inline-flex;align-items:center;gap:7px}
/* La etiqueta de cada celda viaja igual en el HTML aunque acá no se
   vea: en el celular no hay columnas y es ella la que nombra el
   número. El que decide dónde sirve es el CSS, no el JS. */
.c-num em,.c-avance em{display:none}
.c-quitar{justify-self:end}
/* Los dos botones de la derecha en una línea. Sin esto, en una pantalla
   angosta "+ Link" se parte en dos renglones y desalinea la fila
   entera. */
.c-link .btn,.c-quitar .btn,.c-todo .btn{white-space:nowrap}

/* El tilde de un hito y el botón de una fila apagada no tienen números
   que alinear: se llevan el ancho de las columnas de números. */
.c-todo{
  grid-column:2 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  /* Pegado a la derecha, en la misma vertical que el "Quitar" de las
     filas que sí tienen números: si no, el botón cae debajo de la
     columna "Plan" y parece que fuera a escribir ahí. */
  justify-content:flex-end;
}

/* "QUITAR" ES UNA CRUZ Y EL LINK NO TIENE CAJA.

   Cada fila llevaba cuatro controles con borde —dos contadores, un
   botón de link y uno de quitar— y leídos de corrido se hacían una
   hilera de cajas donde no se distinguía qué era importante. Los dos
   contadores son lo único que se toca todos los días, así que son los
   únicos que quedaron con marco. */


/* Los controles de un entregable que va solo son una línea, no una
   grilla de columnas: no hay nada con qué alinearlos, así que cada
   número lleva su etiqueta al lado. */
.c-num.suelto em{
  display:inline;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-suave);
}

@media (max-width:700px){
  /* Sin ancho para columnas, la grilla se deshace y cada fila vuelve a
     ser una caja apilada. Las etiquetas de cada celda aparecen —son las
     que reemplazan a los nombres de columna— con ancho fijo, así los dos
     números siguen cayendo en la misma vertical. */
  .c-nom,.c-num{flex:1 1 100%}
  .c-num em{
    display:inline;font-style:normal;font-size:10px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--c-suave);
    min-width:76px;
  }
}

/* EL TILDE DE UN HITO. Un entregable que pasa una vez por mes no tiene
   cantidad: salió o no salió. La casilla ocupa el lugar del contador de
   "entregado" y escribe el mismo campo. */
/* EL FORMULARIO QUE SUMA AL PLAN: EL MISMO PARA TODOS.

   Al pie de cada familia y al pie de "Otros" hay un formulario que hace
   lo mismo —qué, cuántos, sumar— y por eso se ven igual. Es la rejilla
   con etiquetas arriba que ya usan Licencias y Administración, así que
   tampoco se ve como una pieza aparte adentro del HUB: antes era un
   campo de texto suelto con un botón verde a lo ancho, que no se
   parecía a ningún otro formulario de la herramienta.

   Los <select> los reemplaza `desplegable.js` por un <button.sel-btn>,
   así que toda medida tiene que nombrar a los dos: si se le da forma
   sólo al select, el que se ve queda sin ella. */
/* El contador ya trae su propio marco: adentro del formulario sólo hay
   que dejarlo de la misma altura que el campo de al lado. */

/* Una familia entera cargada no muestra un desplegable vacío: contesta. */

@media (max-width:700px){
}


/* La tarjeta que pide acción se distingue de las que sólo informan.
   Es el único número de la pantalla sobre el que hay algo que hacer. */
.kpi.urge{border-color:var(--cap-ui)}
.kpi.urge .lbl{color:var(--cap-ui)}

/* EL RENGLÓN DE ABAJO: QUÉ CAMBIÓ, NO CUÁNTO HAY.

   Las tarjetas del HUB contestan todas la misma clase de pregunta
   —cuánto hay— y ninguna contestaba cómo viene. Doce mil consumidos
   pueden ser tranquilidad o alarma según si se fueron en cuatro meses o
   en la última semana, y sin ese dato el tablero se lee como un informe
   en vez de como una herramienta.

   Va ABAJO y chico, nunca al lado del número: el dato principal es el
   grande, y el día que compitan por el lugar gana el grande. Por eso
   tampoco lleva color propio —el color acá significa "esto te está
   esperando", y un consumo de la semana no espera nada—.

   Y NO APARECE EN CERO. Una semana sin gastos es lo más común del
   mundo, y un "+US$ 0" ocupa el mismo lugar para decir que no pasó
   nada. Cuando no hay movimiento, la tarjeta vuelve a ser la de antes. */
.kpi-delta{
  margin-top:3px;font-size:10.5px;line-height:1.2;
  color:var(--c-suave);font-variant-numeric:tabular-nums;
}

/* ---------------- qué entra en el CAP ----------------

   UN BOTÓN QUE NO COMPITE CON LOS NÚMEROS. Va debajo de las cuatro
   tarjetas, chico y gris: la pantalla sigue siendo el CAP y no su
   manual. El cuadradito del signo es lo que lo hace leerse como ayuda
   antes de leer la frase — y la frase está igual, porque un "?" suelto
   no dice qué te va a contestar. */
/* ES UN CHIP, Y ESO ES TODO EL ORDEN.

   Nació con medidas propias —12,5px, su padding, un cuadrado gris
   adentro— y quedaba parecido pero no igual a los chips de filtro que
   están más abajo en esta misma pantalla. Dos controles casi iguales se
   leen como un error de alguien, no como una decisión: ahora toma
   prestadas las medidas de `.chip` y son el mismo objeto.

   A LA DERECHA, y por eso es `flex` con ancho de su contenido y no
   `inline-flex`: los márgenes automáticos no empujan un elemento en
   línea, así que `margin-left:auto` sobre el inline-flex no hacía nada.
   Alineado a la derecha cierra la fila de tarjetas en vez de colgar del
   margen izquierdo.

   El signo va DESPUÉS del texto. Adelante hacía de viñeta y empujaba la
   frase; atrás cierra, y es lo último que queda cerca del cursor cuando
   se va a apretar. */
.cap-ayuda{
  display:flex;width:fit-content;align-items:center;gap:8px;
  margin:-4px 0 18px auto;
  /* Izquierda como un chip; derecha apretada, para que el redondel no
     quede flotando en el medio de un espacio vacío. Y 4px arriba y
     abajo —no los 6 del chip— porque acá el redondel de 18px es más
     alto que una línea de texto: con 6 quedaba 32 contra los 28 de los
     chips de filtro, cuatro píxeles que se ven cuando están uno debajo
     del otro en la misma pantalla. */
  padding:4px 4px 4px 14px;
  /* EL CONTORNO ES VIOLETA DESDE QUE SE VE, y no al pasarle el cursor.

     En gris sobre blanco la cápsula se leía como una leyenda: algo que
     informa, no algo que se aprieta. Y el que no sabe que atrás hay un
     pop-up no tiene ningún motivo para pasarle el cursor por arriba,
     así que la pista que sólo aparecía en `:hover` se la daba justo a
     los que ya no la necesitaban.

     En el violeta del capítulo se lee como parte de Recursos y como
     control, que son las dos cosas que es. */
  background:#fff;border:1px solid var(--cap-ui);border-radius:99px;
  font-family:inherit;font-size:12px;font-weight:600;
  color:var(--cap-ui);cursor:pointer;
}
/* Y AL PASAR EL CURSOR SE PRENDE SÓLO EL SIGNO.

   La cápsula ya está en su color, así que no le queda nada que decir:
   si además cambiara el borde y el texto, el gesto se leería como "esto
   se redibujó" en vez de "hay un botón acá". El redondel solo alcanza,
   y es el que queda abajo del cursor. */
.cap-ayuda-ico{
  display:grid;place-items:center;width:18px;height:18px;
  border:1px solid var(--cap-ui);border-radius:50%;
  font-size:11px;line-height:1;
}
.cap-ayuda:hover .cap-ayuda-ico,.cap-ayuda:focus-visible .cap-ayuda-ico{
  background:var(--cap-ui);border-color:var(--cap-ui);color:#fff;
}

/* El cuerpo del pop-up. Los párrafos del HUB no tienen una regla propia
   —los que existen son `.hint`, que es gris y chico— y acá el texto es
   lo único que hay: tiene que leerse como un texto, no como una nota al
   pie. */
.cap-ayuda-texto{margin:0 0 10px;font-size:13.5px;line-height:1.6}
.cap-ayuda-lista{
  list-style:none;margin:14px 0 4px;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.cap-ayuda-lista li{
  padding-left:12px;border-left:2px solid var(--cap-ui);
}
.cap-ayuda-lista li b{font-size:14px}
.cap-ayuda-lista li p{margin:3px 0 4px;font-size:13px;line-height:1.5}

/* =================================================================
   EL PULIDO: LO QUE PASA ENTRE UN ESTADO Y EL OTRO
   ================================================================= */

/* NADA SE TRANSICIONABA AL PASAR EL MOUSE.

   El archivo tenía más de treinta estados `:hover` y quince
   transiciones, y justo los controles que más se tocan estaban del lado
   de los que no: el botón principal, los chips de filtro, los links de
   la barra, las filas de KPI. Todos cambiaban de color en un cuadro.

   Un cambio instantáneo se lee como "la pantalla se redibujó"; el mismo
   cambio en 120ms se lee como "el botón me respondió". Es la diferencia
   entre una página y una herramienta, y es lo único de esta lista que
   se siente en cada click del día.

   SÓLO COLOR Y OPACIDAD, nunca `transform` ni `all`. `all` transiciona
   también lo que uno no pensó —un ancho que cambia al filtrar, un alto
   que crece al abrir— y eso convierte cada re-render en una animación
   que nadie pidió. Y los 120ms son los que ya usaban esas quince
   reglas: el archivo ya tenía un tiempo propio, no hacía falta
   inventar otro. */
.btn, .chip, a.pill, .side nav a, .side .pie button, .side .pie .ver-como,
.kpi-cab, .eq-persona, .cap-x, .cap-definir, .adm-chip button, .adm-mas,
.mes > summary, .mes-lista button, .gate .btn-google, .espia button,
.cap-tc-fila button, .contador-paso, .cuentas label.modo-prueba,
.cap-ayuda, .cap-ayuda-ico{
  transition:background-color .12s, border-color .12s, color .12s, opacity .12s;
}

/* EL HUNDIDO AL APRETAR.

   Había un solo `:active` en toda la app. Entre que apretás Guardar y
   que contesta la base pasa medio segundo en el que la pantalla no
   dice nada, y esa es justo la fracción en la que uno duda si el click
   entró. Un píxel para abajo lo contesta.

   Va SIN transición a propósito: el hundido tiene que ser instantáneo
   —es la respuesta al dedo— y la vuelta la hace la transición de
   arriba. Una transición en el apretado lo haría sentir blando, que es
   lo contrario de lo que un botón tiene que transmitir. */
.btn:active, .chip:active, .cap-definir:active, .adm-mas:active{
  transform:translateY(1px);
}
.btn:disabled:active{transform:none}

/* LA FILA DONDE ESTÁ EL MOUSE.

   Sólo la grilla de Equipo iluminaba la fila. Las otras dieciocho
   tablas —el historial de cotizaciones, los movimientos del CAP, las
   licencias, los usuarios— no marcaban nada, y en un historial de
   cuarenta filas seguir una con la vista de izquierda a derecha sin
   ninguna guía es incómodo: es el gesto que uno hace todo el tiempo
   ahí adentro.

   Va sobre `td` y no sobre `tr`: una fila de tabla no pinta su propio
   fondo de forma confiable cuando las celdas tienen el suyo. */
table tbody tr:hover > td{background:var(--c-hover)}

/* LOS NÚMEROS NO SE MUEVEN DE LUGAR.

   `.kpi .val` es la cifra grande de todas las tarjetas de sección y no
   tenía ancho fijo de dígito, así que al cambiar un número —declarás un
   gasto y el disponible se recalcula— las cifras se corrían solas. Y
   entre dos tarjetas vecinas los números no alineaban.

   Las tarjetas de la portada ya lo tenían, así que esto no es una
   decisión nueva: es la misma, aplicada donde faltaba. */
.kpi .val{font-variant-numeric:tabular-nums}
.lic-pendientes{margin-bottom:22px}
.lic-acciones{white-space:nowrap}
.lic-acciones .btn + .btn{margin-left:6px}

/* EL TILDE DE "INFORMADA", Y EL PERO CHIQUITO AL LADO.

   Los dos gestos no pesan lo mismo y la pantalla lo tiene que decir sin
   explicarlo: el tilde es lo que pasa siempre y se ve como un control,
   el "pero" es raro y se ve como un link. Si los dos fueran botones del
   mismo tamaño —que es como estaban— el PM tendría que leer para elegir
   entre dos cosas que elige mil veces igual. */
.lic-tick{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-weight:600;color:var(--c-text);user-select:none;
}
.lic-tick input{width:16px;height:16px;accent-color:var(--cap-ui);cursor:pointer;margin:0}
.lic-tick:hover{color:var(--cap-ui)}
.lic-pero{
  display:inline-block;margin-left:14px;border:none;background:none;padding:0;
  font:inherit;font-size:12px;color:var(--c-suave);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.lic-pero:hover{color:var(--c-red)}
/* Quién la cubrió y cuándo, abajo del tilde de "Cubierta". Chico y en
   gris: es la respuesta a "¿ésta la hablaste vos?", no un estado. */
.lic-cubrio{font-size:11.5px;margin-top:3px;white-space:nowrap}
/* Cuántas firmas faltan además de la tuya. Va pegado a los botones y
   en gris: es contexto para decidir, no una alarma. */


/* ---------------- el contador ----------------

   Compartido: lo usan Plan de contenidos y Carga de equipo. Por eso NO
   lleva prefijo de sección — la convención de la casa es que cada
   sección prefije lo suyo, y esto ya no es de ninguna.

   NINGÚN CONTROL DEL SISTEMA. Un <input type="number"> pelado dibuja el
   spinner del navegador: dos flechas grises de ocho píxeles, pegadas,
   distintas en cada sistema y con cara de panel de control de Windows.
   El HUB ya sacó el desplegable nativo y el datepicker nativo por lo
   mismo; éste era el que faltaba.

   Los botones son de verdad, así que también funcionan en celular,
   donde el spinner directamente no existe. */
.contador{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;overflow:hidden;
}
.contador input[type="number"]{
  width:44px;border:0;text-align:center;padding:6px 0;
  font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;
  background:transparent;color:var(--c-text);
}
.contador input:focus{outline:none}
.contador:focus-within{border-color:var(--cap-ui);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--cap-ui) 14%, transparent)}
/* Las flechitas del sistema, fuera. Firefox y el resto por separado. */
.contador input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.contador input[type="number"]::-webkit-outer-spin-button,
.contador input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.contador-paso{
  border:0;background:var(--c-hover);color:var(--c-muted);
  width:26px;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);
}
.contador-paso:hover{background:var(--cap-ui);color:#fff}
.contador-paso:active{transform:translateY(1px)}

/* ---------------- el link del entregable ----------------

   Un link de Drive son ciento veinte caracteres de ruido. Se muestra
   qué es —carpeta, archivo, planilla— y la dirección completa queda en
   el title. */
/* Aparece al pasar por la fila: el link es el dato, cambiarlo es la
   excepción y no tiene por qué competir con él todo el tiempo. */

/* RENOMBRAR UN ENTREGABLE ESCRITO A MANO.

   El lápiz se ve siempre y no al pasar el mouse: en un teléfono no hay
   dónde pasarlo, y un botón que sólo existe con hover es un botón que
   en el celular no existe. Queda tenue para no competir con el nombre,
   que es lo que se lee. */

/* SUBIR ARCHIVO ES UNA ETIQUETA, NO UN BOTÓN.

   El <input type="file"> del sistema dibuja un "Seleccionar archivo" en
   gris con el nombre al lado, distinto en cada navegador y en cada
   idioma: es el mismo problema que el desplegable y el datepicker
   nativos, que el HUB ya sacó de todos lados. El input queda escondido
   y el <label> hace de botón — el mismo que abre el buscador de
   archivos, sin JavaScript de por medio. */

/* El archivo adjunto se ve igual que el link: los dos contestan "dónde
   quedó esto". Que uno sea <a> y el otro <button> —porque la dirección
   del adjunto se firma recién al apretarlo— es cosa del código, no de
   la pantalla. */
/* Ni el link ni el archivo se parten en dos renglones: la columna
   Entrega es angosta y un nombre cortado por el medio desalinea la fila
   entera. El nombre ya viene recortado desde el JS, con la extensión
   pegada al final, que es la parte que dice qué es. */


/* ---------------- las piezas de un entregable ----------------

   "Seis placas" son seis cosas, cada una con su nombre y su link. El
   nombre de la fila pasa a ser el que abre esa lista, y la lista cae
   abajo cruzando la grilla entera — no es una columna más, es otro
   nivel. */
/* Cuántas hay cargadas, pegado al nombre. Es el dato que dice si vale
   la pena abrir. */


/* LAS CASILLAS. Una grilla de verdad: el número, el nombre, el link y
   el archivo caen en la misma vertical en las seis filas, que es lo que
   permite leer de un vistazo cuáles faltan. */
/* Sobre el gris del panel los campos van en blanco: es lo que dice
   dónde se escribe. Una casilla vacía tiene que verse vacía, no
   apagada. */
/* El "+ archivo" de una casilla es un <label> con el input escondido
   adentro, así que no hereda el cursor de un botón. */

@media (max-width:700px){
  /* Sin ancho para cinco columnas, cada casilla vuelve a ser una caja:
     el número y el nombre arriba, el link y el archivo debajo. */
}
@media (max-width:860px){
}

/* En pantalla angosta los pasos se agrandan: 26px de ancho es cómodo
   con un mouse y chico con un dedo. */
@media (max-width:860px){
  .contador-paso{width:38px}
  .contador input[type="number"]{width:52px;padding:9px 0}
}


/* ---------------- la grilla de nómina ----------------

   Es la planilla: personas en filas, cuentas a lo largo, scroll
   horizontal. Persona, rol y total quedan clavados a la izquierda —sin
   eso, tres cuentas a la derecha ya no sabés de quién es la fila que
   estás llenando, que es el error clásico de las planillas anchas. */
.eq-grilla{
  overflow:auto;max-height:70vh;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;
}
/* LAS DOS LÍNEAS QUE HACEN QUE `sticky` FUNCIONE, y ninguna es obvia.

   `border-collapse:separate` porque con `collapse` los bordes son del
   table y las celdas no se pueden despegar.

   `overflow:visible` porque el estilo global le pone `hidden` a las
   tablas —para recortar las esquinas redondeadas— y CUALQUIER ancestro
   con overflow distinto de visible entre la celda pegajosa y el
   contenedor que scrollea la desactiva. El síntoma es cruel: la celda
   computa `position:sticky` y `left:0`, todo se ve bien en el
   inspector, y se scrollea igual. */
.eq-grilla table{border-collapse:separate;border-spacing:0;font-size:12.5px;overflow:visible}
.eq-grilla th,.eq-grilla td{border-bottom:1px solid var(--c-border);padding:0}

/* Los encabezados también quedan arriba al scrollear vertical. */
.eq-grilla thead th{
  position:sticky;top:0;z-index:3;background:var(--c-side);
  border-bottom:1px solid var(--c-border);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-text);font-weight:800;text-align:center;
}
.eq-fija{position:sticky;background:#fff;z-index:2}
.eq-grilla thead .eq-fija{z-index:4;background:var(--c-side);text-align:center}
/* El número de fila. Ancho fijo y chico: es para contar, no para leer.
   Gris, porque compite con el nombre y el nombre tiene que ganar. */
.eq-num{left:0;width:36px;min-width:36px;max-width:36px;text-align:center;
        padding:7px 4px;color:var(--c-suave);font-size:11px;font-weight:600;
        font-variant-numeric:tabular-nums}
.eq-nombre{left:36px;min-width:210px;text-align:left;padding:7px 10px}
.eq-rol{left:246px;min-width:176px}
.eq-total{left:422px;min-width:76px;text-align:center;padding:7px 10px;
          font-variant-numeric:tabular-nums;font-weight:700}
/* La sombra marca dónde termina lo fijo y empieza lo que se mueve. */
.eq-total{box-shadow:6px 0 6px -6px rgba(0,0,0,.18)}
.eq-total.mal{color:var(--c-red)}

/* EL NOMBRE, NEGRO Y EN NEGRITA. Es el ancla de la fila: en una grilla
   de ochenta por veinte, la columna que se barre con la vista tiene que
   pesar más que los números. */
/* `text-transform:none` porque el estilo global pone los `th` en
   mayúsculas, y eso está bien para un encabezado y mal para un nombre
   propio: "CATTÁNEO" no es como se escribe el apellido de nadie. La
   celda es un `th` por accesibilidad —es el encabezado de su fila— y no
   por estética. */
.eq-quien{font-weight:700;color:var(--c-text);text-transform:none;font-size:13px}
/* SIN `position:relative` ACÁ. La celda ya está posicionada por
   `.eq-fija{position:sticky}`, así que el × absoluto se ancla igual —y
   ponerle `relative` PISA el sticky, porque las dos reglas tienen la
   misma especificidad y ésta va después. El síntoma es que la columna
   del nombre se scrollea y la del total no. */
.eq-nombre{padding-right:26px}

/* Sacar a alguien aparece al pasar por encima de SU fila, igual que el ×
   de los chips de cuentas. Escondido del todo sería un secreto; visible
   siempre serían ochenta cruces compitiendo con los datos. */
.eq-sacar{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;line-height:1;
  font-size:15px;color:var(--c-suave);padding:2px 4px;border-radius:var(--radius-xs);
  opacity:0;transition:opacity .12s;
}
.eq-grilla tbody tr:hover .eq-sacar{opacity:1}
.eq-sacar:hover{background:var(--c-red);color:#fff}
.eq-sacar:focus-visible{opacity:1}

/* El rol es un desplegable. `desplegable.js` reemplaza el <select> por
   un <button.sel-btn>, así que las dos reglas tienen que nombrar a los
   dos o la columna queda de un ancho con JS y de otro sin él. */
.eq-rol select,.eq-rol .sel-btn{
  width:100%;border:0;background:transparent;padding:8px 10px;
  font-size:12.5px;color:var(--c-text);font-family:var(--font-body);
  height:auto;min-height:0;border-radius:0;text-align:left;
}
.eq-rol .sel-btn.sel-vacio{color:var(--c-suave)}
.eq-rol select:focus,.eq-rol .sel-btn:focus{
  outline:none;background:color-mix(in oklab, var(--cap-ui) 8%, #fff);
}

/* EL NOMBRE DE LA CUENTA VA DERECHO, no de costado. Vertical entraba el
   nombre entero, pero leer veinte columnas obligaba a ladear la cabeza.
   Lo que entra derecho es la sigla —la de Cuentas, o las iniciales— y el
   nombre completo queda en el `title`. */
.eq-cuenta{
  width:68px;min-width:68px;max-width:68px;
  padding:8px 3px;vertical-align:middle;
  overflow:hidden;
}
/* HASTA DOS RENGLONES, Y EL ENCABEZADO AL DOBLE DE ALTO (29/10). Mateo:
   "hay algunos más grandes de lo que tiene el espacio, como La
   Serenísima, y se ve mal; haría que la fila sea el doble". En uno solo
   se cortaba con "…". Con dos entra el nombre, y el ancho de la columna
   —el de los porcentajes de abajo— no cambia. Lo que no entre en dos
   sigue en el `title`. */
/* EL ALTO DE DOS RENGLONES ES DE LA CELDA, NO DEL TEXTO (29/10). Puesto
   en el texto, "MELI" ocupaba el lugar de dos y quedaba pegado arriba,
   desparejo contra Persona, Rol y Total. En la celda, `height` es un
   mínimo y `vertical-align:middle` centra lo que haya: uno o dos. */
.eq-grilla thead th.eq-cuenta{height:2.4em}
.eq-cuenta-txt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;line-height:1.2;
  white-space:normal;overflow-wrap:anywhere;
}
/* Una cuenta apagada con gente adentro se dice, no se insinúa: es algo
   que hay que ir a arreglar a Cuentas. */
.eq-cuenta.off{color:var(--c-red)}
.eq-cuenta.off::after{content:' ·';}

.eq-celda{width:68px;min-width:68px;border-left:1px solid var(--c-hover);position:relative}
.eq-celda input{
  width:100%;border:0;background:transparent;text-align:right;
  padding:7px 17px 7px 0;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--c-muted);font-family:var(--font-body);
  -moz-appearance:textfield;appearance:textfield;
}
/* EL "%" LO DIBUJA LA CELDA, NO EL CAMPO. Adentro de un <input type=
   number> no se puede poner un sufijo, y convertirlo a texto para
   escribirle "50%" obliga a limpiar el símbolo en cada lectura: un
   parseo más donde hoy no hay ninguno. Acá el número queda a la derecha,
   el signo pegado, y el valor del campo sigue siendo un número limpio.
   Aparece sólo cuando hay algo, así la celda vacía queda vacía. */
.eq-celda.con::after{
  content:'%';position:absolute;right:5px;top:50%;transform:translateY(-50%);
  font-size:10.5px;color:var(--c-suave);pointer-events:none;
}
.eq-celda input::-webkit-outer-spin-button,
.eq-celda input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.eq-celda input:focus{outline:none;background:color-mix(in oklab, var(--cap-ui) 12%, #fff)}
/* La celda con valor se distingue de la vacía sin leer el número: en una
   grilla de ochenta por veinte, lo que se busca es dónde HAY algo. */
.eq-celda.con{background:color-mix(in oklab, var(--cap-ui) 6%, #fff)}
.eq-celda.con input{color:var(--c-text);font-weight:600}
/* PASARSE DE 100 PINTA LA FILA ENTERA.

   No es el mismo problema que faltar, y por eso no se ve igual. Faltar
   es normal —el resto del tiempo está en estructura o sin asignar— y
   alcanza con marcar el número. Pasarse es imposible: nadie trabaja un
   120% de su mes, así que es siempre un error de carga, y además esa
   persona está contada dos veces en dos cuentas distintas. Un número en
   rojo entre ochenta filas no se encuentra; una fila entera sí.

   Va con `!important` y con la fila de hover repetida abajo porque las
   reglas de fondo de las celdas fijas y de `.con` son más específicas
   que un selector de `<tr>`: sin esto la fila queda pintada a rayas. */
.eq-grilla tr.eq-pasada > th,
.eq-grilla tr.eq-pasada > td{
  background:color-mix(in oklab, var(--c-red) 9%, #fff) !important;
}
.eq-grilla tr.eq-pasada:hover > th,
.eq-grilla tr.eq-pasada:hover > td{
  background:color-mix(in oklab, var(--c-red) 15%, #fff) !important;
}
.eq-grilla tr.eq-pasada .eq-quien,
.eq-grilla tr.eq-pasada .eq-total{color:var(--c-red)}

/* La tabla de meses cargados: el mes que estás editando, marcado. */
.eq-meses{width:100%}
.eq-meses tr.aqui > td{background:color-mix(in oklab, var(--cap-ui) 8%, #fff)}
.eq-meses tr.aqui td:first-child::after{
  content:' · acá estás';font-weight:400;font-size:11px;color:var(--cap-ui);
}

.eq-grilla tbody tr:hover .eq-fija,
.eq-grilla tbody tr:hover .eq-celda{background:var(--c-hover)}
.eq-grilla tbody tr:hover .eq-celda.con{background:color-mix(in oklab, var(--cap-ui) 12%, var(--c-hover))}

@media (max-width:860px){
  /* SÓLO LA COLUMNA DE LA PLANILLA, y por eso lleva `.eq-fija`.

     Escrita a secas, esta regla también le pegaba a `.eq-rol` de las
     tarjetas de Equipo core —es la misma clase para dos cosas que no
     tienen nada que ver: acá una columna pegajosa de la grilla de
     nómina, allá cada bloque de rol de una tarjeta—. En el teléfono las
     tarjetas quedaban con el nombre de la cuenta, "6 personas" y NADA
     ADENTRO: los datos estaban en el DOM y el CSS los escondía. En la
     grilla las dos columnas siguen escondiéndose igual, que es para lo
     que se escribió, y el `left` de abajo es el que las reacomoda. */
  .eq-fija.eq-rol{display:none}
  .eq-total{left:206px}
  .eq-nombre{min-width:160px}
}

/* LA AYUDA, ARRIBA Y EN RENGLONES. Como párrafo abajo de la grilla no la
   leía nadie: para llegar hasta ella hay que haber pasado por todo lo
   que explica. Acá son cuatro reglas cortas, separadas por un punto
   medio, que se barren antes de empezar a escribir. */
.eq-ayuda{
  list-style:none;margin:0 0 10px;padding:0;
  display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:12px;color:var(--c-suave);
}
.eq-ayuda li{position:relative;padding-left:12px}
.eq-ayuda li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:4px;height:4px;border-radius:50%;background:var(--cap-ui);
}
.eq-ayuda b{color:var(--c-text);font-weight:700}

/* La lista de roles: plegada, porque se toca una vez cada tres meses. */
.eq-roles{margin:0 0 14px}
.eq-roles > summary{
  cursor:pointer;font-size:12px;color:var(--c-suave);
  padding:6px 0;list-style:none;user-select:none;
}
.eq-roles > summary::-webkit-details-marker{display:none}
.eq-roles > summary::before{content:'▸ ';color:var(--cap-ui)}
.eq-roles[open] > summary::before{content:'▾ '}
.eq-roles > summary b{color:var(--c-text);font-weight:700;margin-left:2px}
.eq-roles-caja{
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:12px 14px;background:#fff;
}
.eq-roles-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.eq-roles-chips .adm-chip i{font-style:normal;color:var(--c-suave);margin:0 2px}

/* El campo y el botón en la misma línea: sumar una persona es un gesto
   de un renglón, no un formulario. */
.eq-sumar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.eq-sumar input{
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:7px 10px;font-size:13px;font-family:var(--font-body);
  color:var(--c-text);background:#fff;min-width:220px;
}
.eq-sumar input:focus{outline:none;border-color:var(--cap-ui)}
.eq-roles-caja .eq-sumar{margin-top:0}

/* Editar un mes cerrado: la misma grilla, adentro de una modal. Más baja
   que la de la pantalla para que el título, la ayuda y "Listo" entren sin
   que la modal tenga su propio scroll encima del de la grilla. */
.eq-foto .eq-grilla{max-height:min(58vh, 620px)}
.eq-foto .eq-sumar select{
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:7px 10px;font-size:13px;font-family:var(--font-body);
  color:var(--c-text);background:#fff;min-width:260px;
}

/* La sigla, en Cuentas. El recuadro muestra en gris la que el HUB arma
   solo: así se ve qué va a salir sin haber escrito nada. */
.cta-sigla input{
  width:74px;border:1px solid transparent;border-radius:var(--radius-sm);
  padding:4px 6px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--font-body);
  color:var(--c-text);background:transparent;
}
.cta-sigla input::placeholder{font-weight:400;color:var(--c-suave);letter-spacing:0}
.cta-sigla input:hover{border-color:var(--c-border)}
.cta-sigla input:focus{outline:none;border-color:var(--cap-ui);background:#fff}

/* EL NOMBRE DE LA CUENTA, que se edita con un clic. Se ve como texto
   —es lo que se lee de la tabla— y al pasar el mouse aparece el mismo
   recuadro que la sigla de al lado, para que se note que es del mismo
   tipo: un dato que se toca en el lugar. Al hacer clic, el campo ocupa
   el mismo espacio y no mueve la fila. */
.cta-nombre{
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  padding:3px 6px;margin:-4px 0 -4px -7px;font:inherit;color:inherit;
  cursor:text;text-align:left;max-width:100%;
}
.cta-nombre:hover{border-color:var(--c-border);background:#fff}
.cta-nombre:focus-visible{outline:none;border-color:var(--cap-ui)}
.cta-nombre-campo{
  font:inherit;font-weight:700;color:var(--c-text);
  border:1px solid var(--cap-ui);border-radius:var(--radius-sm);
  padding:3px 6px;margin:-4px 0 -4px -7px;width:min(100%, 340px);background:#fff;
}
.cta-nombre-campo:focus{outline:none}
.cta-nombre-campo:disabled{opacity:.6}

/* ---------------- carga de equipo · cierre y alertas ----------------

   EL BLOQUE DE CIERRE DICE LO QUE HACE. Antes era un desplegable de mes
   suelto arriba a la izquierda y un botón a la derecha, y de eso había
   que deducir que el calendario elegía qué mes se cerraba —no qué datos
   se estaban mirando—. Ahora la frase y los controles están juntos. */
.eq-cierre{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;padding:12px 16px;margin-bottom:18px;
}
.eq-cierre-qué{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.eq-cierre-qué b{font-family:var(--font-title);font-size:14px}
.eq-cierre-qué .mini{color:var(--c-suave)}

/* La pastilla de estado, con el tamaño que pidió el pedido: es el dato
   que se mira de reojo para saber si falta cerrar. */
.eq-estado{
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border-radius:99px;
  background:color-mix(in oklab, var(--cap-ui) 12%, #fff);color:var(--cap-dark);
}
.eq-estado.ok{background:color-mix(in oklab, #1E9E6A 14%, #fff);color:#14724C}

/* ---- las alertas ----

   En viñetas y abajo. Como párrafo arriba empujaban la grilla y no
   escalaban: con cuatro nombres se leían, con veinte eran un ladrillo
   del que había que sacar comas con la vista. */
.eq-alertas{margin-top:22px}
.eq-alertas > h3{
  font-family:var(--font-title);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-suave);margin:0 0 10px;
}
.eq-alerta{
  border:1px solid var(--c-border);border-left:3px solid var(--cap-ui);
  border-radius:var(--radius-sm);background:#fff;padding:12px 16px;margin-bottom:10px;
}
.eq-alerta.grave{border-left-color:var(--c-red)}
.eq-alerta h4{
  margin:0;font-family:var(--font-title);font-size:13.5px;
  display:flex;align-items:center;gap:8px;
}
/* El número al lado del título y no al final: dice cuántas son antes de
   que la vista baje a contarlas. */
.eq-alerta h4 span{
  font-family:var(--font-body);font-size:11px;font-weight:700;
  background:var(--c-hover);color:var(--c-muted);
  padding:1px 7px;border-radius:99px;
}
.eq-alerta.grave h4 span{background:color-mix(in oklab, var(--c-red) 12%, #fff);color:var(--c-red)}
.eq-alerta > p{margin:4px 0 8px;font-size:12px;color:var(--c-suave)}
.eq-alerta ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));gap:2px 18px;
}
.eq-alerta li{position:relative;padding-left:13px;font-size:12.5px;line-height:1.7}
.eq-alerta li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:4px;height:4px;border-radius:50%;background:var(--c-suave);
}
.eq-alerta.grave li::before{background:var(--c-red)}
.eq-alerta li b{font-weight:600;color:var(--c-text)}

/* ---- los KPI como filtros ----

   Son botones, no tarjetas. Un número que dice "7 no suman 100%" y no
   hace nada te deja el trabajo entero por delante: bajar sesenta filas
   buscando cuáles son los siete. El puntero y el borde que se enciende
   avisan que se puede apretar. */
.eq-kpis .kpi, .kpis-filtran .kpi{
  font:inherit;text-align:inherit;cursor:pointer;
  transition:border-color .12s, background .12s;
}
.eq-kpis .kpi:hover:not(:disabled), .kpis-filtran .kpi:hover:not(:disabled){border-color:var(--cap-ui)}
.eq-kpis .kpi.on, .kpis-filtran .kpi.on{
  border-color:var(--cap-ui);
  background:color-mix(in oklab, var(--cap-ui) 7%, #fff);
}
/* Un KPI en cero no filtra nada: apretarlo daría una grilla vacía y la
   sensación de que se rompió algo. */
.eq-kpis .kpi:disabled, .kpis-filtran .kpi:disabled{cursor:default;opacity:.55}

.eq-filtro{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:color-mix(in oklab, var(--cap-ui) 7%, #fff);
  border:1px solid color-mix(in oklab, var(--cap-ui) 28%, #fff);
  border-radius:var(--radius-sm);padding:8px 14px;margin:-6px 0 16px;
  font-size:12.5px;color:var(--c-muted);
}
.eq-filtro span{margin-right:auto}
.eq-filtro b{color:var(--c-text)}


/* La columna de cuenta filtra al hacer clic. Sin gente no es clickeable:
   el title lo dice y el cursor no cambia. */
.eq-cuenta[role="button"]{cursor:pointer}
.eq-cuenta[role="button"]:hover{background:var(--c-hover)}
.eq-grilla thead th.eq-cuenta.on{
  background:color-mix(in oklab, var(--cap-ui) 18%, var(--c-side));
  color:var(--cap-dark);
}

/* La barra de cierre: todo a la misma altura. El desplegable de mes
   traía su propio alto y quedaba un par de píxeles arriba de la
   pastilla y del botón. */
.eq-cierre-hacer{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.eq-cierre .periodo{display:flex;align-items:center;gap:8px;margin:0}
.eq-cierre .mes > summary,
.eq-cierre .mes-solo{
  display:flex;align-items:center;height:32px;box-sizing:border-box;margin:0;
}
.eq-cierre .eq-estado,
.eq-cierre .btn{
  display:inline-flex;align-items:center;height:32px;box-sizing:border-box;margin:0;
}

/* ---- los tres encabezados fijos filtran ---- */
.eq-grilla thead th.eq-filtrable{cursor:pointer;user-select:none}
.eq-grilla thead th.eq-filtrable::after{content:' ▾';font-size:9px;opacity:.5}
.eq-grilla thead th.eq-filtrable:hover{color:var(--cap-dark)}
.eq-grilla thead th.eq-filtrable.on{
  background:color-mix(in oklab, var(--cap-ui) 18%, var(--c-side));
  color:var(--cap-dark);
}

/* El menú sale ARRIBA de la grilla y no colgando del encabezado:
   `.eq-grilla` scrollea, y todo lo posicionado adentro queda recortado
   por ese overflow. */
.eq-menu{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid color-mix(in oklab, var(--cap-ui) 28%, #fff);
  background:color-mix(in oklab, var(--cap-ui) 5%, #fff);
  border-radius:var(--radius-sm);padding:10px 14px;margin:-6px 0 16px;
}
.eq-menu > label{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-suave);font-weight:700;
}
.eq-menu input[type="search"]{
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:7px 10px;font-size:13px;font-family:var(--font-body);
  color:var(--c-text);background:#fff;min-width:240px;
}
.eq-menu input[type="search"]:focus{outline:none;border-color:var(--cap-ui)}
.eq-menu .chips{display:flex;flex-wrap:wrap;gap:6px;margin-right:auto}
.eq-menu .chip i{font-style:normal;opacity:.6;margin-left:5px;font-size:11px}
.eq-menu > .btn{margin-left:auto}

/* ---- "Editar los roles del equipo" tiene que parecer un botón ----
   Era un renglón de texto con una flecha de ocho píxeles: quedaba como
   una nota al pie y nadie iba a buscar ahí la lista de roles. */
.eq-roles.eq-boton > summary{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;padding:7px 13px;font-size:12.5px;color:var(--c-text);
}
.eq-roles.eq-boton > summary:hover{border-color:var(--cap-ui);background:var(--c-hover)}
.eq-roles.eq-boton[open] > summary{border-color:var(--cap-ui);margin-bottom:8px}
.eq-roles.eq-boton > summary b{
  font-family:var(--font-body);font-size:11px;font-weight:700;
  background:var(--c-hover);color:var(--c-muted);
  padding:1px 7px;border-radius:99px;margin-left:0;
}

/* ---- las tarjetas que son alerta ----

   Un recuadro suave y del mismo tono para las cuatro: la fila de arriba
   tiene que decir "esto hay para revisar" con una sola voz. Antes el
   naranja fuerte se prendía sólo en algunas y la fila decía a la vez
   "hay cuatro cosas" y "dos no importan".

   El ámbar y no el naranja del capítulo: es un aviso, no el color de la
   sección, y encima Nómina ahora es verde. */
.eq-kpis .kpi.eq-alarma, .kpis-filtran .kpi.eq-alarma{
  border-color:#E8C36A;
  background:linear-gradient(#FFFBF2, #fff);
}
.eq-kpis .kpi.eq-alarma .lbl, .kpis-filtran .kpi.eq-alarma .lbl{color:#8A6516}
.eq-kpis .kpi.eq-alarma:hover:not(:disabled), .kpis-filtran .kpi.eq-alarma:hover:not(:disabled){border-color:#D9A93C}
.eq-kpis .kpi.eq-alarma.on, .kpis-filtran .kpi.eq-alarma.on{
  border-color:#D9A93C;
  background:linear-gradient(#FFF4DF, #FFFBF2);
}
/* Una alerta en cero no existe: no ocupa el ancho de un filtro que no
   filtra. Se esconde con clase y no sacándola del DOM, para poder
   traerla de vuelta sin repintar la pantalla. */
.eq-kpis .kpi.vacia{display:none}

/* El menú de filtro arranca donde arrancan las tarjetas. Traía un
   margen negativo pensado para pegarse a los KPI y quedaba dos píxeles
   corrido; ahora comparten el mismo borde izquierdo. */
.eq-kpis{margin-bottom:16px}
.eq-menu,.eq-filtro{margin:0 0 16px}

/* ---- el modo prueba se ve en toda la pantalla ----

   Era una casilla tildada en la barra: se prendía para probar una
   cotización, se seguía trabajando, y lo que se cotizaba a la tarde no
   le llegaba al equipo sin que nadie supiera por qué. Un marco alrededor
   de todo no se olvida.

   Va como `box-shadow: inset` en un elemento fijo y no como `border` en
   el body: un borde real empuja el contenido cuatro píxeles y descoloca
   el layout entero cada vez que se prende o se apaga. Esto no ocupa
   nada, no intercepta clics y no afecta la impresión. */
/* EL MARCO, AHORA IMPOSIBLE DE PASAR POR ALTO.

   Eran 3px planos y se perdían: en una pantalla grande, tres píxeles
   de color contra el borde se leen como parte del monitor. El modo
   ahora borra lo que cargás cuando salís, así que no alcanza con que
   esté puesto: tiene que verse sin buscarlo.

   Son 6px y un resplandor que respira hacia adentro, el mismo recurso
   del hero y la misma idea de que la luz late despacio en vez de
   parpadear. Un parpadeo pide atención todo el tiempo y termina tapado
   con una ventana; una respiración de seis segundos se registra de
   reojo y no cansa.

   EL COLOR SALE DEL CAPÍTULO, que es como estaba desde el principio.
   Lo pasé a naranja fijo un rato, con el argumento de que el capítulo
   neutro es gris y en la portada el marco quedaba casi invisible. El
   dato es cierto pero la conclusión era mía, no de Mateo, y él lo
   quiere del capítulo: el marco se lee como una capa puesta sobre el
   HUB y no como una alarma pegada arriba. Con 6px y el resplandor
   respirando, el gris de la portada tampoco pasa desapercibido, que
   era lo único que el naranja resolvía.

   El `--cap-glow` del respaldo queda igual por si un día se dibuja el
   marco fuera de un capítulo: sin `--cap` definido no habría color
   ninguno y el marco desaparecería entero.

   Sigue siendo `box-shadow: inset` sobre un elemento fijo y no un
   `border` en el body: un borde real empuja el contenido y descoloca el
   layout entero cada vez que se prende o se apaga. Esto no ocupa nada,
   no intercepta clics y no sale impreso. */
html.en-prueba body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  box-shadow:inset 0 0 0 6px var(--cap, #FF7400),
             inset 0 0 34px 0 var(--cap-glow, #E85D00);
  animation:pruebaRespira 6s ease-in-out infinite alternate;
}
@keyframes pruebaRespira{
  from{ box-shadow:inset 0 0 0 6px var(--cap, #FF7400),
                    inset 0 0 22px 0 var(--cap-glow, #E85D00); }
  to  { box-shadow:inset 0 0 0 6px var(--cap, #FF7400),
                    inset 0 0 62px 8px var(--cap-glow, #E85D00); }
}
/* Quien pidió menos movimiento se queda con el marco quieto, que ya es
   el doble de grueso que antes y con su resplandor. */
@media (prefers-reduced-motion:reduce){
  html.en-prueba body::after{animation:none}
}
/* Y el rótulo, arriba a la derecha, con el mismo color. Sin él, el marco
   es un color raro sin explicación: dice QUE pasa algo y no QUÉ. Dice
   además qué implica, que es lo que cambió: que nada se guarda. */
html.en-prueba body::before{
  content:'MODO PRUEBA';position:fixed;top:0;right:0;z-index:10000;
  pointer-events:none;
  background:var(--cap, #FF7400);color:#fff;
  font-family:var(--font-title);font-size:10px;font-weight:700;
  letter-spacing:.12em;padding:5px 14px 6px;
  border-bottom-left-radius:8px;
  box-shadow:0 0 18px 2px var(--cap-glow, #E85D00);
}
@media print{ html.en-prueba body::after, html.en-prueba body::before{display:none} }

/* El modo prueba baja al pie, con el nombre. No tiene nada que ver con
   la cuenta: es una preferencia de quien cotiza. */
.pie .modo-prueba{
  display:flex;align-items:center;gap:7px;margin-top:8px;
  font-size:11.5px;color:var(--c-suave);cursor:pointer;
}
.pie .modo-prueba input{margin:0;cursor:pointer;accent-color:var(--cap-ui)}
.pie .modo-prueba:hover{color:var(--c-text)}

/* ---- la portada: las pantallas que no son de la cuenta ---- */
.ini-aparte{
  font-family:var(--font-title);font-size:15px;margin:34px 0 14px;
  color:var(--c-text);
}

/* ---------------- el tablero de CAPs ----------------

   Es una pantalla para mirar, no para cargar: las cifras mandan y el
   campo editable tiene que pesar menos que ellas, no más.

   La fila que se pasó se pinta entera, igual que en la carga de nómina.
   Una pastilla en la última columna obliga a barrer dieciséis renglones
   hasta el borde derecho; el fondo se ve sin leer. */
.adm-tablero tbody tr.adm-pasada{background:var(--c-red-bg)}
.adm-tablero tbody tr.adm-pasada td{border-color:transparent}

/* Una cuenta que no produjo nada este mes. No se esconde —que una
   cuenta activa esté en cero es justamente lo que hay que ver— pero
   tampoco compite con las que sí tienen números. */
.adm-tablero tr.adm-apagada td{color:var(--c-suave)}
.adm-tablero tr.adm-apagada td b{font-weight:600}
/* EL TECHO ES UN IMPORTE, y sólo se vuelve campo cuando se lo toca.
   Abierto de entrada ponía un 12000 pelado al lado de un importe con
   formato: la única columna suelta, y encima con caja y botón. */
.adm-cap-abrir{
  font:inherit;color:inherit;background:none;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-sm);
  padding:3px 7px;margin:-3px -7px;
  transition:border-color .12s, background .12s;
}
.adm-cap-abrir:hover{border-color:var(--c-border);background:#fff}
.adm-tablero .adm-cap input{text-align:right;width:110px}
/* El cero se escribe en gris en vez de con un guión: mezclar guiones
   con importes hace que cada fila se lea distinta. */
.adm-cero{color:var(--c-muted)}

/* ---------------- el mapa de la organización ----------------

   Alto vuelo y Hubs, traídos del MAPA de producción. La estructura es
   la de allá —los mismos niveles, las mismas cajas, los mismos
   conectores— y lo único que cambia es el color: las pastillas violetas
   pasan al color del capítulo, porque acá el color dice en qué capítulo
   estás parado. */
.org-bajada{
  max-width:78ch;margin:0 0 26px;color:var(--c-muted);font-size:14px;line-height:1.6;
}

/* La línea de los conectores: el mismo violeta clarito del original,
   pasado al color del capítulo. */
.org-arbol{--org-linea:color-mix(in oklab, var(--cap-ui) 45%, #fff)}
.org-arbol{display:flex;flex-direction:column;align-items:stretch}
.org-nivel{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}

/* La bajada entre dos niveles. */
.org-baja{display:block;width:2px;height:22px;background:var(--org-linea);margin:0 auto}

/* La bifurcación: de cada caja sube su propia bajada, y los tramos
   horizontales van uniendo un centro con el siguiente. */
.org-bifurca{
  --org-gap:16px;
  --org-borde:1px;   /* el de .org-caja; ver el tramo horizontal */
  display:flex;flex-wrap:wrap;align-items:stretch;
  justify-content:center;gap:var(--org-gap);padding-top:22px;
}
/* La bajada de cada caja. */
.org-bifurca > .org-caja::before{
  content:'';position:absolute;top:-22px;left:50%;width:2px;height:22px;
  margin-left:-1px;background:var(--org-linea);
}
/* La horizontal, EN TRAMOS: cada caja tiende el suyo hasta el centro de
   la de al lado —medio ancho propio, el gap, medio ancho de la vecina—
   y la última no tiende ninguno.

   Antes era una sola línea de punta a punta, calculada como
   `100 / (2 × ramas)` por ciento del renglón. Esa cuenta sale bien sólo
   si las cajas llenan el renglón y no hay gap, y acá fallan las dos
   cosas: las cajas tienen `max-width:420px`, así que en pantalla ancha
   sobra lugar y sus centros caen bastante más adentro de lo que la
   cuenta suponía. La línea les pasaba de largo por los dos costados y
   seguía hasta la nada, que es exactamente lo que se veía debajo de
   Dirección ejecutiva. Por tramos no puede volver a pasar: cada tramo
   nace en un centro y muere en el siguiente, midan lo que midan.

   El `2 × borde` del final no es un ajuste al ojo: un absoluto mide sus
   porcentajes contra la CAJA DE RELLENO del padre, que no incluye el
   borde de 1px de `.org-caja`. Sin eso el tramo llega 2px corto y queda
   una hendija contra la bajada de la vecina. Es un error fijo, no
   proporcional, así que se descuenta una vez y vale para cualquier
   ancho. */
.org-bifurca > .org-caja:not(:last-child)::after{
  content:'';position:absolute;top:-22px;height:2px;background:var(--org-linea);
  left:50%;right:calc(-50% - var(--org-gap) - 2 * var(--org-borde));
}

/* Angosto: las cajas envuelven y cualquier línea apuntaría a cualquier
   lado. Se apagan, y la jerarquía la siguen diciendo el orden y los
   cortes. */
@media (max-width:860px){
  .org-baja,
  .org-bifurca > .org-caja::before,
  .org-bifurca > .org-caja::after{display:none}
  .org-bifurca{padding-top:0}
}

.org-rotulo{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cap-ui);color:#fff;
  font-family:var(--font-title);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:7px 18px;border-radius:99px;
}


.org-gente{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 30px}
/* LA PERSONA ES UN BOTÓN, así que hay que apagarle lo de botón —el
   fondo gris, el borde, el cuerpo de letra heredado— y dejarle lo que
   sirve: que se pueda tabular y que el cursor diga que se aprieta.
   Adentro todo va en <span>, porque un <div> adentro de un <button> es
   HTML inválido y el navegador lo saca del botón al parsear. */
.org-p{
  width:150px;text-align:center;
  display:block;background:none;border:0;padding:8px 4px 6px;margin:0;
  font:inherit;color:inherit;cursor:pointer;border-radius:var(--radius-sm);
  transition:background .12s;
}
.org-p:hover{background:var(--c-hover)}
.org-p:focus-visible{outline:2px solid var(--cap-ui);outline-offset:2px}
.org-p > span{display:block}
/* La cara: las iniciales abajo y la foto encima. Si la foto no carga se
   quita sola y quedan las iniciales, en vez del ícono de imagen rota. */
.org-cara{
  position:relative;width:56px;height:56px;margin:0 auto 8px;border-radius:50%;
  background:var(--cap-soft);color:var(--cap-ui);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-size:15px;font-weight:700;letter-spacing:.02em;
  overflow:hidden;
}
.org-cara img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--c-surface);
}
/* "Focal point" es una chapa DE LA PERSONA: va entre la cara y el
   nombre, que es donde está en el mapa original. */
.org-focal{
  display:inline-block;margin-bottom:4px;padding:2px 8px;border-radius:99px;
  background:var(--cap-soft);color:var(--cap-ui);
  font-family:var(--font-title);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.org-nombre{font-weight:700;font-size:13.5px;line-height:1.35}
.org-rol{color:var(--c-muted);font-size:11.5px;line-height:1.4;margin-top:2px}

/* LA MARQUITA DE QUIÉN TIENE CONTACTO CARGADO.

   Va chica y en gris: no es un dato de la persona, es el estado de la
   carga. Lo importante de la tarjeta sigue siendo el nombre y el rol.
   Mientras la carga esté a medias, esto es lo que deja ver el avance
   sin ir a contar a ningún lado. */
.org-tiene{
  margin-top:5px;display:flex;justify-content:center;gap:6px;
  color:var(--cap-ui);font-size:11px;line-height:1;opacity:.75;
}

/* ---- el pop-up de contacto ---- */

.org-pop-cara{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.org-pop-cara h2{margin:0;font-size:19px;line-height:1.2}
.org-pop-cara .hint{margin:3px 0 0}
/* La cara del pop-up es la misma pieza, más grande. Sin `flex:none` la
   aplasta el nombre largo de al lado y queda un óvalo. */
.org-cara-grande{width:66px;height:66px;margin:0;font-size:18px;flex:none}

/* Las dos vías, una debajo de la otra y del mismo alto. Una al lado de
   la otra entran en la modal pero el mail queda recortado apenas pasa
   de veinte caracteres, y un mail a medias no sirve para nada. */
.org-pop-vias{display:flex;flex-direction:column;gap:10px}
.org-via{
  display:flex;align-items:center;gap:12px;width:100%;
  justify-content:flex-start;text-align:left;padding:11px 14px;
}
.org-via b{display:block;font-size:12px;line-height:1.2}
.org-via em{
  display:block;font-style:normal;font-size:12.5px;line-height:1.35;
  opacity:.85;word-break:break-all;
}
.org-via-ico{font-size:15px;line-height:1;flex:none}
/* La vía que no está cargada NO es un botón: no lleva a ningún lado, y
   un botón que no hace nada es peor que no tener botón. Se ve, dice que
   falta, y no se puede apretar. */
.org-via.vacia{
  border:1px dashed var(--c-border);border-radius:var(--radius-sm);
  color:var(--c-suave);background:none;
}

/* ---- cargar el contacto, sólo para Staff y administración ---- */

.org-pop-editar{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--c-border);
}
.org-pop-editar h3{margin:0 0 12px;font-size:13px}
.org-pop-editar label{display:block;margin-bottom:12px}
.org-pop-editar label > span{
  display:block;margin-bottom:5px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--c-suave);
}
.org-pop-editar input{
  width:100%;padding:9px 11px;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);background:var(--c-surface);font:inherit;font-size:13.5px;
}
.org-pop-editar input:focus{outline:none;border-color:var(--cap-ui)}
.org-pop-editar .hint{display:block;margin-top:5px;font-size:11.5px}

/* ---- el modo edición del mapa ---- */

.org-barra{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
}
.org-barra .hint{margin:0}

/* Los mandos de una caja van ARRIBA A LA DERECHA y no abajo: abajo
   quedaban debajo de la gente, y en una caja de cuatro personas hay que
   scrollear para encontrar el botón que borra esa caja. */
.org-mandos{display:flex;align-items:center;gap:2px}
.org-mandos-caja{position:absolute;top:8px;right:8px}
.org-caja.editando,.org-nivel.editando{position:relative;padding-top:34px}
/* En un escalón del árbol los mandos van CENTRADOS ARRIBA y no pegados
   a la derecha: el escalón ocupa todo el ancho pero su caja está en el
   medio, así que los botones quedaban flotando contra el borde de la
   pantalla, a treinta centímetros de lo que tocan. */
.org-nivel.editando{padding-top:0}
.org-nivel .org-mandos-caja{position:static;margin-bottom:10px}

.org-mando{
  width:24px;height:24px;padding:0;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);background:var(--c-surface);
  color:var(--c-muted);font-size:11px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.org-mando:hover:not(:disabled){border-color:var(--cap-ui);color:var(--cap-ui)}
/* Apagada y no escondida: si la flecha desapareciera, los otros mandos
   se correrían de lugar en cada caja según dónde esté en la lista, y no
   habría dos cajas con los botones en el mismo sitio. */
.org-mando:disabled{opacity:.3;cursor:default}

/* La persona con sus mandos debajo. El bloque entero se centra para que
   la fila de botones quede alineada con la cara y no con el borde. */
.org-conmandos{display:flex;flex-direction:column;align-items:center;gap:4px}
.org-conmandos .org-mandos{margin-bottom:4px}

/* Los dos "+": el de persona vive adentro de su caja, el de bloque al
   final de la fila. Punteados y en gris — son la acción menos
   importante de la pantalla y no tienen que competir con el contenido. */
.org-sumar{
  margin-top:12px;padding:7px 14px;border:1px dashed var(--c-border);
  border-radius:var(--radius-sm);background:none;color:var(--c-muted);
  font:inherit;font-size:12px;cursor:pointer;
}
.org-sumar:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
/* El de bloque es una caja más de la fila: mismo ancho mínimo que sus
   hermanas, así la fila no queda con un botoncito colgando al final. */
.org-sumar-bloque{
  flex:1 1 260px;max-width:420px;margin-top:0;
  display:flex;align-items:center;justify-content:center;min-height:90px;
}
.org-rama-sumar{display:flex;justify-content:center;margin-top:18px}
.org-rama-sumar .org-sumar-bloque{flex:0 0 260px;min-height:56px}

/* El tilde de focal point: la casilla y su texto en la misma línea, con
   la ayuda abajo ocupando el ancho entero. */
.org-pop-editar .org-check{
  display:grid;grid-template-columns:auto 1fr;gap:4px 9px;align-items:center;
}
.org-pop-editar .org-check input{width:auto;justify-self:start}
.org-pop-editar .org-check > span{
  margin:0;text-transform:none;letter-spacing:0;font-size:13px;
  color:var(--c-text);font-weight:600;
}
.org-pop-editar .org-check .hint{grid-column:1 / -1;margin:0}

/* ---- los socios: una línea, cada uno en su recuadro ---- */

/* TODOS DEL MISMO TAMAÑO.

   Eran cinco pastillas de cinco anchos distintos —147, 126, 108, 143,
   126— porque cada una medía lo que medía su nombre. Puestas en una
   fila, cinco tamaños distintos se leen como cinco cosas distintas, y
   son cinco socios: la misma cosa cinco veces.

   La grilla de una sola fila con `1fr` es lo que las empareja sin
   inventar un ancho: `width:max-content` hace que la fila mida lo que
   necesita el conjunto, y `1fr` reparte ese ancho en partes iguales, o
   sea que todas terminan del ancho del nombre más largo. Un número
   fijo habría andado hoy y se habría roto el día que entre un apellido
   largo.

   `stretch` iguala el alto por el mismo motivo: hoy los cinco tienen
   mail y teléfono, así que los cinco tienen la línea de íconos y miden
   igual de alto. Al que le borren el teléfono mañana se le achica la
   pastilla, y la fila vuelve a quedar despareja sin que nadie haya
   tocado el diseño.

   EN EL CELULAR NO VAN EN UNA FILA: cinco columnas en 375px dejarían
   cada nombre en 60px. Ahí se envuelven de a dos, que es lo que entra,
   y siguen iguales entre sí porque `auto-fit` con `1fr` reparte igual
   lo que haya en cada renglón. */
.org-socios{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  width:max-content;max-width:100%;margin-inline:auto;
  justify-content:center;align-items:stretch;gap:10px;
}
.org-socio-uno{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
@media (max-width:560px){
  .org-socios{
    grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    width:auto;
  }
}

/* EL RECUADRO ES LO QUE DICE QUE SE PUEDE APRETAR. Antes era texto
   plano separado por puntos: nada anunciaba que respondiera al click, y
   la marquita de contacto se confundía con el separador. El borde hace
   las dos cosas —separa y anuncia— así que el separador sobra. */
.org-socio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:100%;height:100%;
  padding:8px 16px;margin:0;border:1px solid var(--c-border);
  border-radius:99px;background:var(--c-surface);
  font:inherit;color:var(--c-muted);cursor:pointer;
  transition:border-color .12s, color .12s;
}
.org-socio:hover{border-color:var(--cap-ui);color:var(--c-text)}
.org-socio:focus-visible{outline:2px solid var(--cap-ui);outline-offset:2px}
.org-socio-nombre{font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
/* Los íconos ABAJO del nombre, como en las tarjetas de todos los demás.
   Al lado del nombre alargaban cada pastilla lo suficiente como para
   que los cinco no entraran en un renglón. */
.org-tiene-chico{
  display:flex;gap:5px;color:var(--cap-ui);font-size:10px;line-height:1;opacity:.8;
}

/* ---- la ficha, con el lápiz arriba a la derecha ---- */

.org-pop-quien{flex:1 1 auto;min-width:0}
/* `flex:none` para que no lo apriete un nombre largo, y alineado arriba
   para que quede a la altura del nombre y no del cargo. */
.org-pop-lapiz{flex:none;align-self:flex-start}

/* Las cajas hermanas, una al lado de la otra.

   `flex-start` Y NO `stretch`, QUE ES LO QUE HABÍA.

   Con `stretch` todas medían lo alto de la más alta, y eso sonaba bien
   hasta que se miró: en servicios transversales hay cuatro cajas, tres
   con una persona y "Gestión administrativa" con dos. Las dos no entran
   una al lado de la otra en 250px de caja, así que envuelven, esa caja
   pasa a medir el doble, y el stretch le regalaba ese doble a las otras
   tres. Resultado: tres tarjetas de una persona con ciento veinte
   píxeles de blanco abajo del nombre. Un hueco así no se lee como
   prolijidad, se lee como que falta algo. En HUBS pasa lo mismo, y peor,
   porque "Innovación y creatividad" tiene cuatro personas.

   Ahora cada caja mide lo que tiene adentro, y el alto vuelve a querer
   decir algo: una tarjeta más larga es una tarjeta con más gente. Dos
   cajas con la misma cantidad de personas siguen midiendo exactamente
   lo mismo — que es la regla que se pidió— pero ahora porque tienen lo
   mismo adentro y no porque una se estiró.

   El costo es que el borde de abajo del renglón queda escalonado. Es el
   precio de que el alto signifique algo, y se paga una vez: el día que
   todas las cajas tengan la misma gente, el escalón desaparece solo. */
.org-rama{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;
}
.org-caja{
  position:relative;flex:1 1 260px;max-width:420px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:18px 16px 20px;box-shadow:var(--sombra);
}
.org-hubs .org-caja{flex:1 1 300px}

/* El corte entre las tres partes. Es lo que reemplaza a los tres
   capítulos: se lee de arriba abajo y cada bloque dice qué es. */
.org-corte{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--c-border);margin:34px 0 18px;padding-top:22px;
}
.org-corte h3{margin:0;font-size:17px}
.org-corte span{
  font-family:var(--font-title);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);
}
/* El lápiz del título del capítulo va PEGADO AL NOMBRE. Estuvo un rato
   en el extremo derecho del renglón, con `margin-left:auto`, y Mateo lo
   levantó: "el lápiz quedó en la punta derecha y los títulos en la
   punta izquierda, así es muy difícil entender que se pueden editar".
   Un control sólo dice qué edita si está al lado de lo que edita.

   Va con menos separación que el resto de la fila —el `gap` del corte
   es de 12px— para que se lea como parte del título y no como un tercer
   elemento suelto. */
.org-mandos-corte{margin-left:-5px}


/* =================================================================
   INFORMACIÓN · HERRAMIENTAS
   =================================================================

   Tarjetas, no tabla. La planilla de origen tiene quince columnas y
   veinte filas, y leída así obliga a barrer con el dedo para contestar
   "¿qué es esto?". Una tarjeta contesta las cuatro cosas que importan
   —qué es, para qué, quién la maneja, quién la tiene— sin salir del
   rectángulo. Es la misma decisión que Estructura. */

.hrr-cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.hrr-grupo{margin-bottom:26px}
.hrr-grupo-tit{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hrr-grupo-tit h3{
  margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--cap-ui);font-weight:800;
}
.hrr-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}

.hrr-card{
  display:block;text-align:left;text-decoration:none;color:inherit;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:13px 14px;
}
/* Sólo la que TIENE link se comporta como algo apretable. Un hover que
   promete y no lleva a ningún lado es peor que no tener hover. */
.hrr-con-link{cursor:pointer}
.hrr-con-link:hover{border-color:var(--cap-ui);background:var(--c-hover)}
.hrr-con-link:hover .hrr-ir{opacity:1}

.hrr-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.hrr-top b{font-family:var(--font-title);font-size:15px;font-weight:800;line-height:1.15}
.hrr-logo{width:20px;height:20px;object-fit:contain;flex:none}
/* El reemplazo del logo cuando no hay archivo. Mismo tamaño y mismo
   lugar, así la grilla no se mueve según quién tenga imagen. */
.hrr-ini{
  display:grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:var(--radius-xs);background:var(--c-hover);
  font-size:9.5px;font-weight:700;color:var(--c-muted);line-height:1;
}
.hrr-ir{margin-left:auto;color:var(--c-suave);font-size:12px;opacity:.45}
.hrr-card p{margin:0 0 7px;font-size:12.5px;line-height:1.45;color:var(--c-text)}

/* EL PIE DE LA TARJETA: quién la administra y quién tiene acceso.

   Chico y gris, y en dos líneas si no entra: es el dato que se busca
   cuando hace falta pedir algo, no el que se lee al pasar. Los rótulos
   van en `em` sin cursiva, que es lo que separa "Administra" del nombre
   sin gastar un signo de puntuación. */
.hrr-card .hrr-pie{
  margin:7px 0 0;padding-top:7px;border-top:1px solid var(--c-border);
  display:flex;flex-direction:column;gap:2px;
  font-size:11.5px;line-height:1.45;color:var(--c-suave);
}
.hrr-card .hrr-pie em{font-style:normal;font-weight:700;color:var(--c-muted);margin-right:5px}

.hrr-acts{display:flex;align-items:center;gap:6px;margin-top:10px}
.hrr-x{
  background:none;border:0;color:var(--c-suave);cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;border-radius:var(--radius-xs);
}
.hrr-x:hover{color:var(--c-red);background:var(--c-red-bg)}
/* La de agregar es una tarjeta más y no un botón abajo de la grilla:
   ocupa el lugar donde va a aparecer la que se cree, que es donde el
   ojo la está buscando. */
.hrr-sumar{
  border-style:dashed;color:var(--c-muted);font-family:inherit;font-size:12.5px;
  cursor:pointer;min-height:76px;
}
.hrr-sumar:hover{border-color:var(--cap-ui);color:var(--cap-ui)}

.hrr-card, .hrr-x, .hrr-sumar{
  transition:background-color .12s, border-color .12s, color .12s, opacity .12s;
}

/* El nombre de quien recibe los pedidos. Es un botón porque abre el
   mismo pop-up de contacto que Estructura, pero se lee como parte de la
   frase: si tuviera caja y borde parecería otra acción al lado del
   texto, y lo que hace es completar la oración. */
.hrr-quien{
  background:none;border:0;padding:0;font:inherit;font-weight:700;
  color:var(--cap-ui);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.hrr-quien:hover{color:var(--cap-dark)}

/* ---------------- procesos y documentos ----------------

   Hereda del Stack la cabecera, los títulos de grupo y la ×: son la
   misma pantalla con otro contenido, y duplicar esas reglas garantizaba
   que en dos meses una tuviera un píxel más que la otra.

   LO QUE NO HEREDA ES LA TARJETA. Acá no hay logo —el chip de formato
   ocupa ese lugar y es texto, así que la primera línea se arma
   distinta— y sobre todo acá la tarjeta es TRES COSAS Y SE TERMINA:
   qué se abre, cómo se llama y para qué sirve. La línea de "quién lo
   mantiene" existió unas horas y Mateo la sacó el 26/9.

   La grilla las estira a la altura de su fila igual. Es la lección de
   Proveedores: con altura libre, una tarjeta de una línea al lado de
   una de tres deja el borde en escalera y el ojo lee el escalón como si
   significara algo. Lo único que hay que mandar al fondo son los
   botones del modo edición, y de eso se ocupa `.doc-acts`. */

.doc-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:12px}

.doc-card{
  display:flex;flex-direction:column;text-align:left;text-decoration:none;
  color:inherit;background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:12px 14px 13px;
  transition:background-color .12s, border-color .12s, color .12s, opacity .12s;
}
.doc-con-link{cursor:pointer}
.doc-con-link:hover{border-color:var(--cap-ui);background:var(--c-hover)}
.doc-con-link:hover .doc-ir{opacity:1}

.doc-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.doc-ir{margin-left:auto;color:var(--c-suave);font-size:12px;opacity:.45}

/* EL CHIP DICE QUÉ SE ABRE, y por eso va arriba del título y no abajo:
   la pregunta "¿esto es una planilla o una presentación?" se hace antes
   de decidir si vale la pena hacer click, no después de leer el nombre.

   Los colores son los de Google porque son los que el ojo ya tiene
   aprendidos —azul documento, verde planilla, amarillo presentación— y
   pelearle a esa convención para inventar una nuestra no ganaba nada.
   Lo que no es un archivo de Google se reparte en dos: gris para lo que
   se lee (un PDF, un Word suelto en Drive) y el color del capítulo para
   lo que se hace (un formulario, un sitio). */
.doc-formato{
  display:inline-block;padding:2px 7px;border-radius:var(--radius-xs);
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;background:var(--c-hover);color:var(--c-muted);
}
.doc-f-documento{background:var(--c-blue-bg);color:var(--c-blue)}
.doc-f-planilla{background:var(--c-green-bg);color:var(--c-green)}
.doc-f-presentacion{background:var(--c-yellow-bg);color:var(--c-yellow)}
.doc-f-formulario,
.doc-f-sitio{background:var(--cap-soft);color:var(--cap-ui)}

.doc-tit{
  font-family:var(--font-title);font-size:14.5px;font-weight:800;line-height:1.2;
  display:block;margin-bottom:5px;
}
.doc-card .doc-para{margin:0;font-size:12.5px;line-height:1.45;color:var(--c-text)}

/* Los botones de editar y sacar, al fondo de la tarjeta. El
   `margin-top:auto` se come el espacio sobrante, así que en una fila
   donde una bajada ocupa tres renglones y la de al lado uno, los dos
   pares de botones quedan a la misma altura en vez de escalonados. */
.doc-acts{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
/* Igual que en el Stack: la de agregar ocupa el lugar donde va a
   aparecer la que se cree, que es donde el ojo la está buscando. */
.doc-sumar{
  border-style:dashed;color:var(--c-muted);font-family:inherit;font-size:12.5px;
  cursor:pointer;min-height:104px;align-items:center;justify-content:center;
}
.doc-sumar:hover{border-color:var(--cap-ui);color:var(--cap-ui)}

/* ---------------- el cartel de los que esperan ----------------

   Fijo arriba a la derecha, encima de todo menos de las modales. No es
   un aviso de la pantalla: es de la herramienta, y tiene que estar
   mientras siga siendo cierto sin importar dónde estés parado.

   Amarillo y no rojo: nadie se rompió. Alguien está esperando, que es
   una cosa que hay que atender, no una que hay que apagar. */
/* =================================================================
   A QUIÉN PERTENECE CADA NOMBRE · los grupos del mapa de licencias
   ================================================================= */

.nom-grupo{margin:0 0 22px}
.nom-grupo h5{
  display:flex;align-items:center;gap:8px;
  margin:0 0 4px;font-size:13px;font-weight:700;
}
/* El punto de color al costado del título es lo único que separa los
   tres grupos que piden algo de los tres que no. Un borde entero
   alrededor del bloque gritaba demasiado para una pantalla donde lo
   normal es que haya cosas en las seis categorías. */
.nom-ojo h5::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--c-yellow);flex:none;
}
.nom-dice{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--c-muted);max-width:74ch}

.nom-fila{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--c-border);
}
.nom-quien{flex:1 1 200px;min-width:0;font-size:13px}
.nom-a{color:var(--c-muted)}
/* Los controles se van a la derecha y se mantienen juntos. `margin-left:auto`
   y no `justify-content` en la fila: así el nombre queda pegado a la
   izquierda aunque los controles bajen de renglón en una pantalla angosta. */
.nom-acts{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.nom-acts select{max-width:210px}

/* Los que están bien: una línea de nombres y nada más. Eran veinte
   renglones con un control vacío cada uno, ocupando media pantalla para
   decir que no hay nada que hacer. */
.nom-sueltos{
  margin:0;padding:8px 0 0;border-top:1px solid var(--c-border);
  font-size:12.5px;line-height:1.9;color:var(--c-muted);
}

/* UNA PILA, NO UN CARTEL. Son hasta tres avisos con tres frases y dos
   destinos distintos, así que cada uno es su propia cápsula y el
   contenedor sólo los apila. Alineados a la derecha y no estirados: con
   `align-items:flex-end` cada uno mide lo que dice su texto, y tres
   cápsulas de anchos distintos se leen como tres cosas — estiradas al
   mismo ancho se leerían como una tabla. */
/* LA ESQUINA ES UN CONTENEDOR Y NO CADA CARTEL. Antes la pila de avisos
   se posicionaba sola; desde que al lado vive el cartel de cumpleaños,
   los dos `fixed` en la misma esquina se taparían. El que se posiciona
   es el contenedor, y adentro se apilan. */
.esquina{
  position:fixed;top:14px;right:18px;z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  max-width:min(340px, calc(100vw - 36px));
  pointer-events:none;
}
.esquina > *{pointer-events:auto}
.pendientes{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.pendientes a{
  display:block;padding:8px 14px;border-radius:99px;
  background:var(--c-yellow-bg);border:1px solid var(--c-yellow);
  color:var(--c-yellow);font-size:12.5px;font-weight:600;
  text-decoration:none;box-shadow:0 4px 14px rgba(7,9,13,.12);
}
.pendientes a:hover{background:var(--c-yellow);color:#fff}
.pendientes[hidden]{display:none}

/* EL TÍTULO NO PASA POR DEBAJO DE LA PILA.

   El hero pone el título abajo a la izquierda y la pila flota arriba a
   la derecha: con uno o dos avisos nunca se tocan. Con tres o cuatro la
   pila baja hasta la línea del título, y en una ventana que no es
   ancha el título le pasa por abajo — se lee "Herramientas del equi"
   con una cápsula amarilla encima.

   Se le pone tope al título, que puede cortar a dos renglones sin que
   se pierda nada, y no a la pila, que tiene que quedar donde está: es
   lo que hay que ver al entrar. Y sólo a partir del tercero, porque es
   el primero que llega tan abajo. */
@media (min-width:861px){
  body:has(.pendientes a:nth-child(3)) .hero h1,
  body:has(.cumples:not([hidden])) .hero h1{max-width:calc(100% - 370px)}
}

/* ---- el cartel de cumpleaños ----

   NO ES AMARILLO, y eso es la mitad del diseño. Los otros cuatro
   carteles de esta esquina son cosas que alguien tiene que ir a
   arreglar y comparten el amarillo de aviso. Éste es lo contrario: no
   pide nada. Con el mismo color se leería como un pendiente más y
   terminaría en la misma pila que uno aprende a no mirar. */
.cumples[hidden]{display:none}
.cumple-cartel{
  display:flex;align-items:center;gap:9px;
  padding:9px 8px 9px 14px;border-radius:99px;
  background:var(--c-hero);color:#fff;
  box-shadow:0 6px 20px rgba(7,9,13,.22);
}
.cumple-emoji{font-size:15px;line-height:1;flex:none}
.cumple-texto{font-size:12.5px;font-weight:500;line-height:1.25}
.cumple-texto b{font-weight:800}
/* La cruz es del cartel, no del texto: chica, al costado, y con su
   propio blanco de fondo al pasar. Cerrar es una decisión, no un
   accidente, pero tampoco hay que hacerla difícil: esto se cierra
   cuando ya saludaste. */
.cumple-x{
  flex:none;border:0;background:transparent;color:rgba(255,255,255,.55);
  font-size:17px;line-height:1;cursor:pointer;
  width:22px;height:22px;border-radius:50%;padding:0;
}
.cumple-x:hover{background:rgba(255,255,255,.14);color:#fff}
.cumple-x:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* ---- los papelitos ----

   Cuarenta `<i>` que caen una vez. Todo lo que se anima es `transform`
   y `opacity`, que el navegador resuelve sin volver a calcular el
   layout: con `top` esto haría trabajar a la página entera cuarenta
   veces por cuadro.

   `pointer-events:none` en el contenedor: durante los tres segundos que
   dura, la pantalla se tiene que poder usar igual. */
.fiesta{
  position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none;
}
.fiesta i{
  position:absolute;top:-16px;width:8px;height:12px;
  animation:caer linear forwards;
}
@keyframes caer{
  0%   { transform:translate3d(0,0,0) rotate(0deg); opacity:1 }
  85%  { opacity:1 }
  100% { transform:translate3d(0,102vh,0) rotate(var(--giro,180deg)); opacity:0 }
}

/* LOS GLOBOS. Suben, son seis, y van más despacio que los papelitos: si
   fueran al mismo ritmo se leerían como papelitos yendo para arriba.

   La forma sale de un `border-radius` con dos radios por esquina —el de
   abajo más apretado que el de arriba—, que es lo que hace la panza y
   la punta del nudo sin dibujar nada. */
.fiesta b{
  position:absolute;bottom:-80px;width:36px;height:46px;
  border-radius:50% 50% 46% 46% / 46% 46% 58% 58%;
  animation:subir ease-in-out forwards;
}
/* El hilo. Va con una sombra interior clarita arriba a la izquierda,
   que es el brillo: sin eso el globo se ve como una mancha. */
.fiesta b{box-shadow:inset -6px -4px 11px rgba(0,0,0,.14), inset 7px 5px 9px rgba(255,255,255,.35)}
.fiesta b::after{
  content:'';position:absolute;top:100%;left:50%;
  width:1px;height:22px;background:rgba(0,0,0,.22);
}
@keyframes subir{
  0%   { transform:translate3d(0,0,0); opacity:0 }
  12%  { opacity:.95 }
  50%  { transform:translate3d(var(--vaiven,20px),-55vh,0) }
  85%  { opacity:.95 }
  100% { transform:translate3d(0,-118vh,0); opacity:0 }
}
/* Si alguien pidió menos movimiento, no se dibujan: el aviso ya está
   puesto antes de que esto corra, así que no se pierde nada. */
@media (prefers-reduced-motion: reduce){
  .fiesta{display:none}
}

@media (max-width:860px){
  /* En el teléfono la franja de arriba ya está ocupada por la cuenta y
     el menú, así que baja al piso. Y como es fijo, tapa lo último de la
     página: el cuerpo se alarga para que siempre se pueda scrollear
     por debajo. Sin eso, la última fila de cualquier tabla queda
     escondida para siempre y no hay forma de saber que está. */
  .esquina{
    top:auto;bottom:14px;right:12px;left:12px;max-width:none;
    align-items:stretch;
  }
  .pendientes{align-items:stretch}
  /* El de cumpleaños queda al pie con los otros, pero el texto no se
     centra: tiene una cruz al costado y centrarlo lo dejaría corrido. */
  .cumple-cartel{border-radius:var(--radius-sm)}
  /* Acá sí van al mismo ancho: no hay lugar para tres cápsulas sueltas
     de anchos distintos sin que se lea como un desorden. */
  .pendientes a{text-align:center;font-size:12px}
  body:has(.pendientes:not([hidden])) .cuerpo{padding-bottom:78px}
  /* Y el hueco crece con la pila: con tres, 78px volvía a tapar la
     última fila, que es justo lo que este padding vino a evitar. */
  body:has(.pendientes a:nth-child(2)) .cuerpo{padding-bottom:118px}
  body:has(.pendientes a:nth-child(3)) .cuerpo{padding-bottom:158px}
  /* El cuarto entró con el cartel de "no tiene cuentas asignadas". */
  body:has(.pendientes a:nth-child(4)) .cuerpo{padding-bottom:198px}
}

/* =================================================================
   HERRAMIENTAS DEL EQUIPO

   Dos pantallas y un solo dato: la grilla donde se marca quién tiene
   qué, y el logo que aparece en Equipo core al lado de cada nombre.

   LA GRILLA NO TIENE CSS PROPIO CASI, y es a propósito: reusa entera la
   de la nómina —columnas fijas, encabezado pegajoso, celda con y sin—
   porque es la misma grilla con otro contenido, y dos hojas de estilo
   para la misma forma se despegan a la primera corrección. Acá está
   sólo lo que de verdad cambia: la celda es una casilla, no un número.
   ================================================================= */

/* LO PRIMERO, Y NO ES DECORATIVO: la celda con valor de la nómina se
   dibuja un "%" con `::after`. Sin apagarlo, cada tilde de esta grilla
   saldría con un por ciento al lado. */
.st-grilla .eq-celda.con::after{content:none}

.st-grilla .st-celda{width:54px;min-width:54px;max-width:54px;text-align:center}
/* La regla de la nómina manda el campo a `width:100%` alineado a la
   derecha y le saca la apariencia nativa, que para un número está bien
   y para una casilla la deja invisible. */
.st-grilla .st-celda input{
  width:15px;height:15px;display:block;margin:7px auto;padding:0;
  appearance:auto;-moz-appearance:auto;accent-color:var(--cap-ui);cursor:pointer;
}
.st-grilla .st-celda input:disabled{cursor:wait;opacity:.5}
/* Para quien no carga: el tilde dibujado, sin casilla. */
.st-grilla .st-celda{font-size:13px;color:var(--cap-ui);font-weight:700}

/* La banda de grupos, arriba del encabezado. Es la que hace legible una
   fila de veintiocho logos: sin ella hay que reconocer uno por uno para
   saber dónde estás parado. */
.st-grupos th{font-size:9.5px;letter-spacing:.1em;color:var(--c-suave)}
.st-grupos .st-grupo{
  border-left:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  padding:5px 6px;background:var(--c-side);
}
/* Los encabezados de la segunda fila bajan: el `top:0` de la regla
   general los dejaría a los dos encimados al scrollear. */
.st-grilla thead tr:nth-child(2) th{top:26px}

/* La columna es el logo, y con eso no alcanza —hay herramientas sin
   archivo de logo, que quedan en dos iniciales—. El nombre lo dice la
   glosa de acá abajo, apenas el cursor entra. Ver `admin.js`. */
.st-grilla .st-col{padding:6px 3px}
.st-grilla .st-col .hrr-logo,
.st-grilla .st-col .hrr-ini{margin:0 auto}
.st-grilla .st-col.on{background:var(--cap-soft)}

/* LA GLOSA: el nombre de la herramienta, al pasar por encima de la
   columna o de cualquiera de sus casillas.

   `fixed` porque la grilla tiene `overflow:auto` y la recortaría contra
   su borde; el JS le pone `left` y `top` contra la celda. Y
   `pointer-events:none` no es opcional: sin eso el globo queda debajo
   del cursor, dispara su propio `pointerout` y la glosa titila. */
#st-glosa{
  position:fixed;z-index:60;pointer-events:none;
  transform:translate(-50%,-100%);
  background:var(--c-hero);color:#fff;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;line-height:1.2;
  padding:6px 9px;border-radius:var(--radius-xs);
  white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.22);
}
#st-glosa.abajo{transform:translate(-50%,0)}

.st-busca{margin:0 0 10px}
.st-busca input{
  width:100%;max-width:280px;padding:7px 10px;font-size:12.5px;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  font-family:var(--font-body);color:var(--c-text);background:#fff;
}

/* ---- y en Equipo core ---- */

/* SÓLO LOS LOGOS, chicos, entre el nombre y el porcentaje. La fila de
   una persona no puede crecer: es la unidad que se barre con la vista
   cuando se lee una tarjeta de doce. */
/* `align-self:center` y no la línea de base. La fila alinea por base
   —el nombre y el porcentaje tienen que apoyar en la misma— y un logo
   de 14px apoyado ahí sobresale por arriba del texto y estira la fila
   dos píxeles. Con ochenta nombres, dos píxeles alcanzan para que la
   lista se vea despareja sin que se entienda por qué. */
.eq-herr{display:inline-flex;align-items:center;align-self:center;gap:3px;
         line-height:1;margin-left:auto;flex:none}
.eq-herr-uno{display:inline-flex}
.eq-herr .hrr-logo,.eq-herr .hrr-ini{width:14px;height:14px}
.eq-herr .hrr-ini{font-size:7px;border-radius:3px}
.eq-herr-mas{
  font-size:10px;font-weight:700;color:var(--c-suave);
  padding:0 3px;border-radius:var(--radius-xs);background:var(--c-hover);
}
/* El porcentaje se queda a la derecha del todo: los logos empujan desde
   el `margin-left:auto` del bloque, así que hay que devolverle el suyo
   o la fila queda con el número pegado a los íconos. */
.eq-persona em{margin-left:6px}

/* Adentro del globo sí van con el nombre, que es lo único que le
   explica un logo a quien no lo reconoce. Y el `li` de acá no es el de
   las cuentas: aquél reparte nombre y porcentaje a los dos extremos,
   éste pone el logo pegado al nombre. */
.eq-pop-herr li{justify-content:flex-start;gap:8px;align-items:center}
.eq-pop-herr .hrr-logo,.eq-pop-herr .hrr-ini{width:15px;height:15px}
.eq-pop-herr .hrr-ini{background:rgba(255,255,255,.14);color:#fff;font-size:8px}
.eq-pop-herr li span{color:#fff}

/* ---- la lista de cumpleaños de Sincronización ----

   Tres columnas por fila: quién, cuándo, y el botón. El nombre manda y
   la fecha es de apoyo, así que va gris y a la derecha del nombre, no
   compitiendo con él. */
.cump-lista{list-style:none;margin:10px 0 0;padding:0}
.cump-fila{
  display:flex;align-items:center;gap:10px;
  padding:5px 0;border-top:1px solid var(--c-border);font-size:12.5px;
}
.cump-quien{font-weight:600;color:var(--c-text)}
.cump-dia{color:var(--c-suave);font-size:11.5px}
/* El botón se va a la derecha y todas las filas lo tienen en la misma
   columna: con `margin-left:auto` en el botón, una fila con nombre
   largo lo empujaba a otro lugar y la lista quedaba en escalera. */
.cump-fila .btn{margin-left:auto;flex:none}
/* El apagado se lee apagado. Tachado sería otra cosa —parecería
   borrado— y esto es alguien que sigue en la planilla y que en
   cualquier momento puede volver a prenderse. */
.cump-fila.off .cump-quien{color:var(--c-suave);font-weight:500}
/* A quién se ató un nombre que no es idéntico al de la nómina. Va en
   gris y chiquito entre la fecha y el botón: es para confirmar de un
   vistazo que el cruce no se equivocó, no para leerlo fila por fila. */
.cump-quien-nomina{
  color:var(--c-suave);font-size:11px;font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}


/* =================================================================
   PREGUNTAS FRECUENTES

   Un texto en una columna, y nada más.

   Van tres versiones. La primera eran trece filas iguales con el
   número al costado: "quedó muy plana". La segunda, chips que filtraban
   y trece tarjetas con borde y etiqueta de color en dos columnas: "se
   siente muy cargado, no te deja concentrarte". Las dos quejas son la
   misma cosa vista de los dos lados —lo plano no se arregla agregando
   marcos—, así que acá la jerarquía sale del tipo y del aire: el tema
   arriba en chico, la pregunta en negrita, la respuesta en texto
   corrido y una línea finita entre una y otra.

   NO HAY NI UNA CAJA. Trece bordes son trece bordes que leer antes de
   llegar a la primera palabra.
   ================================================================= */

/* SEIS BLOQUES, UNO POR TEMA, DE ORILLA A ORILLA.

   La versión de una columna angosta usaba la mitad del ancho y dejaba
   la otra mitad vacía: "está todo tirado a la izquierda pero las líneas
   siguen hasta el final". Era cierto y es un problema real — el texto
   terminaba en el aire, sin nada que dijera dónde se acaba el renglón.

   Acá cada tema es un panel que ocupa el ancho entero, y el borde del
   panel es el que marca el final. Son seis cajas en vez de trece, y
   cada una agrupa lo suyo en vez de separar lo que va junto. */
.faq{display:grid;gap:14px}
.faq-grupo{
  background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);overflow:hidden;
}
/* La banda del tema, apenas teñida con el color del capítulo. Es de
   donde sale la personalidad que le faltaba a la versión anterior: sin
   ella, seis títulos chiquitos en gris sobre blanco vuelven a ser la
   lista plana del principio. */
.faq-grupo > h2{
  margin:0;padding:11px 22px;
  background:color-mix(in oklab, var(--cap-ui) 6%, #fff);
  border-bottom:1px solid var(--c-border);
  font-family:var(--font-title);font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cap-ui);
}

/* PREGUNTA A LA IZQUIERDA, RESPUESTA A LA DERECHA. Es la forma de dos
   columnas de cualquier FAQ que se lee bien: la columna de preguntas
   se recorre sola buscando la propia, y la respuesta arranca siempre en
   el mismo lugar en vez de esconderse debajo de una pregunta de largo
   distinto. */
.faq-p{
  display:grid;grid-template-columns:minmax(190px, 31%) minmax(0, 1fr);
  gap:6px 30px;padding:14px 22px;
}
.faq-p + .faq-p{border-top:1px solid color-mix(in oklab, var(--c-border) 65%, #fff)}
.faq-p h3{
  margin:0;font-family:var(--font-title);
  font-size:15.5px;font-weight:700;line-height:1.3;color:var(--c-text);
}
/* La respuesta con tope de medida aunque el panel sea ancho: pasadas
   las setenta y pico de letras el ojo empieza a perder el renglón. */
.faq-r{max-width:72ch}
.faq-r p{margin:0;font-size:13.5px;line-height:1.6;color:var(--c-muted)}
.faq-link{
  display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;
  color:var(--cap-ui);text-decoration:none;
}
.faq-link:hover{text-decoration:underline}

/* En pantalla angosta las dos columnas no entran: la pregunta arriba y
   la respuesta abajo, que es como se lee en un teléfono. */
@media (max-width:760px){
  .faq-p{grid-template-columns:1fr;gap:5px;padding:13px 16px}
  .faq-grupo > h2{padding:10px 16px}
}

/* =================================================================
   LA AGENDA

   Un mes en grilla con dos capas encima del mismo día: los hitos de la
   agencia y las jornadas de campo.

   EL COLOR DE CADA CLIENTE SALE DE SU NOMBRE. La pantalla calcula un
   tono y lo pasa en `--ag-h`; acá se arma el chip entero con ese tono.
   Nadie mantiene una lista de colores y el color de una cuenta es
   siempre el mismo.
   ================================================================= */

.ag-clientes{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 14px}
.ag-cli{
  border:1px solid hsl(var(--ag-h,0) 45% 82%);
  background:hsl(var(--ag-h,0) 60% 96%);
  color:hsl(var(--ag-h,0) 45% 30%);
  padding:4px 11px;border-radius:99px;cursor:pointer;
  font-size:12px;font-weight:600;font-family:var(--font-body);
}
/* "Todos" no tiene cliente, así que no tiene tono: va gris. */
.ag-cli[data-ag-cliente='']{
  border-color:var(--c-border);background:#fff;color:var(--c-muted);
}
.ag-cli.on{
  background:hsl(var(--ag-h,0) 55% 88%);
  border-color:hsl(var(--ag-h,0) 45% 55%);
  color:hsl(var(--ag-h,0) 50% 22%);
}
.ag-cli[data-ag-cliente=''].on{background:var(--c-text);border-color:var(--c-text);color:#fff}

/* ---- el año: doce tarjetas ----

   El nivel con el que abre la pantalla. Cada tarjeta es un mes con sus
   eventos escritos cortos, y el mes se aprieta para entrar al
   calendario.

   LA TARJETA ES UN <div> Y EL ENCABEZADO UN <button>, y no al revés:
   adentro hay otros botones —cada jornada abre su ficha desde acá
   mismo— y un botón adentro de otro botón no es HTML válido. El
   encabezado ocupa el ancho entero, así que como blanco de clic no se
   pierde nada. */

/* EL BOTÓN DE VOLVER, A LA MISMA ALTURA QUE LAS PASTILLAS. El margen de
   abajo lo lleva la fila y no el selector: si lo lleva el selector, el
   botón se centra contra un bloque veintidós píxeles más alto y queda
   once arriba. */
.ag-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.ag-top .periodo{margin-bottom:0}

.ag-resumen{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  margin:0;font-size:12.5px;color:var(--c-suave);
}
.ag-vacio{display:block;color:var(--c-muted);max-width:52ch;line-height:1.5}
.ag-resumen b{color:var(--c-text);font-weight:800;font-variant-numeric:tabular-nums}
.ag-resumen-filtro{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-muted);
}

.ag-meses{
  display:grid;gap:10px;align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(235px, 1fr));
}
.ag-mes{
  background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);overflow:hidden;
}
/* El mes en curso, marcado como el día de hoy en la grilla. */
.ag-mes.hoy{box-shadow:inset 0 0 0 2px var(--cap-ui)}

.ag-mes-cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  width:100%;padding:9px 11px;text-align:left;
  border:0;border-bottom:1px solid var(--c-border);background:none;
  font-family:var(--font-title);cursor:pointer;
}
.ag-mes-cab b{font-size:13.5px;font-weight:800;color:var(--c-text)}
.ag-mes-cab i{
  flex:none;font-style:normal;font-family:var(--font-body);
  font-size:10.5px;font-weight:700;color:var(--c-muted);
}
button.ag-mes-cab:hover{background:var(--c-side)}
button.ag-mes-cab:hover b{color:var(--cap-ui)}

/* UN MES VACÍO SE VE Y NO SE APRIETA. Que octubre esté en blanco es
   información —todavía no se cargó—, y saltearlo haría parecer que el
   año tiene menos meses. Pero adentro no hay nada, así que el
   encabezado no es un botón y la tarjeta queda al ras. */
.ag-mes.vacio{background:color-mix(in oklab, var(--c-side) 55%, #fff)}
.ag-mes.vacio .ag-mes-cab{border-bottom:0;cursor:default}
.ag-mes.vacio .ag-mes-cab b{color:var(--c-muted)}

.ag-mes-evs{display:flex;flex-direction:column;padding:5px}

/* El renglón de un evento: día, cliente y qué es. Los tres se cortan
   con puntos suspensivos antes que envolver, para que la tarjeta no
   crezca distinto según cuán largo sea el nombre de una cuenta. */
.ag-ev{
  display:flex;align-items:baseline;gap:7px;width:100%;min-width:0;
  padding:3px 6px;text-align:left;background:none;
  border:0;border-left:3px solid hsl(var(--ag-h,0) 50% 62%);
  border-radius:var(--radius-xs);
  font-family:var(--font-body);line-height:1.35;
}
button.ag-ev{cursor:pointer}
button.ag-ev:hover{background:hsl(var(--ag-h,0) 62% 95%)}
/* `min-width` y no `width`: un hito de varios días dice "29–30" y con
   ancho fijo partía el rango en dos renglones. El mínimo alcanza para
   que los días sueltos queden alineados entre sí. */
.ag-ev i{
  flex:none;min-width:20px;text-align:right;white-space:nowrap;
  font-style:normal;font-size:10.5px;font-weight:700;color:var(--c-suave);
  font-variant-numeric:tabular-nums;
}
.ag-ev b{
  flex:0 1 auto;min-width:0;font-size:11.5px;font-weight:700;color:var(--c-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-ev em{
  flex:1 1 auto;min-width:0;font-style:normal;font-size:11px;color:var(--c-suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* El hito, oscuro también acá: es la otra capa, no un cliente más. */
.ag-ev.hito{border-left-color:var(--c-hero)}
.ag-ev.hito b{color:var(--c-hero)}
.ag-ev.hito i{color:var(--c-hero);opacity:.6}

.ag-mes-pie{display:flex;flex-wrap:wrap;gap:4px 12px;padding:1px 12px 9px}
.ag-mas{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--cap-ui);
}
.ag-mas:hover{text-decoration:underline}
.ag-mes-sf{font-size:11px;color:var(--c-muted)}

/* ---- la grilla ---- */

.ag-grilla{
  display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:1px;
  background:var(--c-border);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);overflow:hidden;
}
.ag-cab{
  background:var(--c-side);padding:7px 8px;
  font-family:var(--font-title);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-suave);
}
/* `min-height` y no `aspect-ratio`: una semana con tres rodajes el
   mismo día tiene que poder crecer, y con proporción fija los chips se
   cortaban. */
.ag-celda{background:#fff;min-height:96px;padding:6px;display:flex;flex-direction:column;gap:4px}
.ag-celda.vacia{background:var(--c-side);min-height:0}
.ag-celda.finde{background:color-mix(in oklab, var(--c-side) 55%, #fff)}
/* El día de hoy, marcado con el color del capítulo y no con un fondo:
   un fondo entero competiría con los chips, que es lo que hay que
   leer. */
.ag-celda.hoy{box-shadow:inset 0 0 0 2px var(--cap-ui)}
.ag-num{font-size:11.5px;font-weight:700;color:var(--c-suave);font-variant-numeric:tabular-nums}
.ag-celda.con .ag-num{color:var(--c-text)}

/* ---- los chips ---- */

.ag-chip{
  display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid hsl(var(--ag-h,0) 45% 80%);
  background:hsl(var(--ag-h,0) 62% 95%);
  border-radius:var(--radius-xs);padding:4px 6px;
  font-family:var(--font-body);line-height:1.2;
}
.ag-chip:hover{background:hsl(var(--ag-h,0) 62% 90%)}
.ag-chip b{display:block;font-size:11px;font-weight:700;color:hsl(var(--ag-h,0) 50% 26%)}
.ag-chip span{
  display:block;font-size:10.5px;color:hsl(var(--ag-h,0) 30% 40%);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* EL HITO VA OSCURO Y NO TIENE COLOR DE CLIENTE, a propósito: es otra
   capa. Si compitiera en la misma paleta, un mes con IDEA encima
   parecería un cliente más. */
.ag-hito{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  background:var(--c-hero);color:#fff;
  border-radius:var(--radius-xs);padding:4px 6px;
  font-size:10.5px;font-weight:700;line-height:1.2;overflow:hidden;
}

/* ---- lo que todavía no tiene día ---- */

.ag-pendientes{margin-top:22px}
.ag-pendientes h2{
  margin:0 0 2px;font-family:var(--font-title);font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-text);
}
.ag-pend-lista{
  display:grid;gap:8px;margin-top:10px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.ag-nada{margin-top:16px}

/* ---- la ficha ---- */

.ag-ficha-cli{
  display:inline-block;margin-bottom:6px;padding:3px 10px;border-radius:99px;
  background:hsl(var(--ag-h,0) 62% 94%);color:hsl(var(--ag-h,0) 50% 26%);
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.ag-ficha h3{margin:0;font-family:var(--font-title);font-size:18px;font-weight:800;line-height:1.2}
.ag-ficha-cuando{margin:4px 0 14px;font-size:12.5px;color:var(--c-suave)}
.ag-dato{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--c-border);font-size:12.5px}
.ag-dato em{
  flex:none;width:118px;font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--c-suave);padding-top:1px;
}
.ag-dato span{color:var(--c-text);line-height:1.45}
/* Las observaciones son donde dice "CANCELADA POR CLIENTE": es lo
   último que se escribió y lo primero que hay que saber. */
.ag-ficha-obs{
  margin:14px 0 0;padding:9px 11px;border-radius:var(--radius-xs);
  background:var(--c-yellow-bg);border:1px solid var(--c-yellow);
  color:var(--c-yellow);font-size:12.5px;font-weight:600;line-height:1.4;
}

/* ---- en pantalla angosta la grilla no sirve ----

   Siete columnas en un teléfono dan celdas de cuarenta píxeles, donde
   no entra el nombre de un cliente. Se convierte en una lista de los
   días que TIENEN algo: es la misma información y se lee. */
@media (max-width:760px){
  /* Y POR LO MISMO, EN EL AÑO NO VAN LOS MESES VACÍOS. En una columna,
     enero a julio en blanco son siete pantallazos de scroll antes de
     llegar a lo que hay. En el escritorio ocupan una línea al lado de
     los demás y dicen algo; acá sólo estorban. */
  .ag-mes.vacio{display:none}

  .ag-grilla{display:block;border:0;background:none}
  .ag-cab{display:none}
  .ag-celda{
    min-height:0;border:1px solid var(--c-border);
    border-radius:var(--radius-sm);margin-bottom:6px;padding:8px 10px;
  }
  .ag-celda.vacia{display:none}
  .ag-celda:not(.con){display:none}
  .ag-num{font-size:12.5px}
}


/* =================================================================
   Clientes y cuentas · el mapa de globos

   CINCO COSAS QUE PARECEN CAPRICHO Y NO LO SON:

   · `container-type: size` en el lienzo, para poder escribir los
     tamaños en `cqmin` —uno por ciento del lado MÁS CORTO DEL LIENZO—
     en vez de en `vw` o en `%`. Con `%` un globo del 13% de un lienzo
     apaisado mide ciento ochenta píxeles de ancho y no entran tres en
     el alto; con `cqmin` el globo es un círculo del mismo tamaño
     visual sin importar qué forma tenga la ventana. Cada regla en
     `cqmin` va precedida de una en píxeles: si el navegador no la
     entiende descarta esa línea y se queda con la anterior, que es fea
     pero legible.

   · `max-width` en el lienzo. Sin tope, en un monitor ancho la elipse
     se aplasta hasta ser una raya y los globos se amontonan en las dos
     puntas, que es donde la curva se cierra.

   · ABRIR ES CRECER, no escalar. `.globo.abierto` cambia su `left`,
     su `top`, su ancho y su alto, y la transición hace el resto. Como
     lo que cambia es el TAMAÑO y no la escala, el texto de adentro
     nace en su cuerpo definitivo y no hay nada que compensar. La
     versión anterior escalaba el anillo entero y abría una tarjeta
     aparte, y Mateo la bajó el 25/9: "se tiene que ampliar, y tiene
     que ser todo el mismo movimiento".

   · `translate` Y `transform` SON DOS PROPIEDADES DISTINTAS, y acá eso
     es lo que permite que un globo flote sin perder su centrado: el
     centrado vive en `transform: translate(-50%,-50%)` y el flote en
     `translate`, que se aplica antes y se compone con él. Con una sola
     propiedad, la animación pisaría el centrado y los trece globos
     saltarían media vuelta al empezar.

   · Los satélites llevan sus coordenadas en `--sx` / `--sy`, puestas
     desde el JS. Dependen del radio del globo, que cambia con el
     lienzo y con cuánta gente tiene la cuenta, así que no hay forma de
     escribirlas acá.
   ================================================================= */

.mapa{display:grid;gap:14px}

.mapa-barra{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:space-between;
}
.mapa-buscar{flex:1 1 280px;max-width:420px;display:block}
.mapa-buscar input{
  width:100%;padding:9px 13px;font:inherit;font-size:14px;
  color:var(--c-text);background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:999px;outline:none;
}
.mapa-buscar input:focus-visible{
  border-color:var(--cap);box-shadow:0 0 0 3px var(--cap-soft);
}
.mapa-nota{margin:0;color:var(--c-suave);font-size:12.5px}

.mapa-lienzo{
  /* A LO ANCHO Y A LO ALTO. El tope de 1060 venía de cuando esto era
     una elipse, que en un monitor ancho se aplastaba hasta ser una
     raya. Desparramados no hay elipse que aplastar, y el lugar es
     justo lo que faltaba: los nombres se tapaban porque no entraban,
     no porque estuvieran mal puestos. */
  position:relative;width:100%;
  height:clamp(520px, 76vh, 900px);
  overflow:hidden;border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 50% 50%, var(--cap-soft) 0%, transparent 60%),
    var(--c-side);
  container-type:size;
}

.mapa-hilos{position:absolute;inset:0;width:100%;height:100%}
/* LAS LÍNEAS SE VEN, que es el pedido: "como un link de relaciones".
   Antes iban a 0,14 de ancho —o sea invisibles— porque el anillo ya
   decía solo que todo colgaba del medio. Desparramados, la línea es lo
   ÚNICO que lo dice. La del globo que se está mirando se enciende. */
.mapa-hilos line{
  stroke:var(--cap-claro);stroke-width:1.3;opacity:.5;
  vector-effect:non-scaling-stroke;
  transition:opacity .3s, stroke .3s, stroke-width .3s;
}
.mapa-hilos line.viva{stroke:var(--cap-ui);stroke-width:2;opacity:1}

/* ---- el globo ----

   `.globo` es SÓLO LA GEOMETRÍA: dónde está y cuánto mide. Lo redondo
   es `.globo-esfera`, que va adentro; el texto es `.globo-pie`, que
   cuelga hacia afuera y puede ser más ancho que el círculo; y la ficha
   es `.globo-panel`, que ocupa el globo entero cuando está abierto.
   Separarlos es lo que permite que crezca uno solo y todo lo demás lo
   siga. */

.globo{
  /* El alto, el ancho y la posición los escribe `colocar()` en
     píxeles: una cuenta sola en un idioma solo, en vez de un `cqmin`
     de un lado y un `min()` del otro. Lo de acá es el tamaño de
     arranque, para el cuadro anterior al primer `colocar()`. */
  position:absolute;left:50%;top:50%;width:78px;height:78px;
  margin:0;padding:0;
  transform:translate(-50%,-50%);
  color:var(--c-text);font-family:var(--font-body);
  animation:flotar var(--flota,7s) ease-in-out var(--demora,0s) infinite;
  transition:left .52s cubic-bezier(.34,.9,.3,1),
             top .52s cubic-bezier(.34,.9,.3,1),
             width .52s cubic-bezier(.34,.9,.3,1),
             height .52s cubic-bezier(.34,.9,.3,1),
             opacity .34s ease, scale .34s ease;
}

/* El flote. `translate` se compone con el `transform` de arriba, así
   que el globo se mueve sin dejar de estar centrado en su punto. */
@keyframes flotar{
  0%,100%{translate:0 0}
  25%    {translate:4px -7px}
  50%    {translate:0 -10px}
  75%    {translate:-4px -5px}
}

.globo-esfera{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;appearance:none;cursor:pointer;
  background:var(--c-surface);border:1px solid var(--c-border);
  box-shadow:0 2px 10px rgba(17,22,31,.06);
  transition:box-shadow .3s, border-color .3s, border-radius .52s ease;
}
.globo:hover{scale:1.05;animation-play-state:paused;z-index:3}
.globo:hover .globo-esfera{
  border-color:var(--cap-claro);box-shadow:0 6px 20px rgba(17,22,31,.14);
}
.globo-esfera:focus-visible{outline:2px solid var(--cap-ui);outline-offset:3px}

/* El brillo de adentro, que es lo que los hace ver como globos y no
   como fichas redondas. El giro cambia por globo para que el anillo no
   parezca una fila de copias. */
.globo-hoyo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--giro,0deg),
    rgba(255,255,255,0) 40%, rgba(255,255,255,.9) 100%);
  mix-blend-mode:soft-light;transition:opacity .3s;
}

/* LA MARCA ES LO ÚNICO QUE NO SE FUNDE AL ABRIR. Va afuera de la
   esfera y encima del panel, y su caja la escribe `colocar()` en
   píxeles: del medio del círculo al rincón de la ficha, con la misma
   transición que el globo. Que sobreviva es lo que hace que uno siga
   viendo el mismo objeto y no una tarjeta que llegó de otro lado.
   `pointer-events:none` para que el clic la atraviese. */
.globo-logo{
  position:absolute;z-index:3;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:left .52s cubic-bezier(.34,.9,.3,1),
             top .52s cubic-bezier(.34,.9,.3,1),
             width .52s cubic-bezier(.34,.9,.3,1),
             height .52s cubic-bezier(.34,.9,.3,1);
}
.globo-logo img{max-width:100%;max-height:100%;object-fit:contain}
.globo-sigla{
  font-family:var(--font-title);font-weight:700;letter-spacing:.02em;
  color:var(--cap-ui);line-height:1;
  font-size:17px;font-size:calc(var(--w,12) * .26cqmin);
}

/* El pie: más ancho que el globo, porque es donde va el texto y un
   círculo no da ancho. De qué lado va lo decide `colocar()` con el
   ángulo de cada globo: siempre hacia AFUERA del anillo. Con el texto
   siempre debajo, los de los costados —que quedan casi uno arriba del
   otro— le meten el nombre adentro del globo de al lado. */
.globo-pie{
  position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  width:170%;max-width:180px;display:flex;flex-direction:column;align-items:center;gap:1px;
  text-align:center;pointer-events:none;transition:opacity .28s;
}
.globo[data-pie="arriba"] .globo-pie{top:auto;bottom:calc(100% + 7px)}
.globo[data-pie="der"] .globo-pie{
  top:50%;left:calc(100% + 9px);bottom:auto;transform:translateY(-50%);
  width:122px;max-width:none;align-items:flex-start;text-align:left;
}
.globo[data-pie="izq"] .globo-pie{
  top:50%;left:auto;right:calc(100% + 9px);bottom:auto;transform:translateY(-50%);
  width:122px;max-width:none;align-items:flex-end;text-align:right;
}
.globo-nombre{
  font-family:var(--font-title);font-weight:600;line-height:1.12;
  letter-spacing:.01em;max-width:100%;
  font-size:13px;font-size:calc(var(--w,12) * .155cqmin);
}
/* LOS NOMBRES SE LEEN ENTEROS. Antes se cortaban con puntos
   suspensivos —"Socio Damián Oc…"— y un nombre cortado no es un dato,
   es la promesa de un dato. Si no entra a lo ancho, baja de renglón:
   la cajita crece para abajo, que es donde el mapa tiene lugar, y el
   reparto ya le deja ese aire a cada globo. */
.globo-rol{
  display:block;max-width:100%;line-height:1.3;color:var(--c-muted);
  overflow-wrap:anywhere;
  font-size:10.5px;font-size:calc(var(--w,12) * .105cqmin);
}
.globo-rol b{font-weight:700;color:var(--c-suave)}
.globo-rol i{font-style:normal;color:var(--c-suave)}
.globo-rol.soc b{
  color:var(--cap-ui);text-transform:uppercase;letter-spacing:.05em;
  font-size:.92em;
}
/* Un nombre por renglón, con apellido y todo. El rótulo del rol va una
   sola vez arriba, así que acá no se repite nada. */
.globo-quien{
  display:block;max-width:100%;line-height:1.28;color:var(--c-text);
  overflow-wrap:anywhere;
  font-size:10.5px;font-size:calc(var(--w,12) * .105cqmin);
}

/* ---- los satélites: los subproyectos, al pasar el cursor ----

   Salen desde el centro del globo hacia afuera, uno detrás de otro.
   Quietos están en el centro y en escala cero, así que no ocupan lugar
   ni se pueden tocar sin querer. */
.globo-sats{position:absolute;inset:0;pointer-events:none}
.sat{
  position:absolute;left:50%;top:50%;
  display:flex;align-items:center;gap:5px;
  padding:3px 8px 3px 5px;border-radius:999px;white-space:nowrap;
  background:var(--c-surface);border:1px solid var(--c-border);
  box-shadow:0 3px 12px rgba(17,22,31,.12);
  font-size:11px;color:var(--c-muted);
  translate:-50% -50%;
  transform:translate(0,0) scale(.2);opacity:0;
  transition:transform .42s cubic-bezier(.3,1.3,.5,1), opacity .3s ease;
  transition-delay:0ms;
}
.sat b{font-weight:600;color:var(--c-text)}
.sat-logo{width:16px;height:11px;object-fit:contain;flex:none}
/* CON EL CURSOR ENCIMA, O CON EL FOCO DEL TECLADO — pero no con el
   foco a secas.

   Estaba `:focus-within`, y apretar un globo le deja el foco al botón:
   al cerrar la ficha las chapitas se quedaban abiertas para siempre,
   colgadas en el aire, hasta que uno apretaba en otro lado. Ése era el
   "se quedan bugueados" del 26/9, y el "si lo aprieto se va" es
   exactamente el foco yéndose a otra parte.

   `:has(:focus-visible)` es el mismo gesto para el teclado —tabular
   hasta un globo sigue mostrando sus proyectos— sin quedarse pegado
   después de un clic, porque el navegador no marca `:focus-visible`
   cuando el foco vino del mouse. */
.globo:hover .sat,
.globo:has(:focus-visible) .sat{
  transform:translate(var(--sx,0), var(--sy,0)) scale(1);opacity:1;
  transition-delay:var(--demora,0ms);
}

/* El del medio no se toca: no es un cliente, es de dónde salen. */
.globo.centro{
  left:50%;top:50%;
  width:133px;width:23cqmin;height:133px;height:23cqmin;
  border-radius:50%;animation:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-hero);color:#fff;
  box-shadow:0 8px 28px rgba(7,9,13,.28);
  transition:opacity .34s ease, scale .34s ease;
}
.globo.centro:hover{scale:1}
.centro-marca{display:flex;width:64%;justify-content:center}
.centro-marca .logo{width:100%;height:auto}

/* ---- abrir: el globo crece y se vuelve la ficha ---- */

.globo.abierto{
  z-index:6;animation:none;scale:1;
}
.globo.abierto .globo-esfera{
  border-radius:34px;cursor:default;
  box-shadow:0 18px 50px rgba(17,22,31,.2);
  border-color:var(--c-border);
}
.globo.abierto .globo-hoyo,
.globo.abierto .globo-pie,
.globo.abierto .globo-sats{opacity:0;pointer-events:none}

/* Los demás se apartan: se apagan y se achican al mismo tiempo que el
   otro crece, así que el anillo se corre en vez de quedar tapado. */
.mapa-lienzo.abierta .globo:not(.abierto){opacity:0;scale:.72;pointer-events:none}
.mapa-lienzo.abierta .mapa-hilos{opacity:0}

/* La ficha. Aparece cuando el globo ya creció lo suficiente como para
   contenerla: con el retardo, lo que se ve es UN globo que se abre y
   no dos cosas que pasan juntas. */
.globo-panel{
  position:absolute;inset:0;overflow:auto;border-radius:var(--radius);
  opacity:0;pointer-events:none;transition:opacity .26s ease .2s;
}
.globo.abierto .globo-panel{opacity:1;pointer-events:auto}

.ficha-cerrar{
  position:absolute;top:10px;right:10px;width:30px;height:30px;
  display:grid;place-items:center;font-size:19px;line-height:1;
  color:var(--c-muted);background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius-xs);
  cursor:pointer;z-index:2;
}
.ficha-cerrar:hover{background:var(--c-hover);color:var(--c-text)}

.ficha-top{
  display:flex;align-items:center;gap:14px;
  padding:18px 52px 16px 20px;border-bottom:1px solid var(--c-border);
  background:var(--cap-soft);
}
.ficha-logo{width:64px;height:38px;object-fit:contain;flex:none}
.ficha-sigla{
  font-family:var(--font-title);font-weight:700;font-size:19px;
  color:var(--cap-ui);flex:none;
}
.ficha-top h2{
  margin:0;font-family:var(--font-title);font-size:21px;font-weight:700;
  letter-spacing:.01em;
}
.ficha-top p{margin:2px 0 0;font-size:12.5px;color:var(--c-muted)}

.ficha-cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;align-items:start;
}
.ficha-col{padding:16px 20px;min-width:0}
.ficha-col + .ficha-col{border-left:1px solid var(--c-border)}

.ficha-cuenta + .ficha-cuenta{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--c-border);
}
.ficha-cuenta h3{
  margin:0;display:flex;align-items:center;gap:8px;
  font-family:var(--font-title);font-size:15px;font-weight:600;
}
.ficha-cuenta h3 img{width:26px;height:16px;object-fit:contain;flex:none}
.ficha-cuenta h3 span{min-width:0;overflow-wrap:anywhere}

/* La × de la CUENTA. Vive en el título y no adentro de la lista,
   porque no borra lo mismo que las de abajo: ésas sacan un proyecto
   del mapa y ésta borra una fila de `proyectos`. Aparece al pasar el
   cursor, como las otras, y se queda visible con el foco del teclado.

   Roja desde el vamos, y no sólo al hover: es la única de la ficha que
   puede llevarse algo puesto. */
.cuenta-sacar{
  margin-left:auto;width:22px;height:22px;flex:none;
  display:grid;place-items:center;font-size:15px;line-height:1;
  color:var(--c-red);background:none;border:0;border-radius:var(--radius-xs);
  cursor:pointer;opacity:0;transition:opacity .15s, background .15s;
}
.ficha-cuenta:hover .cuenta-sacar,
.cuenta-sacar:focus-visible{opacity:1}
.cuenta-sacar:hover{background:var(--c-red-bg)}
.ficha-alias{margin:3px 0 0;font-size:11.5px;color:var(--c-suave)}

/* DE QUÉ CLIENTE ES, y se cambia desde acá. Sólo lo ve administración.
   Va en gris y en cuerpo chico a propósito: en esta ficha lo que se
   viene a mirar es quién está adentro de la cuenta, no a qué globo
   pertenece. Es una corrección que se hace cada tanto, no un dato que
   se consulta. */
.ficha-cliente{display:block;margin:9px 0 0}
.ficha-cliente span{
  display:block;margin:0 0 4px;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--c-suave);
}
.ficha-cliente select,
.ficha-cliente-otro{
  width:100%;padding:6px 8px;font-size:12.5px;
  font-family:var(--font-body);color:var(--c-text);
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-sm);
}
.ficha-cliente-otro{margin-top:5px}

.ficha-unidades{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.ficha-unidades li{
  display:flex;align-items:center;gap:7px;min-width:0;
  padding:5px 9px;font-size:12.5px;
  background:var(--c-hover);border-radius:var(--radius-xs);
}
.ficha-unidades li img{width:22px;height:14px;object-fit:contain;flex:none}
.ficha-unidades li em{
  font-style:normal;color:var(--c-suave);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ficha-rol + .ficha-rol{margin-top:12px}
.ficha-rol h4{
  margin:0 0 5px;font-family:var(--font-title);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cap-ui);
}
.ficha-rol ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ficha-rol li{
  display:flex;align-items:baseline;gap:7px;font-size:13px;min-width:0;
}
.ficha-rol li em{
  font-style:normal;font-size:11px;color:var(--c-suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ficha-vacio{margin:0;font-size:12.5px;color:var(--c-muted);line-height:1.5}


/* ---- el editor ----

   Un botoncito en la esquina del lienzo, NO un globo más. En este mapa
   un globo es un cliente; uno que no lo es le enseña al ojo una
   excepción en la única regla que la pantalla tiene, y encima se la
   enseña a la única persona que ya sabe cómo funciona.

   Abrirse se abre igual que un globo —crece desde su esquina hasta el
   medio— porque eso no es de los globos, es de esta pantalla. */
.globo.editor{
  left:auto;right:16px;top:16px;width:38px;height:38px;
  transform:none;animation:none;z-index:4;
}
.globo.editor.abierto{transform:translate(-50%,-50%)}
.globo.editor .globo-esfera{
  background:var(--c-surface);border:1px solid var(--c-border);
  box-shadow:var(--sombra);
}
.globo.editor:hover .globo-esfera{
  border-color:var(--cap);background:var(--cap-soft);
}
.editor-mas{
  font-family:var(--font-title);font-weight:300;line-height:1;
  font-size:24px;color:var(--c-suave);
}
.globo.editor:hover .editor-mas{color:var(--cap-ui)}
.globo.editor.abierto .editor-mas{opacity:0;transition:opacity .18s}

/* El encabezado deja el rincón libre: ahí aterriza la marca del globo,
   que viene viajando desde el medio del círculo. El editor no trae
   marca, así que no reserva nada. */
.ficha-top{padding-left:98px}
.globo.editor .ficha-top{padding-left:20px}
/* ---- el alta ---- */

.ficha-alta{display:grid;gap:12px;padding:18px 20px 20px}
.ficha-alta label{
  display:grid;gap:4px;font-size:12px;font-weight:600;
  color:var(--c-muted);font-family:var(--font-title);
  text-transform:uppercase;letter-spacing:.05em;
}
.ficha-alta input[type="text"],
.ficha-alta input:not([type]),
.ficha-alta input[type="search"],
.ficha-alta select{
  font:inherit;font-size:14px;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--c-text);font-family:var(--font-body);
  padding:8px 11px;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius-xs);outline:none;
}
.ficha-alta input:focus-visible,
.ficha-alta select:focus-visible{
  border-color:var(--cap);box-shadow:0 0 0 3px var(--cap-soft);
}
.ficha-otro{margin-top:-4px}
.ficha-check{
  display:flex !important;align-items:center;gap:8px;
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;
  font-family:var(--font-body);color:var(--c-text);
}
.ficha-check input{margin:0}
.ficha-aviso{
  margin:0;padding:8px 11px;font-size:12.5px;line-height:1.4;
  color:var(--c-red);background:var(--c-red-bg);border-radius:var(--radius-xs);
}

/* ---- el alta: qué se está sumando ----

   Cuenta y proyecto no son lo mismo y el formulario lo dice antes de
   preguntar nada. Lo de abajo cambia según qué se elija. */
.ficha-que{
  margin:0;padding:0;border:0;display:grid;gap:8px;
}
.ficha-que legend{
  padding:0;margin-bottom:6px;
  font-family:var(--font-title);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);
}
.ficha-que label{
  display:flex;align-items:flex-start;gap:9px;
  padding:9px 11px;border:1px solid var(--c-border);
  border-radius:var(--radius-xs);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;
  font-family:var(--font-body);
}
.ficha-que label:has(input:checked){
  border-color:var(--cap);background:var(--cap-soft);
}
.ficha-que input{margin:2px 0 0}
.ficha-que b{display:block;font-size:13.5px;color:var(--c-text);font-weight:600}
.ficha-que em{
  display:block;font-style:normal;font-size:11.5px;line-height:1.35;
  color:var(--c-muted);margin-top:1px;
}

/* ---- la chapita dice de qué tipo es ----

   Una cuenta lleva CAP y cotizaciones; un proyecto no lleva nada. Se
   veían idénticos y de ahí salía la confusión. */
.ficha-unidades li{position:relative;padding-left:9px}
.ficha-unidades li::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--cap-ui);
}
.ficha-unidades li.es-proyecto::before{
  background:transparent;box-shadow:inset 0 0 0 1px var(--c-suave);
}
.chip-sacar{
  margin-left:auto;width:19px;height:19px;flex:none;
  display:grid;place-items:center;font-size:14px;line-height:1;
  color:var(--c-suave);background:none;border:0;border-radius:var(--radius-xs);
  cursor:pointer;opacity:0;transition:opacity .15s, color .15s, background .15s;
}
.ficha-unidades li:hover .chip-sacar,
.chip-sacar:focus-visible{opacity:1}
.chip-sacar:hover{color:var(--c-red);background:var(--c-red-bg)}
.chip-sacar:disabled{opacity:.4;cursor:default}
.ficha-botones{display:flex;gap:9px;justify-content:flex-end;margin-top:2px}
.ficha-botones .btn,
.ficha-botones .btn-plano{
  font:inherit;font-size:13.5px;padding:8px 16px;border-radius:var(--radius-xs);
  cursor:pointer;border:1px solid var(--c-border);
}
.ficha-botones .btn{
  background:var(--cap-ui);border-color:var(--cap-ui);color:#fff;font-weight:600;
}
.ficha-botones .btn:hover{background:var(--cap-dark);border-color:var(--cap-dark)}
.ficha-botones .btn:disabled{opacity:.55;cursor:default}
.ficha-botones .btn-plano{background:var(--c-surface);color:var(--c-muted)}
.ficha-botones .btn-plano:hover{background:var(--c-hover);color:var(--c-text)}
/* ---- la búsqueda: apaga lo que no coincide ---- */

.mapa-lienzo.buscando .globo.apagado{opacity:.18;filter:grayscale(1)}
.mapa-lienzo.buscando .globo:not(.apagado):not(.centro) .globo-esfera{
  border-color:var(--cap);box-shadow:0 4px 18px var(--cap-soft);
}

/* Para quien pidió que no se mueva nada, no se mueve nada: ni el
   flote, ni los satélites, ni el crecimiento. Abrir sigue funcionando
   —lo que se va es el recorrido, no el destino—. */
@media (prefers-reduced-motion: reduce){
  .globo{animation:none;transition-duration:.01ms}
  .globo-esfera,.globo-panel,.sat,.globo.centro{transition-duration:.01ms}
}

/* ---- en el teléfono el anillo no entra ----

   Trece globos en una elipse de trescientos píxeles no se leen: o son
   del tamaño de una moneda o se pisan. Abajo de 760 el mapa se
   endereza y pasa a ser una grilla de tarjetas, y la ficha se abre
   ocupando la pantalla. La página tampoco se mueve: la ficha es
   `fixed` y no empuja nada. */
@media (max-width: 760px){
  .mapa-lienzo{
    height:auto;max-height:none;overflow:visible;
    border:0;background:none;padding:0;container-type:normal;
  }
  .mapa-hilos,.globo.centro{display:none}

  .mapa-globos{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .globo{
    position:static;width:auto;height:auto;aspect-ratio:auto;transform:none;
    animation:none;display:flex;flex-direction:column;align-items:center;
    gap:8px;padding:12px 10px;min-height:128px;
    background:var(--c-surface);border:1px solid var(--c-border);
    border-radius:var(--radius-sm);
  }
  .globo:hover{scale:1}
  .globo-esfera{
    position:static;width:54px;height:54px;flex:none;box-shadow:none;
  }
  .globo-hoyo,.globo-sats{display:none}
  .globo-sigla{font-size:16px}
  .globo-pie,
  .globo[data-pie] .globo-pie{
    position:static;transform:none;width:100%;max-width:none;
    align-items:center;text-align:center;
  }
  .globo-nombre{font-size:13px}
  .globo-rol,.globo-quien{font-size:11px}

  .mapa-lienzo.abierta .globo:not(.abierto){opacity:1;scale:1}
  .globo.abierto{
    position:fixed;inset:0;left:0 !important;top:0 !important;
    width:100%;height:100%;z-index:60;padding:0;border-radius:0;border:0;
  }
  .globo.abierto .globo-esfera{border-radius:0;border:0}
  .ficha-cuerpo{grid-template-columns:1fr}
  .ficha-col + .ficha-col{border-left:0;border-top:1px solid var(--c-border)}
}

/* ---------------- Proveedores ----------------

   Un mapa arriba, una grilla de fichas abajo, y tres filtros que
   mandan sobre las dos cosas. Las fichas tienen alturas distintas a
   propósito: el texto de experiencia va entero y no recortado —es
   donde están escritos los clientes y los años— así que la grilla
   alinea arriba y deja que cada una mida lo que necesite. */

.prov{display:grid;gap:14px}

.prov-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* El "?" se va al final del renglón: es ayuda, no un filtro, así que
   no compite por el lugar con el buscador, que sí lo es. */
.prov-ayuda{margin-left:auto}

.prov-ayuda{
  flex:none;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--c-border);background:var(--c-surface);
  color:var(--c-muted);font-family:var(--font-title);
  font-size:15px;font-weight:700;line-height:1;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.prov-ayuda:hover{border-color:var(--cap-ui);color:var(--cap-ui);background:var(--cap-soft)}

/* ---- el mapa ----

   Dos columnas: el dibujo y, al lado, la lista de lo que hay adentro.
   El dibujo es alto y angosto —América de Canadá a Tierra del Fuego—
   así que la lista al costado es lo que le devuelve el ancho. */
/* EL DIBUJO NO PASA DE 300, y no es capricho: América es alta y
   angosta, así que cada píxel de ancho que se le da son uno y medio de
   alto. A 340 el mapa pedía quinientos de altura y la lista de fichas
   arrancaba abajo de la pantalla. */
.prov-mapa{
  display:grid;grid-template-columns:minmax(200px,300px) 1fr;
  gap:22px;align-items:start;margin-bottom:0;
}
.prov-lienzo-caja{
  border-radius:var(--radius-sm);overflow:hidden;
  background:linear-gradient(180deg,var(--c-side),var(--c-hover));
  border:1px solid var(--c-border);
}
.prov-svg{display:block;width:100%;height:auto}

/* EL GRUPO ES LO QUE SE MUEVE, no el viewBox: el viewBox no se anima
   con CSS y el zoom quedaría como un salto. `transform-origin` en el
   cero de arriba a la izquierda para que la cuenta del encuadre sea
   una suma y no haya que compensar nada. */
.prov-lienzo{
  transform-origin:0 0;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
}

.prov-pais{
  fill:var(--c-border);stroke:var(--c-surface);stroke-width:.7;
  transition:fill .25s,fill-opacity .25s,opacity .25s;
}
/* La intensidad la pone la pantalla en `--tinta`, en escala
   logarítmica: con 127 en Argentina y 1 en Perú, una escala derecha
   deja a once países del mismo gris. */
.prov-pais.con{fill:var(--cap);fill-opacity:var(--tinta,.5);cursor:pointer}
.prov-pais.con:hover{fill-opacity:1}
.prov-pais.sel{fill-opacity:1}
.prov-pais.apagado{opacity:.35}

.prov-panel{display:grid;gap:10px;align-content:start}
.prov-panel-tit{
  margin:0;font-family:var(--font-title);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-suave);
}
.prov-panel-tit b{color:var(--cap-ui);margin-left:4px}

.prov-volver{
  justify-self:start;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--cap-ui);
}
.prov-volver:hover{text-decoration:underline}

/* DOS COLUMNAS DE LUGARES cuando hay muchos: Argentina tiene veintidós
   y en una sola columna el mapa quedaba con medio metro de aire al
   costado. */
/* COLUMNAS DE ANCHO TOPADO y no elásticas: con `1fr` los renglones se
   estiraban a todo lo ancho del panel y el número quedaba a diez
   centímetros de su nombre, como una guía de teléfonos sin los
   puntitos. */
.prov-lugares{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,215px));
  justify-content:start;gap:2px 10px;
}
.prov-lugares button{
  width:100%;display:flex;align-items:baseline;gap:8px;
  background:none;border:0;padding:5px 8px;border-radius:var(--radius-xs);
  font:inherit;font-size:13px;color:var(--c-text);cursor:pointer;text-align:left;
}
.prov-lugares button:hover{background:var(--c-hover)}
.prov-lugares button.on{background:var(--cap-soft);color:var(--cap-dark);font-weight:600}
.prov-lugares button span{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.prov-lugares button b{
  flex:none;font-size:11.5px;font-weight:700;color:var(--c-suave);
  font-variant-numeric:tabular-nums;
}
.prov-lugares button:hover b,.prov-lugares button.on b{color:var(--cap-ui)}

.prov-nota{margin:0;font-size:12px;color:var(--c-suave)}

/* ---- los rubros ----

   La misma lista que los lugares, en su propio panel y a todo lo
   ancho: son 54 y en una columna angosta serían cincuenta y cuatro
   renglones de scroll. */
.prov-rubros{display:grid;gap:10px;margin-bottom:0}
.prov-rubros .prov-lugares{
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 12px;
}
/* "Ver todos" se lee distinto porque no es un rubro: es la salida a la
   lista entera. */
.prov-todos{font-weight:700}
.prov-todos span{color:var(--cap-ui)}

/* Mientras no hay nada elegido, la grilla no dibuja nada. Acá vivía un
   cartel que explicaba qué apretar; lo que explica una pantalla es el
   recorrido guiado, que está pendiente aparte. */

/* ---- las fichas ---- */

/* ARRANCAN TODAS DEL MISMO ALTO. Lo de adentro es siempre lo mismo
   —nombre, dónde, qué hace, estrellas— y lo que variaba de una a otra
   se fue al desplegable.

   Y VAN ALINEADAS ARRIBA, no estiradas. Con el estirado de fábrica,
   abrir una ficha le agregaba el mismo alto a sus dos vecinas, que se
   quedaban con diez centímetros de aire adentro. Así crece sólo la que
   se abrió y las demás siguen midiendo lo mismo que todas. */
.prov-grilla{align-items:start}

.prov-card{display:flex;flex-direction:column;gap:11px;padding:18px}

.prov-top{display:flex;align-items:flex-start;gap:11px}
.prov-sigla{
  width:40px;height:40px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  font-family:var(--font-title);font-weight:700;font-size:14px;
  color:var(--cap-ui);background:var(--cap-soft);border:1px solid var(--cap-claro);
}
/* DOS RENGLONES PARA EL NOMBRE, SIEMPRE, y uno para el resto.

   Con las ciento ochenta y dos de verdad salían tres alturas: 128 los
   que no tienen rubro cargado, 153 los normales y 167 los de nombre
   largo —"CAROLINA PERROT y BARBARA JONES", "ALQUILER SERVICIOS
   DIGITALES"—. Reservar el alto de dos líneas iguala a todos sin
   esconder nada: el que entra en una deja el segundo renglón libre y
   el que no entra usa los dos. Los poquísimos que tampoco entran en
   dos cortan con puntos suspensivos y el nombre completo queda en el
   `title`. */
.prov-quien{min-width:0;flex:1 1 auto;height:52px;overflow:hidden}
.prov-quien h3{
  margin:0;font-size:14px;line-height:1.25;color:var(--c-text);
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* La empresa, el lugar y el país en un renglón: son los tres la misma
   respuesta —dónde encontrarlo— y cada uno en su línea hacía fichas de
   tres alturas distintas según qué tuviera cargado. */
.prov-meta{
  margin:2px 0 0;font-size:11.5px;color:var(--c-suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* EL RENGLÓN DE RUBRO Y ESTRELLAS MIDE LO MISMO SIEMPRE: alto fijo,
   sin envolver y centrado.

   Hay filas de la planilla sin TIPO cargado —ésas quedaban más bajas—
   y rubros largos como "HANDIES - MOVILES PARA EVENTOS" que empujaban
   las estrellas a un segundo renglón. Con alto fijo y `nowrap` las dos
   cosas dejan de mover la ficha; el rubro que no entra corta con
   puntos suspensivos y se lee entero en la lista de filtros. */
.prov-marcas{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;height:25px}
.prov-rubro{min-width:0;overflow:hidden;text-overflow:ellipsis}
.prov-estrellas{flex:none}
.prov-rubro{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
  color:var(--cap-dark);background:var(--cap-soft);border:1px solid var(--cap-claro);
}
.prov-estrellas{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--c-marca);font-size:12px;letter-spacing:1px;
}
.prov-estrellas b{font-size:11px;color:var(--c-suave);letter-spacing:0}

/* ---- lo que se despliega ----

   El resumen es la barra de abajo de la ficha y ocupa todo el ancho:
   es el blanco que se aprieta, así que tiene que ser grande y estar
   siempre en el mismo lugar. Va pegado al fondo con `margin-top:auto`
   para que en las fichas de un renglón de nombre y en las de dos quede
   a la misma altura. */
.prov-mas{margin-top:auto;border-top:1px solid var(--c-border)}
.prov-mas summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:10px 0 0;font-family:var(--font-title);
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--cap-ui);
}
.prov-mas summary::-webkit-details-marker{display:none}
/* La flechita la dibuja el CSS y gira: el triangulito de fábrica no se
   puede alinear igual en los tres navegadores. */
.prov-mas summary::after{
  content:'';width:6px;height:6px;margin-left:auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;
}
.prov-mas[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.prov-mas summary:hover{color:var(--cap-dark)}
.prov-mas-cuerpo{display:grid;gap:11px;padding-top:12px}

.prov-pie{display:grid;gap:4px}
.prov-tit{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-suave);
}
.prov-datos{display:grid;gap:3px;font-size:12.5px;min-width:0}
/* Un mail largo o una dirección de Instagram no pueden ensanchar la
   ficha ni desbordarla: cortan donde haga falta. */
.prov-datos a,.prov-datos span{overflow-wrap:anywhere}
.prov-datos a{color:var(--cap-ui);text-decoration:none}
.prov-datos a:hover{text-decoration:underline}
.prov-sin{
  margin:auto 0 0;padding-top:10px;border-top:1px solid var(--c-border);
  font-size:11.5px;color:var(--c-suave);font-style:italic;
}
.prov-mas-cuerpo .prov-sin{margin:0;padding:0;border:0;font-size:12.5px}

.prov-ref{margin:0;font-size:12px;color:var(--c-muted);display:grid;gap:2px}
.prov-exp{
  margin:0;font-size:12px;line-height:1.45;color:var(--c-muted);
  border-left:2px solid var(--c-border);padding-left:10px;
}

.prov-nada{
  grid-column:1/-1;margin:0;padding:38px 24px;text-align:center;
  font-size:13px;color:var(--c-muted);
  background:var(--c-side);border:1px dashed var(--c-border);border-radius:var(--radius);
}

/* ---- el proceso, adentro de la modal ---- */

.prov-proceso{max-height:60vh;overflow-y:auto;margin:14px 0 0;padding-right:6px}
.prov-proceso h4{
  margin:18px 0 6px;font-size:13.5px;color:var(--c-text);
}
.prov-proceso h4:first-child{margin-top:0}
.prov-proceso p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--c-muted)}
.prov-proceso a{color:var(--cap-ui)}
.prov-proceso-pie{
  display:flex;justify-content:flex-end;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border);
}

@media (max-width:860px){
  .prov-mapa{grid-template-columns:1fr}
  .prov-lienzo-caja{max-width:320px;margin:0 auto}
}
@media (max-width:640px){
  .prov-rubros .prov-lugares{grid-template-columns:1fr 1fr}
}

/* ---------------- la línea de evolución de Métricas ----------------

   Un dibujo chico arriba de los números del área, no un tablero: dice
   la forma del año y nada más. Los números finos están abajo, en cada
   indicador. */

.kpi-linea{
  margin:0 0 20px;padding:14px 16px 8px;
  background:var(--c-side);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
}
.kpi-linea figcaption{
  font-family:var(--font-title);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-suave);
  margin-bottom:4px;
}
/* EL TOPE DE ANCHO NO ES ESTÉTICO. El SVG escala con su caja, y con él
   escala el texto de los ejes: en un monitor ancho, sin tope, los
   nombres de los meses terminaban más grandes que los títulos de la
   página. */
.kpi-linea svg{display:block;width:100%;max-width:760px;height:auto}

.kpi-guia{stroke:var(--c-border);stroke-width:1}
.kpi-eje{
  font-family:var(--font-body);font-size:10px;fill:var(--c-suave);
  font-variant-numeric:tabular-nums;
}
.kpi-eje.aqui{fill:var(--cap-ui);font-weight:700}

/* `kpi-relleno` y no `kpi-area`: esa clase ya es la de la SECCIÓN del
   área, y la regla le habría puesto opacity .09 a la lista entera de
   indicadores. */
.kpi-relleno{fill:var(--cap);opacity:.09}
.kpi-trazo{fill:none;stroke:var(--cap-ui);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.kpi-punto{fill:var(--c-surface);stroke:var(--cap-ui);stroke-width:2}
.kpi-punto.aqui{fill:var(--cap-ui)}
.kpi-aguja{stroke:var(--cap-claro);stroke-width:1;stroke-dasharray:3 3}
.kpi-cifra-punto{
  font-family:var(--font-title);font-size:12px;font-weight:700;fill:var(--cap-dark);
  font-variant-numeric:tabular-nums;
}

/* La zona que se aprieta: invisible, ancha y de un mes cada una. */
.kpi-toca{fill:transparent;cursor:pointer}
.kpi-toca:hover{fill:var(--cap);fill-opacity:.06}

@media (prefers-reduced-motion:no-preference){
  .kpi-punto{transition:r .15s ease}
}

/* El primer título de la portada no lleva el margen de arriba de los
   otros: abajo del hero ya hay aire, y sumarle 34px lo despega tanto
   que parece que falta algo en el medio. Los que vienen después sí lo
   necesitan — son el corte entre un bloque de tarjetas y el siguiente. */
.ini-aparte.ini-primera{margin-top:0}

/* -----------------------------------------------------------------
   El pipeline de Proyectos extra

   Las cuatro etapas por las que pasa un proyecto, en orden y con
   cuántos hay parados en cada una. Es un filtro además de un dibujo:
   se aprieta una etapa y la tabla de abajo se recorta a ésa.

   SE LEE COMO UN RECORRIDO Y NO COMO UNA FILA DE BOTONES, que es todo
   el punto. Antes eran chips sueltos —Borrador, Brief listo,
   Presupuestado, Cerrado— y nada decía que fueran pasos de un mismo
   camino ni en qué orden iban. Las flechas lo dicen sin una palabra.
----------------------------------------------------------------- */

.pipe{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}

.pipe-etapa{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  font:inherit;cursor:pointer;text-align:left;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:7px 14px 7px 12px;
  transition:border-color .12s, background-color .12s;
  /* TODAS DEL MISMO ANCHO. Medían lo que su rótulo, así que
     "Presupuestado" salía casi el doble que "Cerrado" y el recorrido se
     leía torcido. Mateo, 2/10. El ancho es el de la más larga. */
  width:108px;box-sizing:border-box;flex:none;
}
.pipe-etapa:hover{border-color:var(--cap-ui)}
.pipe-etapa.on{border-color:var(--cap-ui);background:var(--cap-soft)}

.pipe-n{font-size:17px;font-weight:800;line-height:1.1;color:var(--c-text)}
.pipe-rot{font-size:11px;font-weight:600;color:var(--c-muted);letter-spacing:.01em}
.pipe-etapa.on .pipe-n,
.pipe-etapa.on .pipe-rot{color:var(--cap-ui)}

/* La etapa sin nadie se apaga pero NO se esconde: que el recorrido
   tenga siempre sus cuatro pasos es lo que lo hace leer como un
   proceso. Una etapa que desaparece cuando está vacía convierte el
   dibujo en otra cosa cada vez que se mira. */
.pipe-etapa.vacia .pipe-n{color:var(--c-suave)}
.pipe-etapa.vacia:not(.on) .pipe-rot{color:var(--c-suave)}

.pipe-flecha{
  display:flex;align-items:center;padding:0 6px;
  color:var(--c-suave);font-size:17px;line-height:1;user-select:none;
}

/* En el teléfono el recorrido se apila, y ahí las flechas laterales
   apuntarían a cualquier lado: se van. */
@media (max-width: 700px){
  .pipe{gap:6px}
  .pipe-etapa{flex:1 1 calc(50% - 6px)}
  .pipe-flecha{display:none}
}

/* La salida del proceso, separada del recorrido por un corte. Una
   cancelada no está "más adelante" que un cerrado: está afuera. */
.pipe-corte{
  align-self:center;width:1px;height:26px;margin:0 10px;
  background:var(--c-border);
}
.pipe-fuera{border-style:dashed}
.pipe-fuera .pipe-n{color:var(--c-suave)}

/* -----------------------------------------------------------------
   El modo edición del FAQ

   Todo lo de acá abajo existe SÓLO cuando se apretó "Editar". La
   pantalla que lee un PM es exactamente la misma de antes: un texto en
   una columna, sin un botón a la vista. Un capítulo que se lee no
   puede pagar el precio de ser también un capítulo que se edita.
----------------------------------------------------------------- */

.faq-barra{display:flex;justify-content:flex-end;margin:0 0 6px}

/* El × del tema, pegado al título y del tamaño del título: es la
   acción más destructiva de la pantalla y no tiene que competir con
   el nombre, pero tampoco esconderse. */
.faq-grupo h2 .faq-x{
  margin-left:8px;background:none;border:0;cursor:pointer;
  color:var(--c-suave);font:inherit;line-height:1;padding:0 4px;
  border-radius:var(--radius-xs);
}
.faq-grupo h2 .faq-x:hover{color:var(--c-red);background:var(--c-red-bg)}

.faq-acts{display:flex;gap:6px;margin-top:8px}

.faq-sumar{
  display:block;width:100%;margin-top:10px;
  background:none;border:1px dashed var(--c-border);border-radius:var(--radius-sm);
  color:var(--c-muted);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;padding:8px 10px;text-align:left;
}
.faq-sumar:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
.faq-sumar-tema{margin-top:22px}

/* Editando, cada pregunta se separa un poco más: los botones necesitan
   aire para no quedar pegados a la respuesta de abajo. */
.faq-editando .faq-p{padding-bottom:6px}

/* ---- Usuarios, agrupados por rol ----

   Un `tbody` por grupo, con su cabecera plegable. Ver `admin.js`: los
   grupos salen de `ROLES`, así que el día que entre `audiovisual`
   aparece solo. */
.adm-usuarios tbody.plegado tr:not(.usr-grupo){display:none}
.adm-usuarios .usr-grupo td{
  padding:0;border-top:1px solid var(--c-border);background:var(--c-side);
}
.adm-usuarios .usr-grupo button{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border:0;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:12.5px;color:var(--c-text);text-align:left;
}
.adm-usuarios .usr-grupo button:hover{background:var(--c-hover)}
.adm-usuarios .usr-grupo b{font-size:13px}
/* La flecha apunta a dónde va a ir el contenido, no a dónde está. */
.adm-usuarios .usr-flecha{
  display:inline-block;width:10px;font-size:10px;color:var(--c-suave);
  transition:transform .15s ease;
}
.adm-usuarios tbody.plegado .usr-flecha{transform:rotate(-90deg)}
/* La bajada del rol se cae primero cuando no hay lugar: el nombre y el
   número son lo que se busca. */
.adm-usuarios .usr-grupo .mini{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:860px){ .adm-usuarios .usr-grupo .mini{display:none} }

/* ---------------- Entregables audiovisual · SE FUE EL 30/9 ----------

   Acá vivían las treinta reglas del capítulo de la dupla: el
   desplegable de cuenta, la tabla, las pastillas de estado, la grilla
   de herramientas del formulario. Se fueron con la pantalla — la carga
   pasa a Jira.

   Ninguna otra pantalla usaba una clase `.av-`, así que el bloque salió
   entero y no quedó nada colgando. Lo que sigue en pie es la tabla
   `entregables_av` en la base: Métricas lee de ahí y el exportador baja
   su hoja de ahí, y va a ser lo que llene la sincronización de Jira. */

/* ---------------- Licencias · el calendario del equipo ----------------

   Mateo, el 30/9: un calendario grande que muestre cuándo se va cada
   uno, "para que no lo tengas que interpretar en el aire". La misma
   familia que la grilla de Agenda —mismo borde, misma cabecera, mismo
   gris de fin de semana, el mismo recuadro para hoy— para que se lean
   igual. Lo distinto son las barras. */

.lcal-bloque{margin-top:28px}
.lcal-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.lcal-top h3{margin:0}
.lcal-top .periodo{margin:0}

.lcal{
  border:1px solid var(--c-border);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--c-border);display:grid;gap:1px;
}
.lcal-cab{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:1px}
.lcal-cab > div{
  background:var(--c-side);padding:7px 8px;
  font-family:var(--font-title);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-suave);
}

/* UNA SEMANA ES UNA GRILLA DE SIETE COLUMNAS Y N CARRILES. Los días van
   de arriba abajo de la semana entera —son el fondo— y las barras caen
   encima, cada una en su carril. Así una licencia de lunes a viernes es
   UNA barra, no cinco pedazos que el ojo tiene que volver a pegar. */
.lcal-semana{
  display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));
  grid-template-rows:26px repeat(var(--carriles), 24px) 8px;
  row-gap:3px;background:#fff;position:relative;
}
.lcal-dia{
  grid-row:1 / -1;background:#fff;padding:5px 7px;
  border-right:1px solid var(--c-border);
}
.lcal-dia:nth-child(7n){border-right:0}
.lcal-dia.vacia{background:var(--c-side)}
.lcal-dia.finde{background:color-mix(in oklab, var(--c-side) 55%, #fff)}
/* Hoy, con el color del capítulo en el borde y no con un fondo: un
   fondo entero competiría con las barras, que es lo que hay que leer. */
.lcal-dia.hoy{box-shadow:inset 0 0 0 2px var(--cap-ui)}
.lcal-num{font-size:11.5px;font-weight:700;color:var(--c-suave);font-variant-numeric:tabular-nums}
.lcal-dia.hoy .lcal-num{color:var(--cap-ui)}

/* LA BARRA. Los mismos dos colores que la pastilla de tipo en la tabla
   de arriba: una licencia es verde allá y verde acá. */
.lcal-barra{
  position:relative;z-index:1;align-self:stretch;
  margin:0 4px;padding:0 8px;border-radius:6px;
  display:flex;align-items:center;min-width:0;
  font-size:11.5px;line-height:1;white-space:nowrap;overflow:hidden;
  cursor:default;
}
.lcal-barra b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.lcal-barra.ok  {background:var(--c-green-bg); color:var(--c-green)}
.lcal-barra.warn{background:var(--c-yellow-bg);color:var(--c-yellow)}
.lcal-barra.info{background:var(--c-blue-bg);  color:var(--c-blue)}
.lcal-barra.na  {background:#EEF0F3;           color:var(--c-muted)}
.lcal-barra.bad {background:var(--c-red-bg);   color:var(--c-red)}

/* Cortada por la semana o por el mes: el borde de ese lado va recto y
   pegado al borde de la columna, como en cualquier calendario — así se
   lee que sigue, y no que termina ahí. */
.lcal-barra.sigue-antes  {margin-left:0; border-top-left-radius:0; border-bottom-left-radius:0}
.lcal-barra.sigue-despues{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}

/* ESPERA FIRMA: todavía no es una ausencia, pero puede serlo, y quien
   planifica tiene que verla — distinta de las que ya son firmes.

   IBA RAYADA, Y NO SE LEÍA. Las rayas blancas sobre un fondo que ya es
   claro lavaban el color y le pasaban por encima al nombre (Mateo, 5/10:
   "que se lean mejor"). Ahora es la misma barra hueca: fondo blanco y el
   borde punteado del color de su tipo. Se sigue leyendo como "todavía
   no", y el nombre queda sobre blanco. Lo mismo para las fechas
   tentativas del calendario de Proyectos extra, que usan esta clase. */
.lcal-barra.espera{
  background:var(--c-surface);
  border:1.5px dashed currentColor;
}
.lcal-barra.espera.sigue-antes  {border-left:0}
.lcal-barra.espera.sigue-despues{border-right:0}
/* SIN ACUERDO: con el borde rojo. La define administración, y mientras
   tanto es una ausencia que puede pasar o no. */
.lcal-barra.traba{box-shadow:inset 0 0 0 1.5px var(--c-red)}

.lcal-leyenda{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 2px 0;
  font-size:12px;color:var(--c-muted);
}
.lcal-leyenda span{display:inline-flex;align-items:center;gap:6px}
.lcal-muestra{width:22px;height:10px;border-radius:3px;display:inline-block}
.lcal-muestra.ok  {background:var(--c-green-bg); box-shadow:inset 0 0 0 1px var(--c-green)}
.lcal-muestra.warn{background:var(--c-yellow-bg);box-shadow:inset 0 0 0 1px var(--c-yellow)}
.lcal-muestra.info{background:var(--c-blue-bg);  box-shadow:inset 0 0 0 1px var(--c-blue)}
.lcal-muestra.na  {background:#EEF0F3;           box-shadow:inset 0 0 0 1px var(--c-muted)}
.lcal-muestra.espera{background:var(--c-surface);box-shadow:none;border:1.5px dashed var(--c-muted);box-sizing:border-box}
.lcal-muestra.traba{box-shadow:inset 0 0 0 1.5px var(--c-red)}
.lcal-nadie{margin:10px 2px 0}

/* En el teléfono las columnas miden cuarenta y pico de píxeles: el
   nombre no entra y la barra se queda con el color, que es lo que dice
   si hay alguien. El nombre sigue en el `title` y en el `aria-label`. */
@media (max-width:640px){
  .lcal-semana{grid-template-rows:22px repeat(var(--carriles), 18px) 6px}
  .lcal-barra{margin:0 2px;padding:0 4px;font-size:10px}
  .lcal-dia{padding:3px 4px}
}

/* El calendario de Proyectos extra (16/10): la grilla de Licencias, con
   la cabecera del mes arriba y barras que abren el caso. */
.pres-cal{margin:0 0 14px}
.pres-cal-cab{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.pres-cal-cab b{min-width:150px;text-align:center}
a.lcal-barra{text-decoration:none;cursor:pointer}
a.lcal-barra:hover{filter:brightness(.95)}

/* ---------------- Contratos y facturación (sql/140) ----------------

   La barra es la del CAP, más alta, y con una marca de dónde tendría que
   estar a esta altura del año: el semáforo dice si va lento, y la marca
   muestra cuánto. */
.ct-bar{height:10px;position:relative}
.ct-marca{position:absolute;top:0;bottom:0;width:2px;background:var(--c-text);opacity:.55}
.ct-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ct-cabeza h3{margin:0}

/* Soltar el archivo: la zona entera es el botón. */
.ct-soltar{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:64px;padding:10px 12px;border:1px dashed var(--c-border);border-radius:var(--radius-sm);
  background:var(--c-hover);cursor:pointer;font-size:13px;color:var(--c-muted)}
.ct-soltar:hover,.ct-soltar.encima{border-color:var(--cap-ui);color:var(--c-text)}
.ct-sacar{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:var(--c-muted)}
.field .ct-sacar input{width:auto}

/* Lo que se completó solo desde la factura: el campo lleva un fondo
   apenas distinto y una marca en el rótulo, y las dos cosas se van en
   cuanto se lo cambia. No dice "revisalo": dice de dónde salió. */
.field.auto input,.field.auto select,.field.auto .sel-btn,.field.auto .fecha-btn{background:var(--c-blue-bg)}
.field.auto > label::after{content:'de la factura';margin-left:6px;font-size:10.5px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--c-blue)}