/* ==========================================================
   TUYA HOME SERVER
   THEME V3 — DARK CONTROL CENTER
   ========================================================== */

:root {
    --bg:#07111f;
    --bg2:#091626;

    --panel:#0d1929;
    --panel2:#111f32;
    --panel3:#16263c;

    --border:#243751;
    --border2:#304765;

    --text:#f4f7fb;
    --muted:#8f9fb4;
    --muted2:#65768d;

    --blue:#4696ff;
    --blue2:#245fb0;

    --green:#41db83;
    --orange:#f4a522;
    --red:#f2535d;
    --purple:#a45cff;

    --radius:13px;

    --shadow:
        0 12px 32px rgba(0,0,0,.22);
}


/* ==========================================================
   BASE
   ========================================================== */

html {
    background:var(--bg);
}

body {
    margin:0 !important;

    background:
        radial-gradient(
            circle at 15% 8%,
            rgba(32,94,170,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(25,78,135,.09),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #07111f 0%,
            #081421 45%,
            #06101c 100%
        ) !important;

    color:var(--text) !important;

    min-height:100vh;
}

body,
button,
input,
select,
textarea {
    font-family:
        Inter,
        "Segoe UI",
        system-ui,
        -apple-system,
        sans-serif !important;
}

* {
    scrollbar-color:
        #324a68
        transparent;
}


/* ==========================================================
   TOP BAR
   ========================================================== */

header {
    position:sticky !important;
    top:0;
    z-index:1000;

    min-height:58px;

    background:
        rgba(5,14,26,.96) !important;

    border-bottom:
        1px solid
        rgba(75,106,145,.23) !important;

    box-shadow:
        0 7px 28px rgba(0,0,0,.24);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}


/* MARCA */

.brand-title,
header > h1 {
    display:flex;
    align-items:center;
    gap:10px;

    color:#fff !important;

    font-size:19px !important;
    font-weight:760 !important;

    letter-spacing:-.02em;
}


/* logo naranja */

.brand-title::before,
header > h1::before {
    content:"t";

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

    width:34px;
    height:34px;

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            #ff764b,
            #f4482f
        );

    color:white;

    font-size:23px;
    font-weight:800;

    box-shadow:
        0 5px 15px
        rgba(244,72,47,.26);
}

.brand-subtitle {
    color:var(--muted) !important;
}


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

.session-global-nav {
    gap:3px !important;
}

.session-global-nav a {
    min-height:44px;

    display:inline-flex !important;
    align-items:center;
    gap:7px;

    padding:
        8px 13px !important;

    border:
        1px solid transparent !important;

    border-radius:
        7px !important;

    color:
        #a5b2c3 !important;

    background:
        transparent !important;

    font-weight:
        520;

    transition:
        .15s ease;
}

.session-global-nav a:hover {
    color:#fff !important;

    background:
        rgba(68,145,255,.07) !important;
}

.session-global-nav a.active {
    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            rgba(60,135,235,.13),
            rgba(27,83,155,.07)
        ) !important;

    border-bottom:
        2px solid
        var(--blue) !important;

    box-shadow:
        0 8px 22px
        rgba(40,115,215,.12);
}


/* iconos del menú */

.session-global-nav a::before {
    color:#8999ad;
    font-size:16px;
}

.session-global-nav a[href="/inicio"]::before {
    content:"⌂";
}

.session-global-nav a[href="/"]::before {
    content:"▣";
}

.session-global-nav a[href="/panel"]::before {
    content:"⌁";
}

.session-global-nav a[href="/alarm"]::before {
    content:"△";
}

.session-global-nav a[href="/salud"]::before {
    content:"♡";
}

.session-global-nav a[href="/incidents"]::before {
    content:"◇";
}

.session-global-nav a[href="/users"]::before {
    content:"♧";
}


/* ==========================================================
   USUARIO
   ========================================================== */

#sessionUserBox {
    background:
        rgba(13,26,43,.96) !important;

    border:
        1px solid var(--border) !important;

    color:
        var(--text) !important;

    border-radius:
        9px !important;

    box-shadow:
        0 6px 22px rgba(0,0,0,.22) !important;
}


/* ==========================================================
   MAIN
   ========================================================== */

main {
    max-width:
        1450px !important;

    padding-top:
        16px !important;
}


/* ==========================================================
   TARJETAS RESUMEN SUPERIORES
   ========================================================== */

.summary-grid,
.summary {
    gap:
        14px !important;
}


/* tarjeta base */

.summary-card {
    position:relative;

    display:grid !important;

    grid-template-columns:
        58px 1fr !important;

    grid-template-rows:
        auto auto !important;

    column-gap:
        16px;

    align-items:center;

    min-height:
        98px;

    padding:
        16px 18px !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #122136,
            #0f1c2e
        ) !important;

    border:
        1px solid
        rgba(87,117,155,.34) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.17);

    overflow:hidden;
}


/* círculo icono */

.summary-card::before {
    grid-column:1;
    grid-row:1 / 3;

    display:flex;

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

    width:52px;
    height:52px;

    border-radius:50%;

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


/* número */

.summary-number {
    grid-column:2;
    grid-row:1;

    font-size:
        25px !important;

    font-weight:
        760 !important;

    color:
        #fff !important;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


/* texto */

.summary-label {
    grid-column:2;
    grid-row:2;

    color:
        #a5b4c6 !important;

    font-size:
        13px !important;

    line-height:
        1.25;
}


/* TARJETA 1 */

.summary-card:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            rgba(31,75,133,.52),
            rgba(17,35,60,.94)
        ) !important;

    border-color:
        rgba(67,145,255,.46) !important;
}

.summary-card:nth-child(1)::before {
    content:"▥";

    color:
        #5aa6ff;

    background:
        rgba(56,132,235,.16);

    box-shadow:
        0 0 26px
        rgba(59,141,255,.12);
}


/* TARJETA 2 */

.summary-card:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            rgba(20,83,61,.49),
            rgba(15,42,38,.94)
        ) !important;

    border-color:
        rgba(52,201,120,.37) !important;
}

.summary-card:nth-child(2)::before {
    content:"⌁";

    color:
        var(--green);

    background:
        rgba(43,188,105,.14);
}


/* TARJETA 3 */

.summary-card:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            rgba(100,64,22,.43),
            rgba(48,37,25,.93)
        ) !important;

    border-color:
        rgba(237,151,36,.36) !important;
}

.summary-card:nth-child(3)::before {
    content:"△";

    color:
        var(--orange);

    background:
        rgba(230,143,31,.15);
}


/* TARJETA 4 */

.summary-card:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            rgba(98,36,45,.43),
            rgba(50,27,34,.94)
        ) !important;

    border-color:
        rgba(238,80,91,.37) !important;
}

.summary-card:nth-child(4)::before {
    content:"◉";

    color:
        var(--red);

    background:
        rgba(230,69,79,.15);
}


/* ==========================================================
   VIVIENDAS
   ========================================================== */

.home,
.health-home {
    position:relative;

    margin-bottom:
        12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(12,25,42,.97),
            rgba(8,20,35,.97)
        ) !important;

    border:
        1px solid
        rgba(68,94,126,.42) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.14);

    overflow:hidden;
}


/* cabecera vivienda */

.home-header,
.health-home-header,
.home-title {
    min-height:
        48px;

    display:flex !important;

    align-items:center;

    gap:
        10px;

    padding:
        10px 15px !important;

    margin:
        0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(18,35,58,.86),
            rgba(10,24,41,.58)
        ) !important;

    border-bottom:
        1px solid
        rgba(72,99,132,.30);

    color:
        #fff !important;
}


/* icono localización */

.home-header::before,
.health-home-header::before,
.home-title::before {
    content:"⌾";

    display:flex;

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

    width:28px;
    height:28px;

    flex:
        0 0 28px;

    border-radius:
        50%;

    color:
        var(--blue);

    background:
        rgba(61,143,255,.12);

    font-size:
        18px;
}


/* alternancia de color viviendas */

.home:nth-of-type(3n+1)
.home-header::before,
.home:nth-of-type(3n+1)
.home-title::before {
    color:#48df78;
    background:rgba(72,223,120,.10);
}

.home:nth-of-type(3n+2)
.home-header::before,
.home:nth-of-type(3n+2)
.home-title::before {
    color:#4697ff;
    background:rgba(70,151,255,.11);
}

.home:nth-of-type(3n)
.home-header::before,
.home:nth-of-type(3n)
.home-title::before {
    color:#aa5cff;
    background:rgba(170,92,255,.11);
}


/* nombre vivienda */

.home-name,
.health-home-name,
.home-title {
    font-size:
        19px !important;

    font-weight:
        720 !important;

    letter-spacing:
        -.02em;
}


/* ==========================================================
   CONTADORES / BADGES
   ========================================================== */

.home-status,
.home-count,
.health-home-summary,
.count,
.alarm-section-count,
.ui-count-badge {
    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    min-height:
        27px;

    padding:
        3px 10px !important;

    margin-left:
        auto;

    border:
        1px solid
        rgba(89,116,150,.39) !important;

    border-radius:
        999px !important;

    background:
        rgba(16,31,51,.82) !important;

    color:
        #b9c7d8 !important;

    font-size:
        12px !important;

    white-space:
        nowrap;

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.025);
}


/* ==========================================================
   HOME GRID
   ========================================================== */

.home-grid {
    gap:
        11px !important;

    padding:
        10px !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.card,
.device,
.incident,
.alarm-control {
    background:
        linear-gradient(
            145deg,
            #142238,
            #101d2f
        ) !important;

    border:
        1px solid
        rgba(69,94,126,.43) !important;

    border-radius:
        11px !important;

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.02),
        0 5px 18px
        rgba(0,0,0,.12);
}


/* tarjeta compacta */

.device {
    padding:
        11px 13px !important;

    min-height:
        0 !important;

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

.device:hover {
    border-color:
        rgba(71,150,255,.48) !important;

    background:
        linear-gradient(
            145deg,
            #172842,
            #122138
        ) !important;
}


/* ==========================================================
   TITULOS CARDS
   ========================================================== */

.card-title {
    color:
        #eaf1fb !important;

    text-transform:
        uppercase;

    letter-spacing:
        .055em;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}

.device-name,
.name {
    color:
        #f1f5fa !important;

    font-weight:
        650 !important;
}

.device-meta,
.type,
.location {
    color:
        var(--muted) !important;
}


/* ==========================================================
   HABITACIONES
   ========================================================== */

.room,
.health-subsection,
.alarm-section {
    margin-bottom:
        9px !important;

    background:
        rgba(10,22,38,.56) !important;

    border:
        1px solid
        rgba(61,85,115,.36) !important;

    border-radius:
        10px !important;

    overflow:hidden;
}

.room-title,
.room-name,
.health-subsection-title,
.alarm-section-title {
    min-height:
        38px;

    display:flex !important;

    align-items:center;

    padding:
        8px 11px !important;

    margin:
        0 !important;

    color:
        #dce6f3 !important;

    background:
        rgba(20,36,57,.62) !important;

    border-bottom:
        1px solid
        rgba(63,88,119,.26);

    font-size:
        12px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .02em;
}


/* ==========================================================
   ESTADOS
   ========================================================== */

.online,
.success,
.ok,
.value-ok {
    color:
        var(--green) !important;
}

.offline,
.warning,
.warn {
    color:
        var(--orange) !important;
}

.error,
.danger,
.critical,
.value-danger {
    color:
        var(--red) !important;
}


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

button {
    border:
        1px solid
        rgba(74,101,134,.58) !important;

    border-radius:
        7px !important;

    background:
        linear-gradient(
            180deg,
            #1a2a41,
            #142238
        ) !important;

    color:
        #edf3fb !important;

    transition:
        .15s ease;
}

button:hover:not(:disabled) {
    border-color:
        rgba(71,150,255,.65) !important;

    background:
        linear-gradient(
            180deg,
            #203451,
            #172a44
        ) !important;
}


/* botón activo / primary */

button.primary {
    background:
        linear-gradient(
            180deg,
            #215e47,
            #174735
        ) !important;

    border-color:
        rgba(67,211,128,.58) !important;
}


/* ==========================================================
   ALARM BUTTONS
   ========================================================== */

.alarm-buttons,
.mode-buttons {
    gap:
        7px !important;
}

.alarm-buttons button,
.mode-buttons button {
    min-height:
        32px;

    padding:
        5px 12px !important;
}


/* ==========================================================
   SWITCHES
   ========================================================== */

.slider {
    background:
        #46536a !important;
}

input:checked + .slider {
    background:
        linear-gradient(
            90deg,
            #238d53,
            #38ce79
        ) !important;

    box-shadow:
        0 0 14px
        rgba(55,207,121,.18);
}


/* ==========================================================
   INDICADORES
   ========================================================== */

.indicator-list {
    gap:
        7px !important;
}

.indicator-main {
    padding:
        6px 0;
}

.indicator-bar {
    background:
        #2a3b50 !important;

    border-radius:
        999px !important;

    overflow:hidden;
}

.indicator-bar-fill {
    background:
        linear-gradient(
            90deg,
            #3988f1,
            #58adff
        ) !important;
}


/* ==========================================================
   RESUMEN ESTADO
   ========================================================== */

.summary-line {
    min-height:
        26px;

    border-bottom:
        1px solid
        rgba(70,94,124,.18);
}

.summary-line:last-child {
    border-bottom:0;
}

.summary-label {
    color:
        #a8b5c6 !important;
}


/* ==========================================================
   COLAPSABLES
   ========================================================== */

.ui-collapsible-header {
    cursor:pointer;
    user-select:none;
}

.ui-collapse-toggle {
    width:
        27px;

    height:
        27px;

    min-width:
        27px;

    display:inline-flex;

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

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #7fa7d9 !important;

    font-size:
        18px;

    box-shadow:
        none !important;

    transition:
        transform .18s ease;
}

.ui-collapsed >
.ui-collapsible-header
.ui-collapse-toggle {
    transform:
        rotate(-90deg);
}

.ui-collapsed >
.ui-collapse-body {
    display:none !important;
}


/* ==========================================================
   ALERTAS EN CABECERA
   ========================================================== */

.ui-has-alert >
.ui-collapsible-header {
    box-shadow:
        inset 3px 0
        var(--red);
}

.ui-ok >
.ui-collapsible-header {
    box-shadow:
        inset 3px 0
        var(--green);
}


/* ==========================================================
   INPUTS
   ========================================================== */

input,
select,
textarea {
    background:
        #101f33 !important;

    border:
        1px solid
        #314762 !important;

    color:
        #f1f5fa !important;

    border-radius:
        8px !important;
}


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

@media (max-width:900px) {

    main {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }

    .summary-card {
        min-height:
            88px;
    }
}


@media (max-width:600px) {

    header {
        position:
            relative !important;
    }

    main {
        padding:
            12px 10px 70px !important;
    }

    .summary-grid,
    .summary {
        grid-template-columns:
            1fr 1fr !important;

        gap:
            8px !important;
    }

    .summary-card {
        grid-template-columns:
            42px 1fr !important;

        min-height:
            82px;

        padding:
            12px !important;

        column-gap:
            10px;
    }

    .summary-card::before {
        width:
            40px;

        height:
            40px;

        font-size:
            20px;
    }

    .summary-number {
        font-size:
            21px !important;
    }

    .home,
    .health-home {
        border-radius:
            10px !important;
    }

    .home-header,
    .health-home-header,
    .home-title {
        min-height:
            45px;

        padding:
            9px 10px !important;
    }

    .home-name,
    .health-home-name,
    .home-title {
        font-size:
            17px !important;
    }

    .home-grid {
        padding:
            7px !important;
    }

    .device {
        padding:
            11px !important;
    }

    .session-global-nav {
        flex-wrap:
            nowrap !important;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }

    .session-global-nav::-webkit-scrollbar {
        display:none;
    }
}


@media (max-width:390px) {

    .summary-grid,
    .summary {
        grid-template-columns:
            1fr !important;
    }

}