/* Ajustes puntuales que no cubre Tailwind (cargado via CDN en index.html). Colores de marca: wat.plus (magenta #ED1E79, tinta #0B0B0F, papel #FAFAF7). */
::selection { background: #ED1E79; color: #fff; }
h1, h2 { font-family: "Space Grotesk", Inter, system-ui, sans-serif; letter-spacing: -0.02em; }

/* Logo de wat.plus: [w+] watplus, igual que www.wat.plus/src/Logo.jsx */
.wp-logo { display: inline-flex; align-items: center; gap: .42em; font-family: "Space Grotesk", sans-serif; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: #0B0B0F; }
.wp-mark { display: inline-flex; align-items: center; letter-spacing: -0.06em; }
.wp-mark .b { font-weight: 400; }
.wp-mark .plus { color: #ED1E79; font-size: .78em; line-height: 0; display: inline-block; transform: translateY(-0.04em); }
.wp-logo .accent { color: #ED1E79; }
#job-log::-webkit-scrollbar { width: 8px; }
#job-log::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.tab-btn { color: #64748b; }
.tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.tab-btn.active { background: #0B0B0F; color: #fff; }

/* Menús que se deslizan de costado en el celular, sin barra de scroll a la vista. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* En el celular iOS hace zoom al tocar un campo con letra de menos de 16px. */
@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; }
}

/* ---------- Colapsables: el mismo chevron en todos lados ----------
   Cerrado apunta para abajo; abierto gira y se pinta del color de la marca. */
.chev { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .15s ease; }
.is-open .chev, .chev.up { transform: rotate(180deg); }
.fold-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; color: #94a3b8; flex-shrink: 0; }
.fold-btn:hover, tr:hover > td > .fold-btn, button:hover > .fold-btn { background: #f1f5f9; color: #334155; }
.fold-btn.is-open, tr:hover > td > .fold-btn.is-open, button:hover > .fold-btn.is-open { background: #FFE7F1; color: #C81668; }
.close-btn { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; border-radius: .5rem; padding: .25rem .6rem; color: #475569; background: #fff; box-shadow: inset 0 0 0 1px #cbd5e1; flex-shrink: 0; }
.close-btn:hover { background: #f1f5f9; color: #0f172a; }
.close-btn .chev { width: .85rem; height: .85rem; }
/* <details class="fold">: sin el triangulito del navegador, con el chevron a la derecha. */
details.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .15s ease;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); }
details.fold[open] > summary::after { transform: rotate(180deg); }
details.fold.inline > summary { display: inline-flex; justify-content: flex-start; }

/* ---------- DevOps (public/ops.js) ---------- */
/* Estados: paleta fija de estado (bueno / aviso / grave / critico); siempre con icono + texto, nunca solo color. */
.st-pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; padding: .125rem .6rem; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.st-pill i { font-style: normal; font-size: .7rem; line-height: 1; }
.st-ok { background: #e7f6e7; color: #14532d; } .st-ok i { color: #0ca30c; }
.st-late { background: #fff4d6; color: #7a4b00; } .st-late i { color: #c98500; }
.st-fail { background: #fde8e8; color: #991b1b; } .st-fail i { color: #d03b3b; }
.st-none { background: #f1f5f9; color: #475569; } .st-none i { color: #94a3b8; }
.txt-crit { color: #b42323; } .txt-warn { color: #8a5a00; } .txt-ok { color: #15803d; }

/* Grilla tareas x dias */
.hm-row { display: flex; gap: 2px; }
.hm { width: 16px; height: 16px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: 700; color: #fff; }
.hm-ok { background: #0ca30c; }
.hm-fail { background: #d03b3b; }
.hm-warn { background: #fab219; color: #3b2a00; }
.hm-missing { background: #fff; box-shadow: inset 0 0 0 1.5px #d03b3b; color: #d03b3b; }
.hm-none { background: #f1f5f9; }
.hm-nodata { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 3px, #fff 3px, #fff 6px); }

/* Medidores (disco / memoria): pista neutra + relleno; cambia de color al cruzar 80% / 90% */
.meter { height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: #2a78d6; }
.meter > span.warn { background: #fab219; }
.meter > span.crit { background: #d03b3b; }

#ops-tip { position: fixed; z-index: 60; pointer-events: none; background: #0f172a; color: #fff; font-size: 12px; line-height: 1.35; padding: 5px 9px; border-radius: 6px; max-width: 300px; display: none; }
/* relative: los .sr-only (position:absolute) de las tablas se escapaban del scroll y ensanchaban la pagina. */
.ops-scroll { overflow-x: auto; position: relative; }

/* Fila desplegada: la fila y su detalle comparten fondo y van unidos por una barra a la izquierda, sin linea
   entre ellos, para que se vea de cual es cada detalle y cual cerrar. */
.ops-row-open > td, .ops-detail > td { background: #f8fafc; }
.ops-row-open > td:first-child, .ops-detail > td:first-child { box-shadow: inset 3px 0 0 #ED1E79; }
.ops-detail { border-top-width: 0 !important; }
.ops-row-open + .ops-detail > td { border-bottom: 1px solid #e2e8f0; }

/* Sub-pestanas dentro de DevOps */
.ops-sub { padding: .55rem .95rem; font-size: .875rem; font-weight: 500; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ops-sub:hover { color: #0f172a; }
.ops-sub.active { color: #0B0B0F; border-bottom-color: #ED1E79; }
.st-high { background: #ffece3; color: #7c2d12; } .st-high i { color: #ec835a; }
.st-info { background: #e7f0fd; color: #1e3a8a; } .st-info i { color: #2a78d6; }

/* Tablas que en el celular se apilan: cada fila es un bloque y cada celda un renglón (Sitios). */
@media (max-width: 767px) {
  table.stack-sm, table.stack-sm tbody { display: block; width: 100%; }
  table.stack-sm thead { display: none; }
  table.stack-sm tr { display: block; padding: .75rem 1.25rem; }
  table.stack-sm td:not(.hidden) { display: block; padding: .2rem 0; }
}

/* ---------- Consumo IA (public/ai.js) ---------- */
.ai-chip { flex-shrink: 0; border-radius: 9999px; padding: .3rem .8rem; font-size: .8125rem; font-weight: 500; color: #3f3f46; background: #fff; box-shadow: inset 0 0 0 1px #E4E4DE; white-space: nowrap; }
.ai-chip:hover { box-shadow: inset 0 0 0 1px #0B0B0F; }
.ai-chip.active { background: #ED1E79; color: #fff; box-shadow: none; }
.ai-tip { position: absolute; z-index: 20; pointer-events: none; min-width: 190px; max-width: 260px; background: #0B0B0F; color: #fff; font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ai-hit { cursor: pointer; }
.ai-hit.on { fill: rgba(11, 11, 15, .05); }
.ai-row:hover > td { background: #FAFAF7; }
.ai-share:hover { background: #FAFAF7; }

/* ---------- Modo oscuro ----------
   index.html pone la clase "dark" en <html> (sistema o botón del encabezado). En vez de sumar dark: a cientos de
   clases en los .js, se remapean acá las utilidades de Tailwind que usa el panel (html.dark gana por especificidad
   aunque el CDN inyecte sus estilos después). Las cajas de terminal (bg-slate-900) quedan como están. */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; color: #64748b; }
.theme-btn:hover { background: #f1f5f9; color: #0f172a; }
.theme-btn svg { width: 1.1rem; height: 1.1rem; }

html.dark { color-scheme: dark; }
html.dark body, html.dark .bg-paper { background-color: #0E0E13; }
html.dark body { color: #E2E2E8; }

/* Superficies */
html.dark .bg-white { background-color: #17171E; }
html.dark .bg-slate-50, html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-white:hover { background-color: #1C1C24; }
html.dark .bg-slate-100, html.dark .hover\:bg-slate-100:hover, html.dark .file\:bg-slate-100::file-selector-button { background-color: #24242D; }
html.dark .bg-slate-200, html.dark .hover\:bg-slate-200:hover { background-color: #2E2E38; }
html.dark .bg-slate-300 { background-color: #3B3B47; }
html.dark .disabled\:hover\:bg-slate-100:disabled:hover { background-color: #24242D; }
html.dark .bg-slate-800, html.dark .bg-ink { background-color: #ECECF1; }
html.dark .bg-slate-800.text-white, html.dark .bg-ink.text-white { color: #0B0B0F; }
html.dark .bg-slate-900 { background-color: #08080B; box-shadow: inset 0 0 0 1px #24242D; }
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html.dark select, html.dark textarea { background-color: #121218; color: #E2E2E8; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #5C5C68; }

/* Bordes, anillos y divisores */
html.dark .border-slate-100 { border-color: #24242D; }
html.dark .border-slate-200 { border-color: #2C2C36; }
html.dark .border-slate-300 { border-color: #3A3A46; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #24242D; }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2C2C36; }
html.dark .ring-slate-200 { --tw-ring-color: #2C2C36; }
html.dark .ring-slate-300 { --tw-ring-color: #3A3A46; }
html.dark .ring-brand-100 { --tw-ring-color: rgba(237, 30, 121, .35); }
html.dark .ring-red-100, html.dark .ring-red-200 { --tw-ring-color: rgba(248, 113, 113, .35); }
html.dark .ring-emerald-100, html.dark .ring-emerald-200 { --tw-ring-color: rgba(52, 211, 153, .3); }
html.dark .ring-amber-200, html.dark .ring-amber-300 { --tw-ring-color: rgba(251, 191, 36, .35); }
html.dark .ring-violet-200 { --tw-ring-color: rgba(167, 139, 250, .35); }
html.dark .ring-sky-200 { --tw-ring-color: rgba(56, 189, 248, .35); }
html.dark .shadow-sm { --tw-shadow-color: rgba(0, 0, 0, .5); }

/* Texto (la escala de grises se invierte; dentro de las terminales se respeta la original) */
html.dark .text-slate-900, html.dark .hover\:text-slate-900:hover { color: #F1F1F4; }
html.dark .text-slate-800, html.dark .hover\:text-slate-800:hover { color: #E2E2E8; }
html.dark .text-slate-700, html.dark .hover\:text-slate-700:hover { color: #CFCFD7; }
html.dark .text-slate-600 { color: #B2B2BD; }
html.dark .text-slate-500 { color: #9696A3; }
html.dark .text-slate-400:not(.bg-slate-900 *) { color: #777784; }
html.dark .text-slate-300:not(.bg-slate-900 *) { color: #50505C; }

/* Marca y colores de estado: fondos tenues y texto más claro para que se lean sobre oscuro */
html.dark .bg-brand-50 { background-color: rgba(237, 30, 121, .15); }
html.dark .bg-brand-50\/40 { background-color: rgba(237, 30, 121, .07); }
html.dark .text-brand-700 { color: #FF6FA9; }
html.dark .text-brand-600, html.dark .group:hover .group-hover\:text-brand-600, html.dark .hover\:text-brand-600:hover { color: #FF4F97; }
html.dark .hover\:text-brand-900:hover { color: #FFB3D1; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, .13); }
html.dark .bg-red-100, html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, .22); }
html.dark .text-red-800:not(.bg-slate-900 *), html.dark .text-red-700 { color: #FCA5A5; }
html.dark .text-red-600, html.dark .hover\:text-red-600:hover { color: #F87171; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .12); }
html.dark .text-emerald-900, html.dark .text-emerald-800 { color: #6EE7B7; }
html.dark .text-emerald-600 { color: #34D399; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .2); }
html.dark .text-amber-900, html.dark .text-amber-700 { color: #FCD34D; }
html.dark .text-amber-600 { color: #FBBF24; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, .14); }
html.dark .text-violet-700 { color: #C4B5FD; }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, .13); }
html.dark .text-sky-800, html.dark .text-sky-700 { color: #7DD3FC; }

/* Piezas propias de este archivo */
html.dark .wp-logo { color: #F1F1F4; }
html.dark .tab-btn { color: #9696A3; }
html.dark .tab-btn:hover, html.dark .theme-btn:hover { background: #24242D; color: #F1F1F4; }
html.dark .tab-btn.active { background: #ECECF1; color: #0B0B0F; }
html.dark .theme-btn { color: #9696A3; }
html.dark .fold-btn { color: #777784; }
html.dark .fold-btn:hover, html.dark tr:hover > td > .fold-btn, html.dark button:hover > .fold-btn { background: #24242D; color: #E2E2E8; }
html.dark .fold-btn.is-open, html.dark tr:hover > td > .fold-btn.is-open, html.dark button:hover > .fold-btn.is-open { background: rgba(237, 30, 121, .18); color: #FF6FA9; }
html.dark .close-btn { color: #CFCFD7; background: #17171E; box-shadow: inset 0 0 0 1px #3A3A46; }
html.dark .close-btn:hover { background: #24242D; color: #F1F1F4; }
html.dark .st-ok { background: rgba(12, 163, 12, .16); color: #86EFAC; } html.dark .st-ok i { color: #4ADE80; }
html.dark .st-late { background: rgba(250, 178, 25, .16); color: #FCD34D; } html.dark .st-late i { color: #FAB219; }
html.dark .st-fail { background: rgba(208, 59, 59, .2); color: #FCA5A5; } html.dark .st-fail i { color: #F87171; }
html.dark .st-none { background: #24242D; color: #B2B2BD; } html.dark .st-none i { color: #777784; }
html.dark .st-high { background: rgba(236, 131, 90, .18); color: #FDBA8C; } html.dark .st-high i { color: #EC835A; }
html.dark .st-info { background: rgba(42, 120, 214, .2); color: #93C5FD; } html.dark .st-info i { color: #60A5FA; }
html.dark .txt-crit { color: #F87171; } html.dark .txt-warn { color: #FBBF24; } html.dark .txt-ok { color: #4ADE80; }
html.dark .hm-missing { background: #17171E; }
html.dark .hm-none { background: #24242D; }
html.dark .hm-nodata { background: repeating-linear-gradient(45deg, #24242D, #24242D 3px, #17171E 3px, #17171E 6px); }
html.dark .meter { background: #2E2E38; }
html.dark .meter > span:not(.warn):not(.crit) { background: #4C93E6; }
html.dark #ops-tip { background: #ECECF1; color: #0B0B0F; }
html.dark .ops-row-open > td, html.dark .ops-detail > td { background: #1C1C24; }
html.dark .ops-row-open + .ops-detail > td { border-bottom-color: #2C2C36; }
html.dark .ops-sub { color: #9696A3; }
html.dark .ops-sub:hover { color: #F1F1F4; }
html.dark .ops-sub.active { color: #F1F1F4; }
html.dark .ai-chip { color: #CFCFD7; background: #17171E; box-shadow: inset 0 0 0 1px #3A3A46; }
html.dark .ai-chip:hover { box-shadow: inset 0 0 0 1px #ECECF1; }
html.dark .ai-chip.active { background: #ED1E79; color: #fff; box-shadow: none; }
html.dark .ai-tip { background: #ECECF1; color: #0B0B0F; }
html.dark .ai-hit.on { fill: rgba(255, 255, 255, .06); }
html.dark .ai-row:hover > td, html.dark .ai-share:hover { background: #1C1C24; }

/* Gráficos SVG con colores fijos en ai.js / ops.js: se pisan por atributo (CSS gana a los atributos de presentación). */
html.dark svg [stroke="#E4E4DE"] { stroke: #2C2C36; }
html.dark svg [fill="#6A6A72"] { fill: #8A8A96; }
html.dark svg [stroke="#0B0B0F"] { stroke: #ECECF1; }
html.dark svg [fill="#0B0B0F"] { fill: #ECECF1; }
html.dark svg [stroke="#2a78d6"] { stroke: #4C93E6; }
html.dark svg [fill="#2a78d6"] { fill: #4C93E6; }
html.dark svg circle[stroke="#fff"] { stroke: #17171E; }