/* =============================================================================
 * F2R Engineering — Design System
 * Tokens semánticos para colores, espaciado, tipografía, sombras y radii.
 *
 * REGLA: El resto del CSS (header.css, components.css, manual.css, etc.) y los
 * estilos inline en JS NUNCA usan colores hex/rgb directos. Siempre vía estas
 * variables. Eso es lo que permite cambiar la paleta de marca o añadir un
 * tema (alta contraste, daltonismo, etc.) en una sola línea.
 *
 * Conservada la paleta industrial existente (#009999 teal, #1a1a1a dark,
 * #48c9b0/#f1c40f/#d83b4e estados de máquina) para no romper nada visual.
 * ============================================================================= */

:root {

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --font-main:  'Tahoma', 'Verdana', sans-serif;
  --font-tech:  'Courier New', 'Consolas', monospace;

  /* Multiplicador global de tamaño de texto. Lo ajusta `public/js/text-size.js`
   * desde el cycler del header (A−/A/A+/A++) y persiste en localStorage. A
   * escala 1.0 el HMI renderiza idéntico al diseño original — los tokens
   * --fs-* se envuelven en calc() abajo, así nada se rompe si el usuario no
   * cambia la preferencia. Pensado para pantallas pequeñas donde 10–13px
   * cuesta leer; el operador escoge su tamaño y queda fijado por dispositivo. */
  --font-scale: 1;

  --fs-xs:   calc(10px * var(--font-scale));   /* Etiquetas pequeñas, labels técnicos */
  --fs-sm:   calc(11px * var(--font-scale));   /* Labels, captions, tooltip */
  --fs-base: calc(13px * var(--font-scale));   /* Body, valores, texto general */
  --fs-md:   calc(14px * var(--font-scale));   /* Botones, inputs */
  --fs-lg:   calc(18px * var(--font-scale));   /* Títulos secundarios */
  --fs-xl:   calc(24px * var(--font-scale));   /* Títulos de pantalla, valores grandes */
  --fs-xxl:  calc(32px * var(--font-scale));   /* Display, KPIs grandes */

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold:   700;
  --fw-black:  900;

  --lh-tight: 1.2;
  --lh-base:  1.4;
  --lh-loose: 1.6;

  /* ── Espaciado (escala 4px-base) ───────────────────────────────────────── */
  --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;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* ── Transiciones ──────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;

  /* ── Z-index escalado ──────────────────────────────────────────────────── */
  --z-header:  1000;
  --z-overlay: 1500;
  --z-modal:   2000;
  --z-toast:   3000;

  /* ── PALETA BASE (modo oscuro por defecto) ─────────────────────────────── */

  /* Superficies (escala de elevación) */
  --surface-base:     #1a1a1a;   /* Body, fondo más profundo */
  --surface-raised:   #2b2b2b;   /* Paneles, cards */
  --surface-overlay:  #333333;   /* Botones, inputs, popups */
  --surface-elevated: #3a3a3a;   /* Hover, estados activos */

  /* Texto (jerarquía) */
  --text-primary:    #f8f9fa;
  --text-secondary:  #aaaaaa;
  --text-muted:      #888888;
  --text-disabled:   #555555;
  --text-inverse:    #1a1a1a;

  /* Bordes */
  --border-subtle:   #333333;
  --border-base:     #444444;
  --border-strong:   #555555;
  --border-emphasis: #666666;

  /* Acento (marca: teal industrial) */
  --accent:        #009999;
  --accent-hover:  #00b3b3;
  --accent-active: #007777;
  --accent-soft:   rgba(0, 153, 153, 0.15);

  /* Estados semánticos */
  --color-success:        #48c9b0;
  --color-success-soft:   rgba(72, 201, 176, 0.15);
  --color-success-strong: #2ecc71;

  --color-warning:        #f1c40f;
  --color-warning-soft:   rgba(241, 196, 15, 0.15);
  --color-warning-strong: #e67e22;

  --color-danger:         #d83b4e;
  --color-danger-hover:   #e32636;
  --color-danger-soft:    rgba(216, 59, 78, 0.15);
  --color-danger-strong:  #ff0000;

  --color-info:           #45a29e;
  --color-info-soft:      rgba(69, 162, 158, 0.15);
  --color-info-strong:    #2980b9;   /* azul fuerte para acciones tipo "copiar", "exportar" */

  --color-neutral:        #95a5a6;
  --color-neutral-hover:  #7f8c8d;
  --color-neutral-soft:   rgba(149, 165, 166, 0.15);

  /* Acciones industriales — semántica de posiciones físicas */
  --color-primary:         #337ab7;   /* HOME — azul, posición de origen */
  --color-primary-hover:   #2c6aa0;
  --color-secondary:       #d35400;   /* WORK — naranja, posición de trabajo */
  --color-secondary-hover: #b94800;

  /* ── Estados de movimiento / acción ──────────────────────────────── */
  /* Azul brillante usado para "movimiento en curso" (cylinder valves, badges).
   * Más vibrante que --color-info, semánticamente distinto: info es neutro,
   * moving es activo. */
  --color-moving:        #3498db;
  --color-moving-soft:   rgba(52, 152, 219, 0.15);
  --color-moving-strong: #2980b9;

  /* Roja extra: variantes para fondos sutiles del modo claro y para el modo
   * fault del visor 3D (bg muy oscuro). */
  --color-danger-light:  #ff4d4d;     /* alerta visible sobre fondo oscuro */
  --color-danger-bg:     #fee2e2;     /* badge de error en modo claro */
  --color-danger-text:   #dc2626;     /* texto rojo intenso, modo claro */
  --color-danger-glow:   #ffcccc;     /* halo / brillo suave */
  --color-danger-bg-dark:#4a0000;     /* visor 3D fault en modo oscuro */

  /* ── Escala de grises slate (modo claro / fondos con contraste) ─── */
  /* Mismas tonalidades que Tailwind slate-50..900, usadas en el modo claro
   * del header y faceplates. */
  --neutral-50:   #f8fafc;
  --neutral-100:  #e2e8f0;
  --neutral-200:  #cbd5e1;
  --neutral-300:  #bdc3c7;
  --neutral-500:  #64748b;
  --neutral-700:  #5d6771;
  --neutral-900:  #0f172a;

  /* Sombras */
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl:    0 16px 32px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-glow-accent:  0 0 12px var(--accent-soft);
  --shadow-glow-success: 0 0 12px var(--color-success-soft);
  --shadow-glow-danger:  0 0 12px var(--color-danger-soft);

  /* ── Compatibilidad hacia atrás ────────────────────────────────────────── */
  /* Mantener nombres antiguos para que el CSS existente no se rompa.
   * En migraciones futuras, ir reemplazando por los semánticos de arriba. */
  --bg-main:        var(--surface-base);
  --bg-panel:       var(--surface-raised);
  --text-main:      var(--text-primary);
  --border:         var(--border-base);
  --accent-color:   var(--accent);
  --btn-bg:         var(--surface-overlay);
  --btn-border:     var(--border-strong);
  --btn-active-bg:  var(--surface-elevated);
  --neon-glow:      var(--shadow-glow-accent);
}

/* =============================================================================
 * MODO CLARO
 * Redefine SOLO las variables que cambian. Todo el resto se hereda.
 * ============================================================================= */
body.light-mode {
  --surface-base:     #f4f7f6;
  --surface-raised:   #ffffff;
  --surface-overlay:  #f1f5f9;
  --surface-elevated: #e2e8f0;

  --text-primary:    #0f172a;
  --text-secondary:  #475569;
  --text-muted:      #64748b;
  --text-disabled:   #94a3b8;
  --text-inverse:    #ffffff;

  --border-subtle:   #e2e8f0;
  --border-base:     #cbd5e1;
  --border-strong:   #94a3b8;
  --border-emphasis: #64748b;

  --accent:        #007777;
  --accent-hover:  #009999;
  --accent-active: #005555;
  --accent-soft:   rgba(0, 119, 119, 0.15);

  --shadow-sm:    0 2px 4px rgba(15, 23, 42, 0.08);
  --shadow-md:    0 4px 8px rgba(15, 23, 42, 0.12);
  --shadow-lg:    0 8px 16px rgba(15, 23, 42, 0.16);
  --shadow-xl:    0 16px 32px rgba(15, 23, 42, 0.2);
  --shadow-inset: inset 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* =============================================================================
 * APLICACIÓN GLOBAL
 * ============================================================================= */
body {
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-main);
  /* En kiosko táctil un long-press grababa selección de texto en
     labels y etiquetas, lo que además interfería con los HOLD-to-activate
     (jog) provocando bits pegados en el PLC. Bloqueamos selección por
     defecto en TODO el HMI y la re-habilitamos sólo donde tiene sentido
     (inputs, textarea, líneas de alarmas — abajo). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Re-habilitar selección donde sí queremos copiar texto: */
input,
textarea,
[contenteditable="true"],
.cfg3d-mono,                       /* paths PLC del configurador */
.cfg3d-yaml-preview,               /* preview YAML */
pre, code,                         /* bloques de código */
.aph-row-msg,                      /* texto de alarma en histórico */
.station-banner-text,              /* mensajes activos del PLC */
.alarm-text {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

svg {
  max-width: 100%;
  max-height: 100%;
}