/**
 * VIAS3D — Librería de componentes
 * Todo consume los tokens de vias-tokens.css, así que cada pieza
 * responde automáticamente al tema claro/oscuro.
 *
 * Índice
 *   1.  Base
 *   2.  Header flotante
 *   3.  Navegación + mega menú con tarjetas de icono
 *   4.  Subheader (barra de secciones con iconos)
 *   5.  Switch de tema
 *   6.  Menú móvil
 *   7.  Botones
 *   8.  Tarjetas
 *   9.  Formularios
 *   10. Badges, chips y estados
 *   11. Estadísticas y secciones
 *   12. Tablas
 *   13. Utilidades
 */

/* ==========================================================================
   1. Base
   ========================================================================== */
body {
    background-color: var(--v-bg);
    color           : var(--v-text);
    /* La tipografía es la de la plantilla (Manrope). No se sobrescribe. */
}

::selection {
    background: var(--v-primary);
    color     : var(--v-on-primary);
}

/* Scrollbar acorde al tema */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--v-border-strong) transparent;
}

*::-webkit-scrollbar {
    width : 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background   : var(--v-border-strong);
    border-radius: var(--v-radius-pill);
    border       : 2px solid var(--v-bg);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--v-primary);
}

/* Logotipo que sigue al tema. Se usan dos <img> y se muestra el que toca:
   así el navegador cachea ambos y no hay parpadeo al cambiar de tema. */
.v-logo {
    display    : inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.v-logo img {
    display   : block;
    height    : 38px;
    width     : auto;
    max-width : 100%;
}

.v-logo .v-logo-dark  { display: block; }
.v-logo .v-logo-light { display: none; }

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

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .v-logo .v-logo-dark  { display: none; }
    :root:not([data-theme]) .v-logo .v-logo-light { display: block; }
}

/* ==========================================================================
   2. Header flotante
   ========================================================================== */
.v-header {
    position     : fixed;
    top          : 20px;
    left         : 50%;
    transform    : translateX(-50%);
    z-index      : 1000;
    width        : calc(100% - 32px);
    max-width    : var(--v-container);
    border-radius: var(--v-radius-pill);
    border       : 1px solid var(--v-glass-border);
    background   : var(--v-glass);
    backdrop-filter        : blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow   : var(--v-shadow);
    transition   : top 0.35s var(--v-ease),
                   box-shadow 0.35s var(--v-ease),
                   background 0.35s var(--v-ease);
}

.v-header.is-stuck {
    top       : 10px;
    box-shadow: var(--v-shadow-lg);
}

.v-header-inner {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--v-space-6);
    padding        : 10px 12px 10px 24px;
    min-height     : var(--v-header-h);
}

/* Espacio bajo el header fijo para que el contenido no quede tapado */
.v-has-header {
    padding-top: calc(var(--v-header-h) + 44px);
}

/* ==========================================================================
   3. Navegación + mega menú
   ========================================================================== */
.v-nav {
    display    : flex;
    align-items: center;
    gap        : var(--v-space-2);
    list-style : none;
    margin     : 0;
    padding    : 0;
}

@media (max-width: 1199px) {
    .v-nav { display: none; }
}

.v-nav-item {
    position: relative;
}

.v-nav-link {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 10px 14px;
    border-radius  : var(--v-radius-pill);
    font-size      : var(--v-text-sm);
    font-weight    : 600;
    letter-spacing : 0.01em;
    color          : var(--v-text);
    text-decoration: none;
    white-space    : nowrap;
    transition     : var(--v-transition);
}

.v-nav-link:hover,
.v-nav-item.is-open > .v-nav-link {
    color     : var(--v-fg);
    background: var(--v-brand-tint);
}

/* Página actual */
.v-nav-item.is-current > .v-nav-link {
    color: var(--v-primary);
}

.v-nav-link .v-chevron {
    width     : 10px;
    height    : 10px;
    flex      : 0 0 auto;
    transition: transform 0.35s var(--v-ease);
}

.v-nav-item.is-open .v-nav-link .v-chevron {
    transform: rotate(180deg);
}

/* ---- Panel del mega menú ---- */
.v-megamenu {
    position      : absolute;
    top           : calc(100% + 14px);
    left          : 50%;
    transform     : translateX(-50%) translateY(-8px);
    z-index       : 1001;
    width         : max-content;
    max-width     : min(920px, calc(100vw - 48px));
    padding       : var(--v-space-4);
    border-radius : var(--v-radius-lg);
    border        : 1px solid var(--v-glass-border);
    background    : var(--v-surface);
    box-shadow    : var(--v-shadow-lg);
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : opacity 0.28s var(--v-ease),
                    transform 0.28s var(--v-ease),
                    visibility 0.28s var(--v-ease);
}

/* Menús anclados al inicio del item cuando son muy anchos */
.v-nav-item:first-child .v-megamenu {
    left     : 0;
    transform: translateX(0) translateY(-8px);
}

.v-nav-item.is-open .v-megamenu {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transform     : translateX(-50%) translateY(0);
}

.v-nav-item.is-open:first-child .v-megamenu {
    transform: translateX(0) translateY(0);
}

/* Puente invisible: evita que el menú se cierre al mover el ratón hacia él */
.v-megamenu::before {
    content : '';
    position: absolute;
    top     : -16px;
    left    : 0;
    right   : 0;
    height  : 16px;
}

.v-megamenu-grid {
    display              : grid;
    grid-template-columns: repeat(var(--v-menu-cols, 2), minmax(240px, 1fr));
    gap                  : var(--v-space-1);
}

.v-megamenu-grid.cols-1 { --v-menu-cols: 1; }
.v-megamenu-grid.cols-3 { --v-menu-cols: 3; }

@media (max-width: 991px) {
    .v-megamenu-grid { --v-menu-cols: 1 !important; }
}

/* Encabezado de columna dentro del mega menú */
.v-megamenu-col-title {
    grid-column   : 1 / -1;
    padding       : var(--v-space-2) var(--v-space-3) var(--v-space-1);
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color         : var(--v-text-subtle);
}

/* ---- Tarjeta de item de menú: icono + título + descripción ---- */
.v-menu-card {
    position       : relative;
    display        : flex;
    align-items    : flex-start;
    gap            : var(--v-space-3);
    padding        : var(--v-space-3);
    border-radius  : var(--v-radius-md);
    border         : 1px solid transparent;
    text-decoration: none;
    transition     : var(--v-transition);
}

.v-menu-card:hover {
    background  : var(--v-surface-2);
    border-color: var(--v-border);
}

.v-menu-card-icon {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex           : 0 0 auto;
    width          : 38px;
    height         : 38px;
    margin-top     : 2px;
    border-radius  : var(--v-radius);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-accent);
    transition     : var(--v-transition);
}

.v-menu-card:hover .v-menu-card-icon {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
    transform   : translateY(-1px);
    box-shadow  : var(--v-shadow-brand);
}

.v-menu-card-icon svg {
    width : 19px;
    height: 19px;
}

.v-menu-card-body {
    min-width: 0;
}

.v-menu-card-title {
    display    : flex;
    align-items: center;
    gap        : 6px;
    margin     : 0 0 3px;
    font-size  : var(--v-text-sm);
    font-weight: 700;
    line-height: 1.35;
    color      : var(--v-fg);
}

.v-menu-card-title .v-arrow {
    width     : 14px;
    height    : 14px;
    opacity   : 0;
    transform : translateX(-6px);
    transition: opacity 0.3s var(--v-ease) 0.05s, transform 0.3s var(--v-ease) 0.05s;
    color     : var(--v-primary);
}

.v-menu-card:hover .v-menu-card-title .v-arrow {
    opacity  : 1;
    transform: translateX(0);
}

.v-menu-card-desc {
    margin     : 0;
    font-size  : var(--v-text-xs);
    line-height: 1.5;
    color      : var(--v-text-muted);
}

/* Pie del mega menú: llamada a la acción destacada */
.v-megamenu-foot {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--v-space-4);
    margin-top     : var(--v-space-3);
    padding        : var(--v-space-4);
    border-radius  : var(--v-radius-md);
    background     : var(--v-gradient-soft);
    border         : 1px solid var(--v-border);
}

.v-megamenu-foot p {
    margin   : 0;
    font-size: var(--v-text-sm);
    color    : var(--v-text-muted);
}

.v-megamenu-foot strong {
    display: block;
    color  : var(--v-fg);
}

/* ==========================================================================
   4. Subheader — barra de secciones con iconos
   ========================================================================== */
.v-subheader {
    position     : sticky;
    top          : calc(var(--v-header-h) + 26px);
    z-index      : 900;
    border-bottom: 1px solid var(--v-border);
    background   : var(--v-glass);
    backdrop-filter        : blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.v-subheader-inner {
    display        : flex;
    align-items    : center;
    gap            : var(--v-space-2);
    max-width      : var(--v-container);
    margin         : 0 auto;
    padding        : var(--v-space-3) var(--v-space-4);
    overflow-x     : auto;
    scrollbar-width: none;
}

.v-subheader-inner::-webkit-scrollbar { display: none; }

/* Item del subheader: pastilla con icono */
.v-subnav-item {
    display        : inline-flex;
    align-items    : center;
    gap            : var(--v-space-2);
    flex           : 0 0 auto;
    padding        : 9px 16px;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface);
    color          : var(--v-text-muted);
    font-size      : var(--v-text-sm);
    font-weight    : 600;
    text-decoration: none;
    white-space    : nowrap;
    transition     : var(--v-transition);
}

.v-subnav-item svg {
    width : 16px;
    height: 16px;
}

.v-subnav-item:hover {
    color       : var(--v-fg);
    border-color: var(--v-border-strong);
    background  : var(--v-surface-2);
    transform   : translateY(-1px);
}

.v-subnav-item.is-active {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
    box-shadow  : var(--v-shadow-brand);
}

.v-subnav-item.is-active:hover {
    color: var(--v-on-primary);
}

/* Contador opcional dentro de la pastilla */
.v-subnav-count {
    padding      : 1px 7px;
    border-radius: var(--v-radius-pill);
    background   : var(--v-brand-tint);
    color        : var(--v-primary);
    font-size    : 11px;
    font-weight  : 700;
}

.v-subnav-item.is-active .v-subnav-count {
    background: rgba(var(--v-fg-rgb), 0.22);
    color     : var(--v-on-primary);
}

/* ==========================================================================
   5. Switch de tema
   ========================================================================== */
.v-theme-toggle {
    position       : relative;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    flex           : 0 0 auto;
    width          : 42px;
    height         : 42px;
    padding        : 0;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-text);
    cursor         : pointer;
    overflow       : hidden;
    transition     : var(--v-transition);
}

.v-theme-toggle:hover {
    color       : var(--v-primary);
    border-color: var(--v-primary);
    background  : var(--v-brand-tint);
}

.v-theme-toggle:focus-visible {
    outline       : 2px solid var(--v-primary);
    outline-offset: 2px;
}

.v-theme-toggle svg {
    position  : absolute;
    width     : 19px;
    height    : 19px;
    transition: transform 0.45s var(--v-ease), opacity 0.35s var(--v-ease);
}

/* En oscuro se ve el sol (acción: pasar a claro). En claro, la luna. */
.v-theme-toggle .v-icon-sun {
    opacity  : 1;
    transform: rotate(0deg) scale(1);
}

.v-theme-toggle .v-icon-moon {
    opacity  : 0;
    transform: rotate(-90deg) scale(0.5);
}

:root[data-theme="light"] .v-theme-toggle .v-icon-sun {
    opacity  : 0;
    transform: rotate(90deg) scale(0.5);
}

:root[data-theme="light"] .v-theme-toggle .v-icon-moon {
    opacity  : 1;
    transform: rotate(0deg) scale(1);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .v-theme-toggle .v-icon-sun {
        opacity  : 0;
        transform: rotate(90deg) scale(0.5);
    }
    :root:not([data-theme]) .v-theme-toggle .v-icon-moon {
        opacity  : 1;
        transform: rotate(0deg) scale(1);
    }
}

/* ---- Variante segmentada: Claro | Auto | Oscuro ---- */
.v-theme-segmented {
    display      : inline-flex;
    align-items  : center;
    gap          : 2px;
    padding      : 3px;
    border-radius: var(--v-radius-pill);
    border       : 1px solid var(--v-border);
    background   : var(--v-surface-2);
}

.v-theme-segmented button {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 7px 14px;
    border         : 0;
    border-radius  : var(--v-radius-pill);
    background     : transparent;
    color          : var(--v-text-muted);
    font-family    : inherit;
    font-size      : var(--v-text-xs);
    font-weight    : 600;
    cursor         : pointer;
    transition     : var(--v-transition);
}

.v-theme-segmented button svg {
    width : 14px;
    height: 14px;
}

.v-theme-segmented button:hover {
    color: var(--v-fg);
}

.v-theme-segmented button.is-active {
    background: var(--v-primary);
    color     : var(--v-on-primary);
}

/* ==========================================================================
   6. Menú móvil
   ========================================================================== */
.v-burger {
    display        : none;
    align-items    : center;
    justify-content: center;
    width          : 42px;
    height         : 42px;
    padding        : 0;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-text);
    cursor         : pointer;
    transition     : var(--v-transition);
}

.v-burger:hover {
    color       : var(--v-primary);
    border-color: var(--v-primary);
}

.v-burger svg { width: 18px; height: 18px; }

@media (max-width: 1199px) {
    .v-burger { display: inline-flex; }
}

.v-drawer {
    position  : fixed;
    inset     : 0;
    z-index   : 1100;
    visibility: hidden;
    opacity   : 0;
    transition: opacity 0.3s var(--v-ease), visibility 0.3s var(--v-ease);
}

.v-drawer.is-open {
    visibility: visible;
    opacity   : 1;
}

.v-drawer-scrim {
    position  : absolute;
    inset     : 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.v-drawer-panel {
    position     : absolute;
    top          : 0;
    right        : 0;
    width        : min(420px, 88vw);
    height       : 100%;
    padding      : var(--v-space-6);
    overflow-y   : auto;
    background   : var(--v-surface);
    border-left  : 1px solid var(--v-border);
    transform    : translateX(100%);
    transition   : transform 0.35s var(--v-ease);
}

.v-drawer.is-open .v-drawer-panel {
    transform: translateX(0);
}

.v-drawer-head {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--v-space-4);
    margin-bottom  : var(--v-space-6);
}

.v-drawer-close {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 38px;
    height         : 38px;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-text);
    cursor         : pointer;
    transition     : var(--v-transition);
}

.v-drawer-close:hover {
    color       : var(--v-primary);
    border-color: var(--v-primary);
}

.v-drawer-close svg { width: 15px; height: 15px; }

/* Acordeón del menú móvil */
.v-acc-trigger {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
    gap            : var(--v-space-3);
    padding        : var(--v-space-3) var(--v-space-2);
    border         : 0;
    border-bottom  : 1px solid var(--v-border);
    background     : transparent;
    color          : var(--v-fg);
    font-family    : inherit;
    font-size      : var(--v-text-base);
    font-weight    : 700;
    text-align     : left;
    text-decoration: none;
    cursor         : pointer;
}

.v-acc-trigger .v-chevron {
    width     : 12px;
    height    : 12px;
    color     : var(--v-text-muted);
    transition: transform 0.3s var(--v-ease);
}

.v-acc.is-open .v-acc-trigger .v-chevron {
    transform: rotate(180deg);
}

.v-acc-panel {
    display       : grid;
    grid-template-rows: 0fr;
    transition    : grid-template-rows 0.35s var(--v-ease);
}

.v-acc.is-open .v-acc-panel {
    grid-template-rows: 1fr;
}

.v-acc-panel > div {
    overflow: hidden;
}

.v-acc-panel .v-menu-card {
    padding: var(--v-space-3) var(--v-space-2);
}

/* ==========================================================================
   7. Botones
   ========================================================================== */
.v-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : var(--v-space-2);
    padding        : 12px 24px;
    border         : 1px solid transparent;
    border-radius  : var(--v-radius-pill);
    background     : var(--v-primary);
    color          : var(--v-on-primary);
    font-family    : inherit;
    font-size      : var(--v-text-sm);
    font-weight    : 700;
    line-height    : 1.2;
    text-decoration: none;
    white-space    : nowrap;
    cursor         : pointer;
    transition     : var(--v-transition);
}

.v-btn:hover {
    background: var(--v-primary-hover);
    color     : var(--v-on-primary);
    transform : translateY(-2px);
    box-shadow: var(--v-shadow-brand);
}

.v-btn:active {
    background: var(--v-primary-active);
    transform : translateY(0);
    box-shadow: none;
}

.v-btn:focus-visible {
    outline       : 2px solid var(--v-primary);
    outline-offset: 3px;
}

.v-btn svg { width: 16px; height: 16px; }

.v-btn-secondary {
    background  : var(--v-surface-2);
    border-color: var(--v-border);
    color       : var(--v-fg);
}

.v-btn-secondary:hover {
    background  : var(--v-surface-3);
    border-color: var(--v-border-strong);
    color       : var(--v-fg);
    box-shadow  : var(--v-shadow);
}

.v-btn-outline {
    background  : transparent;
    border-color: var(--v-primary);
    color       : var(--v-primary);
}

.v-btn-outline:hover {
    background: var(--v-primary);
    color     : var(--v-on-primary);
}

.v-btn-outline:active,
.v-btn-secondary:active,
.v-btn-ghost:active {
    background  : var(--v-primary-active);
    border-color: var(--v-primary-active);
    color       : var(--v-on-primary);
}

.v-btn-ghost {
    background: transparent;
    color     : var(--v-text);
}

.v-btn-ghost:hover {
    background: var(--v-brand-tint);
    color     : var(--v-primary);
    box-shadow: none;
}

.v-btn-sm { padding: 8px 16px; font-size: var(--v-text-xs); }
.v-btn-lg { padding: 16px 32px; font-size: var(--v-text-base); }

.v-btn[disabled],
.v-btn.is-disabled {
    opacity       : 0.5;
    cursor        : not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   8. Tarjetas
   ========================================================================== */
.v-card {
    position     : relative;
    display      : flex;
    flex-direction: column;
    padding      : var(--v-space-6);
    border-radius: var(--v-radius-lg);
    border       : 1px solid var(--v-border);
    background   : var(--v-surface);
    transition   : var(--v-transition);
}

.v-card:hover {
    border-color: var(--v-border-strong);
    transform   : translateY(-4px);
    box-shadow  : var(--v-shadow-lg);
}

/* Filo naranja que aparece al pasar el ratón */
.v-card-accent::after {
    content      : '';
    position     : absolute;
    inset        : 0;
    border-radius: inherit;
    border       : 1px solid var(--v-primary);
    opacity      : 0;
    transition   : opacity var(--v-duration) var(--v-ease);
    pointer-events: none;
}

.v-card-accent:hover::after { opacity: 1; }

.v-card-icon {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 52px;
    height         : 52px;
    margin-bottom  : var(--v-space-5);
    border-radius  : var(--v-radius-md);
    border         : 1px solid var(--v-border);
    background     : var(--v-brand-tint);
    color          : var(--v-accent);
    transition     : var(--v-transition);
}

.v-card:hover .v-card-icon {
    background  : var(--v-primary);
    border-color: var(--v-primary);
    color       : var(--v-on-primary);
    box-shadow  : var(--v-shadow-brand);
}

.v-card-icon svg { width: 24px; height: 24px; }

.v-card-title {
    margin     : 0 0 var(--v-space-3);
    font-size  : var(--v-text-xl);
    font-weight: 700;
    line-height: 1.3;
    color      : var(--v-fg);
}

.v-card-text {
    margin     : 0;
    font-size  : var(--v-text-sm);
    line-height: 1.65;
    color      : var(--v-text-muted);
}

.v-card-foot {
    display    : flex;
    align-items: center;
    gap        : var(--v-space-2);
    margin-top : auto;
    padding-top: var(--v-space-5);
    color      : var(--v-primary);
    font-size  : var(--v-text-sm);
    font-weight: 700;
}

.v-card-foot svg {
    width     : 15px;
    height    : 15px;
    transition: transform var(--v-duration) var(--v-ease);
}

.v-card:hover .v-card-foot svg { transform: translateX(4px); }

/* Rejilla de tarjetas */
.v-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : var(--v-space-6);
}

.v-grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.v-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

@media (max-width: 575px) {
    .v-grid,
    .v-grid-2,
    .v-grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. Formularios
   ========================================================================== */
.v-field {
    display       : flex;
    flex-direction: column;
    gap           : var(--v-space-2);
    margin-bottom : var(--v-space-5);
}

.v-label {
    font-size  : var(--v-text-sm);
    font-weight: 600;
    color      : var(--v-text);
}

.v-input,
.v-select,
.v-textarea {
    width        : 100%;
    padding      : 13px 16px;
    border-radius: var(--v-radius);
    border       : 1px solid var(--v-border);
    background   : var(--v-surface-2);
    color        : var(--v-fg);
    font-family  : inherit;
    font-size    : var(--v-text-sm);
    transition   : var(--v-transition);
}

.v-input::placeholder,
.v-textarea::placeholder {
    color: var(--v-text-subtle);
}

.v-input:focus,
.v-select:focus,
.v-textarea:focus {
    outline     : none;
    border-color: var(--v-primary);
    box-shadow  : 0 0 0 3px var(--v-brand-tint);
}

.v-textarea {
    min-height: 130px;
    resize    : vertical;
}

.v-hint  { font-size: var(--v-text-xs); color: var(--v-text-subtle); }
.v-error { font-size: var(--v-text-xs); color: var(--v-danger); }

.v-input.has-error,
.v-textarea.has-error {
    border-color: var(--v-danger);
}

/* Switch genérico reutilizable */
.v-switch {
    position     : relative;
    display      : inline-block;
    width        : 46px;
    height       : 26px;
    flex         : 0 0 auto;
}

.v-switch input {
    position: absolute;
    opacity : 0;
    width   : 0;
    height  : 0;
}

.v-switch-track {
    position     : absolute;
    inset        : 0;
    border-radius: var(--v-radius-pill);
    background   : var(--v-surface-3);
    border       : 1px solid var(--v-border);
    cursor       : pointer;
    transition   : var(--v-transition);
}

.v-switch-track::before {
    content      : '';
    position     : absolute;
    top          : 3px;
    left         : 3px;
    width        : 18px;
    height       : 18px;
    border-radius: 50%;
    background   : var(--v-fg);
    transition   : var(--v-transition);
}

.v-switch input:checked + .v-switch-track {
    background  : var(--v-primary);
    border-color: var(--v-primary);
}

.v-switch input:checked + .v-switch-track::before {
    transform : translateX(20px);
    background: var(--v-on-primary);
}

.v-switch input:focus-visible + .v-switch-track {
    outline       : 2px solid var(--v-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   10. Badges, chips y estados
   ========================================================================== */
.v-badge {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 5px 12px;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-text-muted);
    font-size      : var(--v-text-xs);
    font-weight    : 700;
    letter-spacing : 0.02em;
}

.v-badge svg { width: 13px; height: 13px; }

.v-badge-brand   { background: var(--v-brand-tint); border-color: transparent; color: var(--v-primary); }
.v-badge-success { background: rgba(31, 169, 113, 0.14); border-color: transparent; color: var(--v-success); }
.v-badge-warning { background: rgba(224, 161, 22, 0.14); border-color: transparent; color: var(--v-warning); }
.v-badge-danger  { background: rgba(217, 58, 58, 0.14);  border-color: transparent; color: var(--v-danger); }
.v-badge-info    { background: rgba(46, 111, 242, 0.14); border-color: transparent; color: var(--v-info); }

/* Etiqueta de sección: la línea naranja + texto en mayúsculas */
.v-eyebrow {
    display       : inline-flex;
    align-items   : center;
    gap           : var(--v-space-3);
    margin-bottom : var(--v-space-4);
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color         : var(--v-primary);
}

.v-eyebrow::before {
    content      : '';
    width        : 28px;
    height       : 2px;
    border-radius: 2px;
    background   : var(--v-primary);
}

/* ==========================================================================
   11. Estadísticas y secciones
   ========================================================================== */
.v-section {
    padding: var(--v-space-20) 0;
}

.v-container {
    width      : 100%;
    max-width  : var(--v-container);
    margin     : 0 auto;
    padding    : 0 var(--v-space-4);
}

.v-section-head {
    max-width    : 720px;
    margin-bottom: var(--v-space-12);
}

.v-section-head.is-center {
    margin-left : auto;
    margin-right: auto;
    text-align  : center;
}

.v-section-head.is-center .v-eyebrow {
    justify-content: center;
}

.v-section-title {
    margin     : 0 0 var(--v-space-4);
    font-size  : clamp(28px, 4vw, var(--v-text-4xl));
    font-weight: 800;
    line-height: 1.15;
    color      : var(--v-fg);
}

.v-section-sub {
    margin     : 0;
    font-size  : var(--v-text-lg);
    line-height: 1.65;
    color      : var(--v-text-muted);
}

.v-stat {
    padding      : var(--v-space-6);
    border-radius: var(--v-radius-lg);
    border       : 1px solid var(--v-border);
    background   : var(--v-surface);
    text-align   : center;
    transition   : var(--v-transition);
}

.v-stat:hover {
    border-color: var(--v-primary);
    transform   : translateY(-4px);
}

.v-stat-value {
    display    : block;
    font-size  : clamp(32px, 5vw, var(--v-text-5xl));
    font-weight: 800;
    line-height: 1;
    color      : var(--v-accent);
}

.v-stat-label {
    display   : block;
    margin-top: var(--v-space-3);
    font-size : var(--v-text-sm);
    color     : var(--v-text-muted);
}

/* ==========================================================================
   12. Tablas
   ========================================================================== */
.v-table-wrap {
    overflow-x   : auto;
    border-radius: var(--v-radius-lg);
    border       : 1px solid var(--v-border);
}

.v-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : var(--v-text-sm);
    background     : var(--v-surface);
}

.v-table th,
.v-table td {
    padding      : var(--v-space-4);
    text-align   : left;
    border-bottom: 1px solid var(--v-border);
}

.v-table th {
    background    : var(--v-surface-2);
    color         : var(--v-text-subtle);
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space   : nowrap;
}

.v-table td { color: var(--v-text); }

.v-table tbody tr:last-child td { border-bottom: 0; }

.v-table tbody tr { transition: background var(--v-duration) var(--v-ease); }

.v-table tbody tr:hover { background: var(--v-surface-2); }

/* ==========================================================================
   13. Utilidades
   ========================================================================== */
.v-text-brand  { color: var(--v-primary) !important; }
.v-text-muted  { color: var(--v-text-muted) !important; }
.v-text-fg     { color: var(--v-fg) !important; }
.v-bg-surface  { background: var(--v-surface) !important; }
.v-bg-brand    { background: var(--v-primary) !important; color: var(--v-on-primary) !important; }
.v-border      { border: 1px solid var(--v-border) !important; }
.v-rounded     { border-radius: var(--v-radius-lg) !important; }

.v-gradient-text {
    background             : var(--v-gradient);
    -webkit-background-clip: text;
    background-clip        : text;
    -webkit-text-fill-color: transparent;
    color                  : transparent;
}

.v-stack   { display: flex; flex-direction: column; gap: var(--v-space-4); }
.v-row     { display: flex; align-items: center; gap: var(--v-space-4); flex-wrap: wrap; }
.v-spacer  { flex: 1 1 auto; }

.v-sr-only {
    position: absolute;
    width   : 1px;
    height  : 1px;
    padding : 0;
    margin  : -1px;
    overflow: hidden;
    clip    : rect(0, 0, 0, 0);
    white-space: nowrap;
    border  : 0;
}

/* Acciones del header a la derecha */
.v-header-actions {
    display    : flex;
    align-items: center;
    gap        : var(--v-space-2);
    flex       : 0 0 auto;
}

@media (max-width: 767px) {
    .v-header-actions .v-btn { display: none; }
    .v-header-inner { padding-left: 16px; }
    .v-logo img { height: 30px; }
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.v-footer {
    margin-top : var(--v-space-20);
    padding    : var(--v-space-20) 0 var(--v-space-8);
    border-top : 1px solid var(--v-border);
    background : var(--v-surface);
}

.v-footer-top {
    display              : grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap                  : var(--v-space-10);
    padding-bottom       : var(--v-space-12);
}

@media (max-width: 1199px) {
    .v-footer-top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 767px) {
    .v-footer-top { grid-template-columns: 1fr; gap: var(--v-space-8); }
}

.v-footer-brand .v-logo img { height: 44px; }

.v-footer-desc {
    margin     : var(--v-space-5) 0 var(--v-space-6);
    max-width  : 34ch;
    font-size  : var(--v-text-sm);
    line-height: 1.7;
    color      : var(--v-text-muted);
}

.v-footer-social {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--v-space-2);
}

.v-footer-social a {
    display        : inline-flex;
    align-items    : center;
    gap            : 7px;
    padding        : 7px 14px;
    border-radius  : var(--v-radius-pill);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface-2);
    color          : var(--v-text-muted);
    font-size      : var(--v-text-xs);
    font-weight    : 600;
    text-decoration: none;
    transition     : var(--v-transition);
}

.v-footer-social a:hover {
    border-color: var(--v-primary);
    color       : var(--v-primary);
    background  : var(--v-brand-tint);
}

.v-footer-social svg { width: 14px; height: 14px; }

.v-footer-col {
    display       : flex;
    flex-direction: column;
    gap           : var(--v-space-3);
}

.v-footer-col h4 {
    margin        : 0 0 var(--v-space-2);
    font-size     : var(--v-text-xs);
    font-weight   : 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color         : var(--v-text-subtle);
}

.v-footer-col a {
    font-size      : var(--v-text-sm);
    line-height    : 1.5;
    color          : var(--v-text-muted);
    text-decoration: none;
    transition     : var(--v-transition);
}

.v-footer-col a:hover { color: var(--v-primary); }

.v-footer-contact {
    display    : flex;
    align-items: flex-start;
    gap        : var(--v-space-3);
}

.v-footer-contact svg {
    width      : 16px;
    height     : 16px;
    flex       : 0 0 auto;
    margin-top : 2px;
    color      : var(--v-primary);
}

.v-footer-bottom {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : var(--v-space-4);
    padding-top    : var(--v-space-6);
    border-top     : 1px solid var(--v-border);
}

.v-footer-bottom p {
    margin   : 0;
    font-size: var(--v-text-xs);
    color    : var(--v-text-subtle);
}

.v-footer-bottom nav {
    display: flex;
    gap    : var(--v-space-5);
}

.v-footer-bottom nav a {
    font-size      : var(--v-text-xs);
    color          : var(--v-text-subtle);
    text-decoration: none;
    transition     : var(--v-transition);
}

.v-footer-bottom nav a:hover { color: var(--v-primary); }

/* ==========================================================================
   15. Mega menú ancho — listado de páginas (sección "Elements")
   ========================================================================== */
.v-megamenu.is-wide {
    max-width: min(1180px, calc(100vw - 48px));
    padding  : var(--v-space-5);
}

.v-menu-columns {
    display              : grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap                  : var(--v-space-5);
}

@media (max-width: 1199px) {
    .v-menu-columns { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .v-menu-columns { grid-template-columns: repeat(2, 1fr); }
}

.v-menu-column {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
    min-width     : 0;
}

.v-menu-column-head {
    display      : flex;
    align-items  : center;
    gap          : var(--v-space-2);
    margin-bottom: var(--v-space-2);
    padding      : 0 var(--v-space-2) var(--v-space-2);
    border-bottom: 1px solid var(--v-border);
    font-size    : var(--v-text-xs);
    font-weight  : 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color        : var(--v-text-subtle);
}

.v-menu-column-head svg {
    width : 15px;
    height: 15px;
    color : var(--v-accent);
}

/* Enlace compacto: la variante densa de .v-menu-card */
.v-menu-link {
    display        : flex;
    align-items    : center;
    gap            : var(--v-space-2);
    padding        : 7px var(--v-space-2);
    border-radius  : var(--v-radius-sm);
    font-size      : var(--v-text-xs);
    font-weight    : 600;
    line-height    : 1.4;
    color          : var(--v-text-muted);
    text-decoration: none;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
    transition     : var(--v-transition);
}

.v-menu-link::before {
    content      : '';
    flex         : 0 0 auto;
    width        : 5px;
    height       : 5px;
    border-radius: 50%;
    background   : var(--v-border-strong);
    transition   : var(--v-transition);
}

.v-menu-link:hover {
    background: var(--v-brand-tint);
    color     : var(--v-primary);
}

.v-menu-link:hover::before {
    background: var(--v-accent);
    transform : scale(1.4);
}

.v-menu-link.is-current {
    color     : var(--v-primary);
    background: var(--v-brand-tint-soft);
}

.v-menu-link.is-current::before { background: var(--v-primary); }

/* ==========================================================================
   16. Listas de características y banda de cierre
   ========================================================================== */
.v-list {
    display       : flex;
    flex-direction: column;
    gap           : var(--v-space-2);
    margin        : var(--v-space-5) 0 0;
    padding       : 0;
    list-style    : none;
}

.v-list li {
    display    : flex;
    align-items: flex-start;
    gap        : var(--v-space-3);
    font-size  : var(--v-text-sm);
    line-height: 1.55;
    color      : var(--v-text-muted);
}

.v-list svg {
    width      : 15px;
    height     : 15px;
    flex       : 0 0 auto;
    margin-top : 3px;
    color      : var(--v-accent);
}

/* Banda de llamada a la acción al cierre de página */
.v-cta-band {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : var(--v-space-8);
    padding        : var(--v-space-12);
    border-radius  : var(--v-radius-xl);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface);
}

.v-cta-band .v-section-sub { font-size: var(--v-text-base); }

@media (max-width: 767px) {
    .v-cta-band { padding: var(--v-space-8); }
}

/* ==========================================================================
   17. Piezas del UI Kit (muestras de color, demos, código, rejilla de iconos)
   ========================================================================== */
.v-swatches {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap                  : var(--v-space-4);
}

.v-swatch {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    padding       : var(--v-space-4);
    border-radius : var(--v-radius-md);
    border        : 1px solid var(--v-border);
    background    : var(--v-surface);
}

.v-swatch-chip {
    display      : block;
    height       : 56px;
    margin-bottom: var(--v-space-3);
    border-radius: var(--v-radius);
    box-shadow   : var(--v-shadow-sm);
}

.v-swatch strong { font-size: var(--v-text-sm); color: var(--v-fg); }

.v-swatch code {
    font-family: var(--v-font-mono);
    font-size  : var(--v-text-xs);
    color      : var(--v-accent);
}

.v-swatch span:last-child {
    font-size  : var(--v-text-xs);
    line-height: 1.5;
    color      : var(--v-text-muted);
}

/* Zona de demostración de componentes */
.v-demo {
    padding      : var(--v-space-6);
    border-radius: var(--v-radius-lg);
    border       : 1px dashed var(--v-border-strong);
    background   : var(--v-bg);
}

.v-demo-row {
    display    : flex;
    align-items: flex-start;
    flex-wrap  : wrap;
    gap        : var(--v-space-4);
}

.v-demo-row + .v-demo-row {
    margin-top    : var(--v-space-5);
    padding-top   : var(--v-space-5);
    border-top    : 1px solid var(--v-border);
}

/* Nota destacada */
.v-note {
    display      : flex;
    align-items  : flex-start;
    gap          : var(--v-space-4);
    margin-top   : var(--v-space-8);
    padding      : var(--v-space-5) var(--v-space-6);
    border-radius: var(--v-radius-md);
    border       : 1px solid var(--v-border);
    background   : var(--v-brand-tint);
}

.v-note svg {
    width     : 18px;
    height    : 18px;
    flex      : 0 0 auto;
    margin-top: 2px;
    color     : var(--v-primary);
}

.v-note p {
    margin     : 0;
    font-size  : var(--v-text-sm);
    line-height: 1.65;
    color      : var(--v-text);
}

/* Bloque de código */
.v-code {
    margin       : var(--v-space-4) 0;
    padding      : var(--v-space-5);
    border-radius: var(--v-radius);
    border       : 1px solid var(--v-border);
    background   : var(--v-bg);
    color        : var(--v-text);
    font-family  : var(--v-font-mono);
    font-size    : var(--v-text-xs);
    line-height  : 1.7;
    overflow-x   : auto;
    white-space  : pre;
    tab-size     : 4;
}

code {
    padding      : 2px 6px;
    border-radius: 5px;
    background   : var(--v-surface-2);
    color        : var(--v-primary);
    font-family  : var(--v-font-mono);
    font-size    : 0.9em;
}

.v-code code { padding: 0; background: none; color: inherit; }

/* Rejilla de iconos */
.v-icon-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap                  : var(--v-space-3);
}

.v-icon-grid figure {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : var(--v-space-3);
    margin         : 0;
    padding        : var(--v-space-5) var(--v-space-2);
    border-radius  : var(--v-radius-md);
    border         : 1px solid var(--v-border);
    background     : var(--v-surface);
    transition     : var(--v-transition);
}

.v-icon-grid figure:hover {
    border-color: var(--v-primary);
    background  : var(--v-brand-tint);
    transform   : translateY(-3px);
}

.v-icon-grid svg {
    width : 24px;
    height: 24px;
    color : var(--v-accent);
}

.v-icon-grid figure:hover svg { color: var(--v-primary); }

.v-icon-grid figcaption {
    font-family   : var(--v-font-mono);
    font-size     : 11px;
    color         : var(--v-text-subtle);
    text-align    : center;
    word-break    : break-all;
}