/* ══════════════════════════════════════════════════════════════════════════
   PORTAL DEL ALIADO · Apréndika — hoja compartida por index.html y estado.html
   ══════════════════════════════════════════════════════════════════════════
   QUÉ ES ESTO
   Mockup sin backend (`docs/mvp/05-portal-aliado.md`): "el portal del aliado
   no es un segundo producto, es la misma data mirada desde afuera". Misma
   identidad que `portal-v3/app.css`, mismos tokens — pero una piel propia:
   acá no hay tabla ni fila de trabajo.

   [APPLY_INLINE: brief-builder-portal-aliado-login-sin-orbe-2026-09-14 — decisión
   Adrián: "el orbe va solo adentro de la ficha del aliado, no en el login"]
   `estado.html` conserva la plantilla de dos mitades (izquierda información,
   derecha el orbe, `.al-orbpanel`). `index.html` (la puerta) es `.al-shell--solo`:
   una sola columna centrada, máx. ~440px, sin orbe.

   [APPLY_INLINE: brief-builder-portal-aliado-mi-estado-cargado-2026-09-14 —
   el acordeón vertical de 6 <details> (`.al-mapa`/`.al-paso-item > summary`)
   se reemplaza por `.al-stepper` (seis puntos en línea) + `.al-panel` (un
   solo panel debajo, altura acotada con scroll interno) y `.al-tiles` (3
   tarjetas) pasa a `.al-grid` (6 tarjetas, 2 columnas). Los estilos de
   contenido del paso (`.al-paso-cols`/`.al-paso-col`) se conservan tal
   cual: viven ahora dentro de `.al-panel-cuerpo` en vez de `.al-paso-cuerpo`.]

   :root COPIADO de `portal-v3/app.css` el 2026-09-14 — NO se enlaza app.css
   (instrucción explícita del brief). Cualquier cambio de marca futuro se
   replica acá a mano; si empieza a doler, unificar en un tercer archivo de
   tokens compartido es la deuda a pagar, no antes.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── superficies: dos niveles, ni uno más ── */
  --nav:#0A0813;          /* 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 */
  --riel:#241D3A;         /* riel de barra — 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;

  /* ── 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;
  --lib:148px;
  --plata:224px;
  --radio:12px;
  --radio-s:8px;
}

/* ══════════════════  base  ══════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
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}
}

/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] `left:-9999px` era la
   fuente real de `document.scrollWidth` > `innerWidth` en toda la página
   (T16, barrido de alineación) — se cambia al mismo patrón clip-rect de
   `.al-oculto`, ya vigente en este archivo, sin cambiar el comportamiento
   visual (oculto hasta el foco). */
.al-salto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;top:0;z-index:99;background:var(--violeta);color:#fff;
  border-radius:0 0 var(--radio-s) 0;font-weight:600}
.al-salto:focus{position:absolute;width:auto;height:auto;padding:12px 16px;margin:0;
  overflow:visible;clip:auto;white-space:normal}
.al-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════════════  la plantilla de dos mitades  ══════════════════
   Izquierda = información, scrollea sola. Derecha = el orbe, fijo mientras
   la izquierda se mueve, ocupa su mitad completa (`min(56vh,520px)`). En
   mobile el orden se invierte: el orbe arriba, chico, la info abajo. */
.al-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}

/* la puerta (index.html): sin orbe, una sola columna centrada */
.al-shell--solo{
  display:flex;grid-template-columns:none;align-items:center;justify-content:center;
  padding:24px;
}
.al-shell--solo .al-info{width:100%;max-width:440px;padding:0}
.al-shell--solo .al-marca{margin-bottom:32px}
.al-shell--solo .al-puerta{max-width:none;padding:0}

.al-info{
  min-width:0;display:flex;flex-direction:column;
  padding:40px clamp(24px,5vw,64px) 48px;
}

.al-orbpanel{
  position:sticky;top:0;height:100vh;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:
    radial-gradient(circle at 50% 42%, var(--orb-glow,rgba(165,46,255,.16)) 0%, transparent 62%),
    var(--nav);
  border-left:1px solid var(--borde-s);
  transition:background .4s ease;
}
.al-orbpanel[data-salud="rojo"]{--orb-glow:rgba(255,122,112,.16)}

.al-orb-mount{
  width:min(56vh,520px);height:min(56vh,520px);flex:none;
  border-radius:50%;position:relative;
}
.al-orb-mount canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%}
/* fallback: sin WebGPU, con prefers-reduced-motion, o si el runtime falla.
   Punto fijo, sombra suave, CERO animación — nunca un placeholder vacío. */
.al-orb-punto{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#F1A7FF 0%,#A52EFF 46%,#100016 100%);
  box-shadow:0 0 0 1px rgba(165,46,255,.4),0 0 48px 12px rgba(165,46,255,.3);
}
.al-orb-punto.es-riesgo{
  background:radial-gradient(circle at 35% 32%,#FFC9B8 0%,#FF7A70 46%,#2A1512 100%);
  box-shadow:0 0 0 1px rgba(255,122,112,.45),0 0 48px 12px rgba(255,122,112,.35);
}

/* estado en palabras + qué hacer, debajo del orbe (solo estado.html) */
.al-orb-estado{text-align:center;max-width:360px;padding:0 16px}
.al-orb-titulo{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.01em}
.al-orb-titulo.es-verde{color:var(--verde)}
.al-orb-titulo.es-rojo{color:var(--rojo)}
.al-orb-accion{margin:8px 0 0;font-size:15px;color:var(--texto-2);line-height:1.5}

/* cuenta regresiva al próximo vencimiento — usa el espacio que antes
   sobraba debajo del orbe (Adrián, 2026-09-14: "el orbe queda con mucho
   espacio por debajo… tiene que ser cargado para el aliado también") */
.al-orb-cuenta{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:18px}
.al-orb-cuenta-n{font-family:var(--f-mono);font-weight:600;font-size:44px;letter-spacing:-.02em;color:var(--violeta-b)}
.al-orb-cuenta-n.es-riesgo{color:var(--rojo)}
.al-orb-cuenta-u{font-size:14px;color:var(--texto-3);max-width:14ch;line-height:1.3;text-align:left}
.al-orb-plazo-l{margin:6px 0 0;font-size:13px;color:var(--texto-2);line-height:1.45}
.al-orb-plazo-l b{color:var(--texto);font-weight:700}

/* ══════════════════  wordmark  ══════════════════ */
.al-marca{display:flex;align-items:center;gap:12px;margin-bottom:auto}
.al-marca img{display:block;width:132px;height:auto}
.al-marca-t{font-family:var(--f-display);font-weight:600;font-size:22px;color:#fff;letter-spacing:-.02em}
.al-marca-t b{color:var(--magenta);font-weight:600}

/* ══════════════════  puerta (index.html)  ══════════════════ */
.al-puerta{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:420px;padding:32px 0}
.al-puerta h1{font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-.02em}
.al-puerta p.al-sub{margin:12px 0 0;font-size:16px;color:var(--texto-2);line-height:1.5;max-width:38ch}

.al-paso{margin-top:32px}
.al-paso[hidden]{display:none}
.al-campo{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.al-campo label{font-size:14px;font-weight:600;color:var(--texto-2)}
.al-campo input{
  height:52px;padding:0 16px;border:1px solid var(--borde);border-radius:var(--radio-s);
  background:var(--sup);color:var(--texto);font-size:16px;
}
.al-campo input::placeholder{color:var(--texto-3)}
.al-campo input:focus-visible{border-color:var(--violeta)}
.al-campo-cod input{
  letter-spacing:.6em;font-family:var(--f-mono);font-size:22px;text-align:center;padding-left:8px;
}
.al-campo-nota{font-size:13px;color:var(--texto-3);line-height:1.4}

.al-cta{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 24px;border-radius:100px;
  background:var(--teal);color:var(--teal-ink);border:1px solid var(--teal);
  cursor:pointer;font-size:16px;font-weight:700;
}
.al-cta:hover{background:var(--teal-h);border-color:var(--teal-h)}
.al-cta[disabled]{background:none;color:var(--texto-3);border-color:var(--borde);border-style:dashed;cursor:not-allowed}
.al-link{
  margin-top:16px;background:none;border:0;padding:0;color:var(--texto-2);
  font-size:14px;text-decoration:underline;cursor:pointer;align-self:flex-start;
}
.al-link:hover{color:var(--texto)}

.al-msg{margin-top:16px;font-size:14px;color:var(--verde);line-height:1.5}
.al-msg[hidden]{display:none}

/* ══════════════════  footer honesto  ══════════════════ */
.al-pie{margin-top:32px;padding-top:20px;border-top:1px solid var(--borde-s);
  font-size:13px;color:var(--texto-3);line-height:1.6;max-width:60ch}
.al-pie b{color:var(--texto-2);font-weight:700}

/* navegación de demo — discreta, mismo gris que las notas de mockup */
.al-demo{display:inline-block;margin-top:12px;font-size:12px;color:var(--texto-3);text-decoration:underline}
.al-demo:hover{color:var(--texto-2)}

/* ══════════════════  cabecera de "Mi estado"  ══════════════════ */
.al-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.al-cab h1{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.02em}
.al-cab-n{margin:6px 0 0;font-size:15px;color:var(--texto-2)}
.al-cab-n b{color:var(--texto);font-weight:700}

/* "Ver como": discreto, una línea */
.al-vercomo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 28px}
.al-vercomo-l{font-size:12px;color:var(--texto-3);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.al-seg{display:inline-flex;gap:2px;padding:3px;background:var(--sup);border:1px solid var(--borde);border-radius:10px}
.al-seg button,.al-seg a{
  height:30px;padding:0 12px;border:0;background:none;border-radius:7px;
  color:var(--texto-2);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease;max-width:280px;overflow:hidden;text-overflow:ellipsis;
}
/* el segmento admite un enlace además de un botón: lo usa el "Ver como" de la
   puerta (index.html) para cruzar al portal interno. */
.al-seg a{display:inline-flex;align-items:center;text-decoration:none}
.al-seg button:hover,.al-seg a:hover{background:var(--sup-2);color:var(--texto)}
.al-seg button[aria-pressed="true"]{background:var(--texto);color:var(--fondo)}

/* chips ejemplo / dato real — mismo lenguaje que portal-v3 */
.al-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:13px;font-weight:600;white-space:nowrap;flex:none;
}
.al-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:13px;font-weight:700;white-space:nowrap;flex:none;
}
.al-real::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violeta-b)}

/* ══════════════════  el stepper horizontal  ══════════════════
   Seis puntos en línea, riel entre ellos. Tocar uno cambia `.al-panel` de
   más abajo — nunca hay más de un panel abierto (Adrián, 2026-09-14: "el
   menú ese de envío estilo Shein horizontal, no vertical"). */
.al-stepper{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--sup);
  padding:18px 10px 14px;
}
.al-step{
  position:relative;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 4px;min-width:0;
}
.al-step-rail{position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--borde-h);z-index:0}
.al-step:first-child .al-step-rail{display:none}
.al-step-punto{width:16px;height:16px;border-radius:50%;border:2px solid var(--texto-3);background:var(--sup);z-index:1;flex:none}
/* pasado: relleno sólido, ya quedó atrás */
.al-step.es-pasado .al-step-punto{background:var(--texto-3);border-color:var(--texto-3)}
.al-step.es-pasado .al-step-rail{background:var(--texto-3)}
/* actual: violeta, el único uso de marca en todo el stepper — marca DÓNDE
   estás, no CÓMO te va (eso lo dice el orbe de la derecha) */
.al-step.es-actual .al-step-punto{background:var(--violeta);border-color:var(--violeta);
  box-shadow:0 0 0 4px rgba(155,77,224,.22)}
/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] piso 14px sin
   excepciones (Guards) — quedaba en 12px. */
.al-step-n{font-size:14px;font-weight:700;line-height:1.25;text-align:center;color:var(--texto-3);max-width:13ch}
.al-step.es-actual .al-step-n{color:var(--violeta-b)}
.al-step.es-abierto .al-step-n{color:var(--texto)}
.al-step:hover .al-step-n{color:var(--texto)}

/* ══════════════════  el panel — un solo paso a la vez  ══════════════════ */
.al-panel{border:1px solid var(--borde);border-radius:var(--radio);background:var(--sup);margin-top:14px;overflow:hidden}
.al-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--borde-s)}
.al-panel-titulo{font-size:16px;font-weight:700;line-height:1.3;min-width:0}
.al-panel-sub{display:block;font-size:13px;font-weight:400;color:var(--texto-3);margin-top:2px}
.al-panel-estado{font-size:13px;color:var(--texto-3);white-space:nowrap;flex:none;padding-top:2px}
.al-panel-estado.es-actual{color:var(--violeta-b);font-weight:700}
.al-panel-cuerpo{padding:18px 20px 20px;max-height:260px;overflow-y:auto}

.al-paso-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.al-paso-col h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  font-weight:700;margin:0 0 8px}
.al-paso-col p{margin:0;font-size:14px;line-height:1.55;color:var(--texto-2)}
.al-paso-col p b{color:var(--texto);font-weight:700}
.al-paso-col.es-alerta{border-left:2px solid var(--rojo);padding-left:14px;margin-left:-16px}
.al-paso-col.es-alerta p{color:var(--texto)}
.al-paso-flag{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--rojo)}
.al-paso-cadena{margin-top:10px;font-size:13px;color:var(--texto-3);line-height:1.5}

/* ══════════════════  la grilla: wallet · membresía · certificados ·
   papeles · Success Manager · avisos  ══════════════════
   Dos columnas fijas, misma altura de fila (grid-auto-rows:1fr) — ninguna
   tarjeta arma su propia grilla interna. */
/* sin grid-auto-rows:1fr a propósito: en un contenedor de alto automático
   eso iguala TODAS las filas a la más alta de la grilla entera. El default
   (align-items:stretch) ya empareja la altura DENTRO de cada fila, que es
   lo que pide el criterio — sin inflar filas cortas al tamaño de "Avisos". */
.al-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.al-card{padding:16px 18px;background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio);
  display:flex;flex-direction:column;min-width:0}
.al-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.al-card-h h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.al-card-k{font-family:var(--f-mono);font-weight:600;font-size:32px;letter-spacing:-.02em;display:block;margin-top:10px}
.al-card-d{font-size:13px;color:var(--texto-2);margin-top:6px;line-height:1.45;display:block}
.al-card-venta{margin:10px 0 0;font-size:13px;color:var(--violeta-b);line-height:1.45}
.al-card-cta{margin-top:auto;padding-top:14px}

.al-card-btn{
  display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;
  border-radius:100px;background:var(--teal);color:var(--teal-ink);font-size:13px;font-weight:700;
  border:1px solid var(--teal);cursor:pointer;text-decoration:none;white-space:nowrap;
}
.al-card-btn:hover{background:var(--teal-h);border-color:var(--teal-h)}
.al-card-btn[disabled]{background:none;color:var(--texto-3);border-color:var(--borde);border-style:dashed;
  cursor:not-allowed;pointer-events:none}
.al-card-btn--mini{height:26px;padding:0 12px;font-size:12px;flex:none}

/* mis papeles: lista corta, misma pista fija por fila */
.al-papeles{display:flex;flex-direction:column;margin-top:10px}
.al-papel{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid var(--borde-s)}
.al-papel:first-child{border-top:0;padding-top:0}
/* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] sin recorte, el
   nombre del papel empujaba el estado vecino (11px de scrollWidth real a
   1150) — mismo patrón de recorte que el resto del portal. */
.al-papel-n{font-size:13px;color:var(--texto-2);min-width:0;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-papel-estado{font-size:12px;font-weight:700;white-space:nowrap}
.al-papel-estado.es-ok{color:var(--verde)}
.al-papel-estado.es-falta{color:var(--ambar);margin-right:8px}

/* mi success manager */
.al-sm{display:flex;align-items:center;gap:12px;margin-top:10px}
.al-sm-av{width:44px;height:44px;border-radius:50%;background:var(--sup-2);border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:600;
  font-size:15px;color:var(--violeta-b);flex:none}
.al-sm-nombre{margin:0;font-size:14px;font-weight:700;color:var(--texto)}
.al-sm-equipo{margin:2px 0 0;font-size:12px;color:var(--texto-3)}

/* avisos */
.al-avisos{display:flex;flex-direction:column;margin-top:10px}
.al-aviso{padding:8px 0;border-top:1px solid var(--borde-s)}
.al-aviso:first-child{border-top:0;padding-top:0}
.al-aviso b{font-size:13px;color:var(--texto);font-weight:700}
.al-aviso p{margin:2px 0 0;font-size:13px;color:var(--texto-2);line-height:1.45}

.al-zona-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  font-weight:700;margin:0 0 12px}

/* ══════════════════  responsive  ══════════════════ */
@media (max-width:900px){
  .al-shell{grid-template-columns:1fr;grid-template-rows:auto auto}
  .al-orbpanel{
    order:-1;position:relative;top:auto;height:auto;min-height:240px;
    padding:28px 20px;border-left:0;border-bottom:1px solid var(--borde-s);gap:14px;
  }
  .al-orb-mount{width:min(52vw,200px);height:min(52vw,200px)}
  .al-info{padding:28px 20px 40px}
  .al-marca{margin-bottom:24px}
  .al-puerta{max-width:none;padding:8px 0}
  .al-puerta h1{font-size:32px}
  .al-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* [APPLY_INLINE: sdd-apply-aprendika-mvp-saas-v1-lote9] el scroll horizontal
     dejaba `.al-stepper` con scrollWidth>clientWidth por diseño — el gate de
     alineación (T16) no distingue eso de un desborde real. Dos filas de tres
     puntos entran completas en 390px sin scroll y sin bajar el tamaño. */
  .al-stepper{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px;padding:16px 12px 14px}
  .al-step{min-width:0}
  .al-step-rail{display:none}
  .al-panel-head{padding:14px 16px}
  .al-panel-cuerpo{padding:16px 16px 18px;max-height:240px}
  .al-paso-cols{grid-template-columns:1fr;gap:16px}
  .al-cab h1{font-size:24px}
}