:root{
  --arena:#f7fcf8; --papeleria:#fffdf8; --tinta:#33281b; --tinta-suave:#7a6a52;
  --verde:#22c55e; --verde-claro:#d3f5df; --ambar:#e8a13c; --ambar-claro:#fbeed6;
  --rojo:#c75b5b; --linea:#e5dccb; --sombra:0 10px 30px rgba(70,50,20,.10);
  --radio:16px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--arena);color:var(--tinta)}
.hero{background:#7d8b7f;color:#fff;padding:34px 20px}
.hero-inner{max-width:90%;margin:0 auto;display:flex;gap:18px;align-items:center}
/* ---- objetivo de cámara: imagen lente.png ---- */
.logo-lente{padding:4px;background:transparent !important}
.lente-img{width:110px;height:110px;object-fit:contain;display:block;filter:drop-shadow(0 0 18px rgba(140,185,255,.55)) drop-shadow(0 0 36px rgba(90,140,255,.3))}
.lente-img::selection{background:transparent}
.logo-lente.mini .lente-img{width:56px;height:56px}

.lens{display:inline-block;width:74px;height:74px;border-radius:50%;background:conic-gradient(from 200deg,#5b6572,#2b2f36 25%,#41474f 50%,#23262b 75%,#5b6572);box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 6px rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center}
.lens-in{position:relative;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 36% 32%, #6ea8ff 0%, #23409a 35%, #10143f 70%, #05060f 100%);box-shadow:inset 0 0 0 4px rgba(255,255,255,.15), inset 0 0 12px rgba(0,0,0,.8)}
.brillo{position:absolute;left:9px;top:7px;width:14px;height:10px;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(1.5px);transform:rotate(-24deg);animation:destello 4.5s ease-in-out infinite}
@keyframes destello{
  0%,58%{opacity:0;transform:rotate(-24deg) translate(-8px,-6px) scale(.4)}
  66%{opacity:1;transform:rotate(-24deg) translate(0,0) scale(1)}
  74%{opacity:.9;transform:rotate(-24deg) translate(6px,4px) scale(.9)}
  82%,100%{opacity:0;transform:rotate(-24deg) translate(12px,9px) scale(.3)}
}
.logo{padding:6px}
.logo .lens{animation:gira 24s linear infinite}
@keyframes gira{to{filter:hue-rotate(8deg)}}
.hero h1{margin:0;font-size:28px;letter-spacing:.3px}
.hero-sub{margin:6px 0 0;opacity:.92;font-size:15px}
.hero-sub strong{color:#ffd98a}
main{max-width:90%;margin:26px auto 60px;padding:0;display:grid;gap:22px}
.card{background:var(--papeleria);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:26px}

#seccion-cuadrante .m-h{color:rgba(255,255,255,.85)}

/* ---- pastilla Cuadrante con panel de coincidencias a la derecha ---- */
.cuadrante-flex{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
.panel-coincidencias{background:transparent;border:none;border-radius:14px;padding:0}
.panel-capsula{background:var(--verde);border:1px solid #2ea043;border-radius:14px;padding:12px 16px;margin-top:-56px;position:relative;z-index:1;box-shadow:0 0 14px rgba(34,197,94,.5), 0 0 36px rgba(34,197,94,.25);animation:luz-azul 2.2s ease-in-out infinite}
.panel-capsula h3{margin:0;font-size:18px;color:#fff}
.panel-capsula .hint{margin:3px 0 0;font-size:12.5px}
.cap-titulo{color:#fff;font-size:19px;font-weight:400;margin-bottom:5px}
.cap-linea{color:#fff;font-size:19px;font-weight:400;line-height:1.45}
.cap-linea.cap-espera{font-size:13px;color:rgba(0,0,0,.6)}
@keyframes luz-azul{ from{box-shadow:0 0 10px rgba(34,197,94,.35), 0 0 24px rgba(34,197,94,.15)} to{box-shadow:0 0 18px rgba(34,197,94,.6), 0 0 48px rgba(34,197,94,.3)} }
.listado-titulo{color:#fff;font-size:16px;font-weight:700;margin:0 0 6px}
.panel-coincidencias .listado{gap:0;margin-top:130px;max-height:300px;overflow-y:auto;padding-right:4px}
.panel-coincidencias .listado .item.coincidencia{line-height:1.4;margin:0;padding:2px 4px !important}
.panel-coincidencias .listado .item.coincidencia .num{color:#fff;font-weight:700;font-size:14px}
.item.coincidencia .fecha-peque{color:#fff !important;font-weight:400;line-height:1.3;font-size:13.5px}
.panel-coincidencias .item{padding:2px 4px;gap:6px}
.item.coincidencia{display:flex;align-items:baseline}
.panel-coincidencias .listado::-webkit-scrollbar{width:8px}
.panel-coincidencias .listado::-webkit-scrollbar-thumb{background:rgba(34,197,94,.5);border-radius:4px}
.panel-coincidencias .listado::-webkit-scrollbar-track{background:transparent}
.item.coincidencia .fecha-peque{font-weight:400;line-height:1.45}
.panel-coincidencias h3{margin:0;font-size:19px;color:#fff}
.panel-coincidencias .hint{margin:4px 0 14px;font-size:12.5px}
.panel-coincidencias .item{padding:10px 12px;gap:10px}
.item.coincidencia{background:transparent;border:none;padding:8px 4px;text-align:left}
.panel-coincidencias .listado .item.coincidencia + .item.coincidencia{margin-top:0}
.item.coincidencia .fecha-peque{color:#5f8f6e;font-size:14px;font-weight:400}
.item.coincidencia .num{color:#5f8f6e;font-weight:600}
/* 01: número y «Fecha:» en la misma línea, Fecha/Hora sin negrita */
.item.coincidencia.predeterminada{display:flex;align-items:baseline;gap:10px}
.item.coincidencia.predeterminada .num.enverde{color:var(--verde);font-size:24px;font-weight:800;line-height:1;flex:0 0 auto}
.item.coincidencia.predeterminada .fecha-grande{color:var(--verde);font-size:19px;font-weight:400;line-height:1.5;animation:latido 1.4s infinite alternate;display:block}
.item.coincidencia.predeterminada .fecha-grande span{display:block}
@keyframes latido{ from{opacity:.72;text-shadow:0 0 0 rgba(34,197,94,0)} to{opacity:1;text-shadow:0 0 12px rgba(34,197,94,.5)} }
@media(max-width:900px){ .cuadrante-flex{grid-template-columns:1fr} .panel-coincidencias{order:2} }

#seccion-cuadrante .cabecera-dia{color:#fff}
#seccion-cuadrante .cabecera-esquina{color:rgba(255,255,255,.45)}
#seccion-cuadrante .acciones-derecha .btn.ghost{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}

/* pastilla Cuadrante en gris oscuro */
#seccion-cuadrante,#seccion-resultado,#seccion-historial{background:#505551;border-color:#3d3d49;color:#fff}
#seccion-cuadrante h2,#seccion-resultado h2,#seccion-historial h2{color:#fff}
#seccion-cuadrante .hint,#seccion-resultado .hint,#seccion-historial .hint{color:rgba(255,255,255,.78)}
#seccion-cuadrante #estado-guardado,.estado-inline{color:rgba(255,255,255,.85)}
#seccion-resultado .item,#seccion-historial .item{background:#26262e;border-color:#3d3d49;color:#fff}
#seccion-resultado .item.vacio,#seccion-historial .item.vacio{color:rgba(255,255,255,.6)}
#seccion-resultado .cuando,#seccion-historial .cuando{color:#fff}
#seccion-resultado .quien,#seccion-historial .quien{color:rgba(255,255,255,.7)}
#seccion-resultado .chip{background:rgba(255,255,255,.10);color:#fff}
#seccion-resultado .chip.si{background:rgba(34,197,94,.28)}
#seccion-resultado .chip.no{background:rgba(199,91,91,.30);text-decoration:line-through}
#seccion-historial .btn.mini.ghost{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
.card h2{margin:0 0 6px;font-size:20px;color:#4a3c25}
.hint{margin:0 0 16px;color:var(--tinta-suave);font-size:14px}
.hidden{display:none}

/* ---- barra plana de usuario ---- */
.barra-usuarios{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:4px 4px 0;font-size:17px}
.barra-usuarios .hola{color:var(--tinta-suave)}
.nombres-planos{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start}
.cuadrito-color{display:inline-block;width:15px;height:15px;border-radius:4px;margin-right:7px;vertical-align:-2px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.barra-usuarios{position:relative}
.tri-volador{position:absolute;top:100%;left:0;transform:translateX(-50%);font-size:24px;line-height:.55;color:#111;margin-top:2px;pointer-events:none}
.nombre-plano{border:none;background:transparent;padding:0;font-size:19px;cursor:pointer;color:#b3a288;transition:.15s;font-family:inherit;position:relative;line-height:1.2}
.nombre-plano:hover{color:var(--tinta)}
.nombre-plano.elegido{color:#111;font-weight:800}
.nombre-plano .marca-elegido,.nombre-plano .marca-alineado{display:block;font-size:34px;line-height:.55;color:#111;margin-top:2px}
.nombres-planos{align-items:flex-start}

/* ---- puerta de entrada (texto plano) ---- */
.entrada-personas{display:flex;flex-direction:column;gap:6px;max-width:300px;margin:0 auto}
.entrada-personas .persona-btn{border:none;background:transparent;font-size:20px;color:#b3a288;cursor:pointer;font-family:inherit;padding:8px 6px;border-radius:8px;transition:.15s}
.entrada-personas .persona-btn:hover{color:#111;background:rgba(0,0,0,.04)}
.entrada-teclado{display:flex;gap:8px;justify-content:center;margin-top:16px}
.entrada-teclado input{border:1.5px solid var(--linea);border-radius:10px;padding:11px 14px;font-size:16px;width:230px;font-family:inherit;background:#fff}
.entrada-teclado input:focus{outline:none;border-color:var(--verde)}
.entrada-error{color:var(--rojo);font-size:13px;min-height:18px;margin:8px 0 0}
.personas{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0 8px;scroll-margin-bottom:20px}
.persona-btn{border:2px solid var(--linea);background:#fff;border-radius:999px;padding:11px 22px;font-size:16px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:9px}
.persona-btn:hover{border-color:var(--ambar);transform:translateY(-1px)}
.persona-btn.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.bolita{width:12px;height:12px;border-radius:50%;display:inline-block}
.seccion-seleccion{margin-bottom:26px}

/* ---- 2 · cuadrante ---- */
.leyenda{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px;font-size:13.5px}
.matrix{display:grid;grid-template-columns:155px repeat(10,minmax(64px,1fr));gap:7px;overflow-x:auto;padding-bottom:6px}
.m-h{font-size:12.5px;text-align:center;color:var(--tinta-suave);align-self:center}
.cabecera-esquina{color:#b4a58a;font-size:11px}
.cabecera-dia{text-align:left;font-weight:600;font-size:13px;color:var(--tinta)}
.celda{border:1px solid var(--linea);border-radius:9px;background:#fff;display:flex;flex-direction:row;overflow:hidden;height:44px}
.celda .franja{flex:1 1 0;min-width:6px;display:block;height:100%;border-right:1px solid #f1ebe0}
.celda .franja:last-child{border-right:none}
.celda.clicable{cursor:pointer}
.celda.clicable:hover{box-shadow:0 0 0 2px var(--ambar);border-color:var(--ambar)}
.celda.todas{animation:parpadeo 1s infinite alternate;border-color:var(--verde);border-width:2px}
.celda.todas .franja{background:var(--verde) !important;border-bottom:1px solid rgba(255,255,255,.35)}
.celda.todas-otra{border-color:rgba(34,197,94,.55)}
.celda.todas-otra .franja{background:#4f8f66 !important}
@keyframes parpadeo{ from{box-shadow:0 0 0 0 rgba(34,197,94,0)} to{box-shadow:0 0 14px 4px rgba(34,197,94,.65)} }

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(40,30,15,.45);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(2px)}
.modal-box{background:var(--papeleria);border-radius:18px;padding:28px 30px;max-width:430px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:sube .18s ease-out}
@keyframes sube{from{transform:translateY(14px);opacity:.4}to{transform:translateY(0);opacity:1}}
.modal-icono{font-size:44px;margin-bottom:6px}
.modal-box h3{margin:4px 0 8px;font-size:20px}
.modal-box p{color:var(--tinta-suave);font-size:15px;line-height:1.5;margin:0 0 18px}
.modal-btns{display:flex;gap:10px;justify-content:center}
.modal-btns .btn{min-width:130px}

/* ---- multi-selección ---- */
/* ---- multi-selección ---- */
.acciones{display:flex;position:relative;justify-content:flex-start;padding:6px 0}
.centro-btns{position:absolute;transform:translateX(-50%);top:6px;display:flex;gap:10px;align-items:center}
.btn.btn-palido{background:#f5deb3;color:#7a5b1e;cursor:default;border:none;border-radius:10px;padding:12px 20px;font-size:15px}
.btn.btn-palido:disabled{opacity:1}
.estado-inline{color:rgba(255,255,255,.85);font-size:14px}
.estado-inline{color:var(--tinta-suave);font-size:14px;align-self:center}
.franja{position:relative}
.franja.pendiente-marcar::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#22c55e;font-weight:900;font-size:26px;z-index:2;text-shadow:-1px 0 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff}
.franja.pendiente-desmarcar::after{content:'✗';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#e11d2e;font-weight:900;font-size:26px;z-index:2;text-shadow:-1px 0 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff}

/* ---- botones / listados ---- */
.acciones{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.btn{border:none;border-radius:10px;padding:12px 22px;font-size:15px;cursor:pointer;transition:.15s}
.btn.primary{background:#16a34a;color:#fff}
.btn.primary:hover{background:#13903f;transform:translateY(-1px)}
.btn.primary:disabled{background:#4c7a5e;color:rgba(255,255,255,.55);cursor:not-allowed;transform:none;box-shadow:none;opacity:1}
.btn.primary:disabled:hover{background:#4c7a5e;transform:none}
.btn.ghost{background:transparent;border:1px solid var(--linea);color:var(--tinta-suave)}
.btn.mini{padding:6px 14px;font-size:13px;border-radius:8px}
.btn.ok{background:var(--verde)}
.estado{margin:12px 0 0;color:#16a34a;font-weight:600;font-size:14px;min-height:20px}
.listado{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 16px}
.item .num{font-weight:700;color:var(--ambar);min-width:34px}
.item .cuando{font-size:16px;font-weight:600}
.item .quien{color:var(--tinta-suave);font-size:13px;margin-left:auto;text-align:right}
.item.vacio{color:var(--tinta-suave);justify-content:center;border-style:dashed;text-align:center}
.fila-relleno{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;font-size:13px}
.chip{background:var(--ambar-claro);border-radius:999px;padding:3px 12px}
.chip.si{background:var(--verde-claro)}
.chip.no{background:#f7e2e2;text-decoration:line-through}
.badge-falta{color:var(--rojo);font-size:13px}
footer{text-align:center;color:#b4a58a;font-size:12.5px;padding-bottom:30px}

/* ---- puerta de entrada ---- */
.entrada-personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;justify-content:center;max-width:420px;margin:0 auto}
.entrada-personas .persona-btn{justify-content:center;width:100%;font-size:17px;padding:14px 18px}
.modal-box .hint{margin:0 0 14px}
#entrada .modal-box h3{color:#4a3c25}