/* Estilos compartidos por /ceo, /admin y /bot.
   Cada página define --tema y todo lo demás se deriva de ahí. */
:root{
  --tema:#00FF88;
  --bg:#0A0A0A; --card:#0F1512; --white:#F4F7F4;
  --metal:#9AA79E; --metal-dim:#5C665F;
  --line:color-mix(in srgb, var(--tema) 20%, transparent);
  --line-strong:color-mix(in srgb, var(--tema) 40%, transparent);
  --glow:color-mix(in srgb, var(--tema) 45%, transparent);
  --font-display:'Orbitron',sans-serif; --font-head:'Rajdhani',sans-serif;
  --font-body:'Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--tema) 9%, transparent), transparent 60%), var(--bg);
  color:var(--white);font-family:var(--font-body);min-height:100dvh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--tema);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

header{border-bottom:1px solid var(--line);background:rgba(10,10,10,.75);backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:10;}
.head-in{max-width:1000px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:12px;}
.head-in > img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 16px var(--glow);flex:none;}
.head-t{flex:1;min-width:0;}
.head-t b{font-family:var(--font-display);font-weight:800;font-size:14.5px;display:block;letter-spacing:.03em;}
/* Insignia del rol: fondo del color del panel y letras negras.
   El negro fijo es a propósito — los tres colores de panel son claros y
   saturados, y sobre ellos el texto blanco se lee lavado. */
.head-t span{
  display:inline-block;margin-top:3px;padding:3px 10px;border-radius:6px;
  background:var(--tema);
  /* !important y -webkit-text-fill-color: en algunos navegadores el color
     heredado del body o el relleno de texto ganan sobre `color` a secas y
     la insignia queda ilegible, blanco sobre dorado. */
  color:#000000 !important;
  -webkit-text-fill-color:#000000;
  font-family:var(--font-head);font-weight:900;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
}

.wrap{max-width:1000px;margin:0 auto;padding:36px 20px 60px;}
h1{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,3vw,30px);margin-bottom:6px;}
.muted{color:var(--metal);font-size:14.5px;line-height:1.7;}

.card{background:rgba(16,22,18,.55);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:16px;padding:24px 22px;margin-top:18px;}
.card h2{font-family:var(--font-head);font-size:16.5px;margin-bottom:4px;}

.btn{font-family:var(--font-head);font-weight:700;font-size:14.5px;padding:11px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;
  transition:box-shadow .25s ease, transform .25s ease;}
/* Mismo caso que la insignia: sobre los tres colores de panel, que son
   claros y saturados, el texto tiene que ir negro sí o sí. */
.btn-primary{
  background:var(--tema) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  font-weight:800 !important;
}
.btn-primary:hover{box-shadow:0 0 26px var(--glow);transform:translateY(-2px);}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--white);}
.btn-ghost:hover{border-color:var(--tema);}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
/* Rojo fijo, no derivado del color del panel: la baja es irreversible y
   tiene que verse igual de peligrosa en los tres paneles. */
.btn-borrar{
  background:#EF4444 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  font-weight:800 !important;
}
.btn-borrar:hover{box-shadow:0 0 22px rgba(239,68,68,.5);transform:translateY(-2px);}

label{font-family:var(--font-head);font-size:12.5px;letter-spacing:.05em;color:var(--metal);
  text-transform:uppercase;display:block;margin-bottom:7px;}
input[type=text],input[type=number]{width:100%;padding:12px 15px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong);color:var(--white);
  font-family:var(--font-body);font-size:14.5px;}
input:focus{outline:none;border-color:var(--tema);}
input[type=search]{width:100%;padding:11px 15px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong);
  color:var(--white);font-family:var(--font-body);font-size:14px;}
input[type=range]{width:100%;accent-color:var(--tema);}
input[type=checkbox]{accent-color:var(--tema);width:18px;height:18px;cursor:pointer;}
/* Los campos dentro de la tabla van más compactos que los de un formulario. */
select{
  padding:9px 11px;border-radius:9px;background:var(--card);
  border:1px solid var(--line-strong);color:var(--white);
  font-family:var(--font-body);font-size:13.5px;cursor:pointer;
}
select:focus{outline:none;border-color:var(--tema);}
td input[type=number]{padding:9px 11px;font-size:13.5px;}

table{width:100%;border-collapse:collapse;margin-top:14px;}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px;}
th{font-family:var(--font-head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--metal);}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
.destacado{color:var(--tema);font-weight:700;}
.tabla-scroll{overflow-x:auto;}

/* ---------- SENSORES DE ACTIVIDAD ----------
   Los cinco colores son FIJOS, no derivados de --tema. Es a propósito:
   "dormido" tiene que verse igual de rojo en /ceo, en /admin y en /bot.
   Si el color saliera del tema, en el panel verde un cliente dormido se
   vería verde y el indicador diría lo contrario de lo que pasa.

   Cada nivel se distingue además por su TEXTO, no solo por el color.
   Quien no distingue rojo de verde igual lee "Dormido". */
.sensor{display:flex;align-items:center;gap:9px;white-space:nowrap;}
.sensor-luz{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--luz);box-shadow:0 0 9px var(--luz);
}
.sensor-alto    .sensor-luz{animation:latido 1.9s ease-in-out infinite;}
.sensor-texto{font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--luz);}
.sensor-alto   {--luz:#2BE86F;}
.sensor-medio  {--luz:#F5C542;}
.sensor-bajo   {--luz:#F5843C;}
.sensor-dormido{--luz:#FF5C5C;}
.sensor-nuevo  {--luz:#8A94A0;}
@keyframes latido{0%,100%{opacity:1;}50%{opacity:.35;}}

/* La barrita de 7 días. Cada barra es un día; la última es hoy. */
.barritas{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:5px;}
.barritas i{
  width:5px;border-radius:1.5px;background:var(--luz,#8A94A0);
  min-height:2px;opacity:.85;display:block;
}
.barritas i.hoy{opacity:1;box-shadow:0 0 7px var(--luz,#8A94A0);}
.sensor-detalle{font-size:11.5px;color:var(--metal-dim);margin-top:4px;}
.sensor-pend{
  display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;
  background:#FF5C5C;color:#000;font-size:11px;font-weight:800;
}

/* La tira de resumen arriba de la tabla. */
.tira{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.tira button{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  color:var(--white);font-family:var(--font-body);font-size:13px;
  transition:border-color .2s ease, background .2s ease;
}
.tira button:hover{border-color:var(--luz);background:rgba(255,255,255,.06);}
.tira button[aria-pressed="true"]{border-color:var(--luz);background:color-mix(in srgb, var(--luz) 14%, transparent);}
.tira b{font-family:var(--font-head);font-size:17px;color:var(--luz);}

.msg{display:none;margin-top:16px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;}
.msg.show{display:block;}
.msg.error{background:rgba(255,69,69,.10);border:1px solid rgba(255,69,69,.45);color:#FF8A8A;}
.msg.success{background:color-mix(in srgb, var(--tema) 14%, transparent);
  border:1px solid var(--line-strong);color:var(--tema);}

.centro{max-width:430px;margin:13vh auto;text-align:center;}
footer{border-top:1px solid var(--line);padding:22px;text-align:center;color:var(--metal-dim);font-size:12.5px;}