/* tema-mac.css · identidad visual Hospitales MAC compartida por el Tablero PMO y el sitio de Insumos.
   Layout: barra lateral clara con logo, usuario y accesos (botones degradado marino→verde azulado);
   área principal con título marino, filete degradado, subtítulo en itálica y pestañas tipo píldora. */
/* Siempre fondo blanco (claro), aun si el equipo del usuario está en modo oscuro. */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
  --navy:#13305c; --teal:#169c97; --lime:#8cc43f;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f1f5f5; --line:#e1e8e8;
  --fg:#1f2d38; --muted:#5f7181; --accent:#14918d; --accent-soft:#e3f3f1; --on-strong:#ffffff;
  --side-bg:#ffffff; --main-bg:#ffffff;
  --grad-pri:linear-gradient(90deg,#13305c 0%,#169c97 100%);
  --grad-alt:linear-gradient(90deg,#169c97 0%,#13305c 100%);
  --rule:linear-gradient(90deg,#169c97 0%,#8cc43f 62%,rgba(140,196,63,0) 100%);
  --shadow:0 1px 2px rgba(19,48,92,.05),0 4px 14px rgba(19,48,92,.07);
  --title:#13305c;
  --good:#1f9d61; --warn:#c98500; --bad:#d2463a; --s1:#2a78d6; --s2:#eb6834; --grid:#e3e9ec;
  --s-pend:#c3cdd2; --s-curso:#e3a21a; --s-ok:#1f9d61; --s-bloq:#d2463a; --s-na:#eef2f4; --s-na-line:#b9c5cb;
  --f-display:"Fira Sans","Segoe UI",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --r:12px;
  color-scheme:light;
}

body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px}

/* ---------- Estructura ---------- */
.shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--side-bg);border-right:1px solid var(--line);box-shadow:2px 0 12px rgba(19,48,92,.04);
  padding-inline:22px;padding-block:14px 24px;display:flex;flex-direction:column;gap:18px}
.side-toggle{align-self:flex-end;background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px}
.side-toggle:hover{background:var(--surface-2)}
.brand-box{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.brand-box img{width:200px;max-width:100%;height:auto}
.brand-box .org{font:600 19px var(--f-display);color:var(--teal);letter-spacing:.02em;margin-top:6px}
.brand-box .app{font-size:13px;color:var(--fg)}
.who{display:flex;flex-direction:column;gap:6px}
.who b{font:600 16px var(--f-display);color:var(--fg)}
.who .sub{font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.who a{color:var(--accent)}
.side-nav{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.side-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 16px;border-radius:10px;border:0;
  background:var(--grad-pri);color:#fff;font:700 15.5px var(--f-display);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 3px 10px rgba(19,48,92,.18);cursor:pointer;text-align:center}
.side-btn.alt{background:var(--grad-alt)}
.side-btn.outline{background:var(--surface);color:var(--title);border:1.5px solid var(--accent);text-transform:none;font-weight:600;font-size:16px;box-shadow:none;min-height:46px}
.side-btn:hover{filter:brightness(1.06)}
.side-btn svg{width:18px;height:18px;flex:none}
.side hr{border:0;border-top:1px solid var(--line);width:100%;margin:6px 0}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.main{background:var(--main-bg);min-width:0;padding-inline:44px;padding-block:20px 64px}
.main-top{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-height:30px}
.status-pill{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--f-body);padding:4px 12px;border-radius:99px;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent)}
.status-pill.warn{color:#c0392b;border-color:#e3a39a;background:transparent}
.page-title{font:700 38px/1.15 var(--f-display);color:var(--title);margin:26px 0 14px;letter-spacing:-.01em}
.title-rule{height:4px;border-radius:4px;background:var(--rule);max-width:100%}
.lead{font-style:italic;color:var(--muted);margin:16px 0 6px;font-size:16px}
.meta{color:var(--muted);font-size:14.5px;margin:10px 0 0}
.pilltabs{display:flex;gap:4px;background:var(--surface-2);border-radius:30px;padding:5px;margin:22px 0 26px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line)}
.pilltabs button{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--fg);font:500 15px var(--f-body);
  padding:10px 20px;border-radius:26px;cursor:pointer;white-space:nowrap}
.pilltabs button:hover{background:color-mix(in srgb,var(--surface) 60%,transparent)}
.pilltabs button[aria-selected="true"]{background:var(--surface);box-shadow:var(--shadow),inset 0 -3px 0 var(--teal);font-weight:600}
.pilltabs svg{width:17px;height:17px;flex:none;color:var(--accent)}

/* Colapsado (escritorio) */
.shell.colapsado{grid-template-columns:78px minmax(0,1fr)}
.shell.colapsado .side{padding-inline:10px;align-items:center}
.shell.colapsado .side-toggle{transform:rotate(180deg);align-self:center}
.shell.colapsado .brand-box .org,.shell.colapsado .brand-box .app,.shell.colapsado .who,.shell.colapsado .side-btn span,.shell.colapsado hr{display:none}
.shell.colapsado .brand-box img{width:56px}
.shell.colapsado .side-btn{min-height:46px;width:52px;padding:0}

/* ---------- Superficies ---------- */
.widget,.panel,.kpi,.tbl-wrap,.filterbar,.mx-wrap,.task,.tl-item,.login-card,.subnav,.empty-state{border-color:var(--line);box-shadow:var(--shadow);border-radius:var(--r)}
.kpi{border-radius:10px}
.view-head h2,section.view h2{font-family:var(--f-display);color:var(--title)}
.view-head h2{font-size:26px;font-weight:500}
.w-head h3,.panel h2{color:var(--title)}
.btn.pri{background:var(--grad-pri);border:0;color:#fff}
.btn{border-radius:8px}
.chip.live{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

@media (max-width:900px){
  .shell,.shell.colapsado{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding-inline:16px;padding-block:12px;gap:12px}
  .side-toggle{display:none}
  .brand-box{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px}
  .brand-box img{width:84px}
  .brand-box .org{font-size:16px;margin:0}
  .side-nav{flex-direction:row;flex-wrap:wrap;gap:8px}
  .side-btn{min-height:42px;font-size:13px;flex:1 1 160px}
  .side-foot{margin-top:0;flex-direction:row}
  .side-foot .side-btn{flex:0 1 auto}
  .main{padding-inline:16px;padding-block:12px 48px}
  .page-title{font-size:28px;margin-top:12px}
}
.seg-ctl{border-radius:22px;padding:4px}
.seg-ctl button{border-radius:18px;padding:6px 14px}
.subnav{border-radius:var(--r)}
.subnav button[aria-current="page"]{background:var(--grad-pri);color:#fff}
.shell{background:#ffffff}
.side .who{align-items:flex-start;text-align:left;justify-content:flex-start}
.bar-row{grid-template-columns:minmax(150px,1.3fr) 1.7fr 52px}
@media (max-width:520px){.bar-row{grid-template-columns:minmax(100px,1fr) 1.2fr 46px}}
@media (max-width:900px){
  .brand-box{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:12px;align-items:center;justify-items:start}
  .brand-box img{grid-row:1/3}
  .brand-box .org{align-self:end}
  .brand-box .app{align-self:start}
  .side-foot hr{display:none}
}