:root{color-scheme:light;--tinta:#1a1a1a;--suave:#4a4a4a;--tenue:#5f5f5f;--borde:#999;--borde-claro:#c8c8c8;--fondo:#d6d6d6;--papel:#fff;--gris:#efefef;--cabecera:#e4e4e4;--azul:#003366;--azul-2:#336699;--azul-3:#6699cc;--azul-s:#dbe6f1;--enlace:#0033cc;--visitado:#663399;--marca:#ffffcc;--ok:#006600;--ok-s:#e2f2e2;--warn:#7a4b00;--warn-s:#fff1c9;--err:#990000;--err-s:#f9e0e0}
*{box-sizing:border-box;border-radius:0!important}
html{background:var(--fondo)}
body{margin:0;font:15px/1.5 "Frutiger","Frutiger LT Std","Frutiger LT Pro","Univers","Segoe UI",Arial,Tahoma,Verdana,sans-serif;color:var(--tinta);background:var(--fondo)}
a{color:var(--enlace);text-decoration:underline}
a:visited{color:var(--visitado)}
a:hover{color:#cc0000}
.pagina{max-width:1320px;margin:0 auto;background:var(--papel);border-left:1px solid var(--borde);border-right:1px solid var(--borde);min-height:100vh;display:flex;flex-direction:column}
.encabezado{background:var(--azul);color:#fff;padding:18px 22px 14px;border-bottom:4px solid var(--azul-3);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.marca,.marca:visited,.marca:hover{color:#fff;text-decoration:none;font-size:30px;font-weight:700;letter-spacing:.02em}
.lema{color:#c8d7e8;font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.franja{background:var(--cabecera);border-bottom:1px solid var(--borde);padding:6px 22px;font-size:14px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.franja .fecha{color:var(--tenue)}
.franja form{margin-left:auto}
button.enlace{background:none;border:0;box-shadow:none;padding:0;color:var(--enlace);text-decoration:underline;font:inherit;cursor:pointer}
button.enlace:hover{color:#cc0000}
.columnas{display:flex;align-items:flex-start;flex:1}
.lateral{width:220px;flex:none;margin:16px 0 16px 16px;border:1px solid var(--borde);background:var(--gris)}
.caja-titulo{background:var(--azul-2);color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:6px 10px}
.lateral ul{list-style:square;margin:0;padding:10px 10px 10px 28px}
.lateral li{padding:4px 0;color:var(--azul-2)}
.lateral a{color:var(--enlace)}
.lateral a.activo{color:var(--tinta);font-weight:700;text-decoration:none;background:var(--marca);padding:0 3px}
.principal{flex:1;min-width:0;padding:16px 22px 32px}
h1{font-size:24px;font-weight:700;color:var(--azul);margin:0 0 12px;padding-bottom:4px;border-bottom:2px solid var(--azul)}
.banda .sub{margin:0 0 10px;color:var(--suave)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border:1px solid var(--borde);margin:0 0 14px}
.kpi{display:flex;flex-direction:column-reverse;padding:8px 10px;border-right:1px solid var(--borde-claro);background:var(--gris)}
.kpi:last-child{border-right:0}
.kpi .n{font-size:30px;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
.cuerpo{display:flex;flex-direction:column;gap:14px}
.card{border:1px solid var(--borde);background:var(--papel);padding:10px 12px;min-width:0}
.card>h2:first-child,.card>.cab:first-child{margin:-10px -12px 10px}
.card>h2:first-child,.card>.cab:first-child h2{margin-top:0}
.cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cabecera);border-bottom:1px solid var(--borde);padding:4px 12px}
.cab h2{margin:0;padding:0;background:none;border:0}
.cab .acciones{margin-left:auto}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--azul);background:var(--cabecera);border-bottom:1px solid var(--borde);padding:4px 12px;margin:18px 0 8px}
.card>h2:first-child{border-top:0}
.tabla{overflow-x:auto;margin:4px 0}
.tabla table{font-size:14px}
.tabla th,.tabla td{padding:5px 7px}
table{width:100%;border-collapse:collapse;border:1px solid var(--borde)}
th,td{text-align:left;padding:6px 9px;border:1px solid var(--borde-claro);vertical-align:top;overflow-wrap:break-word}
.badge.texto{white-space:normal;overflow-wrap:anywhere;max-width:100%;text-transform:none}
thead th{background:var(--azul-2);color:#fff;font-size:12px;font-weight:700;border-color:var(--azul-2);vertical-align:bottom}
tbody tr:nth-child(even) td{background:#f5f5f5}
tbody tr:hover td{background:var(--marca)}
tfoot td{font-weight:700;background:var(--cabecera);border-top:2px solid var(--borde)}
table.ficha{width:100%}
table.ficha th{width:36%;background:var(--gris);color:var(--suave);font-weight:700;font-size:14px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:"Courier New",Courier,monospace;font-size:14px;word-break:break-all}
.muted{color:var(--tenue)}
form.inline{display:inline;margin:0}
form.fila{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
form.fila input[type=file]{width:190px;font-size:11px}
.campo{margin:0 0 10px}
.campo label,.etq{display:block;font-weight:700;font-size:14px;margin-bottom:2px}
.campo label.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:15px}
input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{font:inherit;color:inherit;padding:6px 8px;border:1px solid #7f9db9;background:#fff;min-width:280px}
textarea{min-height:60px;width:100%;resize:vertical}
input[type=number]{min-width:0;width:80px;text-align:right}
input[type=file]{font:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:1px dotted var(--tinta);outline-offset:1px;background:var(--marca)}
input[type=checkbox],input[type=radio]{margin:0 3px 0 0;vertical-align:-2px}
button,a.boton{font:inherit;font-weight:700;display:inline-block;padding:6px 16px;color:var(--tinta);background:var(--cabecera);border:1px solid;border-color:#fff #707070 #707070 #fff;box-shadow:1px 1px 0 #404040;cursor:pointer;text-decoration:none;white-space:nowrap}
a.boton:visited{color:var(--tinta)}
button:hover,a.boton:hover{background:#f0f0f0;color:var(--tinta)}
button:active,a.boton:active{border-color:#707070 #fff #fff #707070;box-shadow:inset 1px 1px 0 #404040}
button:focus-visible,a:focus-visible{outline:1px dotted var(--tinta);outline-offset:2px}
button.sec,a.boton.sec{font-weight:400}
button.chico{padding:3px 10px;font-size:13px}
.filtros{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px;padding:6px;background:var(--gris);border:1px solid var(--borde-claro)}
.filtros input,.filtros select{min-width:0}
.filtros input[type=search]{min-width:220px}
.seg{display:inline-flex;gap:8px;align-items:center;padding:0 4px;border-left:1px solid var(--borde-claro)}
.seg label{display:inline-flex;align-items:center;gap:4px;font-size:14px;cursor:pointer;white-space:nowrap}
.aviso{padding:6px 10px;border:1px solid #c9b458;background:var(--marca);margin:0 0 10px}
.error{padding:6px 10px;border:1px solid var(--err);background:var(--err-s);color:var(--err);margin:0 0 10px;font-weight:700}
.paginas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--suave);margin-top:8px;font-size:14px}
.acciones{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{display:inline-block;padding:1px 6px;border:1px solid var(--borde);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--gris);color:var(--suave);white-space:nowrap}
.badge.ok{background:var(--ok-s);color:var(--ok);border-color:var(--ok)}
.badge.warn{background:var(--warn-s);color:var(--warn);border-color:#b58a1d}
.badge.err{background:var(--err-s);color:var(--err);border-color:var(--err)}
.badge.grande{font-size:16px;padding:3px 12px}
.barra{border:1px solid var(--tinta);background:var(--gris);line-height:0}
.barra svg{display:block;width:100%;height:18px}
.leyenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.chip b{font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border:1px solid var(--tinta);flex:none}
.e0{--c:#2b2b2b}.e1{--c:#555}.e2{--c:#7f7f7f}.e3{--c:#a6a6a6}.e4{--c:#404040}.e5{--c:#6a6a6a}.e6{--c:#939393}.e7{--c:#bdbdbd}
rect.e0,rect.e1,rect.e2,rect.e3,rect.e4,rect.e5,rect.e6,rect.e7{fill:var(--c);stroke:#fff;stroke-width:1}
.dot.e0,.dot.e1,.dot.e2,.dot.e3,.dot.e4,.dot.e5,.dot.e6,.dot.e7{background:var(--c)}
.medidores td{vertical-align:middle}
.medidores td:first-child{font-weight:700;width:34%}
.medidores td.num{width:110px;white-space:nowrap}
.barras{display:flex;flex-direction:column;gap:6px}
.barras .fila{display:grid;grid-template-columns:130px 1fr 56px;gap:10px;align-items:center;font-size:14px}
.barras .fila b{text-align:right;font-variant-numeric:tabular-nums}
progress{-webkit-appearance:none;appearance:none;width:100%;height:14px;border:1px solid var(--tinta);background:var(--gris);color:var(--c,#555)}
progress::-webkit-progress-bar{background:var(--gris)}
progress::-webkit-progress-value{background:var(--c,#555)}
progress::-moz-progress-bar{background:var(--c,#555)}
.buscador{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:8px;background:var(--gris);border:1px solid var(--borde-claro)}
.buscador .campo{margin:0;flex:1;min-width:220px}
.buscador input[type=search]{width:100%;min-width:0;font-size:19px;padding:8px 10px}
.qr svg{display:block;width:220px;height:220px;border:1px solid var(--borde)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.vistas td,.vistas th{padding:3px 7px}
.centro{text-align:center}
.marca-perfil{background:var(--marca);padding:0 3px}
details.plegable{border:1px solid var(--borde);margin:0 0 14px}
details.plegable>summary{cursor:pointer;font-weight:700;padding:4px 10px;background:var(--cabecera);border-bottom:1px solid transparent;list-style:none;display:flex;align-items:center;gap:8px}
details.plegable>summary::-webkit-details-marker{display:none}
details.plegable>summary::before{content:"[+]";font-family:"Courier New",monospace}
details.plegable[open]>summary{border-bottom-color:var(--borde)}
details.plegable[open]>summary::before{content:"[-]"}
details.plegable>form{padding:10px 12px}
details.subir-fila>summary{display:inline-block;list-style:none;cursor:pointer;font-weight:700;font-size:13px;padding:3px 10px;background:var(--cabecera);border:1px solid;border-color:#fff #707070 #707070 #fff;box-shadow:1px 1px 0 #404040;white-space:nowrap}
details.subir-fila>summary::-webkit-details-marker{display:none}
details.subir-fila[open]>summary{border-color:#707070 #fff #fff #707070;box-shadow:inset 1px 1px 0 #404040}
details.subir-fila>form{margin-top:6px}
.confirmar{border:2px solid var(--tinta);padding:10px 12px;max-width:560px}
button.peligro{background:#5a5a5a;color:#fff;border-color:#8a8a8a #2a2a2a #2a2a2a #8a8a8a}
button.peligro:hover{background:#3a3a3a;color:#fff}
thead th.grupo{text-align:center;border-bottom:1px solid #fff}
.permisos-tabla td.si{font-weight:700;font-size:14px}
.permisos-tabla tbody td{vertical-align:middle}
.permisos{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.permisos fieldset{flex:1 1 240px;margin:0;padding:8px 12px 2px;border:1px solid var(--borde)}
.permisos legend{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:0 4px}
.permisos label.check{align-items:flex-start}
.permisos label.check input{margin-top:2px}
.pie{border-top:1px solid var(--borde);background:var(--cabecera);color:var(--tenue);font-size:13px;text-align:center;padding:6px}
body.publico{display:flex;justify-content:center}
.acceso{width:100%;max-width:480px;padding:12vh 16px 24px}
.ventana{border:1px solid var(--azul);background:var(--papel);box-shadow:3px 3px 0 #888}
.titulo-ventana{background:var(--azul);color:#fff;font-weight:700;padding:8px 12px;font-size:16px}
.contenido-ventana{padding:22px 22px 18px}
.acceso .pie{border:0;background:none;margin-top:10px}
body.publico input[type=text],body.publico input[type=password]{width:100%;min-width:0;font-size:17px;padding:9px 10px}
body.publico .campo{margin-bottom:16px}
body.publico .campo label{font-size:15px;margin-bottom:5px}
body.publico button{margin-top:6px;font-size:16px;padding:9px 24px}
/* Alineación: controles de la misma altura, celdas centradas, números a la derecha. */
input[type=text],input[type=password],input[type=search],input[type=number],select,button,a.boton{height:34px;line-height:20px;vertical-align:middle}
a.boton{display:inline-flex;align-items:center}
button.chico{height:28px;line-height:18px}
button.enlace{height:auto;line-height:inherit;vertical-align:baseline}
body.publico input[type=text],body.publico input[type=password],body.publico button{height:auto}
tbody td{vertical-align:middle}
table.ficha th,table.ficha td{vertical-align:top}
th.num,td.num{text-align:right}
th.centro,td.centro{text-align:center}
.badge{vertical-align:middle}
.cab form.filtros{margin:0 0 0 auto;padding:0;background:none;border:0}
.cab>a.boton:only-of-type{margin-left:auto}
.filtros>a{line-height:34px}
.paginas{min-height:34px}
.campo label.check input[type=checkbox]{margin:0}
details.plegable>summary{min-height:34px}
.vistas input[type=number]{height:28px}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
@media (max-width:760px){
.pagina{border:0}
.encabezado{padding:10px 12px}
.marca,.marca:visited,.marca:hover{font-size:22px}
.lema{display:none}
.franja{padding:4px 12px}
.franja .fecha{display:none}
.columnas{flex-direction:column;align-items:stretch}
.lateral{width:auto;margin:10px 12px 0}
.lateral ul{display:flex;flex-wrap:wrap;gap:2px 16px}
.principal{padding:12px}
.grid{grid-template-columns:1fr}
table.ficha th{width:auto}
input[type=text],input[type=password],input[type=search],select{min-width:0;width:100%}
.filtros input[type=search]{min-width:0}
.seg{border-left:0;padding:0}
.kpis{grid-template-columns:1fr 1fr}
.kpi{border-bottom:1px solid var(--borde-claro)}
}