:root {
  --fondo: #f5f6f8; --superficie: #ffffff; --borde: #e3e6ea; --texto: #1c2430; --suave: #5f6b7a;
  --acento: #2f6fed; --acento-texto: #ffffff; --ok: #1f9d55; --mal: #d64545; --aviso: #c98a00; --compra: #7a4fd6;
  --personal: #f08c00; --cliente: #1f9d55; --espera: #e0b000; --puerta: #8a94a3; --sombra: 0 1px 2px rgba(0,0,0,.06);
  --radio: 10px; --borde-cifra: var(--borde); color-scheme: light;
}
/* Oscuro: sigue al sistema hasta que se elige con el interruptor de la barra (data-theme en <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0f1318; --superficie: #171c23; --borde: #262d36; --texto: #e6eaf0; --suave: #93a0b0;
    --acento: #5b8cff; --ok: #3cc47c; --mal: #ff6b6b; --aviso: #f0b429; --compra: #a685ff; --sombra: none; color-scheme: dark;
    --borde-cifra: rgba(255, 255, 255, .4);
  }
}
:root[data-theme="dark"] {
  --fondo: #0f1318; --superficie: #171c23; --borde: #262d36; --texto: #e6eaf0; --suave: #93a0b0;
  --acento: #5b8cff; --ok: #3cc47c; --mal: #ff6b6b; --aviso: #f0b429; --compra: #a685ff; --sombra: none; color-scheme: dark;
  --borde-cifra: rgba(255, 255, 255, .4);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
.barra { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--superficie);
  border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca { font-weight: 700; letter-spacing: .04em; }
.marca span { color: var(--acento); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { padding: 6px 12px; border-radius: 8px; color: var(--suave); }
.nav a.activo, .nav a:hover { background: var(--fondo); color: var(--texto); }
.derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.contenido { max-width: 1280px; margin: 0 auto; padding: 20px 16px 60px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.titulo h1 { font-size: 22px; margin: 0; }
.suave { color: var(--suave); }
.chico { font-size: 13px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px;
  box-shadow: var(--sombra); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.cifras .cifra { border-color: var(--borde-cifra); text-align: center; }
.cifras.principales { gap: 14px; }
.cifras.principales .cifra { border-width: 3px; padding: 20px 22px; }
.cifras.principales .cifra .rotulo { font-size: 15px; font-weight: 600; color: var(--texto); }
.cifras.principales .cifra .valor { font-size: 44px; }
.cifras.principales .cifra .extra { font-size: 13px; }
.cifra.clientes { border-color: var(--acento); }
.cifras.principales .cifra.ok { border-color: var(--ok); }
.cifras.principales .cifra.mal { border-color: var(--mal); }
.cifra .rotulo { color: var(--suave); font-size: 13px; }
.cifra .valor { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cifra .extra { color: var(--suave); font-size: 12px; }
.cifra.ok .valor { color: var(--ok); } .cifra.mal .valor { color: var(--mal); } .cifra.compra .valor { color: var(--compra); }
.boton { border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.boton:hover { border-color: var(--acento); }
.boton.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.boton:disabled { opacity: .5; cursor: default; }
select, input[type=date], input[type=time], input[type=text], input[type=password] {
  border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px; padding: 7px 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.chip { border: 1px solid var(--borde); background: var(--superficie); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 14px; }
.chip.activo { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.chip .n { opacity: .65; margin-left: 4px; }
.grafico { height: 280px; position: relative; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.visita { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; cursor: pointer;
  box-shadow: var(--sombra); transition: transform .08s; }
.visita:hover { transform: translateY(-1px); border-color: var(--acento); }
.visita .poster { aspect-ratio: 16/9; background: #000 center/cover no-repeat; position: relative; }
.visita .poster .sin { position: absolute; inset: 0; display: grid; place-items: center; color: #aab; font-size: 13px; }
.visita .datos { padding: 10px 12px; }
.visita .hora { font-weight: 650; font-variant-numeric: tabular-nums; }
.etiquetas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.etq { font-size: 12px; border-radius: 6px; padding: 2px 7px; background: var(--fondo); color: var(--suave); }
.etq.ok { color: var(--ok); } .etq.mal { color: var(--mal); background: color-mix(in srgb, var(--mal) 12%, transparent); }
.etq.compra { color: var(--compra); } .etq.aviso { color: var(--aviso); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center;
  z-index: 20; padding: 16px; }
.modal.abierto { display: flex; }
.modal .caja { background: var(--superficie); border-radius: 12px; width: min(1100px, 100%); max-height: 100%; overflow: auto; }
.modal .cabeza { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.reproductor { position: relative; background: #000; }
.reproductor video { width: 100%; display: block; }
.reproductor canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camaras { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.camara .reproductor { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; }
.camara .reproductor video { height: 100%; object-fit: fill; }
.camara .pie { display: flex; justify-content: space-between; padding: 8px 2px 0; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--suave); font-weight: 550; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--suave); }
.punto.ok { background: var(--ok); } .punto.mal { background: var(--mal); } .punto.aviso { background: var(--aviso); }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.interruptor input { display: none; }
.interruptor .pista { width: 46px; height: 26px; border-radius: 999px; background: var(--borde); position: relative; transition: .15s; }
.interruptor .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.interruptor input:checked + .pista { background: var(--ok); }
.interruptor input:checked + .pista::after { left: 23px; }
.interruptor.tema { gap: 8px; }
.interruptor.tema .pista { width: 38px; height: 22px; }
.interruptor.tema .pista::after { width: 16px; height: 16px; }
.interruptor.tema input:checked + .pista { background: var(--acento); }
.interruptor.tema input:checked + .pista::after { left: 19px; }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dias label { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.dias input { margin-right: 5px; }
.aviso { padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--aviso) 14%, transparent); }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(360px, 100%); display: grid; gap: 12px; }
.login .error { color: var(--mal); font-size: 14px; }
.vacio { padding: 40px; text-align: center; color: var(--suave); }
@media (max-width: 640px) {
  .camaras { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr; }
  .cifra .valor { font-size: 24px; }
  .cifras.principales .cifra .valor { font-size: 34px; }
  .barra { gap: 10px; }
}

/* Admin: barras de progreso (proceso de un día, porcentaje grabado) */
.barra-progreso { display: inline-block; vertical-align: middle; width: 220px; max-width: 60vw; height: 10px; border-radius: 5px;
  background: var(--borde); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: var(--acento); transition: width .4s; }
.barra-progreso.chica { width: 70px; height: 7px; }