/* responsive.css — tablet y escritorio (oct 2026).
   Se carga DESPUÉS de styles.css. Todo vive dentro de media queries de 768px o más:
   en celular (<768px) este archivo no cambia nada. Para revertir: quitar su <link> de index.html.

   · 768–1023px (tablet vertical): misma nav inferior, contenido más ancho, cuadrículas más densas.
   · 1024px+ (escritorio y tablet horizontal): nav lateral izquierda + contenido centrado.
   Las pantallas sin nav (onboarding, diagnóstico, prácticas, cuentas) NO se tocan aquí. */

/* ───────── Tablet (768–1023) ───────── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #app:has(.hs-nav) { max-width: 760px; }
  .hs-world-body, .hs-hq-body { max-width: 720px; }
  .hs-nav { max-width: 720px; }
  .hs-nav-btn { min-height: 72px; }
  .hs-nav-icon { font-size: 1.7rem; }
  .hs-nav .hs-nav-label, .hs-nav--hq .hs-nav-label { font-size: .82rem; }
  .hs-skgrid { grid-template-columns: repeat(4, 1fr); }
}

/* ───────── Escritorio y tablet horizontal (1024+) ───────── */
@media (min-width: 1024px) {
  :root { --side-w: 232px; }

  /* Ancho del contenido por vista (lo usan cuerpo, encabezado y selector de hijo). */
  .hs-screen.hs-world, .hs-screen.hs-hq { --main-w: 760px; }
  .hs-screen.hs-world--adventure { --main-w: 640px; }
  .hs-screen.hs-world--explore, .hs-screen.hs-hq--skills, .hs-screen.hs-hq--home { --main-w: 1040px; }

  /* Con nav lateral, la app ocupa todo el ancho menos la barra. */
  #app:has(.hs-nav) {
    max-width: none; margin: 0;
    padding-left: calc(var(--side-w) + var(--gutter)); padding-right: var(--gutter);
  }
  .hs-world-body, .hs-hq-body { max-width: var(--main-w, 760px); width: 100%; padding-bottom: 48px; }
  .hs-hq-header, .hs-childswitch { max-width: var(--main-w, 760px); width: 100%; margin-left: auto; margin-right: auto; }

  /* Nav → barra lateral fija */
  .hs-nav {
    left: 0 !important; right: auto; top: 0; bottom: 0; transform: none !important;
    width: var(--side-w); max-width: none; flex-direction: column; gap: 4px;
    padding: 24px 14px 20px; border-top: 0; border-right: 1px solid var(--line);
    background: var(--bg); backdrop-filter: none; overflow-y: auto;
  }
  .hs-nav-btn {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 14px;
    min-height: 52px; padding: 0 14px; text-align: left;
  }
  .hs-nav-btn:last-child { margin-top: auto; }                         /* "Para papás" / "Para niño" al fondo */
  .hs-nav-icon { font-size: 1.45rem; display: inline-flex; }
  .hs-nav .hs-nav-label, .hs-nav--hq .hs-nav-label { font-size: .98rem; max-width: none; }
  .hs-nav-btn.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); }
  .hs-nav-btn.is-active .hs-nav-icon { background: none; padding: 0; }
  .hs-nav-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .hs-nav-btn:not(.is-active):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}

/* Cuadrículas de habilidades: 7 por fila = cada necesidad en una línea (las 21 a la vista) */
@media (min-width: 1024px) {
  .hs-skgrid { grid-template-columns: repeat(7, 1fr); }
}

/* Papá · Inicio: dos columnas */
@media (min-width: 1024px) {
  .hs-hq--home .hs-hq-body {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--space-lg); row-gap: var(--space); align-items: start; align-content: start;
  }
  .hs-hq--home .hs-hq-body > * { grid-column: 1; }
  .hs-hq--home .hs-hq-body > .hs-eyebrow { grid-column: 1 / -1; }
  .hs-hq--home .hs-hq-body > .hs-famhome { grid-column: 2; grid-row: 2 / span 8; }
}

/* Dock del avatar ("Yo"): ya no hay nav abajo; se centra sobre el contenido */
@media (min-width: 1024px) {
  .hs-av-dock { bottom: 0; left: calc(50% + var(--side-w) / 2); width: min(100%, 560px); }
}

/* ───────── Fase B · Mundo del papá (1024+) ───────── */
@media (min-width: 1024px) {
  .hs-screen.hs-hq--plan, .hs-screen.hs-hq--learn { --main-w: 1040px; }

  /* Perfil / reporte: una sola columna, como una hoja de papel (ver bloque 'Hoja de papel' abajo) */
  .hs-screen.hs-hq--perfil { --main-w: 860px; }

  /* Plan y Aprendizaje: tarjetas en 2 columnas (el encabezado ocupa todo el ancho) */
  .hs-hq--plan .hs-hq-body, .hs-hq--learn .hs-hq-body {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space); row-gap: var(--space); align-items: start; align-content: start;
  }
  .hs-hq--plan .hs-hq-body > .hs-eyebrow, .hs-hq--plan .hs-hq-body > p { grid-column: 1 / -1; }
  .hs-hq--learn .hs-hq-body > :not(.hs-guidecard), .hs-hq--learn .hs-hq-body > .hs-guidecard--found { grid-column: 1 / -1; }
}

/* ───────── Hoja de papel: el reporte (Perfil del papá y reporte del onboarding) ───────── */
@media (min-width: 768px) {
  .hs-hq--perfil .hs-report-embed, .hs-screen--report {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(31,42,68,.06), 0 24px 48px -28px rgba(31,42,68,.38);
    padding: clamp(28px, 4.5vw, 56px) clamp(24px, 5vw, 64px);
  }
  .hs-screen--report { max-width: 820px; margin: 0 auto; }
  #app:has(.hs-screen--report):not(:has(.hs-nav)) { max-width: 900px; }
}

/* ───────── Fase C · Mundo del niño ───────── */
@media (min-width: 768px) {
  .hs-extras-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ───────── Fase D · Onboarding, diagnóstico, prácticas y cuentas (sin nav) ───────── */
@media (min-width: 768px) {
  #app:not(:has(.hs-nav)) { max-width: 640px; }
  #app:has(.hs-screen--report):not(:has(.hs-nav)) { max-width: 900px; }   /* gana por especificidad al de arriba */
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACABADO PREMIUM (tablet y escritorio, 768px+) — no toca el celular.
   Idea: una barra lateral de tinta azul noche (lo memorable), un lienzo claro y
   tranquilo, tarjetas blancas con borde fino y sombra suave, títulos grandes a la
   izquierda en vez de etiquetas en mayúsculas, y texto con aire (sin justificar).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --paper: #F3F5F1;                       /* lienzo: gris salvia casi blanco (antes crema) */
    --pm-side: #1B2644;                     /* tinta de la barra */
    --pm-hair: rgba(31, 42, 68, .08);
    --pm-shadow: 0 1px 1px rgba(23, 32, 54, .04), 0 2px 6px rgba(23, 32, 54, .03), 0 22px 40px -26px rgba(23, 32, 54, .26);
    --pm-title: 700 clamp(1.7rem, 1.25rem + 1vw, 2.15rem)/1.12 var(--font);
  }
  html, body { background: var(--paper); }

  /* ── Títulos de vista: grandes, a la izquierda, sin mayúsculas ── */
  #app[data-world] .hs-hq-body > .hs-eyebrow, #app[data-world] .hs-hq-body > .hs-hq-h2, #app[data-world] .hs-world-body > .hs-hq-h2 {
    font: var(--pm-title); letter-spacing: -.03em; text-transform: none; text-align: left; color: var(--ink); margin: 6px 0 0;
  }
  #app[data-world] .hs-world-body > h1.hs-title { font: var(--pm-title); letter-spacing: -.03em; text-align: left; color: var(--ink); margin: 6px 0 0; }
  #app[data-world] .hs-world-body > h1.hs-title small, #app[data-world] .hs-world-body > h1.hs-title span { font-size: .55em; letter-spacing: 0; color: var(--ink-soft); font-weight: 600; }
  .hs-hq-lead, .hs-hq-body > p.hs-body, .hs-world-body > p.hs-body {
    text-align: left; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; max-width: 62ch; margin: 0 0 6px;
  }
  /* Etiquetas dentro de tarjetas: frase normal, no mayúsculas espaciadas */
  #app[data-world] .hs-famhome .hs-eyebrow, #app[data-world] .hs-hqplay-tx .hs-eyebrow, #app[data-world] .hs-world-body .hs-eyebrow {
    text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 650;
  }
  #app[data-world] .hs-famhome .hs-eyebrow { text-align: left; color: var(--ink); font-size: 1.08rem; font-weight: 700; }
  .hs-guidecard-eyebrow { text-transform: none; letter-spacing: 0; font-size: .82rem; }

  /* ── Encabezado del mundo del papá ── */
  #app[data-world] .hs-hq-header { border-bottom: 0; padding: 8px 0 22px; margin-bottom: 0; }
  .hs-hq-back { border: 1px solid var(--pm-hair); border-radius: 50%; box-shadow: var(--pm-shadow); }
  .hs-hq-backlabel { color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
  @media (hover: hover) { .hs-hq-backlabel:hover { color: var(--ink); } }

  /* ── Tarjetas del papá: blancas, borde fino, sin el relieve "arcade" ── */
  #app[data-world="parent"] .hs-card, #app[data-world="parent"] .hs-plan-item, #app[data-world="parent"] .hs-rcard {
    border: 1px solid var(--pm-hair); border-bottom-width: 1px; border-radius: 20px; box-shadow: var(--pm-shadow);
  }
  #app[data-world="parent"] .hs-rcard--accent { border-left: 4px solid var(--need, var(--brand)); }
  .hs-plan-item { margin-top: 0; }
  .hs-guidecard { padding: 24px; margin-bottom: 0; }
  .hs-guidecard-title { font-size: 1.15rem; letter-spacing: -.01em; }
  .hs-guidecard .hs-guidecard-overview, .hs-guidecard .hs-acc-body, .hs-retrato-p, .hs-rcard-body, .hs-rlead, .hs-rskill-body, .hs-explainer-body p {
    text-align: left; hyphens: manual; -webkit-hyphens: manual;
  }
  .hs-guidecard .hs-guidecard-overview { line-height: 1.7; }

  /* ── Inicio del papá ── */
  .hs-hqhero { border-radius: 28px; padding: 32px 34px 34px; margin-top: 4px;
    box-shadow: 0 34px 56px -34px var(--need), 0 2px 4px rgba(23, 32, 54, .06); }
  .hs-hqhero-chip { font: 600 .84rem var(--font); letter-spacing: 0; text-transform: none; background: rgba(255,255,255,.2); padding: 6px 14px; }
  .hs-hqhero-title { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; margin-top: 18px; }
  .hs-hqhero-sub { font-size: 1.08rem; font-weight: 500; line-height: 1.5; max-width: 40ch; }
  .hs-hqplay { margin-top: 0; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--pm-hair);
    border-left: 4px solid var(--need-security); box-shadow: var(--pm-shadow); }
  #app[data-world] .hs-hqplay-tx .hs-eyebrow { color: var(--brand-dark); text-align: left; }
  .hs-hqplay-txt { font-size: 1.18rem; line-height: 1.45; letter-spacing: -.01em; }

  /* ── Paneles de habilidades (cada necesidad) ── */
  .hs-skgrp { margin-top: 0; background: #fff; border: 1px solid var(--pm-hair); border-radius: 26px; padding: 26px 26px 16px; box-shadow: var(--pm-shadow); }
  .hs-skgrp + .hs-skgrp { margin-top: 18px; }
  .hs-skgrp-hd { margin: 0 2px 16px; }
  .hs-skgrp-name { font: 700 1.2rem var(--font); letter-spacing: -.02em; }

  /* ── Hoja de papel (reporte) ── */
  .hs-hq--perfil .hs-report-embed, .hs-screen--report {
    border: 1px solid var(--pm-hair); border-radius: 14px; box-shadow: var(--pm-shadow); padding: clamp(32px, 5vw, 64px) clamp(28px, 6vw, 76px);
  }
  .hs-report-title { text-align: left; font: var(--pm-title); letter-spacing: -.03em; color: var(--ink); margin: 0 0 14px; padding-bottom: 20px; border-bottom: 1px solid var(--pm-hair); }
  .hs-screen--report .hs-retrato-p, .hs-report-embed .hs-retrato-p { font-size: 1.06rem; line-height: 1.75; max-width: 66ch; }
  .hs-rcard-body { line-height: 1.7; }

  /* ── Extras (niño) ── */
  .hs-extra-card { border-radius: 22px; padding: 20px; }
}

/* ── Barra lateral de tinta (1024+) ── */
@media (min-width: 1024px) {
  :root { --side-w: 248px; }
  #app[data-world] .hs-nav {
    background: linear-gradient(185deg, #1E2A4B 0%, #151D36 100%); border: 0;
    box-shadow: 28px 0 56px -36px rgba(15, 22, 41, .55); padding: 30px 14px 22px; gap: 3px; backdrop-filter: none;
  }
  .hs-nav::before {
    content: "HappySeeds"; display: block; margin: 0 0 30px; padding: 6px 0 6px 52px; min-height: 40px; font: 800 1.45rem/28px var(--font); letter-spacing: -.035em; color: #fff;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='10' fill='%2342D16F'/%3E%3Cpath d='M16 25c-5 0-8-3.400-8-8 4.500 0 6.800 1.200 8 3.400 1.200-5.600 4-9 8-10-.2 8-2.800 14.600-8 14.600z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 14px center / 36px 36px;
    padding-left: 64px;
  }
  #app[data-world] .hs-nav-btn { position: relative; color: rgba(255,255,255,.62); border-radius: 13px; min-height: 48px; font-weight: 600; transition: background .15s, color .15s; }
  #app[data-world] .hs-nav-btn .hs-i-stroke { stroke: currentColor; }
  #app[data-world] .hs-nav-btn .hs-i-fill { fill: currentColor; }
  #app[data-world] .hs-nav-icon { flex: 0 0 26px; width: 26px; height: 26px; justify-content: center; align-items: center; }
  #app[data-world] .hs-nav-icon .hs-icon { width: 22px; height: 22px; }
  #app[data-world] .hs-nav-btn.is-active { color: #fff; background: rgba(255,255,255,.1); }
  #app[data-world] .hs-nav-btn.is-active .hs-nav-icon { color: var(--brand); background: none; padding: 0; }
  #app[data-world] .hs-nav-btn.is-active::before {
    content: ""; position: absolute; left: -14px; top: 50%; width: 4px; height: 24px; margin-top: -12px; border-radius: 0 4px 4px 0; background: var(--brand);
  }
  #app[data-world] .hs-nav-btn:last-child {          /* cambiar de mundo: botón aparte, con borde */
    margin-top: auto; color: #fff; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  }
  #app[data-world] .hs-nav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Encabezado del mundo del niño: solo las estadísticas, a la derecha (el logo ya está en la barra) */
  .hs-world > .hs-brand { width: 100%; max-width: var(--main-w, 760px); margin-left: auto; margin-right: auto; flex-direction: row; justify-content: flex-end; align-items: center; gap: 14px; padding: 14px 0 12px;
    background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); }
  .hs-world > .hs-brand .hs-brand-top { display: flex; width: auto; order: 2; }
  .hs-world > .hs-brand .hs-brand-top .hs-logo, .hs-world > .hs-brand .hs-topslot:not(.hs-topslot--right) { display: none; }
  .hs-world > .hs-brand .hs-stats-row { order: 1; }
  .hs-stat { border: 1px solid var(--pm-hair); box-shadow: var(--pm-shadow); font-weight: 700; padding: 6px 14px; }
}

/* ── Barra inferior flotante de tinta (tablet vertical, 768–1023) ── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #app[data-world] .hs-nav {
    bottom: 16px; width: min(640px, calc(100% - 48px)); border: 0; border-radius: 26px; padding: 6px 10px;
    background: #1B2644; backdrop-filter: none; box-shadow: 0 24px 44px -18px rgba(15, 22, 41, .6);
  }
  #app[data-world] .hs-nav-btn { color: rgba(255,255,255,.6); border-radius: 18px; min-height: 64px; }
  #app[data-world] .hs-nav-btn .hs-i-stroke { stroke: currentColor; }
  #app[data-world] .hs-nav-btn .hs-i-fill { fill: currentColor; }
  #app[data-world] .hs-nav-btn.is-active { color: #fff; background: rgba(255,255,255,.1); }
  #app[data-world] .hs-nav-btn.is-active .hs-nav-icon { color: var(--brand); background: none; padding: 0; }
  .hs-world-body, .hs-hq-body { padding-bottom: calc(var(--nav-h) + 72px); }
}