/* tema.css
   -------------------------------------------------------------------
   Tokens de color de la plataforma. Son DOS ejes independientes:

     1) COLOR de acento (azul / morado / verde limón) — lo pone
        manejaPersonalizacion.js (o el bootstrap Sistema/temaGuardado.js)
        escribiendo --color-primario / --color-primario-suave inline en
        <html>.
     2) TEMA claro / oscuro — lo controla este archivo, según el
        atributo <html data-tema="oscuro">. Cuando no está el atributo,
        vale el bloque :root de abajo (claro).

   Se combinan libremente: azul+claro, azul+oscuro, morado+claro,
   morado+oscuro, verde+claro, verde+oscuro. El valor por defecto (sin
   nada guardado) es azul+claro, que es el aspecto con el que se lanzó
   el sitio.

   Se enlaza ANTES que plataforma.css / documento.css / los <style>
   embebidos, para que todos puedan usar var(--...). Junto con él va
   Sistema/temaGuardado.js como <script> bloqueante en el <head>, que
   aplica la preferencia guardada antes del primer pintado (evita el
   parpadeo claro→oscuro).
   ------------------------------------------------------------------- */

:root {
  /* Acento — por defecto azul; se pisa inline según el color elegido. */
  --color-primario: #2A6BAF;
  --color-primario-suave: #eef4fb;

  /* Superficies y texto — TEMA CLARO. */
  --fondo: #f7f7f7;         /* fondo de la página */
  --superficie: #ffffff;    /* tarjetas, barras, inputs */
  --superficie-2: #f2f2f2;  /* zonas hundidas, hover neutro */
  --texto: #1a1a1a;         /* texto principal */
  --texto-2: #555555;       /* texto secundario */
  --texto-3: #7a7a7a;       /* texto terciario, pies */
  --borde: #dcdcdc;         /* bordes de tarjetas y separadores */
  --borde-2: #999999;       /* bordes marcados (inputs) */
  --linea: #ececec;         /* separadores muy tenues */
  --sombra: rgba(0, 0, 0, 0.10);
  --sombra-2: rgba(0, 0, 0, 0.16);

  /* Cajas de aviso amarillas (guía sin terminar, notas "PENDIENTE" de
     los .md legales). */
  --aviso-fondo: #fff8e1;
  --aviso-borde: #f0d375;
  --aviso-texto: #7a5c00;
}

:root[data-tema="oscuro"] {
  /* El tinte suave por defecto (claro) no sirve en oscuro; el JS lo pisa
     con el valor correcto del color, esto es solo el respaldo. */
  --color-primario-suave: #1b2735;

  --fondo: #131519;
  --superficie: #1e2126;
  --superficie-2: #26292e;
  --texto: #e7e7e7;
  --texto-2: #a8a8a8;
  --texto-3: #7f7f7f;
  --borde: #34383e;
  --borde-2: #4c515a;
  --linea: #2a2d32;
  --sombra: rgba(0, 0, 0, 0.55);
  --sombra-2: rgba(0, 0, 0, 0.70);

  --aviso-fondo: #2a2410;
  --aviso-borde: #5c4e1e;
  --aviso-texto: #e0c877;
}

/* ===================================================================
   ACENTO "AERO" (Frutiger Aero) — degradado glossy opcional.

   Azul/Morado/Verde NUNCA definen --color-primario-degradado ni
   --velo-vidrio, así que en esos tres modos cualquier
   var(--color-primario-degradado, var(--color-primario)) cae siempre en
   el color plano de siempre (cero cambio visual) y var(--velo-vidrio,
   none) cae en `none`. Solo cuando manejaPersonalizacion.js /
   temaGuardado.js ponen <html data-color="aero"> (el 4º color del
   selector de Personalización) estas dos variables toman un valor real
   y los botones/barras de relleno sólido y las tarjetas planas
   (.boton-plataforma, .boton-checkbox.activo, .burbuja-principal,
   .burbuja, .tarjeta-login, .tarjeta-cuenta, los botones de las barras
   de herramientas del editor, etc.) se ven glossy — MISMO layout, solo
   cambia el acabado de color. Reusa la misma familia de aguamarina del
   tileset de iconos que ya se hizo para la plataforma.
   =================================================================== */
:root[data-color="aero"] {
  --color-primario-degradado: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.16) 16%, #3fb8c9 45%, #128299 78%, #0b5c6c 100%);
  /* --superficie es blanca en modo claro: un brillo blanco-sobre-blanco
     no se vería, así que el "vidrio" lleva un matiz aguamarina (el
     acento en muy baja opacidad) además del destello blanco superior. */
  --velo-vidrio: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(63,184,201,0.28) 4%, rgba(63,184,201,0.10) 30%, rgba(63,184,201,0) 65%);
}

:root[data-color="aero"][data-tema="oscuro"] {
  --color-primario-degradado: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.06) 18%, #2fa0b8 46%, #0f6478 78%, #073640 100%);
  --velo-vidrio: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(63,184,201,0.22) 8%, rgba(63,184,201,0.07) 32%, rgba(63,184,201,0) 65%);
}

/* ===================================================================
   BASE PARA CELULAR / APP INSTALADA (PWA)
   Reglas mínimas que valen para TODAS las páginas (este archivo se
   enlaza en todas). Los ajustes de layout propios de cada pantalla
   viven en su <style> o en plataforma.css / documento.css.
   =================================================================== */

/* iOS "infla" el tamaño de letra de algunos bloques al girar el
   teléfono o en ciertas vistas; con esto el texto se ve igual que en
   el diseño. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 900px) {
  /* Safari en iPhone hace zoom automático al enfocar un campo cuya
     letra mide menos de 16px, y deja la página descuadrada. Se fuerza
     16px en pantallas chicas SOLO en campos de escritura. Lleva
     !important a propósito: varios <style> de página fijan 14px con un
     selector de clase (más específico que este). No afecta casillas,
     interruptores, deslizadores ni el selector de color. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}