@font-face{
  font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/Sora-Variable.woff2') format('woff2-variations'),url('fonts/Sora-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations'),url('fonts/PlusJakartaSans-Variable.woff2') format('woff2');
}
:root{
  /* Marca — se mantiene el azul ROOTIX (coincide con impresiones/PDF y la landing) */
  --bg:#0c2547; --bg2:#111827; --panel:#ffffff; --ink:#211d19; --muted:#7a7267;
  --line:#e6e1d8; --brand:#004c99; --brand2:#0369a1; --accent:#0ea5e9;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --purple:#7c3aed; --pink:#db2777;
  --spark:#ee7b3d; /* acento cálido secundario — detalles puntuales, no botones primarios */
  --surface:#f6f4f0; /* fondo de página — neutro cálido, no gris-azul plano */
  --shadow:0 1px 3px rgba(33,25,15,.08),0 1px 2px rgba(33,25,15,.05);
  --shadow-md:0 8px 24px rgba(33,25,15,.10),0 2px 6px rgba(33,25,15,.06);
  --shadow-lg:0 20px 50px rgba(20,15,8,.28);

  /* Tipografía */
  --font-heading:'Sora','Segoe UI',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --text-xs:11px; --text-sm:12.5px; --text-base:14px; --text-md:15px;
  --text-lg:17px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:38px;

  /* Espaciado (base 4/8) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Radios */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-full:999px;

  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);color:var(--ink);background:var(--surface);font-size:var(--text-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
button{font-family:inherit;font-size:var(--text-base);cursor:pointer}
input,select,textarea{font-family:inherit;font-size:var(--text-base)}
a{color:var(--brand2);text-decoration:none}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Login ---------- */
.login-wrap{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#0c2547;padding:16px;animation:loginFadeIn .5s var(--ease)}
@keyframes loginFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Mosaico del logo cubriendo toda la pantalla azul, a baja opacidad (textura de marca) — la tarjeta
   blanca queda encima (z-index) y se mantiene perfectamente legible. */
.login-wrap::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:url('logo-rootix.jpg');background-repeat:repeat;background-size:420px auto;
  opacity:.12}
.login-wrap::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 40%,rgba(12,37,71,.35) 0%,rgba(8,20,40,.85) 100%)}
.login-card{position:relative;z-index:1;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px 28px;width:100%;max-width:380px;
  animation:loginFadeIn .6s var(--ease) .1s backwards}
.login-card h1{margin:0 0 2px;font-size:var(--text-xl);color:var(--brand);text-align:center}
.login-card p{margin:0 0 18px;color:var(--muted);font-size:var(--text-sm);text-align:center}
.login-logo{display:block;width:100%;max-width:320px;height:auto;margin:0 auto 18px;border-radius:10px}
.role-btn{display:flex;gap:10px;align-items:center;width:100%;border:1px solid var(--line);background:#faf9f6;
  border-radius:var(--radius-md);padding:12px 14px;margin-bottom:9px;text-align:left;transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.role-btn:hover{border-color:var(--brand2);background:#eff6ff;transform:translateY(-1px)}
.role-btn .ic{width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.role-btn b{display:block;font-family:var(--font-heading)}.role-btn small{color:var(--muted)}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--bg);color:#cbd5e1;flex:none;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:auto}
.brand{padding:16px 14px 12px;color:#fff}
.brand b{font-family:var(--font-heading);font-size:var(--text-lg);letter-spacing:.02em;display:block}
.brand small{color:#93a5c9;display:block;margin-top:6px;font-size:var(--text-xs)}
.brand-logo{display:block;width:100%;height:auto;border-radius:var(--radius-sm);background:#fff}
.nav{padding:6px}
.nav a{display:flex;gap:10px;align-items:center;color:#cbd5e1;padding:10px 12px;border-radius:var(--radius-sm);margin:2px 0;
  font-weight:500;font-size:var(--text-sm);transition:background .16s var(--ease),color .16s var(--ease),padding-left .16s var(--ease)}
.nav a:hover{background:#17325c;color:#fff;padding-left:16px}
.nav a.active{background:var(--brand);color:#fff}
.nav .ic{width:20px;text-align:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
  padding:0 var(--sp-4);position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.topbar h2{font-size:var(--text-lg);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand)}
.burger{display:none;border:none;background:none;font-size:22px;color:var(--brand)}
.content{padding:var(--sp-4);max-width:1300px;width:100%;margin:0 auto}
.usr{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--text-sm)}
.usr .av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-heading)}
.sync-ind{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:600;cursor:pointer;
  padding:5px 9px;border-radius:var(--radius-sm);white-space:nowrap;user-select:none;transition:background .16s var(--ease)}
.sync-ind:hover{background:var(--surface)}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:var(--sp-4)}
.kpis{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);animation:cardIn .4s var(--ease) backwards}
.card:hover{box-shadow:var(--shadow-md)}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.card .hd{padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;font-family:var(--font-heading);font-size:var(--text-md);
  display:flex;align-items:center;gap:8px;justify-content:space-between}
.card .bd{padding:var(--sp-4)}
.kpi{padding:18px 16px}
.kpi .lbl{color:var(--muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi .val{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:800;margin-top:5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:var(--text-xs);color:var(--muted);margin-top:2px}

/* ---------- Buttons / badges ---------- */
.btn{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:var(--radius-sm);padding:9px 16px;
  font-weight:600;font-size:var(--text-base);transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{background:var(--brand2);border-color:var(--brand2);box-shadow:0 4px 12px rgba(0,76,153,.25)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.ghost{background:#fff;color:var(--brand)}
.btn.ghost:hover{background:#eff6ff;box-shadow:none}
.btn.sm{padding:6px 11px;font-size:var(--text-sm)}
.btn.gray{background:#eeece6;border-color:#eeece6;color:#3a352e}
.btn.gray:hover{background:#e4e0d7;border-color:#e4e0d7}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.ok:hover{background:#128a3e;border-color:#128a3e;box-shadow:0 4px 12px rgba(22,163,74,.25)}
.btn.bad{background:var(--bad);border-color:var(--bad)}
.btn.bad:hover{background:#b91c1c;border-color:#b91c1c;box-shadow:0 4px 12px rgba(220,38,38,.25)}
.btn.warn{background:#d97706;border-color:#d97706}
.btn.warn:hover{background:#b45309;border-color:#b45309;box-shadow:0 4px 12px rgba(217,119,6,.25)}
.btn.purple{background:var(--purple);border-color:var(--purple)}
.btn.purple:hover{background:#6d28d9;border-color:#6d28d9;box-shadow:0 4px 12px rgba(124,58,237,.25)}
.btn.pink{background:var(--pink);border-color:var(--pink)}
.btn.pink:hover{background:#be185d;border-color:#be185d;box-shadow:0 4px 12px rgba(219,39,119,.25)}
.badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;color:#fff}
.b-B{background:var(--ok)}.b-M{background:#eab308;color:#1f2937}.b-A{background:var(--warn)}.b-E{background:var(--bad)}
.b-Critico{background:#dc2626}.b-Semicritico{background:#d97706}.b-NoCritico{background:#16a34a}
.st{display:inline-block;padding:2px 9px;border-radius:6px;font-size:var(--text-sm);font-weight:700}
.st-Planificada,.st-P{background:#dbeafe;color:#1d4ed8}
.st-Generada,.st-G{background:#ede9fe;color:#6d28d9}
.st-Programada,.st-PR{background:#fce7f3;color:#be185d}
.st-EnEjecucion,.st-A{background:#e5e7eb;color:#374151}
.st-Terminada,.st-E{background:#dcfce7;color:#15803d}
.st-Correctivo,.st-C{background:#fef3c7;color:#92400e}
.st-CT{background:#ffedd5;color:#9a3412}
.st-Pendiente{background:#ede9fe;color:#6d28d9}
.st-Aprobada{background:#dbeafe;color:#1d4ed8}
.st-Comprada{background:#fef3c7;color:#92400e}
.st-Entregada{background:#dcfce7;color:#15803d}
.st-Rechazada{background:#fee2e2;color:#991b1b}
.st-Digitada{background:#e5e7eb;color:#374151}
.st-Valorizada{background:#fef3c7;color:#92400e}
.st-Orden{background:#ffedd5;color:#9a3412}
.st-Ingreso{background:#dcfce7;color:#15803d}
.chip{display:inline-block;background:#e0f2fe;color:#075985;border-radius:6px;padding:2px 8px;font-size:var(--text-sm);margin:2px;transition:background .15s var(--ease)}
.chip.off{background:#fee2e2;color:#991b1b}
.chip.ok{background:#dcfce7;color:#15803d}

/* ---------- Table ---------- */
.tbl-wrap{overflow:auto}
/* Barra de scroll horizontal "espejo" arriba de una tabla ancha (ver Programa Personal → Carga por
   persona): el div interno solo existe para darle al wrapper el mismo ancho de contenido que la tabla real
   de abajo, así el navegador dibuja la barra; el scroll se sincroniza por JS en ambos sentidos. */
.topscroll-wrap{overflow-x:auto;overflow-y:hidden;height:16px;margin-bottom:6px}
.topscroll-wrap > div{height:1px}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table.tbl th,table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.tbl th{background:#faf9f6;color:#57503f;font-weight:700;font-family:var(--font-heading);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}
table.tbl tr{transition:background .12s var(--ease)}
table.tbl tr:hover td{background:#faf9f6}
/* Filtro por columna estilo Excel AutoFilter (componente ColumnFilter) — ícono ▾ en el header, popover con
   checkboxes de los valores únicos de esa columna. position:fixed (no absolute) para no quedar recortado
   por el overflow:auto de .tbl-wrap. */
.colfilter-btn{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;font-weight:700;padding:2px 5px;
  border-radius:4px;line-height:1;vertical-align:middle;transition:background .15s var(--ease),color .15s var(--ease)}
.colfilter-btn:hover{background:var(--line);color:#3a352e}
.colfilter-btn.active{color:#fff;background:var(--brand)}
.colfilter-pop{position:fixed;z-index:300;width:240px;max-height:320px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:8px;font-weight:400;text-transform:none;font-family:var(--font-body);letter-spacing:normal;font-size:var(--text-base);color:var(--ink)}
.colfilter-search{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px;margin-bottom:6px;font-size:var(--text-sm)}
.colfilter-list{overflow:auto;max-height:180px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0;margin-bottom:6px}
.colfilter-item{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:var(--text-sm);white-space:normal}
.colfilter-item:hover{background:var(--surface)}
.colfilter-all{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:6px}
.colfilter-ft{display:flex;justify-content:flex-end;gap:6px}
/* Secciones con contraste visual del formulario de OT Correctiva (antes las 3 eran cards blancas idénticas
   y se sentían "todas mezcladas" — cada tema ahora tiene su propio color de acento y encabezado tintado). */
.card.seccion-prioridad{border-left:4px solid #f59e0b}
.card.seccion-prioridad>.hd{background:#fffbeb;color:#92400e}
.card.seccion-falla{border-left:4px solid #3b82f6}
.card.seccion-falla>.hd{background:#eff6ff;color:#1e3a8a}
.card.seccion-causas{border-left:4px solid #a855f7}
.card.seccion-causas>.hd{background:#faf5ff;color:#6b21a8}
/* Componente CausasMultiSelect (Análisis de Causas de la OT Correctiva) */
.causas-categoria{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.causas-categoria:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.causas-categoria-hd{font-weight:700;font-family:var(--font-heading);font-size:var(--text-sm);color:#57503f;margin-bottom:8px}
.causas-sub{margin-bottom:4px}
.causas-sub-hd{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:7px 8px;background:var(--surface);
  border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;color:#57503f;transition:background .15s var(--ease)}
.causas-sub-hd:hover{background:#efece4}
.causas-sub-body{padding:8px 8px 6px 18px;display:flex;flex-direction:column;gap:4px}
.causas-item{display:flex;align-items:flex-start;gap:6px;font-size:var(--text-base);cursor:pointer;font-weight:400}
.causas-item input{margin-top:3px;flex:none}
.causas-agregar{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
.right{text-align:right}.center{text-align:center}
.muted{color:var(--muted)}
table.tbl th.col-wrap,table.tbl td.col-wrap{white-space:normal;overflow-wrap:break-word;width:185px;max-width:185px}
table.tbl th.col-eq,table.tbl td.col-eq{white-space:normal;overflow-wrap:break-word;width:150px;max-width:150px}
table.tbl th.col-pa,table.tbl td.col-pa{white-space:normal;overflow-wrap:break-word;width:110px;max-width:110px}
table.tbl th.col-cod,table.tbl td.col-cod{white-space:normal;word-break:break-word;width:150px;max-width:150px}
table.tbl th.col-certs,table.tbl td.col-certs{white-space:normal;width:220px;max-width:220px}
table.tbl th.col-comp,table.tbl td.col-comp{white-space:normal;width:220px;max-width:220px}
table.tbl th.col-loc,table.tbl td.col-loc{white-space:normal;width:150px;max-width:150px}
table.tbl th.col-num,table.tbl td.col-num{white-space:normal;width:80px;max-width:80px}
table.tbl th.col-clas,table.tbl td.col-clas{white-space:normal;width:115px;max-width:115px}
table.tbl.tbl-fixed{table-layout:fixed}
/* Comparación de ofertas (Herramientas): ancho fijo por columna (colgroup, ver ComparacionOfertas.colWidthsOfertas)
   + encabezados que se envuelven en 2 líneas, para que la tabla nunca necesite scroll horizontal aunque
   haya varios factores de ponderación. */
table.tbl.tbl-ofertas{table-layout:fixed}
table.tbl.tbl-ofertas th,table.tbl.tbl-ofertas td{white-space:normal;word-break:break-word}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.3em;max-height:2.6em}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3)}
.fld label{display:block;font-size:var(--text-xs);color:var(--muted);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-3)}
.toolbar .sp{flex:1}
.fld.colfilter-toolbar{display:flex;align-items:center;gap:2px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:var(--text-base);color:#3a352e;white-space:nowrap}

/* ---------- Cronograma ---------- */
.crono{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
table.crono-tbl{border-collapse:collapse;font-size:11px}
table.crono-tbl th,table.crono-tbl td{border:1px solid #f0ece3;padding:0;text-align:center}
table.crono-tbl thead th{background:var(--surface);position:sticky;z-index:2;font-weight:700;color:#57503f;height:20px}
table.crono-tbl thead tr.fila-mes th{top:0;z-index:3;background:#eeeae1}
table.crono-tbl thead tr.fila-sem th{top:20px;z-index:2;font-weight:600;font-size:10px;color:var(--muted)}
table.crono-tbl .sticky{position:sticky;left:0;background:#fff;z-index:3;text-align:left;padding:4px 8px;min-width:210px;max-width:210px;white-space:normal;box-shadow:2px 0 3px rgba(33,25,15,.05)}
table.crono-tbl thead .sticky{z-index:5;background:#eeeae1;top:0}
.cell{width:20px;height:20px;display:block}
.m-P{background:#2563eb}.m-G{background:#94a3b8}.m-PR{background:#db2777}.m-A{background:#6b7280}
.m-E{background:#16a34a}.m-C{background:#f59e0b}.m-CT{background:#ea580c}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;font-size:var(--text-sm);color:#57503f}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:5px;vertical-align:-2px}

/* ---------- Tabs (formulario tipo Excel) ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin:-4px 0 16px;flex-wrap:wrap}
.tabs button{background:none;border:none;padding:10px 16px;font-weight:600;font-size:var(--text-sm);color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:6px 6px 0 0;transition:color .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.tabs button:hover{color:var(--brand);background:var(--surface)}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand);background:#eff6ff}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(20,15,8,.55);display:flex;align-items:flex-start;justify-content:center;
  padding:20px;z-index:50;overflow:auto;animation:modalBgIn .18s var(--ease)}
@keyframes modalBgIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:760px;margin:auto;
  max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:modalIn .22s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal .hd{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex:none}
.modal .hd h3{margin:0;color:var(--brand);font-size:var(--text-lg)}
.modal .bd{padding:18px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal .ft{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none}

/* Modal FLOTANTE/arrastrable: sin fondo oscuro, para ver lo que hay detras (ej. el arbol de Arquitectura) */
.modal-bg.flotante{background:transparent;pointer-events:none;align-items:flex-start;justify-content:center;padding-top:40px;animation:none}
.modal-bg.flotante .modal{pointer-events:auto;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.modal .hd.arrastrable{cursor:move;user-select:none}
.modal .hd.arrastrable:active{cursor:grabbing}
.x{border:none;background:none;font-size:22px;color:#a39c8d;cursor:pointer;transition:color .15s var(--ease)}
.x:hover{color:var(--bad)}

/* ---------- misc ---------- */
.pill{background:#eff6ff;color:#1e40af;border-radius:var(--radius-full);padding:2px 10px;font-size:var(--text-sm);font-weight:600}
.help{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:var(--radius-md);padding:11px 13px;font-size:var(--text-base);margin-bottom:var(--sp-3)}
.warnbox{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:var(--radius-sm);padding:9px 11px;font-size:var(--text-base)}
.okbox{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:var(--radius-sm);padding:9px 11px;font-size:var(--text-base)}
.scrim{display:none}

/* ---------- Matriz de riesgo (Matriz de Criticidad) — grid visual con degradado + tooltip ---------- */
.riskgrid-wrap{overflow-x:auto;padding-bottom:4px}
.riskgrid{display:grid;gap:8px;align-items:stretch;width:fit-content;max-width:100%}
.riskgrid-corner{display:flex;align-items:center;font-size:var(--text-base);color:var(--muted);font-weight:600;padding:4px}
.riskgrid-colhead{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--font-heading);font-size:20px;font-weight:700;color:#57503f;padding:4px;line-height:1.2}
.riskgrid-colhead small{font-weight:400;color:var(--muted);font-size:15px;font-family:var(--font-body)}
.riskgrid-rowhead{display:flex;flex-direction:column;justify-content:center;text-align:right;padding:4px 10px;font-family:var(--font-heading);font-size:20px;line-height:1.2}
.riskgrid-rowhead small{display:block;color:var(--muted);font-size:15px;font-weight:400;font-family:var(--font-body);white-space:normal;line-height:1.3}
.riskcell{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-heading);font-weight:800;font-size:30px;box-shadow:0 2px 8px rgba(33,25,15,.18);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);cursor:default;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.riskcell.vacia{opacity:.32;box-shadow:none;font-weight:400;font-size:20px}
.riskcell:not(.vacia):hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 24px rgba(33,25,15,.3);z-index:6}
.riskcell.seleccionada{outline:3px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 5px rgba(14,165,233,.35),0 10px 24px rgba(33,25,15,.3);animation:riskpulse 1.6s ease-in-out infinite}
@keyframes riskpulse{0%,100%{box-shadow:0 0 0 5px rgba(14,165,233,.35),0 10px 24px rgba(33,25,15,.3)}50%{box-shadow:0 0 0 9px rgba(14,165,233,.12),0 10px 24px rgba(33,25,15,.3)}}
.riskcell-dash{opacity:.7}
.riskcell-tip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;border-radius:var(--radius-sm);padding:8px 10px;width:220px;max-width:60vw;font-size:var(--text-sm);font-weight:400;
  text-shadow:none;box-shadow:var(--shadow-lg);z-index:20;text-align:left}
.riskcell-tip b{display:block;margin-bottom:4px;font-size:11px;color:#93c5fd}
.riskcell-tip ul{margin:0;padding-left:16px;max-height:140px;overflow:auto}
.riskcell-tip li{margin:2px 0}
.riskcell-tip::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--ink)}
.riskcell:hover .riskcell-tip{display:block}
.riskleyenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.riskleyenda-item{display:flex;align-items:center;gap:8px}
.riskleyenda-sw{width:28px;height:14px;border-radius:4px;flex:none;box-shadow:0 1px 3px rgba(33,25,15,.25)}
.riskleyenda-item b{display:block;font-size:12.5px}
.riskleyenda-item small{color:var(--muted);font-size:11px}
table.tbl tbody tr.selected td{background:#eff6ff}

/* ---------- Donut SVG (Dashboard — distribución de Solicitudes) ---------- */
.donut{width:130px;height:130px;flex:none;transform:rotate(0deg)}
.donut-bg{fill:transparent;stroke:var(--surface);stroke-width:4.2}
.donut circle{transition:stroke-dasharray .4s var(--ease)}
.donut-total{font-size:8px;font-weight:800;font-family:var(--font-heading);fill:var(--ink)}
.donut-sub{font-size:2.6px;fill:var(--muted)}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  table.tbl .col-sm-hide{display:none}
}
@media(max-width:860px){
  .burger{display:block}
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .25s var(--ease);height:100vh}
  .shell.open .sidebar{transform:none}
  .shell.open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
  .content{padding:12px}
  .topbar{gap:6px;padding:0 var(--sp-3)}
  .topbar h2{font-size:var(--text-base)}
  .usr small{display:none}
  .sync-txt{display:none}
  .sync-ind{padding:5px 6px}
  /* El recuadro azul "Módulo. Descripción…" es útil en PC (poca falta de espacio), pero en celular ocupa
     buena parte de la pantalla antes de llegar al contenido real — se omite en este ancho. */
  .help{display:none}
  /* Acciones de escritorio (ej. plantilla/carga masiva Excel) que no tienen sentido en un celular —
     se ocultan en vez de sacarlas del código, así siguen disponibles apenas se abre en una PC/tablet grande. */
  .hide-mobile{display:none}
}

/* Role Home Grid — pantalla de inicio tipo "apps del celular" (hoy solo para el rol técnico). Botones
   grandes (mín. 44px de alto real, bastante más en la práctica), alto contraste, pensados para tocar
   con guantes/en campo — nada de texto chico ni densidad de escritorio. 2 columnas en celular chico,
   sube sola con el ancho disponible (auto-fill), sin necesidad de breakpoints a mano. */
.role-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:4px}
.role-home-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:104px;padding:16px 10px;border:1px solid var(--line);border-radius:16px;background:#fff;
  color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.role-home-tile:hover,.role-home-tile:focus-visible{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,76,153,.14);outline:none}
.role-home-tile:active{transform:scale(.97)}
.role-home-tile-ic{font-size:34px;line-height:1}
.role-home-tile-label{font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);text-align:center;line-height:1.25}
.role-home-tile-badge{
  position:absolute;top:8px;right:8px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--bad);color:#fff;font-size:var(--text-xs);font-weight:700;display:flex;align-items:center;justify-content:center;
}
@media(min-width:640px){ .role-home-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
@media(min-width:960px){ .role-home-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }