:root {
    --negro:   #0d0d0d;
    --gris:    #1e1e1e;
    --dorado:  #c29332;
    --dorado2: #e6b84a;
    --naranja: #b65a2c;
    --ink:     #f0ece4;
    --muted:   rgba(240,236,228,.55);
    --card:    rgba(30,30,30,.85);
    --glass:   rgba(20,20,20,.75);
    --stroke:  rgba(194,147,50,.22);
    --shadow:  0 14px 40px rgba(0,0,0,.45);
}

.app-body {
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(1000px 600px at 10% -5%,  rgba(194,147,50,.12), transparent 60%),
        radial-gradient(800px  600px at 90% 0%,   rgba(182,90,44,.10),  transparent 55%),
        radial-gradient(800px  600px at 50% 100%, rgba(194,147,50,.08), transparent 55%),
        var(--negro);
    overflow-x: hidden;
    position: relative;
}

.bg-blob {
    position: fixed;
    width: 420px; height: 420px;
    filter: blur(50px);
    opacity: .4; z-index: -1;
    animation: floaty 12s ease-in-out infinite;
}
.blob-1 { top:15%; left:-160px; background: radial-gradient(circle, rgba(194,147,50,.7), transparent 60%); }
.blob-2 { bottom:-100px; right:-160px; background: radial-gradient(circle, rgba(182,90,44,.65), transparent 60%); animation-duration:15s; }
@keyframes floaty {
    0%,100% { transform: translateY(0) translateX(0) scale(1); }
    50%      { transform: translateY(-20px) translateX(16px) scale(1.04); }
}

/* NAVBAR */
.navbar-lumina {
    background: linear-gradient(90deg, rgba(13,13,13,.98), rgba(30,30,30,.95));
    border-bottom: 1px solid rgba(194,147,50,.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.brand-logo { width:34px; height:34px; object-fit:contain; transition:.4s; }
.brand-logo:hover { transform: rotate(10deg) scale(1.1); filter: drop-shadow(0 0 6px var(--dorado)); }
.brand-text { font-weight:700; font-size:1.15rem; letter-spacing:2px; color:var(--dorado) !important; }

.nav-underline { position:relative; color:rgba(240,236,228,.85) !important; transition:color .2s; }
.nav-underline:hover { color:var(--dorado) !important; }
.nav-underline::after {
    content:""; position:absolute;
    left:.4rem; right:.4rem; bottom:.1rem;
    height:2px; transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
    background:linear-gradient(90deg, var(--dorado), var(--naranja));
    border-radius:999px;
}
.nav-underline:hover::after { transform:scaleX(1); }

/* BOTÓN */
.btn-lumina {
    background: linear-gradient(135deg, var(--dorado), var(--naranja));
    border:none; border-radius:999px; color:#0d0d0d;
    font-weight:700; padding:.5rem 1.2rem;
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 8px 22px rgba(194,147,50,.25);
}
.btn-lumina:hover { transform:translateY(-2px); box-shadow:0 14px 35px rgba(194,147,50,.4); color:#0d0d0d; }
.btn-lumina:active { transform:translateY(0); }

/* CONTENEDOR */
.main-container { padding-top:2.5rem; padding-bottom:3rem; animation:fadeIn 1s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* CARDS */
.card-glass {
    background:var(--card);
    border:1px solid var(--stroke);
    border-radius:20px;
    box-shadow:var(--shadow);
}
.hover-lift { transition:transform .22s ease, box-shadow .22s ease; }
.hover-lift:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.55); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }

/* FOOTER */
.footer {
    background:rgba(13,13,13,.9);
    border-top:1px solid rgba(194,147,50,.18);
    backdrop-filter:blur(10px);
}
.footer-dot {
    width:12px; height:12px; border-radius:50%;
    background:linear-gradient(135deg, var(--dorado), var(--naranja));
    box-shadow:0 6px 18px rgba(194,147,50,.3);
    flex-shrink:0;
}
.footer-link { color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-link:hover { color:var(--dorado); text-decoration:underline; }

/* PULSE */
.pulse-soft { animation:pulseSoft 2.2s ease-in-out infinite; }
@keyframes pulseSoft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* AUTH */
.auth-card { margin-top:2rem; margin-bottom:2rem; }
.auth-input {
    background:rgba(255,255,255,.06);
    border:1px solid rgba(194,147,50,.25);
    border-radius:12px; padding:.65rem 1rem;
    color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.auth-input:focus {
    background:rgba(255,255,255,.09);
    border-color:var(--dorado);
    box-shadow:0 0 0 3px rgba(194,147,50,.2);
    color:var(--ink);
}
.auth-input::placeholder { color:var(--muted); }
.auth-input:disabled { background:rgba(255,255,255,.03); color:var(--muted); }
.auth-input:-webkit-autofill, .auth-input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 1000px #1e1e1e inset;
    -webkit-text-fill-color:var(--ink);
}
.form-label { color:rgba(240,236,228,.8); font-size:.9rem; }
.form-text  { color:var(--muted); }
.auth-link  { color:var(--dorado); text-decoration:none; margin-left:.3rem; }
.auth-link:hover { color:var(--dorado2); text-decoration:underline; }

/* TABLA */
.table { color:var(--ink); }
.table th { color:var(--dorado); border-color:rgba(194,147,50,.2); }
.table td { border-color:rgba(255,255,255,.06); }
.table tbody tr:hover { background:rgba(194,147,50,.06); }

/* ALERTAS */
.alert { border-radius:12px; border:none; }
.alert-success { background:rgba(105,156,123,.25); color:#b8f5d0; }
.alert-danger  { background:rgba(220,80,80,.22);   color:#ffc9c9; }
.alert-warning { background:rgba(194,147,50,.22);  color:#ffe9a0; }
.alert-info    { background:rgba(100,160,220,.22); color:#c2e0ff; }

/* RANGE */
input[type=range] { accent-color: var(--dorado); }
input[type=color] { cursor:pointer; }

/* ═══════════════════════════════════════ */
/* MODO CLARO */
/* ═══════════════════════════════════════ */
body.light-mode {
    --negro:   #f4f4f9;
    --gris:    #ffffff;
    --dorado:  #ff8c00;
    --dorado2: #ffcc00;
    --naranja: #e67e22;
    --ink:     #2d3436;
    --muted:   rgba(45,52,54,.7);
    --card:    rgba(255,255,255,.85);
    --glass:   rgba(255,255,255,.75);
    --stroke:  rgba(255,140,0,.35);
    --shadow:  0 14px 40px rgba(0,0,0,.15);
}

body.light-mode .app-body {
    background: radial-gradient(1000px 600px at 10% -5%, rgba(255,140,0,.08), transparent 60%),
                radial-gradient(800px 600px at 90% 0%, rgba(255,204,0,.06), transparent 55%),
                radial-gradient(800px 600px at 50% 100%, rgba(255,140,0,.04), transparent 55%),
                var(--negro);
}

body.light-mode .navbar-lumina {
    background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(248,249,250,.95));
    border-bottom: 1px solid rgba(255,140,0,.3);
}

body.light-mode .brand-text { color: var(--dorado) !important; }
body.light-mode .nav-underline { color: rgba(45,52,54,.85) !important; }
body.light-mode .nav-underline:hover { color: var(--dorado) !important; }

body.light-mode .footer {
    background: rgba(255,255,255,.9);
    border-top: 1px solid rgba(255,140,0,.25);
}

/* ═══════════════════════════════════════ */
/* VIDEO DE FONDO */
/* ═══════════════════════════════════════ */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background: #000;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(35%);
    transition: filter .5s ease;
}

body.light-mode #bg-video {
    filter: brightness(90%) grayscale(30%) opacity(0.5);
}

/* ═══════════════════════════════════════ */
/* SPLASH SCREEN */
/* ═══════════════════════════════════════ */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--negro);
    z-index: 9999;
}

#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* ═══════════════════════════════════════ */
/* CARDS ESTILO*/
/* ═══════════════════════════════════════ */
.sensor-card {
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--dorado);
    color: var(--ink);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(194,147,50,.2);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sensor-card:hover {
    transform: translateY(-5px);
    border-color: var(--dorado2);
    box-shadow: 0 8px 30px rgba(194,147,50,.35);
}

.sensor-icon {
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(194,147,50,.1);
    border-radius: 50%;
    border: 2px solid var(--dorado);
}
/* ─── VIDEO: ocultar en modo claro ─── */
body.light-mode .video-background {
    display: none;
}

body.light-mode .app-body {
    background: #f4f4f9;
}

body.light-mode .bg-blob {
    opacity: 0.15;
}

/* ─── Navbar toggler en modo claro ─── */
body.light-mode .navbar-toggler {
    border-color: rgba(0,0,0,.3);
}

body.light-mode .navbar-toggler-icon {
    filter: invert(1);
}

/* ─── Tabla historial responsive al tema ─── */
.historial-table {
    color: var(--ink) !important;
}

.historial-table th {
    color: var(--dorado) !important;
    border-color: var(--stroke) !important;
}

.historial-table td {
    border-color: var(--stroke) !important;
    color: var(--ink) !important;
}

.historial-table tbody tr:hover {
    background: rgba(194,147,50,.06);
}