/* ========================================
   CONFIGURACIÓN · VENTANA GRANDE
   ======================================== */
/* La configuración es una ventana (modal-xl) con dos zonas: la lista de
   secciones a la izquierda (fija mientras se recorre el contenido) y el
   contenido a la derecha. El contenido es siempre de UNA columna: los
   ajustes se leen en vertical y una rejilla de dos obligaba a saltar la
   vista de un bloque a otro. Abajo va el pie con la versión, fijo. */

.config-modal {
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
}

/* El contenido crece para dejar el pie siempre al fondo de la ventana, y el
   pie además se pega con sticky cuando la sección es más larga que la
   ventana. */
.config-modal #configuracion-contenido {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.config-nav {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Alineado como los sidebars de las páginas (css/navegacion.css): ancho
   completo, contenido pegado al inicio. Así los rótulos quedan en columna
   y los íconos en línea, en vez de verse centrados con el texto flotando. */
.config-nav button {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    border-radius: 40px;
    color: var(--textSecondary);
    font-family: var(--font-primary);
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-nav button:hover {
    color: var(--text);
    background: var(--lightHover);
}

.config-nav button.act {
    color: var(--text);
    background: var(--surface);
}

.config-nav button .lucide {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.config-nav button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-modal .config-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* En modo ventana (`modal-xl`) el menú ocupa el alto visible del cuerpo y su
   pie (versión) cae al fondo de la columna. Se ancla a `.modal-xl` para no
   tocar el modo página, que reutiliza `.config-modal` dentro de `.config-pagina`. */
.modal-xl .config-modal .config-nav {
    height: calc(88vh - 200px);
    overflow-y: auto;
}

.modal-xl .config-modal .config-nav-pie {
    margin-top: auto;
}

/* El pie ya no es un ítem del grid: es el último hijo de .config-body (ver
   plantillaConfiguracion en js/ui/configuracion.js). No hay ninguna regla que
   lo coloque en una fila propia, así que ya no puede caer bajo la columna del
   menú (BUG-017). El `grid-column` que lo fijaba aquí se eliminó con él. */

.config-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.config-body .panel-section {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.config-body .panel-section h2 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 860px) {
    .config-modal .config-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Una sola columna: el menú pasa a ser una franja horizontal y el pie,
       que ya vive dentro de .config-body, no necesita reposicionarse. */
    .config-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .config-nav button {
        width: auto;
        justify-content: center;
        text-align: center;
    }

    /* El pie del menú pasa a ocupar toda la franja, debajo de los botones. */
    .config-nav-pie {
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
}

/* ========================================
   MODO PÁGINA
   ======================================== */
/* La misma pantalla, pero ocupando #app-content como una página más del router
   (Accesibilidad › "Configuración como"). Al no haber .modal-body, el
   contenedor que scrollea es `.config-layout`, que es también el grid: el pie
   es su última fila y se mantiene visible con el mismo `sticky` que en modo
   ventana. */

/* El #panel de la configuración ES el contenedor de scroll (hereda `overflow-y:
   auto` y el padding de #panel en css/navegacion.css). Aquí solo se le quita
   el padding de página: dentro del panel los ajustes van de borde a borde. */
.config-pagina {
    gap: 0;
}

/* En modo página el layout es de una sola columna: el sidebar vive en
   #sidebar, no dentro del #panel. */
.config-pagina .config-layout {
    display: block;
}

.config-pagina .config-modal {
    height: 100%;
    min-height: 0;
}

/* Nav de configuración cuando vive en el sidebar de la página. */
#sidebar .config-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Pie de versión en modo página: a todo el ancho del panel y al final,
   en línea horizontal. En modal sigue dentro de la columna del nav. */
.config-pagina .config-pie-pagina {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    column-gap: 10px;
    row-gap: 4px;
    margin-top: 24px;
    padding: 16px 4px 4px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

/* El menú es la columna fija del grid. `position: sticky` para que siga
   visible al recorrer una sección larga, anclado al #panel (el contenedor de
   scroll). */
.config-pagina .config-nav {
    align-self: start;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/* Pie del menú lateral: la versión queda bajo la columna de secciones, en vez
   de ser una barra de ancho completo bajo el modal (BUG-017). */
.config-nav-pie {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 12px 18px 0;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--textSecondary);
}

.config-nav-pie .footer-brand {
    font-size: 13px;
}

.footer-legal {
    font-size: 12px;
    color: var(--textSecondary);
}

.footer-legal a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--positive);
}

/* ========================================
   GRUPOS
   ======================================== */

.config-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 12px;
}

.config-label {
    color: var(--textSecondary);
    font-size: 14px;
    font-weight: 500;
    min-width: 120px;
}

.config-label.visible-pages {
    display: flex;
    flex-direction: column;
}

.config-label.danger {
    color: var(--negative);
}

.config-value {
    color: var(--text);
    font-family: var(--font-secondary);
    font-size: 14px;
}

.config-hint {
    color: var(--textSecondary);
    font-size: 12px;
    width: 100%;
    margin-top: 4px;
}

/* ========================================
   TOGGLE DE TEMA
   ======================================== */

/* El grupo se ajusta a su contenido (`width: fit-content`) en vez de estirarse
   a todo el ancho de la celda: es una fila de tres siglas, no una barra de
   progreso, y estirada quedaba pegada a la izquierda con el fondo del grupo
   repartiendo el hueco sobrante.

   Excepción: las cards del dashboard (css/dashboard.css) sí lo quieren a lo
   ancho de la card, y por eso usan .grafico-periodos, que redeclara el ancho
   explícitamente en vez de depender de esta base. */
.toggle-group {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    background: var(--background);
    border-radius: 50px;
    padding: 3px;
}

/* Las dos filas de 5 opciones ("7D 30D 90D 1A Todo") necesitan todo el ancho
   para que no se monte en dos líneas dentro de una card estrecha. */
.grafico-periodos {
    width: 100%;
}

.toggle-lateralidad-cuenta .toggle-option {
    text-align: center;
}

.pages-toggle-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.toggle-option {
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--textSecondary);
    font-family: var(--font-primary);
}

.toggle-option.active {
    background: var(--border);
    color: var(--background);
    font-weight: 500;
}

/* El hover ya no ensancha la píldora: con `padding` mayor el grupo entero se
   desplazaba al pasar el ratón y las opciones neighboring se bailaban. El
   hover se marca solo con el fondo. */
.toggle-option:hover:not(.active) {
    background: var(--lightHover);
}

/* ========================================
   SELECT
   ======================================== */

.select {
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 10px 14px;
    padding-right: 42px;
    color: var(--text);
    font-family: var(--font-primary);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F3F3F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

[data-theme="light"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.select:hover {
    border-color: var(--text);
    box-shadow: inset 0 0 10px var(--shadow);
}

/* ========================================
   BOTONES
   ======================================== */

.glass-btn {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 20px;
    color: var(--text);
    font-family: var(--font-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glass-btn:hover {
    background: var(--lightHover);
    border-color: var(--text);
    transform: scale(1.02);
    --glow: inset 0 0 10px var(--shadow);
}

.glass-btn.danger {
    border-color: var(--negative);
    color: var(--negative);
}

.glass-btn.danger:hover {
    background: var(--negative);
    color: var(--background);
}

.button-group {
    display: flex;
    gap: 8px;
}

/* ========================================
   TIPO DE CAMBIO
   ======================================== */

.exchange-rate {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rate-value {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.rate-update {
    font-size: 12px;
    color: var(--textSecondary);
}

.exchange-rate-inputs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.exchange-input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}

.exchange-input label {
    font-size: 13px;
    color: var(--textSecondary);
    white-space: nowrap;
}

.exchange-input .form-input {
    flex: 1;
    min-width: 80px;
}

.exchange-input span {
    font-size: 13px;
    color: var(--textSecondary);
}

/* ========================================
   TIPO DE CAMBIO · MODO AUTOMÁTICO
   ======================================== */

.config-group [hidden] {
    display: none;
}

.tc-auto-box {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
    justify-content: space-between;
}

.exchange-notes {
    display: flex;
    flex-direction: column;
}

.exchange-note {
    margin: 0;
    width: fit-content;
    font-size: 13px;
    color: var(--textSecondary);
}

.tc-auto-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.tc-status {
    font-size: 13px;
    color: var(--negative);
}

/* ========================================
   ZONA PELIGROSA
   ======================================== */

.danger-zone {
    border-left: 3px solid var(--negative);
    padding-left: 16px;
    margin-top: 4px;
    padding-top: 16px;
}

.danger-zone.no-border {
    border-left: none;
    padding-left: 0;
}

/* ========================================
   MARCA Y VERSIÓN
   ======================================== */

.footer-brand {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-brand:hover {
    color: var(--positive);
}

.footer-version {
    font-family: var(--font-secondary);
    font-size: 12px;
}

.footer-copy {
    font-size: 12px;
}

/* ========================================
   SWITCH / TOGGLE
   ======================================== */

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text);
    border-radius: 24px;
    transition: 0.3s ease;
}

.slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--background);
    border-radius: 50%;
    transition: 0.3s ease;
}

.switch input:checked + .slider {
    background: var(--border);
}

.switch input:checked + .slider::before {
    transform: translateX(20px);
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
}

.toggle-row span {
    font-size: 14px;
    color: var(--text);
}

/* ========================================
   SECCIONES OCULTAS
   ======================================== */

.config-body .panel-section.hidden-section {
    display: none;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .config-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .config-label {
        min-width: auto;
    }

    /* Solo en la configuración: en móvil los toggles ocupan el ancho de la
       fila. Acotado a .config-group para no estirar también los de los
       modales, que van dentro de .form-group. */
    .config-group .toggle-group {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 12px;
    }

    .config-group .toggle-option {
        flex: 1;
        text-align: center;
    }

    .exchange-rate {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .button-group {
        width: 100%;
    }

    .button-group .glass-btn {
        flex: 1;
        text-align: center;
    }
}