:root{
  --azul:#37474F; --rojo:#78909C; --gris:#7f8c8d;
  --linea:#e3e6ec; --fondo:#f6f7f9;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
     color:#1c2330;background:var(--fondo)}
.barra{display:flex;justify-content:space-between;align-items:center;
       background:var(--azul);color:#fff;padding:10px 18px}
.marca{color:#fff;text-decoration:none;font-weight:600}
.salir{display:flex;gap:10px;align-items:center;margin:0}
.quien{opacity:.85;font-size:13px}
.enlace{background:none;border:none;color:#fff;text-decoration:underline;cursor:pointer;font-size:13px}
main{max-width:1180px;margin:22px auto;padding:0 18px}
h1{font-size:22px;color:var(--azul);margin:0 0 6px}
h2{font-size:17px;color:var(--azul);margin:0 0 10px}
h3{font-size:14px;color:var(--azul);margin:18px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.apunte{color:var(--gris);font-size:13px;margin:4px 0}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:16px;margin-bottom:16px}
.angosta{max-width:420px;margin:60px auto}
.enlace-tarjeta{display:block;text-decoration:none;color:inherit}
.enlace-tarjeta:hover{border-color:var(--azul)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.columnas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.columnas{grid-template-columns:1fr}}
.encabezado{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.boton{background:var(--azul);color:#fff;border:none;border-radius:6px;padding:9px 14px;
       cursor:pointer;font-size:14px;text-decoration:none;display:inline-block}
.boton.chico{padding:6px 10px;font-size:13px}
label{display:block;margin:10px 0;font-size:13px;color:var(--gris)}
input,textarea{width:100%;padding:8px;border:1px solid var(--linea);border-radius:6px;
               font:inherit;margin-top:4px}
.filtros{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.filtros .buscador{ margin:0; flex:1 1 160px; }
.filtros .buscador.chico{ flex:0 1 120px; }
.anotacion.interna{ border-left:3px solid #A9793C; }
.total{ font-size:26px; font-weight:600; margin:6px 0 2px; }
.buscador{margin-bottom:10px}
.pestanas{display:flex;gap:4px;margin:8px 0 6px;border-bottom:2px solid var(--linea)}
.pestanas a{padding:7px 14px;text-decoration:none;color:var(--gris);font-weight:600;font-size:14px;
            border-bottom:2px solid transparent;margin-bottom:-2px}
.pestanas a.activa{color:var(--azul);border-bottom-color:var(--azul)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:10px 0 4px}
.kpi{background:#fff;border:1px solid var(--linea);border-top:3px solid var(--azul);border-radius:8px;padding:12px 14px}
.kpi .v{font-size:26px;font-weight:600;color:#1c2330;line-height:1.1}
.kpi .l{font-size:12px;color:var(--gris);margin-top:4px}
.barras{display:grid;grid-template-columns:max-content 1fr max-content;gap:4px 10px;align-items:center;font-size:13px}
.barras .b{height:14px;background:#e3e6ec;border-radius:3px;overflow:hidden}
.barras .b i{display:block;height:100%;background:var(--azul)}
.barras .b i.ok{background:#1d6b34}
.barras .n{color:var(--gris);text-align:right;white-space:nowrap}
.mapa-grande{height:460px;border-radius:8px;border:1px solid var(--linea)}
.leyenda-mapa{display:flex;gap:14px;font-size:13px;color:var(--gris);margin-top:6px;flex-wrap:wrap}
.leyenda-mapa i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.qc td:first-child{width:60%}
.conclusion{background:#f4f6fb;border-left:3px solid var(--azul);padding:10px 12px;margin-top:10px;font-size:14px}
.tabla{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linea);
       border-radius:8px;overflow:hidden;font-size:14px}
.tabla th,.tabla td{padding:8px 10px;border-bottom:1px solid var(--linea);text-align:left}
.tabla thead th{background:#eef1f6;color:var(--azul);font-size:12px;text-transform:uppercase}
.tabla tbody tr{cursor:pointer}
.tabla tbody tr:hover{background:#f2f6ff}
.respuestas tbody tr{cursor:default}
.respuestas th{width:52%;font-weight:500;color:#2b3446}
.grupo td{background:#eef1f6;color:var(--azul);font-weight:600;font-size:13px}
.resumen{width:100%;border-collapse:collapse;font-size:14px}
.resumen th{text-align:left;width:45%;font-weight:500;color:var(--gris);
            padding:5px 0;vertical-align:top}
.resumen td{padding:5px 0}
.etiqueta{display:inline-block;padding:2px 8px;border-radius:11px;font-size:12px;font-weight:600}
.etiqueta.aprobada{background:#e4f4e8;color:#1d6b34}
.etiqueta.pendiente{background:#fdf2dc;color:#8a6100}
.etiqueta.cancelada{background:#fbe4e7;color:#a01123}
.conteos{list-style:none;padding:0;margin:8px 0;display:flex;gap:10px;flex-wrap:wrap;font-size:13px}
.nota-ngr{background:#f4f6fb;border-left:3px solid var(--azul);padding:8px 10px;margin:6px 0}
.candado{border-top:1px dashed var(--linea);padding-top:8px;margin-top:12px}
.anotacion{border:1px solid var(--linea);border-radius:6px;padding:8px 10px;margin:6px 0;background:#fcfcfd}
.firma{color:var(--gris);font-size:12px;margin-bottom:3px}
.historial{font-size:13px;padding-left:18px}
.historial li{margin-bottom:8px}
.alerta{background:#fbe4e7;color:#a01123;padding:9px 11px;border-radius:6px}
.ok{background:#e4f4e8;color:#1d6b34;padding:9px 11px;border-radius:6px}
.mapa{height:320px;border-radius:6px}
audio{width:100%}
.volver{color:var(--azul);text-decoration:none;font-size:13px}
.pie{max-width:1180px;margin:20px auto 40px;padding:0 18px;color:var(--gris);font-size:12px}