:root{
  --warm-100:#F7F5EF; --warm-200:#EFEBE0;
  --n25:#FBFCFD; --n50:#F7F9FC; --n100:#F1F4F8; --n200:#E5E9F0; --n300:#CBD5E1;
  --n400:#94A3B8; --n500:#64748B; --n600:#475569; --n700:#334155; --n800:#1E293B; --n900:#0F172A;
  --brand:#1B3FA0; --brand-strong:#14307B; --brand-soft:#E8EEFB;
  --accent:#3D6CF5; --accent-strong:#2C56D9; --accent-soft:#EAF0FE;
  --ok:#16A34A; --ok-soft:#E7F6EC; --warn:#F59E0B; --warn-soft:#FEF3DC;
  --dang:#DC2626; --dang-soft:#FCE8E8; --info:#0EA5E9; --info-soft:#E1F4FC;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(15,23,42,.04);
  --sh-sm:0 2px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 6px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --sans:'Google Sans Flex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--warm-100);color:var(--n700);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent-strong);text-decoration:none}
a:hover{color:var(--brand-strong)}
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100%}
.side{background:#fff;border-right:1px solid var(--n200);display:flex;flex-direction:column;padding:18px 0}
.brand{display:flex;align-items:center;gap:9px;padding:0 18px 18px}
.brand .mk{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--n900)}
.brand .mk em{font-style:normal;color:var(--accent)}
.side h6{margin:16px 18px 6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--n400)}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--n600);font-size:13.5px;font-weight:500;cursor:pointer}
.nav a:hover{background:var(--n50);color:var(--n900)}
.nav a.on{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.nav a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--n400)}
.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:14px;height:56px;padding:0 24px;background:#fff;border-bottom:1px solid var(--n200);flex:none}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--n500)}
.crumb b{color:var(--n900);font-weight:600}
.crumb span{color:var(--n300)}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;width:280px;height:34px;padding:0 11px;border:1px solid var(--n200);border-radius:var(--r-sm);color:var(--n400);font-size:13px;background:var(--n25)}
.avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.body{padding:24px;overflow:hidden;flex:1;min-height:0}
.ph{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px}
.ph h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--n900)}
.ph p{margin:2px 0 0;font-size:13.5px;color:var(--n500)}
.ph .acts{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1px solid var(--n200);background:#fff;color:var(--n700);cursor:pointer}
.btn:hover{background:var(--n50)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent-strong)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card{background:#fff;border:1px solid var(--n200);border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.card>header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--n100)}
.card>header h3{margin:0;font-size:14.5px;font-weight:700;color:var(--n900);letter-spacing:-.01em}
.card>header .mini{margin-left:auto;font-size:12.5px;color:var(--n500)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--n200);border-radius:var(--r-md);box-shadow:var(--sh-xs);padding:14px 16px}
.kpi .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--n400)}
.kpi .val{font-family:var(--mono);font-size:27px;font-weight:600;color:var(--n900);letter-spacing:-.02em;line-height:1.2;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .dl{font-size:12.5px;color:var(--n500);margin-top:3px}
.kpi .dl b{font-weight:600}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n400);text-align:left;padding:9px 16px;background:var(--n25);border-bottom:1px solid var(--n200);white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid var(--n100);color:var(--n600);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--n25)}
td b,th.num{color:var(--n900);font-weight:600}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:var(--r-full);font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.t-ok{background:var(--ok-soft);color:#0F6E56}
.t-warn{background:var(--warn-soft);color:#854F0B}
.t-dang{background:var(--dang-soft);color:#7A1F26}
.t-acc{background:var(--accent-soft);color:var(--accent-strong)}
.t-mut{background:var(--n100);color:var(--n600)}
.bar{height:6px;border-radius:var(--r-full);background:var(--n100);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-full)}
.dot{width:7px;height:7px;border-radius:var(--r-full);display:inline-block;flex:none}

/* ------------------------------------------------------------------
   Añadidos de la aplicación (la parte de arriba son los tokens del DS
   de Afer, idénticos a los de la maqueta).
   ------------------------------------------------------------------ */
html,body{height:100%}
.app{min-height:100vh}
.body{overflow:auto}
.side{position:sticky;top:0;height:100vh}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--n900);background:#fff;border:1px solid var(--n200);border-radius:var(--r-sm);height:38px;padding:0 11px;width:100%}
textarea{height:auto;padding:9px 11px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,108,245,.25)}
label.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--n700);margin-bottom:6px}
button.btn{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.aviso{border-radius:var(--r-sm);padding:10px 13px;font-size:13.5px;margin-bottom:14px}
.aviso-error{background:var(--dang-soft);color:#7A1F26}
.aviso-ok{background:var(--ok-soft);color:#0F6E56}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 560px}
.login-side{background:var(--brand);color:#fff;padding:56px 64px;display:flex;flex-direction:column}
.login-form{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 72px}
@media (max-width:900px){
  .login-wrap{grid-template-columns:minmax(0,1fr)}
  .login-side{display:none}
  .login-form{padding:0 24px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------------
   TABLA EDITABLE

   La tabla se edita en el sitio: cada celda es su control, del tipo que
   sea la columna. Los bordes los pone la celda, no el input, para que al
   escribir no salte nada de sitio.
   ------------------------------------------------------------------ */
.tb{border:1px solid var(--n200);border-radius:var(--r-md);background:#fff;overflow:hidden;margin:16px 0 0}
.tb-scroll{overflow-x:auto}
.tb-tabla{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;min-width:0}
.tb-tabla th{padding:0;background:var(--n25);border-bottom:1px solid var(--n200);border-right:1px solid var(--n100);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--n700);white-space:nowrap;vertical-align:middle}
.tb-tabla td{padding:0;border-bottom:1px solid var(--n100);border-right:1px solid var(--n100);vertical-align:middle}
.tb-tabla tr:last-child td{border-bottom:0}
.tb-tabla tbody tr:hover td{background:var(--n25)}
.tb-th-num,.tb-num{width:38px;min-width:38px;text-align:center;color:var(--n400);background:var(--n25)}
.tb-num{position:relative;font-family:var(--mono);font-size:11.5px}
.tb-num-n{display:inline-block;padding:7px 0}
.tb-tabla tbody tr:hover .tb-num-n{opacity:0}
.tb-menu-fila{position:absolute;inset:0;display:none}
.tb-tabla tbody tr:hover .tb-menu-fila{display:block}
.tb-menu-fila>summary{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--n400)}
.tb-th-mas{width:38px;min-width:38px;text-align:center}
.tb-relleno{border-right:0}
.tb-menu{position:relative}
.tb-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 10px;user-select:none}
.tb-menu>summary::-webkit-details-marker{display:none}
.tb-menu>summary:hover{background:var(--n100)}
.tb-menu[open]>summary{background:var(--n100)}
.tb-tipo svg{width:13px;height:13px;stroke:var(--n400);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.tb-titulo{flex:1;overflow:hidden;text-overflow:ellipsis}
.tb-menu-nueva>summary{justify-content:center;font-size:16px;color:var(--n400);padding:8px 0}
.tb-panel{position:absolute;top:100%;left:0;z-index:40;width:250px;background:#fff;border:1px solid var(--n200);border-radius:var(--r-md);box-shadow:var(--sh-lg,0 16px 32px rgba(15,23,42,.12));padding:12px;text-align:left;white-space:normal;font-weight:400}
.tb-panel-fila{width:170px;display:flex;flex-direction:column;gap:6px}
.tb-panel-fila .btn{width:100%;justify-content:center;height:30px;font-size:12.5px}
.tb-panel-acciones{display:flex;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--n100)}
.tb-panel-acciones .btn{height:29px;font-size:12px;padding:0 9px}
.tb-panel input,.tb-panel select,.tb-panel textarea{height:32px;font-size:12.5px}
.tb-panel textarea{height:auto}
.tb-in{border:0;border-radius:0;height:34px;padding:0 10px;font-size:13.5px;background:transparent;width:100%}
.tb-in:focus{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none;background:#fff;position:relative;z-index:2}
.tb-celda-numero .tb-in{text-align:right;font-family:var(--mono);font-size:12.5px}
.tb-celda-fecha .tb-in{font-family:var(--mono);font-size:12.5px}
.tb-celda-checkbox{text-align:center}
.tb-check{display:flex;align-items:center;justify-content:center;height:34px;cursor:pointer}
.tb-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.tb-sel{cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.tb-enlace{display:flex;align-items:center;min-width:220px}
.tb-enlace-url{flex:1.2;color:var(--accent-strong)}
.tb-enlace-texto{flex:1;border-left:1px dashed var(--n200)}
.tb-abrir{padding:0 9px;color:var(--accent-strong);text-decoration:none}
.tb-archivo{display:flex;align-items:center;gap:7px;padding:5px 9px;min-width:190px}
.tb-archivo a{display:flex;align-items:center;gap:6px;min-width:0;color:var(--n900);font-weight:500}
.tb-archivo a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.tb-archivo svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tb-archivo-peso{font-size:11px;color:var(--n400);font-family:var(--mono);margin-left:auto;white-space:nowrap}
.tb-archivo-quitar{background:none;border:0;color:var(--n400);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.tb-archivo-quitar:hover{color:var(--dang)}
.tb-subir{display:flex;align-items:center;height:34px;padding:0 10px;color:var(--n400);cursor:pointer;font-size:12.5px}
.tb-subir:hover{color:var(--accent-strong)}
.tb-pie{display:flex;align-items:center;gap:12px;padding:8px 10px;border-top:1px solid var(--n100);background:var(--n25)}
.tb-fila-nueva{background:none;border:0;color:var(--n500);font-size:12.5px;font-family:inherit;cursor:pointer;padding:4px 6px;border-radius:var(--r-xs)}
.tb-fila-nueva:hover{background:var(--n100);color:var(--n900)}
.tb-estado{margin-left:auto;font-size:11.5px;color:var(--n400)}
.tb-estado.error{color:var(--dang)}
.tb.guardando{opacity:.7}

/* Lectura: la misma tabla sin controles */
.tb-ver{border:1px solid var(--n200);border-radius:var(--r-md);overflow:auto;margin:16px 0 0}
.tb-ver table{min-width:100%}
.tb-ver td .celda-enlace{color:var(--accent-strong)}
.tb-ver .celda-archivo{display:inline-flex;align-items:center;gap:6px;color:var(--n900);font-weight:500}
.tb-ver .celda-archivo svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-ver .celda-num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------
   AUDITORÍAS

   El formulario lo rellena gente que está trabajando: letra grande,
   opciones que se pulsan sin apuntar y una pregunta detrás de otra sin
   adornos.
   ------------------------------------------------------------------ */
.au-pregunta{padding:20px 0;border-top:1px solid var(--n100)}
.au-pregunta:first-child{border-top:0;padding-top:4px}
.au-texto{font-size:16px;font-weight:600;color:var(--n900);line-height:1.45}
.au-ayuda{font-size:13.5px;color:var(--n500);margin-top:5px;line-height:1.5}
.au-opciones{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.au-opciones-fila{flex-direction:row;gap:10px}
.au-opcion{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--n200);border-radius:var(--r-sm);cursor:pointer;font-size:14.5px;color:var(--n700);background:#fff;min-height:44px}
.au-opcion:hover{border-color:var(--accent);background:var(--accent-soft)}
.au-opcion input{width:17px;height:17px;accent-color:var(--accent);flex:none;margin:0}
.au-opcion:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--n900);font-weight:500}
.au-escala{display:flex;gap:5px;margin-top:13px;flex-wrap:wrap}
.au-punto{flex:1;min-width:44px}
.au-punto input{position:absolute;opacity:0;width:0;height:0}
.au-punto span{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--n200);border-radius:var(--r-sm);font-size:14px;font-family:var(--mono);color:var(--n600);cursor:pointer;background:#fff}
.au-punto span:hover{border-color:var(--accent);color:var(--accent-strong)}
.au-punto input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.au-punto input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.au-escala-pies{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--n400)}
.au-numero{display:flex;align-items:center;gap:9px;margin-top:13px}
.au-numero input{width:130px;height:44px;font-size:16px}
.au-numero span{font-size:14px;color:var(--n500)}
.au-pregunta textarea{margin-top:13px;font-size:15px}
.au-banco{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--n100)}
.au-banco:hover{background:var(--n25)}
.au-banco input{width:17px;height:17px;accent-color:var(--accent);margin-top:2px;flex:none}
.au-banco.puesta{opacity:.5}