/* ==========================================================================
   Temas del portal (claro / oscuro), como en IRM.

   El tema lo decide el atributo `data-theme` de <html> ("dark" u omitido = claro),
   que pone un script en el <head> antes de pintar (preferencia en localStorage
   `perseo-theme`) y cambia el boton de la barra de navegacion.

   CSS plano, fuera del build de Tailwind; se enlaza DESPUES de output.css y
   croco.css. Como no va en ninguna capa (@layer), gana a las utilidades de
   Tailwind sin necesidad de !important.

   Como funciona el tema oscuro sin tocar las plantillas:
     1. Tailwind v4 pinta sus utilidades con variables de paleta
        (`.bg-gray-200 { background-color: var(--color-gray-200) }`): aqui se
        redefine la PALETA (grises invertidos, tintes pastel apagados) y las
        ~1000 clases de color de las plantillas cambian solas.
     2. `bg-white` pasa a color de panel; `text-white` NO se toca (va sobre
        botones de color).
     3. Las superficies que ya eran oscuras en el tema claro (tooltips y bloques
        `bg-gray-800/900`) recuperan dentro la paleta original.
     4. El kit Croco (croco.css) usa sus propias variables: aqui van sus valores
        oscuros, los de IRM.
     5. Los colores que el JS pone en linea (pastillas de estado) salen de las
        variables `--pill-*` y similares, definidas aqui para los dos temas.
   ========================================================================== */

/* ---- Variables propias: valores del tema CLARO ---- */
:root {
  /* Pastillas de estado pintadas desde JS (agentes, endpoints, usuarios, inventario): fondo / texto. */
  --pill-gray-bg: #f3f4f6;   --pill-gray-fg: #374151;
  --pill-blue-bg: #dbeafe;   --pill-blue-fg: #1e40af;
  --pill-indigo-bg: #e0e7ff; --pill-indigo-fg: #3730a3;
  --pill-green-bg: #dcfce7;  --pill-green-fg: #166534;
  --pill-teal-bg: #ccfbf1;   --pill-teal-fg: #115e59;
  --pill-yellow-bg: #fef9c3; --pill-yellow-fg: #854d0e;
  --pill-amber-bg: #fef3c7;  --pill-amber-fg: #92400e;
  --pill-orange-bg: #ffedd5; --pill-orange-fg: #9a3412;
  --pill-red-bg: #fee2e2;    --pill-red-fg: #991b1b;
  --pill-purple-bg: #f3e8ff; --pill-purple-fg: #6b21a8;
  --pill-green-border: #bbf7d0;
  --pill-blue-border: #dbeafe;
  /* Texto apagado de un valor por defecto / separadores puestos desde JS. */
  --soft: #9ca3af;
  --softer: #d1d5db;
  /* Series de las graficas de metricas (uPlot, metrics_modal.js), paleta tipo Grafana. */
  --chart-1: #2f9e44; --chart-2: #e8590c; --chart-3: #1c7ed6;
  /* Sin rojos: el rojo de las graficas se reserva para las alertas (umbral saltado) */
  --chart-4: #9c36b5; --chart-5: #5f3dc4; --chart-6: #0c8599;
  --chart-grid: rgba(0, 0, 0, 0.07);
}

/* El tema oscuro solo existe en pantalla: al imprimir (informe de equipo) sale siempre en claro. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* ---- Kit Croco (mismos valores que IRM) ---- */
    --bg: #0b121b;
    --card: #121b26;
    --menu-bg: #1d2a3a;
    --fg: #e6edf3;
    --muted: #8b98a5;
    --accent: #2f81f7;
    --error: #f85149;
    --border: #24303c;
    --input-bg: #0a1019;
    /* Tooltips del kit: gris mas claro que el fondo (#0b121b) y las tarjetas, o no se distinguen */
    --tip-bg: #2a3747;
    --tip-fg: #e6edf3;
    --overlay-bg: rgba(4, 7, 11, 0.72);
    --row-border: rgba(36, 48, 60, 0.7);
    --row-hover: rgba(47, 129, 247, 0.08);
    --table-row-hover: rgba(47, 129, 247, 0.14);
    --table-head-bg: #182230;
    --ok: #3fb950;
    --warn: #d29922;
    --page-active-bg: #323c48;
    /* Series de las graficas de metricas: los colores de Grafana en oscuro */
    --chart-1: #73bf69; --chart-2: #ff9830; --chart-3: #5794f2;
    --chart-4: #b877d9; --chart-5: #fade2a; --chart-6: #8ab8ff;
    --chart-grid: rgba(255, 255, 255, 0.07);

    /* ---- Paleta de grises de Tailwind, invertida (fondos claros -> oscuros, texto oscuro -> claro) ---- */
    --color-gray-50: #0b121b;
    --color-gray-100: #162029;
    --color-gray-200: #1b2733;
    --color-gray-300: #2c3a4a;
    --color-gray-400: #6b7a89;
    --color-gray-500: #8b98a5;
    --color-gray-600: #a9b4bf;
    --color-gray-700: #c5cfd9;
    --color-gray-800: #dbe3ea;
    --color-gray-900: #e6edf3;

    /* ---- Tintes pastel (fondos de avisos y pastillas): apagados sobre el color de panel ---- */
    --color-red-50: color-mix(in srgb, #ef4444 12%, #121b26);
    --color-red-100: color-mix(in srgb, #ef4444 22%, #121b26);
    --color-red-200: color-mix(in srgb, #ef4444 34%, #121b26);
    --color-green-100: color-mix(in srgb, #22c55e 20%, #121b26);
    --color-green-200: color-mix(in srgb, #22c55e 32%, #121b26);
    --color-blue-100: color-mix(in srgb, #3b82f6 24%, #121b26);
    --color-blue-200: color-mix(in srgb, #3b82f6 36%, #121b26);
    --color-purple-100: color-mix(in srgb, #a855f7 24%, #121b26);
    --color-amber-100: color-mix(in srgb, #f59e0b 22%, #121b26);
    --color-orange-50: color-mix(in srgb, #f97316 12%, #121b26);

    /* ---- Tonos 800/900 (texto sobre los tintes de arriba): claros ---- */
    --color-red-800: #fca5a5;
    --color-red-900: #fecaca;
    --color-green-800: #86efac;
    --color-blue-800: #93c5fd;
    --color-purple-800: #d8b4fe;
    --color-amber-800: #fcd34d;

    /* ---- Pastillas pintadas desde JS ---- */
    --pill-gray-bg: #1f2b38;   --pill-gray-fg: #c5cfd9;
    --pill-blue-bg: color-mix(in srgb, #3b82f6 26%, #121b26);   --pill-blue-fg: #93c5fd;
    --pill-indigo-bg: color-mix(in srgb, #6366f1 28%, #121b26); --pill-indigo-fg: #a5b4fc;
    --pill-green-bg: color-mix(in srgb, #22c55e 22%, #121b26);  --pill-green-fg: #86efac;
    --pill-teal-bg: color-mix(in srgb, #14b8a6 22%, #121b26);   --pill-teal-fg: #5eead4;
    --pill-yellow-bg: color-mix(in srgb, #eab308 20%, #121b26); --pill-yellow-fg: #fde047;
    --pill-amber-bg: color-mix(in srgb, #f59e0b 22%, #121b26);  --pill-amber-fg: #fcd34d;
    --pill-orange-bg: color-mix(in srgb, #f97316 22%, #121b26); --pill-orange-fg: #fdba74;
    --pill-red-bg: color-mix(in srgb, #ef4444 24%, #121b26);    --pill-red-fg: #fca5a5;
    --pill-purple-bg: color-mix(in srgb, #a855f7 24%, #121b26); --pill-purple-fg: #d8b4fe;
    --pill-green-border: color-mix(in srgb, #22c55e 40%, #121b26);
    --pill-blue-border: color-mix(in srgb, #3b82f6 40%, #121b26);
    --soft: #6b7a89;
    --softer: #3a4756;
  }

  :root[data-theme="dark"] body { color: var(--fg); }

  /* `bg-white` = panel. `text-white` se queda blanco (texto sobre botones de color). */
  :root[data-theme="dark"] .bg-white { background-color: var(--card); }
  :root[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--menu-bg); }

  /* Superficies que YA eran oscuras en el tema claro (tooltips `peer-hover`, bloques de codigo, botones grises):
     dentro recuperan la paleta de grises original, para verse igual que siempre. */
  :root[data-theme="dark"] :is(.bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900, .tooltip) {
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
  }
  /* Un tooltip oscuro sobre fondo oscuro necesita borde para despegarse. */
  :root[data-theme="dark"] :is(.bg-gray-800, .bg-gray-900).shadow-lg { outline: 1px solid #3a4756; }
  :root[data-theme="dark"] .ct-tooltip { border-color: #45556a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); }

  /* Texto de color en tonos 500-700: demasiado oscuro sobre fondo oscuro. (Los 600/700 no se cambian en la paleta
     porque tambien son el fondo de los botones.) */
  :root[data-theme="dark"] :is(.text-blue-500, .text-blue-600, .hover\:text-blue-600:hover) { color: #60a5fa; }
  :root[data-theme="dark"] :is(.text-red-500, .text-red-600, .text-red-700) { color: #f87171; }
  :root[data-theme="dark"] :is(.text-green-500, .text-green-600, .text-green-700) { color: #4ade80; }
  :root[data-theme="dark"] .text-amber-600 { color: #fbbf24; }
  :root[data-theme="dark"] .text-yellow-500 { color: #facc15; }
  /* Dentro de una superficie oscura de siempre (tooltip), los tonos claros originales. */
  :root[data-theme="dark"] :is(.bg-gray-800, .bg-gray-900) :is(.text-red-500, .text-red-600) { color: #f87171; }

  /* Botones definidos en input.css cuyo hover usa un tono que la paleta ha invertido. */
  :root[data-theme="dark"] .btn-danger:hover { background-color: #991b1b; }
  :root[data-theme="dark"] .btn-primary:disabled { background-color: color-mix(in srgb, #3b82f6 35%, #121b26); color: #8b98a5; }
  :root[data-theme="dark"] :is(.btn-secondary, .btn-cancel) { background-color: #2c3a4a; color: #dbe3ea; }
  :root[data-theme="dark"] :is(.btn-secondary, .btn-cancel):hover { background-color: #3a4a5c; }
  /* Cancelar del modal del kit (color fijo en croco.css). */
  :root[data-theme="dark"] .ct-modal-cancelar { background: #2c3a4a; color: #dbe3ea; }
  :root[data-theme="dark"] .ct-modal-cancelar:hover { background: #3a4a5c; }

  /* Campos de formulario: fondo propio para que no hereden el blanco del navegador ni el panel. */
  :root[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    background-color: var(--input-bg);
    color: var(--fg);
    border-color: var(--border);
  }
  :root[data-theme="dark"] :is(input, textarea)::placeholder { color: #6b7a89; }
  :root[data-theme="dark"] :is(input, select, textarea):disabled { background-color: #162029; color: #8b98a5; }
  :root[data-theme="dark"] [contenteditable="true"] { background-color: var(--input-bg); color: var(--fg); }

  /* Sombras: sobre fondo oscuro la sombra gris casi no se ve; un borde fino marca los paneles. */
  :root[data-theme="dark"] :is(.shadow, .shadow-lg, .shadow-xl).bg-white { outline: 1px solid var(--border); outline-offset: -1px; }

  /* Iconos MONOCROMOS que van como <img> (trazo negro o gris): se aclaran invirtiendolos. Los de color
     (logos, papelera roja, comprobar verde...) no se tocan. Los iconos `.svg-icon` usan currentColor. */
  :root[data-theme="dark"] img:is(
      [src*="/img/accesos.svg"], [src*="/img/alter.svg"], [src*="/img/ascending_sorting.svg"],
      [src*="/img/btn_go.svg"], [src*="/img/checked_checkbox.svg"], [src*="/img/colpase.svg"],
      [src*="/img/confirm.svg"], [src*="/img/confirm_disable.svg"], [src*="/img/content_copy.svg"],
      [src*="/img/database.svg"], [src*="/img/descending_sorting.svg"], [src*="/img/download.svg"],
      [src*="/img/edit.svg"], [src*="/img/edit_notes.svg"], [src*="/img/event_note.svg"],
      [src*="/img/expand.svg"], [src*="/img/exposed_ports.svg"], [src*="/img/eye_checked.svg"],
      [src*="/img/eye_disable.svg"], [src*="/img/eye_enable.svg"], [src*="/img/eye_unchecked.svg"],
      [src*="/img/fix.svg"], [src*="/img/info.svg"], [src*="/img/inventory.svg"], [src*="/img/key.svg"],
      [src*="/img/logbook_date.svg"], [src*="/img/logbook_markdown.svg"], [src*="/img/logo_perseo_bn.svg"],
      [src*="/img/menu.svg"], [src*="/img/more_info.svg"], [src*="/img/port_watch.svg"],
      [src*="/img/refresh.svg"], [src*="/img/report.svg"], [src*="/img/schedule.svg"],
      [src*="/img/selected-all.svg"], [src*="/img/selected-none.svg"], [src*="/img/selected-some.svg"],
      [src*="/img/settings.svg"], [src*="/img/upload.svg"], [src*="favicon.png"]
    ) {
    filter: invert(1) brightness(0.88);
  }
}

/* ---- Boton de cambio de tema (barra de navegacion) ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 0.375rem;
  color: var(--color-gray-600);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--color-gray-900); background-color: var(--color-gray-100); }
.theme-toggle .svg-icon { width: 18px; height: 18px; }
/* Muestra el icono del tema AL QUE se cambia: luna en claro, sol en oscuro. */
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }