/* ============================================
   ELETEK — Modo día
   El panel nació oscuro (styles.css). Este archivo solo redefine los tokens
   y los pocos colores que styles.css tiene escritos a mano, todo bajo
   [data-theme="light"]. Así styles.css queda igual y el modo noche no cambia.
   El botón y la elección guardada están en js/components/tema.js.
   ============================================ */

:root { color-scheme: dark; }

/* Colores de cifras del tablero (también en modo noche, para no escribirlos
   a mano en dashboard.js) */
:root {
  --dato-azul:  #60a5fa;
  --dato-verde: #4ade80;
  --dato-ambar: #fbbf24;
  --dato-rojo:  #f87171;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-base:       #f3f5fa;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8fafd;
  --bg-elevated:   rgba(15,23,42,0.05);
  --bg-input:      #ffffff;

  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-glow:   rgba(37,99,235,0.18);
  --accent-soft:   rgba(37,99,235,0.08);
  --accent-border: rgba(37,99,235,0.35);

  /* El celeste original no se lee sobre blanco */
  --teal:          #0e7490;
  --teal-soft:     rgba(14,116,144,0.10);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;

  --border:        rgba(15,23,42,0.10);
  --border-hover:  rgba(15,23,42,0.20);
  --border-accent: rgba(37,99,235,0.45);
  --glass-border:  rgba(15,23,42,0.10);

  --status-online:  #16a34a;
  --status-offline: #dc2626;
  --status-pending: #d97706;
  --status-sent:    #2563eb;
  --status-done:    #16a34a;
  --status-error:   #dc2626;

  --grad-surface: linear-gradient(180deg, rgba(37,99,235,0.04) 0%, transparent 100%);
  /* Va en un ::before encima del contenido de la tarjeta: tiene que ser transparente */
  --grad-card:    linear-gradient(135deg, rgba(37,99,235,0.015) 0%, transparent 100%);

  --shadow-sm:      0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:      0 4px 14px rgba(15,23,42,0.08);
  --shadow-lg:      0 12px 32px rgba(15,23,42,0.12);
  --shadow-glow:    0 0 24px rgba(37,99,235,0.10);
  --shadow-glow-sm: 0 0 10px rgba(37,99,235,0.12);

  --dato-azul:  #1d4ed8;
  --dato-verde: #15803d;
  --dato-ambar: #b45309;
  --dato-rojo:  #b91c1c;
}

/* ── Colores que styles.css tiene escritos a mano ── */
[data-theme="light"] .navbar        { background: rgba(255,255,255,0.88); }
[data-theme="light"] .login-card    { background: rgba(255,255,255,0.94); }
[data-theme="light"] .modal         { background: #ffffff; }
[data-theme="light"] .modal-overlay { background: rgba(15,23,42,0.45); }
[data-theme="light"] .toast         { background: rgba(255,255,255,0.97); }
[data-theme="light"] .form-select option { background: #ffffff; color: #0f172a; }

[data-theme="light"] .btn:hover::after  { background: rgba(15,23,42,0.04); }
[data-theme="light"] .btn:active::after { background: rgba(15,23,42,0.08); }
[data-theme="light"] .btn-primary:hover::after  { background: rgba(255,255,255,0.08); }

[data-theme="light"] .btn-danger       { background: rgba(220,38,38,0.08); color: #b91c1c; border-color: rgba(220,38,38,0.30); }
[data-theme="light"] .btn-danger:hover { background: rgba(220,38,38,0.14); color: #991b1b; border-color: rgba(220,38,38,0.45); }

[data-theme="light"] .vessel-slug,
[data-theme="light"] .vessel-badge-none { background: rgba(15,23,42,0.05); }
[data-theme="light"] .vessel-badge      { color: #1d4ed8; }
[data-theme="light"] .tab:hover         { background: rgba(15,23,42,0.04); }
[data-theme="light"] .operators-table td { border-bottom-color: rgba(15,23,42,0.07); }
[data-theme="light"] .empty-state       { border-color: rgba(15,23,42,0.15); }

/* Estados: mismo tinte de fondo, texto más oscuro para que se lea */
[data-theme="light"] .status-online,
[data-theme="light"] .status-done      { color: #15803d; }
[data-theme="light"] .status-offline,
[data-theme="light"] .status-error     { color: #b91c1c; }
[data-theme="light"] .status-pending   { color: #b45309; }
[data-theme="light"] .status-sent      { color: #1d4ed8; }

[data-theme="light"] .command-type-create_user .command-type-icon { color: #15803d; }
[data-theme="light"] .command-type-delete_user .command-type-icon { color: #b91c1c; }
[data-theme="light"] .command-type-update_user .command-type-icon { color: #1d4ed8; }
[data-theme="light"] .command-type-reset_quota .command-type-icon { color: #b45309; }
[data-theme="light"] .command-type-raw_command .command-type-icon { color: #7c3aed; }
[data-theme="light"] .command-script        { color: #3730a3; }
[data-theme="light"] .command-result-done   { color: #15803d; }
[data-theme="light"] .command-result-error,
[data-theme="light"] .form-error,
[data-theme="light"] .form-label .required,
[data-theme="light"] .login-error           { color: #b91c1c; }

[data-theme="light"] .toast-success { color: #15803d; }
[data-theme="light"] .toast-error   { color: #b91c1c; }
[data-theme="light"] .toast-info    { color: #1d4ed8; }

[data-theme="light"] ::-webkit-scrollbar-thumb       { background: rgba(15,23,42,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.28); }

/* ── Botón ── */
.tema-toggle { font-size: 1rem; line-height: 1; padding-inline: 10px; }
.tema-flotante { position: fixed; top: 16px; right: 16px; z-index: 50; }