/* DomoCamper · Estilos del panel domótico (panel_domotico.php) */

/* Modo día (por defecto) */
:root{
 --azul:#0284a8;--azul-claro:#e3f3f8;--texto:#16213a;--gris:#7a8494;--borde:#e2e6ec;--fondo:#f3f5f8;
 --tarjeta:#fff;--boton:#fff;--apagado:#cfd5dd;--barra-gris:#8a8f98;
 --on:#0284a8;--calor:#e0662a;--ok:#1f9d55;--aviso:#d98a00;--error:#c0392b
}

/* Modo noche */
:root[data-tema="noche"]{
 --azul:#22a6cc;--azul-claro:#123544;--texto:#e6ebf2;--gris:#8d97a8;--borde:#283243;--fondo:#0f141c;
 --tarjeta:#171e29;--boton:#1e2734;--apagado:#3a4556;--barra-gris:#6b7486;
 --on:#22a6cc;--calor:#f07a3e;--ok:#3cc47a;--aviso:#f0a92a;--error:#ff6b5b;
 color-scheme:dark
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--fondo);-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s}
main{max-width:1100px;margin:0 auto;padding:20px 16px 40px}

/* Cabecera */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
header h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
header h1 img{display:block;height:84px;width:auto;mix-blend-mode:multiply}
/* En noche el logo se invierte (fondo blanco → negro, texto negro → blanco) y se recupera el azul */
:root[data-tema="noche"] header h1 img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
.cabecera-der{display:flex;align-items:center;gap:14px}
#reloj{font-size:14px;color:var(--gris);text-align:right}
#estado-con{display:block;font-size:12px}
#estado-con.mal{color:var(--error)}
#tema{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:var(--boton);font-size:20px;cursor:pointer;flex-shrink:0}

/* Escenas */
.escenas{display:flex;gap:10px;margin-bottom:18px;overflow-x:auto}
.escenas button{flex:1;min-width:110px;padding:14px 10px;border:1px solid var(--borde);border-radius:14px;background:var(--boton);font:600 15px system-ui,sans-serif;color:var(--texto);cursor:pointer}
.escenas button:active{background:var(--azul-claro)}

/* Tarjetas */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
section{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;padding:18px;transition:background .3s,border-color .3s}
section h2{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

/* Medidas y barras */
.medidas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medida small{display:block;font-size:12.5px;color:var(--gris)}
.medida b{font-size:28px;font-weight:700}
.medida i{font-style:normal;font-size:15px;color:var(--gris);margin-left:2px}
.barra{height:8px;border-radius:4px;background:var(--fondo);overflow:hidden;margin-top:6px}
.barra div{height:100%;background:var(--azul);border-radius:4px;transition:width .4s}
.barra.gris div{background:var(--barra-gris)}
.barra.bajo div{background:var(--aviso)}

/* Filas de control */
.fila{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--borde)}
.fila:first-of-type{border-top:0}
.fila.separada{margin-top:10px}
.fila .nombre{flex:1;font-size:15px;font-weight:500}
.fila .nombre small{display:block;font-size:12px;color:var(--gris);font-weight:400}
.fila input[type=range]{width:110px;accent-color:var(--azul)}

/* Interruptores */
.interruptor{position:relative;width:52px;height:30px;border-radius:15px;border:0;background:var(--apagado);cursor:pointer;flex-shrink:0;transition:background .2s}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.interruptor.on{background:var(--on)}
.interruptor.on::after{transform:translateX(22px)}
.interruptor.calor.on{background:var(--calor)}

/* Botones − / + y selectores */
.pasos{display:flex;align-items:center;gap:8px}
.pasos button{width:38px;height:38px;border-radius:50%;border:1px solid var(--borde);background:var(--boton);font-size:20px;cursor:pointer;color:var(--texto)}
.pasos b{min-width:52px;text-align:center;font-size:17px}
.velocidades{display:flex;gap:6px}
.velocidades button{min-width:40px;height:34px;padding:0 9px;border-radius:9px;border:1px solid var(--borde);background:var(--boton);font:600 14px system-ui,sans-serif;cursor:pointer;color:var(--texto)}
.velocidades button.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* Tarjetas de aire acondicionado y agua caliente */
.aire-cabecera{display:flex;align-items:center;gap:14px;padding-bottom:12px}
.aire-temp b{font-size:40px;font-weight:700}
.aire-temp small{display:block;font-size:12.5px;color:var(--gris)}
.aire-temp i{font-style:normal;font-size:16px;color:var(--gris);margin-left:2px}
.aire-estado{flex:1;text-align:right;font-size:14px;font-weight:600}
.aire-estado small{display:block;font-size:12px;color:var(--gris);font-weight:400}
.barra.calor div{width:0;background:var(--calor);transition:width .6s}
section.aire.encendido{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul) inset}
section.termo.encendido{border-color:var(--calor);box-shadow:0 0 0 1px var(--calor) inset}

/* Balance de energía */
.balance{display:flex;justify-content:space-between;font-size:13px;color:var(--gris);margin-top:12px;padding-top:12px;border-top:1px solid var(--borde)}
.balance b{color:var(--texto)}
.balance .pos{color:var(--ok)} .balance .neg{color:var(--calor)}

p.nota{font-size:12px;color:var(--gris);text-align:center;margin-top:22px}

@media (max-width:420px){
 header h1 img{height:64px}
 .rejilla{grid-template-columns:1fr}
 .medida b{font-size:24px}
 .fila input[type=range]{width:90px}
}