/* ============================================================================
 * VANTARIEL - Theme Switch (vt-theme.css)
 * ----------------------------------------------------------------------------
 * Estilo del switch de 2 posiciones (Oscuro / Claro) inspirado en
 * el selector de tema de speedtest.net.
 *
 * Estructura HTML esperada:
 * <div class="vt-theme-switch" role="group" aria-label="Tema">
 *   <div class="vt-theme-track">
 *     <div class="vt-theme-indicator"></div>
 *     <button class="vt-theme-btn" data-theme-mode="dark" title="Oscuro">
 *       <i class="fas fa-moon"></i>
 *     </button>
 *     <button class="vt-theme-btn" data-theme-mode="light" title="Claro">
 *       <i class="fas fa-sun"></i>
 *     </button>
 *   </div>
 * </div>
 *
 * El indicador deslizante se mueve con transform: translateX(0% | 100%)
 * segun el modo activo (dark=0, light=1). El JS (vt-theme.js) controla la posicion.
 * ============================================================================ */

/* ---------- Contenedor del switch ---------- */
.vt-theme-switch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    --vt-switch-w: 64px;   /* ancho total */
    --vt-switch-h: 30px;   /* altura */
    --vt-switch-pad: 3px;  /* padding interno */
    --vt-switch-seg: calc((var(--vt-switch-w) - var(--vt-switch-pad) * 2) / 2);
}

/* ---------- Track (pista donde se desliza el indicador) ---------- */
.vt-theme-switch .vt-theme-track {
    position: relative;
    display: flex;
    width: var(--vt-switch-w);
    height: var(--vt-switch-h);
    padding: var(--vt-switch-pad);
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: calc(var(--vt-switch-h) / 2);
    overflow: hidden;
    cursor: pointer;
}

/* ---------- Indicador deslizante ---------- */
.vt-theme-switch .vt-theme-indicator {
    position: absolute;
    top: var(--vt-switch-pad);
    left: var(--vt-switch-pad);
    width: var(--vt-switch-seg);
    height: calc(var(--vt-switch-h) - var(--vt-switch-pad) * 2);
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: calc((var(--vt-switch-h) - var(--vt-switch-pad) * 2) / 2);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    pointer-events: none;
    z-index: 1;
}

/* ---------- Botones ---------- */
.vt-theme-switch .vt-theme-btn {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease;
    outline: none;
}

.vt-theme-switch .vt-theme-btn:hover {
    color: rgba(255, 255, 255, .85);
}

.vt-theme-switch .vt-theme-btn.active {
    color: #fff;
}

.vt-theme-switch .vt-theme-btn:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: -2px;
}

/* ---------- Variante compacta (para barras pequenas, POS, etc.) ---------- */
.vt-theme-switch.vt-theme-switch-sm {
    --vt-switch-w: 54px;
    --vt-switch-h: 26px;
}

.vt-theme-switch.vt-theme-switch-sm .vt-theme-btn {
    font-size: .75rem;
}

/* ---------- En el navbar (alineacion vertical) ---------- */
.navbar .vt-theme-switch {
    margin-left: .5rem;
    margin-right: .25rem;
    /* Centrar verticalmente el switch triple en la barra */
    justify-content: center;
}
/* El <li> padre debe centrar el switch verticalmente */
.navbar .vt-theme-switch,
.navbar li .vt-theme-switch {
    align-self: center !important;
}
.navbar .vt-theme-switch-li {
    align-self: center !important;
}

/* ---------- Modo claro: el track cambia para fondo claro ---------- */
html[data-theme="light"] .vt-theme-switch .vt-theme-track {
    background-color: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .12);
}

html[data-theme="light"] .vt-theme-switch .vt-theme-btn {
    color: rgba(0, 0, 0, .45);
}

html[data-theme="light"] .vt-theme-switch .vt-theme-btn:hover {
    color: rgba(0, 0, 0, .75);
}

html[data-theme="light"] .vt-theme-switch .vt-theme-btn.active {
    color: #fff;
}

html[data-theme="light"] .vt-theme-switch .vt-theme-indicator {
    background: linear-gradient(135deg, #2980b9, #1a6fa6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* ---------- En el navbar oscuro, el switch se ve sobre fondo oscuro ---------- */
/* Track transparente: hereda el fondo solido de vt-bottom-icons para que
   el theme switch tenga el mismo fondo que los botones search/help/user. */
.navbar.bg-vantariel .vt-theme-switch .vt-theme-track {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .12);
}

.navbar.bg-vantariel .vt-theme-switch .vt-theme-btn {
    color: rgba(255, 255, 255, .55);
}

.navbar.bg-vantariel .vt-theme-switch .vt-theme-btn:hover {
    color: rgba(255, 255, 255, .85);
}

.navbar.bg-vantariel .vt-theme-switch .vt-theme-btn.active {
    color: #fff;
}

/* ---------- En el navbar claro, el switch se ve sobre el azul de la barra ---------- */
/* Track transparente: mismo fondo solido de vt-bottom-icons en todos los botones. */
html[data-theme="light"] .navbar.bg-vantariel .vt-theme-switch .vt-theme-track {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .18);
}

html[data-theme="light"] .navbar.bg-vantariel .vt-theme-switch .vt-theme-btn {
    color: rgba(255, 255, 255, .55);
}

html[data-theme="light"] .navbar.bg-vantariel .vt-theme-switch .vt-theme-btn:hover {
    color: rgba(255, 255, 255, .85);
}

html[data-theme="light"] .navbar.bg-vantariel .vt-theme-switch .vt-theme-btn.active {
    color: #fff;
}

/* ---------- Tercer boton: configuracion (debajo del switch) ---------- */
.vt-theme-config-btn {
    margin-top: 2px;
    width: var(--vt-switch-w);
    height: 18px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, background-color .2s ease;
    outline: none;
}
.vt-theme-config-btn:hover {
    color: rgba(255, 255, 255, .85);
    background-color: rgba(255, 255, 255, .08);
}
.vt-theme-config-btn i {
    font-size: .6rem;
}

/* Variante compacta: boton config mas pequeno */
.vt-theme-switch-sm .vt-theme-config-btn {
    width: var(--vt-switch-w);
    height: 16px;
    border-radius: 8px;
    font-size: .55rem;
}
.vt-theme-switch-sm .vt-theme-config-btn i {
    font-size: .5rem;
}

/* ---------- Estado bloqueado (lock desde panel de control) ---------- */
/* Solo deshabilita los botones del switch (.vt-theme-btn); el boton de
   config de apariencia sigue funcionando. */
.vt-theme-switch.vt-theme-locked .vt-theme-btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .55;
}
.vt-theme-switch.vt-theme-locked .vt-theme-btn.active {
    opacity: 1;
}

/* ---------- Modal de apariencia ---------- */
.vt-appearance-modal .modal-header {
    background-color: var(--vt-bg-elev, #fff);
    color: var(--vt-text, #212529);
    border-bottom: 1px solid var(--vt-border, #dee2e6);
}
.vt-appearance-modal .modal-body {
    background-color: var(--vt-bg-elev, #fff);
    color: var(--vt-text, #212529);
}
.vt-appearance-modal .modal-footer {
    background-color: var(--vt-bg-elev, #fff);
    border-top: 1px solid var(--vt-border, #dee2e6);
}
.vt-appearance-modal .vt-appearance-tabs {
    border-bottom: 2px solid var(--vt-border, #dee2e6);
}
.vt-appearance-modal .vt-appearance-tabs .nav-link {
    color: var(--vt-text, #212529);
    border: none;
    border-bottom: 2px solid transparent;
    padding: .5rem 1rem;
}
.vt-appearance-modal .vt-appearance-tabs .nav-link.active {
    color: var(--vt-accent, #007bff);
    border-bottom-color: var(--vt-accent, #007bff);
    background: transparent;
}
.vt-appearance-modal .vt-app-group {
    margin-bottom: 1rem;
}
.vt-appearance-modal .vt-app-label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .85rem;
    color: var(--vt-text, #212529);
}
.vt-appearance-modal .vt-app-color-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.vt-appearance-modal .vt-app-color {
    width: 40px;
    height: 32px;
    border: 1px solid var(--vt-border, #dee2e6);
    border-radius: .25rem;
    cursor: pointer;
    padding: 2px;
    background: none;
}
.vt-appearance-modal .vt-app-range {
    flex: 1;
    cursor: pointer;
}
.vt-appearance-modal .vt-app-opacity-val {
    min-width: 40px;
    text-align: right;
    font-size: .8rem;
    color: var(--vt-text-muted, #6c757d);
}
.vt-appearance-modal .form-control {
    background-color: var(--vt-input-bg, var(--vt-bg-elev-2, #fff));
    color: var(--vt-text, #212529);
    border-color: var(--vt-border, #dee2e6);
}

/* ============================================================================
 * Toolbar de presets (header del modal)
 * ============================================================================ */
.vt-presets-toolbar .vt-presets-select {
    width: 160px;
    font-size: .8rem;
}
.vt-presets-toolbar .btn {
    padding: .25rem .5rem;
    font-size: .75rem;
}

/* Titulos de seccion dentro del modal */
.vt-app-section-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vt-text-muted, #6c757d);
    border-bottom: 2px solid var(--vt-border, #dee2e6);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}