/* ══════════════════════════════════════════════════════════════════════════
   PORTAL APRÉNDIKA · v3 oscuro — hoja compartida por hoy.html y padron.html
   ══════════════════════════════════════════════════════════════════════════

   POR QUÉ ESTA HOJA EXISTE
   Las dos pantallas son el mismo producto. Tener los tokens y los componentes
   en un solo archivo es la única forma de que no se despeguen: se cambia un
   color acá y cambian las dos.

   PASADA DE PULIDO (Adrián, 2026-09-13, citado)
   "vamos por buen camino, solo que todavía no dice premium, y es confuso de
   navegar [...] hay cosas que se superponen, los gráficos están medio feos, ya
   muy grandes las letras, en las fichas de los aliados el gráfico de los pagos
   se superpone con el texto, mucho abuso de los colores violeta [...] me
   gustaría mejor alineación por bloques, así cae todo a la misma altura."

   PREMIUM ACÁ NO ES MÁS EFECTOS: ES CONTENCIÓN. Las cinco reglas duras que
   ordenan la hoja después de ese pedido:

   1. UNA SOLA GRILLA PARA TODA FILA DE ALIADO (`.a-fa`). Cuatro columnas fijas
      — identidad 2fr · estado+salud minmax(180px,1fr) · libreta 148px · plata
      auto — compartidas por el padrón y por las tarjetas de HOY. Ninguna celda
      puede invadir a la otra: cada una tiene `min-width:0` y su propio track.
      Todas las filas miden 80px de alto mínimo, así "cae todo a la misma
      altura". Por debajo de 1180px la fila se parte en dos renglones; nunca se
      solapa.
   2. ESCALA CONTENIDA. Base 16, secundario 14 (piso duro, nada baja de ahí),
      título de fila 17, rótulos de sección 14 en versalitas con tracking,
      números protagonistas 48-52, título de página 30. Ritmo vertical en
      múltiplos de 8.
   3. EL VIOLETA, CON DISCIPLINA. Solo tres usos: el ítem activo del menú, el
      anillo de foco y el texto del chip "dato real". Fuera de ahí no aparece:
      los avatares son neutros, las píldoras activas son superficie clara con
      texto tinta, y ningún fondo de tarjeta se pinta de violeta. La chispa
      magenta queda en la "p" del wordmark y nada más.
   4. GRÁFICOS LIMPIOS. La libreta en celdas uniformes de 2px de gap y 2px de
      radio, sin rayado diagonal. Una sola barra de salud de 6px con segmentos.
      Los números en Plex Mono.
   5. CONTENCIÓN GENERAL. Sombras fuera. Bordes de 1px al 8% de blanco, al 16%
      en hover. Dos niveles de superficie y nada más. Nada de glow.

   LO QUE NO CAMBIÓ — el principio que sobrevive a cualquier piel
   (`03-modelo.md` §2): el ESTADO no se pinta, se marca con formas en el color
   del texto. El COLOR es de la SALUD. El teal `#02C39A` es la ACCIÓN y nada
   más. IDENTIDAD: `docs/mvp/07-identidad-visual.md`.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── superficies: dos niveles, ni uno más ── */
  --nav:#0A0813;          /* sidebar: lo más hundido de la pantalla */
  --fondo:#0F0B18;        /* fondo de trabajo */
  --sup:#161222;          /* nivel 1: tarjeta, fila, control */
  --sup-2:#1C1730;        /* nivel 2: hover, capa interna de la ficha */
  --riel:#241D3A;         /* riel de barra — no es superficie, es fondo de gráfico */

  /* ── bordes: contención, no decoración ── */
  --borde:rgba(255,255,255,.08);
  --borde-h:rgba(255,255,255,.16);
  --borde-s:rgba(255,255,255,.05);

  /* ── texto ── */
  --texto:#F3EFFA;        /* 15.9:1 sobre --fondo */
  --texto-2:#BCB3D0;      /*  8.4:1 */
  --texto-3:#8C83A6;      /*  4.8:1 — mínimo AA, solo para etiquetas */

  /* ── marca: tres usos y se acabó ── */
  --violeta:#9B4DE0;      /* SOLO: nav activa y anillo de foco */
  --violeta-b:#C79BF5;    /* SOLO: el texto del chip "dato real" */
  --magenta:#CE5CFF;      /* chispa: la "p" del wordmark */
  --teal:#02C39A;         /* ACCIÓN. secondary3 del CSS del sitio */
  --teal-h:#00A896;       /* hover: el teal del CTA del sitio */
  --teal-ink:#07231E;     /* texto sobre la píldora teal */

  /* ── salud: el único color semántico ── */
  --verde:#48C98A;
  --ambar:#E8AE45;
  --rojo:#FF7A70;   --rojo-f:#2A1512;
  --revisar:#8AA6E0; --revisar-f:#171E33;
  --baja:#8C83A6;

  /* ── sector: SOLO bandita de 3px y punto — nunca fondo, nunca píldora entera
     (brief bandeja de pases, 2026-09-14). El nombre del sector va siempre al
     lado del color; estos seis tokens son el único color nuevo de esta pasada. */
  --sector-soporte:#6FA8DC;
  --sector-administracion:#C8B48A;
  --sector-success:#8FBF9F;
  --sector-certificaciones:#D9A0C6;
  --sector-comercial:#E8B08A;
  --sector-direccion:#A9B4C2;

  /* ── tipografía ── */
  --f-display:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-ui:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --barra:248px;          /* ancho del riel lateral */
  --lib:148px;            /* ancho fijo de la libreta en una fila */
  --plata:224px;          /* ancho fijo de deuda + próximo cobro */
  --radio:12px;
  --radio-s:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
html[data-ficha="1"]{overflow:hidden}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--f-ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--f-ui);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--violeta);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.a-salto{position:absolute;left:-9999px;top:0;z-index:99;background:var(--violeta);color:#fff;
  padding:12px 16px;border-radius:0 0 var(--radio-s) 0;font-weight:600}
.a-salto:focus{left:0}
.a-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═════════════════  chasis  ═════════════════ */
.a-app{display:grid;grid-template-columns:var(--barra) minmax(0,1fr);min-height:100vh}

.a-riel{
  background:var(--nav);border-right:1px solid var(--borde-s);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  color-scheme:dark;
}
.a-marca{padding:24px 20px 16px}
.a-marca img{display:block;width:144px;height:auto}
.a-marca-t{font-family:var(--f-display);font-weight:600;font-size:24px;color:#fff;letter-spacing:-.02em}
.a-marca-t b{color:var(--magenta);font-weight:600}
.a-marca-e{display:block;font-family:var(--f-mono);font-size:14px;color:var(--texto-3);
  letter-spacing:.08em;text-transform:uppercase;margin-top:8px}

.a-nav{padding:0 12px 24px;flex:1}
.a-nav ul{list-style:none;margin:0;padding:0}
.a-nav-i{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:0 12px;height:40px;border:0;background:none;border-radius:var(--radio-s);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--texto);
}
.a-nav-i:hover{background:var(--sup)}
.a-nav-i.es-off{opacity:.45;cursor:not-allowed}
.a-nav-i.es-off:hover{background:none}
/* USO 1 DEL VIOLETA (de tres): dónde estoy parado */
.a-nav-i[aria-current="page"]{background:var(--violeta);color:#fff}
.a-nav-i[disabled]{color:var(--texto-3);cursor:not-allowed;font-weight:400}
.a-nav-i[disabled]:hover{background:none}
.a-nav-p{width:8px;height:8px;flex:none;border:2px solid currentColor;border-radius:2px}
.a-nav-i[aria-current="page"] .a-nav-p{background:#fff;border-color:#fff}
.a-sub{margin:2px 0 4px 22px;padding-left:14px;border-left:1px solid var(--borde-s)}
.a-sub-i{display:block;width:100%;text-align:left;padding:7px 10px;border:0;background:none;
  border-radius:6px;font-size:14px;color:var(--texto-2);cursor:pointer}
.a-sub-i:hover{background:var(--sup)}
.a-sub-i[disabled]{color:var(--texto-3);cursor:not-allowed}
.a-sub-i[disabled]:hover{background:none}
.a-sub-i[aria-current="true"]{color:var(--texto);font-weight:700}

/* ── "Próximamente": el mapa completo, sin ocupar media columna ── */
.a-pronto{margin-top:16px;border-top:1px solid var(--borde-s);padding-top:12px}
.a-pronto>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:0 12px;height:32px;border-radius:var(--radio-s);
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);
}
.a-pronto>summary::-webkit-details-marker{display:none}
.a-pronto>summary:hover{background:var(--sup);color:var(--texto-2)}
.a-pronto>summary::before{content:"›";font-size:16px;line-height:1;transition:transform .15s ease;display:inline-block}
.a-pronto[open]>summary::before{transform:rotate(90deg)}
.a-pronto ul{margin:4px 0 0;padding:0}
.a-pronto .a-nav-i{font-size:14px;font-weight:400;color:var(--texto-3);height:34px}

.a-riel-pie{padding:14px 20px 20px;border-top:1px solid var(--borde-s);font-size:14px;color:var(--texto-3);line-height:1.45}
.a-riel-pie b{color:var(--texto-2);font-weight:600}
/* la línea de empresa que reemplaza al <select> podado (§D-2 del design):
   texto, sin control — "la empresa sale del usuario, no se elige". */
.a-riel-empresa{margin:0 0 10px}
/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] "Demo" y "Salir" del
   pie del riel vivían con letra chica inline en app.js (12 de tamaño) — piso
   14px sin excepciones (Guards). */
.a-riel-link{display:block;margin-top:8px;font-size:14px;color:var(--texto-3);text-decoration:underline}
/* [APPLY_INLINE: brief-builder-rehacer-pases-2026-09-15] "Reiniciar demo" es
   un <button>, no un <a>: pisa el reset de UA para que se vea igual que
   "Demo"/"Salir" (mismo `.a-riel-link`), sin heredar borde ni fondo de botón. */
#riel-reiniciar-demo{background:none;border:0;padding:0;width:100%;text-align:left;cursor:pointer}

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

/* ── cabecera: dónde estoy (izquierda) · con qué ojos miro (derecha) ── */
.a-top{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:28px 32px 20px}
.a-top-t{min-width:0;flex:1 1 280px}
.a-top h1{font-family:var(--f-display);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.025em}
.a-top p{margin:6px 0 0;color:var(--texto-2);font-size:15px;max-width:70ch}
.a-menu-btn{display:none}

/* ── "ver como": un control de una línea, no un panel ── */
.a-vercomo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}
.a-vercomo-l{font-size:14px;color:var(--texto-3);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.a-seg{display:inline-flex;gap:2px;padding:3px;background:var(--sup);border:1px solid var(--borde);border-radius:10px}
.a-seg button{
  height:28px;padding:0 12px;border:0;background:none;border-radius:7px;
  color:var(--texto-2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.a-seg button:hover{background:var(--sup-2);color:var(--texto)}
/* activo = superficie clara con texto tinta. Sin violeta. */
.a-seg button[aria-pressed="true"]{background:var(--texto);color:var(--fondo)}
/* la píldora de "Ver como" lleva el punto de sector adelante del texto — el
   selector es uno de los tres lugares que pide el color con disciplina
   (bandeja de pases, 2026-09-14) */
.a-seg button{display:inline-flex;align-items:center;gap:6px}

/* ── punto de sector: compartido por el selector, las chips de la bandeja y
   la franja "Lo tiene" de la ficha. Nunca fondo, nunca píldora entera. ── */
.h-sec-punto{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.a-sel{
  height:36px;padding:0 10px;border:1px solid var(--borde);border-radius:var(--radio-s);
  background:var(--sup);color:var(--texto);font-size:14px;max-width:260px;
}

/* ═════════════════  bloques y tarjetas  ═════════════════ */
.a-zona{padding:24px 32px 0}
.a-zona-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.a-zona-h h2{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.a-zona-h .a-meta{font-family:var(--f-mono);font-size:14px;color:var(--texto-3)}

.a-tarjeta{background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio)}

/* chip "ejemplo": lo que todavía no está conectado se ve, pero no miente */
.a-ej{
  display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:100px;
  border:1px dashed var(--borde-h);color:var(--texto-3);
  font-size:14px;font-weight:600;white-space:nowrap;
}
/* USO 3 DEL VIOLETA (de tres): el chip "dato real", como TEXTO, nunca como fondo */
.a-real{
  display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:100px;
  border:1px solid var(--borde);background:none;color:var(--violeta-b);
  font-size:14px;font-weight:700;white-space:nowrap;
}
.a-real::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violeta-b)}

/* ═════════════════  filas de trabajo — el corazón de HOY  ═════════════════ */
/* la lista define las pistas y cada fila las hereda por subgrid: la columna de
   la derecha (chips, flecha, dias) cae en el mismo x en todas las filas. Sin esto
   cada fila era su propia grilla y el `auto` del final bailaba fila por fila. */
/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] 88px→94px: "107" (3
   cifras) medía 60px de scrollWidth en 57px de clientWidth — se agranda la
   pista, nunca se baja el tamaño (T16, barrido de alineación). */
.a-filas{display:grid;grid-template-columns:94px minmax(0,1fr) max-content;row-gap:8px}
.a-filas > .a-fila{grid-template-columns:subgrid;grid-column:1 / -1}
.a-fila{
  display:grid;grid-template-columns:94px minmax(0,1fr) auto;align-items:center;gap:20px;
  width:100%;text-align:left;padding:16px 20px;min-height:72px;
  background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio);
  transition:border-color .15s ease,background .15s ease;
}
button.a-fila{cursor:pointer}
button.a-fila:hover{border-color:var(--borde-h);background:var(--sup-2)}
.a-fila-k{
  font-family:var(--f-display);font-weight:600;font-size:36px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.a-fila-t{display:block;font-size:17px;font-weight:600;line-height:1.3}
.a-fila-d{display:block;font-size:14px;color:var(--texto-2);margin-top:4px;line-height:1.45}
.a-fila-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.a-fila-ir{font-size:18px;color:var(--texto-3)}
button.a-fila:hover .a-fila-ir{color:var(--texto)}

/* la fila que grita: el pendiente invisible. Un filo rojo, no un degradé. */
.a-fila.es-alerta{border-color:var(--borde);box-shadow:inset 3px 0 0 0 var(--rojo)}
.a-fila.es-alerta .a-fila-k{color:var(--rojo)}
.a-fila.es-espera{background:none;border-style:dashed}
.a-fila.es-espera .a-fila-k{color:var(--texto-2);font-size:30px}
/* la fila del gate de Aura no lleva número: en la primera columna va la luz */
/* las pistas (132px para la luz) las da la lista .es-gates; la fila las hereda. */
.a-filas.es-gates{grid-template-columns:132px minmax(0,1fr) max-content}

/* el bloque de plata: un importe con centavos no entra en el riel de 88px que
   alcanza para un conteo de 2-3 digitos — se montaba encima del titulo. Aca el
   grupo comparte una sola pista, dimensionada al importe mas ancho, asi el
   numero entra entero y los titulos siguen alineados entre filas. */
.a-filas.es-plata{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;row-gap:8px}
.a-filas.es-plata > .a-fila{display:grid;grid-template-columns:subgrid;grid-column:1 / -1}

.a-dias{font-family:var(--f-mono);font-size:14px;color:var(--texto-3);white-space:nowrap}
.a-dias.es-viejo{color:var(--ambar)}

/* ═════════════════  números de portada  ═════════════════ */
/* el piso de 210px está calculado: con la tarjeta que manda ocupando dos
   tracks, es lo que hace que los tres números entren en UN renglón tanto a
   1280 como a 1440. Con 248 el tercero caía solo a una segunda fila. */
.a-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.a-cifra{padding:20px 24px 22px;background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio)}
.a-cifra-k{font-family:var(--f-display);font-weight:600;font-size:48px;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block}
.a-cifra-l{font-size:15px;font-weight:700;margin-top:12px;display:block}
.a-cifra-d{font-size:14px;color:var(--texto-2);margin-top:6px;line-height:1.45;display:block}
.a-cifra-u{font-size:28px;letter-spacing:0}          /* el "%" que acompaña a un número */
.a-cifra-plata{font-size:40px}                        /* una cifra en dólares es más larga */
/* la que manda ocupa dos columnas: así su leyenda de salud entra en UNA línea */
.a-cifra.es-gigante{grid-column:span 2}
.a-cifra.es-gigante .a-cifra-k{font-size:52px}

/* ── barra de proporción: una sola barra de 6px, leyenda en línea ── */
.a-barra{display:flex;height:6px;border-radius:100px;overflow:hidden;background:var(--riel);margin-top:16px}
.a-barra span{display:block;height:100%}
.a-barra-l{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:10px;font-size:14px}
.a-barra-l span{display:inline-flex;align-items:center;gap:5px;color:var(--texto-2);white-space:nowrap}
.a-barra-l i{width:8px;height:8px;border-radius:2px;flex:none;font-style:normal}

/* ═════════════════  salud (el único color semántico)  ═════════════════ */
.a-luz{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:600}
.a-luz i{width:8px;height:8px;border-radius:50%;flex:none;font-style:normal}
.a-luz-verde{color:var(--verde)}      .a-luz-verde i{background:var(--verde)}
.a-luz-amarillo{color:var(--ambar)}   .a-luz-amarillo i{background:var(--ambar)}
.a-luz-rojo{color:var(--rojo)}        .a-luz-rojo i{background:var(--rojo)}
.a-luz-revisar{color:var(--revisar)}  .a-luz-revisar i{background:var(--revisar);border-radius:2px;transform:rotate(45deg)}
.a-luz-baja{color:var(--baja)}        .a-luz-baja i{background:none;border:1.5px solid var(--baja)}
/* [APPLY_INLINE: builder-salud-aliado-2026-09-14] faltaba: CRITERIOS.md y
   semaforo.py sí contemplan "gris", pero ninguna corrida lo había mostrado. */
.a-luz-gris{color:var(--texto-3)}     .a-luz-gris i{background:var(--texto-3)}

/* ═════════════════  estado del padrón: se MARCA, no se pinta  ═════════════════ */
.a-m{width:13px;height:13px;flex:none;border:2px solid var(--texto);border-radius:3px;display:inline-block}
.a-m-activo{background:var(--texto)}
.a-m-pend{background:linear-gradient(90deg,var(--texto) 0 50%,transparent 50% 100%)}
.a-m-brecha{border-style:dashed;background:none}
.a-estado{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-width:0}
.a-estado>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═════════════════  la libreta — la firma, sin rayas  ═════════════════ */
/* 12 celdas uniformes en 148px exactos: gap 2, radio 2. Vive SIEMPRE en su
   propia celda de grilla, así no hay forma de que pise un texto. */
.a-libreta{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;width:var(--lib);height:24px}
.a-c{display:block;height:100%;border-radius:2px;background:var(--riel)}
.a-c-P{background:#E9E3F6}                                              /* pagado: sólido */
.a-c-A{background:rgba(233,227,246,.20);box-shadow:inset 0 0 0 1px rgba(233,227,246,.55)} /* adeuda: claro con borde */
.a-c-s{background:var(--riel)}                                          /* sin cargo */
.a-c-b{background:none;box-shadow:inset 0 0 0 1px var(--texto-3)}       /* baja: contorno vacío */
.a-c-x{background:none;border:1px dotted rgba(255,255,255,.14)}         /* sin dato: punteado tenue */

/* la libreta ampliada de la ficha: su propia fila, con aire, números debajo */
.a-libreta-g{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin:0 0 12px}
.a-mes{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.a-mes .a-c{height:44px;border-radius:3px}
.a-mes-n{font-family:var(--f-mono);font-size:14px;color:var(--texto-3);text-align:center;line-height:1}
.a-leyenda{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--texto-2)}
.a-leyenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.a-leyenda .a-c{width:10px;height:16px;flex:none}

/* ══════════════════════════════════════════════════════════════════════════
   LA FILA DE ALIADO — una sola grilla para el padrón y para HOY
   ══════════════════════════════════════════════════════════════════════════
   Cuatro tracks fijos, compartidos por las dos pantallas. Es lo que pidió
   Adrián: "mejor alineación por bloques, así cae todo a la misma altura".
   Cada celda tiene min-width:0 y recorta lo suyo adentro — ninguna puede
   invadir a la de al lado.                                                */
.a-fa{
  display:grid;
  /* los cuatro tracks son DETERMINISTAS. La plata iba en `auto` y ahí estaba el
     defecto fino: "US$ 381.00" es más ancho que "US$ 0,00", así que cada fila
     resolvía su grilla distinto y el estado bailaba unos píxeles entre renglones.
     Con la plata fija, las cuatro columnas caen en la misma x en TODAS las filas. */
  grid-template-columns:minmax(0,2fr) minmax(180px,1fr) var(--lib) var(--plata);
  align-items:center;gap:20px;
  /* ALTURA FIJA, no mínima: un nombre que cae en dos líneas no puede hacer esta
     fila más alta que la de al lado. Dos líneas de 17px + la institución miden
     64px; entran holgadas en 80. Eso es "cae todo a la misma altura". */
  height:80px;
  width:100%;text-align:left;padding:0 20px;
  background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio);
  color:inherit;transition:border-color .14s ease,background .14s ease;
}
button.a-fa{cursor:pointer}
button.a-fa:hover{border-color:var(--borde-h);background:var(--sup-2)}
.a-fa[aria-selected="true"]{border-color:var(--borde-h);background:var(--sup-2);box-shadow:inset 2px 0 0 0 var(--texto)}

.a-fa-id{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}
.a-fa-txt{min-width:0;overflow:hidden}
/* dos líneas y recién ahí corta: "Ana Letici…" en una sola línea era el defecto */
.a-fa-n{
  font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.a-fa-i{
  font-size:14px;color:var(--texto-3);line-height:1.35;margin-top:2px;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.a-fa-est{display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden}
.a-fa-lib{min-width:0;display:flex;align-items:center}
.a-fa-plata{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:center;text-align:right}
.a-fa-plata>span{min-width:0;overflow:hidden}

/* tarjeta de aliado en HOY = la misma fila + un pie con la acción.
   La tarjeta NO es un botón: adentro hay dos botones reales (el cuerpo, que
   abre la ficha, y la píldora teal). Un botón dentro de otro no es HTML
   válido y además engaña. */
.a-aliados{display:flex;flex-direction:column;gap:8px}
.a-aliado{background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio);
  transition:border-color .14s ease,background .14s ease}
.a-aliado:hover{border-color:var(--borde-h)}
.a-aliado .a-fa{background:none;border:0;border-radius:0}
.a-aliado .a-fa:hover{background:none}
.a-aliado-f{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;
  padding:6px 20px 10px;border-top:1px solid var(--borde-s)}
.a-aliado-f .a-cta{height:32px;padding:0 16px}

.a-dato{font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;display:block}
.a-dato-l{font-size:14px;color:var(--texto-3);display:block;margin-bottom:2px;white-space:nowrap}
.a-suave{color:var(--texto-3)}
.a-sin{color:var(--texto-3);font-style:italic}

/* inicial del Success Manager: identidad de persona, NEUTRA.
   Era violeta y ese violeta competía con el de la nav. */
.a-ini{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--sup-2);border:1px solid var(--borde-h);
  font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--texto-2);letter-spacing:-.01em;
}

/* ═════════════════  acción: el teal, y nada más  ═════════════════ */
.a-cta{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 18px;border-radius:60px;
  background:var(--teal);color:var(--teal-ink);border:1px solid var(--teal);
  cursor:pointer;font-size:14px;font-weight:700;white-space:nowrap;
}
.a-cta:hover{background:var(--teal-h);border-color:var(--teal-h)}
.a-cta[disabled]{background:none;color:var(--texto-3);border-color:var(--borde);border-style:dashed;cursor:not-allowed}
.a-cta-n{font-size:14px;color:var(--texto-2);margin:10px 0 0;line-height:1.45}
.a-cta-n code{font-family:var(--f-mono);font-size:14px}
.a-btn{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:100px;
  background:var(--sup);border:1px solid var(--borde);color:var(--texto);
  cursor:pointer;font-size:14px;font-weight:600;
}
.a-btn:hover{border-color:var(--borde-h);background:var(--sup-2)}
.a-btn[disabled]{color:var(--texto-3);border-style:dashed;cursor:not-allowed}
.a-btn[disabled]:hover{border-color:var(--borde);background:var(--sup)}

/* ═════════════════  ficha (cajón) — título arriba, acción abajo  ═════════════════ */
.a-fondo{position:fixed;inset:0;background:rgba(5,3,10,.7);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:40}
.a-fondo[data-abierto="1"]{opacity:1;pointer-events:auto}
.a-ficha{
  position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);z-index:41;
  background:var(--fondo);border-left:1px solid var(--borde-h);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
}
.a-ficha[data-abierto="1"]{transform:none}
/* el título queda fijo: siempre se sabe de quién es la ficha que se está leyendo */
.a-ficha-top{padding:20px 24px 16px;border-bottom:1px solid var(--borde);display:flex;align-items:flex-start;gap:16px;
  background:var(--fondo);flex:none}
/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote8 · T15] el orbe
   LerSent001 en 3D vive solo en el portal del aliado — en la gestión el
   estado siempre es este punto de color quieto (REQ-ALI-4). */
.a-orbe{width:14px;height:14px;border-radius:50%;flex:none;margin-top:7px;position:relative}
.a-orbe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%}
/* punto de estado: color plano del semáforo, sin brillo ni animación */
.a-orbe-punto{position:absolute;inset:0;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px rgba(72,201,138,.18)}
.a-orbe-punto.es-riesgo{background:var(--rojo);box-shadow:0 0 0 3px rgba(255,122,112,.2)}
.a-ficha-title{flex:1;min-width:0}
.a-ficha-top h2{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.a-ficha-sub{font-size:14px;color:var(--texto-2);margin-top:6px;line-height:1.4}

/* ── "Lo tiene": quién sostiene hoy el pase de este aliado, debajo del nombre.
   Bandeja de pases, 2026-09-14. Punto de sector, nunca fondo. ── */
.a-lt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;
  background:var(--sup-2);border:1px solid var(--borde);border-left:3px solid var(--borde-h);
  border-radius:var(--radio-s);font-size:14px}
.a-lt-punto{width:8px;height:8px;border-radius:50%;flex:none}
.a-lt-txt{flex:1;min-width:180px;color:var(--texto-2);line-height:1.4}
.a-lt-txt b{color:var(--texto)}
.a-lt-vencido{margin-left:8px;color:var(--rojo);font-weight:700}
.a-lt-btn{height:30px;padding:0 14px;font-size:14px;flex:none}
.a-lt-sello{font-size:14px;color:var(--texto-3);width:100%}
.a-lt-firmo{width:100%}
.a-lt-firmo summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.a-lt-firmo summary::-webkit-details-marker{display:none}
.a-lt-mini-lista{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--borde-s);
  display:flex;flex-direction:column;gap:8px}
/* la lista define las pistas (punto · mano · sello) y cada mini-pase las hereda:
   el sello arranca en el mismo x en las cinco filas. */
.a-lt-mini-lista{display:grid;grid-template-columns:8px minmax(0,1fr) max-content;row-gap:6px}
.a-lt-mini{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center;gap:10px;font-size:14px}
.a-lt-mini-p{width:8px;height:8px;border-radius:50%;flex:none}
.a-lt-mini.es-hueco .a-lt-mini-p{background:none!important;border:1px dashed var(--texto-3)}
.a-lt-mini-a{flex:1;min-width:0;color:var(--texto-2)}
.a-lt-mini-e{color:var(--texto-3);font-family:var(--f-mono);font-size:14px;white-space:nowrap}
.a-lt-mini.es-sello .a-lt-mini-e{color:var(--texto-2)}

/* [APPLY_INLINE: brief-builder-rehacer-pases-2026-09-15] cierre de cadena
   (criterio #1) y el hilo de notas entre áreas de "Lo tiene" (criterio #4). */
.a-lt-cierre{color:var(--verde);font-weight:700}
.a-lt-notas{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--borde-s);
  width:100%;display:flex;flex-direction:column;gap:8px}
.a-lt-nota{display:flex;align-items:flex-start;gap:10px;font-size:14px}
.a-lt-nota-p{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.a-lt-nota-c{flex:1;min-width:0;color:var(--texto-2);line-height:1.4}
.a-lt-nota-c b{color:var(--texto)}
.a-lt-nota-form{display:flex;gap:8px;width:100%;margin-top:10px}
.a-lt-nota-input{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--borde);
  border-radius:var(--radio-s);background:var(--sup)}
.a-cerrar{
  margin-left:auto;flex:none;width:36px;height:36px;border:1px solid var(--borde);border-radius:50%;
  background:var(--sup);cursor:pointer;color:var(--texto-2);font-size:16px;line-height:1;
}
.a-cerrar:hover{border-color:var(--borde-h);color:var(--texto);background:var(--sup-2)}
.a-ficha-cuerpo{overflow-y:auto;flex:1}
/* "Abrir en GHL" SIEMPRE en el mismo lugar: abajo a la derecha */
.a-ficha-pie{
  flex:none;display:flex;align-items:center;gap:16px;justify-content:flex-end;
  padding:14px 24px;border-top:1px solid var(--borde);background:var(--nav);
}
.a-ficha-pie-n{font-size:14px;color:var(--texto-3);line-height:1.4;margin-right:auto;min-width:0}
.a-ficha-pie-n code{font-family:var(--f-mono);font-size:14px;color:var(--texto-2)}

.a-capa{padding:20px 24px 24px}
/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote8 · T15] `.a-capa-interna`
   ahora es un <details> cerrado por defecto (ESC-PAD-5.2); `.a-frontera` es su
   <summary>. Mismo patrón ya vigente en `.a-lt-firmo summary`: se apaga el
   marcador nativo y el cursor avisa que es clicable. */
.a-capa-interna{background:var(--nav);border-top:1px solid var(--borde)}
.a-frontera{display:flex;align-items:center;gap:12px;padding:16px 24px 0;cursor:pointer;list-style:none;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--texto-3)}
.a-frontera::-webkit-details-marker{display:none}
.a-frontera::after{content:"";flex:1;height:1px;background:var(--borde)}
.a-frontera-n{padding:8px 24px 0;font-size:14px;color:var(--texto-3);line-height:1.45}
.a-rot{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--texto-3);margin:0 0 10px}
.a-ficha-cab{margin-top:10px}
.a-ficha-estado{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:15px}
.a-ficha-estado .a-estado{font-size:15px}
/* "Su escalón" — REQ-PAD-5, espejo del stepper del aliado: solo nombra los
   seis pasos y marca el actual, sin cifras ni orbe. */
.a-esc{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--texto-3)}
.a-esc li{display:flex;align-items:center;gap:6px}
.a-esc li::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;opacity:.4}
.a-esc li.es-actual{color:var(--texto);font-weight:700}
.a-esc li.es-actual::before{opacity:1}
/* los dos ejes de salud, debajo de la marca de estado — plata (membresía,
   dato real) y actividad (emisión de certificados, ejemplo).
   [APPLY_INLINE: builder-salud-aliado-2026-09-14] */
.a-eje{margin-top:12px;font-size:14px;color:var(--texto-2);line-height:1.55}
.a-eje+.a-eje{margin-top:8px}
.a-eje b{color:var(--texto);font-weight:700;margin-right:6px}
.a-quien{display:flex;align-items:center;gap:12px}
.a-quien-n{font-size:15px;font-weight:700;line-height:1.3}
.a-quien-e{font-size:14px;color:var(--texto-3);line-height:1.3}
.a-bloque+.a-bloque{margin-top:24px}
.a-pares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0}
.a-par dt{font-size:14px;color:var(--texto-3);margin-bottom:2px}
.a-par dd{margin:0;font-size:15px;font-weight:600;word-break:break-word}
.a-falta{list-style:none;margin:0;padding:0}
.a-falta li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--borde-s);font-size:14px;line-height:1.5}
.a-falta li:last-child{border-bottom:0}
.a-falta b{font-weight:700;color:var(--texto)}
.a-falta-p{flex:none;width:10px;height:10px;margin-top:5px;border:2px solid var(--texto);border-radius:2px}
.a-falta-ok .a-falta-p{background:var(--texto)}
.a-falta-sc .a-falta-p{border-style:dashed;border-color:var(--texto-3)}
.a-bandera{display:inline-block;font-family:var(--f-mono);font-size:14px;padding:5px 10px;border-radius:6px;
  background:var(--sup);border:1px solid var(--borde);color:var(--texto-2);margin:0 6px 6px 0}
.a-disc{border:1px solid var(--revisar);border-left-width:3px;background:var(--revisar-f);color:var(--revisar);
  border-radius:0 var(--radio-s) var(--radio-s) 0;padding:12px 14px;font-size:14px;line-height:1.5}

/* ═════════════════  seguimiento — al pie de la ficha  ═════════════════
   Historial + nueva entrada. Pistas fijas por subgrid, el mismo patrón que
   ya prueba `.a-lt-mini-lista`: SIN padding en el item de la lista, el aire
   lo da el gap. Nada de subgrid sobre un elemento con padding propio (ese
   fue el bug del mapa del aliado, 2026-09-14). Único teal del bloque: Guardar.
   [APPLY_INLINE: builder-seguimiento-portal-2026-09-14] */
.a-seg-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.a-seg-cab .a-rot{margin:0}
.a-seg-vacio{margin:0;font-size:14px;color:var(--texto-3);font-style:italic}
.a-seg-lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:8px minmax(0,1fr) max-content;row-gap:14px;column-gap:12px}
.a-seg-item{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:start}
.a-seg-punto{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.a-seg-punto.es-portal{background:var(--texto-2)}
.a-seg-punto.es-semaforo{background:none;border:1.5px solid var(--texto-3)}
.a-seg-cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0}
.a-seg-origen{font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--texto-3)}
.a-seg-linea{font-size:14px;color:var(--texto-2);line-height:1.4}
.a-seg-linea b{color:var(--texto);font-weight:700}
.a-seg-nota{font-size:14px;color:var(--texto-2);line-height:1.45;font-style:italic;overflow-wrap:anywhere}
.a-seg-cuando{font-family:var(--f-mono);font-size:14px;color:var(--texto-3);white-space:nowrap;text-align:right}

.a-seg-nueva{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--borde-s)}
.a-seg-nueva #a-seg-toggle,.a-seg-nueva #a-seg-guardar{flex:none}
.a-seg-campo{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
.a-seg-input{flex:1;min-width:0;height:36px;padding:0 12px;
  border:1px solid var(--borde);border-radius:var(--radio-s);background:var(--sup);
  color:var(--texto);font-size:14px}
.a-seg-input::placeholder{color:var(--texto-3)}
.a-seg-contador{font-family:var(--f-mono);font-size:14px;color:var(--texto-3);white-space:nowrap;flex:none}
.a-seg-pie{margin:10px 0 0;font-size:14px;color:var(--texto-3);line-height:1.4}

/* ═════════════════  aviso editorial — la chispa magenta, único uso  ═════════════════ */
.a-aviso{
  margin:16px 32px 0;padding:14px 18px;border:1px solid var(--borde);border-left:3px solid var(--magenta);
  border-radius:0 var(--radio) var(--radio) 0;background:var(--sup);
  font-size:15px;color:var(--texto-2);line-height:1.5;
}
.a-aviso b{color:var(--texto);font-weight:700}

.a-vacio{text-align:center;padding:48px 24px;color:var(--texto-2);font-size:15px}
.a-vacio strong{display:block;font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--texto);margin-bottom:8px}
.a-pie{padding:24px 32px 48px;font-size:14px;color:var(--texto-3);line-height:1.6;max-width:100ch}
.a-pie code{font-family:var(--f-mono);font-size:14px;color:var(--texto-2)}
.a-pie b{color:var(--texto-2);font-weight:700}

/* ═════════════════  motion: mínimo y con sentido  ═════════════════ */
@keyframes a-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.a-anim>*{animation:a-entra .28s cubic-bezier(.22,.9,.3,1) backwards}
.a-anim>*:nth-child(1){animation-delay:.02s}
.a-anim>*:nth-child(2){animation-delay:.05s}
.a-anim>*:nth-child(3){animation-delay:.08s}
.a-anim>*:nth-child(4){animation-delay:.11s}
.a-anim>*:nth-child(5){animation-delay:.14s}
.a-anim>*:nth-child(n+6){animation-delay:.17s}

/* ═════════════════  responsive  ═════════════════ */

/* Por debajo de 1180px la fila de aliado se parte en DOS RENGLONES.
   Nunca se apretuja y nunca se solapa: identidad + estado arriba,
   libreta + plata abajo. */
@media (max-width:1180px){
  .a-fa{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"id est" "lib plata";
    gap:14px 20px;align-items:center;
    /* en dos renglones la altura vuelve a ser mínima: acá sí puede crecer, y
       crecer es infinitamente mejor que solaparse */
    height:auto;min-height:148px;padding:16px 20px;
  }
  .a-fa-id{grid-area:id}
  .a-fa-est{grid-area:est;justify-self:end;align-items:flex-end;text-align:right}
  .a-fa-lib{grid-area:lib}
  .a-fa-plata{grid-area:plata}
  /* dos columnas parejas y la que manda a todo lo ancho: así no queda una
     tarjeta huérfana en una segunda fila y la leyenda recupera su renglón */
  .a-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-cifra.es-gigante{grid-column:1 / -1}
}
@media (max-width:980px){
  .a-app{grid-template-columns:minmax(0,1fr)}
  .a-riel{position:fixed;top:0;left:0;bottom:0;width:272px;z-index:50;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.32,.72,0,1)}
  .a-riel[data-abierto="1"]{transform:none}
  .a-menu-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;
    border:1px solid var(--borde);border-radius:100px;background:var(--sup);
    cursor:pointer;font-size:14px;font-weight:700}
  .a-top{padding:20px 20px 16px}
  .a-top h1{font-size:26px}
  .a-zona,.a-pie{padding-left:20px;padding-right:20px}
  .a-aviso{margin-left:20px;margin-right:20px}
  .a-cifra.es-gigante{grid-column:span 1}
}
@media (max-width:640px){
  .a-top h1{font-size:24px}
  .a-seg{flex-wrap:wrap;max-width:100%}
  /* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] 64px→76px: la pista
     no alcanzaba para 3 cifras a 30px (`123` medía 47px de scrollWidth en
     41px de clientWidth) — se agranda la pista, nunca se baja el tamaño. */
  .a-fila{grid-template-columns:76px minmax(0,1fr);gap:12px 16px;padding:14px}
  .a-filas{grid-template-columns:76px minmax(0,1fr)}
  .a-filas.es-gates{grid-template-columns:132px minmax(0,1fr)}
  .a-filas.es-plata{grid-template-columns:max-content minmax(0,1fr)}
  .a-fila-r{grid-column:1 / -1;justify-content:flex-start}
  .a-fila-k{font-size:30px}
  .a-cifra-k,.a-cifra.es-gigante .a-cifra-k{font-size:40px}
  .a-fa{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "est" "lib" "plata";
    gap:12px;padding:14px;height:auto;min-height:0}
  .a-fa-est{justify-self:start;align-items:flex-start;text-align:left}
  .a-fa-plata{justify-content:start;text-align:left;gap:20px}
  .a-pares{grid-template-columns:1fr}
  .a-ficha-top{padding:16px 16px 14px}
  .a-capa,.a-frontera,.a-frontera-n,.a-ficha-pie{padding-left:16px;padding-right:16px}
  .a-libreta-g{grid-template-columns:repeat(6,1fr);gap:8px}
  .a-lt{padding:10px}
  .a-lt-btn{width:100%;justify-content:center}
  /* la fila de cada mini-pase de FIRMO no entra en una línea a 390px: el
     actor y el sello se apilan en vez de forzar scroll horizontal adentro
     de la ficha. [APPLY_INLINE: brief-builder-portal-bandeja-pases-2026-09-14] */
  .a-lt-mini-lista{grid-template-columns:8px minmax(0,1fr)}
  .a-lt-mini-e{grid-column:2;justify-self:start}
  .a-lt-mini-a{flex:1 1 100%}
  .a-lt-mini-e{white-space:normal;flex:1 1 100%;padding-left:18px}
  /* mismo colapso que a-lt-mini-lista: a 390px el "cuándo" cae debajo del
     cuerpo, nunca lo aprieta al costado. [APPLY_INLINE: builder-seguimiento-portal-2026-09-14] */
  .a-seg-lista{grid-template-columns:8px minmax(0,1fr)}
  .a-seg-cuando{grid-column:2;justify-self:start;text-align:left;margin-top:2px}
  .a-seg-nueva{flex-direction:column;align-items:stretch}
  .a-seg-campo{width:100%}
  .a-seg-nueva #a-seg-toggle,.a-seg-nueva #a-seg-guardar{width:100%;justify-content:center}
}
@media (max-width:460px){
  .a-zona,.a-pie,.a-top{padding-left:16px;padding-right:16px}
  .a-aviso{margin-left:16px;margin-right:16px}
}