/* ── Puente shadcn: variables de tema de Gatus -> tokens Cliperty (HSL "H S% L%").
   Esta version de Gatus usa un design system shadcn; el handoff (abajo) cubre
   las clases Tailwind (bg-green-*/bg-red-*/bg-yellow-*), y este bloque cubre lo
   que usa variables (--primary, --destructive, tarjetas, texto). !important
   porque custom.css carga antes que app.css. ── */
:root, :root.dark {
  --primary: 194 32% 39% !important;         /* teal #447584 */
  --primary-foreground: 0 0% 100% !important;
  --ring: 194 32% 39% !important;
  --destructive: 1 63% 61% !important;       /* coral #DA5F5C */
  --destructive-foreground: 0 0% 100% !important;
  --radius: 10px !important;
}
:root {
  --foreground: 206 45% 22% !important;      /* teal-700 #1F3B51 */
  --muted-foreground: 0 0% 63% !important;   /* gray-500 #A1A1A1 */
  --border: 0 0% 90% !important;             /* gray-100 #E6E6E6 */
  --input: 0 0% 90% !important;
  --background: 0 0% 95% !important;         /* gray-50 #F1F1F1 */
  --card: 0 0% 100% !important;              /* tarjetas blancas */
  --card-foreground: 206 45% 22% !important;
}

/* ============================================================
   Cliperty — tema para Gatus (ui.custom-css)
   ============================================================
   Gatus (TwiN/gatus) construye su UI con clases utilitarias de
   Tailwind directamente en el markup (bg-green-500, text-red-500,
   bg-white, rounded-lg, etc.), así que este tema sobreescribe esas
   clases por selector "contiene" ([class*="..."]) en vez de intentar
   adivinar el HTML exacto — así sobrevive a pequeños cambios de
   versión sin que se rompa. Todo mapea a los tokens ya usados en
   el resto de Cliperty (assets/colors_and_type.css).

   Cómo aplicar: pega este archivo completo como valor de
   `ui.custom-css` en tu config.yaml (ver config-ui.yaml adjunto).
   ============================================================ */

:root {
  --cl-coral:      #DA5F5C;
  --cl-coral-600:  #C04F4D;
  --cl-coral-100:  #FDEEED;
  --cl-teal:       #447584;
  --cl-teal-700:   #1F3B51;
  --cl-teal-200:   #B0C1C1;
  --cl-teal-50:    rgba(52,117,132,0.08);
  --cl-success:    #058E25;
  --cl-warning:    #C99706;
  --cl-warning-bg: #FFEFBF;
  --cl-gray-50:    #F1F1F1;
  --cl-gray-100:   #E6E6E6;
  --cl-gray-500:   #A1A1A1;
  --cl-font-sans:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@font-face {
  font-family: "Montserrat";
  font-weight: 400 800;
  src: local("Montserrat");
}

html, body {
  font-family: var(--cl-font-sans) !important;
  background-color: var(--cl-gray-50) !important;
}

/* ── Estado: Healthy (verde Tailwind → verde Cliperty) ─────────── */
[class*="bg-green-"] { background-color: var(--cl-success) !important; }
[class*="text-green-"] { color: var(--cl-success) !important; }
[class*="border-green-"] { border-color: var(--cl-success) !important; }
[class*="fill-green-"] { fill: var(--cl-success) !important; }

/* ── Estado: Degraded / Warning (amarillo Tailwind → ámbar Cliperty) */
[class*="bg-yellow-"], [class*="bg-amber-"] { background-color: var(--cl-warning) !important; }
[class*="text-yellow-"], [class*="text-amber-"] { color: var(--cl-warning) !important; }
[class*="border-yellow-"], [class*="border-amber-"] { border-color: var(--cl-warning) !important; }

/* ── Estado: Down / Error (rojo Tailwind → coral Cliperty) ──────── */
[class*="bg-red-"] { background-color: var(--cl-coral) !important; }
[class*="text-red-"] { color: var(--cl-coral) !important; }
[class*="border-red-"] { border-color: var(--cl-coral) !important; }
[class*="fill-red-"] { fill: var(--cl-coral) !important; }

/* ── Marca / neutrales (azules e índigos Tailwind → teal Cliperty) */
[class*="bg-blue-"], [class*="bg-indigo-"], [class*="bg-sky-"] { background-color: var(--cl-teal) !important; }
[class*="text-blue-"], [class*="text-indigo-"], [class*="text-sky-"] { color: var(--cl-teal) !important; }
[class*="border-blue-"], [class*="border-indigo-"] { border-color: var(--cl-teal) !important; }

/* ── Texto principal / encabezados ──────────────────────────────── */
[class*="text-gray-9"], [class*="text-slate-9"], [class*="text-black"] { color: var(--cl-teal-700) !important; }
h1, h2, h3 { color: var(--cl-teal-700) !important; font-weight: 800 !important; }

/* ── Texto secundario ────────────────────────────────────────────── */
[class*="text-gray-5"], [class*="text-gray-4"], [class*="text-slate-5"] { color: var(--cl-gray-500) !important; }

/* ── Superficies: tarjetas, bordes, radios ──────────────────────── */
[class*="bg-white"] { background-color: #fff !important; }
[class*="border-gray-2"], [class*="border-gray-1"], [class*="border-slate-2"] { border-color: var(--cl-gray-100) !important; }
[class*="rounded"] { border-radius: 10px !important; }

/* Foco / hover de inputs y selects (barra de búsqueda, filtros) */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--cl-teal) !important;
  box-shadow: inset 0 0 0 1px var(--cl-teal) !important;
}

/* Enlaces y botones de acento — coral en vez de azul genérico */
a, [class*="hover:text-blue-"]:hover { color: var(--cl-coral) !important; }
button[class*="bg-blue-"], button[class*="bg-indigo-"] {
  background-color: var(--cl-coral) !important;
}
button[class*="bg-blue-"]:hover, button[class*="bg-indigo-"]:hover {
  background-color: var(--cl-coral-600) !important;
}

/* Barra de historial (los "bins" de resultados por chequeo) heredan
   el color de estado ya mapeado arriba — sin regla adicional necesaria. */