/* =========================================================================
   Seguimiento DPS — MIDES
   Identidad visual: "Centro de mando institucional"
   Display: Space Grotesk · Cuerpo: Inter · Datos: JetBrains Mono
   ========================================================================= */
:root{
  /* Tinta y neutros */
  --ink:#0f1b30; --ink-soft:#42506a; --muted:#7c8898;
  /* Azul institucional */
  --navy:#17356b; --navy-600:#1d4488; --navy-700:#183c7d; --navy-900:#0b1e40;
  /* Dorado institucional */
  --gold:#f2a900; --gold-deep:#c98a00; --gold-soft:#fdeec4; --gold-ink:#7a5500;
  /* Superficies */
  --bg:#e9edf5; --surface:#ffffff; --surface-2:#f5f8fd; --surface-3:#eef2fa;
  --line:#e1e7f1; --line-strong:#cfd9ea;
  /* Semánticos */
  --green:#1c9a61; --green-soft:#e2f4eb; --green-ink:#0f5c39;
  --amber:#e08a1e; --amber-soft:#fbeed7; --amber-ink:#8a5210;
  --red:#d5384a; --red-soft:#fbe3e6; --red-ink:#8f1f2c;
  --info:#2f6f9e;
  /* Sombras (tinte azul) */
  --sh-sm:0 1px 2px rgba(16,32,60,.06), 0 1px 3px rgba(16,32,60,.05);
  --sh-md:0 6px 18px rgba(16,32,60,.09);
  --sh-lg:0 20px 50px rgba(11,30,64,.20);
  --r-s:9px; --r-m:13px; --r-l:18px;
  --fret-ink:rgba(20,45,95,.075);
  --motif-side:rgba(233,240,251,.09);
  --motif-top:rgba(23,53,107,.13);
  --fdisplay:'Space Grotesk',system-ui,sans-serif;
  --fbody:'Inter',system-ui,-apple-system,sans-serif;
  --fmono:'JetBrains Mono','SFMono-Regular',monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--fbody); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:14.5px; line-height:1.5; }
h1,h2,h3{ font-family:var(--fdisplay); font-weight:600; letter-spacing:-.01em; }
a{ color:var(--navy-600); }
.hidden{ display:none !important; }
.spacer{ flex:1; }
.hint{ color:var(--muted); font-size:12px; }
code, .mono{ font-family:var(--fmono); }
::selection{ background:var(--gold-soft); }

/* Scrollbars discretas */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#c4cee0; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#a9b6cf; background-clip:content-box; }

/* ---------------------------- Controles base --------------------------- */
input,select,textarea{ width:100%; padding:10px 12px; border:1.5px solid var(--line-strong);
  border-radius:var(--r-s); font-size:14px; font-family:var(--fbody); background:var(--surface);
  color:var(--ink); transition:border-color .15s, box-shadow .15s; }
input::placeholder,textarea::placeholder{ color:#9aa5b6; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--navy-600);
  box-shadow:0 0 0 3.5px rgba(29,68,136,.15); }
textarea{ resize:vertical; min-height:74px; }
label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.005em; }
.field{ margin-bottom:14px; }

.btn{ --bg:var(--navy); display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border:1px solid transparent; border-radius:var(--r-s); background:var(--bg);
  color:#fff; font-family:var(--fbody); font-size:13.5px; font-weight:600; cursor:pointer;
  transition:transform .06s, box-shadow .15s, background .15s, border-color .15s; box-shadow:var(--sh-sm); }
.btn:hover{ box-shadow:var(--sh-md); filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn.full{ width:100%; }
.btn.sm{ padding:8px 13px; font-size:12.5px; }
.btn.tiny{ padding:7px 11px; font-size:12.5px; font-weight:600; box-shadow:none; border-radius:9px; gap:6px; }
.btn .bi{ display:inline-flex; align-items:center; }
.btn .bi svg{ width:14px; height:14px; display:block; }
.btn.tiny.ghost{ color:var(--ink-soft); border-color:var(--line-strong); }
.btn.tiny.ghost:hover{ color:var(--navy-600); border-color:var(--navy-600); background:var(--surface-2); }
.btn.green{ --bg:var(--green); }
.btn.gold{ --bg:var(--gold); color:#3d2c00; }
.btn.danger{ --bg:var(--red); }
.btn.ghost{ --bg:transparent; color:var(--navy-600); border-color:var(--line-strong); box-shadow:none; }
.btn.ghost:hover{ background:var(--surface-3); filter:none; }
.btn.danger-outline{ --bg:transparent; color:var(--red-ink); border-color:#eab6bd; box-shadow:none; }
.btn.danger-outline:hover{ background:var(--red-soft); filter:none; }

.msg{ margin-top:10px; font-size:13px; }
.msg.error{ color:var(--red-ink); background:var(--red-soft); padding:9px 12px; border-radius:9px; }
.msg.ok{ color:var(--green-ink); background:var(--green-soft); padding:9px 12px; border-radius:9px; }

/* Mostrar/ocultar contraseña */
.pass-wrap{ position:relative; }
.pass-wrap input{ padding-right:44px; }
.pass-toggle{ position:absolute; top:0; right:0; height:100%; width:42px; display:flex; align-items:center;
  justify-content:center; background:none; border:none; cursor:pointer; color:var(--muted); border-radius:0 var(--r-s) var(--r-s) 0; }
.pass-toggle:hover{ color:var(--navy-600); }
.pass-toggle:focus-visible{ outline:2px solid var(--navy-600); outline-offset:-2px; }
.pass-toggle svg{ width:20px; height:20px; }

/* =============================== LOGIN ================================= */
.login-wrap{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-hero{ position:relative; overflow:hidden; padding:52px; color:#eaf0fb; text-align:center;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #0b1e40 0%, #12295a 60%, #0c2148 100%); }
/* Resplandor ambiental que se desplaza lentamente */
.login-hero::before{ content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:radial-gradient(620px 440px at 32% 26%, rgba(56,112,182,.42), transparent 62%);
  animation:heroGlow 16s ease-in-out infinite alternate; }
/* Estela como marca de agua central, con leve flotación */
.hero-figure{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72%; height:92%; z-index:0;
  background:rgba(255,255,255,.05); pointer-events:none;
  -webkit-mask:url("maya-estela.png") no-repeat center/contain; mask:url("maya-estela.png") no-repeat center/contain;
  animation:heroFloat 9s ease-in-out infinite; }
.hero-center{ position:relative; z-index:1; max-width:430px; }
.hero-logo{ height:104px; width:320px; max-width:88%; margin:0 auto 24px;
  background:url("logo-mides-blanco.png") no-repeat center/contain;
  animation:heroIn .7s cubic-bezier(.2,.8,.3,1) both; animation-delay:.05s; }
.hero-ministerio{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#a9bbdb; margin-bottom:26px;
  animation:heroIn .7s cubic-bezier(.2,.8,.3,1) both; animation-delay:.18s; }
.hero-title{ font-size:36px; line-height:1.14; color:#fff; margin:0 0 14px; letter-spacing:-.01em;
  animation:heroIn .7s cubic-bezier(.2,.8,.3,1) both; animation-delay:.3s; }
.hero-title em{ font-style:normal; color:var(--gold); }
.hero-sub{ font-size:15px; color:#b9c8e6; margin:0;
  animation:heroIn .7s cubic-bezier(.2,.8,.3,1) both; animation-delay:.44s; }

@keyframes heroIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
@keyframes heroFloat{ 0%,100%{ transform:translate(-50%,-50%);} 50%{ transform:translate(-50%,-53%);} }
@keyframes heroGlow{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(7%,5%) scale(1.08);} }

.login-panel{ position:relative; display:grid; grid-template-rows:1fr auto; padding:40px; background:var(--surface); }
.login-card{ align-self:center; justify-self:center; width:100%; max-width:392px;
  animation:heroIn .7s cubic-bezier(.2,.8,.3,1) both; animation-delay:.15s; }
.lc-logo{ height:44px; width:150px; margin-bottom:24px;
  background:url("logo-mides.png") no-repeat left center; background-size:contain; }
.login-card .lc-head{ margin-bottom:24px; }
.login-card .lc-head h2{ font-size:24px; margin:0 0 6px; }
.login-card .lc-head p{ color:var(--muted); margin:0; font-size:13.5px; }
.login-card .field{ margin-bottom:16px; }
.login-card .btn.full{ margin-top:4px; padding:12px; font-size:14.5px; }
.login-foot{ text-align:center; color:var(--muted); font-size:12px; padding-top:20px; }

/* ============================== APP SHELL ============================== */
.app-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }

/* Sidebar */
.sidebar{ background:linear-gradient(180deg,#0b1e40,#0d2249); color:#dce5f5; display:flex; flex-direction:column;
  padding:18px 14px; position:sticky; top:0; height:100vh; border-right:1px solid #0a1834; }
.side-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.side-brand img{ width:42px; height:42px; object-fit:contain; }
.side-brand b{ font-family:var(--fdisplay); font-size:15px; color:#fff; display:block; line-height:1.1; }
.side-brand small{ font-size:11px; color:#93a6cc; letter-spacing:.08em; }
.side-nav{ display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.tab{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:none; background:none; cursor:pointer;
  color:#b9c7e3; font-family:var(--fbody); font-size:14px; font-weight:500; border-radius:10px; text-align:left; width:100%;
  transition:background .14s, color .14s; }
.tab:hover{ background:rgba(255,255,255,.06); color:#fff; }
.tab.active{ background:linear-gradient(90deg, rgba(242,169,0,.16), rgba(242,169,0,.03)); color:#fff;
  box-shadow:inset 3px 0 0 var(--gold); }
.tab-ic{ display:flex; width:20px; height:20px; flex:none; }
.tab-ic svg{ width:20px; height:20px; }
.tab.active .tab-ic{ color:var(--gold); }
.side-foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:6px 6px 12px; }
.uc-avatar{ width:36px; height:36px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#3d2c00; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.uc-info{ min-width:0; }
.uc-info b{ display:block; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-chip{ font-size:11px; color:#9fb2d6; }
.side-foot .btn.ghost{ color:#cdd8ee; border-color:rgba(255,255,255,.16); width:100%; }
.side-foot .btn.ghost:hover{ background:rgba(255,255,255,.08); }

/* Main column */
.main{ display:flex; flex-direction:column; min-width:0; }
.topstrip{ height:60px; display:flex; align-items:center; gap:14px; padding:0 24px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30; }
.ts-title{ font-family:var(--fdisplay); font-size:17px; font-weight:600; color:var(--ink); }
.hamb{ display:none; background:none; border:none; font-size:24px; color:var(--navy); cursor:pointer; padding:2px 6px; }
.bell{ position:relative; background:var(--surface-2); border:1px solid var(--line); width:40px; height:40px; color:var(--ink);
  border-radius:11px; cursor:pointer;  display:flex; align-items:center; justify-content:center; }
.bell:hover{ background:var(--surface-3); }
.bell svg{ width:20px; height:20px; }
.bell .badge{ position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; font-size:10.5px;
  font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:2px solid var(--surface); }
.content{ padding:26px 24px 60px; max-width:1220px; width:100%; margin:0 auto; }

/* Panel de notificaciones */
.notif-panel{ position:fixed; top:70px; right:24px; width:384px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-lg);
  z-index:56; overflow:hidden; max-height:min(72vh,580px); overflow-y:auto; }
.notif-panel header{ padding:15px 18px; border-bottom:1px solid var(--line); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface); z-index:1; }
.notif-item{ padding:13px 18px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; gap:12px; align-items:flex-start; }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--surface-2); }
.notif-item .dot{ width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none; background:var(--navy-600);
  box-shadow:0 0 0 3px rgba(29,68,136,.12); }
.notif-item.plazo .dot{ background:var(--amber); box-shadow:0 0 0 3px rgba(224,138,30,.14); }
.notif-item.vencido .dot,.notif-item.critico .dot{ background:var(--red); box-shadow:0 0 0 3px rgba(213,56,74,.14); }
.notif-item small{ color:var(--muted); font-size:11.5px; }
.notif-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:40px 26px; }
.notif-empty .ne-ic{ width:48px; height:48px; border-radius:14px; background:var(--surface-3); color:var(--navy-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
.notif-empty .ne-ic svg{ width:24px; height:24px; }
.notif-empty b{ font-size:15px; color:var(--ink); }
.notif-empty span{ font-size:12.5px; color:var(--muted); line-height:1.45; max-width:260px; }

/* ============================== PANELES ================================ */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-sm);
  overflow:hidden; margin-bottom:22px; }
.panel > header{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line);
  background:var(--surface); }
.panel > header h2{ font-size:16px; margin:0; }
.panel-body{ padding:20px; }
.section-title{ font-family:var(--fdisplay); font-size:14px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em; margin:2px 0 14px; }

/* Encabezado de vista */
.view-head{ margin-bottom:20px; }
.view-head h1{ font-size:24px; margin:0 0 4px; }
.view-head p{ color:var(--muted); margin:0; font-size:13.5px; }

/* Tarjetas de estadística (bandeja) */
.cards-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:16px 17px; box-shadow:var(--sh-sm);
  position:relative; overflow:hidden; }
.stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--navy-600); }
.stat.vencido::before,.stat.red::before{ background:var(--red); }
.stat.por-vencer::before,.stat.amber::before{ background:var(--amber); }
.stat.en-tiempo::before,.stat.green::before{ background:var(--green); }
.stat.total::before,.stat.gold::before{ background:var(--gold); }
.stat .n{ font-family:var(--fmono); font-size:30px; font-weight:600; line-height:1; color:var(--ink); }
.stat .l{ font-size:12px; color:var(--muted); margin-top:7px; font-weight:500; }

/* Filtros */
.filtros{ display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.filtros .field{ margin-bottom:0; min-width:160px; }
.filtros .chk{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); padding-bottom:9px; }
.filtros .chk input{ width:auto; }

/* Lista de documentos */
.doc-list{ display:flex; flex-direction:column; gap:9px; }
.doc-row{ display:grid; grid-template-columns:128px minmax(0,1fr) auto auto auto; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--navy-600);
  border-radius:var(--r-m); padding:14px 17px; cursor:pointer; box-shadow:var(--sh-sm); transition:box-shadow .15s, transform .06s, border-color .15s; }
.doc-row:hover{ box-shadow:var(--sh-md); transform:translateY(-1px); }
.doc-row.vencido{ border-left-color:var(--red); } .doc-row.critico{ border-left-color:var(--red); }
.doc-row.por-vencer{ border-left-color:var(--amber); } .doc-row.en-tiempo{ border-left-color:var(--green); }
.doc-row.sin-plazo{ border-left-color:var(--line-strong); }
.doc-row .cor{ font-family:var(--fmono); font-size:13px; font-weight:600; color:var(--navy); }
.doc-row .cor small{ display:block; font-family:var(--fbody); font-weight:400; color:var(--muted); font-size:11px; margin-top:2px; }
.doc-row .asunto{ font-weight:600; font-size:14.5px; color:var(--ink); }
.doc-row .asunto small{ display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:2px; }
.plazo{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; white-space:nowrap; color:var(--ink-soft); }
.plazo .pill{ width:9px; height:9px; border-radius:50%; padding:0; flex:none; background:var(--navy-600); }
.plazo .pill.vencido,.plazo .pill.critico{ background:var(--red); }
.plazo .pill.por-vencer{ background:var(--amber); }
.plazo .pill.en-tiempo{ background:var(--green); }
.plazo .pill.sin-plazo{ background:var(--line-strong); }

/* Badges y píldoras */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px;
  border-radius:999px; background:var(--surface-3); color:var(--ink-soft); white-space:nowrap; }
.badge.navy{ background:#e7eefb; color:var(--navy); }
.badge.green{ background:var(--green-soft); color:var(--green-ink); }
.badge.amber,.badge.gold{ background:var(--amber-soft); color:var(--amber-ink); }
.badge.gray{ background:var(--surface-3); color:var(--muted); }
.badge.red,.badge.vencido,.badge.critico{ background:var(--red-soft); color:var(--red-ink); }
.badge.por-vencer{ background:var(--amber-soft); color:var(--amber-ink); }
.badge.en-tiempo{ background:var(--green-soft); color:var(--green-ink); }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px;
  border-radius:999px; }
.pill.vencido,.pill.critico{ background:var(--red-soft); color:var(--red-ink); }
.pill.por-vencer{ background:var(--amber-soft); color:var(--amber-ink); }
.pill.en-tiempo{ background:var(--green-soft); color:var(--green-ink); }
.pill.sin-plazo{ background:var(--surface-3); color:var(--muted); }
.role-pill{ display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:7px;
  background:#e7eefb; color:var(--navy); }

/* Tablas */
table.simple{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.simple th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:600; padding:0 12px 10px; border-bottom:1.5px solid var(--line); }
table.simple td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.simple tr:last-child td{ border-bottom:none; }
table.simple tr.is-online td{ background:linear-gradient(90deg, rgba(28,154,97,.05), transparent 40%); }
table.simple code{ font-size:12.5px; color:var(--navy); background:var(--surface-3); padding:2px 7px; border-radius:6px; }
.row-acc{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Presencia / en línea */
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; position:relative; }
.live-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--green);
  opacity:.5; animation:pulse 1.8s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(.7); opacity:.6;} 100%{ transform:scale(1.9); opacity:0;} }
.pres{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; }
.pres.online{ color:var(--green-ink); font-weight:600; }
.pres.off{ color:var(--muted); }

/* Tira de control (admin) */
.ctrl-strip{ display:grid; grid-template-columns:repeat(3,auto) 1fr; align-items:center; gap:26px;
  background:linear-gradient(120deg,#0b1e40,#143163); color:#e7eefb; border-radius:var(--r-l);
  padding:20px 24px; margin-bottom:22px; box-shadow:var(--sh-md); }
.ctrl-metric .cm-num{ font-family:var(--fmono); font-size:32px; font-weight:600; line-height:1; color:#fff; }
.ctrl-metric .cm-num.online{ color:var(--gold); }
.ctrl-metric .cm-lb{ font-size:12px; color:#a9bbdb; margin-top:6px; display:flex; align-items:center; gap:7px; }
.ctrl-actions{ justify-self:end; display:flex; gap:10px; flex-wrap:wrap; }
.ctrl-actions .btn.danger-outline{ color:#ffd9dd; border-color:rgba(255,150,160,.4); }
.ctrl-actions .btn.danger-outline:hover{ background:rgba(213,56,74,.2); }

/* ============================== DASHBOARD ============================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.chart-box{ position:relative; height:280px; }
.legend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; font-size:12.5px; color:var(--ink-soft); }
.legend .k{ display:inline-flex; align-items:center; gap:6px; }
.legend .k::before{ content:""; width:11px; height:11px; border-radius:3px; background:var(--c,var(--navy)); }

/* Cuellos de botella */
.bottleneck{ display:flex; flex-direction:column; gap:11px; }
.bn-row{ display:grid; grid-template-columns:180px 1fr 70px; align-items:center; gap:14px; }
.bn-row > span:first-child{ font-size:13px; color:var(--ink-soft); }
.bn-bar{ height:12px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.bn-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--navy-600),var(--navy)); }
.bn-fill.alto{ background:linear-gradient(90deg,#e8992f,var(--red)); }
.bn-val{ font-family:var(--fmono); font-size:13px; font-weight:600; text-align:right; color:var(--ink); }

/* ============================== BITÁCORA ============================== */
.audit-filtros{ display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:18px;
  padding-bottom:18px; border-bottom:1px solid var(--line); }
.audit-filtros .field{ margin-bottom:0; min-width:190px; }
.audit-list{ display:flex; flex-direction:column; }
.audit-item{ display:flex; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line); position:relative; }
.audit-item[onclick]{ cursor:pointer; } .audit-item:hover{ background:var(--surface-2); }
.au-dot{ width:11px; height:11px; border-radius:50%; margin-top:4px; flex:none; background:var(--navy-600); box-shadow:0 0 0 4px rgba(29,68,136,.1); }
.au-dot.gold{ background:var(--gold); box-shadow:0 0 0 4px rgba(242,169,0,.14); }
.au-dot.rojo{ background:var(--red); box-shadow:0 0 0 4px rgba(213,56,74,.12); }
.au-dot.verde{ background:var(--green); box-shadow:0 0 0 4px rgba(28,154,97,.12); }
.au-main{ min-width:0; flex:1; }
.au-top{ display:flex; align-items:center; gap:10px; }
.au-top b{ font-size:14px; }
.au-ref{ font-family:var(--fmono); font-size:11.5px; color:var(--navy); background:var(--surface-3); padding:2px 7px; border-radius:6px; }
.au-det{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.au-meta{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--muted); margin-top:5px; }
.au-dotmini{ width:3px; height:3px; border-radius:50%; background:var(--muted); }
.audit-mas{ text-align:center; padding-top:18px; }

/* =============================== MODAL ================================= */
.modal-back{ position:fixed; inset:0; background:rgba(9,18,36,.55); backdrop-filter:blur(3px); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fade .15s ease; }
.modal{ background:var(--surface); width:100%; max-width:720px; border-radius:var(--r-l); box-shadow:var(--sh-lg);
  overflow:hidden; max-height:92vh; display:flex; flex-direction:column; animation:rise .22s cubic-bezier(.2,.8,.3,1); }
.modal header{ background:linear-gradient(120deg,var(--navy),var(--navy-700)); color:#fff; padding:16px 20px;
  display:flex; align-items:center; gap:12px; }
.modal header h2{ margin:0; font-size:17px; }
.modal header .cor{ font-family:var(--fmono); background:rgba(255,255,255,.16); border-radius:7px; padding:3px 10px; font-size:12px; font-weight:600; }
.modal header .x{ margin-left:auto; background:none; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; opacity:.85; }
.modal header .x:hover{ opacity:1; }
.modal-body{ padding:20px; overflow:auto; }
.actions-bar{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.temp-pass{ font-family:var(--fmono); font-size:22px; font-weight:600; letter-spacing:1px; text-align:center;
  color:var(--ink); background:var(--surface-2); border:1px dashed var(--line-strong); padding:16px; border-radius:12px; }

/* Detalle de documento (kv) */
.kv{ display:grid; grid-template-columns:150px 1fr; gap:9px 16px; font-size:14px; margin-bottom:18px; }
.kv .k{ color:var(--muted); font-size:12.5px; font-weight:600; padding-top:2px; }
.kv .v{ color:var(--ink); }

/* Línea de tiempo (historial) */
.timeline{ position:relative; padding-left:22px; margin:8px 0; }
.timeline::before{ content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line-strong); }
.tl-item{ position:relative; padding:0 0 16px; }
.tl-item::before{ content:""; position:absolute; left:-21px; top:3px; width:11px; height:11px; border-radius:50%;
  background:var(--navy-600); border:2px solid var(--surface); box-shadow:0 0 0 2px var(--line-strong); }
.tl-head{ font-weight:600; font-size:13.5px; }
.tl-meta{ font-size:12px; color:var(--muted); margin-top:1px; }
.tl-det{ font-size:13px; color:var(--ink-soft); margin-top:3px; }

/* Comentarios */
.comment{ background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:11px 13px; margin-bottom:9px; }
.c-head{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; }
.c-head b{ color:var(--ink); }
.c-body{ font-size:13.5px; color:var(--ink); }

.empty{ text-align:center; color:var(--muted); padding:30px 16px; font-size:13.5px; }

/* =============================== TOASTS =============================== */
.toast-wrap{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:80; display:flex;
  flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--navy-900); color:#fff; padding:11px 18px; border-radius:11px; box-shadow:var(--sh-lg);
  font-size:13.5px; font-weight:500; animation:rise .2s ease; }
.toast.ok{ background:var(--green); } .toast.error{ background:var(--red); }

/* Avisos flotantes clicables */
.notif-toast-wrap{ position:fixed; top:70px; right:18px; z-index:55; display:flex; flex-direction:column;
  gap:10px; width:350px; max-width:calc(100vw - 24px); pointer-events:none; }
.notif-toast{ pointer-events:auto; position:relative; display:flex; gap:12px; cursor:pointer; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--navy-600); border-radius:var(--r-m);
  padding:13px 34px 13px 14px; box-shadow:var(--sh-lg); animation:slideIn .28s cubic-bezier(.2,.8,.3,1);
  transition:opacity .25s, transform .25s; }
.notif-toast:hover{ background:var(--surface-2); }
.notif-toast.plazo{ border-left-color:var(--amber); }
.notif-toast.vencido,.notif-toast.critico{ border-left-color:var(--red); }
.notif-toast.salir{ opacity:0; transform:translateX(24px); }
.notif-toast .nt-icon{ width:36px; height:36px; flex:none; border-radius:10px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.notif-toast.plazo .nt-icon{ background:var(--amber); }
.notif-toast.vencido .nt-icon,.notif-toast.critico .nt-icon{ background:var(--red); }
.notif-toast .nt-icon svg{ width:19px; height:19px; }
.notif-toast .nt-title{ font-size:11px; font-weight:700; color:var(--navy); letter-spacing:.05em; text-transform:uppercase; }
.notif-toast .nt-text{ font-size:13.5px; color:var(--ink); margin:2px 0 3px; line-height:1.35; }
.notif-toast small{ color:var(--muted); font-size:11.5px; }
.notif-toast .nt-close{ position:absolute; top:7px; right:9px; background:none; border:none; color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:6px; }
.notif-toast .nt-close:hover{ background:var(--surface-3); color:var(--navy); }

@keyframes fade{ from{opacity:0;} to{opacity:1;} }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{opacity:1;transform:none;} }
@keyframes slideIn{ from{ opacity:0; transform:translateX(26px);} to{ opacity:1; transform:none;} }

/* ===================== IDENTIDAD MAYA · AVATARES · PERFIL ================ */
/* --- Sistema de grecas mayas (cenefa escalonada) --- */
.greca{ height:12px; margin:16px 0; background:var(--gold); opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2216%22%20viewBox%3D%220%200%2032%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M0%2012%20H4%20V8%20H8%20V4%20H12%20V8%20H16%20V12%20H20%20V8%20H24%20V4%20H28%20V8%20H32%20V12%22%2F%3E%3C%2Fsvg%3E") repeat-x left center; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2216%22%20viewBox%3D%220%200%2032%2016%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M0%2012%20H4%20V8%20H8%20V4%20H12%20V8%20H16%20V12%20H20%20V8%20H24%20V4%20H28%20V8%20H32%20V12%22%2F%3E%3C%2Fsvg%3E") repeat-x left center;
  -webkit-mask-size:auto 12px; mask-size:auto 12px; }

/* Campo de glifos maya como fondo del área de trabajo (imagen 2) */
.main{ position:relative; }
.main > .topstrip, .main > .content{ position:relative; z-index:1; }
.main::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--fret-ink);
  -webkit-mask:url("maya-glifos.png") repeat; mask:url("maya-glifos.png") repeat;
  -webkit-mask-size:300px; mask-size:300px; }

/* Estela maya como marca de agua de la barra lateral (imagen 1) */
.sidebar{ overflow:hidden; }
.side-brand,.side-nav,.side-foot{ position:relative; z-index:1; }
.side-figure{ position:absolute; left:16px; right:16px; top:150px; bottom:14px; z-index:0; pointer-events:none;
  background:var(--motif-side);
  -webkit-mask:url("maya-estela.png") no-repeat center/contain; mask:url("maya-estela.png") no-repeat center/contain; }


/* Friso de mascarón en la barra superior (imagen 3) */
.topstrip{ overflow:hidden; }
.top-frieze{ position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--motif-top);
  -webkit-mask:url("maya-friso.png") no-repeat center/100% auto; mask:url("maya-friso.png") no-repeat center/100% auto; }

.ts-title,.bell,.hamb{ position:relative; z-index:1; }

/* Títulos sin greca de acento (se conserva la textura y los frisos como identidad) */
.section-title{ display:block; }
.panel > header h2{ display:block; }

/* Avatares (foto / glifo / iniciales) */
.uc-avatar{ overflow:hidden; }
.uc-avatar img,.perfil-avatar img,.mini-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.uc-avatar.glifo{ color:#fff; } .uc-avatar.glifo svg{ width:62%; height:62%; }
.mini-av{ width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#3d2c00; font-weight:700; font-size:11.5px; }
.mini-av.glifo{ color:#fff; } .mini-av.glifo svg{ width:64%; height:64%; }
.name-cell{ display:flex; align-items:center; gap:10px; }
.user-chip{ cursor:pointer; border-radius:12px; padding:8px 8px 10px; transition:background .15s; }
.user-chip:hover{ background:rgba(255,255,255,.07); }

/* Modal de perfil */
.perfil-top{ display:flex; align-items:center; gap:16px; }
.perfil-avatar{ width:84px; height:84px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#3d2c00; font-weight:700; font-size:26px;
  box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--gold-soft); }
.perfil-avatar.glifo{ color:#fff; } .perfil-avatar.glifo svg{ width:60%; height:60%; }
.perfil-id{ min-width:0; }
.perfil-id b{ font-size:18px; display:block; }
.perfil-rol{ color:var(--muted); font-size:13px; }
.perfil-foto-btns{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.perfil-nota{ color:var(--muted); font-size:12.5px; margin:-4px 0 12px; }
.glifo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.glifo-op{ aspect-ratio:1; border-radius:14px; border:2px solid transparent; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm); transition:transform .08s, border-color .15s; }
.glifo-op svg{ width:60%; height:60%; }
.glifo-op:hover{ transform:translateY(-2px); }
.glifo-op.sel{ border-color:var(--ink); box-shadow:0 0 0 3px var(--gold-soft); }
.tema-ops{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tema-op{ display:flex; align-items:center; gap:10px; padding:12px; border:1.5px solid var(--line-strong);
  border-radius:12px; background:var(--surface); cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.tema-op:hover{ background:var(--surface-2); }
.tema-op.sel{ border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(29,68,136,.14); }
.tema-op b{ font-size:13.5px; display:block; } .tema-op small{ color:var(--muted); font-size:11.5px; }
.tema-ico{ width:26px; height:26px; border-radius:8px; flex:none; border:1px solid var(--line-strong); }
.tema-ico.auto{ background:linear-gradient(135deg,#fff 50%,#0f1e37 50%); }
.tema-ico.light{ background:#fff; }
.tema-ico.dark{ background:#0f1e37; }

/* Estado vacío con glifo */
.vacio-glifo{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.vacio-glifo .vg-ic{ color:var(--line-strong); width:56px; height:56px; margin-bottom:4px; }
.vacio-glifo .vg-ic svg{ width:56px; height:56px; }
.vacio-glifo b{ font-size:15px; color:var(--ink-soft); }
.vacio-glifo span{ font-size:13px; color:var(--muted); }

/* ============================== MODO OSCURO ============================= */
[data-theme="dark"]{
  --fret-ink:rgba(165,195,240,.07);
  --motif-top:rgba(226,236,251,.12);
  --ink:#e8eefb; --ink-soft:#aeb9cc; --muted:#8794a9;
  --bg:#0a1526; --surface:#0f1e37; --surface-2:#152743; --surface-3:#1c2f4f;
  --line:#213453; --line-strong:#2c4166;
  --green-soft:#123626; --green-ink:#54d29a;
  --amber-soft:#3a2c12; --amber-ink:#e7b467;
  --red-soft:#3a1a21;  --red-ink:#f28c98;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 18px rgba(0,0,0,.5);
  --sh-lg:0 20px 50px rgba(0,0,0,.6);
}
[data-theme="dark"] .topstrip{ background:rgba(15,30,55,.86); }
[data-theme="dark"] .badge.navy,[data-theme="dark"] .role-pill{ background:#1c355f; color:#bcd0f2; }
[data-theme="dark"] .badge.gray{ background:#22304a; color:#9fb0c9; }
[data-theme="dark"] .doc-row .cor,[data-theme="dark"] .au-ref,
[data-theme="dark"] table.simple code{ color:#84acec; background:#16294a; }
[data-theme="dark"] .doc-row .cor{ background:none; }
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{ background:var(--surface-2); color:var(--ink); }
[data-theme="dark"] .btn.ghost{ color:#c3d3ef; }
[data-theme="dark"] .notif-item:hover,[data-theme="dark"] .audit-item:hover,[data-theme="dark"] .notif-toast:hover{ background:var(--surface-2); }
[data-theme="dark"] .tema-ico{ border-color:#3a4f74; }
[data-theme="dark"] .lc-logo{ background-image:url("logo-mides-blanco.png"); }

/* ============================== RESPONSIVE ============================= */

@media (max-width:960px){
  .grid-2{ grid-template-columns:1fr; }
  .login-wrap{ grid-template-columns:1fr; }
  .login-hero{ display:none; }
  .login-panel{ min-height:100vh; }
}
@media (max-width:820px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; z-index:70; width:260px; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:var(--sh-lg); }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open::after{ content:""; position:fixed; inset:0; background:rgba(9,18,36,.5); z-index:65; }
  .hamb{ display:block; }
  .content{ padding:20px 16px 50px; }
  .ctrl-strip{ grid-template-columns:repeat(3,1fr); }
  .ctrl-actions{ grid-column:1/-1; justify-self:stretch; }
  .doc-row{ grid-template-columns:1fr; gap:8px; }
  .bn-row{ grid-template-columns:120px 1fr 54px; }
  .kv{ grid-template-columns:110px 1fr; }
  .notif-toast-wrap{ left:12px; right:12px; width:auto; top:64px; }
  .lh-title{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}