:root{--brand-50:#EFF6FF;--brand-100:#DBEAFE;--brand-300:#93C5FD;--brand-500:#3B82F6;--brand-600:#2563EB;--brand-700:#1D4ED8;--accent-400:#22D3EE;--accent-500:#06B6D4;--accent-600:#0891B2;--ink-900:#0B1220;--ink-800:#131C2E;--ink-700:#1F2A44;--ink-500:#475569;--ink-400:#64748B;--ink-300:#94A3B8;--ink-200:#CBD5E1;--ink-100:#E2E8F0;--ink-50:#F1F5F9;--paper:#FFF;--canvas:#F6F8FC;--canvas-alt:#EEF2F9;--ok:#059669;--ok-bg:#ECFDF5;--warn:#D97706;--warn-bg:#FFFBEB;--danger:#DC2626;--danger-bg:#FEF2F2;--info:#0891B2;--info-bg:#ECFEFF;--neutral:#64748B;--neutral-bg:#F1F5F9;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;--sh-xs:0 1px 2px rgba(11,18,32,.06);--sh-sm:0 2px 6px rgba(11,18,32,.07);--sh-md:0 6px 18px rgba(11,18,32,.10);--sh-lg:0 16px 40px rgba(11,18,32,.14);--focus:0 0 0 3px rgba(37,99,235,.22);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink-900);background:var(--canvas);-webkit-font-smoothing:antialiased}
a{color:var(--brand-600);text-decoration:none;transition:color .15s}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.22;color:var(--ink-900);font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800}
h2{font-size:clamp(1.35rem,2.4vw,1.65rem)}
h3{font-size:1.2rem}
h4{font-size:1.05rem;font-weight:600}
p{margin:0 0 1em}
.container{max-width:1240px;margin:0 auto;padding:0 20px}
@media(min-width:1024px){.container{padding:0 32px}}
.page{padding:28px 0 72px}
.text-muted{color:var(--ink-500)}
.text-right{text-align:right}
.text-center{text-align:center}
.mb-0{margin-bottom:0!important}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,#0F1A31 0%,#0B1220 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 4px 24px rgba(11,18,32,.28)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:22px;flex-wrap:wrap;padding-block:8px}
.site-brand{display:inline-flex;align-items:center;gap:12px;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:#fff}
.site-brand:hover{color:#fff}
.brand-logo{height:40px;width:auto;flex:0 0 auto;object-fit:contain;display:block;border-radius:6px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-600),var(--accent-500));color:#fff;font-weight:800;font-size:1rem;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.site-nav a{color:var(--ink-300);font-size:.9rem;font-weight:500;padding:9px 13px;border-radius:10px;transition:color .15s,background .15s}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.site-nav a.active{color:#fff;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));box-shadow:0 4px 14px rgba(37,99,235,.35)}
.nav-sep{width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 6px}
.nav-dropdown{position:relative;display:inline-block}
.nav-drop-label{cursor:pointer;user-select:none;padding:6px 2px;color:var(--ink-200);font-weight:500;font-size:.92rem;transition:color .15s}
.nav-drop-label:hover,.nav-drop-label.active{color:#fff}
.nav-drop-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--ink-100);border-radius:14px;box-shadow:var(--sh-lg);padding:8px;margin-top:8px;z-index:1000}
.nav-dropdown:hover .nav-drop-menu{display:block}
.nav-drop-menu a{display:block;padding:9px 13px;color:var(--ink-800);border-radius:9px;font-size:.9rem;transition:background .12s,color .12s}
.nav-drop-menu a:hover{background:var(--brand-50);color:var(--brand-700)}
.nav-empty{display:block;padding:9px 13px;color:var(--ink-300);font-size:.85rem}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-size:15px;font-weight:600;padding:11px 22px;border:1px solid transparent;border-radius:10px;cursor:pointer;text-decoration:none;background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.28);transition:transform .12s,box-shadow .18s,background .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(37,99,235,.34);color:#fff}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn.disabled{background:var(--ink-100);color:var(--ink-300);cursor:not-allowed;box-shadow:none;transform:none}
.btn-outline{background:#fff;color:var(--brand-700);border:1.5px solid var(--brand-500);box-shadow:var(--sh-xs)}
.btn-outline:hover{background:var(--brand-50);color:var(--brand-700);box-shadow:var(--sh-sm)}
.btn-ghost{background:transparent;color:var(--brand-700);box-shadow:none}
.btn-ghost:hover{background:var(--brand-50);color:var(--brand-700);transform:none;box-shadow:none}
.btn-danger{background:linear-gradient(135deg,#DC2626,#B91C1C);color:#fff}
.btn-danger:hover{box-shadow:0 8px 22px rgba(220,38,38,.32)}
.btn-success{background:linear-gradient(135deg,#059669,#047857);color:#fff}
.btn-success:hover{box-shadow:0 8px 22px rgba(5,150,105,.32)}
.btn-sm{padding:8px 15px;font-size:13px;border-radius:9px}
.btn-lg{padding:15px 30px;font-size:18px;border-radius:14px}
.btn-block{display:flex;width:100%}
.card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-sm)}
.card-clickable{transition:transform .18s,box-shadow .18s,border-color .18s}
.card-clickable:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--brand-300)}
.card-accent{border-left:4px solid var(--brand-600)}
.card-accent-success{border-left-color:var(--ok)}
.card-accent-warning{border-left-color:var(--warn)}
.card-accent-danger{border-left-color:var(--danger)}
.stat .label{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-400);margin-bottom:6px}
.stat .value{font-size:2.35rem;font-weight:800;line-height:1.1;color:var(--brand-700);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .delta{font-size:13px;font-weight:600;margin-top:4px}
.stat .delta.up{color:var(--danger)}
.stat .delta.down{color:var(--ok)}
table,.table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th{background:var(--canvas-alt);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-400);padding:12px 16px;text-align:left;border-bottom:1.5px solid var(--ink-100)}
td{padding:14px 16px;border-bottom:1px solid var(--ink-50);color:var(--ink-800);vertical-align:middle}
tbody tr:hover{background:var(--brand-50)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1.5;background:var(--neutral-bg);color:var(--neutral)}
.badge-success{background:var(--ok-bg);color:#065F46}
.badge-warning{background:var(--warn-bg);color:#92400E}
.badge-danger{background:var(--danger-bg);color:#991B1B}
.badge-info{background:var(--info-bg);color:#155E75}
.badge-muted{background:var(--neutral-bg);color:var(--neutral)}
.label{display:block;font-size:14px;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.input,input.input,select.input,textarea.input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],select,textarea{width:100%;padding:11px 14px;border:1.5px solid var(--ink-100);border-radius:10px;font-family:var(--font);font-size:15px;background:#fff;color:var(--ink-900);transition:border-color .15s,box-shadow .15s}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--focus)}
::placeholder{color:var(--ink-300)}
input:disabled,select:disabled,textarea:disabled{background:var(--ink-50);color:var(--ink-300);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:auto}
.error-msg{font-size:13px;color:var(--danger);margin-top:4px}
.helper{font-size:13px;color:var(--ink-400);margin-top:4px}
.flash,.alert{border-radius:var(--r-md);padding:13px 16px;border:1px solid var(--ink-100);border-left:4px solid var(--info);background:var(--info-bg);color:#155E75;margin-bottom:12px;font-size:14px;box-shadow:var(--sh-xs)}
.flash-success{border-left-color:var(--ok);background:var(--ok-bg);color:#065F46}
.flash-warning{border-left-color:var(--warn);background:var(--warn-bg);color:#92400E}
.flash-error{border-left-color:var(--danger);background:var(--danger-bg);color:#991B1B}
.flash-info{border-left-color:var(--info);background:var(--info-bg);color:#155E75}
.obs{border-left:4px solid var(--warn);background:var(--warn-bg);padding:12px 16px;border-radius:var(--r-md);margin-bottom:8px}
.obs strong{color:#92400E}
details{border:1px solid var(--ink-100);border-radius:var(--r-md);padding:12px 16px;margin-bottom:8px;background:#fff;box-shadow:var(--sh-xs)}
details>summary{cursor:pointer;font-weight:600;color:var(--ink-800);list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"\203A\00a0";color:var(--brand-600);font-weight:800;margin-right:6px;display:inline-block;transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
.donut{width:180px;height:180px;border-radius:50%;margin:0 auto 16px;position:relative;background:conic-gradient(var(--ink-200) 0 100%)}
.donut::after{content:"";position:absolute;inset:26px;background:#fff;border-radius:50%}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:1}
.donut-center .value{font-size:1.4rem;font-weight:800;color:var(--brand-700)}
.donut-center .label{font-size:12px;color:var(--ink-400)}
.legend{list-style:none;padding:0;margin:0}
.legend li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.legend .dot{width:12px;height:12px;border-radius:50%;flex:none}
.legend .amt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

/* ============================================================
   RESPONSIVE / VISTA MOVIL  (append final)
   ============================================================ */
@media (max-width: 900px){
  .container{padding:0 14px}
  .page{padding:20px 0 56px}
  .site-header .container{min-height:56px;gap:12px;padding-block:8px}
  .brand-logo{height:34px}
  .stat .value{font-size:1.8rem}
  .card{padding:16px}
  th{font-size:11px;padding:9px 10px}
  td{padding:10px 10px}
  .btn{padding:10px 16px;font-size:14px}
  .btn-lg{padding:13px 22px;font-size:16px}
}

@media (max-width: 768px){
  body{font-size:15px}
  h1{font-size:1.55rem}
  h2{font-size:1.3rem}

  /* header: nav pasa a segunda linea y scrollea horizontal */
  .site-header .container{flex-wrap:wrap}
  .site-brand{flex:1 1 auto}
  .site-nav{
    order:3; flex:1 1 100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex-wrap:nowrap;
    padding-bottom:2px; margin:0 -2px;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;padding:8px 12px;font-size:.85rem}
  .nav-sep{display:none}

  /* dropdowns: no hover en tactil -> se apilan como lista si se abren */
  .nav-drop-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;margin-top:0;min-width:0}

  /* grid helpers -> 1 columna */
  .grid2,.grid3,.grid4{grid-template-columns:1fr}

  /* tablas: permitir scroll horizontal contenido, sin romper la pagina */
  .table-wrap, .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* botones en flex-between -> ancho completo apilado */
  .flex-between .btn{margin-top:6px}

  /* donut mas chico */
  .donut{width:150px;height:150px}

  /* inputs (evita zoom en iOS) */
  input,select,textarea{font-size:16px}
}

@media (max-width: 560px){
  .site-brand .lbl-text{display:none}
  .stat .value{font-size:1.55rem}
  .card{padding:14px}
  .btn{width:100%}
  .btn-sm,.btn-inline{width:auto}
  th,td{padding:8px 9px;font-size:13px}
  .flex-between{flex-direction:column;align-items:stretch}
}