/* ─────────────────────────────────────────────────────────────
   Design Tokens — Gowy
   Fuente de verdad de todas las variables CSS del proyecto.
   Modo oscuro = modo por defecto de la app móvil (brand guidelines).
───────────────────────────────────────────────────────────── */

:root {
  /* ── Marca GOWY v3 — Electric Cyan (valores fijos, no semánticos) ── */
  --gowy-primary:      #00F0FF;   /* Electric Cyan — color principal de marca */
  --gowy-primary-dark: #00D6E6;   /* Hover / estados activos */
  --gowy-primary-light:#66F7FF;   /* Hover claro / badges */
  --gowy-primary-rgb:  0,240,255; /* Para usos rgba() puntuales */
  --gowy-navy:         #101524;   /* Azul profundo — fondo principal dark */
  --gowy-gray-dark:    #334155;   /* Gris oscuro */
  --gowy-gray-mid:     #6B7280;   /* Gris medio — placeholders, labels */
  --gowy-gray-light:   #F3F4F6;   /* Gris claro — fondos light mode */
  --gowy-white:        #FFFFFF;   /* Blanco puro */
  --gowy-primary-tint: #CCFBFF;   /* Cyan claro — badges/pills (light) */
  --gowy-success:      #22C55E;   /* Verde — reservado solo para éxito/aceptado/completado */
  --gowy-lavender:     #EDE9FE;   /* Lila — estados especiales */

  /* ── Escala de cyan (badges, gradientes, tints puntuales) ── */
  --cyan-50:  #E6FDFF;
  --cyan-100: #CCFBFF;
  --cyan-200: #99F8FF;
  --cyan-300: #66F7FF;
  --cyan-400: #33F4FF;
  --cyan-500: #00F0FF;
  --cyan-600: #00D6E6;
  --cyan-700: #00B6C2;
  --cyan-800: #008E99;
  --cyan-900: #006770;

  /* ── Colores semánticos (DARK por defecto) ───────────────── */
  --color-primary:      #00F0FF;                   /* CTA / acento de marca */
  --color-primary-dark: #00D6E6;                   /* hover del primario */
  --color-on-primary:   var(--gowy-gray-mid);       /* texto/íconos sobre el CTA cyan (cyan es muy claro para blanco o navy) */
  --color-on-surface:   #FFFFFF;                   /* texto primario */
  --color-background:   #101524;                   /* fondo de página */
  --color-surface:      #171C2C;                   /* cards y paneles */
  --color-surface-2:    #1D2336;                   /* superficie elevada */
  --color-border:       rgba(255,255,255,0.08);    /* bordes y divisores */
  --color-border-hover: rgba(0,240,255,0.35);       /* borde en hover */
  --color-border-focus: rgba(0,240,255,0.60);       /* borde en focus */
  --color-secondary:    rgba(255,255,255,0.72);    /* texto secundario */
  --color-muted:        rgba(255,255,255,0.45);    /* placeholders, subtítulos */
  --color-disabled:     rgba(255,255,255,0.28);    /* texto deshabilitado */
  --color-success:      #22C55E;
  --color-warning:      #F59E0B;
  --color-error:        #EF4444;
  --color-info:         #3B82F6;

  /* Overlays neutros theme-aware (chrome: botones ghost, hovers, pills) */
  --overlay-soft:   rgba(255,255,255,0.06);
  --overlay-strong: rgba(255,255,255,0.10);

  /* Fondos de estado interactivo (hover / active) */
  --bg-hover:  #272B42;
  --bg-active: #2F3450;

  /* Tints translúcidos para badges/fondos de estado en dark */
  --tint-primary: rgba(0,240,255,0.10);
  --tint-success: rgba(34,197,94,0.12);
  --tint-warning: rgba(245,158,11,0.14);
  --tint-error:   rgba(239,68,68,0.14);
  --tint-info:    rgba(59,130,246,0.14);

  /* Alerta/banner de error en formularios (.form-feedback--danger) — NO
     reemplaza --color-error (#EF4444, sigue siendo el rojo "puro" de
     badges/dots). Solo dark mode: overrides al look anterior en .light. */
  --color-error-text:    #FDBA74;               /* coral/naranja claro — texto del mensaje */
  --color-error-surface: rgba(251,146,60,.12);  /* fondo del panel, tinte coral sobre navy */
  --color-error-border:  rgba(253,164,175,.25); /* borde sutil */

  /* Sombras / glow de marca */
  --shadow-cyan-sm: 0 0 8px rgba(0,240,255,0.18);
  --shadow-cyan-md: 0 0 16px rgba(0,240,255,0.28);
  --shadow-cyan-lg: 0 0 30px rgba(0,240,255,0.42);

  /* Gradientes de marca */
  --gradient-primary: linear-gradient(135deg, #66F7FF 0%, #00F0FF 55%, #00B6C2 100%);
  --gradient-button:  linear-gradient(180deg, #33F4FF 0%, #00D6E6 100%);

  /* Focus ring accesible */
  --focus-ring: 0 0 0 3px rgba(0,240,255,0.30);

  /* Logo */
  --logo-white:  #FFFFFF;
  --logo-accent: #00F0FF;

  /* ── Tokens de superficie (alias del brand guide) ────────── */
  --bg-primary:     #101524;
  --bg-secondary:   #171C2C;
  --bg-card:        #1D2336;
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.72);
  --text-tertiary:  rgba(255,255,255,0.45);
  --text-disabled:  rgba(255,255,255,0.28);
  --border:         rgba(255,255,255,0.08);
  --border-hover:   rgba(0,240,255,0.35);
  --border-focus:   rgba(0,240,255,0.60);
  --accent:         #00F0FF;

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', 'Nunito', sans-serif;
  --font-body:    'DM Sans', 'Inter', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Escala tipográfica */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-hero: 48px;

  /* ── Espaciado ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Sombras (sutiles sobre fondo oscuro) ────────────────── */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .35), 0 1px 2px -1px rgb(0 0 0 / .30);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / .45), 0 2px 6px -2px rgb(0 0 0 / .35);

  /* ── Transiciones ────────────────────────────────────────── */
  --ease-base: all 0.2s ease;
  --ease-soft: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Modo claro (web / landing) ──────────────────────────────
   Aplicar con <html class="light"> o <body class="light">.        */
.light, .theme-light {
  --color-on-surface: #0F172A;
  --color-background: #F1F5F9;   /* Fondo de página — los paneles (--color-surface) siguen en blanco */
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F3F4F6;
  --color-border:     #E5E7EB;
  --color-secondary:  #6B7280;
  --color-muted:      #9CA3AF;
  /* --color-on-primary ya es --gowy-gray-mid (#6B7280) por defecto — mismo valor en light y dark. */

  --bg-primary:     #F1F5F9;
  --bg-secondary:   #F3F4F6;
  --bg-card:        #FFFFFF;
  --text-primary:   #0F172A;
  --text-secondary: #6B7280;
  --text-tertiary:  #9CA3AF;
  --border:         #E5E7EB;

  --overlay-soft:   rgba(15,23,42,0.045);
  --overlay-strong: rgba(15,23,42,0.08);

  --tint-primary: rgba(0,240,255,0.10);
  --tint-success: #E7F9ED;
  --tint-warning: #FEF3C7;
  --tint-error:   #FEE2E2;
  --tint-info:    #DBEAFE;

  /* Alerta/banner de error — el estilo coral nuevo es solo para dark mode;
     en light se conserva el look que ya existía (tint rojo). */
  --color-error-text:    #FCA5A5;
  --color-error-surface: #FEE2E2;
  --color-error-border:  rgba(239,68,68,0.35);
}

/* ── Reset base ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
}

/* ── Anti-zoom móvil al enfocar campos (ver CLAUDE.md §36) ─────
   En pantallas táctiles, iOS Safari hace zoom automático al enfocar
   un control con font-size < 16px, lo que "mueve" la pantalla. Forzar
   ≥16px en los controles de formulario elimina ese salto sin desactivar
   el pinch-zoom del usuario (accesible). !important porque los componentes
   fijan su propio font-size (ej. var(--text-base) = 15px) con mayor
   especificidad; este piso de 16px debe ganar siempre en táctil. */
@media (pointer: coarse) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ── Utilidades globales ─────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Form feedback ───────────────────────────────────────────── */
.form-feedback {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.form-feedback--hidden {
  display: none;
}

.form-feedback--success {
  background-color: var(--tint-success);
  color: var(--color-success);
  border: 0.5px solid rgba(34,197,94,0.35);
}

.form-feedback--danger {
  background-color: var(--color-error-surface);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

.form-feedback--warning {
  background-color: var(--tint-warning);
  color: #FCD34D;
  border: 0.5px solid rgba(245,158,11,0.35);
}

/* ── Paneles por rol (Role UI) ───────────────────────────────── */
/* !important needed to beat component-level display rules (e.g. .form-card { display: flex }) */
.divAdm,
.divOpe,
.divDrv,
.divCst,
.divRdr { display: none !important; }

.role-visible { display: revert !important; }

/* ── Material Symbols config ─────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  line-height: 1;
  vertical-align: middle;
}