:root{
    --bg:#0A192F;
    --bg-soft:#10213a;
    --panel:rgba(255,255,255,.12);
    --panel-strong:rgba(255,255,255,.18);
    --text:#FFFFFF;
    --muted:rgba(255,255,255,.68);
    --line:rgba(255,255,255,.14);
    --primary:#1E90FF;
    --primary-2:#75D0FA;
    --success:#35d07f;
    --danger:#ff5c7a;
    --shadow:0 24px 70px rgba(0,0,0,.32);
}

body.light-theme{
    --bg:#f4f8ff;
    --bg-soft:#ffffff;
    --panel:rgba(255,255,255,.76);
    --panel-strong:rgba(255,255,255,.94);
    --text:#000000;
    --muted:rgba(0,0,0,.58);
    --line:rgba(10,25,47,.12);
    --shadow:0 22px 55px rgba(30,144,255,.14);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    min-height:100vh;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;
    background:
        radial-gradient(circle at 20% 10%, rgba(117,208,250,.22), transparent 32rem),
        linear-gradient(145deg, var(--bg), var(--bg-soft));
    color:var(--text);
    padding:20px;
    transition:background .35s ease,color .35s ease;
}

body:has(#loginView:not([style*="none"])){
    display:grid;
    place-items:center;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    cursor:pointer;
    background:linear-gradient(135deg,var(--primary),#176bd6);
    color:white;
    font-weight:700;
    padding:12px 16px;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease;
    box-shadow:0 10px 24px rgba(30,144,255,.22);
}

button:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 32px rgba(30,144,255,.28);
}

button:active{
    transform:translateY(0) scale(.99);
}

input,
textarea,
select{
    width:100%;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.9);
    color:#071224;
    outline:none;
    transition:border .2s ease,box-shadow .2s ease,background .2s ease;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(30,144,255,.18);
}

label{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.login-container{
    position:relative;
    width:min(100%,440px);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:28px;
    padding:34px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(26px) saturate(150%);
    animation:panelIn .45s ease both;
}

.logo,
.sidebar-brand{
    text-align:center;
}

.brand-logo-card{
    width:100%;
    min-height:74px;
    margin:0 auto 14px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
    box-shadow:0 16px 34px rgba(30,144,255,.18);
    backdrop-filter:blur(18px) saturate(150%);
    padding:14px;
}

.brand-logo{
    display:block;
    width:min(100%,250px);
    max-height:48px;
    object-fit:contain;
}

.logo h1,
.sidebar-brand h2{
    color:var(--text);
    letter-spacing:0;
}

.logo p,
.sidebar-brand small,
.help,
.login-welcome p,
.topbar small{
    color:var(--muted);
}

.login-welcome{
    margin:24px 0;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.08);
}

.login-welcome h2{
    margin-bottom:8px;
    font-size:24px;
}

.help,
.login-footer{
    margin-top:16px;
    text-align:center;
    font-size:12px;
    color:var(--muted);
}

.login-footer{
    letter-spacing:.08em;
    font-weight:800;
}

.onara-logo{
    display:block;
    width:150px;
    max-width:100%;
    margin:8px auto 0;
    object-fit:contain;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.24));
}

.dashboard-container{
    width:100%;
    min-height:calc(100vh - 40px);
}

.layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:22px;
    min-height:calc(100vh - 40px);
}

.sidebar{
    position:sticky;
    top:20px;
    min-height:calc(100vh - 40px);
    background:rgba(10,25,47,.72);
    border:1px solid var(--line);
    border-radius:26px;
    color:white;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(24px) saturate(150%);
}

body.light-theme .sidebar{
    background:rgba(10,25,47,.92);
}

.sidebar-brand{
    margin-bottom:18px;
}

.sidebar hr{
    width:100%;
    border:0;
    border-top:1px solid rgba(255,255,255,.14);
    margin:10px 0;
}

.menu-btn,
.sidebar > button{
    width:100%;
    text-align:left;
    background:transparent;
    color:white;
    box-shadow:none;
    border:1px solid transparent;
}

.menu-btn:hover,
.sidebar > button:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.12);
}

.menu-btn.active{
    background:linear-gradient(135deg,rgba(30,144,255,.95),rgba(117,208,250,.7));
    border-color:rgba(255,255,255,.2);
}

.powered-by{
    margin-top:auto;
    padding-top:20px;
    text-align:center;
    font-size:11px;
    opacity:.62;
    letter-spacing:.08em;
    font-weight:800;
}

.powered-by span{
    display:block;
    margin-bottom:6px;
}

.powered-by .onara-logo{
    width:138px;
}

.content{
    min-width:0;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
    padding:20px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:0 18px 46px rgba(0,0,0,.14);
    backdrop-filter:blur(22px) saturate(150%);
}

.topbar h1{
    font-size:clamp(24px,3vw,36px);
    line-height:1.05;
    margin:0 0 6px;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.client-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(53,208,127,.13);
    color:var(--success);
    border:1px solid rgba(53,208,127,.24);
    padding:9px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.client-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 14px var(--success);
}

.theme-toggle{
    width:58px;
    height:34px;
    padding:3px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid var(--line);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.theme-toggle span{
    display:block;
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffffff,var(--primary-2));
    box-shadow:0 5px 12px rgba(0,0,0,.22);
    transition:transform .25s ease;
}

body.light-theme .theme-toggle span{
    transform:translateX(24px);
}

.login-theme-toggle{
    position:absolute;
    top:18px;
    right:18px;
}

.dashboard-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:20px;
}

.card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px;
    box-shadow:0 16px 44px rgba(0,0,0,.13);
    color:var(--text);
    backdrop-filter:blur(18px) saturate(140%);
    transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.card:hover{
    transform:translateY(-2px);
    border-color:rgba(117,208,250,.42);
}

.metric-card{
    min-height:118px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
        linear-gradient(145deg,rgba(30,144,255,.28),rgba(117,208,250,.08)),
        var(--panel);
}

.metric-card h3{
    color:var(--muted);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.metric-card span{
    color:var(--text);
    font-size:38px;
    line-height:1;
    font-weight:900;
}

.dashboard-section{
    margin-top:20px;
    padding:20px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:24px;
    backdrop-filter:blur(18px) saturate(140%);
}

.dashboard-section h2{
    margin-bottom:16px;
    font-size:22px;
}

#listaCompras,
#listaServicios,
#listaTickets,
#listaGarantias{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.68);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:20px;
    backdrop-filter:blur(12px);
    animation:fadeIn .18s ease both;
}

.modal-window{
    position:relative;
    width:100%;
    max-width:1000px;
    max-height:90vh;
    overflow:auto;
    background:var(--panel-strong);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:28px;
    padding:32px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(28px) saturate(150%);
    animation:modalIn .24s ease both;
}

#modalContenido{
    color:var(--text);
}

#modalContenido [style*="background:#f8fafc"],
#modalContenido [style*="background: #f8fafc"],
#modalContenido [style*="background:#f1f5f9"],
#modalContenido [style*="background: #f1f5f9"],
#modalContenido [style*="background:#fff7ed"],
#modalContenido [style*="background: #fff7ed"]{
    color:#0f172a;
}

#modalContenido [style*="color:#64748b"],
#modalContenido [style*="color: #64748b"]{
    color:#53657f !important;
}

#modalContenido button{
    border-radius:14px;
    background:linear-gradient(135deg,var(--primary),#2464e8);
    box-shadow:0 16px 34px rgba(30,144,255,.22);
}

#modalContenido input,
#modalContenido textarea,
#modalContenido select{
    border-radius:14px !important;
}

.warranty-detail{
    padding:4px;
}

.warranty-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:22px;
    padding-right:48px;
}

.warranty-header h2{
    font-size:28px;
    line-height:1.1;
    margin-bottom:8px;
}

.warranty-status{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    color:white;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.warranty-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px;
    margin-bottom:22px;
}

.warranty-field{
    padding:14px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.1);
}

body.light-theme .warranty-field{
    background:rgba(10,25,47,.04);
}

.warranty-field small{
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-weight:800;
}

.warranty-field strong{
    color:var(--text);
}

.warranty-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
    padding-top:18px;
    border-top:1px solid var(--line);
}

.modal-close{
    position:absolute;
    right:16px;
    top:16px;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    color:var(--text);
    box-shadow:none;
}

.modal-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:4px;
}

.secondary-btn{
    background:rgba(255,255,255,.12);
    color:var(--text);
    box-shadow:none;
}

.ticket-status{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    margin-left:8px;
}

.ticket-status.nuevo{
    background:#dbeafe;
    color:#1d4ed8;
}

.ticket-status.en\ proceso{
    background:#fef3c7;
    color:#b45309;
}

.ticket-status.esperando\ cliente{
    background:#fde68a;
    color:#92400e;
}

.ticket-status.cerrado{
    background:#dcfce7;
    color:#15803d;
}

@keyframes panelIn{
    from{opacity:0;transform:translateY(12px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes modalIn{
    from{opacity:0;transform:translateY(14px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

@media (max-width:1100px){
    .dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:860px){
    body{
        padding:12px;
    }

    .layout{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .sidebar{
        position:static;
        min-height:auto;
        border-radius:22px;
    }

    .sidebar-brand{
        display:flex;
        align-items:center;
        gap:12px;
        text-align:left;
        margin-bottom:12px;
    }

    .sidebar-brand .brand-logo-card{
        margin:0;
        width:150px;
        min-height:50px;
        border-radius:14px;
        padding:10px;
    }

    .topbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .topbar-actions{
        width:100%;
        justify-content:space-between;
    }
}

@media (max-width:560px){
    .login-container{
        padding:28px 20px;
        border-radius:24px;
    }

    .dashboard-cards{
        grid-template-columns:1fr;
    }

    .dashboard-section,
    .topbar,
    .modal-window{
        border-radius:20px;
        padding:18px;
    }

    #listaCompras,
    #listaServicios,
    #listaTickets,
    #listaGarantias{
        grid-template-columns:1fr;
    }

    .modal-actions button{
        width:100%;
    }
}