:root{
  --fondo:#0e1116; --panel:#161b23; --borde:#262e3a; --texto:#e6edf5;
  --tenue:#8b98ab; --acento:#ff7a29;
  --critica:#ff3c3c; --relevante:#ffaa28; --anomalia:#ffe75a; --ok:#3ddc84;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;border-bottom:1px solid var(--borde);background:#11151c;
  position:sticky;top:0;z-index:5;flex-wrap:wrap;gap:10px}
.marca{font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:9px}
.punto{width:9px;height:9px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 10px var(--acento)}
.backends{font-size:12px;color:var(--tenue);display:flex;gap:14px;flex-wrap:wrap}
.backends b{color:var(--texto);font-weight:500}
.aviso{color:var(--relevante)}
main{max-width:1280px;margin:0 auto;padding:22px;display:grid;gap:18px}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:18px}
h2{margin:0 0 14px;font-size:15px;font-weight:600}
h2 small{color:var(--tenue);font-weight:400;margin-left:8px;font-size:12px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.rejilla .ancho{grid-column:1/-1}
.acciones{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tenue)}
input,select,textarea{background:#0d1117;border:1px solid var(--borde);color:var(--texto);
  border-radius:7px;padding:8px 10px;font-size:13px;min-width:0;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento)}
textarea{width:100%;resize:vertical}
button,.sec{background:var(--acento);color:#10140b;border:0;border-radius:7px;
  padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer}
.sec{background:#212a36;color:var(--texto);text-decoration:none;display:inline-block}
.enlace{background:none;color:var(--acento);padding:0;font-weight:600;text-decoration:underline}
button:disabled,select:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.filtros{margin:14px 0}
.oculto{display:none}
.zona{border:2px dashed var(--borde);border-radius:10px;padding:26px;text-align:center;
  transition:.15s}
.zona.activa{border-color:var(--acento);background:#1b212b}
.zona p{margin:4px 0}
.tenue{color:var(--tenue);font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#0d1117;border:1px solid var(--borde);border-radius:9px;padding:13px}
.kpi .v{font-size:21px;font-weight:600;letter-spacing:-.4px}
.kpi .e{font-size:11px;color:var(--tenue);text-transform:uppercase;letter-spacing:.5px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start}
.tabla-caja{max-height:460px;overflow:auto;border:1px solid var(--borde);border-radius:9px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{position:sticky;top:0;background:#0d1117;text-align:left;padding:9px;
  border-bottom:1px solid var(--borde);font-weight:500;color:var(--tenue)}
td{padding:8px 9px;border-bottom:1px solid #1d232d}
tbody tr{cursor:pointer}
tbody tr:hover{background:#1b212b}
tbody tr.sel{background:#22303f}
.sev{display:inline-block;width:9px;height:9px;border-radius:50%}
.sev.critica{background:var(--critica)} .sev.relevante{background:var(--relevante)}
.sev.anomalia{background:var(--anomalia)} .sev.ninguna{background:var(--tenue)}
.visor img{width:100%;border-radius:9px;border:1px solid var(--borde);display:block}
.dict{border-radius:9px;padding:12px;margin-top:12px;font-size:13px}
.dict.ok{background:#12251a;border:1px solid #1f5136}
.dict.mal{background:#2a1416;border:1px solid #5c2226}
.dict ul{margin:7px 0 0;padding-left:18px}
.linea{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-bottom:1px solid #1d232d;font-size:12.5px}
.linea span:first-child{color:var(--tenue)}
#progreso{margin-top:12px;font-size:12.5px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
#barra .barra-interior { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 20px; }
.barra-nav { display: flex; gap: 16px; }
.barra-nav a { color: var(--tenue); text-decoration: none; transition: .15s; }
.barra-nav a:hover { color: var(--texto); }
.barra-nav a.activo { color: var(--acento); border-bottom: 2px solid var(--acento); }
.barra-usuario { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.barra-usuario small { color: var(--tenue); text-transform: uppercase; font-size: 10.5px; margin-left: 5px; }

body.pagina-acceso { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.acceso { max-width: 380px; width: 100%; margin: 0 auto; padding: 22px; text-align: center; }
.marca.grande { font-size: 22px; display: flex; justify-content: center; }
.cargando { margin-top: 30px; }
.rejilla-login { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.rejilla-login button { width: 100%; margin-top: 6px; }
.error, .exito { border-radius: 7px; padding: 10px; font-size: 12.5px; margin-top: 12px; text-align: left; }
.error { background: #3a1616; border: 1px solid var(--critica); color: #ffcfcf; }
.exito { background: #163a24; border: 1px solid var(--ok); color: #d1ffd6; }

.estado { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11px; text-transform: uppercase; font-weight: 600; border: 1px solid; }
.estado.borrador { color: var(--tenue); border-color: var(--tenue); background: rgba(139, 152, 171, 0.1); }
.estado.recibido { color: #4aa3ff; border-color: #4aa3ff; background: rgba(74, 163, 255, 0.1); }
.estado.en_proceso { color: var(--relevante); border-color: var(--relevante); background: rgba(255, 170, 40, 0.1); }
.estado.entregado { color: var(--ok); border-color: var(--ok); background: rgba(61, 220, 132, 0.1); }
.estado.cerrado { color: #9b8cff; border-color: #9b8cff; background: rgba(155, 140, 255, 0.1); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.tarjeta { background: #0d1117; border: 1px solid var(--borde); border-radius: 9px; padding: 14px; cursor: pointer; transition: .15s; }
.tarjeta:hover { border-color: var(--acento); }
.tarjeta h3 { margin: 0 0 6px; font-size: 14px; }
.tarjeta .meta { font-size: 12px; color: var(--tenue); }
.vacio { text-align: center; color: var(--tenue); padding: 30px; border: 1px dashed var(--borde); border-radius: 9px; }

.barra-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pila { display: flex; flex-direction: column; gap: 10px; }
.derecha { margin-left: auto; }
.peligro { background: var(--critica); color: #fff; border: 0; border-radius: 7px; padding: 9px 15px; font-weight: 600; cursor: pointer; }
.cargador { height: 4px; background: var(--borde); border-radius: 2px; overflow: hidden; width: 100%; }
.cargador i { display: block; height: 100%; background: var(--acento); transition: width .3s; }
.bitacora { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.bitacora li { border-bottom: 1px solid #1d232d; padding: 6px 0; }
.bitacora time { color: var(--tenue); margin-right: 8px; font-style: normal; }

.barra{flex:1;height:7px;background:#0d1117;border:1px solid var(--borde);
  border-radius:4px;overflow:hidden;margin:0 10px}
.barra i{display:block;height:100%;background:#3f5a7a;border-radius:3px}
.barra i.alta{background:var(--acento)}
.marcador-medicion{position:absolute;width:12px;height:12px;border-radius:50%;
  border:2px solid #fff;background:rgba(0,0,0,.35);transform:translate(-50%,-50%);
  pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.marcador-medicion::after{content:attr(data-etiqueta);position:absolute;left:14px;
  top:-4px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 0 3px #000}
.titulo-evidencia{margin:16px 0 8px;font-size:12px;font-weight:600;color:var(--tenue);
  text-transform:uppercase;letter-spacing:.6px;border-top:1px solid var(--borde);padding-top:12px}
.linea.tercio span:first-child{min-width:26px}
.linea.tercio span:last-child{min-width:62px;text-align:right;color:var(--texto)}

@media(max-width:700px){ .barra-interior { flex-direction: column; gap: 15px; text-align: center; } .barra-nav { justify-content: center; } }