:root{
    --bg:#0a0a0c; --card:#15151a; --card2:#1b1b22; --border:rgba(255,255,255,0.07);
    --text:#f2f2f2; --dim:#8a8a93; --dim2:#5a5a62;
    --red:#ff3b3b; --gold:#ffcf4d; --green:#34d399;
    --radius:18px;
    --sidebar-w:68px;       /* rail colapsado: lo que ocupa siempre el contenido */
    --sidebar-open-w:236px; /* panel expandido al hover, en overlay */
    /* Altura EN FIRME de la fila de acción (no un mínimo). Radar, Hábitos y Jefe
       miden exactamente esto pase lo que pase: al alternar radar↔ámbitos, al
       desplegar un ámbito o al añadir hábitos, el contenido scrollea dentro de
       su tarjeta y ni un solo bloque de la interfaz se desplaza.
       Se mide contra la ventana, no en píxeles fijos: en un portátil de 768px
       de alto la fila entera cabe sobre el pliegue; en un monitor grande sigue
       midiendo 420. */
    /* El suelo (360px) NO es arbitrario: es lo que mide la tarjeta de
       Ambitos con sus 5 filas desplegadas (343px medidos) mas holgura.
       Con el suelo anterior de 280px, en una ventana de 800px de alto
       40vh daba 320px y la ultima fila (Mental) quedaba cortada. El
       radar pide 303px y el jefe 255px, asi que 360px los cubre a los
       tres y el radar se ve entero nada mas abrir el Portal. */
    --portal-row-h:clamp(360px, 44vh, 460px);
    /* Space Grotesk solo para marca, cifras y badges — el resto sigue en la
       tipografía de sistema, que es la que mejor rinde en textos largos. */
    --font-stat:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  }
  *{box-sizing:border-box;}
  /* Barra de la página oculta (la de la derecha): la página sigue deslizándose
     con la rueda, el dedo, el teclado (flechas, Re Pág, Espacio) y arrastrando. */
  html{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}
  body{
    background:var(--bg); color:var(--text); margin:0;
    padding:26px 30px 130px calc(var(--sidebar-w) + 30px);
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    background-image: radial-gradient(circle at 50% -10%, rgba(255,59,59,0.10), transparent 55%);
    min-height:100vh;
    transition:padding-left .25s cubic-bezier(.3,1,.4,1);
  }
  /* Rejilla de tarjetas: el navegador decide cuántas columnas caben.
     Sustituye a la columna única de 780px que dejaba media pantalla muerta. */
  .app{
    max-width:1400px;margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:16px;
    align-items:stretch;
  }
  /* Bloques a ancho completo. */
  .app > .brand,
  .app > .open-loops-banner,
  .app > .motivational-banner,
  .app > .portal-hero,
  .app > .vision-card,
  .app > .identity-card,
  .app > .porque-card,
  .app > .ifthen-card,
  .app > .portal-summary,
  .app > .locked-card{grid-column:1 / -1;}

  /* Cabecera: ficha de personaje + Ahora toca + cofre de racha. La ficha
     sigue siendo la más ancha (barras de XP/vida piden más sitio que un
     botón de suelo/techo), pero ya no acapara 2.8fr de 3.8 — a petición
     del usuario, más pequeña, con Ahora toca metido entre ella y el cofre. */
  /* Cofre más estrecho, Ficha más ancha, a petición del usuario — Ahora
     toca (columna del medio) no cambia. */
  .app > .portal-hero{
    display:grid;grid-template-columns:1.65fr 1fr 0.75fr;
    gap:16px;align-items:stretch;min-width:0;
  }
  .portal-hero > *{min-width:0;}
  @media(max-width:1180px){.app > .portal-hero{grid-template-columns:1fr;}}

  /* Sin esto, una tarjeta con contenido ancho estira su columna y rompe la rejilla. */
  .app > *{min-width:0;}

  /* Páginas que no son el Portal (Hoy, Foco, Semana, Metas, Hábitos, Ámbitos,
     Motivación): una sola columna de arriba a abajo, no la rejilla masonry
     del Portal — cada tarjeta ya es a ancho completo por diseño. */
  .app > .page-single{grid-column:1 / -1;display:flex;flex-direction:column;gap:16px;}
  .app > .page-single > .subtabs{margin-bottom:0;}

  /* Columnas del Portal: cada una apila sus tarjetas pegadas, sin huecos.
     Al ser flex independientes, que una columna sea más alta no deja aire en las otras. */
  .portal-col{
    display:flex;flex-direction:column;gap:16px;min-width:0;
    height:var(--portal-row-h);overflow:hidden;
  }
  .portal-col > *{min-width:0;flex:none;}
  /* La tarjeta principal de cada columna llena la altura y scrollea por dentro
     si su contenido crece. Ese scroll interno es lo que hace que nada de fuera
     se mueva nunca. */
  .portal-col-a > .radar-click,
  .portal-col-a > .ambitos-card,
  .portal-col-b > .weekly-card,
  .portal-col-c > .boss-card{
    flex:1 1 auto;min-height:0;
    display:flex;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
  }
  /* El radar se adapta al alto disponible pero con techo: sin él se estiraba
     hasta llenar los 420px de la columna y quedaba desproporcionado frente a
     las tarjetas vecinas. Centrado, el aire sobrante no se lee como hueco. */
  .portal-col-a > .radar-click > svg{flex:1 1 auto;height:auto;min-height:0;max-height:250px;margin:auto;}
  /* Ningun hijo de la tarjeta de Ambitos se encoge. Sin esto, al ser flex
     column con alto fijo (--portal-row-h), las 5 filas cedian de sus 48px
     naturales a 29px con la ventana baja: el contenido de cada fila se
     salia de su caja y pisaba la de abajo, y overflow-y:auto no llegaba a
     activarse nunca porque las filas cedian antes de desbordar. Con
     flex:none mantienen su alto y, si no caben, la tarjeta scrollea. */
  .portal-col-a > .ambitos-card > *{flex:none;}
  /* Agrupa todo menos el título. flex:1 para llenar la columna a la altura
     de Radar/Jefe — SIN justify-content:center: quien crece de verdad es
     wk-goals (ver css/weekly.css), no un centrado que deja huecos simétricos
     arriba y abajo. El texto pequeño del cofre semanal queda fuera de
     wk-goals, así que cae pegado al fondo siempre — ver comentario en
     weekly.js. */
  .weekly-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  /* El arte del jefe encoge con la tarjeta en vez de desbordarla. */
  .portal-col-c > .boss-card > .boss-art{flex:1 1 auto;align-items:center;min-height:0;margin:2px 0 10px;}
  .portal-col-c > .boss-card > .boss-art svg{height:100%;max-height:170px;width:auto;}
  /* chart-card ya NO es flex:1 aquí: cuando Ahora toca (habits-card) era
     la que llenaba la columna, chart-card competía con ella por el hueco
     sobrante en los días con gráfica y ninguna de las dos quedaba a la
     altura completa. Ahora que Esta semana es la que llena la columna
     (ver weekly-card arriba), chart-card se queda a su alto natural,
     debajo, igual que Pendientes — comprobado: sin esta línea, Esta
     semana pasa de 163px a 360px, igualando a Radar y Jefe. */

  /* Barra de scroll discreta dentro de las tarjetas. */
  .portal-col .card::-webkit-scrollbar{width:6px;}
  .portal-col .card::-webkit-scrollbar-track{background:transparent;}
  .portal-col .card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
  .portal-col .card::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
  .portal-col .card{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}

  /* GRÁFICO ELÁSTICO: la zona de trazado se come la altura sobrante de la tarjeta. */
  .chart-card{display:flex;flex-direction:column;}
  .chart-plot{position:relative;flex:1 1 auto;min-height:150px;line-height:0;}
  .chart-plot svg{display:block;width:100%;height:100%;}
  .chart-dot{
    position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;
    border-radius:50%;background:#34d399;pointer-events:none;
  }
  .chart-dot.last{
    width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
    background:var(--bg);border:2px solid #34d399;
  }
  .chart-weeks{display:flex;margin-bottom:4px;}
  .chart-weeks span{flex:1;text-align:center;font-size:11px;color:var(--dim);}
  .chart-weeks span.current{color:var(--green);font-weight:700;}
  .chart-days{display:flex;margin-top:4px;}
  .chart-pie{margin-top:8px;font-size:11.5px;color:var(--dim);text-align:center;}
  .chart-days span{flex:1;text-align:center;font-size:8px;color:var(--dim2);}

  .brand{display:flex;align-items:center;gap:18px;padding:0 4px 6px;}
  .brand-cycle{margin-left:auto;flex:none;}

  /* INDICADORES DE CABECERA: nivel (texto), racha (la llama con su número) y
     multiplicador. Sin anillos — cada dato se dice una sola vez. */
  .header-stats{display:flex;align-items:center;gap:22px;flex:none;}
  .hstat{
    display:flex;align-items:center;gap:10px;flex:none;
    background:none;border:none;padding:0;margin:0;font-family:inherit;color:var(--text);text-align:left;
  }
  .hstat.streak{cursor:pointer;transition:transform .15s;}
  .hstat.streak:hover{transform:scale(1.04);}
  .hstat-ring-wrap{
    position:relative;width:48px;height:50px;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  /* Centrado geométrico, no por flujo: con line-height y métricas de fuente el
     número quedaba desplazado dentro del aro. Blanco con sombra para que se lea
     sobre la llama en cualquier estado. */
  .hstat-value{
    position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);
    z-index:1;font-size:17px;font-weight:800;line-height:1;
    font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);
  }
  .hstat-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .hstat-title{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.3px;white-space:nowrap;}
  .hstat-title b{color:var(--gold);font-size:13px;}
  .hstat-sub{font-size:9.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
  /* El rango vive en la línea de texto, con el color de su liga. */
  .hstat-rank{font-weight:800;}

  /* Multiplicador de crecimiento: sin aro. El número va suelto y grande — es el
     dato, no un porcentaje de nada, así que un anillo alrededor no significaría
     nada y solo competiría con los otros tres marcadores. */
  .hstat.growth .hstat-value{
    position:static;transform:none;
    font-size:20px;letter-spacing:-.3px;color:var(--gold);
    text-shadow:0 0 12px rgba(255,207,77,.35);
  }
  .hstat.growth .hstat-title{color:var(--dim);font-size:11px;letter-spacing:.4px;}
  /* LLAMA DE LA RACHA: dentro del anillo, con el número encima. El color dice
     el estado sin necesidad de leer la cifra. */
  /* La llama es el fondo del número, no la protagonista: si llena el círculo
     tapa la cifra y el marcador deja de leerse. */
  .hstat-flame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:.9;display:block;}
  /* Apagada pero visible: en #3a3a42 sobre el fondo oscuro la llama desaparecía
     y el círculo quedaba vacío. */
  .hstat-flame .flame-outer{fill:#4e4e5a;transition:fill .3s;}
  .hstat-flame .flame-inner{fill:#63636f;transition:fill .3s;}

  /* Viva: llama naranja con núcleo dorado, latido lento. */
  .hstat.streak.lit .hstat-flame{filter:drop-shadow(0 0 8px rgba(255,122,59,.65));animation:flameFlicker 2.4s ease-in-out infinite;}
  .hstat.streak.lit .flame-outer{fill:#ff7a3b;}
  .hstat.streak.lit .flame-inner{fill:#ffcf4d;}
  /* En riesgo: la llama se apaga a ámbar y parpadea más rápido. */
  .hstat.streak.grace .hstat-flame{filter:drop-shadow(0 0 8px rgba(255,207,77,.5));animation:flameFlicker 1s ease-in-out infinite;}
  .hstat.streak.grace .flame-outer{fill:#a86a1f;}
  .hstat.streak.grace .flame-inner{fill:#ffcf4d;}
  /* Apagada: llama gris y quieta, pero el número sigue en blanco — antes se
     perdía en gris sobre gris y no se leía. */
  .hstat.streak.off .hstat-title b{color:var(--dim);}
  @keyframes flameFlicker{
    0%,100%{transform:translate(-50%,-50%) scale(1);}
    45%    {transform:translate(-50%,-52%) scale(1.06);}
    70%    {transform:translate(-50%,-49%) scale(.98);}
  }
  @media(prefers-reduced-motion:reduce){.hstat-flame{animation:none!important;}}
  .hstat-warn{
    position:absolute;bottom:-2px;left:-6px;font-size:11px;line-height:1;
    filter:drop-shadow(0 0 4px rgba(255,207,77,.8));
  }
  .hstat-shield{
    position:absolute;top:-4px;right:-8px;font-size:10px;font-weight:800;
    background:rgba(124,155,255,.18);border:1px solid rgba(124,155,255,.45);
    color:#a9bfff;border-radius:20px;padding:1px 5px;line-height:1.3;
  }
  /* En pantallas estrechas se caen los textos y quedan solo los tres anillos. */
  @media(max-width:900px){
    .hstat-text,.brand-cycle .cycle-label,.brand-cycle .cycle-sub{display:none;}
    .header-stats{gap:12px;}
    .brand{gap:12px;}
  }
  .card{
    background:linear-gradient(180deg, var(--card), #121216);
    border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px;
    position:relative; overflow:hidden;
  }
  .card-title{font-size:13px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
  .card-sub{font-size:12px;color:var(--dim2);margin:-6px 0 12px;}

  /* TOAST */
  .toast{
    position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-12px);
    background:var(--card2);border:1px solid var(--border);padding:10px 18px;border-radius:30px;
    font-size:13px;font-weight:700;color:var(--text);opacity:0;transition:.3s;z-index:2000;
    box-shadow:0 6px 20px rgba(0,0,0,.4);
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .toast.bonus{color:var(--gold);border-color:rgba(255,207,77,.4);}
  .toast.success{color:var(--green);border-color:rgba(52,211,153,.4);}
  .toast.warn{color:var(--red);border-color:rgba(255,59,59,.4);}

  /* ── MODO COMPACTO ──
     Pantallas bajas (portátiles). No toca tamaños de letra: solo aprieta el
     espacio entre cosas, que es donde se va el presupuesto vertical. Con ~8
     tarjetas en pantalla recorta unos 80px sin perder legibilidad. */
  @media(max-height:900px){
    .card{padding:13px 14px;}
    .app{gap:11px;}
    .portal-col{gap:11px;}
    .app > .portal-hero{gap:11px;}
    .card-title{margin-bottom:8px;}
    body{padding-top:18px;}
    .brand{padding-bottom:2px;}
    .open-loop-line{padding:7px 11px;}
    .hstat-ring-wrap{width:42px;height:44px;}
    .hstat-value{font-size:15px;}
    .cycle-widget svg{width:38px;height:38px;}
    .ahora-toca-current{padding:14px 13px;}
    .vision-card > .vision-grid{grid-auto-rows:minmax(200px,1fr);}
    .identity-affirm{padding:13px 14px;}
  }

  /* Por debajo de 1180px las tres columnas se disuelven y las tarjetas vuelven a
     la rejilla plana. display:contents permite reordenarlas con `order`: sin esto
     quedaría toda la columna A seguida y los hábitos caerían al fondo. */
  @media(max-width:1180px){
    .app{grid-template-columns:repeat(2,1fr);}
    .portal-col,.app > .portal-hero{display:contents;}
    .character-card{order:0;grid-column:1 / -1;}
    .habits-card{order:1;}
    .weekly-card{order:2;}
    .boss-card{order:3;}
    .chest-card{order:4;}
    .radar-click,.ambitos-card{order:5;}
    .chart-card,.pending-card{order:6;}
    .vision-card,.porque-card,.identity-card,.ifthen-card{order:7;}
    .portal-summary{order:8;}
    .app > .locked-card{order:9;}
    /* Fuera de sus columnas, las tarjetas recuperan su alto natural. */
    /* Fuera de sus columnas las tarjetas recuperan alto natural y sin scroll:
       en móvil se desplaza la página, no cada tarjeta. */
    .portal-col-a > .radar-click,
    .portal-col-a > .ambitos-card,
    .portal-col-b > .habits-card,
    .portal-col-c > .boss-card{display:block;overflow:visible;}
    .portal-col{height:auto;min-height:0;overflow:visible;}
    .portal-col-c > .boss-card > .boss-art svg{max-height:none;height:150px;}
  }
  /* Tablet/móvil: el menú vuelve a overlay y todo pasa a una sola columna. */
  @media(max-width:900px){
    :root{--sidebar-w:0px;}
    body{padding:20px 14px 130px;}
    .app{grid-template-columns:1fr;}
  }
  @media(max-width:600px){
    .character-card{grid-template-columns:1fr;text-align:center;}
    .avatar-col{margin:0 auto;}
    .forma-next{align-self:center;}
    .summary-grid{grid-template-columns:repeat(2,1fr);}
    .vision-grid{grid-template-columns:repeat(2,1fr);}
    .name-row{justify-content:center;}
  }
  @media(max-width:420px){
    .goal-sub-grid{grid-template-columns:1fr;}
    .identity-tab{font-size:11px;padding:10px 2px;}
  }