/* Piezas propias del control de elementos, sobre estilo.css (sistema de SMN). */
body{margin:0;background:var(--bg);color:var(--tinta);font-family:var(--f-txt)}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:600;margin:0}
label{display:block;font-size:13px;color:var(--suave);margin:10px 0 4px}
input,select{font:inherit;padding:8px 10px;border:1px solid var(--linea);border-radius:7px;background:var(--sup);color:var(--tinta);width:100%}
input[type=checkbox]{width:auto}
.btn.chico{padding:5px 10px;font-size:12.5px}
.btn{text-decoration:none}
.firma-lado{font-size:11px;color:var(--tenue);padding:10px 10px 0}

body.entrar{min-height:100vh;display:grid;place-items:center;padding:16px}
.caja-entrar .marca{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:700;font-size:20px}
.caja-entrar .marca i{width:30px;height:30px;border-radius:6px;border:1.5px dashed var(--tenue);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--tenue)}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tarjeta{border:1px solid var(--linea);border-radius:9px;padding:14px;display:grid;gap:6px;background:var(--sup);color:inherit;text-decoration:none;align-content:start}
a.tarjeta:hover{border-color:var(--acento)}
.tarjeta form{display:inline}
.tarjeta a{color:inherit}
.codigo-caja{border:1px dashed var(--acento);border-radius:8px;padding:10px;display:grid;gap:4px;background:var(--acento-bg)}
.codigo{font-family:var(--f-dato);font-size:30px;letter-spacing:.12em;color:var(--acento-tx)}
.dia{display:inline-flex;align-items:center;gap:4px;margin:0;color:var(--tinta)}
.dias .chips{gap:10px}
.renglon.visto{opacity:.6}

/* mapa del punto */
.mapa-vivo{height:clamp(320px,58vh,560px);border-radius:8px;border:1px solid var(--linea);background:#1b1f1d}
.linea-tiempo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.linea-tiempo input[type=range]{flex:1 1 200px;padding:0;border:0;background:none}
.linea-tiempo output{font-family:var(--f-dato);min-width:46px}
.linea-tiempo label{margin:0}
.muestra{display:inline-block;width:10px;height:10px;border-radius:50%}
.etq-control{background:rgba(17,17,17,.78);color:#fff;border:0;box-shadow:none;font-size:11px;font-weight:600}
.etq-control::before{display:none}
.horas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.hora{border-radius:6px;padding:6px 2px;text-align:center;display:grid;gap:2px;font-size:11px;background:var(--sup2);color:var(--tenue);border:1px solid var(--linea)}
.hora b{font-family:var(--f-dato);font-weight:500;font-size:11px}
.hora.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.hora.aviso{background:var(--aviso-bg);color:var(--aviso);border-color:transparent}
.hora.mal{background:var(--mal-bg);color:var(--mal);border-color:transparent}
.ctl{display:inline-block;margin-right:12px;font-size:13px}
.ctl.no{color:var(--mal)}
.checadas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.checada{display:flex;gap:10px;align-items:center;border:1px solid var(--linea);border-radius:8px;padding:8px}
.checada img{width:64px;height:64px;object-fit:cover;border-radius:6px;display:block}
.checada > div{display:grid;gap:3px}
@media (max-width:900px){.horas{grid-template-columns:repeat(6,minmax(0,1fr))}.dos{grid-template-columns:1fr}.app{grid-template-columns:1fr}.lado{position:static;height:auto}}

/* QR del día, para la caseta */
.hoja-qr-dia main{max-width:520px;margin:24px auto;padding:16px;text-align:center;display:grid;gap:12px;justify-items:center}
.qr-grande{background:#fff;padding:16px;border-radius:8px}
@media print{.no-imprimir,.firma{display:none}.hoja-qr-dia{background:#fff;color:#000}}

/* app del elemento */
.app-elemento{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.ae-cab{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--acento);color:#fff}
.ae-marca{font-family:var(--f-disp);font-weight:700;font-size:19px}
.ae-hora{font-family:var(--f-dato);font-size:16px}
[hidden]{display:none !important}   /* un display de clase no le gana a hidden */
.ae-vista{flex:1;padding:20px 16px;display:grid;gap:14px;align-content:start;max-width:520px;width:100%;margin:0 auto}
.ae-vista h1{font-size:30px}
.ae-codigo{font-family:var(--f-dato);font-size:34px;letter-spacing:.3em;text-align:center;padding:14px}
.ae-btn{padding:18px;font-size:18px;border-radius:10px}
.ae-ficha{display:grid;gap:10px;border:1px solid var(--linea);border-radius:10px;padding:14px;background:var(--sup)}
.ae-ficha > div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ae-ficha b{font-size:17px;text-align:right}
.ae-rastreo{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:9px;background:var(--ok-bg);color:var(--ok);font-size:14px}
.punto-vivo{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;animation:latido 1.6s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(30,127,83,.5)}70%{box-shadow:0 0 0 10px rgba(30,127,83,0)}100%{box-shadow:0 0 0 0 rgba(30,127,83,0)}}
.ae-camara{padding-top:12px}
.ae-paso{font-weight:600;text-align:center}
.ae-video{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:3/4}
.ae-video video{width:100%;height:100%;object-fit:cover;display:block}
.ae-marco{position:absolute;inset:0;pointer-events:none}
.ae-marco.qr::after{content:"";position:absolute;left:18%;right:18%;top:24%;aspect-ratio:1;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.ae-marco.cara::after{content:"";position:absolute;left:20%;right:20%;top:14%;height:62%;border:3px solid #fff;border-radius:50%}
.ae-cargando{width:46px;height:46px;border-radius:50%;border:4px solid var(--linea);border-top-color:var(--acento);animation:gira .8s linear infinite;justify-self:center;margin-top:30px}
@keyframes gira{to{transform:rotate(360deg)}}
.ae-pie{text-align:center}
.firma-movil{display:none}
@media (max-width:900px){.firma-movil{display:block}.firma-lado{display:none}}
.hora.curso{background:var(--sello-bg);color:var(--sello);border-color:transparent}

/* admin: pestañas como ligas, mapa general, incidencias y editor de punto */
.sub-tabs a{padding:8px 12px;font-size:13.5px;color:var(--suave);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.sub-tabs a[aria-selected="true"]{color:var(--acento-tx);border-color:var(--acento);font-weight:600}
.mapa-general-caja{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.mapa-general-caja .mapa-vivo{height:clamp(380px,68vh,680px)}
.lista-mapa{max-height:clamp(380px,68vh,680px);overflow-y:auto}
.lista-mapa .renglon{grid-template-columns:auto minmax(0,1fr) auto;font-size:13px}
.incidencia{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--linea)}
.incidencia:first-child{border-top:0}
.inc-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inc-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inc-form input{flex:1 1 220px;width:auto}
.tarjeta details.editar{border-top:1px solid var(--linea);padding-top:8px}
.tarjeta details.editar .fila-form > div{flex-basis:130px}
.editor-dos{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px}
.editor-dos .mapa-vivo{height:clamp(360px,60vh,600px)}
.lista-controles-ed{margin:0;padding-left:22px;display:grid;gap:8px;align-content:start}
.lista-controles-ed li{display:grid;grid-template-columns:minmax(0,1fr) 64px auto auto;gap:6px;align-items:center}
.lista-controles-ed li.nota{display:list-item}
.num-control{background:#F5B700;color:#111;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;font:700 12px var(--f-txt)}
.fila-form .ancho2{flex:2 1 280px}
.btn.s[aria-pressed="true"],[aria-pressed="true"]{border-color:var(--acento);color:var(--acento-tx);background:var(--acento-bg)}
@media (max-width:900px){.mapa-general-caja,.editor-dos{grid-template-columns:1fr}}
.esquina-zona{background:#fff;border:2px solid #1F4E8C;border-radius:3px}
.plan{display:grid;gap:4px}
.plan-barra{height:8px;border-radius:4px;background:var(--sup2);border:1px solid var(--linea);overflow:hidden}
.plan-barra i{display:block;height:100%}
.plan-barra i.ok{background:var(--ok)}.plan-barra i.aviso{background:var(--aviso)}.plan-barra i.mal{background:var(--mal)}
.barras{letter-spacing:1px}
.ae-acceso{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:14px}