/* ==========================================================================
   AQUAMON - Hoja de estilos
   Pensada para que se lea bien: letra grande, botones grandes, y el estado
   nunca se indica solo con color (siempre lleva tambien texto).
   ========================================================================== */

:root{
  --agua:#0b6fa4;
  --agua-suave:#e3f0f8;
  --marcha:#12805c;
  --paro:#b23b2e;
  --aviso:#a8680a;
  --fondo:#eef2f6;
  --panel:#ffffff;
  --panel-2:#f5f8fa;
  --borde:#ccd8e1;
  --tinta:#132433;
  --tinta-suave:#566f82;
  --sombra:0 1px 2px rgba(19,36,51,.06), 0 4px 14px rgba(19,36,51,.05);
  --radio:12px;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --agua:#4fb0e0; --agua-suave:#16303f;
    --marcha:#3cc48d; --paro:#f0705f; --aviso:#e0a33a;
    --fondo:#0d1720; --panel:#16242f; --panel-2:#1b2b37;
    --borde:#2b414f; --tinta:#e8f0f6; --tinta-suave:#93a8b8;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
}
:root[data-tema="oscuro"]{
  --agua:#4fb0e0; --agua-suave:#16303f;
  --marcha:#3cc48d; --paro:#f0705f; --aviso:#e0a33a;
  --fondo:#0d1720; --panel:#16242f; --panel-2:#1b2b37;
  --borde:#2b414f; --tinta:#e8f0f6; --tinta-suave:#93a8b8;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.5;
}
button{font:inherit}
a{color:var(--agua)}

.contenedor{max-width:1150px; margin:0 auto; padding:0 16px 90px}

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:20; background:var(--panel);
  border-bottom:1px solid var(--borde);
}
.barra-int{
  max-width:1150px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.marca{font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--agua)}
.crece{flex:1}
select, input[type=text], input[type=email], input[type=password], input[type=date], input[type=time]{
  font:inherit; padding:9px 11px; border-radius:9px;
  border:1px solid var(--borde); background:var(--panel); color:var(--tinta);
  max-width:100%;
}
.boton{
  border:1px solid var(--borde); background:var(--panel); color:var(--tinta);
  padding:9px 14px; border-radius:9px; cursor:pointer;
}
.boton:hover{background:var(--panel-2)}
.boton.principal{background:var(--agua); border-color:var(--agua); color:#fff; font-weight:600}
.boton:focus-visible, select:focus-visible, input:focus-visible{
  outline:3px solid var(--agua); outline-offset:2px;
}

/* ---------- Pestanas ---------- */
.pestanas{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:var(--panel); border-top:1px solid var(--borde);
}
.pestana{
  flex:1; border:0; background:none; color:var(--tinta-suave);
  padding:10px 4px 12px; cursor:pointer; font-size:13px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.pestana .icono{font-size:20px; line-height:1}
.pestana[aria-current="page"]{color:var(--agua)}
.pestana .chincheta{
  background:var(--paro); color:#fff; border-radius:99px;
  font-size:11px; padding:1px 6px; margin-left:4px;
}

/* ---------- Titulos ---------- */
h1{font-size:25px; margin:20px 0 4px; letter-spacing:-.02em; text-wrap:balance}
h2{font-size:20px; margin:26px 0 10px}
.sub{color:var(--tinta-suave); font-size:15px; margin:0 0 16px}

/* ---------- Resumen del dia ---------- */
.resumen{
  display:grid; gap:1px; background:var(--borde);
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra); margin-bottom:20px;
}
.celda{background:var(--panel); padding:14px 16px}
.celda .rotulo{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:700;
}
.celda .cifra{
  font-size:27px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.celda .cifra .unidad{font-size:15px; font-weight:600; color:var(--tinta-suave); margin-left:3px}
.celda .pie{font-size:13px; color:var(--tinta-suave); margin-top:2px}

/* ---------- Tarjetas de aparato ---------- */
.rejilla{display:grid; gap:15px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.aparato{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); overflow:hidden; display:flex; flex-direction:column;
}
.franja{height:4px; background:var(--borde)}
.aparato.marcha .franja{background:var(--marcha)}
.aparato.caido .franja{background:var(--paro)}
.tapa{display:flex; justify-content:space-between; gap:10px; padding:14px 16px 0}
.nombre{font-size:18px; font-weight:700; line-height:1.25; cursor:pointer;
        background:none; border:0; color:inherit; text-align:left; padding:0}
.nombre:hover{color:var(--agua)}
.lugar{font-size:12.5px; color:var(--tinta-suave); margin-top:2px}
.chapa{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; white-space:nowrap; height:fit-content;
}
.chapa.on{background:color-mix(in srgb,var(--marcha) 16%,transparent); color:var(--marcha)}
.chapa.off{background:var(--panel-2); color:var(--tinta-suave); border:1px solid var(--borde)}
.chapa.mal{background:color-mix(in srgb,var(--paro) 16%,transparent); color:var(--paro)}

.lecturas{display:grid; grid-template-columns:1fr 1fr; gap:11px 14px; padding:14px 16px 0}
.lectura .v{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}
.lectura .v.gris{color:var(--tinta-suave)}
.lectura .e{font-size:12.5px; color:var(--tinta-suave)}

.mando{
  margin:15px 16px 16px; padding:13px; border:0; border-radius:10px;
  font-size:16px; font-weight:700; letter-spacing:.03em; color:#fff; cursor:pointer;
}
.mando.encender{background:var(--marcha)}
.mando.apagar{background:var(--paro)}
.mando:disabled{background:var(--panel-2); color:var(--tinta-suave);
                border:1px solid var(--borde); cursor:not-allowed}

/* ---------- Graficas ---------- */
.grafica-caja{padding:12px 16px 0}
svg.grafica{width:100%; height:70px; display:block}
svg.grande{height:220px}
.pieg{display:flex; justify-content:space-between; font-size:12px;
      color:var(--tinta-suave); margin-top:3px; font-variant-numeric:tabular-nums}

/* ---------- Avisos ---------- */
.aviso-fila{
  display:flex; gap:12px; align-items:flex-start; background:var(--panel);
  border:1px solid var(--borde); border-left:5px solid var(--aviso);
  border-radius:10px; padding:13px 15px; margin-bottom:10px; box-shadow:var(--sombra);
}
.aviso-fila.critico{border-left-color:var(--paro)}
.aviso-fila .icono{font-size:19px; line-height:1.3}
.aviso-fila .cuerpo{flex:1}
.aviso-fila .titulo{font-weight:700}
.aviso-fila .detalle{font-size:14.5px; color:var(--tinta-suave); margin-top:2px}
.aviso-fila .cuando{font-size:12.5px; color:var(--tinta-suave); white-space:nowrap}

/* ---------- Flota ---------- */
.tabla-caja{overflow-x:auto; border:1px solid var(--borde);
            border-radius:var(--radio); background:var(--panel); box-shadow:var(--sombra)}
table{border-collapse:collapse; width:100%; min-width:620px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--borde)}
th{font-size:12px; text-transform:uppercase; letter-spacing:.07em;
   color:var(--tinta-suave); background:var(--panel-2)}
tr:last-child td{border-bottom:0}
td.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Varios ---------- */
.vacio{
  background:var(--panel); border:1px dashed var(--borde); border-radius:var(--radio);
  padding:30px 22px; text-align:center; color:var(--tinta-suave);
}
.ficha{background:var(--panel); border:1px solid var(--borde);
       border-radius:var(--radio); padding:18px; box-shadow:var(--sombra); margin-bottom:16px}
.aclaracion{
  background:var(--agua-suave); border-radius:10px; padding:14px 16px;
  font-size:14.5px; margin-top:18px;
}
.error{background:color-mix(in srgb,var(--paro) 14%,transparent); color:var(--paro);
       border-radius:9px; padding:11px 14px; margin:12px 0; font-weight:600}
.oculto{display:none !important}

/* ---------- Entrada ---------- */
.entrada{min-height:80vh; display:flex; align-items:center; justify-content:center; padding:20px}
.entrada .caja{background:var(--panel); border:1px solid var(--borde);
  border-radius:16px; padding:28px 26px; width:100%; max-width:380px; box-shadow:var(--sombra)}
.entrada h1{margin-top:0}
.campo{display:block; margin-bottom:14px}
.campo span{display:block; font-size:14px; font-weight:600; margin-bottom:5px}
.campo input{width:100%}

@media (prefers-reduced-motion: no-preference){
  .aparato{transition:border-color .15s ease}
}

/* === DISENO AQUAMON 2026-09 === */
:root{
  --aq-agua:#0E9AA7; --aq-agua-hondo:#087684; --aq-agua-claro:#E6F6F7;
  --aq-tinta:#0C2C33; --aq-tinta-media:#4A6B73; --aq-tinta-suave:#7C989E;
  --aq-fondo:#F2F6F7; --aq-blanco:#FFFFFF; --aq-borde:#DDE9EB;
  --aq-verde-1:#12A06B; --aq-verde-2:#068055;
  --aq-gris-1:#A2AFB3; --aq-gris-2:#8A999E;
  --aq-rojo:#C0392F;
  --aq-sombra:0 1px 2px rgba(12,44,51,.05), 0 8px 24px -14px rgba(12,44,51,.22);
}
@media (prefers-color-scheme: dark){
  :root{
    --aq-agua:#3FC3CE; --aq-agua-hondo:#7FE0E8; --aq-agua-claro:#0E3339;
    --aq-tinta:#EAF6F7; --aq-tinta-media:#A9C6CB; --aq-tinta-suave:#7B9AA0;
    --aq-fondo:#061A1E; --aq-blanco:#0E2A30; --aq-borde:#1B424A;
    --aq-verde-1:#159A6B; --aq-verde-2:#0A7454;
    --aq-gris-1:#4E656B; --aq-gris-2:#3C5258;
    --aq-rojo:#CE5147;
    --aq-sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
  }
}
#resumen{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px}
#resumen .celda{background:var(--aq-blanco);border:1px solid var(--aq-borde);
  border-radius:18px;padding:13px 14px;box-shadow:var(--aq-sombra)}
#resumen .rotulo{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aq-tinta-suave);font-weight:700}
#resumen .cifra{font-size:25px;font-weight:800;letter-spacing:-.03em;margin-top:5px;
  font-variant-numeric:tabular-nums;color:var(--aq-tinta)}
#resumen .cifra .unidad{font-size:13px;font-weight:600;color:var(--aq-tinta-media);margin-left:2px}
#resumen .celda.viva .cifra{color:var(--aq-agua-hondo)}
#resumen .pie{font-size:11px;color:var(--aq-tinta-suave);margin-top:1px}

#rejillaAparatos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pieza{position:relative;border-radius:18px;padding:15px 15px 12px;color:#fff;
  overflow:hidden;min-height:152px;box-shadow:var(--aq-sombra);
  background:linear-gradient(145deg,var(--aq-gris-1),var(--aq-gris-2));
  transition:background .25s ease;display:flex;flex-direction:column}
.pieza.on{background:linear-gradient(145deg,var(--aq-verde-1),var(--aq-verde-2))}
.pieza.caido{background:linear-gradient(145deg,#B9878A,#9C6467)}
.pieza .marca{position:absolute;right:-18px;bottom:-22px;width:118px;height:118px;
  opacity:.13;pointer-events:none}
.pieza .marca svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.1}
.pieza .titulo{position:relative;z-index:1;background:none;border:0;padding:0;
  color:#fff;font:inherit;font-weight:700;font-size:15px;letter-spacing:-.01em;
  line-height:1.2;text-align:left;cursor:pointer;min-height:36px}
.pieza .cifra-g{display:flex;align-items:baseline;gap:2px;margin-top:6px;
  position:relative;z-index:1;font-variant-numeric:tabular-nums}
.pieza .cifra-g .n{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pieza .cifra-g .dec{font-size:23px}
.pieza .cifra-g .u{font-size:15px;font-weight:700;opacity:.85;align-self:flex-start;margin-top:4px}
.pieza .pie-pieza{display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:auto;padding-top:12px;position:relative;z-index:1}
.pieza .est{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.pieza .extra{font-size:11.5px;opacity:.78;margin-top:2px}
.pieza .historial{background:none;border:0;color:#fff;opacity:.72;font:inherit;
  font-size:11px;text-decoration:underline;cursor:pointer;padding:0;margin-top:4px}
.power{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.power:hover{background:rgba(255,255,255,.18)}
.power:disabled{opacity:.45;cursor:not-allowed}
.power svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.clima-caja{background:var(--aq-blanco);border:1px solid var(--aq-borde);border-radius:24px;
  padding:22px 18px;box-shadow:var(--aq-sombra);text-align:center;margin-bottom:16px}
.aro{position:relative;width:206px;height:206px;margin:4px auto 2px}
.aro svg{width:100%;height:100%;transform:rotate(-90deg)}
.aro .centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.aro .grados{display:flex;align-items:flex-start;gap:2px;font-variant-numeric:tabular-nums;
  color:var(--aq-tinta)}
.aro .grados .n{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1}
.aro .grados .d{font-size:24px;font-weight:800;margin-top:4px}
.aro .grados .g{font-size:18px;font-weight:700;color:var(--aq-tinta-media);margin-top:3px}
.aro .et{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--aq-tinta-suave);font-weight:700;margin-top:7px}
.aro .meta{color:var(--aq-verde-2);font-weight:700;font-size:13.5px;margin-top:2px}
.estado-clima{display:inline-flex;align-items:center;gap:8px;margin:14px 0 16px;
  background:var(--aq-agua-claro);color:var(--aq-agua-hondo);padding:8px 14px;
  border-radius:999px;font-weight:700;font-size:13px}
.estado-clima .punto{width:8px;height:8px;border-radius:50%;background:currentColor}
.estado-clima .punto.late{animation:aqlatido 1.8s ease-in-out infinite}
@keyframes aqlatido{0%,100%{opacity:1}50%{opacity:.35}}
.regulador{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:16px}
.paso{width:48px;height:48px;border-radius:15px;border:1.5px solid var(--aq-borde);
  background:var(--aq-blanco);color:var(--aq-tinta);font-size:23px;font-weight:700;cursor:pointer}
.paso:hover{border-color:var(--aq-agua)}
.consigna-g{font-size:33px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;min-width:120px;color:var(--aq-tinta)}
.consigna-g small{font-size:16px;color:var(--aq-tinta-media);font-weight:700}
.boton-clima{display:block;width:100%;border:0;border-radius:13px;padding:14px;font:inherit;
  font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;
  color:#fff;background:linear-gradient(145deg,var(--aq-verde-1),var(--aq-verde-2))}
.boton-clima.parar{background:var(--aq-rojo)}
.cadena{display:flex;gap:10px;margin-top:16px;text-align:left}
.eslabon{flex:1;background:var(--aq-fondo);border:1px solid var(--aq-borde);
  border-radius:14px;padding:11px 12px}
.eslabon .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--aq-tinta-suave);font-weight:700}
.eslabon .v{font-weight:700;font-size:14px;margin-top:4px;color:var(--aq-tinta-media)}
.eslabon.on .v{color:var(--aq-verde-2)}
.nota-clima{margin-top:16px;font-size:12.5px;color:var(--aq-tinta-media);text-align:left;
  background:var(--aq-agua-claro);border-radius:14px;padding:13px 15px;line-height:1.55}
.nota-clima b{color:var(--aq-agua-hondo)}