/* ESTILO DEL PANEL DE MEDIATEC.
   Sale del panel de Lanzadera (su estilo.css, maqueta v2 aprobada el 6-ago-2026):
   misma rejilla y los mismos relojes.

   🎨 17-sep-2026, Aram: «se parece mucho al de lanzadera» — con los dos abiertos en
   pestañas vecinas no se sabía en cuál estabas. La PALETA ya no es la de allí: es la
   de la app de las tiendas (frontend/css/estilo.css), granate y naranja, con el
   lateral en el negro de su cabecera y los mismos emojis de icono. El verde, el
   ámbar y el rojo de los estados NO cambian: dicen bien/ojo/mal, no la marca, y el
   rojo de peligro es más vivo que el granate para que «Cancelar» no parezca «Entrar».

   🔴 LO QUE CAMBIA RESPECTO A ALLÍ: aquí la CSP es style-src 'self', sin
   'unsafe-inline'. Todo lo que allí iba en style="" es aquí una clase, y lo único
   dinámico (el arco y la aguja de los relojes) lo pone panel.js por el CSSOM. */

:root{
 --bg:#F5F4F2; --s1:#EDECE9; --s2:#FFFFFF; --bd:#DDDCD9; --bdF:#C9C7C3;
 --tx:#1A1918; --tx2:#63615C; --tx3:#8F8D88;
 --acBg:#F9EEF1; --acBd:#E3B7C4; --acTx:#6B1530; --acTx2:#8B1F40; --acFill:#6B1530;
 /* Los de la app de las tiendas, con su nombre de allí. */
 --campoamor:#6B1530; --campoamor-claro:#8B1F40; --dorado:#F08C14; --negro:#1A0A0D;
 --peligro:#C0392B;
 --rjBg:#FBEBEB; --rjBd:#E9B9B9; --rjTx:#A32D2D; --rjTx2:#501313;
 --vdBg:#E9F4EC; --vdBd:#B6DCC3; --vdTx:#1F6B3A;
 --amBg:#FAEEDA; --amBd:#BA7517; --amTx:#412402; --amTx2:#854F0B;
 --r:8px;
 --lat:240px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
 margin:0;background:var(--bg);color:var(--tx);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
 font-size:15px;line-height:1.5;
 /* EL DOCUMENTO NO SCROLLEA: cada columna scrollea por dentro. */
 overflow:hidden;
}
button{font-family:inherit;background:transparent;border:1px solid var(--bdF);border-radius:var(--r);
 padding:7px 12px;color:var(--tx);cursor:pointer;font-size:14px;transition:transform .07s ease}
button:hover{filter:brightness(0.97)}
button:active{transform:scale(0.98)}
button:disabled{opacity:.4;cursor:default}
button.pequeno{padding:4px 9px;font-size:12px}
input{font-family:inherit;font-size:14px;padding:8px 10px;
 border:1px solid var(--bdF);border-radius:var(--r);background:var(--s2);color:var(--tx)}
.acento{background:var(--acFill);color:#fff;border:none;font-weight:500}
.acento:hover{background:var(--campoamor-claro);filter:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--campoamor);box-shadow:0 0 0 3px var(--acBg)}
.grande{width:100%;height:46px;font-size:16px}
code{font-size:13px}

/* ---- La rejilla -------------------------------------------------------- */
#panel{display:grid;grid-template-columns:var(--lat) minmax(0,1fr);grid-template-rows:100%;height:100%}
#lateral,#centro{min-height:0}

/* El lateral es la cabecera de la app de las tiendas puesta de pie: el mismo negro,
   el blanco a medias para lo que no está elegido y el naranja marcando dónde estás. */
#lateral{background:var(--negro);color:#fff;display:flex;flex-direction:column}
.marca{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.marca img{width:32px;height:32px;flex:none}
.marca b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.marca span{display:block;font-size:11px;color:rgba(255,255,255,.45)}
#menu{flex:1;padding:8px;min-height:0;overflow-y:auto}
.mnu{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:7px;
 padding:10px 12px;margin-bottom:2px;font-size:14px;background:transparent;color:rgba(255,255,255,.6)}
.mnu:hover{background:rgba(255,255,255,.1);color:#fff;filter:none}
.mnu .ico{width:20px;text-align:center;font-size:16px}
.mnu.on{background:rgba(255,255,255,.16);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--dorado)}
#quienSoy{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(255,255,255,.6);
 display:flex;align-items:center;justify-content:space-between;gap:8px}
#quienSoy b{color:#fff;font-weight:500}
#quienSoy button{color:#fff;border:0;background:rgba(255,255,255,.1)}
#quienSoy button:hover{background:rgba(255,255,255,.2);filter:none}

#centro{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
/* La franja naranja de arriba es la de libreriascampoamor.com. */
.cab{display:flex;align-items:baseline;gap:14px;padding:16px 24px 12px;border-bottom:1px solid var(--bd);background:var(--s2);
 border-top:3px solid var(--dorado)}
.cab h1{color:var(--campoamor)}
.cab h1{font-size:19px;font-weight:600;margin:0}
.cab .pista{font-size:13px;color:var(--tx2)}
.cab .der{margin-left:auto;font-size:13px;color:var(--tx3)}
#lienzo{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 40px}
.seccion{display:none}
.seccion.on{display:block}

/* ---- Piezas comunes ---------------------------------------------------- */
.caja{background:var(--s2);border:1px solid var(--bd);border-radius:12px;padding:16px}
.caja.vacia{color:var(--tx3)}
.rot{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin:0 0 10px}
.rot.sub{margin-top:14px}
.nota{font-size:12px;color:var(--tx3);margin-top:8px}
.separa{margin-bottom:22px}
.separaArriba{margin-top:22px}
.rejilla3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rejilla2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fila{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--bd);font-size:14px}
.fila:last-child{border-bottom:0}
.fila .k{color:var(--tx2)}
.fila .v{font-variant-numeric:tabular-nums;text-align:right}
.fila .v.malo{color:var(--rjTx)}
.fila .v.flojo{color:var(--amTx2)}
.am{background:var(--amBg);border:1px solid var(--amBd);border-radius:var(--r);padding:11px 13px;font-size:13px;color:var(--amTx);margin-bottom:10px}
.rj{background:var(--rjBg);border:1px solid var(--rjBd);border-radius:var(--r);padding:11px 13px;font-size:13px;color:var(--rjTx2);margin-bottom:10px}
.chip{font-size:12px;padding:3px 9px;border-radius:20px;white-space:nowrap}
.chipVd{background:var(--vdBg);color:var(--vdTx)}
.chipRj{background:var(--rjBg);color:var(--rjTx)}
.chipAm{background:var(--amBg);color:var(--amTx2)}
.chipGr{background:var(--s1);color:var(--tx3)}

/* ---- El veredicto ------------------------------------------------------
   UNA frase grande que se lee de pie, y debajo el contexto en gris. TRES estados:
   el ámbar separa «hay que mirarlo hoy» de «está roto AHORA». */
#veredicto{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:12px;margin-bottom:20px;
 border:1px solid var(--vdBd);background:var(--vdBg)}
#veredicto.mal{border-color:var(--rjBd);background:var(--rjBg)}
#veredicto.ojo{border-color:var(--amBd);background:var(--amBg)}
#veredicto .cara{font-size:34px;line-height:1}
#veredicto .txt b{display:block;font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--vdTx)}
#veredicto.mal .txt b{color:var(--rjTx)}
#veredicto.ojo .txt b{color:var(--amTx)}
#veredicto .txt span{display:block;font-size:13px;color:var(--tx2)}
#veredicto .der{margin-left:auto;text-align:right;font-size:12px;color:var(--tx2);white-space:nowrap}
#veredicto .der .roja{color:var(--rjTx)}
#veredicto .pliega{margin-left:12px;flex:none;background:transparent;border:0;cursor:pointer;
 font-size:20px;line-height:1;color:var(--tx2);padding:2px 6px;border-radius:var(--r)}
#veredicto .pliega:hover{background:rgba(0,0,0,.06)}
#veredicto:not(.mal):not(.ojo) .pliega{display:none}
#veredicto.plegado{padding:8px 14px;gap:10px;margin-bottom:12px}
#veredicto.plegado .cara{font-size:16px}
#veredicto.plegado .txt b{font-size:14px}
#veredicto.plegado .txt span,#veredicto.plegado .der{display:none}
#veredicto.plegado .pliega{margin-left:auto}

/* ---- Los relojes -------------------------------------------------------
   Semicírculo con aguja, SVG a pelo. El arco y la aguja son lo único que se
   mueve, y lo mueve panel.js por el CSSOM; aquí solo el deslizamiento. */
.medidores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
 margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--bd)}
.medidor{text-align:center}
.medidor svg{display:block;margin:0 auto;width:100%;max-width:150px;height:auto}
.medidor .fondo{fill:none;stroke:var(--bd);stroke-width:11;stroke-linecap:round}
.medidor .arco{fill:none;stroke-width:11;stroke-linecap:round;stroke:var(--vdTx)}
.medidor .aguja{stroke:var(--tx);stroke-width:2.5;stroke-linecap:round}
.medidor .eje{fill:var(--tx)}
.medidor .arco,.medidor .aguja{transition:stroke-dashoffset .45s ease,transform .45s ease}
/* Giro alrededor del centro del semicírculo, en coordenadas del viewBox. */
.medidor .aguja{transform-box:view-box;transform-origin:80px 74px}
@media (prefers-reduced-motion:reduce){.medidor .arco,.medidor .aguja{transition:none}}
.medidor .cifra{font-size:24px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:-8px}
.medidor .detalle{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.medidor .eti{font-size:12px;color:var(--tx2);margin-top:3px}
.medidor.nivelVd .arco{stroke:var(--vdTx)} .medidor.nivelVd .cifra{color:var(--vdTx)}
.medidor.nivelAm .arco{stroke:var(--amBd)} .medidor.nivelAm .cifra{color:var(--amTx2)}
.medidor.nivelRj .arco{stroke:var(--rjTx)} .medidor.nivelRj .cifra{color:var(--rjTx)}
.medidor.sinDato .cifra{color:var(--tx3)}
/* Un pulso viejo NO se pinta como una aguja quieta y sana: se apaga y lo dice. */
.medidores.viejo{opacity:.45}

.servicio{background:var(--s2);border:1px solid var(--bd);border-radius:12px;padding:14px}
.servicio .nom{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.servicio .nom b{font-size:15px;font-weight:500}
.servicio .dato{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--tx2);padding:2px 0}
.servicio .dato span:last-child{color:var(--tx);font-variant-numeric:tabular-nums;text-align:right}

details summary{cursor:pointer;font-size:13px;color:var(--tx2)}
details summary b{color:var(--rjTx)}
details .caja{margin-top:10px}

/* ---- Operativa: tablas, filtros y cancelar ----------------------------- */
.chipAc{background:var(--acBg);color:var(--acTx)}
.vd{background:var(--vdBg);border:1px solid var(--vdBd);border-radius:var(--r);padding:11px 13px;font-size:13px;color:var(--vdTx);margin-bottom:10px}
.nota.sinMargen{margin-top:0}
select,textarea{font-family:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--bdF);border-radius:var(--r);background:var(--s2);color:var(--tx)}
textarea{width:100%;resize:vertical}
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.filtros label{font-size:13px;color:var(--tx2);display:flex;align-items:center;gap:6px}
/* La tabla scrollea de lado dentro de su caja; la página no. */
.tablaCaja{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{text-align:left;font-weight:500;color:var(--tx2);padding:6px 8px;border-bottom:1px solid var(--bdF);white-space:nowrap}
.tabla td{padding:6px 8px;border-bottom:1px solid var(--bd);vertical-align:top}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .corta{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla tr.pulsable{cursor:pointer}
.tabla tr.pulsable:hover td{background:var(--s1)}
.tabla tr.on td{background:var(--acBg)}
button.enlace{border:0;padding:0;background:none;color:var(--acTx2);font-size:inherit;text-decoration:underline}
.cabDetalle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cabDetalle b{font-size:17px;font-weight:500;margin-right:6px}
.tiempo{list-style:none;margin:0;padding:0;font-size:13px}
.tiempo li{padding:4px 0 4px 12px;border-left:2px solid var(--bd)}
.tiempo li.ojo{border-left-color:var(--amBd)}
.tiempo li.mal{border-left-color:var(--rjTx);color:var(--rjTx)}
.tiempo .cuando{display:block;font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.cancelar{max-width:640px}
.casilla{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0 2px}
button.peligro{background:var(--peligro);color:#fff;border:none;font-weight:500;margin-top:10px}

/* ---- Gestos ------------------------------------------------------------ */
.gesto{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--bd)}
.gesto:last-child{border-bottom:0}
.gesto .gTexto{min-width:0}
.gesto .gTexto b{font-weight:500;font-size:14px}
.gesto .gAccion{flex:none;text-align:right;max-width:45%}
pre.log{margin:12px 0 0;max-height:420px;overflow:auto;background:var(--tx);color:#E8E6E1;border-radius:var(--r);
 padding:10px 12px;font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word}

/* ---- Personas y Registro ---------------------------------------------- */
.formPersona .filtros input{min-width:0}
.tabla tr.apagada td{color:var(--tx3)}
.clave{display:flex;align-items:center;gap:12px;margin:8px 0}
.clave code{font-size:20px;letter-spacing:1px;background:var(--s2);border:1px solid var(--vdBd);border-radius:var(--r);
 padding:4px 10px;user-select:all;color:var(--tx)}
.tabla.registro td.fecha{white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla.registro .par{display:inline-block;margin-right:10px;font-size:12px;color:var(--tx2)}
.tabla.registro .motivo{margin-bottom:2px}
.nota.rjTexto{color:var(--rjTx)}
.nota.vdTexto{color:var(--vdTx)}

/* ---- Entrada ----------------------------------------------------------- */
#entrada{position:fixed;inset:0;background:var(--negro);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
#entrada .tarjeta{width:400px;max-width:100%;background:var(--s2);border-radius:16px;padding:30px 28px;
 box-shadow:0 8px 32px rgba(0,0,0,.3);border-top:4px solid var(--dorado)}
#entrada .logoEntrada{display:block;width:52px;height:52px;margin:0 auto 12px}
#entrada h2{margin:0 0 4px;font-size:20px;font-weight:600;text-align:center;color:var(--campoamor)}
#entrada .sub{font-size:13px;color:var(--tx2);margin-bottom:18px;text-align:center}
#entrada .pieNota{font-size:12px;color:var(--tx3);margin-top:12px}
.campo{margin-bottom:10px}
.campo label{display:block;font-size:13px;color:var(--tx2);margin-bottom:4px}
.campo input{width:100%}
#eCodigo{font-size:20px;letter-spacing:6px;text-align:center}

/* ---- Media pantalla: se va soltando lo menos útil, sin rediseñar -------- */
@media (max-width:1150px){
 :root{--lat:60px}
 .marca{padding:12px 0;justify-content:center}
 .marca div{display:none}
 #menu{padding:8px 6px}
 .mnu{justify-content:center;padding:11px 0;gap:0}
 .mnu .ico{font-size:18px}
 .mnu .texto{display:none}
 #quienSoy{flex-direction:column;padding:10px 4px;gap:6px}
 #quienSoy .quienTexto{display:none}
 .cab{padding:14px 16px 10px}
 .cab .pista{display:none}
 #lienzo{padding:16px 16px 32px}
}
@media (max-width:1000px){
 .rejilla3,.rejilla2{grid-template-columns:minmax(0,1fr)}
 .cab .der{display:none}
 #veredicto .der{display:none}
}