/* ══════════════════════════════════════════════════════════════
   MODERN UI — Sitial de Talentos Cubanos
   Capa de modernización sobre la identidad existente (navy / oro /
   bandera cubana). No redefine la paleta base: la refina.
   Firma visual: "medal glint" — un brillo dorado breve que recorre
   los elementos interactivos al hacer hover, como el filo de una
   medalla girando bajo la luz.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Radios más suaves y consistentes */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;

    /* Sombras tintadas de navy en vez de negro puro */
    --shadow-xs: 0 1px 2px rgba(4, 18, 43, .06);
    --shadow-sm: 0 2px 8px rgba(4, 18, 43, .08), 0 1px 2px rgba(4, 18, 43, .06);
    --shadow-md: 0 8px 24px rgba(4, 18, 43, .12), 0 2px 6px rgba(4, 18, 43, .06);
    --shadow-lg: 0 20px 48px rgba(4, 18, 43, .18), 0 6px 16px rgba(4, 18, 43, .08);
    --shadow-gold: 0 0 0 1px rgba(201, 162, 39, .35), 0 8px 24px rgba(201, 162, 39, .18);

    /* Vidrio para barras flotantes */
    --glass-bg: rgba(255, 255, 255, .72);
    --glass-border: rgba(255, 255, 255, .5);

    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .55);
    --shadow-gold: 0 0 0 1px rgba(212, 168, 42, .4), 0 8px 24px rgba(212, 168, 42, .14);
    --glass-bg: rgba(16, 22, 30, .72);
    --glass-border: rgba(255, 255, 255, .08);
}

/* Suaviza el cambio entre modo claro/oscuro en todo el documento */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body, header, nav, footer,
#topbar-hamburger, #menu-panel, .mp-topbar, .np-topbar,
.card, table, th, td, button {
    transition: background-color .35s var(--ease), border-color .35s var(--ease),
                color .35s var(--ease), box-shadow .35s var(--ease);
}

/* Barra de scroll fina y con acento dorado, discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold, #c9a227), var(--navy-light, #122d6b));
    border-radius: 20px;
    border: 2px solid var(--bg, #f5f3ee);
}
* { scrollbar-color: var(--gold, #c9a227) transparent; scrollbar-width: thin; }

::selection { background: rgba(201, 162, 39, .35); }

/* Foco visible accesible en toda la interfaz */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold, #c9a227);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Barras superiores flotantes (glassmorphism sutil) ── */
.mp-topbar, .np-topbar, #topbar-hamburger {
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--shadow-sm);
}

#menu-panel {
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    box-shadow: var(--shadow-lg);
}

/* ── Botones e íconos interactivos: firma "medal glint" ── */
.mp-icon-btn, .np-icon-btn, .bp-icon-btn, .topbar-util-btn,
#hamburger-btn, .menu-item, .mp-crumb-home, .np-crumb-home {
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.mp-icon-btn::after, .np-icon-btn::after, .topbar-util-btn::after, .menu-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 215, 100, .35) 50%, transparent 60%);
    background-size: 220% 100%;
    background-position: 120% 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease);
}
.mp-icon-btn:hover::after, .np-icon-btn:hover::after,
.topbar-util-btn:hover::after, .menu-item:hover::after {
    opacity: 1;
    animation: glint-sweep .9s var(--ease) forwards;
}
@keyframes glint-sweep {
    from { background-position: 120% 0; }
    to   { background-position: -20% 0; }
}
.mp-icon-btn:hover, .np-icon-btn:hover, .topbar-util-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.mp-icon-btn:active, .np-icon-btn:active, .topbar-util-btn:active { transform: translateY(0) scale(.96); }

@media (prefers-reduced-motion: reduce) {
    .mp-icon-btn::after, .np-icon-btn::after, .topbar-util-btn::after, .menu-item::after { display: none; }
    .mp-icon-btn:hover, .np-icon-btn:hover, .topbar-util-btn:hover { transform: none; }
}

/* ── Tarjetas y contenedores: elevación suave al pasar el mouse ── */
.card, .tabla-wrapper, .bp-card, .np-card, .mp-card {
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover, .bp-card:hover, .np-card:hover, .mp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Íconos Morphicons ── */
.morph-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}
.morph-icon-wrap svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* ── Revelado suave al hacer scroll ── */
.mu-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.mu-reveal.mu-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mu-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Tipografía: tracking un poco más editorial en títulos serif ── */
h1, h2, h3, .bp-heading, .mp-heading, .np-header-titulo, #topbar-titulo-seccion {
    letter-spacing: -0.01em;
}

/* Imágenes con esquinas modernas por defecto dentro de galerías/tarjetas */
.mp-gallery img, .card img, .bp-card img {
    border-radius: var(--radius-sm);
}