/* Simulador · la app privada (ADR 0015). Diseño D del lienzo, elegido por Gonzalo el 19/10/2026:
   estructura y letra de «Estudio» (Geist + Geist Mono, licencia OFL) con los colores de «Cristal». */

:root {
  --fondo: #F5F5F7;
  --tarjeta: #FFFFFF;
  --texto: #1D1D1F;
  --texto-2: #424245;
  --suave: #6E6E73;
  --linea: #E3E3E8;
  --linea-2: #F0F0F3;
  --campo: #D2D2D7;
  --activo: #E8E8ED;
  --azul: #0071E3;
  --azul-osc: #0066CC;
  --azul-claro: #E8F0FE;
  --azul-texto: #0B57D0;
  --verde: #1B7A3E;
  --verde-claro: #E3F4E8;
  --peligro: #C4221A;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-osc); text-decoration: none; }
a:hover { color: #004E9E; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.45); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.suave { color: var(--suave); }

/* Marca: cuatro barras de voz */
.marca { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--texto); }
.logo-cerebro { flex: none; display: block; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.boton-primario { background: var(--azul); color: #FFFFFF; }
.boton-primario:hover { background: #0062C4; color: #FFFFFF; }
.boton-secundario { background: var(--tarjeta); border-color: var(--campo); color: var(--texto); }
.boton-secundario:hover { border-color: #AEAEB2; color: var(--texto); }
.boton[disabled] { opacity: 0.55; cursor: default; }
.boton svg { flex: none; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-size: 14px; font-weight: 500; }
.campo input { height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--campo); background: var(--tarjeta); font: inherit; font-size: 15px; color: var(--texto); }
.campo input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); }

.chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px; background: var(--fondo); color: var(--texto-2); }
.chip-verde { background: var(--verde-claro); color: var(--verde); }

.inicial { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; flex: none; }
.inicial-laura { background: var(--azul-claro); color: var(--azul-texto); }
.inicial-horacio { background: #FDEBD8; color: #8A4B0F; }

/* Onda de voz decorativa */
.onda { display: flex; align-items: center; gap: 4px; height: 100px; }
.onda span { width: 5px; border-radius: 3px; background: var(--azul); }

.aviso-error { font-size: 14px; color: var(--peligro); min-height: 21px; }