/* =====================================================================
   Control de Supervisión — SPSEIS SEGURIDAD · CAI SP6
   Hoja de estilos única. Sin frameworks: carga rápido incluso con
   conexión lenta y funciona igual en el CAI y en un celular.

   Paleta tomada del logo: negro, blancos y grises. El semáforo
   operativo (verde, ámbar, rojo) se conserva porque ahí el color
   no es decoración: es la señal que el operador lee de un vistazo.
   ===================================================================== */

:root{
  --negro:#000000;        /* el negro del logo */
  --tinta:#14161a;        /* barra lateral */
  --grafito:#23262d;      /* encabezados y botones */
  --grafito-2:#3a3f48;    /* hover */
  --azul:#14161a;         /* compatibilidad: la marca ahora es negra */
  --azul-2:#3a3f48;
  --azul-claro:#eef0f3;
  --verde:#1f7a3d; --verde-bg:#e7f4ec;
  --ambar:#a15c00; --ambar-bg:#fdf3e2;
  --rojo:#b3261e;  --rojo-bg:#fdeceb;
  --gris:#5a6069;  --gris-2:#888e97; --linea:#e3e5e9;
  --fondo:#f4f5f7; --panel:#ffffff; --texto:#16181c;
  --radio:10px; --sombra:0 1px 2px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fondo); color:var(--texto); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--grafito); text-decoration:none; font-weight:550}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem; line-height:1.25; font-weight:650}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .75rem}
small{font-size:.82rem}

/* ---------- Estructura ---------- */
.app{display:flex; min-height:100vh}

.lateral{
  width:236px; flex:0 0 236px; background:var(--tinta); color:#d3d6da;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
/* La marca va sobre negro puro para que el logo se funda con el fondo */
.marca{padding:1rem 1.1rem .9rem; background:var(--negro); border-bottom:1px solid rgba(255,255,255,.1)}
.marca img{display:block; width:100%; max-width:172px; height:auto}
.marca .unidad{margin-top:.5rem; font-size:.7rem; color:#8b9099; text-transform:uppercase;
  letter-spacing:.14em; font-weight:600}

.menu{padding:.6rem 0; flex:1}
.menu .grupo{padding:.85rem 1.1rem .3rem; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.1em; color:#7d838c; font-weight:700}
.menu a{
  display:flex; align-items:center; gap:.6rem; padding:.5rem 1.1rem;
  color:#d3d6da; font-size:.9rem; border-left:3px solid transparent; text-decoration:none;
}
.menu a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.menu a.activo{background:rgba(255,255,255,.12); color:#fff; border-left-color:#fff; font-weight:600}
.menu .ic{width:18px; text-align:center; opacity:.9; font-size:.95rem}
.menu .pill{margin-left:auto; background:var(--rojo); color:#fff; border-radius:20px;
  padding:0 .42rem; font-size:.7rem; font-weight:700; line-height:1.35}

.pie-lateral{padding:.85rem 1.1rem; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; color:#8b9099}
.pie-lateral a{color:#d3d6da}

.principal{flex:1; min-width:0; display:flex; flex-direction:column}

.barra{
  background:var(--panel); border-bottom:1px solid var(--linea);
  padding:.7rem 1.4rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.barra h1{margin:0; font-size:1.16rem}
.barra .der{margin-left:auto; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.usuario-chip{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--gris)}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--grafito); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.78rem}

.contenido{padding:1.3rem 1.4rem 3rem; flex:1}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); margin-bottom:1.1rem}
.tarjeta > header{padding:.8rem 1rem; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.tarjeta > header h2{margin:0; font-size:1rem}
.tarjeta > header .der{margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.tarjeta .cuerpo{padding:1rem}
.tarjeta .cuerpo.sin-relleno{padding:0}

/* ---------- Indicadores ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:.85rem; margin-bottom:1.1rem}
.kpi{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:.85rem .95rem; box-shadow:var(--sombra); border-top:3px solid var(--grafito)}
.kpi .rot{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris-2); font-weight:700}
.kpi .val{font-size:1.85rem; font-weight:700; line-height:1.15; margin:.2rem 0 0; font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.79rem; color:var(--gris)}
.kpi.ok{border-top-color:var(--verde)}   .kpi.ok .val{color:var(--verde)}
.kpi.mal{border-top-color:var(--rojo)}   .kpi.mal .val{color:var(--rojo)}
.kpi.avi{border-top-color:var(--ambar)}  .kpi.avi .val{color:var(--ambar)}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto}
table.datos{width:100%; border-collapse:collapse; font-size:.875rem}
table.datos th{
  background:#f7f9fc; text-align:left; padding:.55rem .7rem; font-weight:650;
  color:var(--gris); border-bottom:1px solid var(--linea); white-space:nowrap;
  position:sticky; top:0; z-index:2; font-size:.8rem;
}
table.datos td{padding:.5rem .7rem; border-bottom:1px solid #eef1f5; vertical-align:middle}
table.datos tbody tr:hover{background:#fafbfd}
table.datos tr.par{background:#fcfdfe}
table.datos .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.datos .cen{text-align:center}
table.datos tfoot td{font-weight:700; background:#f7f9fc; border-top:2px solid var(--linea)}
.vacio{padding:2.2rem 1rem; text-align:center; color:var(--gris-2)}
.vacio .ic{font-size:1.9rem; display:block; margin-bottom:.4rem; opacity:.5}

/* ---------- Semáforo de estados ---------- */
.est{display:inline-block; padding:.14rem .5rem; border-radius:20px; font-size:.75rem;
  font-weight:650; white-space:nowrap; border:1px solid transparent}
.e-ok   {background:var(--verde-bg); color:var(--verde); border-color:#bfe3cd}
.e-fuera{background:#eceef1; color:#3a3f48; border-color:#d7dae0}
.e-just {background:var(--ambar-bg); color:var(--ambar); border-color:#f3ddb6}
.e-mal  {background:var(--rojo-bg); color:var(--rojo); border-color:#f5c9c6}
.e-pend {background:#f0f2f5; color:var(--gris); border-color:#dfe3e9}
.e-nap  {background:#f6f7f9; color:var(--gris-2); border-color:#e6e9ee; font-style:italic}

.turno{display:inline-block; padding:.1rem .45rem; border-radius:5px; font-size:.72rem; font-weight:700}
.t-dia{background:#eceef1; color:#3a3f48; border:1px solid #dcdfe4}
.t-noc{background:#23262d; color:#fff}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.44rem .8rem; border-radius:7px;
  border:1px solid var(--linea); background:#fff; color:var(--texto); font-size:.86rem;
  cursor:pointer; font-family:inherit; font-weight:550; text-decoration:none; white-space:nowrap;
}
.btn:hover{background:#f4f6f9; text-decoration:none}
.btn-primario{background:var(--grafito); border-color:var(--grafito); color:#fff}
.btn-primario:hover{background:var(--grafito-2)}
.btn-ok{background:var(--verde); border-color:var(--verde); color:#fff}
.btn-ok:hover{filter:brightness(1.08)}
.btn-peligro{background:#fff; border-color:#e8b4b0; color:var(--rojo)}
.btn-peligro:hover{background:var(--rojo-bg)}
.btn-sm{padding:.24rem .55rem; font-size:.79rem}
.btn:disabled{opacity:.5; cursor:not-allowed}
.acciones{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------- Formularios ---------- */
.campo{margin-bottom:.85rem}
.campo label{display:block; font-size:.82rem; font-weight:650; color:var(--gris); margin-bottom:.25rem}
.campo .ayuda{font-size:.78rem; color:var(--gris-2); margin-top:.22rem}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=time],
input[type=number],input[type=search],select,textarea{
  width:100%; padding:.45rem .6rem; border:1px solid #cfd6e0; border-radius:7px;
  font-family:inherit; font-size:.88rem; background:#fff; color:var(--texto);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--grafito); box-shadow:0 0 0 3px rgba(35,38,45,.14)}
textarea{min-height:76px; resize:vertical}
select{appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235b6472' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; padding-right:1.7rem}
.rejilla{display:grid; gap:.85rem}
.r2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.check{display:flex; align-items:flex-start; gap:.5rem; font-size:.87rem; margin-bottom:.4rem}
.check input{margin-top:.22rem; width:16px; height:16px; accent-color:var(--grafito)}

.filtros{display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap}
.filtros .campo{margin-bottom:0; min-width:132px}

/* ---------- Avisos ---------- */
.flash{margin-bottom:1rem}
.aviso{padding:.7rem .9rem; border-radius:8px; margin-bottom:.6rem; font-size:.88rem;
  border:1px solid transparent; display:flex; gap:.55rem; align-items:flex-start}
.aviso .ic{font-weight:700}
.a-ok{background:var(--verde-bg); color:#155e2c; border-color:#bfe3cd}
.a-error{background:var(--rojo-bg); color:#8d1f18; border-color:#f5c9c6}
.a-aviso{background:var(--ambar-bg); color:#7d4700; border-color:#f3ddb6}
.a-info{background:var(--azul-claro); color:#2b3038; border-color:#d7dae0}

.nota{background:#f7f8fa; border-left:3px solid var(--grafito); padding:.65rem .85rem;
  border-radius:0 7px 7px 0; font-size:.86rem; color:var(--gris); margin-bottom:1rem}

/* ---------- Barra de progreso ---------- */
.barra-prog{height:7px; background:#eceff4; border-radius:20px; overflow:hidden; min-width:64px}
.barra-prog i{display:block; height:100%; background:var(--verde); border-radius:20px}
.barra-prog.neutro i{background:var(--grafito)}
.barra-prog.mal i{background:var(--rojo)}
.barra-prog.avi i{background:var(--ambar)}
.prog-fila{display:flex; align-items:center; gap:.5rem}
.prog-fila .pct{font-size:.8rem; font-variant-numeric:tabular-nums; min-width:44px; text-align:right}

/* ---------- Panel del día ---------- */
.dia-nav{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.dia-nav .fecha-grande{font-size:1.05rem; font-weight:650}
.dia-nav .dia-txt{color:var(--gris-2); font-size:.85rem; text-transform:capitalize}

tr.fila-visita.hecha{background:#fbfefc}
tr.fila-visita.falla{background:#fffbfb}
.sel-estado{font-size:.82rem; padding:.26rem .4rem; min-width:150px}
.hora-in{width:88px; padding:.26rem .35rem; font-size:.82rem}
.ref-in{min-width:130px; padding:.26rem .4rem; font-size:.82rem}
.guardado{color:var(--verde); font-size:.76rem; opacity:0; transition:opacity .25s}
.guardado.ver{opacity:1}
.marca-alerta{color:var(--ambar); font-size:.9rem; cursor:help}

/* ---------- Utilidades ---------- */
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem}
.gris{color:var(--gris)} .gris2{color:var(--gris-2)}
.rojo{color:var(--rojo)} .verde{color:var(--verde)} .ambar{color:var(--ambar)}
.negrita{font-weight:700}
.tt-der{text-align:right} .tt-cen{text-align:center}
.mb0{margin-bottom:0} .mb1{margin-bottom:.6rem} .mt1{margin-top:.6rem} .mt2{margin-top:1.2rem}
.chip{display:inline-block; background:#eef1f6; border-radius:5px; padding:.08rem .42rem;
  font-size:.75rem; color:var(--gris); margin:.1rem .15rem .1rem 0}
.sep{height:1px; background:var(--linea); margin:1rem 0}
.flex{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.entre{justify-content:space-between}

/* ---------- Login ---------- */
.login-caja{min-height:100vh; display:grid; place-items:center; padding:1rem;
  background:linear-gradient(165deg,#000 0%,#14161a 55%,#23262d 100%)}
.login-panel{background:#fff; border-radius:14px; padding:2rem 1.9rem; width:min(400px,92vw);
  box-shadow:0 20px 45px rgba(10,20,45,.28)}
.login-panel .marca-login{text-align:center; margin-bottom:1.4rem}
.login-panel .marca-login img{width:100%; max-width:208px; height:auto; display:block; margin:0 auto .9rem}
.login-panel .marca-login .sub{color:var(--gris-2); font-size:.85rem}

/* ---------- Reporte imprimible ---------- */
.reporte{max-width:1020px; margin:0 auto; padding:2rem 1.5rem; background:#fff}
.reporte h1{border-bottom:2px solid var(--negro); padding-bottom:.5rem; color:var(--negro)}
.reporte h2{color:var(--negro); margin-top:1.7rem; border-bottom:1px solid var(--linea); padding-bottom:.3rem}
.reporte table{width:100%; border-collapse:collapse; font-size:.84rem; margin-bottom:1rem}
.reporte th{background:var(--grafito); color:#fff; padding:.42rem .55rem; text-align:left; font-size:.79rem}
.reporte td{padding:.38rem .55rem; border-bottom:1px solid var(--linea)}
.reporte .kpis{grid-template-columns:repeat(4,1fr)}

@media print{
  .lateral,.barra,.no-imprimir{display:none !important}
  body{background:#fff; font-size:11px}
  .contenido,.reporte{padding:0}
  .tarjeta{box-shadow:none; break-inside:avoid; border:1px solid #ccc}
  table.datos th{position:static}
  a{color:inherit; text-decoration:none}
}

/* ---------- Adaptación a pantallas pequeñas ---------- */
@media (max-width:960px){
  .app{flex-direction:column}
  .lateral{width:100%; flex:none; height:auto; position:static}
  .menu{display:flex; flex-wrap:wrap; padding:.35rem}
  .menu .grupo{display:none}
  .menu a{border-left:none; border-bottom:3px solid transparent; padding:.45rem .7rem; font-size:.84rem}
  .menu a.activo{border-left:none; border-bottom-color:#8fb4f5}
  .pie-lateral{display:none}
  .contenido{padding:.9rem}
  .barra{padding:.6rem .9rem}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi .val{font-size:1.5rem}
  table.datos{font-size:.82rem}
  .barra h1{font-size:1rem}
}

/* ---------- Ajustes finos ---------- */
/* Puntos de la matriz de rutas: el botón de quitar no debe saltar de línea */
.punto-ruta{display:flex; align-items:flex-start; justify-content:space-between;
  gap:.4rem; flex-wrap:nowrap; padding:.2rem 0; border-bottom:1px solid #f0f2f6}
.punto-ruta .txt{font-size:.8rem; line-height:1.35; flex:1; min-width:0}
.punto-ruta .quitar{color:var(--rojo); font-size:1rem; line-height:1; text-decoration:none;
  flex:0 0 auto; opacity:.55; padding:0 .1rem}
.punto-ruta:hover .quitar{opacity:1}
.punto-ruta .n{color:var(--gris-2)}

/* Panel del día: nombre de cliente en una sola línea para filas compactas */
#tablaDia td .cli{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:inline-block; max-width:230px; vertical-align:bottom}

/* La barra de cumplimiento necesita aire en tablas densas */
table.datos th:last-child, table.datos td:last-child{padding-right:.9rem}

/* ---------- Turnos aplicables en la ficha del cliente ---------- */
.turnos-check{display:grid; gap:.6rem; margin-bottom:.8rem}
.check.tc{border:1px solid var(--linea); border-radius:9px; padding:.7rem .8rem;
  background:#fafbfc; transition:border-color .15s, background .15s}
.check.tc.on{border-color:var(--grafito); background:#fff}
.check.tc strong{display:flex; align-items:center; gap:.45rem; font-weight:650}

/* =====================================================================
   MI RUTA — pantalla de campo
   Pensada para el celular: objetivos táctiles grandes, mucho contraste
   y nada que obligue a apuntar con precisión.
   ===================================================================== */
.campo{max-width:620px; margin:0 auto}
.campo .campo-f{margin-bottom:0; min-width:130px}
.campo .campo-f label{display:block; font-size:.82rem; font-weight:650; color:var(--gris); margin-bottom:.25rem}

.campo-cabecera{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--negro); color:#fff; border-radius:12px; padding:.9rem 1.1rem; margin-bottom:.7rem}
.cf-fecha{font-size:1.05rem; font-weight:650}
.cf-sup{font-size:.85rem; color:#a9aeb6; margin-top:.15rem}
.cf-marcador{text-align:right; line-height:1}
.cf-marcador .n{font-size:2rem; font-weight:700}
.cf-marcador .d{font-size:1.1rem; color:#9aa0a8}
.cf-marcador .t{font-size:.68rem; color:#9aa0a8; text-transform:uppercase; letter-spacing:.08em; margin-top:.25rem}

.gps-estado{display:flex; align-items:center; gap:.55rem; padding:.5rem .8rem; border-radius:9px;
  font-size:.84rem; margin-bottom:.9rem; border:1px solid transparent}
.gps-estado .punto{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.gps-estado.buscando{background:#f3f4f6; color:var(--gris); border-color:#e3e5e9}
.gps-estado.buscando .punto{background:var(--gris-2); animation:latir 1.2s infinite}
.gps-estado.ok{background:var(--verde-bg); color:#155e2c; border-color:#bfe3cd}
.gps-estado.ok .punto{background:var(--verde)}
.gps-estado.sin{background:var(--ambar-bg); color:#7d4700; border-color:#f3ddb6}
.gps-estado.sin .punto{background:var(--ambar)}
@keyframes latir{0%,100%{opacity:.35}50%{opacity:1}}

.cf-turno{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris); margin:1.1rem 0 .5rem; padding-left:.2rem}

.visita-campo{background:#fff; border:1px solid var(--linea); border-radius:12px;
  padding:.9rem; margin-bottom:.75rem; box-shadow:var(--sombra)}
.visita-campo.hecha{border-color:#bfe3cd; background:#fbfefc}
.visita-campo.just{border-color:#f3ddb6; background:#fffdf8}
.visita-campo.libre{border-style:dashed; background:#fafbfc}
.visita-campo > header{display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.7rem}
.visita-campo .orden{flex:0 0 34px; height:34px; border-radius:9px; background:var(--grafito); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.95rem}
.visita-campo .quien{flex:1; min-width:0}
.visita-campo h3{margin:0; font-size:1.08rem; line-height:1.25}
.visita-campo .meta{font-size:.78rem; color:var(--gris-2); margin-top:.15rem}
.visita-campo .etiqueta-estado{flex:0 0 auto}

.tiempos{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.75rem;
  background:#f7f8fa; border-radius:9px; padding:.55rem}
.tiempos > div{text-align:center}
.tiempos .rot{display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--gris-2); font-weight:700}
.tiempos .val{display:block; font-size:1.05rem; font-weight:650; font-variant-numeric:tabular-nums; margin-top:.1rem}

.botonera{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
.btn-grande{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:56px; border-radius:11px; border:2px solid var(--grafito);
  background:#fff; color:var(--grafito); font-family:inherit; font-size:1rem; font-weight:700;
  letter-spacing:.04em; cursor:pointer; padding:.5rem; -webkit-tap-highlight-color:transparent;
  transition:transform .06s, background .15s;
}
.btn-grande .ico{font-size:1.1rem}
.btn-grande:active{transform:scale(.97)}
.btn-grande:disabled{opacity:.38; cursor:not-allowed; border-color:#c9cdd3; color:#9aa0a8}
.b-llegue{background:var(--grafito); color:#fff}
.b-llegue.listo{background:var(--verde); border-color:var(--verde); color:#fff}
.b-sali{background:var(--verde); border-color:var(--verde); color:#fff}
.b-sali:disabled{background:#fff}
.b-foto{border-color:var(--grafito)}
.b-novedad{border-color:#e0b4b0; color:var(--rojo)}
.b-tomar{background:#fff; border-style:dashed}
.b-disparar{background:var(--negro); border-color:var(--negro); color:#fff; width:100%; min-height:64px; font-size:1.05rem}
.b-repetir{background:#fff}
.b-usar{background:var(--verde); border-color:var(--verde); color:#fff}
.b-enviar{background:var(--rojo); border-color:var(--rojo); color:#fff; width:100%; margin-top:.9rem}

.cerrada-nota{background:#f2f4f6; border-radius:9px; padding:.6rem .75rem; font-size:.87rem; color:var(--gris); text-align:center}

.mensaje-fila{max-height:0; overflow:hidden; transition:max-height .2s, padding .2s;
  font-size:.86rem; border-radius:8px; padding:0 .7rem}
.mensaje-fila.ver{max-height:140px; padding:.55rem .7rem; margin-top:.6rem;
  background:var(--verde-bg); color:#155e2c}
.mensaje-fila.ver.error{background:var(--rojo-bg); color:#8d1f18}
.mensaje-fila.ver.aviso{background:var(--ambar-bg); color:#7d4700}

/* ---------- Ventanas modales ---------- */
body.sin-scroll{overflow:hidden}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:80;
  display:flex; align-items:center; justify-content:center; padding:.8rem}
.modal[hidden]{display:none}
.modal-caja{background:#fff; border-radius:14px; width:min(560px,100%); max-height:94vh;
  overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal-cab{display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--linea); position:sticky; top:0; background:#fff; z-index:2}
.modal-cab strong{font-size:1rem}
.modal-cab .cerrar{background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--gris);
  width:40px; height:40px; border-radius:9px}
.modal-cab .cerrar:hover{background:#f2f4f6}
.modal-cuerpo{padding:1rem}

.camara-marco{position:relative; background:#000; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden}
.camara-marco video, .camara-marco img{width:100%; height:100%; object-fit:cover; display:block}
.camara-aviso{position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.82); padding:1.5rem; text-align:center; font-size:.92rem; line-height:1.5}
.camara-pie{padding:.9rem 1rem 0}
.camara-pie .dos{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
.camara-nota{padding:.7rem 1rem 1rem; margin:0; font-size:.8rem; color:var(--gris-2); text-align:center}

.rot-campo{display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--gris); margin:.9rem 0 .4rem}
.opciones-motivo{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.op-motivo{min-height:52px; border:2px solid var(--linea); background:#fff; border-radius:10px;
  font-family:inherit; font-size:.88rem; font-weight:600; color:var(--texto); cursor:pointer; padding:.5rem}
.op-motivo:active{transform:scale(.97)}
.op-motivo.sel{border-color:var(--negro); background:var(--negro); color:#fff}

@media (max-width:420px){
  .botonera{grid-template-columns:1fr}
  .opciones-motivo{grid-template-columns:1fr}
  .btn-grande{min-height:60px; font-size:1.05rem}
}

/* =====================================================================
   MANUAL DE USO
   ===================================================================== */
.manual{display:grid; grid-template-columns:228px 1fr; gap:1.4rem; align-items:start}
.manual-indice{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:.6rem; position:sticky; top:74px; box-shadow:var(--sombra)}
.mi-titulo{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gris-2); padding:.5rem .6rem .4rem}
.manual-indice a{display:block; padding:.48rem .6rem; border-radius:7px; font-size:.87rem;
  color:var(--texto); font-weight:500; text-decoration:none}
.manual-indice a:hover{background:#f2f4f6; text-decoration:none}
.manual-indice a.activo{background:var(--negro); color:#fff; font-weight:650}
.mi-pie{padding:.6rem; border-top:1px solid var(--linea); margin-top:.4rem}

.manual-texto{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.6rem 1.9rem 1.4rem; box-shadow:var(--sombra); max-width:840px}
.manual-texto h1{font-size:1.6rem; margin-bottom:.7rem; padding-bottom:.55rem;
  border-bottom:3px solid var(--negro)}
.manual-texto h2{font-size:1.12rem; margin-top:1.9rem; color:var(--negro)}
.manual-texto h3{font-size:.98rem; margin-top:1.3rem}
.manual-texto p{line-height:1.65; margin-bottom:.85rem}
.manual-texto .entrada{font-size:1rem; color:var(--gris); line-height:1.7; margin-bottom:1.2rem}

.manual-texto ol.pasos{padding-left:0; list-style:none; counter-reset:paso; margin:0 0 1rem}
.manual-texto ol.pasos li{counter-increment:paso; position:relative; padding-left:2.3rem;
  margin-bottom:.75rem; line-height:1.6}
.manual-texto ol.pasos li::before{content:counter(paso); position:absolute; left:0; top:.05rem;
  width:1.6rem; height:1.6rem; border-radius:50%; background:var(--negro); color:#fff;
  display:grid; place-items:center; font-size:.8rem; font-weight:700}
.manual-texto ul.lista-simple{padding-left:1.15rem; margin-bottom:1rem}
.manual-texto ul.lista-simple li{margin-bottom:.45rem; line-height:1.6}

table.tabla-manual{width:100%; border-collapse:collapse; font-size:.88rem; margin:.5rem 0 1.2rem}
table.tabla-manual th{background:var(--grafito); color:#fff; text-align:left; padding:.5rem .7rem; font-size:.82rem}
table.tabla-manual td{padding:.55rem .7rem; border-bottom:1px solid var(--linea); vertical-align:top; line-height:1.55}
table.tabla-manual tr:last-child td{border-bottom:none}

.tarjetas-manual{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.75rem; margin-bottom:1.2rem}
.tarjetas-manual > div{background:#f7f8fa; border-radius:9px; padding:.8rem .9rem; border:1px solid var(--linea)}
.tarjetas-manual strong{display:block; margin-bottom:.3rem}
.tarjetas-manual p{margin:0; font-size:.86rem; color:var(--gris); line-height:1.55}

.caja-tip,.caja-aviso{border-radius:9px; padding:.85rem 1rem; margin:1.1rem 0; border:1px solid transparent}
.caja-tip{background:#f4f6f8; border-left:4px solid var(--negro)}
.caja-aviso{background:var(--ambar-bg); border-left:4px solid var(--ambar)}
.caja-tip strong,.caja-aviso strong{display:block; margin-bottom:.3rem}
.caja-tip p,.caja-aviso p{margin:0; font-size:.9rem; line-height:1.6}

.formula{background:var(--negro); color:#fff; border-radius:8px; padding:.75rem 1rem;
  font-size:.95rem; text-align:center; margin:.6rem 0 1rem; font-weight:600}

.faq h3{margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--linea)}
.faq h3:first-child{border-top:none; padding-top:0; margin-top:0}
.faq p{color:var(--gris)}

.btn-demo{display:inline-flex; align-items:center; justify-content:center; min-height:34px;
  padding:.2rem .7rem; border-radius:8px; border:2px solid var(--grafito); font-size:.8rem;
  font-weight:700; letter-spacing:.03em; white-space:nowrap}

.manual-nav{display:flex; justify-content:space-between; gap:.6rem; margin-top:2rem;
  padding-top:1.1rem; border-top:1px solid var(--linea)}

@media (max-width:860px){
  .manual{grid-template-columns:1fr}
  .manual-indice{position:static}
  .manual-indice a{display:inline-block; margin:.1rem}
  .manual-texto{padding:1.1rem}
}

/* Visitas sin asignar: plegadas para no alargar la pantalla del supervisor */
.libres-caja{margin-top:1.2rem; background:#fff; border:1px solid var(--linea); border-radius:12px; overflow:hidden}
.libres-caja > summary{cursor:pointer; padding:1rem; font-size:.92rem; font-weight:600;
  display:flex; align-items:center; gap:.55rem; list-style:none; color:var(--gris)}
.libres-caja > summary::-webkit-details-marker{display:none}
.libres-caja > summary::after{content:'▾'; margin-left:auto; font-size:1.1rem}
.libres-caja[open] > summary::after{content:'▴'}
.libres-caja > summary:hover{background:#f7f8fa}
.libres-caja .lb-n{background:var(--negro); color:#fff; border-radius:20px; min-width:26px;
  height:26px; display:grid; place-items:center; font-size:.82rem; font-weight:700; padding:0 .4rem}
.libres-caja .visita-campo{margin:0 .7rem .7rem; box-shadow:none}