/* ════════════════════════════════════════════════════════════════════
   Sofía — Marco de ESCRITORIO (v13.28 → v13.29)              módulo aparte

   Roberto (2026-09-10): "en el celu se ve hermosa, pero en la computadora
   sobra mucho espacio". Causa: toda la app es UNA columna de 460px
   centrada; todas las reglas @media eran "achicar en pantalla chica",
   ninguna "aprovechar la pantalla grande". Este archivo agrega solo lo
   segundo, y NO toca el celular: por debajo de 960px no cambia nada.

   v13.29 — Roberto rechazó la primera versión (dos columnas independientes:
   "desproporción, unos recuadros a la izquierda y otros a la derecha, la
   imagen chica"). Al hacer scroll la columna izquierda se vaciaba y la
   derecha seguía: se veía descompensado. Ahora es el esquema de su otra
   app: UNA columna centrada y ancha, con una tarjeta de bienvenida
   horizontal arriba (Sofía grande a la izquierda; saludo, botón, última
   charla y meta a la derecha) y debajo las tarjetas en filas simétricas
   (las de modos, de a dos). Nada queda colgado de un lado.

   Cómo funciona (sin JS, sin tocar lógica):
   - La portada tiene dos envoltorios: .esc-izq (la bienvenida) y .esc-der
     (misión, progreso, repaso, modos, llamada, desayuno, pie). En el
     celular son `display:contents` (transparentes: el flujo es el de
     siempre). En la PC, .esc-izq es la tarjeta horizontal y .esc-der la
     grilla de a dos.
   - El menú inferior pasa a ser una barra superior con la marca.
   - Las pantallas de texto (resumen, viaje, perfil) ganan ancho de lectura
     y aire arriba para no quedar bajo la barra.
   - Cascada: este archivo se carga ANTES del <style> del monolito, así que
     con igual especificidad pierde; lo que pisa reglas del monolito o de
     welcome-hero.css lleva un selector más específico (#id o .esc-izq).

   Testeado en tests/e2e/14-escritorio.spec.mjs (1366×768 y 390×844).
   ════════════════════════════════════════════════════════════════════ */
.esc-izq,.esc-der{display:contents;}

@media (min-width:960px){
  /* ── Portada: una columna ancha y centrada ── */
  #screen-welcome.screen{justify-content:flex-start;padding:96px 32px 56px;}
  #screen-welcome .welcome-inner{max-width:1040px;padding-bottom:40px;}
  .esc-izq,.esc-der{display:block;min-width:0;}

  /* ── La tarjeta de bienvenida: Sofía grande a la izquierda, lo tuyo a la derecha ── */
  .esc-izq{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:44px;align-items:center;
    background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:34px 40px 30px;
    box-shadow:0 14px 40px rgba(31,36,48,.07);}
  .esc-izq > .wb-face{grid-column:1;grid-row:1 / span 3;margin:0;}
  .esc-izq > .wb-head{grid-column:2;grid-row:1;margin:0 0 6px;}
  .esc-izq > .btn-start{grid-column:2;grid-row:2;margin-top:0 !important;font-size:17px;padding:18px;}
  .esc-izq > .welcome-stats{grid-column:2;grid-row:3;}
  /* Lo demás que caiga en la bienvenida (foco, tarjetas de módulos) va abajo, a lo ancho. */
  .esc-izq > :not(.wb-face):not(.wb-head):not(.btn-start):not(.welcome-stats){grid-column:1 / -1;}
  #screen-welcome .esc-izq .wb-face-ph{width:220px;height:220px;}
  #screen-welcome .esc-izq .wb-face-ph::before{inset:-8px;filter:blur(1px);opacity:.5;}   /* el halo, más discreto en pantalla grande */
  #screen-welcome .esc-izq .wb-face-ph .wb-online{bottom:14px;right:22px;width:24px;height:24px;}
  #screen-welcome .esc-izq .wb-face-nm{font-size:28px;margin-top:16px;}
  #screen-welcome .esc-izq .wb-face-role{font-size:14px;}
  #screen-welcome .esc-izq .wb-hi b{font-size:30px;}

  /* ── Debajo: las tarjetas en filas. Las de modos de a dos, lo ancho a lo ancho ── */
  .esc-der{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;align-items:start;}
  .esc-der > *{margin-top:0 !important;min-width:0;}
  .esc-der > .mission-card,.esc-der > #wb-progress,.esc-der > #srs-card,.esc-der > #talk-card,
  .esc-der > #ws-row,.esc-der > #cfg-call,.esc-der > #brk-sfc,.esc-der > .app-foot,
  .esc-der > #onb-paso{grid-column:1 / -1;}
  .esc-der > #cfg-call .section-label{margin-top:8px !important;}

  /* ── Menú: de la base del celular a la barra superior de la PC ── */
  #wb-nav{top:0;bottom:auto;max-width:none;height:64px;border-radius:0;border-top:none;
    border-bottom:1px solid rgba(255,255,255,.08);justify-content:center;gap:6px;padding:0 24px;
    box-shadow:0 6px 26px rgba(12,16,36,.18);}
  #wb-nav::before{content:'Sofía';position:absolute;left:32px;top:50%;transform:translateY(-50%);
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;color:#fff;}
  #wb-nav a{flex:0 0 auto;flex-direction:row;gap:8px;height:40px;padding:0 16px;align-self:center;
    border-radius:10px;font-size:13.5px;}
  #wb-nav a svg{width:19px;height:19px;}
  #wb-nav a:hover{background:rgba(255,255,255,.06);}
  #wb-nav a.act::before{top:auto;bottom:-12px;border-radius:3px 3px 0 0;}

  /* ── Las otras pantallas: aire arriba (la barra) y ancho de lectura ── */
  body:not(.in-call) #screen-summary,
  body:not(.in-call) #screen-journey,
  body:not(.in-call) #screen-profile,
  body:not(.in-call) #screen-precall{padding-top:92px;padding-bottom:48px;}
  #screen-summary .sum-inner,#screen-journey .jr-inner{max-width:680px;}
  #screen-profile .welcome-inner{max-width:640px;padding-bottom:32px;}
}