@font-face {
  font-family:"Atkinson Hyperlegible";
  src:url("../fonts/atkinson-hyperlegible/atkinson-latin-ext-400.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Atkinson Hyperlegible";
  src:url("../fonts/atkinson-hyperlegible/atkinson-latin-400.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Atkinson Hyperlegible";
  src:url("../fonts/atkinson-hyperlegible/atkinson-latin-ext-700.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Atkinson Hyperlegible";
  src:url("../fonts/atkinson-hyperlegible/atkinson-latin-700.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   GESTORÍA LEGAL 360 — Tema Grupo Xcaret
   Cambio estrictamente estético. Sin sombras, sin degradados.
   Paleta, tipografía y reglas del design system de Grupo Xcaret.
   ============================================================ */

:root {
  /* ----- Marca Xcaret ----- */
  --gx-magenta:#E32C91; --gx-magenta-deep:#D11B80; --gx-magenta-muted:#C12F93;
  --gx-violet:#5E18EB; --gx-violet-bright:#6220EB;
  --gx-green-dark:#014326; --gx-green:#00B050; --gx-amber:#FFB200;
  --gx-white:#FFFFFF; --gx-grey-100:#F5F5F5; --gx-grey-300:#D9D9D9;
  --gx-grey-500:#9CA1A8; --gx-slate:#364151; --gx-ink:#1A1A1A; --gx-black:#000000;

  /* ----- Semánticos (tema claro) ----- */
  --accent:var(--gx-magenta); --accent-deep:var(--gx-magenta-deep);
  --bg:#FFFFFF; --panel:#FFFFFF; --card:#F5F5F5; --card-2:#FAFAFA;
  --text:#364151; --title:#1A1A1A; --muted:#7A7F87; --line:#E2E2E2;
  --link:var(--gx-violet-bright); --on-accent:#FFFFFF;

  /* barra lateral (verde selva: el único panel sólido) */
  --side-bg:#014326; --side-text:#BFD8CB; --side-text-hover:#FFFFFF;
  --side-group:#6f9e86; --side-line:rgba(255,255,255,.10);
  --side-active:var(--gx-magenta); --side-active-text:#FFFFFF;

  /* semáforo / riesgo */
  --ok:#00B050; --ok-solid:#014326; --warn:#FFB200; --crit:#D11B80;
  --sem-verde:#00B050; --sem-amarillo:#C98A00; --sem-naranja:#E87722;
  --sem-rojo:#D11B80; --sem-gris:#9CA1A8; --sem-morado:#5E18EB;

  /* tipografía */
  --font:"Atkinson Hyperlegible","Avenir Next",system-ui,-apple-system,sans-serif;
  --font-display:"Atkinson Hyperlegible","Avenir Next",system-ui,-apple-system,sans-serif;
  --fw-light:300; --fw-med:500; --fw-semi:600; --fw-bold:700;

  /* forma / movimiento */
  --r-0:0px; --r-sm:6px; --r-pill:10px; --r-lg:22px; --r-round:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:200ms; --dur-fast:120ms;
  --rail-w:76px; --side-w:252px;
}

/* ----- Tema oscuro ----- */
:root[data-theme="dark"] {
  --bg:#121316; --panel:#1b1d21; --card:#212429; --card-2:#191b1f;
  --text:#D5D9DF; --title:#FFFFFF; --muted:#8A9099; --line:#2c2f35;
  --link:#B79BFF; --on-accent:#FFFFFF;
  --side-bg:#0b1f16; --side-text:#9FBBAD; --side-text-hover:#FFFFFF;
  --side-group:#5c806f; --side-line:rgba(255,255,255,.08);
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font); font-weight:var(--fw-light);
  font-size:15px; line-height:1.42; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3,h4 { font-family:var(--font); font-weight:var(--fw-bold); color:var(--title); margin:0; line-height:1.14; }
strong,b { font-weight:var(--fw-semi); }
svg { display:block; }

/* ---------------- LOGIN ---------------- */
.login-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--gx-green-dark); position:relative; padding:24px; }
.login-card { background:var(--gx-white); width:400px; max-width:92vw; border-radius:var(--r-lg); padding:36px 34px; }
.login-card h1 { font-size:22px; margin:0 0 4px; color:var(--gx-black); }
.login-card .sub { color:var(--muted); margin:0 0 22px; font-size:14px; font-weight:var(--fw-light); }
.login-logo { height:46px; margin-bottom:20px; }
.login-badge { display:none; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; font-weight:var(--fw-semi); color:var(--gx-black); margin-bottom:6px; }
.field select, .field input, .input {
  width:100%; padding:11px 13px; border:1px solid var(--gx-grey-300); border-radius:var(--r-sm);
  font-size:15px; font-family:inherit; background:#fff; color:var(--gx-slate); }
.field input:focus, .input:focus { outline:none; border-color:var(--accent); }
.login-ornament { display:none; }

/* ---------------- BOTONES ---------------- */
.btn { border:0; border-radius:var(--r-pill); padding:11px 18px; font-weight:var(--fw-bold); font-size:15px;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  transition:background var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--accent); color:var(--on-accent); border:2.5px solid var(--accent-deep); width:100%; }
.btn-primary:hover { background:var(--accent-deep); }
.btn-ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover { background:var(--card); }
.btn-sm { padding:8px 13px; font-size:13.5px; }
.btn-acento { background:var(--accent); color:var(--on-accent); border:2.5px solid var(--accent-deep); }
.btn-acento:hover { background:var(--accent-deep); }
.btn-danger { background:var(--gx-magenta-deep); color:#fff; }
.btn-danger:hover { background:#a81568; }

/* ---------------- LAYOUT ---------------- */
.app { min-height:100vh; }
.sidebar { position:fixed; top:0; left:0; height:100vh; width:var(--rail-w); overflow:hidden;
  background:var(--side-bg); color:var(--side-text); display:flex; flex-direction:column;
  z-index:40; }
.sidebar .brand { display:flex; align-items:center; gap:12px; padding:16px; height:64px; flex-shrink:0; }
.sidebar .brand .logo { width:44px; height:44px; flex-shrink:0; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:16px; border-radius:var(--r-0); letter-spacing:.02em; }
.sidebar .brand .brand-text { white-space:nowrap; opacity:0; transition:opacity var(--dur) var(--ease); }
.sidebar .brand b { font-size:15px; color:#fff; line-height:1.1; display:block; }
.sidebar .brand span { font-size:11px; color:var(--side-group); }

.nav { padding:6px 10px; overflow-y:auto; overflow-x:hidden; flex:1; }
.nav::-webkit-scrollbar { width:0; }
.nav .group { color:var(--side-group); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  margin:14px 10px 6px; white-space:nowrap; opacity:0; transition:opacity var(--dur) var(--ease); height:12px; }
.nav a { display:flex; align-items:center; gap:14px; padding:10px 13px; border-radius:var(--r-0);
  color:var(--side-text); font-size:14px; white-space:nowrap; margin-bottom:2px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a svg { width:22px; height:22px; flex-shrink:0; stroke:currentColor; }
.nav a .label { opacity:0; transition:opacity var(--dur) var(--ease); }
.nav a:hover { background:rgba(0,0,0,.18); color:var(--side-text-hover); }
.nav a.active { background:var(--side-active); color:var(--side-active-text); }
.nav a .tag { margin-left:auto; font-size:10px; background:rgba(255,255,255,.15); color:#fff; padding:1px 7px; border-radius:var(--r-round); }

.sidebar .foot { padding:12px; border-top:1px solid var(--side-line); flex-shrink:0; }
.theme-toggle { display:flex; align-items:center; gap:14px; width:100%; background:transparent; border:0;
  color:var(--side-text); padding:8px 3px; border-radius:var(--r-0); white-space:nowrap;
  transition:color var(--dur) var(--ease); }
.theme-toggle:hover { color:var(--side-text-hover); }
.theme-toggle svg { width:22px; height:22px; flex-shrink:0; }
.theme-toggle .label { opacity:0; transition:opacity var(--dur) var(--ease); font-size:13px; }
.foot-note { font-size:11px; color:var(--side-group); margin-top:10px; white-space:nowrap; opacity:0; transition:opacity var(--dur) var(--ease); }
.foot-note .link { color:var(--side-text-hover); }

.main { margin-left:var(--rail-w); display:flex; flex-direction:column; min-height:100vh; }
.topbar { height:64px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:20; }
.topbar .search { flex:1; max-width:460px; position:relative; }
.topbar .search input { width:100%; padding:9px 12px 9px 38px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--card); color:var(--text); font-size:14px; }
.topbar .search input:focus { outline:none; border-color:var(--accent); }
.topbar .search .ic { position:absolute; left:11px; top:8px; color:var(--muted); }
.topbar .search .ic svg { width:18px; height:18px; stroke:currentColor; }
.topbar .spacer { flex:1; }
.iconbtn { position:relative; width:40px; height:40px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--panel); color:var(--text); display:grid; place-items:center; }
.iconbtn svg { width:19px; height:19px; stroke:currentColor; }
.iconbtn:hover { background:var(--card); }
.iconbtn .dot { position:absolute; top:-5px; right:-5px; background:var(--accent); color:#fff;
  font-size:10px; min-width:16px; height:16px; border-radius:var(--r-round); display:grid; place-items:center; padding:0 3px; font-weight:700; }
.usercell { display:flex; align-items:center; gap:10px; }
.avatar { width:36px; height:36px; border-radius:var(--r-round); background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px; }
.usercell small { color:var(--muted); }

.content { padding:26px 30px; overflow-x:auto; flex:1; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.page-head h2 { margin:0; font-size:26px; color:var(--title); }
.page-head p { margin:4px 0 0; color:var(--muted); font-size:14px; }

/* ---------------- CARDS / KPIs ---------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-0); padding:16px 18px; }
.kpi { cursor:pointer; transition:background var(--dur) var(--ease); position:relative; overflow:hidden; }
.kpi:hover { background:var(--card-2); }
.kpi .n { font-size:30px; font-weight:800; line-height:1; color:var(--title); }
.kpi .l { color:var(--muted); font-size:13px; margin-top:6px; }
.kpi .bar { height:4px; border-radius:var(--r-0); margin-top:14px; background:var(--line); }
.kpi.acc-verde .bar{background:var(--macaw-leaf,var(--sem-verde));} .kpi.acc-amarillo .bar{background:var(--macaw-yellow,var(--warn));}
.kpi.acc-naranja .bar{background:var(--macaw-orange,var(--sem-naranja));} .kpi.acc-rojo .bar{background:var(--macaw-coral,var(--crit));}
.kpi.acc-azul .bar{background:var(--dash-1,var(--accent));} .kpi.acc-morado .bar{background:var(--macaw-blue,var(--gx-violet));}

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:820px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-0); }
.panel .ph { padding:13px 16px; border-bottom:1px solid var(--line); font-weight:var(--fw-bold); color:var(--title);
  display:flex; justify-content:space-between; align-items:center; font-size:15px; }
.panel .pb { padding:16px; }

/* barras horizontales simples */
.hbar { display:grid; grid-template-columns:130px 1fr 40px; align-items:center; gap:10px; margin:9px 0; font-size:13px; color:var(--text); }
.hbar > div:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar .track { background:var(--line); border-radius:var(--r-0); height:12px; overflow:hidden; }
.hbar .fill { height:100%; background:var(--accent); }

/* ---------------- GRÁFICAS ---------------- */
.chart-donut { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.chart-legend { display:flex; flex-direction:column; gap:7px; font-size:13px; }
.lg-item { display:flex; align-items:center; gap:8px; color:var(--text); }
.lg-item:hover { color:var(--accent-deep); }
.lg-dot { width:11px; height:11px; border-radius:var(--r-0); display:inline-block; }
.chart-hbars .hbar:hover .fill { filter:brightness(.92); }

/* ---------------- FILTROS ---------------- */
.filterbar { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-0); padding:14px; margin-bottom:18px; }
.filterbar .fg { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
.filterbar label { font-size:11px; color:var(--muted); font-weight:var(--fw-semi); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
.filterbar select, .filterbar input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; background:var(--panel); color:var(--text); }
.filterbar .fbtns { margin-top:10px; display:flex; gap:8px; }

/* ---------------- TABLA ---------------- */
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.toolbar .input, .toolbar select { padding:9px 11px; min-width:120px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--text); font-size:14px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.chip { border:1px solid var(--line); background:var(--panel); border-radius:var(--r-pill); padding:6px 13px; font-size:12.5px; color:var(--muted); font-weight:var(--fw-med); transition:all var(--dur) var(--ease); }
.chip:hover { color:var(--title); }
.chip.active { background:var(--accent-deep); color:#fff; border-color:var(--accent-deep); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-0); background:var(--panel); }
table.grid { width:100%; border-collapse:collapse; font-size:13.5px; white-space:nowrap; }
table.grid th, table.grid td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; }
table.grid th { background:var(--accent-deep); color:#fff; font-weight:var(--fw-bold); font-size:12px; letter-spacing:.02em;
  text-transform:uppercase; position:sticky; top:0; cursor:pointer; }
table.grid tbody tr { color:var(--text); }
table.grid tbody tr:nth-child(even) { background:var(--card); }
table.grid tbody tr:hover { background:var(--card-2); cursor:pointer; }
:root[data-theme="dark"] table.grid tbody tr:hover { background:#2a2e34; }
table.grid td .folio { font-weight:var(--fw-bold); color:var(--accent-deep); }
:root[data-theme="dark"] table.grid td .folio { color:var(--gx-magenta); }

.sem { display:inline-flex; align-items:center; gap:6px; font-weight:var(--fw-semi); font-size:12.5px; }
.sem .dot { width:10px; height:10px; border-radius:var(--r-round); display:inline-block; }
.badge { display:inline-block; padding:3px 9px; border-radius:var(--r-0); font-size:11px; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.02em; }
.b-riesgo-bajo{background:#e6f4ea;color:#014326;} .b-riesgo-medio{background:#fff3d6;color:#7a5300;}
.b-riesgo-alto{background:#ffe2cf;color:#9a3412;} .b-riesgo-critico{background:#fbdcec;color:#a01166;}
:root[data-theme="dark"] .b-riesgo-bajo{background:#0f3322;color:#7fdca6;}
:root[data-theme="dark"] .b-riesgo-medio{background:#3a2f10;color:#f0c860;}
:root[data-theme="dark"] .b-riesgo-alto{background:#3a2413;color:#f0a878;}
:root[data-theme="dark"] .b-riesgo-critico{background:#3a1128;color:#f28dc0;}
.pill-hab { background:var(--gx-amber); color:var(--gx-ink); padding:2px 8px; border-radius:var(--r-0); font-size:10px; font-weight:var(--fw-bold); text-transform:uppercase; }
.pill-det { background:var(--gx-violet); color:#fff; padding:2px 8px; border-radius:var(--r-0); font-size:10px; font-weight:var(--fw-bold); text-transform:uppercase; }

/* ---------------- FICHA ---------------- */
.ficha-head { background:var(--gx-green-dark); color:#fff; border-radius:var(--r-0); padding:22px 24px; margin-bottom:18px; }
.ficha-head .folio { font-size:12px; color:#9fd0b6; letter-spacing:.02em; }
.ficha-head h2 { margin:6px 0 12px; color:#fff; font-size:24px; }
.ficha-head .meta { display:flex; gap:26px; flex-wrap:wrap; font-size:13.5px; color:#eaf3ee; }
.ficha-head .meta div span { display:block; color:#8fc0a6; font-size:11px; margin-bottom:2px; text-transform:uppercase; letter-spacing:.03em; }
.ficha-head .sem { color:#fff; }
.ficha-head .badge { color:var(--gx-ink); }
.next-box { border:2.5px solid var(--accent-deep); background:var(--panel); border-radius:var(--r-pill); padding:16px 18px; margin-bottom:16px; }
.next-box .t { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-deep); font-weight:var(--fw-bold); }
.next-box .a { font-size:16px; font-weight:var(--fw-semi); margin:5px 0; color:var(--title); }
.timeline { position:relative; padding-left:22px; }
.timeline::before { content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--line); }
.tl-item { position:relative; padding:0 0 16px 6px; }
.tl-item::before { content:''; position:absolute; left:-19px; top:3px; width:11px; height:11px; border-radius:var(--r-round); background:var(--accent); border:2px solid var(--panel); }
.tl-item .when { font-size:11px; color:var(--muted); }
.tl-item .what { font-weight:var(--fw-semi); font-size:13.5px; color:var(--title); }
.tl-item .who { font-size:12.5px; color:var(--muted); }
.dl { display:grid; grid-template-columns:160px 1fr; gap:8px 14px; font-size:13.5px; }
.dl dt { color:var(--muted); } .dl dd { margin:0; color:var(--text); }

/* ---------------- MODALES ---------------- */
.modal-back { position:fixed; inset:0; background:rgba(10,20,15,.55); display:grid; place-items:center; z-index:60; padding:20px; }
.modal { background:var(--panel); width:580px; max-width:96vw; max-height:92vh; overflow:auto; border-radius:var(--r-lg); border:1px solid var(--line); }
.modal .mh { padding:18px 20px; border-bottom:1px solid var(--line); font-weight:var(--fw-bold); color:var(--title);
  display:flex; justify-content:space-between; align-items:center; font-size:17px; }
.modal .mx { cursor:pointer; color:var(--muted); font-size:15px; line-height:1; }
.modal .mx:hover { color:var(--accent-deep); }
.modal .mb { padding:20px; }
.modal .mf { padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }

/* ---------------- FORMULARIOS ---------------- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full { grid-column:1/-1; }
.form-grid label { display:block; font-size:12px; font-weight:var(--fw-semi); color:var(--muted); margin-bottom:5px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px;
  font-family:inherit; background:var(--panel); color:var(--text); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline:none; border-color:var(--accent); }
.form-grid textarea { resize:vertical; min-height:64px; }
.req::after { content:' *'; color:var(--accent); }
.errbox { background:#fbdcec; color:#a01166; border:1px solid #f4b8d8; border-radius:var(--r-sm); padding:10px 12px; font-size:13px; margin-bottom:14px; }
.okbox { background:#e6f4ea; color:#014326; border:1px solid #bfe3cd; border-radius:var(--r-sm); padding:10px 12px; font-size:13px; margin-bottom:14px; }
:root[data-theme="dark"] .errbox { background:#3a1128; color:#f28dc0; border-color:#5a1f43; }
:root[data-theme="dark"] .okbox { background:#0f3322; color:#7fdca6; border-color:#1c5237; }
.errbox ul { margin:6px 0 0; padding-left:18px; }
.section-title { font-weight:var(--fw-bold); color:var(--title); margin:8px 0 4px; font-size:13px; grid-column:1/-1; border-top:1px solid var(--line); padding-top:12px; }
.actions-row { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }

/* ---------------- CALENDARIO ---------------- */
.cal-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-0); overflow:hidden; }
.cal-dow { background:var(--card); text-align:center; padding:9px; font-size:11px; font-weight:var(--fw-bold); color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.cal-cell { background:var(--panel); min-width:0; min-height:98px; padding:6px; font-size:12px; }
.cal-cell.out { background:var(--card-2); color:var(--muted); }
.cal-cell .dn { font-weight:var(--fw-bold); font-size:12px; color:var(--muted); }
.cal-cell.today .dn { background:var(--accent); color:#fff; border-radius:var(--r-round); width:22px; height:22px; display:grid; place-items:center; }
.cal-ev { border-radius:var(--r-0); min-width:0; max-width:100%; padding:2px 6px; margin-top:3px; font-size:11px; color:#fff; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:var(--fw-med); }
.ev-compromiso{background:var(--gx-magenta-deep);} .ev-accion{background:var(--gx-green-dark);}
.ev-vencimiento{background:var(--gx-violet);} .ev-audiencia{background:var(--gx-magenta);} .ev-prevencion{background:var(--sem-amarillo);}
.agenda-item { display:flex; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line); align-items:center; cursor:pointer; }
.agenda-item:hover { background:var(--card); }
.agenda-date { min-width:96px; font-weight:var(--fw-bold); color:var(--accent-deep); font-size:13px; }
.dotev { width:10px; height:10px; border-radius:var(--r-0); display:inline-block; }

/* ---------------- MISC ---------------- */
.pct { height:8px; background:var(--line); border-radius:var(--r-round); overflow:hidden; }
.pct > span { display:block; height:100%; background:var(--ok); }
.tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.tab { padding:10px 15px; cursor:pointer; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; font-weight:var(--fw-semi); }
.tab.active { color:var(--title); border-bottom-color:var(--accent); }
.right{text-align:right;} .center{text-align:center;}
.empty { padding:40px; text-align:center; color:var(--muted); }
.soon { display:inline-block; background:var(--card); color:var(--muted); padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:var(--fw-semi); }
.link { color:var(--link); font-weight:var(--fw-med); cursor:pointer; }
.link:hover { color:var(--accent-deep); text-decoration:underline; }
.warn-text { color:var(--accent-deep); font-weight:var(--fw-semi); }

/* ---------------- RESPONSIVE ---------------- */
.menu-btn { display:none; }
@media (max-width:820px){
  .sidebar { transform:translateX(-100%); width:var(--side-w); transition:transform var(--dur) var(--ease); }
  .sidebar.open { transform:translateX(0); }
  .sidebar .brand-text, .sidebar .nav .group, .sidebar .nav a .label,
  .sidebar .theme-toggle .label, .sidebar .foot-note { opacity:1; }
  .main { margin-left:0; }
  .menu-btn { display:grid; }
  .content { padding:18px; }
}

/* ---- Toasts accesibles (reemplazan avisos nativos) ---- */
.toast-host{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:9999;max-width:min(92vw,360px)}
.toast{background:var(--panel,#fff);color:var(--text,#111);border:2px solid var(--line,#e5e7eb);border-radius:10px;padding:12px 14px;font-size:13.5px;opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}
.toast.out{opacity:0;transform:translateY(8px)}
.toast-error{border-color:#dc2626;background:#fff2f2}
.toast-success{border-color:#16a34a;background:#f0fdf4}
.toast-info{border-color:var(--accent,#E32C91);background:#fff4fa}
:root[data-theme="dark"] .toast{background:#1a2b22;color:#e8f0ea;border-color:#254235}
:root[data-theme="dark"] .toast-error{background:#351b1b;border-color:#ef4444}
:root[data-theme="dark"] .toast-success{background:#123222;border-color:#22c55e}
:root[data-theme="dark"] .toast-info{background:#35152a;border-color:var(--accent,#E32C91)}

/* ---- Botón tipo enlace (acciones en tablas) ---- */
.linkbtn{background:none;border:0;color:var(--accent,#E32C91);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.linkbtn:hover{color:var(--accent-deep,#D11B80)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
html,body{max-width:100%;overflow-x:hidden}
html{scrollbar-gutter:stable}

/* ---- Backdrop del menú móvil ---- */
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39;border:0}
@media (min-width:821px) and (hover:hover){ .menu-backdrop{display:none!important} }

/* ---- Móvil: una columna, táctiles ≥44px, menú deslizable ---- */
@media (max-width:768px){
  .form-grid{grid-template-columns:1fr!important}
  .form-grid .full{grid-column:1/-1}
  .filterbar .fg{grid-template-columns:1fr 1fr}
  .actions-row{flex-wrap:wrap}
  .btn,.btn-sm,.iconbtn,.nav a,.linkbtn,.theme-toggle,input,select,textarea{min-height:44px}
  .filterbar select,.filterbar input,.toolbar .input,.toolbar select,.form-grid input,.form-grid select{min-height:44px}
  .modal .mx{min-width:44px;min-height:44px;display:grid;place-items:center}
  .iconbtn{width:44px;height:44px}
  .sidebar{width:var(--side-w,252px);transform:translateX(-100%);transition:transform var(--dur,.2s) var(--ease,ease)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0!important}
  .ficha-head .meta{grid-template-columns:1fr 1fr}
  table.grid{min-width:640px}
}

/* ---- Solo para lectores de pantalla ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Chips como botones, paginación y vistas guardadas ---- */
.chips .chip{font:inherit;cursor:pointer}
button.chip{border:1px solid var(--line);background:var(--panel,#fff);color:inherit}
button.chip.active{background:var(--accent,#E32C91);color:var(--on-accent,#fff);border-color:var(--accent,#E32C91)}
.linkchip{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.pager{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
thead th[role="button"]{cursor:pointer}
tbody tr[role="link"]{cursor:pointer}
tbody tr[role="link"]:focus-visible{outline:2px solid var(--accent,#E32C91);outline-offset:-2px}

/* ---- Móvil: 44px táctiles y matriz como tarjetas ---- */
@media (max-width:768px){
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .linkbtn,.link{min-height:44px;display:inline-flex;align-items:center}
  /* La matriz se muestra como tarjetas legibles (sin tabla ancha) */
  table.matrix-grid, table.matrix-grid tbody, table.matrix-grid tr, table.matrix-grid td { display:block; width:auto; }
  table.matrix-grid thead { position:absolute; left:-9999px; }
  table.matrix-grid tr { border:1px solid var(--line); border-radius:10px; margin:0 0 10px; padding:6px 10px; }
  table.matrix-grid td { border:0; padding:6px 0; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  table.matrix-grid td::before { content:attr(data-label); font-weight:700; color:var(--muted); text-align:left; }
  table.matrix-grid{min-width:0!important}
}

/* ============================================================
   V17 · OBSERVATORIO JURÍDICO
   Dirección visual premium, autocontenida y exclusivamente estética.
   ============================================================ */
:root {
  --bg:#F1EFE8;
  --panel:#FCFBF7;
  --card:#F6F4ED;
  --card-2:#EEEAE0;
  --text:#39413D;
  --title:#18231E;
  --muted:#646D68;
  --line:#C9CCC5;
  --line-soft:#DFE0DA;
  --link:#3653C7;
  --accent:#D82482;
  --accent-deep:#B8176C;
  --focus:#7C32BE;
  --focus-halo:#FCFBF7;
  --side-bg:#073D2A;
  --side-text:#C9D9D0;
  --side-text-hover:#FFFFFF;
  --side-group:#92B2A1;
  --side-active:#F4E9E0;
  --side-active-text:#073D2A;
  --ok:#167047;
  --warn:#A96700;
  --crit:#B81754;
  --sem-verde:#1A6C1D;
  --sem-amarillo:#F4D439;
  --sem-naranja:#F3AA34;
  --sem-rojo:#ED492D;
  --sem-gris:#66716B;
  --sem-morado:#6543A6;
  --chart-primary:#17684A;
  --chart-title:#18231E;
  --chart-muted:#68716C;
  --dash-1:#115F9A;
  --dash-2:#ED492D;
  --dash-3:#F3AA34;
  --dash-4:#4463E3;
  --dash-5:#48B5C4;
  --dash-6:#76C68F;
  --dash-7:#F4D439;
  --dash-8:#A6D75B;
  --dash-9:#22A7F0;
  --macaw-leaf:#1A6C1D;
  --macaw-coral:#ED492D;
  --macaw-orange:#F3AA34;
  --macaw-yellow:#F4D439;
  --macaw-blue:#4463E3;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --login-bg:#ECECE8;
  --login-panel:#F7F7F4;
  --login-text:#2F3431;
  --login-muted:#666C68;
  --login-border:#C5C8C4;
  --login-input:#FFFFFF;
  --login-input-border:#8B918C;
  --login-action:#343A36;
  --login-action-hover:#242925;
  --r-sm:5px;
  --r-pill:7px;
  --r-lg:12px;
  --rail-w:76px;
  --side-w:244px;
  --shadow-float:0 18px 48px rgba(20,37,29,.10);
}

:root[data-theme="dark"] {
  --bg:#101713;
  --panel:#17211C;
  --card:#1C2822;
  --card-2:#223029;
  --text:#D4DCD6;
  --title:#F5F1E8;
  --muted:#A7B0AA;
  --line:#46534C;
  --line-soft:#2C3932;
  --link:#C2AAF0;
  --accent:#F05BA9;
  --accent-deep:#DD3C92;
  --focus:#D39AF7;
  --focus-halo:#101713;
  --side-bg:#081C14;
  --side-text:#B9CEC2;
  --side-group:#86A394;
  --side-active:#EEE6DC;
  --side-active-text:#0A3626;
  --chart-primary:#61B18E;
  --chart-title:#F5F1E8;
  --chart-muted:#A7B0AA;
  --login-bg:#171A18;
  --login-panel:#202421;
  --login-text:#ECEFEA;
  --login-muted:#B4BBB6;
  --login-border:#4A514D;
  --login-input:#171A18;
  --login-input-border:#747D77;
  --login-action:#E6E9E4;
  --login-action-hover:#F2F4F0;
}

body {
  font-family:var(--font);
  font-weight:400;
  background:var(--bg);
  letter-spacing:-.006em;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; }
button,input,select,textarea { font:inherit; }
button:disabled { cursor:not-allowed; opacity:.52; }

/* El acceso no revela marca, producto ni área antes de autenticar. */
.login-wrap {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:var(--login-bg);
}
.login-card {
  width:344px;
  max-width:calc(100vw - 40px);
  padding:28px;
  background:var(--login-panel);
  color:var(--login-text);
  border:1px solid var(--login-border);
  border-radius:8px;
  box-shadow:none;
}
.login-kicker {
  color:var(--login-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.login-card h1 {
  color:inherit;
  font-family:var(--font);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:5px;
}
.login-card .sub { color:var(--login-muted); margin:0 0 24px; font-size:13px; }
.login-card .field { margin-bottom:15px; }
.login-card .field label { color:inherit; font-size:12px; font-weight:600; }
.login-card .field input {
  min-height:44px;
  border:1px solid var(--login-input-border);
  border-radius:5px;
  background:var(--login-input);
  color:var(--login-text);
  padding:10px 12px;
}
.login-card .btn-primary {
  width:100%;
  min-height:44px;
  margin-top:3px;
  background:var(--login-action);
  border:1px solid var(--login-action);
  color:var(--login-panel);
  border-radius:5px;
  font-size:14px;
  font-weight:600;
}
.login-card .btn-primary:hover { background:var(--login-action-hover); border-color:var(--login-action-hover); }
.login-note { color:var(--login-muted); font-size:12.5px; text-align:center; margin:18px 0 0; }
.login-logo,.login-ornament,.login-badge { display:none!important; }

/* Navegación editorial: riel compacto que revela el índice al pasar o enfocar. */
.sidebar {
  width:var(--side-w);
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.08);
  clip-path:inset(0 calc(var(--side-w) - var(--rail-w)) 0 0);
  transition:clip-path 240ms cubic-bezier(.25,1,.5,1);
}
.sidebar:hover,.sidebar:focus-within {
  clip-path:inset(0);
}
.sidebar .brand { height:76px; padding:15px 17px; gap:12px; border-bottom:1px solid var(--side-line); }
.sidebar .brand .logo {
  width:42px;
  height:42px;
  border-radius:50% 50% 46% 54% / 46% 42% 58% 54%;
  background:#F0E6DA;
  color:#073D2A;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
}
.sidebar .brand .brand-text,.sidebar .nav .group,.sidebar .nav a .label,
.sidebar .theme-toggle .label,.sidebar .foot-note {
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
  transition:opacity 160ms cubic-bezier(.25,1,.5,1),transform 240ms cubic-bezier(.25,1,.5,1);
}
.sidebar:hover .brand-text,.sidebar:focus-within .brand-text,
.sidebar:hover .nav .group,.sidebar:focus-within .nav .group,
.sidebar:hover .nav a .label,.sidebar:focus-within .nav a .label,
.sidebar:hover .theme-toggle .label,.sidebar:focus-within .theme-toggle .label,
.sidebar:hover .foot-note,.sidebar:focus-within .foot-note {
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
/* Tras elegir una opción con mouse, el riel gana sobre :hover/:focus-within
   hasta que el cursor sale; el siguiente hover vuelve a desplegarlo. */
.sidebar.is-collapsing {
  clip-path:inset(0 calc(var(--side-w) - var(--rail-w)) 0 0);
}
.sidebar.is-collapsing .brand-text,
.sidebar.is-collapsing .nav .group,
.sidebar.is-collapsing .nav a .label,
.sidebar.is-collapsing .theme-toggle .label,
.sidebar.is-collapsing .foot-note {
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
}
.sidebar .brand b { font-family:var(--font-display); font-size:14px; letter-spacing:-.02em; }
.sidebar .brand span { font-size:10.5px; letter-spacing:.035em; }
.nav { padding:12px 10px; }
.nav .group { margin:17px 10px 7px; height:auto; font-size:9.5px; font-weight:700; letter-spacing:.14em; }
.nav a {
  min-height:42px;
  padding:9px 11px;
  border-radius:6px;
  font-size:13.5px;
  margin-bottom:3px;
}
.nav a svg { width:19px; height:19px; stroke-width:1.7; }
.nav a:hover { background:rgba(255,255,255,.075); }
.nav a.active { background:var(--side-active); color:var(--side-active-text); font-weight:700; }
.nav a.active svg { stroke-width:2.15; }
.main { margin-left:var(--rail-w); }
.topbar {
  min-height:72px;
  height:72px;
  padding:0 clamp(18px,2.4vw,34px);
  background:color-mix(in srgb,var(--panel) 98%,var(--bg));
  border-color:var(--line-soft);
}
.topbar .search { max-width:560px; }
.topbar .search input {
  min-height:42px;
  border-color:var(--line);
  border-radius:6px;
  background:var(--card);
  padding-left:40px;
}
.iconbtn { border-radius:6px; border-color:var(--line); background:var(--panel); }
.avatar { background:#E7D4C8; color:#5B183B; border-radius:50% 50% 46% 54% / 46% 42% 58% 54%; }
:root[data-theme="dark"] .avatar { background:#5A2442; color:#FFE8F4; }
.content {
  position:relative;
  padding:clamp(24px,3.4vw,48px) clamp(20px,4vw,58px) 56px;
  overflow-x:clip;
  isolation:isolate;
}

.page-head { margin-bottom:26px; align-items:flex-end; gap:18px; }
.page-head > div:first-child::before {
  content:"OPERACIÓN JURÍDICA";
  display:block;
  color:var(--accent-deep);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:7px;
}
.page-head h2 { font-size:clamp(28px,3.2vw,43px); max-width:840px; }
.page-head p { margin-top:7px; font-size:13.5px; max-width:760px; color:var(--muted); }

/* Controles sobrios con contraste y foco inequívocos. */
.btn { border-radius:6px; min-height:40px; padding:9px 16px; font-size:13.5px; font-weight:700; letter-spacing:.005em; }
.btn-primary,.btn-acento { width:auto; background:var(--accent-deep); border:1px solid var(--accent-deep); color:#FFF; }
.btn-primary:hover,.btn-acento:hover { background:#981052; }
:root[data-theme="dark"] .btn-primary:hover,:root[data-theme="dark"] .btn-acento:hover { background:#F05BA9; color:#25121C; }
.btn-ghost { border:1px solid var(--line); background:var(--panel); }
.btn-ghost:hover { background:var(--card-2); }
.btn-danger { background:var(--crit); }
.field select,.field input,.input,.filterbar select,.filterbar input,.toolbar .input,.toolbar select,
.form-grid input,.form-grid select,.form-grid textarea {
  border-color:var(--line);
  border-radius:5px;
  background:var(--panel);
  color:var(--text);
}
.field input:focus,.input:focus,.topbar .search input:focus,
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,
.filterbar input:focus,.filterbar select:focus,.toolbar input:focus,.toolbar select:focus { border-color:var(--focus); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px;
  box-shadow:0 0 0 2px var(--focus-halo);
  border-radius:5px;
}

/* Superficies y jerarquía de información. */
.card,.panel,.filterbar,.table-wrap,.modal { border-color:var(--line-soft); background:var(--panel); }
.card { border-radius:8px; padding:17px 18px; }
.panel { border-radius:8px; overflow:hidden; }
.panel .ph { min-height:50px; padding:14px 17px; font-family:var(--font-display); font-size:15px; }
.panel .pb { padding:18px; }
.cards { gap:12px; }
.kpi { min-height:120px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--panel); }
.kpi:hover { background:var(--card); }
.kpi .n { font-family:var(--font-display); font-size:36px; font-weight:700; letter-spacing:-.035em; }
.kpi .l { color:var(--text); font-size:12.5px; font-weight:550; }
.kpi .bar { height:3px; margin-top:14px; opacity:.9; }
#dashBody > .cards:first-child { grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; }
#dashBody > .cards:first-child .kpi,
#dashBody > .cards:first-child .kpi:first-child,
#dashBody > .cards:first-child .kpi:nth-child(2),
#dashBody > .cards:first-child .kpi:nth-child(3) {
  grid-column:auto;
  min-height:128px;
  background:var(--panel);
  color:var(--text);
}
#dashBody > .cards:first-child .kpi .n,
#dashBody > .cards:first-child .kpi:first-child .n { color:var(--title); font-size:36px; }
#dashBody > .cards:first-child .kpi:first-child .l { color:var(--text); }
#dashBody > .cards:first-child .kpi.acc-azul .bar { background:var(--dash-1); }
#dashBody > .cards:first-child .kpi.acc-verde .bar { background:var(--macaw-leaf); }
#dashBody > .cards:first-child .kpi.acc-amarillo .bar { background:var(--macaw-yellow); }
#dashBody > .cards:first-child .kpi.acc-naranja .bar { background:var(--macaw-orange); }
#dashBody > .cards:first-child .kpi.acc-morado .bar { background:var(--macaw-blue); }
#dashBody > .cards:first-child .kpi.acc-rojo .bar { background:var(--macaw-coral); }
#dashBody > .cards:first-child .kpi:nth-child(1) .bar { background:var(--dash-1); }
#dashBody > .cards:first-child .kpi:nth-child(2) .bar { background:var(--dash-9); }
#dashBody > .cards:first-child .kpi:nth-child(3) .bar { background:var(--dash-6); }
#dashBody > .cards:first-child .kpi:nth-child(4) .bar { background:var(--macaw-leaf); }
#dashBody > .cards:first-child .kpi:nth-child(5) .bar { background:var(--macaw-yellow); }
#dashBody > .cards:first-child .kpi:nth-child(6) .bar { background:var(--macaw-orange); }
#dashBody > .cards:first-child .kpi:nth-child(7) .bar { background:var(--macaw-coral); }
#dashBody > .cards:first-child .kpi:nth-child(8) .bar { background:var(--macaw-blue); }
#dashBody > .cards:first-child .kpi:nth-child(9) .bar { background:var(--dash-2); }
#dashBody > .cards:first-child .kpi:nth-child(10) .bar { background:var(--dash-5); }

.filterbar { border-radius:8px; padding:16px; }
.filterbar label,.form-grid label { font-weight:700; letter-spacing:.045em; }
.toolbar { margin-bottom:16px; }
.chips { gap:6px; }
.chip { border-radius:999px; border-color:var(--line); padding:7px 13px; }
.chip.active,button.chip.active { background:var(--side-bg); border-color:var(--side-bg); color:#FFF; }
:root[data-theme="dark"] .chip.active,:root[data-theme="dark"] button.chip.active { background:#E7E0D6; border-color:#E7E0D6; color:#123326; }

/* Tablas de alta densidad: jerarquía editorial sin ruido decorativo. */
.table-wrap { border-radius:8px; }
table.grid { font-size:13px; font-variant-numeric:tabular-nums; }
table.grid th,table.grid td { padding:12px 14px; border-color:var(--line-soft); }
table.grid th {
  background:var(--side-bg);
  color:#F6F1E9;
  font-size:10.5px;
  letter-spacing:.075em;
  border-bottom-width:4px;
}
table.grid th:nth-child(9n+1) { border-bottom-color:var(--dash-1); }
table.grid th:nth-child(9n+2) { border-bottom-color:var(--macaw-coral); }
table.grid th:nth-child(9n+3) { border-bottom-color:var(--macaw-orange); }
table.grid th:nth-child(9n+4) { border-bottom-color:var(--macaw-yellow); }
table.grid th:nth-child(9n+5) { border-bottom-color:var(--macaw-blue); }
table.grid th:nth-child(9n+6) { border-bottom-color:var(--dash-5); }
table.grid th:nth-child(9n+7) { border-bottom-color:var(--dash-6); }
table.grid th:nth-child(9n+8) { border-bottom-color:var(--dash-8); }
table.grid th:nth-child(9n+9) { border-bottom-color:var(--dash-9); }
table.grid tbody tr:nth-child(even) { background:var(--card); }
table.grid tbody tr:hover { background:#E8ECE7; }
:root[data-theme="dark"] table.grid tbody tr:hover { background:#28372F; }
table.grid td .folio { color:var(--link); font-weight:700; }
.b-riesgo-bajo { background:#E4F1E4; color:#155719; }
.b-riesgo-medio { background:#FFF4C6; color:#655400; }
.b-riesgo-alto { background:#FCE9CF; color:#7B4600; }
.b-riesgo-critico { background:#FBE1DB; color:#92291B; }
:root[data-theme="dark"] .b-riesgo-bajo { background:#173C1A; color:#9AD49D; }
:root[data-theme="dark"] .b-riesgo-medio { background:#403A12; color:#F4D439; }
:root[data-theme="dark"] .b-riesgo-alto { background:#432E16; color:#F3AA34; }
:root[data-theme="dark"] .b-riesgo-critico { background:#421F1B; color:#FF8C78; }
.pill-hab { background:var(--macaw-yellow); color:#312A05; }
.pill-det { background:var(--macaw-blue); color:#F8F8F4; }

/* Cada estado combina color + geometría; sigue siendo legible en monocromo. */
.sem { gap:8px; white-space:nowrap; font-size:12px; font-weight:600; }
.sem-shape { display:inline-grid; place-items:center; flex:0 0 auto; width:12px; height:12px; background:var(--sem-gris); }
.sem-concluido .sem-shape { border-radius:50%; background:var(--sem-gris); }
.sem-concluido .sem-shape::after,.sem-en_tiempo .sem-shape::after { content:""; width:5px; height:3px; border-left:1.5px solid #FFF; border-bottom:1.5px solid #FFF; transform:rotate(-45deg) translateY(-1px); }
.sem-vencido .sem-shape { background:var(--sem-rojo); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.sem-proximo .sem-shape { background:var(--sem-naranja); clip-path:polygon(50% 0,100% 100%,0 100%); }
.sem-seguimiento .sem-shape { background:var(--sem-amarillo); transform:rotate(45deg) scale(.82); }
.sem-en_tiempo .sem-shape { background:var(--sem-verde); border-radius:50%; }
.sem-sin_fecha .sem-shape { background:var(--sem-morado); border-radius:2px; }
.sem-sin_fecha .sem-shape::after { content:"?"; color:#FFF; font-size:9px; line-height:1; transform:translateY(-.5px); }

.badge { border-radius:4px; letter-spacing:.045em; }
.pill-hab,.pill-det { border-radius:3px; }
.ficha-head { border-radius:9px; padding:28px; background:var(--side-bg); }
.ficha-head h2 { font-size:clamp(25px,3vw,38px); }
.next-box { border:1px solid var(--line); border-top:4px solid var(--accent-deep); border-radius:7px; }
.modal { box-shadow:var(--shadow-float); }
.section-title { font-family:var(--font-display); font-size:14px; }
.cal-grid { border-radius:8px; }
.cal-dow { border-top:3px solid transparent; }
.cal-dow:nth-child(7n+1) { border-top-color:var(--dash-1); }
.cal-dow:nth-child(7n+2) { border-top-color:var(--macaw-coral); }
.cal-dow:nth-child(7n+3) { border-top-color:var(--macaw-orange); }
.cal-dow:nth-child(7n+4) { border-top-color:var(--macaw-yellow); }
.cal-dow:nth-child(7n+5) { border-top-color:var(--macaw-blue); }
.cal-dow:nth-child(7n+6) { border-top-color:var(--dash-5); }
.cal-dow:nth-child(7n+7) { border-top-color:var(--macaw-leaf); }
.cal-cell.today .dn { background:var(--macaw-yellow); color:#312A05; }
.ev-compromiso { background:var(--dash-1); color:#F8F8F4; }
.ev-accion { background:var(--macaw-leaf); color:#F8F8F4; }
.ev-vencimiento { background:var(--macaw-coral); color:#2C100B; }
.ev-audiencia { background:var(--macaw-blue); color:#FFFFFF; }
.ev-prevencion { background:var(--macaw-orange); color:#352309; }
.tabs { gap:14px; }
.tab { padding:10px 2px; }
.chart-total { fill:var(--chart-title); font-family:var(--font-display); }
.chart-caption { fill:var(--chart-muted); font-family:var(--font); }
.chart-value { fill:var(--chart-title); font-family:var(--font); font-weight:700; }
.panel:has(.chart-donut,.chart-hbars,.chart-vbars) .ph::after {
  content:"";
  width:7px;
  height:7px;
  margin-right:40px;
  border-radius:50%;
  background:var(--dash-1);
  box-shadow:10px 0 0 var(--macaw-coral),20px 0 0 var(--macaw-orange),30px 0 0 var(--macaw-yellow),40px 0 0 var(--macaw-blue);
}
.lg-dot { border-radius:50%; }
.hbar .track { height:9px; border-radius:99px; }
.hbar .fill { border-radius:99px; }
.pct { height:6px; }

/* Las secciones inferiores del dashboard se pintan cuando se aproximan al
   viewport. Mantiene intacto el DOM y evita trabajo inicial innecesario. */
@supports (content-visibility:auto) {
  #dashBody > .grid-2,#dashBody > .grid-3,#dashBody > .cards:not(:first-child) {
    content-visibility:auto;
    contain-intrinsic-size:420px;
  }
}

@media (max-width:1100px) and (min-width:821px) {
  :root { --rail-w:76px; --side-w:244px; }
  .nav a { gap:12px; }
  .sidebar .brand { padding:15px 17px; }
  #dashBody > .cards:first-child { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:820px) {
  :root { --side-w:252px; }
  .sidebar { width:var(--side-w); clip-path:none; transform:translateX(-100%); transition:transform var(--dur) var(--ease); }
  .sidebar.is-collapsing { clip-path:none; }
  .sidebar.open { transform:translateX(0); }
  .sidebar .brand-text,.sidebar .nav .group,.sidebar .nav a .label,
  .sidebar .theme-toggle .label,.sidebar .foot-note,.nav a .tag {
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .main { margin-left:0; }
  .content { padding:24px 18px 42px; }
  .topbar { height:66px; min-height:66px; padding:0 14px; }
  .usercell > div:last-child { display:none; }
  #dashBody > .cards:first-child { grid-template-columns:1fr 1fr; }
  #dashBody > .cards:first-child .kpi,#dashBody > .cards:first-child .kpi:first-child { grid-column:span 1; min-height:126px; }
}

/* Equipos táctiles grandes (tablets en horizontal) no dependen de hover: el
   mismo índice se comporta como cajón y conserva todas sus opciones. */
@media (hover:none) {
  .menu-btn { display:grid; }
  .sidebar {
    width:var(--side-w);
    clip-path:none;
    transform:translateX(-100%);
    transition:transform var(--dur) var(--ease);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar .brand-text,.sidebar .nav .group,.sidebar .nav a .label,
  .sidebar .theme-toggle .label,.sidebar .foot-note,.nav a .tag {
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .main { margin-left:0; }
}

@media (max-width:560px) {
  body { font-size:16px; }
  .login-card { padding:24px 22px; }
  .login-note { font-size:14px; }
  .content { padding:20px 12px 36px; }
  .page-head { align-items:flex-start; }
  .page-head h2 { font-size:24px; }
  .page-head p { font-size:14px; line-height:1.5; }
  .page-head > div:first-child::before { font-size:10px; }
  .filterbar .fg { grid-template-columns:1fr; }
  .filterbar label,.form-grid label { font-size:14px; letter-spacing:.025em; }
  .filterbar select,.filterbar input,.toolbar .input,.toolbar select,
  .form-grid input,.form-grid select,.form-grid textarea,.field input { font-size:16px; }
  #dashBody > .cards:first-child { grid-template-columns:1fr; }
  #dashBody > .cards:first-child .kpi,#dashBody > .cards:first-child .kpi:first-child { grid-column:1; }
  .grid-2,.grid-3,.grid-4 { gap:12px; }
  .usercell { display:none; }
  #logoutBtn { width:44px; padding:0; display:grid; place-items:center; }
  #logoutBtn span:last-child { display:none; }
  .modal-back { padding:8px; align-items:end; }
  .modal { width:100%; max-width:100%; max-height:94vh; border-radius:12px 12px 0 0; }
  .modal .mb,.modal .mh { padding:16px; }
  .modal .mf { padding:12px 16px 16px; flex-direction:column-reverse; }
  .modal .mf .btn { width:100%; min-height:44px; }
  .tabs { overflow-x:auto; scrollbar-width:thin; }
  .tab { min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
  .panel .pb:has(.cal-grid) { overflow-x:auto; }
  .cal-grid { min-width:700px; }
  .cal-ev { min-height:44px; padding:7px 6px; display:flex; align-items:center; font-size:14px; }
  table.grid th { font-size:12.5px; }
  table.matrix-grid td,table.matrix-grid td::before { font-size:14px; }
}

@media (max-width:768px) {
  table.matrix-grid td::before { text-decoration-line:underline; text-decoration-thickness:3px; text-underline-offset:4px; }
  table.matrix-grid td:nth-child(9n+1)::before { text-decoration-color:var(--dash-1); }
  table.matrix-grid td:nth-child(9n+2)::before { text-decoration-color:var(--macaw-coral); }
  table.matrix-grid td:nth-child(9n+3)::before { text-decoration-color:var(--macaw-orange); }
  table.matrix-grid td:nth-child(9n+4)::before { text-decoration-color:var(--macaw-yellow); }
  table.matrix-grid td:nth-child(9n+5)::before { text-decoration-color:var(--macaw-blue); }
  table.matrix-grid td:nth-child(9n+6)::before { text-decoration-color:var(--dash-5); }
  table.matrix-grid td:nth-child(9n+7)::before { text-decoration-color:var(--dash-6); }
  table.matrix-grid td:nth-child(9n+8)::before { text-decoration-color:var(--dash-8); }
  table.matrix-grid td:nth-child(9n+9)::before { text-decoration-color:var(--dash-9); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media (forced-colors:active) {
  .sem-shape { forced-color-adjust:none; outline:1px solid CanvasText; }
  .kpi .bar { border:1px solid CanvasText; }
}