/* ============================================================
   Praxis — tema visual sobre Bulma
   Paleta portada fielmente desde el prototipo de diseño.
   ============================================================ */
:root{
  --px-azul:#1A2A3A;
  --px-azul2:#16232F;
  --px-cyan:#00A8CC;
  --px-cyan-d:#0088a8;
  --px-naranja:#E56B2E;
  --px-verde:#12996B;
  --px-ambar:#C98A00;
  --px-bg:#F7F9FC;
  --px-line:#E7EDF3;
  --px-line2:#E4EAF0;
  --px-muted:#829099;
  --px-ink:#1A2A3A;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body.px-body{
  background:var(--px-bg);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--px-ink);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD6DF;border-radius:6px;border:3px solid var(--px-bg)}
::-webkit-scrollbar-thumb:hover{background:#829099}
.mono{font-family:'IBM Plex Mono',monospace}
.serif{font-family:'IBM Plex Serif',serif}
@keyframes pxpulse{0%,100%{opacity:1}50%{opacity:.35}}
.px-pulse{animation:pxpulse 2s infinite}

/* ---- app shell ---- */
.px-shell{display:flex;height:100vh;width:100%;overflow:hidden;background:var(--px-bg)}

/* ---- sidebar ---- */
.px-sidebar{
  width:246px;flex:none;height:100%;
  background:linear-gradient(180deg,#1A2A3A 0%,#16232F 100%);
  display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.2);
}
.px-brand{padding:20px 20px 16px;display:flex;align-items:center;gap:11px}
.px-brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#00A8CC,#0088a8);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 10px rgba(0,168,204,.35)}
.px-brand-name{font-family:'IBM Plex Serif',serif;font-weight:700;font-size:22px;color:#fff;letter-spacing:.3px}
.px-brand-sub{font-size:10px;color:#7E93A3;letter-spacing:1.6px;text-transform:uppercase;margin-top:3px}
.px-nav-wrap{padding:6px 14px;flex:1;overflow-y:auto}
.px-nav-title{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#5E7181;margin:12px 8px 8px;font-weight:600}
.px-nav-title.mt{margin-top:20px}
.px-nav{display:flex;flex-direction:column;gap:3px}
.px-nav-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:none;
  background:transparent;color:#93A6B5;font:500 13.5px/1.15 'IBM Plex Sans',sans-serif;
  border-radius:9px;cursor:pointer;text-align:left;text-decoration:none;
}
.px-nav-item:hover{background:rgba(255,255,255,.05);color:#cfe0ea}
.px-nav-item.is-active{
  background:rgba(0,168,204,0.16);color:#EAF8FC;font-weight:600;
  box-shadow:inset 3px 0 0 #00A8CC;
}
.px-nav-item svg{flex:none}
.px-sidebar-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}
.px-userbox{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 8px;border-radius:9px;background:rgba(255,255,255,.04)}
.px-avatar{width:34px;height:34px;border-radius:50%;background:#00A8CC;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}

/* ---- main column ---- */
.px-main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}
.px-topbar{height:62px;flex:none;background:#fff;border-bottom:1px solid var(--px-line2);display:flex;align-items:center;gap:16px;padding:0 24px}
.px-search{position:relative;flex:1;max-width:440px}
.px-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
.px-search input{width:100%;height:38px;border:1px solid #E0E7EE;background:var(--px-bg);border-radius:9px;padding:0 12px 0 38px;font-size:13px;color:var(--px-ink);outline:none}
.px-content{flex:1;overflow-y:auto;padding:26px 30px 44px}
.px-burger{display:none;background:none;border:none;cursor:pointer;padding:6px}

/* ---- buttons ---- */
.px-btn{height:38px;padding:0 16px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;font-family:inherit}
.px-btn-primary{background:var(--px-cyan);color:#fff;border:none;box-shadow:0 1px 3px rgba(0,168,204,.3)}
.px-btn-primary:hover{background:#0092b1}
.px-btn-ghost{background:#fff;border:1px solid #E0E7EE;color:var(--px-ink)}
.px-btn-ghost:hover{background:#f2f6f9}
.px-btn-danger{background:var(--px-naranja);color:#fff;border:none}
.px-btn-sm{height:34px;padding:0 14px;font-size:12.5px;border-radius:8px}
.px-icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--px-line2);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}

/* ---- cards / sections ---- */
.px-card{background:#fff;border:1px solid var(--px-line);border-radius:13px}
.px-card-pad{padding:18px 20px}
.px-section{background:#fff;border:1px solid var(--px-line);border-radius:13px;overflow:hidden}
.px-section-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #EEF2F6}
.px-section-title{margin:0;font-size:14.5px;font-weight:600;color:var(--px-ink)}
.px-dark{background:#1A2A3A;border-radius:13px;overflow:hidden;color:#fff}

/* ---- page header ---- */
.px-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.px-h1{margin:0;font-family:'IBM Plex Serif',serif;font-size:24px;font-weight:600;color:var(--px-ink)}
.px-sub{margin:6px 0 0;font-size:13px;color:var(--px-muted)}
.px-container{max-width:1240px;margin:0 auto}
.px-container-wide{max-width:1280px;margin:0 auto}

/* ---- segmented control ---- */
.px-seg{display:flex;background:#EDF1F5;border-radius:9px;padding:3px;gap:2px}
.px-seg-btn{border:none;background:transparent;color:#829099;font:600 12px 'IBM Plex Sans',sans-serif;padding:6px 13px;border-radius:7px;cursor:pointer}
.px-seg-btn.is-active{background:#fff;color:var(--px-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---- tabs ---- */
.px-tabs{display:flex;gap:4px;border-bottom:1px solid var(--px-line2);margin-bottom:20px}
.px-tab{border:none;background:transparent;color:#829099;font:600 13px 'IBM Plex Sans',sans-serif;padding:11px 16px;cursor:pointer;border-bottom:2px solid transparent}
.px-tab.is-active{color:var(--px-cyan);border-bottom:2px solid var(--px-cyan)}

/* ---- chips ---- */
.px-chip{font-size:12px;font-weight:500;color:#5B6B78;background:#fff;border:1px solid var(--px-line2);padding:6px 13px;border-radius:20px;cursor:pointer;display:inline-block}
.px-chip.is-active{font-weight:600;color:#fff;background:#1A2A3A;border-color:#1A2A3A}

/* ---- grid helpers ---- */
.px-grid{display:grid;gap:16px}
.px-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.px-toggle{width:38px;height:22px;border-radius:20px;background:#00A8CC;position:relative;flex:none;transition:background .15s}
.px-toggle > span{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#fff;display:block;transition:left .15s,right .15s}
.px-toggle.is-off{background:#CBD6DF}
.px-toggle.is-off > span{right:auto;left:2px}

/* table header cell */
.px-th{font-size:10.5px;font-weight:600;color:#829099;text-transform:uppercase;letter-spacing:.5px}

/* hidden helper for jQuery toggles */
.px-hidden{display:none !important}

/* ---- responsive ---- */
@media (max-width: 1023px){
  .px-kpis{grid-template-columns:repeat(2,1fr)}
  .px-content{padding:18px 16px 40px}
  .px-sidebar{position:fixed;z-index:40;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease}
  .px-sidebar.is-open{transform:translateX(0)}
  .px-burger{display:inline-flex}
  .px-scrim{display:none;position:fixed;inset:0;background:rgba(10,18,26,.45);z-index:30}
  .px-scrim.is-open{display:block}
}
@media (max-width: 720px){
  .px-kpis{grid-template-columns:1fr}
  .px-topbar .px-btn span.px-hide-sm{display:none}
}

/* Colapso responsive de las cuadrículas de dos/tres columnas.
   Los grids del prototipo usan estilos en línea, por eso forzamos con !important. */
@media (max-width: 1023px){
  .px-dash-cols,
  .px-dash-foco,
  .px-exp-cols,
  .px-agenda-cols,
  .px-docs-cols,
  .px-cargas-cols,
  .px-pagos-cols,
  .px-tiempos-cols,
  .px-mesa-cols,
  .px-notif-cols,
  .px-config-cols,
  .px-portal-cols{
    grid-template-columns:1fr !important;
  }
  .px-biblio-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width: 640px){
  .px-biblio-grid{grid-template-columns:1fr !important}
}