/*
  Puente: las páginas antiguas usaban Tailwind con un tema oscuro y neón. Aquí sus clases se traducen
  a la paleta clara del diseño 2026. Todo va bajo body.legacy main, así que gana a Tailwind por
  especificidad y no toca la cabecera ni el pie. puente.js marca con .on-dark los textos que de verdad
  están sobre un fondo oscuro (botones de color, bloques de código) para que sigan en blanco.
*/

body.legacy { --text: #3a3934; background-color: var(--bg); color: var(--ink); font-family: var(--font); }
body.legacy main { color: var(--ink); }
body.legacy .btn-primary { background-color: var(--brand); color: #fff; }
body.legacy .btn-primary:hover { background-color: var(--brand-hover); }
body.legacy .btn { line-height: 1; }

/* ---------- Texto ---------- */

body.legacy main :is(.text-white, .text-gray-50, .text-gray-100, .text-gray-200):not(.on-dark) { color: var(--ink); }
body.legacy main :is(.text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400):not(.on-dark) { color: var(--muted); }
body.legacy main :is(.text-gray-500, .text-gray-600, .text-slate-500):not(.on-dark) { color: var(--faint); }
body.legacy main :is(.text-neon-cyan, .text-neon-violet, .text-neon-blue, .text-cyan-300, .text-cyan-400, .text-blue-300, .text-blue-400,
  .text-purple-300, .text-purple-400, .text-violet-300, .text-violet-400, .text-indigo-400, .text-pink-400, .text-fuchsia-400, .text-teal-400, .text-sky-400):not(.on-dark) { color: var(--brand); }
body.legacy main :is(.text-green-300, .text-green-400, .text-emerald-400):not(.on-dark) { color: #15803d; }
body.legacy main :is(.text-red-300, .text-red-400):not(.on-dark) { color: var(--danger); }
body.legacy main :is(.text-yellow-300, .text-yellow-400, .text-amber-300, .text-amber-400, .text-orange-300, .text-orange-400):not(.on-dark) { color: #b45309; }
body.legacy main :is(.hover\:text-white, .hover\:text-neon-cyan, .hover\:text-neon-violet, .hover\:text-cyan-400):not(.on-dark):hover { color: var(--brand-hover); }

/* Títulos con degradado de color: texto liso. */
body.legacy main .bg-clip-text.text-transparent {
  background: none !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor;
}

/* ---------- Fondos ---------- */

/* Fondos oscuros de sección completa: pasan a ser el fondo de la página. */
body.legacy main :is(.bg-deep, .bg-gray-950, .bg-gray-900, .bg-slate-900, .bg-black):not(pre):not(code) { background-color: transparent; }
/* Tarjetas y paneles translúcidos: superficie blanca. */
body.legacy main :is(.glass, .glass-nav, .glass-dropdown, [class*="bg-white/"], [class*="bg-gray-900/"], [class*="bg-gray-800"], [class*="bg-slate-800"], [class*="bg-slate-900/"]) {
  background-color: var(--surface); background-image: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.legacy main .glass { border: 1px solid var(--line); box-shadow: var(--shadow); }
body.legacy main :is([class*="bg-black/"]):not(pre):not(code):not(:has(pre, code)) { background-color: var(--sunken); }
body.legacy main :is(.hover\:bg-white\/5, .hover\:bg-white\/10, .hover\:bg-gray-800, .hover\:bg-gray-700):hover { background-color: var(--sunken); }
/* Degradados de color sólido (botones, cabeceras): el color de la marca. puente.js los marca. */
body.legacy main .legacy-fill { background-image: none !important; background-color: var(--brand) !important; }
body.legacy main .legacy-fill:hover { background-color: var(--brand-hover) !important; }
/* Degradados suaves de fondo (tintes): un gris cálido. */
body.legacy main .legacy-tint { background-image: none !important; background-color: var(--sunken) !important; }

/* Código: se queda oscuro, como un terminal. */
body.legacy main pre { background-color: #1b1b18; color: #e8e6df; border-radius: var(--radius-sm); }

/* Fondos casi negros que no son código (etiquetas, secciones): blanco. Los marca puente.js. */
body.legacy main .legacy-light { background-color: var(--surface) !important; background-image: none !important; }
/* Rellenos oscuros que quedan (botones de color, cabeceras): su texto, en blanco. */
body.legacy main .is-dark-fill, body.legacy main .is-dark-fill *:not(input):not(select):not(textarea):not(option) { color: #fff !important; }
/* …salvo lo que tiene su propio fondo claro dentro del relleno (botones blancos sobre una banda de color). */
body.legacy main .is-dark-fill .legacy-chip, body.legacy main .is-dark-fill .legacy-chip * { color: var(--brand-hover) !important; }

/* Tipografía de lectura, también para las páginas con estilos propios (artículos, guías). */
body.legacy main :is(h1, h2, h3, h4, h5, h6):not(.on-dark) { color: var(--ink); }
body.legacy main :is(p, li, dd, dt, td, blockquote, figcaption):not(.on-dark) { color: var(--text); }
body.legacy main a:not(.on-dark):not([class*="text-"]):not([class*="btn"]) { color: var(--brand); }
body.legacy main input { accent-color: var(--brand); }
body.legacy main .legacy-ink { color: var(--ink) !important; }
body.puente-quieto main, body.puente-quieto main * { transition: none !important; }

/* ---------- Bordes y sombras ---------- */

body.legacy main :is([class*="border-white/"], .border-gray-600, .border-gray-700, .border-gray-800, [class*="border-gray-700/"], [class*="border-gray-800/"], .divide-gray-700 > *) { border-color: var(--line); }
body.legacy main :is(.border-neon-cyan, [class*="border-neon-cyan/"], .border-cyan-500, [class*="border-cyan-500/"], [class*="border-purple-500"], [class*="border-violet-500"]) { border-color: rgba(15, 107, 90, .35); }
body.legacy main :is(.shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: var(--shadow); }
body.legacy main [class*="shadow-cyan"], body.legacy main [class*="shadow-purple"], body.legacy main [class*="shadow-violet"], body.legacy main [class*="shadow-blue"] { --tw-shadow-color: rgba(27, 27, 24, .08); }

/* ---------- Adornos del tema antiguo ---------- */

body.legacy main :is(.blur-3xl, .blur-2xl, .orb, .orb-1, .orb-2, .orb-3, [class*="animate-blob"], .cursor-dot, .cursor-outline) { display: none !important; }
body.legacy main :is(.animate-pulse-slow, .animate-tilt) { animation: none; }
body.legacy main .hover\:scale-105:hover, body.legacy main .hover\:scale-110:hover { transform: none; }

/* ---------- Formularios ---------- */

body.legacy main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  background-color: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
body.legacy main :is(input, textarea)::placeholder { color: var(--faint); }
body.legacy main :is(input, select, textarea):focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* Enlaces del contenido */
body.legacy main .prose a, body.legacy main article a:not([class]) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Avisos (showToast) y mensajes ---------- */

.flashes { padding-top: 20px; display: grid; gap: 8px; }
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: var(--radius-sm); font-size: 15px;
  background: var(--brand-soft); color: var(--brand-hover);
}
.flash-error { background: var(--danger-soft); color: var(--danger); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: 14px;
  box-shadow: 0 8px 24px rgba(27, 27, 24, .2); animation: rise .3s cubic-bezier(.2, .7, .2, 1) both;
}
.toast-error { background: var(--danger); }
.toast-success { background: var(--brand-hover); }