SIN depender de :has() (compatible con todos los navegadores).
════════════════════════════════════════════════════════════════════ */
html:not(.dark) pre {
background-color: #f8fafc !important; /* slate-50 — fondo claro */
color: #0f172a !important; /* slate-900 — texto oscuro */
border: 1px solid #e2e8f0 !important;
border-radius: 8px;
}
/* Cualquier hijo del
hereda el color oscuro, ignorando text-slate-200 */
html:not(.dark) pre,
html:not(.dark) pre * { color: #0f172a !important; }
/* Excepción para el interno: mantener su color base */
html:not(.dark) pre code { color: inherit !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
/* Contenedor envoltorio del code block (bg-slate-950 con header + pre dentro) */
html:not(.dark) .bg-slate-950:has(pre),
html:not(.dark) .bg-slate-900:has(pre):not(input):not(textarea):not(select) {
background-color: #ffffff !important;
color: #0f172a !important;
border: 1px solid #e2e8f0 !important;
box-shadow: var(--shadow-sm);
}
html:not(.dark) .bg-slate-950:has(pre) > div:first-child,
html:not(.dark) .bg-slate-900:has(pre) > div:first-child {
background-color: #f1f5f9 !important;
border-bottom: 1px solid #e2e8f0 !important;
}
/* Fallback para navegadores SIN :has(): el contenedor queda blanco igual
porque ya tenemos `.bg-slate-950 { background: var(--bg-page) }`. */
/* inline en texto: chip suave */
html:not(.dark) :not(pre) > code {
background-color: #f1f5f9;
color: #be185d;
padding: 0 .35em; border-radius: 4px; font-size: .9em;
border: 1px solid #e2e8f0;
}
/* ════════════════════════════════════════════════════════════════════
KPI CARDS — los números grandes en colores deben mantener pop
════════════════════════════════════════════════════════════════════ */
html:not(.dark) .text-emerald-300.font-display { color: #047857 !important; }
html:not(.dark) .text-violet-300.font-display { color: #6d28d9 !important; }
html:not(.dark) .text-cyan-300.font-display { color: #0e7490 !important; }
html:not(.dark) .text-amber-300.font-display { color: #b45309 !important; }
/* ════════════════════════════════════════════════════════════════════
DETAILS / SUMMARY — disclosure widgets
════════════════════════════════════════════════════════════════════ */
html:not(.dark) details { border-color: var(--border-base) !important; }
/* ════════════════════════════════════════════════════════════════════
KEYFRAMES (declarados aquí por si Tailwind config no carga a tiempo)
════════════════════════════════════════════════════════════════════ */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
/* ════════════════════════════════════════════════════════════════════
BOTONES · sistema consistente (.btn-primary / -secondary / -danger / -ghost)
════════════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .5rem 1rem; border-radius: .5rem;
font-weight: 500; font-size: .875rem; line-height: 1.25;
border: 1px solid transparent;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-sm { padding: .25rem .625rem; font-size: .75rem; border-radius: .375rem; }
.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; border-radius: .625rem; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: #6d28d9; }
html.dark .btn-primary { background: #7c3aed; }
html.dark .btn-primary:hover:not(:disabled) { background: #8b5cf6; }
.btn-secondary {
background: var(--bg-card); color: var(--text-strong);
border-color: var(--border-strong); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-strong); }
.btn-icon { padding: .5rem; width: 2.25rem; height: 2.25rem; }
.btn-icon.btn-sm { width: 1.75rem; height: 1.75rem; padding: .25rem; }
/* ════════════════════════════════════════════════════════════════════
LEGIBILIDAD · botones con fondo violeta/morado/lila/azul/fucsia/cyan
SIEMPRE con texto blanco — sin importar dark/light.
Las variantes semi-transparentes (bg-violet-500/20, etc.) NO entran:
ahí el texto sigue siendo el color de marca sobre fondo tintado.
════════════════════════════════════════════════════════════════════ */
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-5"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-6"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-7"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-8"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-9"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-purple-5"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-purple-6"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-purple-7"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-purple-8"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-purple-9"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-indigo-5"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-indigo-6"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-indigo-7"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-indigo-8"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-indigo-9"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-blue-5"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-blue-6"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-blue-7"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-blue-8"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-blue-9"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-fuchsia-5"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-fuchsia-6"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-fuchsia-7"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-fuchsia-8"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-fuchsia-9"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-cyan-5"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-cyan-6"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-cyan-7"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-cyan-8"]:not([class*="/"]),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-cyan-9"]:not([class*="/"]),
/* CTAs con gradient violet/fuchsia/cyan/blue/indigo */
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-violet"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-purple"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-indigo"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-blue"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-fuchsia"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="to-violet"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="to-purple"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="to-indigo"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="to-blue"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="to-fuchsia"],
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="to-cyan"] {
color: #ffffff !important;
}
/* También forzar el color en los hijos directos (span, svg) salvo que ya sean explícitos */
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-5"]:not([class*="/"]) :is(span:not([class*="text-"]), svg:not([class*="text-"])),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="bg-violet-6"]:not([class*="/"]) :is(span:not([class*="text-"]), svg:not([class*="text-"])),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-violet"] :is(span:not([class*="text-"]), svg:not([class*="text-"])),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-fuchsia"] :is(span:not([class*="text-"]), svg:not([class*="text-"])),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-blue"] :is(span:not([class*="text-"]), svg:not([class*="text-"])),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-indigo"] :is(span:not([class*="text-"]), svg:not([class*="text-"])),
:is(button, a, .btn, input[type="submit"], input[type="button"])[class*="from-purple"] :is(span:not([class*="text-"]), svg:not([class*="text-"])) {
color: #ffffff !important;
}
/* .btn-primary también blanco (refuerzo) */
.btn-primary, .btn-primary:visited, .btn-primary span, .btn-primary svg { color: #ffffff !important; }
/* Tipografía refinada */
h1.page-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em;
line-height: 1.2; color: var(--text-strong);
}
.page-subtitle { font-size: .875rem; color: var(--text-muted); margin-top: .25rem; }
.eyebrow {
font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-faint);
}
/* Toggle switch (iOS/Linear-style) */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
position: absolute; cursor: pointer; inset: 0;
background: var(--border-strong); border-radius: 999px;
transition: background-color .15s ease;
}
.switch span::before {
content: ""; position: absolute; left: 2px; bottom: 2px;
width: 16px; height: 16px; background: #fff; border-radius: 50%;
transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-ring); }
/* Badge de estado */
.badge {
display: inline-flex; align-items: center; gap: .25rem;
padding: 2px 8px; border-radius: 999px;
font-size: .6875rem; font-weight: 600; border: 1px solid;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-err { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-bd); }
.badge-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.badge-violet { background: var(--violet-bg); color: var(--violet-fg); border-color: var(--violet-bd); }
.badge-gray { background: var(--gray-bg); color: var(--gray-fg); border-color: var(--gray-bd); }