/* desktop.css — Capa de escritorio. Solo se activa en pantallas grandes CON puntero fino
   (mouse o trackpad), así celulares y tablets conservan exactamente el diseño actual.

   La idea: en vez de estirar la app a todo el ancho, se convierte en una columna
   centrada —legible, con el mismo ritmo vertical del móvil— apoyada sobre un lienzo
   navy, con la navegación pasada a una barra lateral. */

@media (min-width: 1024px) and (any-hover: hover) {

  :root { --col: 560px; --gap: 20px; }

  /* ── Lienzo ──
     Antes el lienzo era casi del mismo azul que los paneles navy de la app, así que el
     borde entre uno y otro se perdía. Ahora el lienzo baja mucho más oscuro y lleva su
     propia textura: una retícula tenue y dos luces que se desplazan muy lento. El
     resultado es que la columna de contenido se lee como una pieza apoyada encima, no
     como una mancha dentro de otra del mismo tono. */
  body {
    background: linear-gradient(168deg, #101D33 0%, #0A1322 52%, #101D33 100%);
    background-attachment: fixed;
  }
  /* Retícula: la máscara anterior la apagaba en los costados, que es justo donde el
     lienzo queda a la vista. Ahora se apaga en el centro —donde la columna la tapa— y
     vive en los pasillos. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(rgba(214,228,245,.085) 1px, transparent 1px),
      linear-gradient(90deg, rgba(214,228,245,.085) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, #000 0 16%, transparent 32%, transparent 68%, #000 84%);
            mask-image: linear-gradient(90deg, #000 0 16%, transparent 32%, transparent 68%, #000 84%);
  }
  body::after {
    content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(620px 880px at -2% 20%,  rgba(58,116,196,.85), transparent 62%),
      radial-gradient(560px 820px at 102% 76%, rgba(205,170,76,.62), transparent 62%),
      radial-gradient(460px 660px at 103% 6%,  rgba(58,116,196,.52), transparent 64%),
      radial-gradient(520px 760px at -3% 92%,  rgba(205,170,76,.34), transparent 64%);
    filter: blur(20px);
    animation: lienzo 42s ease-in-out infinite;
  }
  @keyframes lienzo {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(30px,-24px) scale(1.07); }
  }
  @media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

  /* ── Columna de contenido ── */
  #hdr {
    width: var(--col); margin: 0 auto; padding-left: 20px; padding-right: 20px;
    border-radius: 0 0 2px 2px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  #app {
    width: var(--col); margin: 0 auto; background: var(--smoke);
    min-height: calc(100vh - var(--hdr-h));
    padding-bottom: 34px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 34px 90px rgba(0,0,0,.55);
  }
  /* Las pantallas a dos paneles llegan hasta el borde: el relleno inferior del #app
     dejaba una franja clara al final del scroll. */
  #app:has(#s-wel.on), #app:has(#s-quiz.on) { padding-bottom: 0; }
  /* …y que la rejilla llegue siempre al borde inferior, quepa o no el contenido. */
  #s-wel.on, #s-wel.on .wel, #s-quiz.on { min-height: calc(100vh - var(--hdr-h)); }

  /* El cuestionario vive dentro de la misma columna */
  .qz-top { background: var(--smoke); }

  /* ── Navegación en el encabezado ──
     En móvil la barra inferior es lo correcto: está donde llega el pulgar. En escritorio
     no hay pulgar y una columna flotando a un costado se lee como un apéndice, así que
     la misma navegación se convierte en pestañas dentro del encabezado. El marcado es el
     mismo; en móvil sigue siendo position:fixed abajo y no se entera del cambio. */
  #bnav {
    position: static; top: auto; bottom: auto; left: auto; right: auto;
    z-index: auto; background: none; border: none; box-shadow: none;
    width: auto; flex: 1; justify-content: center;
    flex-direction: row; gap: 4px; padding: 0;
    border-radius: 0; backdrop-filter: none;
  }
  .bn {
    flex: 0 0 auto;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 9px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: rgba(214,228,245,.78);
    transition: background .15s, color .15s;
  }
  .bn .ic { font-size: 15px; margin-bottom: 0; }
  .bn:hover { background: rgba(255,255,255,.10); color: #fff; }
  .bn.on { background: var(--gold); color: var(--navy); }
  .bn.on:hover { background: var(--gold-lt); color: var(--navy); }

  /* ── Formularios: campos cortos de a dos por fila ── */
  .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

  /* ── Estados de puntero: en escritorio el hover es lo que da vida ── */
  .btn-p { transition: transform .08s, filter .12s, box-shadow .15s; }
  .btn-p:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(27,42,74,.22); }
  .btn-o:hover { background: var(--smoke) !important; }
  .qz-opt:hover { border-color: var(--sky); background: #fff; }
  .qz-opt.sel:hover { border-color: var(--gold); background: #FBF6EA; }
  .qz-card:hover { border-color: var(--sky); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,42,74,.16); }
  .qz-card.sel:hover { border-color: var(--gold); }
  .dl-chk:hover { border-color: var(--sky); }
  .dl-row.on .dl-chk:hover { border-color: var(--gold); }
  .hub-card:hover { box-shadow: 0 8px 26px rgba(27,42,74,.16); }
  .grp-h:hover { background: var(--smoke); }
  .hdr-logo:hover { opacity: .78; }
  .ses-btn-nuevo:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
  .chk:hover .bx { border-color: var(--gold); }
  a.lg-link:hover { color: var(--gold-lt); }

  /* ── Avisos ──
     Centrado abajo funciona en un teléfono, donde no hay nada más en esa franja. En
     escritorio caía justo encima del botón de enviar: el mensaje tapaba precisamente el
     control al que se refiere. Se va a la esquina superior derecha, fuera del camino de
     la columna, y entra deslizándose para que el movimiento lo delate. */
  #toast {
    top: calc(var(--hdr-h) + 18px); bottom: auto;
    left: auto; right: 24px;
    transform: translateY(-12px);
    padding: 13px 20px 13px 15px; font-size: 13px; max-width: 420px;
    box-shadow: 0 20px 44px rgba(0,0,0,.45);
    transition: opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
  }
  #toast.on { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    #toast, #toast.on { transform: none; transition: opacity .2s; }
  }
}

/* Pantallas muy anchas: la columna crece un poco para aprovechar el espacio sin
   que las líneas de texto se vuelvan incómodas de leer. */
@media (min-width: 1500px) and (any-hover: hover) {
  :root { --col: 600px; }
}

/* ── La portada no es la app: ocupa todo el ancho y sin barra superior ── */
@media (min-width: 1024px) and (any-hover: hover) {
  body:has(#s-landing.on) #hdr { display: none; }
  #app:has(#s-landing.on) {
    width: 100%; max-width: none; background: transparent;
    box-shadow: none; padding-bottom: 0; min-height: 0;
  }

  /* ── El cuestionario a dos paneles: el contexto a la izquierda, las preguntas a la
     derecha. Así el ancho de la pantalla trabaja en vez de quedar vacío. ── */
  body:has(#s-quiz.on) #hdr { width: 1080px; }
  #app:has(#s-quiz.on) { width: 1080px; }

  #s-quiz.on {
    display: grid; grid-template-columns: 300px 1fr; align-items: stretch;
    background: linear-gradient(90deg, #0D1728 0 300px, transparent 300px);
  }
  #s-quiz.on .qz-top {
    position: sticky; top: var(--hdr-h); align-self: start;
    min-height: calc(100vh - var(--hdr-h));
    background: linear-gradient(170deg, #16243E, #0D1728);
    padding: 38px 26px 30px; display: flex; flex-direction: column; gap: 20px;
  }
  #s-quiz.on .qz-steps { flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
  #s-quiz.on .qz-step-lbl { font-size: 17px; line-height: 1.32; color: #fff; }
  #s-quiz.on .qz-step-pct {
    font-family: 'DM Mono', monospace; font-size: 34px; line-height: 1;
    color: var(--gold-lt);
  }
  #s-quiz.on .qz-bar { background: rgba(255,255,255,.12); }
  #s-quiz.on .qz-dots { justify-content: flex-start; margin: 0; }
  #s-quiz.on .qz-dots i { background: rgba(255,255,255,.22); }
  #s-quiz.on .qz-dots i.done { background: var(--sky); }
  #s-quiz.on .qz-top::after {
    content: "Tus respuestas construyen tu DQ Score. No hay respuestas buenas ni malas: hay un punto de partida.";
    margin-top: auto; font-size: 11.5px; line-height: 1.6; color: rgba(214,228,245,.5);
    border-top: 1px solid rgba(255,255,255,.10); padding-top: 18px;
  }
  #s-quiz.on .qz-body { padding: 34px 38px 46px; }
  #s-quiz.on .qz-head { text-align: left; margin-bottom: 24px; }
  #s-quiz.on .qz-obj { margin-left: 0; max-width: 520px; }
  #s-quiz.on .qz-ic { font-size: 30px; }
}

/* ── Registro a dos paneles ──
   El mismo lenguaje del cuestionario: a la izquierda el contexto sobre fondo navy, a la
   derecha la tarea. Así la pantalla de datos deja de ser una columna estrecha flotando
   en un lienzo vacío y se lee como la continuación natural de la portada. */
@media (min-width: 1024px) and (any-hover: hover) {
  body:has(#s-wel.on) #hdr { width: 1080px; }
  #app:has(#s-wel.on) { width: 1080px; }

  #s-wel.on .wel {
    display: grid; grid-template-columns: 374px 1fr; align-items: stretch;
    padding: 0; text-align: left;
    /* El panel izquierdo es sticky, así que su alto no llega al final cuando el
       formulario es más largo. Esta franja pintada en el contenedor continúa su color
       hasta abajo y evita la banda clara que asomaba al final del scroll. */
    background: linear-gradient(90deg, #0D1728 0 374px, transparent 374px);
  }

  .wel-aside {
    background: linear-gradient(170deg, #16243E, #0D1728);
    padding: 46px 34px 32px; display: flex; flex-direction: column;
    position: sticky; top: var(--hdr-h); align-self: start;
    min-height: calc(100vh - var(--hdr-h));
  }
  .wel-logo { width: 62px; height: 62px; margin-bottom: 26px; }
  .wel-eyebrow {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: 2.6px;
    text-transform: uppercase; color: var(--gold-lt); margin-bottom: 12px;
  }
  .wel-h1 { font-size: 29px; line-height: 1.16; letter-spacing: -.6px; color: #fff; }
  .wel-sub { font-size: 13.5px; line-height: 1.65; color: rgba(232,238,247,.66); margin: 12px 0 0; }
  .wel-sub b { color: var(--gold-lt); }

  .wel-puntos { display: block; list-style: none; margin: 30px 0 0; padding: 0; }
  .wel-puntos li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 12.5px; line-height: 1.55; color: rgba(232,238,247,.74);
    padding: 11px 0; border-top: 1px solid rgba(255,255,255,.09);
  }
  .wel-puntos li span {
    font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700;
    color: var(--gold); flex: 0 0 auto;
  }
  .wel-pie {
    display: block; margin-top: auto; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: 10.5px; letter-spacing: .3px; color: rgba(232,238,247,.42);
  }

  .wel-form { padding: 36px 40px 44px; }
  .wel-form-ttl {
    display: block; font-size: 17px; font-weight: 700; color: var(--navy);
    margin-bottom: 18px;
  }
  /* Dentro del panel la tarjeta ya no necesita simular una tarjeta: el panel es el marco. */
  #s-wel.on .card { border: none; box-shadow: none; background: transparent; margin: 0 !important; }
  #s-wel.on .card .pad { padding: 0; }
  #s-wel.on #btn-start { width: auto; min-width: 240px; padding-left: 34px; padding-right: 34px; }
  /* La firma de marca ya vive en el panel izquierdo: abajo sobra. */
  .wel-legal { display: none; }
  /* El botón no es un campo: centrado se lee como el cierre del formulario, no como
     una fila más alineada a la izquierda. */
  #s-wel.on #btn-start { display: block; margin-left: auto; margin-right: auto; }
}

/* ── Política de datos en escritorio ──
   Un texto legal largo a todo el ancho no se lee; en una columna de móvil tampoco. Panel
   fijo con el índice a la izquierda, documento a ancho de lectura a la derecha. */
@media (min-width: 1024px) and (any-hover: hover) {
  body:has(#s-legal.on) #hdr { width: 1080px; }
  #app:has(#s-legal.on) { width: 1080px; padding-bottom: 0; }
  #s-legal.on { min-height: calc(100vh - var(--hdr-h)); }

  #s-legal.on .lg-wrap {
    display: grid; grid-template-columns: 318px 1fr; align-items: stretch;
    min-height: calc(100vh - var(--hdr-h));
    background: linear-gradient(90deg, #0D1728 0 318px, transparent 318px);
  }

  .lg-aside {
    position: sticky; top: var(--hdr-h); align-self: start;
    max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
    padding: 24px 22px 28px;
    background: linear-gradient(170deg, #16243E, #0D1728);
  }
  .lg-aside .tool-back {
    color: var(--mist); background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
    padding: 7px 13px; margin: 0 0 20px;
  }
  .lg-aside .tool-back:hover { background: rgba(255,255,255,.13); color: #fff; }
  .lg-head { padding: 0; }
  .lg-aside .h-ttl { color: #fff; font-size: 19px; line-height: 1.25; }
  .lg-aside .h-sub { color: rgba(214,228,245,.55); margin-top: 6px; }

  .lg-idx { display: block; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.10); }
  .lg-idx-i {
    display: flex; gap: 10px; align-items: baseline;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 12.5px; line-height: 1.45; color: rgba(232,238,247,.7);
    text-decoration: none; transition: color .15s;
  }
  .lg-idx-i span {
    font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--gold);
    flex: 0 0 auto;
  }
  .lg-idx-i:hover { color: #fff; }

  .lg-doc { padding: 30px 38px 40px; }
  #s-legal.on .card { border: none; box-shadow: none; background: transparent; }
  #s-legal.on .card .pad { padding: 0; max-width: 660px; }
  #s-legal.on .lg .lg-sec + .lg-sec { margin-top: 26px; padding-top: 24px; }
}

/* ── Resultado en escritorio ──
   El resultado es un informe: con más ancho, el medidor y el nivel se leen juntos y las
   barras de capacidad por fin muestran la diferencia entre un 55 y un 75. */
@media (min-width: 1024px) and (any-hover: hover) {
  /* Las pantallas de la app (ya con sesión iniciada) comparten un lienzo ancho. Antes el
     ancho tenía que dejarle sitio al rail lateral; al pasar la navegación al encabezado
     ese límite desapareció. */
  body:has(#s-cargando.on) { --col: min(1080px, calc(100vw - 36px)); }
  #app:has(#s-cargando.on) { padding-bottom: 0; }

  body:has(#s-inicio.on), body:has(#s-hub.on), body:has(#s-historial.on),
  body:has(#s-cfg.on), body:has(#s-metodo.on), body:has(#s-presupuesto.on),
  body:has(#s-datos.on), body:has(#s-retiro.on), body:has(#s-emergencia.on) {
    --col: min(980px, calc(100vw - 36px));
  }


  /* El medidor y el nivel de madurez son dos lecturas del mismo dato: juntos arriba. */
  #s-inicio.on .res-top {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    align-items: stretch; margin: 12px 14px;
  }
  #s-inicio.on .res-top .hero,
  #s-inicio.on .res-top .mad { margin: 0; }
  #s-inicio.on .res-top .hero { display: flex; flex-direction: column; justify-content: center; }
  #s-inicio.on .res-top .mad { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  #s-inicio.on .res-top .mad .num { font-size: 44px; }
  #s-inicio.on .res-top .mad .info .d { font-size: 19px; }

  /* Con más ancho, las barras de capacidad pueden decir mucho más. */
  #s-inicio.on .cap-row { padding: 11px 0; }
  #s-inicio.on .cap-row .nm { font-size: 13px; }
  #s-inicio.on .cap-row .track { width: 190px; height: 9px; }
  #s-inicio.on .cap-row .pt { font-size: 13px; width: 40px; }

  /* El cierre y la consultoría son dos mensajes distintos: lado a lado se leen como tal. */
  /* Colocación explícita: el cierre y la tarjeta de contacto comparten la primera fila
     y lo que aparece al desbloquear el Método va debajo, a lo ancho. Con colocación
     automática, esa tarjeta intermedia descolocaba todo lo que venía después. */
  #s-inicio.on .conv {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start;
  }
  #s-inicio.on .conv .cierre   { grid-column: 1; grid-row: 1; margin: 0; }
  #s-inicio.on .conv .consult  { grid-column: 2; grid-row: 1; margin: 0; }
  #s-inicio.on .conv .lead-card { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}

/* ══ Herramientas · Historial · Ajustes en escritorio ══════════════════════ */
@media (min-width: 1024px) and (any-hover: hover) {

  /* ── Herramientas ──
     Cinco tarjetas en columna obligan a bajar para ver la oferta completa; en dos
     columnas se abarca de un vistazo. La destacada ocupa el ancho entero: es la que
     debe pesar más, y partida por la mitad pesaría lo mismo que las otras. */
  #s-hub.on .hub {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    align-items: stretch; padding: 4px 18px 0;
  }
  #s-hub.on .hub-card {
    margin: 0; display: flex; flex-direction: column; padding: 18px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
  }
  #s-hub.on .hub-card.destacado { grid-column: 1 / -1; }
  #s-hub.on .hub-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(27,42,74,.14); }
  #s-hub.on .hub-top { margin-bottom: 16px; }
  #s-hub.on .hub-card .btn-p { margin-top: auto; }
  #s-hub.on .hub-ti { font-size: 15.5px; }
  #s-hub.on .hub-de { font-size: 12px; }
  #s-hub.on .hub-ic { font-size: 26px; }
  #s-hub.on .hub-note { padding-top: 14px; }

  /* ── Historial ──
     Las dos gráficas cuentan la misma historia a dos escalas: juntas se comparan, una
     debajo de otra hay que recordar la anterior. Los registros van completos abajo. */
  /* Ojo con :nth-of-type aquí: todos los hijos son <div>, así que cuenta divs, no
     tarjetas. Se usa :nth-child, que es lo que de verdad describe la posición. */
  #s-historial.on {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    align-content: start; padding: 0 18px 26px;
  }
  #s-historial.on > .pad { padding-left: 0; padding-right: 0; }
  /* Solo la gráfica y las capacidades comparten fila; encabezado, héroe, estados vacíos
     y la lista de mediciones ocupan el ancho completo. */
  #s-historial.on > .pad,
  #s-historial.on > .ev-hero,
  #s-historial.on > .empty { grid-column: 1 / -1; }
  #s-historial.on > div:last-child { grid-column: 1 / -1; }
  #s-historial.on > .card:last-of-type { grid-column: 1 / -1; }
  #s-historial.on > .card { margin-left: 0; margin-right: 0; }
  #s-historial.on .snap { padding: 13px 18px; }

  /* ── Ajustes ──
     El formulario de datos personales es lo largo; lo demás son acciones sueltas. A la
     izquierda lo que se edita, a la derecha lo que se pulsa. */
  #s-cfg.on {
    display: grid; grid-template-columns: 1.12fr 1fr; gap: 0 16px;
    align-content: start; padding: 0 18px 26px;
  }
  #s-cfg.on > .pad { padding-left: 0; padding-right: 0; }
  #s-cfg.on > :nth-child(1) { grid-column: 1 / -1; }
  #s-cfg.on > :nth-child(2) { grid-column: 1; grid-row: 2 / span 4; align-self: start; }
  #s-cfg.on > :nth-child(n+3) { grid-column: 2; }
  #s-cfg.on > .card { margin-left: 0; margin-right: 0; }
  #s-cfg.on .btn-p { width: auto; min-width: 230px; }
  #s-cfg.on .card .btn-p.btn-o { width: 100%; min-width: 0; justify-content: flex-start; }
}

/* ══ Las cuatro herramientas en escritorio ═════════════════════════════════ */
@media (min-width: 1024px) and (any-hover: hover) {

  /* ── Formularios de las calculadoras ──
     Retiro, Fondo de emergencia y el formulario del Método son listas largas de campos
     cortos: en una sola columna obligan a un scroll interminable para algo que cabe de
     sobra. Los campos pasan a dos por fila; todo lo que no es un campo —títulos, avisos,
     botones, resultados— sigue ocupando el ancho completo. */
  /* Solo las tarjetas que de verdad tienen campos: un aviso de una frase convertido en
     rejilla parte el texto en columnas y queda ilegible. */
  #s-retiro.on .card > .pad:has(.field),
  #s-emergencia.on .card > .pad:has(.field),
  #s-datos.on .grp-b:has(.field),
  #s-metodo.on .card > .pad:has(.field) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start;
  }
  #s-retiro.on .card > .pad:has(.field) > :not(.field),
  #s-emergencia.on .card > .pad:has(.field) > :not(.field),
  #s-datos.on .grp-b:has(.field) > :not(.field),
  #s-metodo.on .card > .pad:has(.field) > :not(.field) { grid-column: 1 / -1; }

  /* Las tablas pensionales por fin caben sin scroll lateral. */
  #s-retiro.on .pen-tbl { min-width: 0; font-size: 12px; }
  #s-retiro.on .pen-tbl th { font-size: 9.5px; padding: 8px 10px; }
  #s-retiro.on .pen-tbl td { padding: 8px 10px; }
  /* Los tres escenarios tienen sitio para respirar. */
  #s-retiro.on .esc-col { padding: 14px 10px; }
  #s-retiro.on .esc-v { font-size: 16px; }
  /* Los portafolios, de tres en fondo en vez de uno encima de otro. */
  #s-emergencia.on .port { flex-direction: row; flex-wrap: wrap; }
  #s-emergencia.on .port-i { flex: 1 1 240px; }

  /* ── Presupuesto ──
     Es la única que tiene dos tareas a la vez: mirar cómo va el mes y capturar los
     movimientos. A la izquierda los indicadores —termómetros y distribución—, a la
     derecha las categorías donde se escribe. Así se ve el efecto de lo que se anota sin
     tener que subir y bajar. */
  #s-presupuesto.on {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    align-content: start; padding-bottom: 26px;
  }
  #s-presupuesto.on > .tool-back,
  #s-presupuesto.on > .pad,
  #s-presupuesto.on > .mbar,
  #s-presupuesto.on > .kpis { grid-column: 1 / -1; }
  #s-presupuesto.on > .tool-back { justify-self: start; }
  #s-presupuesto.on > .tp { grid-column: 1; }
  #s-presupuesto.on > .cp { grid-column: 1; }
  #s-presupuesto.on > .fa { grid-column: 2; grid-row: 5 / span 2; align-self: start; }
  /* Los cuatro indicadores del mes, en fila. */
  #s-presupuesto.on .kpis { grid-template-columns: repeat(4, 1fr); }
  #s-presupuesto.on .mbar { padding-left: 18px; padding-right: 18px; }
  #s-presupuesto.on .tp, #s-presupuesto.on .cp { margin-left: 18px; margin-right: 0; }
  #s-presupuesto.on .fa { padding-left: 0; padding-right: 18px; }
  #s-presupuesto.on .kpis { padding-left: 18px; padding-right: 18px; }
}

/* El diagnóstico del Método: la araña y las barras dicen lo mismo de dos formas, así que
   van lado a lado. Suelta en el centro, la araña dejaba media pantalla vacía. */
@media (min-width: 1024px) and (any-hover: hover) {
  #s-metodo.on .card > .pad:has(.radar-wrap) {
    display: grid; grid-template-columns: 300px 1fr; gap: 0 24px; align-items: center;
  }
  #s-metodo.on .card > .pad:has(.radar-wrap) > .sec-ttl { grid-column: 1 / -1; }
  #s-metodo.on .radar-wrap { margin: 0; }
  #s-metodo.on .cap-row .track { width: 170px; }
}

/* ── Botones de acción secundarios ──
   Crecer un poco no basta como respuesta: el cambio es tan sutil que parece que la página
   se movió sola. Estos botones ahora responden con borde dorado, fondo tibio, el ícono
   teñido y una sombra que los levanta: queda claro cuál está bajo el cursor. */
@media (min-width: 1024px) and (any-hover: hover) {
  .btn-p.btn-o {
    transition: background .15s, border-color .15s, color .15s, box-shadow .18s, transform .1s;
  }
  .btn-p.btn-o:hover {
    background: #FBF7EC !important; border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(184,149,58,.22); transform: translateY(-1px);
  }
  .btn-p.btn-o:hover .ico { color: var(--gold); }
  .btn-p.btn-o:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(184,149,58,.18); }
  /* El de borrar responde en rojo: su acción no es reversible. */
  #btn-reset:hover {
    background: #FDF1F0 !important; border-color: var(--red);
    box-shadow: 0 6px 18px rgba(231,76,60,.20);
  }
  #btn-reset:hover .ico { color: var(--red); }
}

/* ── Entrar y crear cuenta, a dos paneles ──
   Un formulario de dos campos en una columna estrecha deja la pantalla vacía. Al lado va
   el panel animado, con el mismo reparto que el registro: contexto a la izquierda,
   la tarea a la derecha. */
@media (min-width: 1024px) and (any-hover: hover) {
  body:has(#s-login.on), body:has(#s-registro.on), body:has(#s-clave.on) {
    --col: min(1020px, calc(100vw - 36px));
  }
  #app:has(#s-login.on), #app:has(#s-registro.on), #app:has(#s-clave.on) { padding-bottom: 0; }
  #s-login.on, #s-registro.on, #s-clave.on { min-height: calc(100vh - var(--hdr-h)); }

  #s-login.on .ses, #s-registro.on .ses, #s-clave.on .ses {
    display: grid; grid-template-columns: 420px 1fr; align-items: stretch;
    min-height: calc(100vh - var(--hdr-h)); padding: 0;
    background: linear-gradient(90deg, #0D1728 0 420px, transparent 420px);
  }
  .ses-art {
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    background: linear-gradient(170deg, #16243E, #0B1424);
    padding: 44px 34px 30px;
  }
  #s-login.on .ses-caja, #s-registro.on .ses-caja, #s-clave.on .ses-caja {
    max-width: 420px; margin: auto; padding: 40px 28px;
  }
  /* El logotipo ya preside el panel de la izquierda: repetirlo encima del formulario
     duplica la marca sin añadir nada. */
  #s-login.on .ses-logo, #s-clave.on .ses-logo { display: none; }
}

/* ── Administración ──
   Es la única pantalla que no es para el usuario sino para quien atiende a decenas de
   ellos: una tabla con ocho columnas no cabe en la misma columna angosta del resto de
   la aplicación. Aquí el ancho se aprovecha porque la densidad ES la función. */
@media (min-width: 1024px) and (any-hover: hover) {
  body:has(#s-admin.on) { --col: min(1340px, calc(100vw - 36px)); }

  #s-admin.on > .pad { padding-left: 26px; padding-right: 26px; }
  #s-admin.on .adm-tabs,
  #s-admin.on #adm-cuerpo { padding-left: 26px; padding-right: 26px; }

  /* La barra de búsqueda y el exportar, uno al lado del otro y sin estirarse */
  #s-admin.on .adm-barra { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  #s-admin.on .adm-barra .btn-p { width: auto; }

  /* La tabla deja de necesitar desplazamiento lateral */
  #s-admin.on .adm-tabla-wrap { overflow-x: visible; }
  #s-admin.on .adm-tabla { min-width: 0; }
  #s-admin.on .adm-tabla th,
  #s-admin.on .adm-tabla td { padding: 12px 14px; }

  /* El formulario de generar código, en dos columnas */
  #s-admin.on .adm-gen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; align-items: start; }
  #s-admin.on .adm-gen .btn-p { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

  /* El detalle aprovecha el ancho: más columnas de bloques, no bloques más largos */
  #s-admin.on .adm-det2 { padding: 22px 26px 26px; }
  #s-admin.on .adm-bloqs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  #s-admin.on .adm-lista-i:hover { background: var(--smoke); }
  #s-admin.on .adm-ver:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
}