/* ========================================================= */
/* CONFIGURACIÓN - HUMIDI-TEC                                */
/* ========================================================= */

.config-page {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    color: var(--text-primary);
}


/* ========================================================= */
/* ENCABEZADO                                                */
/* ========================================================= */

.config-page-header {
    margin-bottom: 20px;
}

.config-page-label {
    display: block;

    margin-bottom: 4px;

    color: var(--green-700);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.config-page-header h1 {
    margin: 0;

    color: var(--green-950);

    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.config-page-header p {
    margin: 7px 0 0;

    color: var(--text-primary);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .82;
}


/* ========================================================= */
/* CONTENEDOR PRINCIPAL                                      */
/* ========================================================= */

.config-shell {
    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);

    min-height: 470px;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow-small);

    transition:
        background-color .2s ease,
        border-color .2s ease;
}


/* ========================================================= */
/* NAVEGACIÓN                                                */
/* ========================================================= */

.config-navigation {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 18px 12px;

    background: var(--green-50);

    border-right: 1px solid var(--border);

    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.config-nav-item {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 11px;

    color: var(--text-primary);
    background: transparent;

    border: none;
    border-radius: 9px;

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    text-align: left;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.config-nav-item:hover {
    color: var(--green-900);
    background: var(--green-100);
}

.config-nav-item.active {
    color: #ffffff;
    background: var(--green-700);

    box-shadow:
        0 5px 12px rgba(8, 116, 67, .14);
}


/* ========================================================= */
/* ICONO NAVEGACIÓN                                          */
/* ========================================================= */

.config-nav-icon {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    color: var(--green-700);
    background: var(--surface);

    border-radius: 8px;
}

.config-nav-icon svg {
    width: 16px;
    height: 16px;
}

.config-nav-item.active .config-nav-icon {
    color: var(--green-700);
    background: #ffffff;
}


/* ========================================================= */
/* CONTENIDO                                                 */
/* ========================================================= */

.config-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 24px;

    background: var(--surface);

    transition:
        background-color .2s ease;
}


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

.config-content-section {
    flex: 1;
}

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


/* ========================================================= */
/* ENCABEZADO DE SECCIÓN                                     */
/* ========================================================= */

.config-content-header {
    margin-bottom: 20px;
}

.config-content-header > span {
    display: block;

    margin-bottom: 4px;

    color: var(--green-700);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.config-content-header h2 {
    margin: 0;

    color: var(--green-950);

    font-size: 22px;
    font-weight: 900;
}

.config-content-header p {
    max-width: 650px;

    margin: 6px 0 0;

    color: var(--text-primary);

    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .82;
}


/* ========================================================= */
/* LISTA DE OPCIONES                                         */
/* ========================================================= */

.config-option-list {
    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 10px;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.config-option-row {
    min-height: 84px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding: 16px 17px;

    border-bottom: 1px solid var(--border-soft);

    transition:
        background-color .15s ease,
        border-color .15s ease;
}

.config-option-row:last-child {
    border-bottom: none;
}

.config-option-row:hover {
    background: var(--green-50);
}


/* ========================================================= */
/* TEXTO DE OPCIÓN                                           */
/* ========================================================= */

.config-option-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.config-option-copy strong {
    color: var(--green-950);

    font-size: 14px;
    font-weight: 900;
}

.config-option-copy span {
    max-width: 620px;

    margin-top: 5px;

    color: var(--text-primary);

    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .80;
}


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

.config-switch {
    position: relative;

    width: 54px;
    height: 30px;

    flex: 0 0 54px;
}

.config-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.config-switch-slider {
    position: absolute;

    inset: 0;

    background: var(--border);

    border: 1px solid var(--text-muted);
    border-radius: 999px;

    cursor: pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease;
}

.config-switch-slider::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 22px;
    height: 22px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .18);

    transition:
        transform .18s ease;
}

.config-switch input:checked +
.config-switch-slider {
    background: var(--green-600);

    border-color: var(--green-700);
}

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

.config-switch input:focus-visible +
.config-switch-slider {
    outline: 3px solid var(--blue-600);
    outline-offset: 3px;
}


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

.config-select-control {
    min-width: 170px;

    flex-shrink: 0;
}

.config-select-control select {
    width: 100%;
    height: 42px;

    padding:
        6px
        34px
        6px
        11px;

    color: var(--text-primary);
    background: var(--surface);

    border: 1px solid var(--green-400);
    border-radius: 8px;

    font: inherit;
    font-size: 13px;
    font-weight: 750;

    outline: none;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.config-select-control select:hover {
    border-color: var(--green-600);
}

.config-select-control select:focus {
    border-color: var(--green-700);

    box-shadow:
        0 0 0 3px rgba(8, 116, 67, .12);
}


/* ========================================================= */
/* PREVISUALIZACIÓN                                          */
/* ========================================================= */

.theme-preview {
    margin-top: 24px;
}

.theme-preview-label {
    display: block;

    margin-bottom: 8px;

    color: var(--green-700);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .9px;
}


/* ========================================================= */
/* VENTANA PREVIEW                                           */
/* ========================================================= */

.theme-preview-window {
    width: 100%;
    max-width: 440px;

    overflow: hidden;

    background: #f3f7f5;

    border: 1px solid var(--border);
    border-radius: 11px;

    box-shadow: var(--shadow-small);

    transition:
        background-color .22s ease,
        border-color .22s ease;
}


/* ========================================================= */
/* ESTRUCTURA PREVIEW                                        */
/* ========================================================= */

.theme-preview-topbar {
    height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 12px;

    background: #075333;

    transition:
        background-color .22s ease;
}

.theme-preview-logo {
    width: 26px;
    height: 26px;

    flex-shrink: 0;

    background: #ffffff;

    border-radius: 6px;

    transition:
        background-color .22s ease;
}

.theme-preview-title {
    width: 92px;
    height: 9px;

    background: #dcf4e7;

    border-radius: 999px;

    transition:
        background-color .22s ease;
}

.theme-preview-body {
    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    min-height: 155px;
}

.theme-preview-sidebar {
    display: flex;
    flex-direction: column;

    gap: 9px;

    padding: 13px 10px;

    background: #ffffff;

    border-right: 1px solid #dce8e1;

    transition:
        background-color .22s ease,
        border-color .22s ease;
}

.theme-preview-sidebar span {
    width: 100%;
    height: 11px;

    background: #d4e9dc;

    border-radius: 5px;

    transition:
        background-color .22s ease;
}

.theme-preview-sidebar span:first-child {
    background: #129056;
}

.theme-preview-main {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 14px;

    background: #f3f7f5;

    transition:
        background-color .22s ease;
}

.theme-preview-card {
    height: 54px;

    background: #ffffff;

    border: 1px solid #dce8e1;
    border-radius: 8px;

    transition:
        background-color .22s ease,
        border-color .22s ease;
}

.theme-preview-card.small {
    width: 72%;
    height: 34px;
}


/* ========================================================= */
/* PREVIEW CLARO                                             */
/* ========================================================= */

.theme-preview-window.light {
    background: #f3f7f5;
    border-color: #dce8e1;
}

.theme-preview-window.light
.theme-preview-topbar {
    background: #075333;
}

.theme-preview-window.light
.theme-preview-sidebar {
    background: #ffffff;
    border-color: #dce8e1;
}

.theme-preview-window.light
.theme-preview-main {
    background: #f3f7f5;
}

.theme-preview-window.light
.theme-preview-card {
    background: #ffffff;
    border-color: #dce8e1;
}


/* ========================================================= */
/* PREVIEW OSCURO                                            */
/* ========================================================= */

.theme-preview-window.dark {
    background: #0d1f18;

    border-color: #315044;
}

.theme-preview-window.dark
.theme-preview-topbar {
    background: #043d27;
}

.theme-preview-window.dark
.theme-preview-logo {
    background: #f4f8f6;
}

.theme-preview-window.dark
.theme-preview-title {
    background: #c9e8da;
}

.theme-preview-window.dark
.theme-preview-sidebar {
    background: #13291f;

    border-right-color: #315044;
}

.theme-preview-window.dark
.theme-preview-sidebar span {
    background: #285242;
}

.theme-preview-window.dark
.theme-preview-sidebar span:first-child {
    background: #24ad69;
}

.theme-preview-window.dark
.theme-preview-main {
    background: #0d1f18;
}

.theme-preview-window.dark
.theme-preview-card {
    background: #193329;

    border-color: #315044;
}


/* ========================================================= */
/* FOOTER                                                    */
/* ========================================================= */

.config-content-footer {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 13px;

    margin-top: 24px;
    padding-top: 16px;

    border-top: 1px solid var(--border);
}


/* ========================================================= */
/* BOTÓN GUARDAR                                             */
/* ========================================================= */

.config-save-button {
    min-height: 42px;

    padding: 8px 16px;

    color: #ffffff;
    background: var(--green-700);

    border: 1px solid var(--green-800);
    border-radius: 9px;

    font: inherit;
    font-size: 13px;
    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 5px 13px rgba(8, 116, 67, .13);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.config-save-button:hover:not(:disabled) {
    background: var(--green-800);

    border-color: var(--green-900);

    transform: translateY(-1px);
}

.config-save-button:disabled {
    opacity: .58;

    cursor: default;

    transform: none;
}


/* ========================================================= */
/* MENSAJE                                                   */
/* ========================================================= */

.config-message {
    display: none;

    padding: 10px 12px;

    color: var(--green-950);
    background: var(--green-100);

    border: 1px solid var(--green-500);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

.config-message.visible {
    display: block;
}

.config-message.error {
    color: var(--orange);
}


/* ========================================================= */
/* ACCESIBILIDAD                                             */
/* ========================================================= */

.config-page :focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 3px;
}


/* ========================================================= */
/* TABLET                                                    */
/* ========================================================= */

@media (max-width: 800px) {

    .config-shell {
        grid-template-columns: 1fr;
    }

    .config-navigation {
        flex-direction: row;

        gap: 7px;

        overflow-x: auto;

        padding: 10px;

        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .config-nav-item {
        width: auto;
        min-width: 135px;

        flex-shrink: 0;
    }

}


/* ========================================================= */
/* MÓVIL                                                     */
/* ========================================================= */

@media (max-width: 650px) {

    .config-page-header h1 {
        font-size: 27px;
    }

    .config-content {
        padding: 18px 14px;
    }

    .config-option-row {
        align-items: flex-start;
        flex-direction: column;

        gap: 13px;
    }

    .config-switch {
        align-self: flex-end;
    }

    .config-select-control {
        width: 100%;
    }

    .theme-preview-window {
        max-width: 100%;
    }

    .config-content-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .config-message {
        width: 100%;
    }

    .config-save-button {
        width: 100%;
    }

}

/* =========================================================
   EVITAR QUE LOS SELECTS SE CORTEN EN CONFIGURACIÓN
========================================================= */

.config-shell,
.config-content,
.config-content-section,
.config-option-list,
.config-option-row,
.config-select-control {
    overflow: visible !important;
}