:root {
    --color-brand-blue: #0A84FF;
    --color-brand-blue-dark: #0666D6;
    --color-brand-blue-light: #4DA3FF;
    --color-brand-green: #007A4F;
    --color-brand-accent: #17A2B8;
    --color-brand-orange: #CC4A00;

    --metal-blue-steel-1: #3A5BA0;
    --metal-blue-steel-2: #89A6E6;
    --metal-ti-light-1: #8A8E94;
    --metal-ti-light-2: #D3D5D8;
    --metal-ti-dark-1: #70757B;
    --metal-ti-dark-2: #A0A3A8;
    --metal-pearl-1: #FFFFFF;
    --metal-pearl-2: #E6E8EC;
    --metal-graphite-1: #1C1C1E;
    --metal-graphite-2: #2C2C2E;
    --metal-acc-green-1: #1F6B58;
    --metal-acc-green-2: #7AE3C3;
    --metal-silver-glow: #FFFFFF;

    --color-metal-primary: var(--metal-blue-steel-1);
    --color-metal-primary-2: var(--metal-blue-steel-2);
    --color-metal-neutral-1: var(--metal-ti-light-1);
    --color-metal-neutral-2: var(--metal-ti-light-2);
    --color-metal-dark-1: var(--metal-graphite-1);
    --color-metal-dark-2: var(--metal-graphite-2);
    --color-metal-accent: var(--metal-acc-green-1);
    --color-metal-accent-2: var(--metal-acc-green-2);

    --color-custom-blue: var(--color-brand-blue);
    --color-custom-green: var(--color-brand-green);
    --color-custom-indigo: #5856D6;
    --color-custom-dark: #1D1D1F;
    --color-custom-gray: #F5F5F7;
    --color-custom-hc: #FFD400;

    --color-gray-50: #F5F5F7;
    --color-gray-100: #E5E5EA;
    --color-gray-200: #D1D1D6;
    --color-gray-300: #C7C7CC;
    --color-gray-400: #AEAEB2;
    --color-gray-500: #8E8E93;
    --color-gray-600: #636366;
    --color-gray-700: #48484A;
    --color-gray-800: #3A3A3C;
    --color-gray-900: #1C1C1E;

    --v-opacity-xxweak: .02;
    --v-opacity-weak: .05;
    --v-opacity-light: .08;
    --v-opacity-mid: .10;
    --v-opacity-semi: .15;
    --v-opacity-strong: .20;
    --v-opacity-heavy: .30;
    --v-opacity-max: .40;

    --color-success: #30D158;
    --color-error: #FF453A;
    --color-warning: #FF9F0A;

    --success-rgb: 48 209 88;
    --error-rgb: 255 69 58;
    --warning-rgb: 255 159 10;
    --primary-rgb: 10 132 255;

    --surface-light: #FFFFFF;
    --surface-dark: #0B0B14;
    --surface-hc: #000000;

    --text-primary-light: var(--color-gray-900);
    --text-secondary-light: var(--color-gray-600);
    --text-inverse-light: #FFFFFF;

    --text-primary-dark: #FFFFFF;
    --text-secondary-dark: var(--color-gray-400);
    --text-inverse-dark: var(--color-gray-900);

    --text-primary-hc: #FFD400;
    --text-secondary-hc: #FFD400;
    --text-inverse-hc: #000000;

    --border-light: var(--color-gray-200);
    --border-dark: var(--color-gray-700);
    --border-hc: #FFD400;

    --hover-light: var(--color-gray-100);
    --hover-dark: rgb(255 255 255 / .08);
    --hover-hc: #333333;

    --glass-bg-light: rgb(255 255 255 / .85);
    --glass-border-light: rgb(0 0 0 / .08);
    --glass-bg-dark: rgb(28 28 30 / .78);
    --glass-border-dark: rgb(255 255 255 / .16);
    --glass-bg-hc: #000000;
    --glass-border-hc: #FFD400;

    --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, .10);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .15);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .25);
    --radius: .75rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --color-focus-ring: var(--color-brand-blue);

    --gradient-primary: linear-gradient(135deg, var(--color-brand-blue-light), var(--color-brand-blue));
    --gradient-primary-dark: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-blue-dark));
    --gradient-metal: linear-gradient(135deg, var(--metal-blue-steel-2), var(--metal-blue-steel-1));

    --btn-gradient-light: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-green));
    --btn-gradient-hover-light: linear-gradient(135deg,
            color-mix(in oklab, var(--color-brand-blue) 90%, black 10%),
            color-mix(in oklab, var(--color-brand-green) 90%, black 10%));
    --btn-gradient-dark: linear-gradient(135deg,
            color-mix(in oklab, var(--color-brand-blue) 80%, white 20%),
            var(--color-brand-green));
    --btn-gradient-hc: linear-gradient(135deg, var(--color-custom-hc), var(--color-custom-hc));
    --btn-gradient-hover-hc: var(--btn-gradient-hc);

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;

    --font-brand: 'Black Ops One', system-ui, sans-serif;
    --font-display: 'Exo', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace;
}

:root[data-theme="light"] {
    --bg-color: var(--surface-light);
    --text-color: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --input-bg: var(--surface-light);
    --input-border: var(--border-light);
    --border-default: var(--border-light);
    --glass-bg: var(--glass-bg-light);
    --glass-border: var(--glass-border-light);
    --btn-gradient: var(--btn-gradient-light);
    --btn-gradient-hover: var(--btn-gradient-hover-light);
    --surface-elevated: var(--glass-bg-light);
    --surface-elevated-border: var(--glass-border-light);
    --menu-bg: color-mix(in oklab, var(--surface-light) 94%, transparent);
    --menu-border: var(--glass-border-light);
    --row-hover: var(--hover-light);
    --feedback-success-bg: rgb(var(--success-rgb) / var(--v-opacity-light));
    --feedback-success-border: rgb(var(--success-rgb) / var(--v-opacity-semi));
    --feedback-success-text: var(--text-primary-light);
    --feedback-error-bg: rgb(var(--error-rgb) / var(--v-opacity-light));
    --feedback-error-border: rgb(var(--error-rgb) / var(--v-opacity-semi));
    --feedback-error-text: var(--text-primary-light);
    --feedback-warning-bg: rgb(var(--warning-rgb) / var(--v-opacity-light));
    --feedback-warning-border: rgb(var(--warning-rgb) / var(--v-opacity-semi));
    --feedback-warning-text: var(--text-primary-light);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg-color: var(--surface-dark);
    --text-color: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --input-bg: var(--color-gray-900);
    --input-border: var(--color-gray-800);
    --border-default: var(--color-gray-800);
    --glass-bg: var(--glass-bg-dark);
    --glass-border: var(--glass-border-dark);
    --btn-gradient: var(--gradient-primary);
    --btn-gradient-hover: linear-gradient(135deg,
            color-mix(in oklab, var(--color-brand-blue-light) 80%, white 20%),
            color-mix(in oklab, var(--color-brand-blue) 80%, white 20%));
    --surface-elevated: var(--glass-bg-dark);
    --surface-elevated-border: var(--glass-border-dark);
    --menu-bg: color-mix(in oklab, var(--metal-graphite-2) 85%, transparent);
    --menu-border: var(--glass-border-dark);
    --row-hover: var(--hover-dark);
    --feedback-success-bg: rgb(var(--success-rgb) / var(--v-opacity-semi));
    --feedback-success-border: rgb(var(--success-rgb) / var(--v-opacity-heavy));
    --feedback-success-text: var(--color-success);
    --feedback-error-bg: rgb(var(--error-rgb) / var(--v-opacity-semi));
    --feedback-error-border: rgb(var(--error-rgb) / var(--v-opacity-heavy));
    --feedback-error-text: var(--color-error);
    --feedback-warning-bg: rgb(var(--warning-rgb) / var(--v-opacity-semi));
    --feedback-warning-border: rgb(var(--warning-rgb) / var(--v-opacity-heavy));
    --feedback-warning-text: var(--color-warning);
    --gradient-metal: linear-gradient(135deg,
            color-mix(in oklab, var(--metal-blue-steel-2) 75%, white 25%),
            var(--metal-blue-steel-1));
    color-scheme: dark;
}

:root[data-theme="hc"] {
    --bg-color: var(--surface-hc);
    --text-color: var(--text-primary-hc);
    --text-secondary: var(--text-secondary-hc);
    --input-bg: var(--surface-hc);
    --input-border: var(--border-hc);
    --border-default: var(--border-hc);
    --glass-bg: var(--glass-bg-hc);
    --glass-border: var(--glass-border-hc);
    --btn-gradient: var(--btn-gradient-hc);
    --btn-gradient-hover: var(--btn-gradient-hover-hc);
    --surface-elevated: var(--surface-hc);
    --surface-elevated-border: var(--glass-border-hc);
    --menu-bg: var(--surface-hc);
    --menu-border: var(--glass-border-hc);
    --row-hover: var(--hover-hc);
    --feedback-success-bg: var(--surface-hc);
    --feedback-success-border: var(--glass-border-hc);
    --feedback-success-text: var(--text-primary-hc);
    --feedback-error-bg: var(--surface-hc);
    --feedback-error-border: var(--glass-border-hc);
    --feedback-error-text: var(--text-primary-hc);
    --feedback-warning-bg: var(--surface-hc);
    --feedback-warning-border: var(--glass-border-hc);
    --feedback-warning-text: var(--text-primary-hc);
    --gradient-metal: linear-gradient(135deg, var(--color-custom-hc), var(--color-custom-hc));
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    tab-size: 4
}

body {
    margin: 0;
    color: var(--text-color);
    background: var(--bg-color);
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: background-color .3s ease, color .3s ease;
    background:
        radial-gradient(1200px 800px at 10% -10%, rgba(var(--primary-rgb) / .10), transparent 60%),
        linear-gradient(180deg, color-mix(in oklab, var(--bg-color) 95%, white 5%) 0%, var(--bg-color) 60%, var(--bg-color) 100%)
}

[data-theme="dark"] body {
    background:
        radial-gradient(1200px 800px at 10% -10%, rgba(var(--primary-rgb) / .14), transparent 60%),
        linear-gradient(180deg, color-mix(in oklab, var(--bg-color) 90%, black 10%) 0%, var(--bg-color) 60%, var(--bg-color) 100%)
}

[data-theme="hc"] body {
    background: var(--surface-hc)
}

main {
    display: block;
    flex: 1
}

footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem)
}

/* Botón con gradiente de tema (reutilizable en toda la suite) */
.btn-gradient {
  background: var(--btn-gradient);
}

/* (Opcional) Accesibilidad visual para summary en details al foco con teclado */
details > summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}


/* Skip link accesible */
/* Estabilidad de scroll (no “smart anchor”) */
html {
    scroll-behavior: auto !important;
}

body {
    overflow-anchor: none;
}

/* Skip-link (visible al foco) */
.skip-link {
    position: fixed;
    inset-inline-start: 1rem;
    inset-block-start: 1rem;
    transform: translateY(-150%);
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: var(--glass-bg-light, rgba(255, 255, 255, .9));
    color: #111;
    border: 1px solid var(--glass-border-light, rgba(0, 0, 0, .1));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    z-index: 100;
    transition: transform .2s ease;
}

:root[data-theme="dark"] .skip-link {
    background: var(--glass-bg-dark, rgba(28, 28, 30, .9));
    color: #fff;
    border-color: var(--glass-border-dark, rgba(255, 255, 255, .2));
}

:root[data-theme="hc"] .skip-link {
    background: #000;
    color: #FFD400;
    border-color: #FFD400;
}

.skip-link:focus {
    outline: none;
    transform: translateY(0);
}

/* Barra y tarjetas: sin padding para que mande Tailwind */
.vo-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .35));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.vo-bar:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .08)
}

[data-theme="dark"] .vo-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .08));
    border-color: var(--glass-border-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2)
}

[data-theme="dark"] .vo-bar:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3)
}

[data-theme="hc"] .vo-bar {
    background: var(--surface-hc);
    border: 2px solid var(--border-hc);
    backdrop-filter: none
}

.vo-card {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    inline-size: 100%;
    background: var(--surface-elevated);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--surface-elevated-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.vo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb)/.3)
}

[data-theme="dark"] .vo-card:hover {
    border-color: rgba(var(--primary-rgb)/.5)
}

[data-theme="hc"] .vo-card {
    background: var(--surface-hc);
    border: 2px solid var(--border-hc);
    backdrop-filter: none
}

.vo-card .grid {
    width: 100%
}

/* Iconos */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: .3s
}

.icon-container-primary {
    background: var(--gradient-primary);
    color: var(--text-inverse-light);
    transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

[data-theme="light"] .icon-container-primary {
    background: var(--gradient-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb)/.25)
}

[data-theme="light"] [style*="background: var(--gradient-primary)"] {
    background: var(--gradient-primary-dark) !important;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb)/.2)
}

.icon-container-primary:hover,
[style*="background: var(--gradient-primary)"]:hover,
.icon-container-primary:focus,
[style*="background: var(--gradient-primary)"]:focus {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb)/.35), 0 2px 8px rgba(var(--primary-rgb)/.15)
}

[data-theme="light"] .icon-container-primary:is(:hover, :focus) {
    background: linear-gradient(135deg,
            color-mix(in oklab, var(--color-brand-blue-dark) 90%, black 10%),
            color-mix(in oklab, var(--color-brand-blue-dark) 80%, black 20%)) !important
}

[data-theme="dark"] .icon-container-primary:is(:hover, :focus),
[data-theme="dark"] [style*="background: var(--gradient-primary)"]:is(:hover, :focus) {
    background: var(--btn-gradient-hover) !important;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb)/.4), 0 2px 8px rgba(var(--primary-rgb)/.2)
}

[data-theme="hc"] .icon-container-primary:is(:hover, :focus),
[data-theme="hc"] [style*="background: var(--gradient-primary)"]:is(:hover, :focus) {
    background: var(--color-custom-hc) !important;
    box-shadow: 0 0 0 3px var(--surface-hc), 0 0 0 6px var(--color-custom-hc)
}

[data-theme="hc"] .icon-container-primary:is(:hover, :focus) i,
[data-theme="hc"] [style*="background: var(--gradient-primary)"]:is(:hover, :focus) i,
[data-theme="hc"] .icon-container-primary:is(:hover, :focus) svg path,
[data-theme="hc"] [style*="background: var(--gradient-primary)"]:is(:hover, :focus) svg path {
    color: var(--surface-hc) !important;
    fill: var(--surface-hc) !important
}

[data-theme="light"] .icon-container-primary i,
[data-theme="light"] [style*="background: var(--gradient-primary)"] svg path,
[data-theme="dark"] .icon-container-primary i,
[data-theme="dark"] [style*="background: var(--gradient-primary)"] svg path {
    color: var(--text-inverse-light) !important;
    fill: var(--text-inverse-light) !important
}

[data-theme="light"] .icon-blue {
    color: var(--color-brand-blue)
}

[data-theme="dark"] .icon-blue {
    color: var(--color-brand-blue-light)
}

[data-theme="light"] .icon-green {
    color: var(--color-brand-green)
}

[data-theme="dark"] .icon-green {
    color: var(--color-success)
}

[data-theme="light"] .icon-purple {
    color: var(--color-custom-indigo)
}

[data-theme="dark"] .icon-purple {
    color: var(--metal-blue-steel-2)
}

[data-theme="light"] .icon-orange {
    color: var(--color-warning)
}

[data-theme="dark"] .icon-orange {
    color: color-mix(in oklab, var(--color-warning) 80%, white 20%)
}

[data-theme="light"] .icon-red {
    color: var(--color-error)
}

[data-theme="dark"] .icon-red {
    color: color-mix(in oklab, var(--color-error) 80%, white 20%)
}

[data-theme="hc"] .icon-blue,
[data-theme="hc"] .icon-green,
[data-theme="hc"] .icon-purple,
[data-theme="hc"] .icon-orange,
[data-theme="hc"] .icon-red {
    color: var(--color-custom-hc)
}

.vo-card:hover .icon-blue {
    color: var(--color-brand-blue) !important
}

.vo-card:hover .icon-green {
    color: var(--color-brand-green) !important
}

.vo-card:hover .icon-purple {
    color: var(--color-custom-indigo) !important
}

.vo-card:hover .icon-orange {
    color: var(--color-warning) !important
}

.vo-card:hover .icon-red {
    color: var(--color-error) !important
}

[data-theme="dark"] .vo-card:hover .icon-blue {
    color: var(--color-brand-blue-light) !important
}

[data-theme="dark"] .vo-card:hover .icon-green {
    color: var(--color-success) !important
}

[data-theme="dark"] .vo-card:hover .icon-purple {
    color: var(--metal-blue-steel-2) !important
}

[data-theme="dark"] .vo-card:hover .icon-orange {
    color: color-mix(in oklab, var(--color-warning) 80%, white 20%) !important
}

[data-theme="dark"] .vo-card:hover .icon-red {
    color: color-mix(in oklab, var(--color-error) 80%, white 20%) !important
}

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--border-default);
    background: rgb(127 127 127 / .08);
    transition: .2s
}

[data-theme="dark"] .chip {
    background: rgba(255, 255, 255, .08)
}

[data-theme="hc"] .chip {
    background: var(--surface-hc);
    border: 2px solid var(--border-hc);
    color: var(--text-primary-hc)
}

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: .5rem
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    opacity: .5
}

.breadcrumb-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .2s
}

.breadcrumb-link:hover {
    color: var(--text-color)
}

.breadcrumb-current {
    color: var(--text-color);
    font-weight: 600
}


/* Botón volver — minimalista */
.back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--text-color);
    background: transparent;
    border: none;
    transition: all .2s ease;
}

.back-button:hover,
.back-button:focus-visible {
    background: color-mix(in oklab, var(--row-hover) 90%, transparent);
    transform: translateX(-2px);
}

.back-button i {
    font-size: 1.1rem;
    line-height: 1;
}

/* Tema alto contraste */
[data-theme="hc"] .back-button {
    color: var(--color-custom-hc);
    border: 2px solid var(--color-custom-hc);
    background: transparent;
}



/* Botón atrás: en móvil fantasma, en desktop glass como antes */
@media (max-width: 767.98px) {
    .back-button {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .back-button:hover {
        transform: none !important;
    }

    .back-button i {
        font-size: 1.25rem;
        line-height: 2rem;
    }
}

/* Desktop: equilibra el bloque centrado (marca) para que no “empuje” */
/*@media (min-width: 768px) {
    .vo-bar>.md\:col-start-2 {
        max-width: min(100%, 42rem);
    }
}*/
@media (min-width: 768px) {
  .vo-bar>.md\:col-start-2 { max-width: none; } /* o 64rem si quieres límite */
}

/* Footer */
.footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: .875rem
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
}

.footer-links {
    display: flex;
    gap: 1.5rem
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .2s
}

.footer-link:hover {
    color: var(--text-color)
}

/* Utilidades */
.muted {
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.5
}

.section-spacing {
    margin-bottom: 2rem
}

.card-spacing {
    margin-bottom: 1.5rem
}

.title {
    font-family: var(--font-display);
    font-weight: 600
}

.brand-text {
    font-family: var(--font-brand);
    font-weight: 900;
    letter-spacing: .04em
}

.border-soft {
    border-color: color-mix(in oklab, var(--border-default) 70%, transparent)
}

.divide-soft>tr+tr,
.divide-soft>*+* {
    border-top: 1px solid color-mix(in oklab, var(--border-default) 60%, transparent)
}

.swatch {
    border-radius: 1rem;
    border: 1px solid var(--border-default)
}

/* Logos por tema */
.logo-theme--light {
    display: block
}

.logo-theme--dark,
.logo-theme--hc {
    display: none
}

:root[data-theme="dark"] .logo-theme--light {
    display: none
}

:root[data-theme="dark"] .logo-theme--dark {
    display: block
}

:root[data-theme="hc"] .logo-theme--light,
:root[data-theme="hc"] .logo-theme--dark {
    display: none
}

:root[data-theme="hc"] .logo-theme--hc {
    display: block
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animate-fadeIn {
    animation: fadeIn .4s ease-out
}

.animate-slideIn {
    animation: slideIn .3s ease-out
}

.animate-scaleIn {
    animation: scaleIn .25s ease-out both
}

@media (prefers-reduced-motion:reduce) {
    .animate-fadeIn {
        animation: none
    }
}

/* Fixes de layout */
/* Fixes de layout (sin romper Tailwind) */
#main-content{
  align-self: stretch;
  width: 100%;
}

/* Mantén el “full width”, pero NO toques display */
#main-content > *{
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

#main-content>section:first-of-type {
    width: 100%
}

/* Responsivo */
.footer-content {
    flex-direction: column;
    text-align: center
}

.footer-links {
    justify-content: center;
    flex-wrap: wrap
}

@media (min-width:768px) {
    .vo-bar {
        border-radius: 16px
    }

    .vo-card {
        border-radius: 20px
    }

    .footer-content {
        flex-direction: row;
        text-align: initial
    }

    .footer-links {
        justify-content: initial;
        flex-wrap: nowrap
    }
}

/* Selector */
/* Botón del header: foco accesible */
.header-control:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Panel flotante */
.selector-panel {
    position: absolute;
    inset-block-start: 100%;
    margin-block-start: .5rem;
    inset-inline-end: 0;
    min-width: 10rem;
    max-width: 26rem;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .08);
    overflow: hidden;
    z-index: 50;
}

[data-theme="dark"] .selector-panel {
    background: rgba(28, 28, 30, .85);
    border-color: var(--glass-border-dark);
}

[data-theme="hc"] .selector-panel {
    background: var(--surface-hc);
    border: 2px solid var(--border-hc);
}

/* Scroll interno */
.selector-panel-scroll {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fila de opción: una línea, sin romper */
.selector-option {
    white-space: nowrap;
}

.selector-option>span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Foco accesible dentro del panel */
.selector-option:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

/* En móvil abrimos hacia la izquierda por defecto (alineado al botón) */
@media (max-width: 767.98px) {
    .selector-panel {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}