/**
 * Capa responsive global de Vidralumi / SoftVA Tech.
 * Una sola interfaz. Mobile first. Se adapta al ancho, alto y orientación reales.
 * No depende del modelo del equipo ni del build de Vite.
 *
 * XS  <375 · SM 375 · MD 640 · LG 768 · XL 1024 · 2XL 1280 · 3XL 1536+
 * Menú vertical: cajón hasta 1023 px (Galaxy Tab hasta 1399). Desde ahí, barra fija contraíble.
 * Galaxy Tab: escala 1 (Samsung Internet). La forma del menú se elige en Configuración de página.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.va-app {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
}

body.va-app:has(> .va-topbar) {
    padding-top: var(--va-topbar, 4rem);
}

html.va-overflow-x,
html.va-overflow-x body.va-app,
html.va-overflow-x .app-view-content,
html.va-overflow-x .va-page {
    overflow-x: auto;
    overflow-y: auto;
}

.login-zoom {
    zoom: 1;
    transform: none;
}

/*
 * Pantallas de invitado (login): siempre centradas en el viewport visible.
 * margin-block: auto en el shell centra cuando cabe; si no cabe, el body hace scroll.
 */
html.va-auth-page {
    height: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.va-app.va-auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.va-auth-shell {
    width: 100%;
    max-width: 26.25rem;
    max-width: min(26.25rem, calc(100vw - 2rem));
    margin-inline: auto;
    margin-block: auto;
    flex: 0 0 auto;
}

@media (max-width: 374px) {
    .va-auth-shell {
        max-width: calc(100vw - 2rem);
        max-width: calc(100vw - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
    }
}

@media (min-width: 640px) {
    body.va-app.va-auth-screen {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }

    .va-auth-shell {
        max-width: 27.5rem;
        max-width: min(27.5rem, calc(100vw - 3rem));
    }
}

html.va-tablet body.va-app.va-auth-screen,
html.va-samsung-tablet body.va-app.va-auth-screen {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

html.va-tablet .va-auth-shell,
html.va-samsung-tablet .va-auth-shell {
    max-width: 30rem;
    max-width: min(30rem, 92vw);
}

html.va-tablet .va-auth-options,
html.va-samsung-tablet .va-auth-options {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

html.va-tablet .va-auth-options > label,
html.va-samsung-tablet .va-auth-options > label {
    justify-content: flex-start;
}

html.va-tablet .va-auth-options .va-auth-link,
html.va-samsung-tablet .va-auth-options .va-auth-link {
    width: auto;
}

html.va-tablet .va-auth-screen .va-auth-header h1,
html.va-samsung-tablet .va-auth-screen .va-auth-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.2;
}

html.va-tablet .va-auth-screen form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va-tablet .va-auth-screen form select,
html.va-tablet .va-auth-screen form textarea,
html.va-samsung-tablet .va-auth-screen form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va-samsung-tablet .va-auth-screen form select,
html.va-samsung-tablet .va-auth-screen form textarea,
html.va-tablet .va-auth-screen form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va-samsung-tablet .va-auth-screen form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 3rem;
}

html.va-tablet .va-auth-screen input[type="checkbox"],
html.va-samsung-tablet .va-auth-screen input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

@media (orientation: landscape) and (max-height: 720px) {
    html.va-tablet body.va-app.va-auth-screen,
    html.va-samsung-tablet body.va-app.va-auth-screen {
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    html.va-tablet .va-auth-screen .va-auth-header,
    html.va-samsung-tablet .va-auth-screen .va-auth-header {
        margin-bottom: 0.75rem;
    }

    html.va-tablet .va-auth-screen .va-auth-header p,
    html.va-samsung-tablet .va-auth-screen .va-auth-header p {
        font-size: 0.9375rem;
    }

    html.va-tablet .va-auth-screen form > div.p-5,
    html.va-samsung-tablet .va-auth-screen form > div.p-5 {
        padding: 1rem 1.25rem;
    }

    html.va-tablet .va-auth-screen form .space-y-5 > :not([hidden]) ~ :not([hidden]),
    html.va-samsung-tablet .va-auth-screen form .space-y-5 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.875rem;
    }

    html.va-tablet .va-auth-screen .text-center.mt-8,
    html.va-samsung-tablet .va-auth-screen .text-center.mt-8 {
        margin-top: 1rem;
    }
}

@media (orientation: landscape) and (min-width: 900px) and (min-height: 721px) {
    html.va-tablet .va-auth-shell,
    html.va-samsung-tablet .va-auth-shell {
        max-width: 32rem;
        max-width: min(32rem, 44vw);
    }
}

.va-auth-screen .va-auth-header h1,
.va-auth-screen .va-auth-header h2 {
    line-height: 1.2;
}

.va-auth-card {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.va-auth-screen .va-auth-card :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    font-size: 1rem;
}

.va-auth-screen .va-auth-card button[type="submit"] {
    min-height: 3rem;
    font-size: 1rem;
    touch-action: manipulation;
}

.va-auth-screen .va-auth-toggle-eye {
    min-width: 2.75rem;
    touch-action: manipulation;
}

.va-auth-screen .va-auth-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

@media (orientation: landscape) and (max-height: 720px) {
    html.va-tablet .va-auth-screen .va-auth-card,
    html.va-samsung-tablet .va-auth-screen .va-auth-card {
        padding: 1rem 1.25rem !important;
    }

    html.va-tablet .va-auth-screen .va-auth-shell,
    html.va-samsung-tablet .va-auth-screen .va-auth-shell {
        gap: 0.75rem;
    }
}

html.va-scroll-lock,
html.va-scroll-lock body {
    overflow: hidden;
}

img,
video {
    max-width: 100%;
}

img:not([class*="h-"]):not([class*="max-h-"]):not([height]) {
    height: auto;
}

.va-page iframe,
.va-page embed,
.va-page object,
.va-page canvas,
.va-page svg:not([class*="h-"]):not([class*="w-"]) {
    max-width: 100%;
}

.va-page {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    min-width: 0;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
}

.va-nav-bar {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: max(5rem, env(safe-area-inset-right));
}

.va-page {
    overflow-x: clip;
}

@media (min-width: 640px) {
    .va-page {
        padding-left: max(1.25rem, env(safe-area-inset-left));
    }

    .va-page {
        padding-right: max(1.25rem, env(safe-area-inset-right));
    }

    .va-nav-bar {
        padding-right: max(6rem, env(safe-area-inset-right));
    }
}

@media (min-width: 1024px) {
    .va-page {
        padding-right: max(4.75rem, env(safe-area-inset-right));
    }
}

@media (min-width: 1440px) {
.va-page,
.va-page .max-w-7xl,
.system-view-shell--wide {
        max-width: 90rem;
    }

.system-view-shell--wide {
        --app-system-view-max-width: 90rem;
    }
}

@media (min-width: 1920px) {
.va-page,
.va-page .max-w-7xl {
        max-width: 100rem;
    }
}

@media (min-width: 2560px) {
.va-page,
.va-page .max-w-7xl,
.system-view-shell--wide {
        max-width: 120rem;
    }
}

@media (min-width: 3200px) {
.va-page,
.va-page .max-w-7xl,
.system-view-shell--wide {
        max-width: 140rem;
    }
}

@media (max-width: 639px) {
    .app-nav img {
        max-height: 2.25rem;
        width: auto;
        max-width: min(42vw, 9.5rem);
    }

    .system-view-shell__inner {
        padding: 0.75rem 0 !important;
    }

    .system-view-section__body,
    .system-view-page-header {
        padding: 0.875rem !important;
    }

    .system-view-page-header {
        margin-bottom: 0.75rem !important;
    }

    .system-view-nav {
        margin-inline: -0.75rem;
        padding-inline: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .system-view-page-header .system-view-btn-primary,
    .va-btn-row > :is(a, button):not(.va-btn-volver) {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    #dashboard-auto-refresh-indicator {
        left: auto;
        right: max(0.75rem, env(safe-area-inset-right));
        max-width: calc(100vw - 5.5rem);
        flex-wrap: wrap;
    }
}

.va-page h1 {
    font-size: clamp(1.25rem, 0.95rem + 1.4vw, 1.875rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.va-page h2 {
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.va-page h3 {
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.25rem);
    line-height: 1.35;
}

.va-page :is(p, li, label, dd, dt, td, th) {
    overflow-wrap: break-word;
}

.va-page pre,
.va-page code {
    max-width: 100%;
}

.va-page pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
.va-page .flex:not(.flex-col):not(.flex-nowrap):not([data-va-nowrap]) {
        flex-wrap: wrap;
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    main .va-page {
        padding-bottom: 4.5rem;
    }
}

.va-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.va-page select,
.va-page textarea {
    max-width: 100%;
}

@media (max-width: 639px) {
.va-page form .grid:not([data-va-grid="keep"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

.va-page .grid.grid-cols-2:not(.grid-cols-1):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-3:not(.grid-cols-1):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-4:not(.grid-cols-1):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-5:not(.grid-cols-1):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-6:not(.grid-cols-1):not([data-va-grid="keep"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

.va-page :is(.wx-page, .gcal-mode, .gcal-theme, .fc, .ql-container, .pc-scroll-preview) .grid {
        grid-template-columns: revert-layer !important;
    }

.cot-header-actions > :is(a, button, form),
.cot-header-actions > div > :is(a, button) {
        width: 100%;
    }

.va-page :is(button, a).btn-primary,
.va-page .system-view-btn-primary,
.va-page .system-view-btn-back,
.va-page button[type="submit"] {
        min-height: 44px;
        touch-action: manipulation;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
.va-page form .grid.grid-cols-3:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page form .grid.grid-cols-4:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page form .grid.grid-cols-5:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page form .grid.grid-cols-6:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-3:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-4:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-5:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]),
.va-page .grid.grid-cols-6:not(.grid-cols-1):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([data-va-grid="keep"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

.va-page :is(.wx-page, .gcal-mode, .gcal-theme, .fc, .ql-container, .pc-scroll-preview) .grid {
        grid-template-columns: revert-layer !important;
    }
}

.va-grid,
.va-form-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0.75rem 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.va-span-all {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .va-grid--cols-2,
    .va-grid--cols-3,
    .va-grid--cols-4,
    .va-grid--cols-5,
    .va-form-grid--cols-2,
    .va-form-grid--cols-3,
    .va-form-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .va-grid--cols-3,
    .va-grid--cols-4,
    .va-grid--cols-5,
    .va-form-grid--cols-3,
    .va-form-grid--cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .va-grid--cols-4,
    .va-grid--cols-5,
    .va-form-grid--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .va-grid--cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.va-card {
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid rgb(226 232 240 / 0.95);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 24px rgb(15 23 42 / 0.04);
    overflow: hidden;
}

.va-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgb(226 232 240 / 0.9);
}

.va-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    min-width: 0;
}

.va-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

@media (min-width: 640px) {
    .va-card__actions {
        width: auto;
    }

    .va-card__actions > :is(a, button) {
        width: auto;
    }
}

.va-card__body {
    padding: 0.875rem 1rem;
    min-width: 0;
}

@media (min-width: 1024px) {
    .va-card__body {
        padding: 1rem 1.25rem;
    }
}

.va-table-scroll,
.va-table-host,
.va-page .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.va-table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 639px) {
    .va-table-cards {
        min-width: 0 !important;
    }

    .va-table-host:has(.va-table-cards),
    .va-table-scroll:has(.va-table-cards),
    .overflow-x-auto:has(> .va-table-cards) {
        overflow-x: visible;
    }

    .va-table-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .va-table-cards,
    .va-table-cards tbody {
        display: block;
        width: 100%;
    }

    .va-table-cards tr {
        display: block;
        margin: 0 0 0.75rem;
        padding: 0.35rem 0.85rem;
        border: 1px solid rgb(226 232 240);
        border-radius: 0.75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    }

    .va-table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100% !important;
        padding: 0.45rem 0;
        border: 0;
        border-bottom: 1px solid rgb(241 245 249);
        text-align: right;
        white-space: normal;
    }

    .va-table-cards td:last-child {
        border-bottom: 0;
    }

    .va-table-cards td::before {
        content: attr(data-label);
        flex: 1 1 40%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
    }

    .va-table-cards td:not([data-label])::before,
    .va-table-cards td[data-label=""]::before {
        content: none;
    }

    .va-table-cards td :is(span, a, div, p) {
        white-space: normal;
        min-width: 0;
    }

    .va-table-cards .app-table-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
        white-space: normal;
    }
}

.va-modal[role="dialog"],
.va-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    padding-top: max(0.35rem, env(safe-area-inset-top));
}

@media (min-width: 640px) {
    .va-modal {
        align-items: center;
        padding: 1.5rem;
    }
}

.va-modal__backdrop,
.va-drawer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background: rgb(15 23 42 / 0.48);
    cursor: pointer;
}

.va-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    overflow: auto;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 24px 48px rgb(15 23 42 / 0.2);
}

@media (min-width: 640px) {
    .va-modal__panel {
        width: min(36rem, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        max-height: min(92dvh, 100%);
        border-radius: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .va-modal__panel {
        width: min(40rem, calc(100vw - 2.5rem));
    }
}

@media (min-width: 1280px) {
    .va-modal__panel {
        width: min(42rem, calc(100vw - 3rem));
    }
}

@media (min-width: 1024px) {
    .va-modal__panel--wide {
        width: min(64rem, calc(100vw - 3rem));
    }
}

.va-drawer-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    line-height: 0;
    background: #000;
    border-radius: 2px;
}

.va-drawer-logo {
    display: block;
    height: 2.75rem;
    width: auto;
    max-width: min(14rem, 70vw);
    object-fit: contain;
    object-position: left center;
}

.va-modal__head,
.va-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font-weight: 700;
}

.va-modal__body {
    padding: 1rem;
    min-width: 0;
}

.va-modal__close,
.va-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.va-drawer-close {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid #94a3b8;
    background: #fff;
    color: #0f172a;
    flex: 0 0 auto;
}

.va-account {
    position: relative;
}

.va-account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.va-account-btn img,
.va-account-mark {
    display: block;
    object-fit: cover;
}

.va-account-btn img {
    width: 100%;
    height: 100%;
}

.va-account-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: 17rem;
    background: #fff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 0.85rem;
    box-shadow: 0 10px 28px rgb(15 23 42 / 0.14);
    z-index: 90;
    overflow: hidden;
}

.va-account-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.1rem 1rem 0.9rem;
    background: #f8fafc;
    text-align: center;
}

.va-account-mark {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: #f97316;
}

.va-account-name {
    margin: 0.45rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.va-account-mail,
.va-account-as p:last-child {
    margin: 0;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.va-account-as {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e2e8f0;
}

.va-account-as p:first-child {
    margin: 0 0 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
}

.va-account-logout {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 0;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    color: #f97316;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.va-account-logout svg {
    color: #f97316;
    stroke: currentColor;
}

.va-account-logout:hover {
    background: #fff;
    color: #ea580c;
}

.va-account-logout:hover svg {
    color: #ea580c;
}

@media (max-width: 639px) {
    .fixed.inset-0 .bg-white.rounded-lg,
    .fixed.inset-0 .bg-white.rounded-xl,
    .fixed.inset-0 .bg-white.rounded-2xl,
    .fixed.inset-0 .bg-white.shadow-xl,
    .fixed.inset-0 .bg-white.shadow-lg {
        width: min(100%, calc(100vw - 0.5rem));
        max-width: calc(100vw - 0.5rem);
        max-height: calc(100dvh - 0.5rem);
        overflow: auto;
    }
}

.va-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;
    width: 100%;
    overflow: visible;
}

.app-nav {
    position: relative;
    z-index: 80;
    width: 100%;
    max-width: none;
    overflow: visible;
}

.va-nav-row {
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding-right: 5.5rem;
}

.va-nav-leading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 4rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    box-sizing: border-box;
}

html.va-nav-docked .va-nav-leading {
    width: 16.5rem;
    max-width: 16.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid rgb(194 65 12 / 0.45);
}

html.va-nav-docked.va-nav-collapsed .va-nav-leading {
    width: auto;
    max-width: none;
    border-right: 0;
}

.va-nav-hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
}

.va-nav-hamburger button {
    display: inline-flex !important;
    visibility: visible !important;
    width: 44px;
    height: 44px;
    color: #fff !important;
    background: rgb(255 255 255 / 0.16);
}

.va-nav-hamburger button svg {
    display: block !important;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    stroke: #fff;
}

.va-drawer-root {
    position: fixed;
    top: var(--va-nav-bottom, 4rem);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 180ms;
}

.va-drawer-root.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.va-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(26rem, 88vw);
    max-width: 26rem;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--app-nav-bg, #ea580c);
    color: var(--app-nav-text, #fff);
    padding: 0.35rem 0.75rem 1.25rem;
    box-shadow: 8px 0 28px rgb(15 23 42 / 0.22);
    transform: translateX(-105%);
    transition: transform 180ms ease, width 180ms ease;
}

.va-drawer-root.is-open .va-drawer-panel,
.va-drawer-root.is-docked .va-drawer-panel {
    transform: translateX(0);
}

.va-drawer-root:not(.is-open) .va-drawer-backdrop,
.va-drawer-root.is-docked .va-drawer-backdrop {
    opacity: 0;
    pointer-events: none;
}

.va-drawer-root.is-open:not(.is-docked) .va-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 160ms ease;
}

.va-drawer-panel--end {
    left: auto;
    right: 0;
    background: #fff;
    color: #0f172a;
    box-shadow: -8px 0 28px rgb(15 23 42 / 0.16);
}

.va-drawer-panel--end .va-drawer-head {
    border-bottom-color: rgb(226 232 240);
}

.va-drawer-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.app-nav-menu-panel {
    max-width: calc(100vw - 1rem);
}

.app-quick-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 45;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4.75rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.35rem;
    background: #fff;
    border-left: 1px solid rgb(226 232 240 / 0.95);
    box-shadow: -8px 0 24px rgb(15 23 42 / 0.08);
    transform: translateX(110%);
    visibility: hidden;
    pointer-events: none;
}

.app-quick-sidebar.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 1023px) {
    .app-quick-sidebar .app-quick-sidebar__btn,
    .app-quick-sidebar a,
    .app-quick-sidebar button {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 1024px) {
    .app-quick-sidebar,
    .app-quick-sidebar.is-open {
        transform: none;
        visibility: visible;
        pointer-events: auto;
        top: var(--va-nav-bottom, 4rem);
        z-index: 20;
        width: 4.25rem;
        box-shadow: -2px 0 16px -4px rgb(15 23 42 / 0.06);
    }

    html:not(.va-samsung-tablet) .va-quick-fab,
    html:not(.va-samsung-tablet) .va-quick-backdrop {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    html.va-samsung-tablet .va-quick-fab,
    html.va-samsung-tablet .va-quick-backdrop {
        display: none !important;
    }
}

.va-quick-fab {
    position: fixed;
    z-index: 35;
    left: max(0.75rem, env(safe-area-inset-left));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: #ea580c;
    color: #fff;
    box-shadow: 0 8px 20px rgb(234 88 12 / 0.35);
    cursor: pointer;
}

.va-quick-backdrop {
    position: fixed;
    z-index: 44;
}

.nav-mobile-menu a:hover,
.nav-mobile-menu a:focus,
.nav-mobile-menu a:focus-visible,
.nav-mobile-menu a:active,
.nav-mobile-menu button:hover,
.nav-mobile-menu button:focus,
.nav-mobile-menu button:focus-visible,
.nav-mobile-menu button:active,
.app-nav-item:hover,
.app-nav-item:focus,
.app-nav-item:focus-visible,
.app-nav-item:active,
.app-nav-dropdown-item:hover,
.app-nav-dropdown-item:focus,
.app-nav-dropdown-item:focus-visible {
    background-color: var(--app-nav-hover-bg, #ea580c);
    color: var(--app-nav-text, #fff);
    outline: 2px solid var(--app-nav-hover-bg, #ea580c);
    outline-offset: -2px;
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .va-drawer-panel {
        width: min(20rem, 78vw);
        max-width: 20rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .va-drawer-panel {
        width: min(32rem, 62vw);
        max-width: 32rem;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .va-drawer-panel {
        width: min(22rem, 88vw);
        max-width: 22rem;
    }

    .nav-mobile-menu a,
    .nav-mobile-menu button {
        min-height: 36px;
    }

    .app-nav .min-h-16,
    .app-nav .absolute.min-h-16 {
        min-height: 3rem;
    }
}

@media (min-width: 640px) {
    .cot-header-actions > :is(a, button, form),
    .cot-header-actions > div > :is(a, button) {
        width: auto;
    }
}

/*
 * Tablet táctil, incluida Galaxy Tab.
 * Escala 1 y texto a 16 px: el zoom del login (80 %) y un input chico
 * hacen que Samsung Internet agrande y deje la pantalla borrosa.
 */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1600px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.va-app {
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        text-rendering: auto;
        touch-action: manipulation;
    }

    .login-zoom {
        zoom: 1 !important;
        transform: none !important;
    }

    .va-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    .va-page select,
    .va-page textarea,
    .login-zoom input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .login-zoom select,
    .login-zoom textarea,
    .va-auth-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .va-auth-screen select,
    .va-auth-screen textarea,
    .va-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    .login-zoom :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .va-auth-screen :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        font-size: 16px;
    }
}

@media (pointer: coarse) {
    .va-auth-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .va-auth-screen select,
    .va-auth-screen textarea,
    .va-auth-screen :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        font-size: 16px;
    }

    body.va-auth-screen {
        touch-action: manipulation;
    }
}

html.va-samsung-tablet {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.va-samsung-tablet body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
}

html.va-samsung-tablet .login-zoom {
    zoom: 1 !important;
    transform: none !important;
}

html.va-samsung-tablet .va-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
html.va-samsung-tablet .va-page select,
html.va-samsung-tablet .va-page textarea,
html.va-samsung-tablet .login-zoom input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va-samsung-tablet .login-zoom select,
html.va-samsung-tablet .login-zoom textarea,
html.va-samsung-tablet .va-auth-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va-samsung-tablet .va-auth-screen select,
html.va-samsung-tablet .va-auth-screen textarea,
html.va-samsung-tablet .va-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
html.va-samsung-tablet .login-zoom :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.va-samsung-tablet .va-auth-screen :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    font-size: 16px;
}

/* Galaxy Tab en horizontal (~1280 px) sigue en cajón: el menú de escritorio no cabe y Samsung encoge toda la página. */
@media (max-width: 1399px) {
    html.va-samsung-tablet .app-nav .lg\:flex {
        display: none !important;
    }

    html.va-samsung-tablet .app-nav .lg\:hidden {
        display: flex !important;
    }

    html.va-samsung-tablet .app-quick-sidebar {
        top: 0;
        bottom: 0;
        z-index: 45;
        width: 4.75rem;
        transform: translateX(110%);
        visibility: hidden;
        pointer-events: none;
        box-shadow: -8px 0 24px rgb(15 23 42 / 0.08);
    }

    html.va-samsung-tablet .app-quick-sidebar.is-open {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    html.va-samsung-tablet .va-page {
        padding-right: max(1.25rem, env(safe-area-inset-right));
        padding-bottom: 4.5rem;
    }

    html.va-samsung-tablet .va-drawer-root.lg\:hidden {
        display: block;
    }
}

@media print {
    .va-drawer-root,
    .va-quick-fab,
    .va-quick-backdrop,
    .app-quick-sidebar {
        display: none !important;
    }

    .va-page {
        max-width: none;
        padding: 0;
        overflow: visible;
    }

    .va-table-cards thead {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }

    .va-table-cards,
    .va-table-cards tbody,
    .va-table-cards tr,
    .va-table-cards td {
        display: revert;
    }

    .va-table-cards td::before {
        content: none !important;
    }

    .va-rail-toggle,
    .va-rail-reopen {
        display: none !important;
    }
}

:root {
    --va-pad: 0.75rem;
    --va-gap: 0.75rem;
    --va-touch: 44px;
}

@media (min-width: 640px) {
    :root {
        --va-pad: 1.25rem;
        --va-gap: 1rem;
    }
}

@media (min-width: 1280px) {
    :root {
        --va-gap: 1.15rem;
    }
}

@media (min-width: 1536px) {
    :root {
        --va-pad: 1.75rem;
        --va-gap: 1.35rem;
    }

    .va-page {
        padding-left: max(1.75rem, env(safe-area-inset-left));
    }
}

@media (min-width: 2560px) {
    :root {
        --va-gap: 1.6rem;
    }
}

.va-page .grid > * {
    min-width: 0;
}

.va-layout,
.va-container,
.va-dashboard,
.va-toolbar,
.va-tabs {
    width: 100%;
    min-width: 0;
}

.va-container {
    max-width: 80rem;
    margin-inline: auto;
}

@media (min-width: 1440px) {
    .va-container {
        max-width: 90rem;
    }
}

@media (min-width: 1920px) {
    .va-container {
        max-width: 100rem;
    }
}

@media (min-width: 2560px) {
    .va-container {
        max-width: 120rem;
    }
}

@media (min-width: 3200px) {
    .va-container {
        max-width: 140rem;
    }
}

.va-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--va-gap);
}

@media (min-width: 1024px) {
    .va-layout:has(> .va-layout__sidebar) {
        grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
        align-items: start;
    }
}

.va-dashboard {
    display: grid;
    gap: var(--va-gap);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .va-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .va-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    }
}

@media (min-width: 1536px) {
    .va-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }
}

.va-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.va-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.va-tabs > * {
    flex: 0 0 auto;
    min-height: var(--va-touch);
}

.va-chart {
    width: 100%;
    min-width: 0;
    min-height: 12rem;
    margin: 0;
}

.va-chart__title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.va-chart__canvas,
.va-chart canvas,
.va-chart svg,
.va-page .apexcharts-canvas,
.va-page .apexcharts-svg {
    max-width: 100%;
}

.va-chart__canvas {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 1280px) {
    .va-chart {
        min-height: 16rem;
    }
}

@media (min-width: 1920px) {
    .va-chart {
        min-height: 18rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .va-page form .grid.grid-cols-4:not(.grid-cols-1):not([class*="xl:grid-cols"]):not([class*="2xl:grid-cols"]):not([data-va-grid="keep"]),
    .va-page form .grid.grid-cols-5:not(.grid-cols-1):not([class*="xl:grid-cols"]):not([class*="2xl:grid-cols"]):not([data-va-grid="keep"]),
    .va-page form .grid.grid-cols-6:not(.grid-cols-1):not([class*="xl:grid-cols"]):not([class*="2xl:grid-cols"]):not([data-va-grid="keep"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .va-page :is(.wx-page, .gcal-mode, .gcal-theme, .fc, .ql-container, .pc-scroll-preview) .grid {
        grid-template-columns: revert-layer !important;
    }
}

@media (min-width: 1280px) {
    .va-page form .grid.grid-cols-5:not(.grid-cols-1):not([class*="2xl:grid-cols"]):not([data-va-grid="keep"]),
    .va-page form .grid.grid-cols-6:not(.grid-cols-1):not([class*="2xl:grid-cols"]):not([data-va-grid="keep"]) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .va-page :is(.wx-page, .gcal-mode, .gcal-theme, .fc, .ql-container, .pc-scroll-preview) .grid {
        grid-template-columns: revert-layer !important;
    }
}

@media (max-width: 374px) {
    .va-page h1 {
        font-size: 1.2rem;
    }

    :root {
        --va-pad: 0.625rem;
        --va-gap: 0.5rem;
    }
}

@media (min-width: 375px) and (max-width: 639px) {
    .va-toolbar > :is(a, button) {
        min-height: var(--va-touch);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --va-gap: 1.05rem;
    }
}

@media (pointer: coarse) and (max-width: 599px) {
    .va-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) {
        font-size: 16px;
        min-height: var(--va-touch);
    }
}

@media (pointer: coarse) {
    .va-toolbar,
    .va-card__actions,
    .va-btn-row {
        gap: 0.625rem;
    }

    .va-page :is(button, a, summary) {
        touch-action: manipulation;
    }
}

.va-rail-toggle,
.va-rail-reopen {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--va-touch);
    height: var(--va-touch);
    border: 0;
    border-radius: 0.65rem;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    touch-action: manipulation;
}

.va-rail-toggle {
    margin: 0 auto 0.35rem;
    border: 1px solid rgb(226 232 240);
}

.va-rail-reopen {
    position: fixed;
    z-index: 25;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0.65rem 0 0 0.65rem;
    border: 1px solid rgb(226 232 240);
    box-shadow: -4px 0 16px rgb(15 23 42 / 0.08);
}

@media (min-width: 1024px) {
    html:not(.va-samsung-tablet) .va-rail-toggle {
        display: inline-flex;
    }

    html.va-rail-collapsed .app-quick-sidebar {
        transform: translateX(110%);
        visibility: hidden;
        pointer-events: none;
    }

    html.va-rail-collapsed .va-page {
        padding-right: max(1.25rem, env(safe-area-inset-right));
    }

    html:not(.va-samsung-tablet).va-rail-collapsed .va-rail-reopen {
        display: inline-flex;
    }
}

@media (min-width: 1400px) {
    html.va-samsung-tablet .va-rail-toggle {
        display: inline-flex;
    }

    html.va-samsung-tablet.va-rail-collapsed .va-rail-reopen {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .app-nav-desktop {
        min-width: 0;
        overflow: hidden;
    }

    .app-nav-desktop > * {
        flex-shrink: 0;
    }
}

html.va-nav-compact .app-nav .lg\:flex {
    display: none !important;
}

html.va-nav-compact .app-nav .lg\:hidden:not(.va-drawer-root) {
    display: flex !important;
}

html.va-nav-compact .va-drawer-root.lg\:hidden {
    display: block;
}

html.va-nav-vertical .app-nav-desktop {
    display: none !important;
}

html.va-nav-docked .va-drawer-root.is-docked {
    right: auto;
    width: 16.5rem;
    max-width: 18rem;
    transition: width 180ms ease;
}

html.va-nav-docked.va-nav-collapsed .va-drawer-root.is-docked {
    width: 0;
    max-width: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

html.va-nav-docked .va-drawer-panel {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    box-shadow: none;
    transform: none;
}

html.va-nav-docked .app-view-content,
html.va-nav-docked body.va-app > footer {
    margin-left: 16.5rem;
    transition: margin-left 180ms ease;
}

html.va-nav-docked.va-nav-collapsed .app-view-content,
html.va-nav-docked.va-nav-collapsed body.va-app > footer {
    margin-left: 0;
}

.va-nav-glyph {
    display: none;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.16);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

html.va-nav-docked.va-nav-collapsed .va-nav-glyph {
    display: inline-flex;
}

html.va-nav-docked.va-nav-collapsed .nav-mobile-menu > a,
html.va-nav-docked.va-nav-collapsed .nav-mobile-menu > div > button {
    justify-content: center;
    gap: 0;
    padding-inline: 0.25rem;
    font-size: 0;
}

html.va-nav-docked.va-nav-collapsed .nav-mobile-menu > a svg,
html.va-nav-docked.va-nav-collapsed .va-nav-glyph {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.85rem;
}

html.va-nav-docked.va-nav-collapsed .nav-mobile-menu button > span,
html.va-nav-docked.va-nav-collapsed .nav-mobile-menu button > svg,
html.va-nav-docked.va-nav-collapsed .nav-mobile-menu .app-nav-menu-panel,
html.va-nav-docked.va-nav-collapsed .va-drawer-head > span,
html.va-nav-docked.va-nav-collapsed .va-drawer-brand,
html.va-nav-docked.va-nav-collapsed .va-drawer-close,
html.va-nav-docked.va-nav-collapsed .nav-mobile-menu > div:not(:has(> button)) {
    display: none;
}

@media (min-width: 2560px) {
    .va-page {
        font-size: 1.0625rem;
    }
}

@media (min-width: 3840px) {
    .va-page {
        font-size: 1.125rem;
    }
}

@media (pointer: fine) and (min-width: 1024px) {
    .va-page :is(button, a).btn-primary,
    .va-page .system-view-btn-primary,
    .va-page button[type="submit"] {
        min-height: 2.25rem;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .va-dashboard,
    .va-form-grid,
    .va-grid {
        gap: 0.5rem;
    }
}

.va-brand {
    cursor: default;
    pointer-events: none;
    user-select: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
}

.va-brand span {
    color: #fff !important;
}

@keyframes va-linea-avance {
    0% {
        transform: scaleX(0);
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    28% {
        transform: scaleX(0.2);
        animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    }
    52% {
        transform: scaleX(0.5);
        animation-timing-function: cubic-bezier(0.55, 0.05, 0.9, 0.45);
    }
    66% {
        transform: scaleX(0.8);
        animation-timing-function: cubic-bezier(0.12, 0.8, 0.2, 1);
    }
    89% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes va-linea-brillo-final {
    0%, 84% {
        fill: #f26202;
        background-color: #f26202;
        filter: none;
    }
    90% {
        fill: #ff8a1a;
        background-color: #ff8a1a;
        filter: brightness(1.35);
    }
    100% {
        fill: #f26202;
        background-color: #f26202;
        filter: none;
    }
}

.va-linea-pista {
    height: 0.3rem;
    background: #ffd7bf;
    overflow: hidden;
}

.va-linea-pista .va-linea-progreso {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f26202;
    transform: scaleX(0);
    transform-origin: left center;
}

.va-linea-pista .va-linea-progreso.is-corriendo {
    animation: va-linea-avance 3.6s linear forwards, va-linea-brillo-final 3.6s linear forwards;
}

svg .va-linea-progreso {
    fill: #f26202;
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: va-linea-avance 3.6s linear forwards, va-linea-brillo-final 3.6s linear forwards;
}

.va-linea-pista .va-linea-progreso.is-completa,
svg .va-linea-progreso.is-completa {
    animation: none;
    transform: scaleX(1);
    fill: #f26202;
    background-color: #f26202;
    filter: none;
}

.va-linea-pista.is-completa,
.va-linea-pista:has(.is-completa) {
    background: #f26202;
}

@media (prefers-reduced-motion: reduce) {
    .va-linea-pista .va-linea-progreso,
    .va-linea-pista .va-linea-progreso.is-corriendo,
    svg .va-linea-progreso {
        animation: none;
        transform: none;
        fill: #f26202;
        background-color: #f26202;
        filter: none;
    }
}

.nav-mobile-menu a,
.nav-mobile-menu button {
    border-radius: 0.7rem;
    font-weight: 600;
}

.nav-mobile-menu .is-current {
    font-weight: 700;
}

html[data-va-menu-form="sidebar-corporate"] .va-drawer-panel,
html[data-va-menu-form="sidebar-light"] .va-drawer-panel {
    background: #fff;
    color: #0f172a;
    border-right: 1px solid #e2e8f0;
    box-shadow: 8px 0 28px rgb(15 23 42 / 0.08);
}

html[data-va-menu-form="sidebar-light"] .va-drawer-panel {
    background: #f8fafc;
}

html[data-va-menu-form="sidebar-dark"] .va-drawer-panel {
    background: #0f172a;
    color: #e2e8f0;
    border-right: 1px solid #1e293b;
}

html[data-va-menu-form="sidebar-corporate"] .va-drawer-head,
html[data-va-menu-form="sidebar-light"] .va-drawer-head,
html[data-va-menu-form="sidebar-dark"] .va-drawer-head {
    background: #fff;
    color: #0f172a;
    border-bottom-color: #cbd5e1;
}

html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu button.app-nav-item--naranja,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu button.app-nav-item--naranja,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu button.app-nav-item--naranja,
html[data-va-menu-form="top"] .nav-mobile-menu button.app-nav-item--naranja {
    color: #ea580c;
}

html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu button.app-nav-item--naranja:hover,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu button.app-nav-item--naranja:hover,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu button.app-nav-item--naranja.is-current,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu button.app-nav-item--naranja.is-current,
html[data-va-menu-form="top"] .nav-mobile-menu button.app-nav-item--naranja:hover,
html[data-va-menu-form="top"] .nav-mobile-menu button.app-nav-item--naranja.is-current {
    background: #ea580c;
    color: #fff;
}

html[data-va-menu-form="top"] .app-nav-desktop .app-nav-item--naranja {
    background: #fff;
    color: #ea580c;
}

html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu a,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu button,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu a,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu button,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu .text-white,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu .text-white {
    color: #1e293b;
    background: transparent;
    outline: none;
}

html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu a,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu button,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu .text-white,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu .text-black,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu svg {
    color: #e2e8f0;
    background: transparent;
    outline: none;
}

html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu a:hover,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu button:hover,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu a.is-current,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu button.is-current {
    background: #ea580c;
    color: #fff;
    outline: none;
}

html[data-va-menu-form="sidebar-light"] .nav-mobile-menu a:hover,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu button:hover,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu a.is-current,
html[data-va-menu-form="sidebar-light"] .nav-mobile-menu button.is-current {
    background: #e2e8f0;
    color: #0f172a;
    outline: none;
}

html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu a:hover,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu button:hover {
    background: #1e293b;
    color: #f8fafc;
    outline: none;
}

html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu a.is-current,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu button.is-current {
    background: #f5c451;
    color: #0f172a;
    outline: none;
}

html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu a.is-current svg,
html[data-va-menu-form="sidebar-corporate"] .nav-mobile-menu a:hover svg,
html[data-va-menu-form="sidebar-dark"] .nav-mobile-menu a.is-current svg {
    color: inherit;
}

@media (min-width: 1024px) {
    html.va-nav-vertical[data-va-menu-form="top"] .app-nav-desktop {
        display: flex !important;
    }
}

html[data-va-menu-form="top"] .app-nav-desktop .app-nav-item {
    border-radius: 0.65rem;
    background: rgb(255 255 255 / 0.14);
}

html[data-va-menu-form="top"] .app-nav-dropdown {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.9rem !important;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.14) !important;
    color: #0f172a;
}

html[data-va-menu-form="top"] .app-nav-dropdown-item,
html[data-va-menu-form="top"] .app-nav-dropdown-item:hover {
    color: #0f172a !important;
    border-radius: 0.55rem;
    margin: 0.12rem 0.4rem;
    outline: none;
}

html[data-va-menu-form="top"] .app-nav-dropdown-item:hover {
    background: #f1f5f9 !important;
}

html[data-va-menu-form="top"] .va-drawer-panel {
    background: #fff;
    color: #0f172a;
}

html[data-va-menu-form="top"] .nav-mobile-menu a,
html[data-va-menu-form="top"] .nav-mobile-menu button,
html[data-va-menu-form="top"] .nav-mobile-menu .text-white {
    color: #1e293b;
    background: transparent;
    outline: none;
}

html[data-va-menu-form="top"] .nav-mobile-menu a:hover,
html[data-va-menu-form="top"] .nav-mobile-menu a.is-current,
html[data-va-menu-form="top"] .nav-mobile-menu button:hover,
html[data-va-menu-form="top"] .nav-mobile-menu button.is-current {
    background: #ea580c;
    color: #fff;
    outline: none;
}

/* Menú: los nombres pasan de naranja a negro. Los rótulos que estaban en negro pasan a naranja. */
.va-drawer-panel {
    background: #ffffff !important;
    color: #111827 !important;
}

.nav-mobile-menu a,
.nav-mobile-menu button,
.nav-mobile-menu .app-nav-dropdown-item,
.app-nav-dropdown-item {
    color: #111827 !important;
}

.nav-mobile-menu div.uppercase,
.app-nav-dropdown div.uppercase {
    color: #f54900 !important;
}

.nav-mobile-menu .app-nav-dropdown,
.app-nav-dropdown {
    background: #ffffff !important;
    border-color: #fdba74 !important;
}

html[data-va-menu-form] .nav-mobile-menu a:hover,
html[data-va-menu-form] .nav-mobile-menu a:focus,
html[data-va-menu-form] .nav-mobile-menu a:focus-visible,
html[data-va-menu-form] .nav-mobile-menu a:active,
html[data-va-menu-form] .nav-mobile-menu button:hover,
html[data-va-menu-form] .nav-mobile-menu button:focus,
html[data-va-menu-form] .nav-mobile-menu button:active,
html[data-va-menu-form] .nav-mobile-menu .app-nav-dropdown-item:hover,
html[data-va-menu-form] .nav-mobile-menu .app-nav-dropdown-item:focus,
html[data-va-menu-form] .nav-mobile-menu .app-nav-dropdown-item:active,
html[data-va-menu-form] .app-nav-dropdown-item:hover,
html[data-va-menu-form] .app-nav-dropdown-item:focus,
html[data-va-menu-form] .app-nav-dropdown-item:active {
    background-color: #ffedd5 !important;
    color: #111827 !important;
    outline: none !important;
    box-shadow: none !important;
}

html[data-va-menu-form] .nav-mobile-menu a.is-current,
html[data-va-menu-form] .nav-mobile-menu a.is-current:hover,
html[data-va-menu-form] .nav-mobile-menu a.is-current:focus,
html[data-va-menu-form] .nav-mobile-menu a.is-current:active,
html[data-va-menu-form] .nav-mobile-menu button.is-current,
html[data-va-menu-form] .nav-mobile-menu button.is-current:hover,
html[data-va-menu-form] .nav-mobile-menu button.is-current:focus,
html[data-va-menu-form] .app-nav-dropdown-item.is-current,
html[data-va-menu-form] .app-nav-dropdown-item.is-current:hover,
html[data-va-menu-form] .app-nav-dropdown-item.is-current:focus,
html[data-va-menu-form] .nav-mobile-menu a[aria-current="page"],
html[data-va-menu-form] .app-nav-desktop a[aria-current="page"] {
    background-color: #f54900 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

.va-menu-links,
.va-menu-links.app-nav-dropdown {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

.va-menu-links a,
.va-menu-links button,
.va-menu-links .app-nav-dropdown-item,
.va-menu-links a:hover,
.va-menu-links a:focus,
.va-menu-links a:focus-visible,
.va-menu-links a:active,
.va-menu-links button:hover,
.va-menu-links .app-nav-dropdown-item:hover,
.va-menu-links .app-nav-dropdown-item:focus,
.va-menu-links .app-nav-dropdown-item:focus-visible,
.va-menu-links .app-nav-dropdown-item:active,
.va-menu-links a.is-current,
.va-menu-links a.is-current:hover,
.va-menu-links .app-nav-dropdown-item.is-current,
.va-menu-links .app-nav-dropdown-item.is-current:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    outline-style: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.va-menu-links .va-menu-link-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
}

.va-menu-links svg,
.va-menu-links a.is-current svg,
.va-menu-links .app-nav-dropdown-item.is-current svg {
    color: #111827 !important;
    stroke: #111827 !important;
}

html[data-va-menu-form] .nav-mobile-menu a.is-current svg,
html[data-va-menu-form] .nav-mobile-menu button.is-current svg,
html[data-va-menu-form] .app-nav-dropdown-item.is-current svg,
html[data-va-menu-form] .nav-mobile-menu a[aria-current="page"] svg,
html[data-va-menu-form] .app-nav-desktop a[aria-current="page"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.nav-mobile-menu svg:not(.va-orange-mark),
.app-nav-dropdown svg:not(.va-orange-mark),
.app-nav-desktop .app-nav-item > svg:not(.va-orange-mark) {
    color: #f54900 !important;
    stroke: #f54900 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.va-icono-marca,
.system-view-page-header__icon,
.va-titulo-icono {
    background: #f54900 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0.65rem !important;
}

.va-icono-marca svg,
.system-view-page-header__icon svg,
.va-titulo-icono svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.dashboard-mode .va-titulo-icono,
.dashboard-mode .system-view-page-header__icon {
    background: linear-gradient(to bottom right, #fb923c, #ea580c) !important;
    border: none !important;
    border-radius: 1rem !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgb(234 88 12 / 0.45), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.app-view-content :is(
    [class*="h-7 w-7"],
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
):has(> svg):not(.va-mark-slot):not(.va-icono-marca):not(.system-view-page-header__icon):not(.va-titulo-icono):not(.app-table-action):not([data-inicio-home]):not(:has(> .va-orange-mark)) {
    background: #fff !important;
    border: 2.5px solid #f54900 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    color: #f54900 !important;
}

.app-view-content :is(
    [class*="h-7 w-7"],
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
):has(> svg):not(.va-mark-slot):not(.va-icono-marca):not(.system-view-page-header__icon):not(.va-titulo-icono):not(.app-table-action):not([data-inicio-home]):not(:has(> .va-orange-mark)) > svg {
    color: #f54900 !important;
    stroke: #f54900 !important;
}

/* Dashboards del menú: pastilla con degradado y glifo blanco, como /comunicacion-multicanal. */
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
):has(> svg):not(.va-mark-slot):not(.va-icono-marca):not(.system-view-page-header__icon):not(.va-titulo-icono):not(.app-table-action):not([data-inicio-home]):not(:has(> .va-orange-mark)) {
    background: linear-gradient(to bottom right, #22d3ee, #0891b2) !important;
    border: none !important;
    border-radius: 1rem !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgb(8 145 178 / 0.45), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-emerald"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-green"]:has(> svg) {
    background: linear-gradient(to bottom right, #34d399, #059669) !important;
    box-shadow: 0 0 16px rgb(5 150 105 / 0.45), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-amber"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-orange"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-yellow"]:has(> svg) {
    background: linear-gradient(to bottom right, #fbbf24, #ea580c) !important;
    box-shadow: 0 0 16px rgb(234 88 12 / 0.45), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-violet"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-purple"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-fuchsia"]:has(> svg) {
    background: linear-gradient(to bottom right, #a78bfa, #7c3aed) !important;
    box-shadow: 0 0 16px rgb(124 58 237 / 0.45), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-blue"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-indigo"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-sky"]:has(> svg) {
    background: linear-gradient(to bottom right, #60a5fa, #2563eb) !important;
    box-shadow: 0 0 16px rgb(37 99 235 / 0.45), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-rose"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-red"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-pink"]:has(> svg) {
    background: linear-gradient(to bottom right, #fb7185, #e11d48) !important;
    box-shadow: 0 0 16px rgb(225 29 72 / 0.4), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-slate"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-gray"]:has(> svg),
.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
)[class*="bg-zinc"]:has(> svg) {
    background: linear-gradient(to bottom right, #94a3b8, #334155) !important;
    box-shadow: 0 0 16px rgb(51 65 85 / 0.35), 0 10px 15px -3px rgb(0 0 0 / 0.18) !important;
}

.dashboard-mode .app-view-content :is(
    [class*="h-8 w-8"],
    [class*="h-9 w-9"],
    [class*="h-10 w-10"],
    [class*="h-11 w-11"],
    [class*="h-12 w-12"],
    [class*="w-8 h-8"],
    [class*="w-9 h-9"],
    [class*="w-10 h-10"],
    [class*="w-11 h-11"],
    [class*="w-12 h-12"],
    [class*="w-14 h-14"]
):has(> svg):not(.va-mark-slot):not(.va-icono-marca):not(.system-view-page-header__icon):not(.va-titulo-icono):not(.app-table-action):not([data-inicio-home]):not(:has(> .va-orange-mark)) > svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.va-mark-slot {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Acciones de listado: círculo naranja; el trazo del centro conserva el color de la acción. */
.app-table-actions :is(a, button, span).app-table-action {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px !important;
    background-color: var(--app-table-action-bg, #ffffff) !important;
    background-image: none !important;
    border: 1.5px solid var(--app-table-action-border, #f97316) !important;
    box-shadow: none !important;
}

.app-table-actions :is(a, button).app-table-action:hover {
    background-color: var(--app-table-action-hover-bg, #ffffff) !important;
    border-color: var(--app-table-action-hover-border, #ea580c) !important;
}

.app-table-action.app-table-action--muted,
.app-table-actions span.app-table-action.app-table-action--muted {
    border-color: var(--app-table-action-muted-border, #f1f5f9) !important;
    background-color: var(--app-table-action-muted-bg, #ffffff) !important;
    color: var(--app-table-action-disabled-icon, #94a3b8) !important;
}

.app-table-action svg {
    color: inherit !important;
    stroke: currentColor !important;
}

.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):not(.btn-google-maps-standard):not(.btn-google-app-maps):not(.btn-waze-maps-standard):not(.app-nav-dropdown-item):is(
    [title="Ver"],
    [title^="Ver "],
    [title="Abrir"],
    [title^="Abrir "],
    [title="Editar"],
    [title^="Editar"],
    [title="Eliminar"],
    [title^="Eliminar"],
    [title*="PDF"],
    [title^="Descargar"],
    [title^="Ver cuenta"],
    [title*="cuenta por cobrar"],
    [title^="Duplicar"],
    [title^="QR"],
    [title="Activar"],
    [title^="Activar"],
    [title="Desactivar"],
    [title^="Desactivar"],
    [title="Historial"],
    [title^="Historial"],
    [title^="Imprimir"]
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    border-radius: 9999px !important;
    border: 1.5px solid var(--app-table-action-border, #f97316) !important;
    background-color: var(--app-table-action-bg, #ffffff) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title="Ver"], [title^="Ver "], [title="Abrir"], [title^="Abrir "]) { color: var(--app-table-action-view, #2563eb) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title="Historial"], [title^="Historial"]) { color: var(--app-table-action-history, #64748b) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title="Editar"], [title^="Editar"]) { color: var(--app-table-action-edit, #2563eb) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title*="PDF"], [title^="Descargar"], [title^="Imprimir"]) { color: var(--app-table-action-pdf, #64748b) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title="Eliminar"], [title^="Eliminar"]) { color: var(--app-table-action-delete, #ef4444) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title^="Ver cuenta"], [title*="cuenta por cobrar"]) { color: var(--app-table-action-extra, #64748b) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title^="Duplicar"], [title*="Copiar"]) { color: var(--app-table-action-duplicate, #64748b) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title^="QR"], [title*="QR"]) { color: var(--app-table-action-qr, #7c3aed) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title="Desactivar"], [title^="Desactivar"]) { color: var(--app-table-action-toggle-on, #d97706) !important; }
.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is([title="Activar"], [title^="Activar"]) { color: var(--app-table-action-toggle-off, #16a34a) !important; }

.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is(
    [title="Ver"],
    [title^="Ver "],
    [title="Abrir"],
    [title^="Abrir "],
    [title="Editar"],
    [title^="Editar"],
    [title="Eliminar"],
    [title^="Eliminar"],
    [title*="PDF"],
    [title^="Descargar"],
    [title^="Imprimir"],
    [title^="Ver cuenta"],
    [title*="cuenta por cobrar"],
    [title^="Duplicar"],
    [title^="QR"],
    [title="Activar"],
    [title^="Activar"],
    [title="Desactivar"],
    [title^="Desactivar"],
    [title="Historial"],
    [title^="Historial"]
):hover {
    background-color: var(--app-table-action-hover-bg, #ffffff) !important;
    border-color: var(--app-table-action-hover-border, #ea580c) !important;
}

.app-view-content :is(a, button):has(> svg):not(:has(> :not(svg))):is(
    [title="Ver"],
    [title^="Ver "],
    [title="Abrir"],
    [title^="Abrir "],
    [title="Editar"],
    [title^="Editar"],
    [title="Eliminar"],
    [title^="Eliminar"],
    [title*="PDF"],
    [title^="Descargar"],
    [title^="Ver cuenta"],
    [title*="cuenta por cobrar"],
    [title^="Duplicar"],
    [title^="QR"],
    [title="Activar"],
    [title^="Activar"],
    [title="Desactivar"],
    [title^="Desactivar"]
) > svg {
    width: 1.125rem;
    height: 1.125rem;
    color: inherit !important;
    stroke: currentColor !important;
}

/*
 * Botones de acción e ícono de título.
 * El rótulo queda en una sola línea (ícono + texto) y la caja del título no se aplasta.
 */
.va-page :is(a, button):not(.app-table-action):not(.app-nav-item):not(.app-nav-dropdown-item):is(
    .btn-primary,
    .btn-secondary,
    .system-view-btn-back,
    .system-view-btn-primary,
    [class*="rounded-xl"],
    [class*="rounded-lg"]
) {
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 100%;
}

.va-page :is(a, button):not(.app-table-action):not(.app-nav-item):not(.app-nav-dropdown-item):is(
    .btn-primary,
    .btn-secondary,
    .system-view-btn-back,
    .system-view-btn-primary,
    [class*="rounded-xl"],
    [class*="rounded-lg"]
) > svg {
    flex-shrink: 0;
    max-width: none;
}

.va-btn-volver {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    min-height: 1.95rem;
    margin-left: 0;
    padding: 0.28rem 0.85rem !important;
    border-radius: 9999px !important;
    border: 1px solid #0f6ff5 !important;
    background: #fff !important;
    color: #0f6ff5 !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none !important;
    text-decoration: none;
    cursor: pointer;
}

.va-btn-volver:hover {
    background: #e8f2fe !important;
    border-color: #0b5ed7 !important;
    color: #0b5ed7 !important;
}

.va-btn-volver:focus-visible {
    outline: 2px solid #0f6ff5;
    outline-offset: 2px;
}

.va-btn-volver svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    max-width: none;
}

.va-btn-volver > span {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: max-content;
}

.va-btn-limpiar,
.app-btn-limpiar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    min-height: 2.05rem;
    padding: 0.38rem 0.95rem !important;
    border-radius: 9999px !important;
    border: none !important;
    background: #64748b !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.16) !important;
    text-decoration: none;
    cursor: pointer;
}

.va-btn-limpiar:hover,
.app-btn-limpiar:hover {
    background: #475569 !important;
    color: #fff !important;
}

.va-btn-limpiar:focus-visible,
.app-btn-limpiar:focus-visible {
    outline: 2px solid #64748b;
    outline-offset: 3px;
}

.va-btn-limpiar svg,
.app-btn-limpiar svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    max-width: none;
    color: #fff;
}

.va-btn-limpiar-hint {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.va-page .va-titulo-icono,
.va-page .va-icono-marca,
.va-page .system-view-page-header__icon,
.va-page .relative.shrink-0:has(> .absolute):has(> .relative > svg),
.va-page :not(a):not(button).shrink-0:has(> svg):not(:has(> :not(svg))) {
    flex-shrink: 0;
}

.va-page .relative.shrink-0:has(> .absolute):has(> .relative > svg) {
    width: max-content;
    min-width: 3rem;
    min-height: 3rem;
}

.va-page .relative.shrink-0:has(> .absolute) > .relative:has(> svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    aspect-ratio: 1;
    min-width: 3rem;
    min-height: 3rem;
}

.va-page .va-titulo-icono > svg,
.va-page .va-icono-marca > svg,
.va-page .system-view-page-header__icon > svg,
.va-page .relative.shrink-0:has(> .absolute) > .relative > svg,
.va-page :not(a):not(button).shrink-0:has(> svg):not(:has(> :not(svg))) > svg {
    flex-shrink: 0;
    max-width: none;
}