/* ==========================================================================
   ASOANUT · Variables de diseño (colores, tipografías, espaciados)
   Fuente: canvas opción A (estilos.css + componentes.css). Archivo propio para
   que el panel de Backend lo importe sin arrastrar el resto del CSS público.
   Requiere recursos/css/fuentes.css para las familias IBM Plex.
   ========================================================================== */
:root{
  /* Colores base (estilos.css) */
  --bg:#fff;--sup:#F4F5F7;--tinta:#111827;--sec:#4B5563;--linea:#D1D5DB;--acento:#0F4C5C;--acento-2:#E6F0F2;
  --ok:#1B6E3A;--ok-bg:#E7F3EC;--warn:#8A5A00;--warn-bg:#FBF1DC;--bad:#B42318;--bad-bg:#FDECEA;
  /* Colores añadidos (componentes.css) */
  --gris:#374151;--gris-bg:#EEF0F3;--borde-campo:#6B7280;--foco:#0F4C5C;--hover:#374151;
  /* Otros colores usados en pantallas */
  --ejemplo-fondo:#111827;--ejemplo-texto:#FDE68A;--cambio-bg:#FFF8E6;--rayado:#F3F4F6;--velo:rgba(17,24,39,.55);
  /* Tipografías */
  --fuente:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fuente-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --texto-base:17px;--texto-base-movil:16px;--interlineado:1.55;
  --h1:40px;--h1-movil:28px;--h2:22px;--h2-movil:20px;
  /* Espaciados y medidas */
  --ancho-max:1200px;--margen-lateral:40px;--margen-lateral-movil:20px;
  --esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:20px;--esp-6:24px;--esp-7:32px;--esp-8:40px;--esp-9:48px;--esp-10:56px;
  --alto-encabezado:72px;--alto-encabezado-movil:60px;--objetivo-tactil:44px;
  --foco-ancho:3px;--foco-separacion:2px;
  /* Punto de corte (referencia; en @media hay que escribir el número): celular ≤ 760px */
  --corte-movil:760px;
}