/*
   ==========================================================================
   TIPOGRAFÍA GLOBAL — PLAN B
   Reglas base para body y h1-h6 usando tokens de variables.css.
   Enfoque mobile-first: tamaños fluidos, smoothing, tracking refinado.
   ==========================================================================
*/

/* Outfit self-hosted — elimina la petición a fonts.googleapis.com */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../webfonts/outfit/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../webfonts/outfit/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* variables.css inlined — eliminates render-blocking @import chain */
:root {
  --primary-red: #ff0000;
  --primary-red-hover: #eb030e;
  --accent-coral: hsl(9, 93%, 71%);
  --accent-gold: #ffbc11;
  --accent-cyan: #75e3f7;
  --bg-white: #ffffff;
  --bg-black: #000000;
  --bg-dark-gray: #131313;
  --bg-dark-soft: rgba(5, 5, 5, 0.877);
  --bg-card: rgba(255, 255, 255, 0.008);
  --bg-overlay: rgba(0, 0, 0, 0.95);
  --bg-input: #000000;
  --text-white: #ffffff;
  --text-white-soft: rgba(255, 255, 255, 0.9);
  --text-gray-light: #cccccc;
  --text-gray-medium: #888888;
  --text-gray-dark: #737373;
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-placeholder: #b4c1c4;
  --status-active: hsl(110, 100%, 50%);
  --status-inactive: #ff0000;
  --status-check: #00ff00;
  --status-error: #ff0000;
  --status-completed: #4ade80;
  --status-completed-glow: rgba(74, 222, 128, 0.15);
  --status-completed-gradient: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #16a34a 100%);
  --btn-whatsapp: #098104;
  --btn-llamar: #af085c;
  --border-gray: rgb(82, 82, 82);
  --border-dark: #444444;
  --border-light: rgba(255, 255, 255, 0.35);
  --card-border-hover: rgba(249, 249, 249, 0.9);
  --font-primary: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:    0em;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --h1-size: clamp(1.5rem,   5vw + 0.5rem,  2.5rem);
  --h2-size: clamp(1.25rem,  4vw + 0.25rem, 2rem);
  --h3-size: clamp(1.0625rem,3vw + 0.25rem, 1.5rem);
  --h4-size: clamp(0.9375rem,2vw + 0.5rem,  1.25rem);
  --h5-size: clamp(0.875rem, 1.5vw + 0.5rem,1.0625rem);
}

/* --- Render optimizado (especialmente en OLED y retina de móvil) --- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; /* Evita que iOS escale texto al rotar */
}

/* --- Body --- */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);       /* 16 px — mínimo seguro para zoom en iOS */
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
}

/* --- Cabeceras --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  margin: 0;
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--h2-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
}

h3 {
  font-size: var(--h3-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

h4 {
  font-size: var(--h4-size);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

h5 {
  font-size: var(--h5-size);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
}

h6 {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-wide);   /* h6 como label/overline */
  text-transform: uppercase;
}

/* --- Párrafos --- */
p {
  line-height: var(--lh-relaxed);   /* 1.65 — más aire en líneas largas */
  letter-spacing: var(--ls-normal);
}

/* --- Texto auxiliar --- */
small  { font-size: var(--text-xs); }
strong { font-weight: var(--fw-bold); }

/* --- Labels y tags (texto en mayúsculas) --- */
.label,
label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/* --- Código / monoespaciado --- */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ==========================================================================
   FUNDAMENTOS RESPONSIVE
   Este archivo es el único CSS que cargan las 18 páginas, así que es el sitio
   donde vive lo transversal. Lo específico de cada pantalla va en su propio
   archivo usando estos tokens.
   ========================================================================== */

:root {
  /* Área táctil mínima. 44px es el mínimo con el que un dedo acierta sin
     precisión; por debajo el usuario falla y vuelve a intentarlo, que en un
     botón de pago significa dudar de si el toque se registró.
     Se aplica con `min-block-size`/`::after`, NO agrandando el elemento
     visible: el diseño no cambia, solo la zona que responde al dedo. */
  --tap-min: 44px;
  --tap-min-compact: 40px;   /* controles en fila densa (chips, filtros) */

  /* Área segura del recorte de pantalla (notch, isla, indicador de inicio).
     Los env() valen 0 en cualquier navegador sin recorte Y en iOS mientras el
     meta viewport no lleve `viewport-fit=cover` — que es lo que se añadió a
     las páginas junto con estos tokens. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* --- Alto de ventana estable en móvil ---
   `100vh` en móvil es el alto CON la barra de URL retraída, así que un layout
   de 100vh queda más alto que la pantalla mientras la barra está visible: la
   página nace con scroll y el contenido centrado aparece descolocado. `dvh`
   sigue el alto real. Se declara como token con respaldo para que un navegador
   sin `dvh` (Safari < 15.4) se quede en el comportamiento actual en vez de
   perder la altura. */
:root { --vh-full: 100vh; }
@supports (height: 100dvh) {
  :root { --vh-full: 100dvh; }
}

/* --- Zoom de iOS al enfocar un campo ---
   Safari de iOS amplía la página cuando el campo que recibe el foco mide menos
   de 16px, y NO la devuelve al salir: el usuario se queda con la página
   ampliada y con scroll horizontal en mitad de un formulario. Es del sistema
   operativo, no hay evento que lo cancele — la única forma de evitarlo es que
   el campo mida 16px.

   Va bajo `pointer: coarse` para no engordar los formularios densos del panel
   de admin en escritorio, donde el problema no existe.

   ⚠️ La especificidad se deja en selector de ELEMENTO (0,0,1) a propósito, y
   eso la vuelve solo una red de seguridad para los campos sin clase: cualquier
   regla con clase la gana. Subirla (p.ej. con `:not([type=…])`, que suma) haría
   que también pisara los campos que declaran un tamaño MAYOR — el código de
   verificación de `validarPin`/`registro` mide 24px y quedaría en 16.
   Los campos que hoy están por debajo se corrigen en su propio archivo, con
   `max(16px, …)`, para que el valor de escritorio siga siendo visible ahí. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* Suelo de tamaño para los campos que declaran el suyo por clase o id, donde
   la red de arriba no llega. Se usa así:

       font-size: max(15px, var(--field-fs-min));

   En escritorio el token vale 0 y gana el valor propio (15px); en un
   dispositivo táctil vale 16px y gana el suelo. Una sola media query para
   todo el proyecto, y el tamaño de escritorio sigue leyéndose en su archivo. */
:root { --field-fs-min: 0px; }
@media (pointer: coarse) {
  :root { --field-fs-min: 16px; }
}

/* --- Utilidad de área táctil ---
   Extiende la zona sensible al toque hasta `--tap-min` sin tocar la caja
   visible ni el flujo del layout: el pseudo-elemento se centra sobre el
   control y crece hacia afuera. Para elementos que ya reservan sitio
   suficiente, subir el padding es preferible; esto es para los iconos y
   enlaces pequeños de barras densas, donde agrandarlos rompería la fila. */
.tap-safe { position: relative; }
.tap-safe::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  width: 100%;
  height: 100%;
}