/* =====================================================================
   Personalidad de los temas (App\Core\Temas): tipografía, sombras y superficies.
   Los colores vienen de las variables --n-* (neutros) y --ac-* (acento) que define el tema,
   y Tailwind los usa a través de las paletas slate y cyan.
   ===================================================================== */
html[data-tema] body { font-family: var(--fuente-texto); }
html[data-tema] :is(h1, h2, h3, .font-titulos) { font-family: var(--fuente-titulos); letter-spacing: -0.01em; }
html[data-tema="terminal"] :is(h1, h2, h3, .font-titulos) { letter-spacing: -0.03em; }

/* brillo: luz interior en el borde en lugar de sombras externas (DESIGN.md) */
html.dark[data-sombra="brillo"] :is(.glass-panel, .glass-card, .tarjeta, .accordion-item) {
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
html:not(.dark)[data-sombra="brillo"] :is(.glass-panel, .glass-card, .tarjeta, .accordion-item) {
    box-shadow: inset 0 0 0 1px rgb(var(--ac-600) / 0.06), 0 1px 3px rgb(var(--n-900) / 0.05) !important;
}

/* linea: solo bordes finos, sin sombras */
html[data-sombra="linea"] :is(.glass-panel, .glass-card, .tarjeta, .accordion-item) { box-shadow: none !important; }
html:not(.dark)[data-sombra="linea"] :is(.glass-panel, .glass-card, .tarjeta, .accordion-item) { border-color: rgb(var(--n-200)) !important; }

/* dura: sombra desplazada sin difuminar (estilo brutalista / industrial) */
html:not(.dark)[data-sombra="dura"] :is(.glass-panel, .glass-card, .tarjeta) {
    box-shadow: 4px 4px 0 rgb(var(--n-900)) !important; border: 1px solid rgb(var(--n-900)) !important;
}
html.dark[data-sombra="dura"] :is(.glass-panel, .glass-card, .tarjeta) {
    box-shadow: 4px 4px 0 rgb(var(--ac-600) / 0.6) !important; border: 1px solid rgb(var(--n-600)) !important;
}

/* Enfoque visible con el acento del tema */
html[data-tema] :is(input, select, textarea):focus-visible { outline: 2px solid rgb(var(--ac-500) / 0.45); outline-offset: 1px; }

/* Barra de desplazamiento */
html.dark[data-tema] .custom-scrollbar::-webkit-scrollbar-track { background: rgb(var(--n-900)); }
html.dark[data-tema] .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--n-700)); }
html[data-tema] ::selection { background: rgb(var(--ac-500) / 0.35); }

/* =====================================================================
   Diálogos de confirmación y avisos (public/assets/js/dialogos.js), con los colores y radios del tema.
   ===================================================================== */
.fd-velo {
    position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
    background: rgb(var(--n-950, 2 6 23) / .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    animation: fd-velo .16s ease-out;
}
html:not(.dark) .fd-velo { background: rgb(var(--n-900, 15 23 42) / .38); }
.fd-caja {
    width: min(440px, 100%); display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 22px 22px 18px;
    border-radius: var(--radio-2xl, 18px); background: #fff; color: rgb(var(--n-900, 15 23 42)); font-family: var(--fuente-texto, system-ui, sans-serif);
    box-shadow: 0 0 0 1px rgb(var(--n-900, 15 23 42) / .06), 0 24px 60px -12px rgb(var(--n-950, 2 6 23) / .4);
    animation: fd-caja .22s cubic-bezier(.2, .9, .25, 1); text-align: left;
}
html.dark .fd-caja { background: rgb(var(--n-900, 15 23 42)); color: rgb(var(--n-50, 248 250 252)); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -12px rgb(0 0 0 / .6); }
html[data-sombra="dura"]:not(.dark) .fd-caja { box-shadow: 5px 5px 0 rgb(var(--n-900)); border: 1px solid rgb(var(--n-900)); }
.fd-icono {
    grid-row: span 2; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
    background: rgb(var(--ac-100, 207 250 254)); color: rgb(var(--ac-700, 14 116 144));
}
html.dark .fd-icono { background: rgb(var(--ac-500, 6 182 212) / .16); color: rgb(var(--ac-300, 103 232 249)); }
.fd-peligro .fd-icono { background: #ffe4e6; color: #be123c; }
html.dark .fd-peligro .fd-icono { background: rgb(244 63 94 / .15); color: #fda4af; }
.fd-titulo { margin: 2px 0 0; font: 650 15.5px/1.35 var(--fuente-titulos, inherit); letter-spacing: -0.015em; }
.fd-texto {
    margin: 0; font-size: 13.5px; line-height: 1.55; color: rgb(var(--n-600, 71 85 105)); white-space: pre-line; overflow-wrap: anywhere;
    max-height: 50vh; overflow-y: auto;
}
html.dark .fd-texto { color: rgb(var(--n-300, 203 213 225)); }
.fd-botones { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fd-btn {
    height: 38px; padding: 0 16px; border-radius: var(--radio-lg, 10px); border: 1px solid transparent; cursor: pointer;
    font: 600 13.5px var(--fuente-texto, inherit); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fd-btn:active { transform: translateY(1px); }
.fd-btn:focus-visible { outline: 2px solid rgb(var(--ac-500, 6 182 212)); outline-offset: 2px; }
.fd-btn-pri { background: rgb(var(--ac-600, 8 145 178)); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .14); }
.fd-btn-pri:hover { background: rgb(var(--ac-700, 14 116 144)); }
.fd-peligro .fd-btn-pri { background: #e11d48; }
.fd-peligro .fd-btn-pri:hover { background: #be123c; }
.fd-btn-sec { background: #fff; border-color: rgb(var(--n-200, 226 232 240)); color: rgb(var(--n-700, 51 65 85)); }
.fd-btn-sec:hover { background: rgb(var(--n-50, 248 250 252)); border-color: rgb(var(--n-300, 203 213 225)); }
html.dark .fd-btn-sec { background: rgb(var(--n-800, 30 41 59)); border-color: rgb(255 255 255 / .08); color: rgb(var(--n-100, 241 245 249)); }
html.dark .fd-btn-sec:hover { background: rgb(var(--n-700, 51 65 85)); }
.fd-velo.fd-saliendo { opacity: 0; transition: opacity .14s ease; }
@keyframes fd-velo { from { opacity: 0; } }
@keyframes fd-caja { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 480px) {
    .fd-velo { place-items: end center; padding: 12px; }
    .fd-botones .fd-btn { flex: 1; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .fd-velo, .fd-caja { animation: none; } }