/*
 * Base de la app web (ADR 0018 §7). Reemplaza el reset que Expo pone en línea (la CSP no permite
 * estilos en línea) y acomoda la página alrededor de la app:
 *   - la app ocupa siempre toda la ventana; en tablets y computadoras se acomoda sola (menú al
 *     costado y columna centrada, `src/design-system/layout`);
 *   - en la computadora (1024 px o más), las pantallas de cuenta (entrar, registro, términos, setup;
 *     `html[data-layout='account']`, lo pone la app) van a la derecha y a la izquierda queda la marca:
 *     el azul con la roseta de la presentación, el logo, la frase y, desde 1360 px, el pasaporte.
 * Todo quieto a propósito. Las fuentes de la app se declaran aquí, con los mismos nombres que en
 * `tokens.ts` (W7): expo-font las agregaba con un <style> en línea, que la CSP no permite.
 * `web:build` copia cada archivo de `/fonts/` desde su paquete de @expo-google-fonts.
 */
@font-face {
  font-family: 'Nunito_700Bold';
  src: url('/fonts/Nunito_700Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito_800ExtraBold';
  src: url('/fonts/Nunito_800ExtraBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Figtree_400Regular';
  src: url('/fonts/Figtree_400Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Figtree_500Medium';
  src: url('/fonts/Figtree_500Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Figtree_600SemiBold';
  src: url('/fonts/Figtree_600SemiBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Figtree_700Bold';
  src: url('/fonts/Figtree_700Bold.ttf') format('truetype');
  font-display: swap;
}
:root {
  --frame-field: #0a63c9;
  --frame-on-field: #ffffff;
  --frame-on-field-muted: #dceafd;
  --frame-line: rgba(255, 255, 255, 0.4);
  --frame-shadow: rgba(3, 20, 52, 0.5);
  --frame-cover: #0b2c5f;
  --frame-cover-edge: #071e42;
  --frame-cover-line: rgba(255, 255, 255, 0.14);
  --frame-foil: #ffd02e;
  --frame-paper: #f5f8fe;
  --frame-paper-edge: #dce4f0;
  --frame-crease: rgba(0, 0, 0, 0.32);
  --frame-chip: #ffffff;
  --frame-chip-ink: #0b1220;
  --frame-scroll: rgba(11, 18, 32, 0.28);
  /* El fondo de la app (`bg` de tokens.ts): mientras la app carga y detrás de ella. */
  --app-bg: #f2f5fa;
  /* Ancho de las pantallas de cuenta junto a la marca: el formulario (480 px) con aire a los lados. */
  --account-panel: clamp(520px, 36vw, 640px);
  --brand-area: calc(100vw - var(--account-panel));
  --frame-display:
    'Nunito_800ExtraBold', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --frame-body: 'Figtree_400Regular', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --frame-body-medium:
    'Figtree_500Medium', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --frame-field: #0a3e80;
    --frame-on-field-muted: #c9dbf4;
    --frame-shadow: rgba(0, 0, 0, 0.6);
    --frame-cover: #0a2550;
    --frame-cover-edge: #061733;
    --frame-scroll: rgba(232, 238, 248, 0.3);
    --app-bg: #0a0e15;
  }
}

html,
body {
  height: 100%;
  margin: 0;
}

/*
 * La app maneja su propio scroll (ScrollView); el documento no se desplaza. Sin "tirar para actualizar"
 * de Chrome en Android: recargaría la página en medio de una lección.
 */
body {
  overflow: hidden;
  overscroll-behavior: none;
  /* expo-system-ui pinta el fondo del body desde la app: el de la página manda. */
  background: var(--app-bg) !important;
  -webkit-tap-highlight-color: transparent;
}

#root {
  display: flex;
  flex: 1;
  height: 100%;
}

/*
 * Barras de scroll de la app: finas, sin flechas y del color de la app. La barra clásica de escritorio
 * se veía cortada por las esquinas redondeadas de la tarjeta y no parecía una app.
 */
#root,
#root * {
  scrollbar-width: thin;
  scrollbar-color: var(--frame-scroll) transparent;
}

/*
 * Los campos de texto ya muestran el foco con su borde azul de 2 px (TextField): sin el contorno
 * cuadrado de Chrome, que dibujaba un segundo borde dentro del redondeado. Los botones conservan el
 * contorno del navegador para quien navega con el teclado.
 */
#root input:focus,
#root textarea:focus {
  outline: none;
}

/* ---------- La marca junto a las pantallas de cuenta (solo en la computadora) ---------- */
.frame,
.frame-object {
  display: none;
}
.frame-defs {
  position: absolute;
  width: 0;
  height: 0;
}

@media (min-width: 1024px) {
  html[data-layout='account'] body {
    background: var(--frame-field) url('/guilloche.svg') 30% center / 160vmax no-repeat !important;
  }
  html[data-layout='account'] .frame {
    display: block;
  }
  html[data-layout='account'] #root {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: var(--account-panel);
    background: var(--app-bg);
    box-shadow:
      -1px 0 0 var(--frame-line),
      -32px 0 72px -40px var(--frame-shadow);
  }

  .frame-brand {
    position: fixed;
    z-index: 1;
    top: 28px;
    left: max(40px, env(safe-area-inset-left, 0px));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--frame-on-field);
    font: 1.375rem/1 var(--frame-display);
    text-decoration: none;
  }
  .frame-brand svg {
    width: 36px;
    height: 36px;
  }

  .frame-links {
    position: fixed;
    z-index: 1;
    bottom: 24px;
    left: max(40px, env(safe-area-inset-left, 0px));
    display: flex;
    gap: 18px;
    font: 0.875rem/1.4 var(--frame-body-medium);
  }
  .frame-links a {
    color: var(--frame-on-field-muted);
    text-underline-offset: 0.2em;
  }

  .frame-copy {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: max(56px, env(safe-area-inset-left, 0px));
    width: min(26rem, calc(var(--brand-area) - 112px));
    transform: translateY(-50%);
    color: var(--frame-on-field);
  }
  .frame-title {
    margin: 0 0 0.5em;
    font: clamp(2rem, 2.7vw, 3.1rem) / 1.04 var(--frame-display);
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .frame-text {
    margin: 0;
    max-width: 22rem;
    color: var(--frame-on-field-muted);
    font: 1.0625rem/1.5 var(--frame-body);
    text-wrap: pretty;
  }

  /* El pasaporte de la portada, quieto, en la mitad derecha de la marca. */
  .frame-object {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: calc(var(--brand-area) / 2);
    width: calc(var(--brand-area) / 2);
    height: 520px;
    margin-top: -260px;
    perspective: 1100px;
  }
  .frame-rig {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transform: rotateY(-14deg) rotateX(6deg);
  }
  .frame-passport {
    --pp-w: clamp(170px, 15vw, 230px);
    --t: calc(var(--pp-w) * 0.045);
    position: relative;
    width: var(--pp-w);
    height: calc(var(--pp-w) * 1.42);
    font-size: calc(var(--pp-w) / 21);
    transform-style: preserve-3d;
    transform: rotateY(-10deg) rotateZ(-5deg);
  }
  .frame-passport > span {
    position: absolute;
    display: block;
  }
  .frame-passport .pp-back {
    inset: 0;
    border-radius: 0.35em 0.8em 0.8em 0.35em;
    background: var(--frame-cover-edge);
    transform: translateZ(calc(var(--t) / -2));
    box-shadow: 0 1.4em 2.6em -0.8em var(--frame-shadow);
  }
  .frame-passport .pp-spine {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--t);
    border-radius: 0.3em;
    background: var(--frame-cover-edge);
    transform-origin: left center;
    transform: translateZ(calc(var(--t) / -2)) rotateY(-90deg);
  }
  .frame-passport .pp-edge {
    top: 0.3em;
    bottom: 0.3em;
    left: calc(100% - 0.2em);
    width: var(--t);
    background: repeating-linear-gradient(
      90deg,
      var(--frame-paper-edge) 0 1px,
      var(--frame-paper) 1px 2.5px
    );
    transform-origin: left center;
    transform: translateZ(calc(var(--t) / 2)) rotateY(90deg);
  }
  .frame-passport .pp-front {
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    justify-items: center;
    align-items: center;
    padding: 1.7em 1.2em 1.5em;
    border-radius: 0.35em 0.8em 0.8em 0.35em;
    background: var(--frame-cover);
    color: var(--frame-foil);
    box-shadow:
      inset 0.5em 0 0.8em -0.45em var(--frame-crease),
      inset 0 0 0 1px var(--frame-cover-line);
    transform: translateZ(calc(var(--t) / 2 + 0.5px));
  }
  .pp-word {
    padding-left: 0.34em;
    font: 0.86em/1 var(--frame-body-medium);
    letter-spacing: 0.34em;
    text-transform: uppercase;
  }
  .pp-emblem {
    width: 56%;
    height: auto;
  }
  .pp-name {
    font: 2.15em/1 var(--frame-display);
  }
  .pp-chipmark {
    width: 2.6em;
    height: auto;
    margin-top: 0.9em;
  }
  .frame-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    padding: 0.5em 0.85em 0.5em 1.25em;
    border-radius: 0.6em;
    white-space: nowrap;
    background: var(--frame-chip);
    color: var(--frame-chip-ink);
    font: 1rem/1 var(--frame-display);
    box-shadow: 0 0.8em 1.5em -0.6em var(--frame-shadow);
  }
  .frame-chip::before {
    content: '';
    position: absolute;
    left: 0.48em;
    top: 50%;
    width: 0.34em;
    height: 0.34em;
    margin-top: -0.17em;
    border-radius: 50%;
    background: var(--frame-field);
  }
  .frame-chip-hola {
    transform: translate(-50%, -50%) translate3d(-120px, -150px, 60px) rotateZ(-6deg);
  }
  .frame-chip-chau {
    transform: translate(-50%, -50%) translate3d(130px, -110px, -60px) rotateZ(5deg);
  }
  .frame-chip-cachai {
    transform: translate(-50%, -50%) translate3d(140px, 120px, 80px) rotateZ(-4deg);
  }
}

.frame a:focus-visible {
  outline: 3px solid var(--frame-foil);
  outline-offset: 3px;
  border-radius: 6px;
}

/* El pasaporte con sus globos ocupa unos 400 px: entra junto a la frase desde 1360 px. */
@media (min-width: 1360px) {
  html[data-layout='account'] .frame-object {
    display: block;
  }
  .frame-copy {
    width: min(30rem, calc(var(--brand-area) / 2 - 80px));
  }
}