/* =========================================================
   TEMA CLARO / OSCURO
   WEB COMERCIAL - CUPOTECH SOLUTIONS
========================================================= */


/* =========================================================
   TRANSICIÓN GENERAL
========================================================= */

html {
    color-scheme: light;
}


html[data-theme="dark"] {
    color-scheme: dark;
}


body,
.commercial-header,
.commercial-nav,
.commercial-dropdown-menu,
.commercial-search,
.commercial-search-results,
.commercial-theme-toggle {
    transition:
            background-color 0.25s ease,
            background 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
}


/* =========================================================
   BOTÓN DE TEMA
========================================================= */

.commercial-theme-toggle {
    width: 46px;
    height: 46px;

    padding: 0;

    flex-shrink: 0;

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

    gap: 7px;

    color: #31566f;

    background: #f5f9fc;

    border: 1px solid #cfe1eb;
    border-radius: 11px;

    cursor: pointer;

    font-family: "Inter", sans-serif;

    box-shadow:
            0 4px 12px rgba(12, 70, 105, 0.06);

    transition:
            color 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease,
            box-shadow 0.2s ease;
}


.commercial-theme-toggle:hover {
    color: #0878b9;

    background: #eaf7fc;

    border-color: #a9dbea;

    transform: translateY(-1px);

    box-shadow:
            0 7px 16px rgba(12, 70, 105, 0.10);
}


.commercial-theme-toggle i {
    font-size: 16px;
}


.commercial-theme-label {
    display: none;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   MODO OSCURO - BASE
========================================================= */

html[data-theme="dark"] body {
    color: #d7e5ee;

    background: #091722;
}


/* =========================================================
   HEADER
========================================================= */

html[data-theme="dark"]
.commercial-header {
    background: rgba(8, 25, 38, 0.98);

    border-top-color: #08a8d8;
    border-bottom-color: #1d3b4d;

    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.18);
}


html[data-theme="dark"]
.commercial-header.scrolled {
    background: rgba(8, 25, 38, 0.94);

    box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   MARCA
========================================================= */

html[data-theme="dark"]
.commercial-brand {
    color: #ffffff;
}


html[data-theme="dark"]
.commercial-brand-text strong {
    color: #ffffff;
}


html[data-theme="dark"]
.commercial-brand-text span {
    color: #8eabba;
}


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

html[data-theme="dark"]
.commercial-nav-link,
html[data-theme="dark"]
.commercial-dropdown-toggle {
    color: #c1d5e0;
}


html[data-theme="dark"]
.commercial-nav-link:hover,
html[data-theme="dark"]
.commercial-dropdown-toggle:hover {
    color: #4dc8ed;
}


/* =========================================================
   DROPDOWN
========================================================= */

html[data-theme="dark"]
.commercial-dropdown-menu {
    background: #102737;

    border-color: #25475a;

    box-shadow:
            0 14px 35px rgba(0, 0, 0, 0.30);
}


html[data-theme="dark"]
.commercial-dropdown-menu a {
    color: #c3d7e2;
}


html[data-theme="dark"]
.commercial-dropdown-menu a:hover {
    color: #ffffff;

    background: #16394d;
}


/* =========================================================
   BUSCADOR
========================================================= */

html[data-theme="dark"]
.commercial-search {
    background: #102737;

    border-color: #29495a;
}


html[data-theme="dark"]
.commercial-search:focus-within {
    background: #122c3d;

    border-color: #08a8d8;

    box-shadow:
            0 0 0 4px rgba(8, 168, 216, 0.10);
}


html[data-theme="dark"]
.commercial-search > i {
    color: #7fa3b6;
}


html[data-theme="dark"]
.commercial-search input {
    color: #e2eef4;
}


html[data-theme="dark"]
.commercial-search input::placeholder {
    color: #7795a5;
}


/* =========================================================
   RESULTADOS DEL BUSCADOR
========================================================= */

html[data-theme="dark"]
.commercial-search-results {
    background: #102737;

    border-color: #29495a;

    box-shadow:
            0 14px 35px rgba(0, 0, 0, 0.30);
}


html[data-theme="dark"]
.commercial-search-results button {
    color: #bdd3df;
}


html[data-theme="dark"]
.commercial-search-results button:hover {
    color: #ffffff;

    background: #16394d;
}


html[data-theme="dark"]
.commercial-search-empty {
    color: #88a7b7;
}


/* =========================================================
   BOTÓN DE TEMA OSCURO
========================================================= */

html[data-theme="dark"]
.commercial-theme-toggle {
    color: #ffd36a;

    background: #102737;

    border-color: #29495a;

    box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.18);
}


html[data-theme="dark"]
.commercial-theme-toggle:hover {
    color: #ffe294;

    background: #16394d;

    border-color: #376174;
}


/* =========================================================
   USUARIO / SESIÓN
========================================================= */

html[data-theme="dark"]
.commercial-user {
    color: #d7e7ef;
}


html[data-theme="dark"]
.commercial-user button {
    color: #d7e7ef;
}


html[data-theme="dark"]
.commercial-user-menu {
    background: #102737;

    border-color: #29495a;

    box-shadow:
            0 14px 35px rgba(0, 0, 0, 0.30);
}


html[data-theme="dark"]
.commercial-user-menu a {
    color: #c4d8e3;
}


html[data-theme="dark"]
.commercial-user-menu a:hover {
    color: #ffffff;

    background: #16394d;
}


/* =========================================================
   CUPORA
========================================================= */

html[data-theme="dark"]
.cupora-panel {
    background: #0d2230;

    border-color: #29495a;

    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.38);
}


html[data-theme="dark"]
.cupora-conversation {
    background:
            linear-gradient(
                    180deg,
                    #0c1e2b,
                    #091923
            );
}


html[data-theme="dark"]
.cupora-message-bot
.cupora-message-bubble {
    color: #d9e8ef;

    background: #132c3b;

    border-color: #29495a;
}


html[data-theme="dark"]
.cupora-message-author {
    color: #8eaaba;
}


html[data-theme="dark"]
.cupora-quick-option {
    color: #bed3de;

    background: #132c3b;

    border-color: #29495a;
}


html[data-theme="dark"]
.cupora-quick-option:hover {
    color: #ffffff;

    background: #17384a;

    border-color: #397087;
}


html[data-theme="dark"]
.cupora-typing {
    background: #132c3b;

    border-color: #29495a;
}


html[data-theme="dark"]
.cupora-footer {
    background: #0d2230;

    border-top-color: #29495a;
}


html[data-theme="dark"]
.cupora-input-wrapper {
    background: #132c3b;

    border-color: #29495a;
}


html[data-theme="dark"]
.cupora-input-wrapper:focus-within {
    background: #163244;

    border-color: #08a8d8;
}


html[data-theme="dark"]
.cupora-input {
    color: #e2eef4;
}


html[data-theme="dark"]
.cupora-input::placeholder {
    color: #7898a9;
}


html[data-theme="dark"]
.cupora-footer-note {
    color: #7898a9;
}


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

@media (max-width: 980px) {

    .commercial-theme-toggle {
        width: 100%;
        height: 48px;

        padding: 0 14px;

        justify-content: flex-start;

        margin: 5px 0;
    }


    .commercial-theme-label {
        display: inline;
    }


    html[data-theme="dark"]
    .commercial-nav {
        background: rgba(8, 25, 38, 0.99);

        border-top-color: #29495a;
    }


    html[data-theme="dark"]
    .commercial-dropdown-menu {
        background: #102737;
    }

}