:root{
    /* Identidad Maverick: azul #0d2b75, lima #ccfe00, azul eléctrico #0155ff, crema #f0f0cf, negro */
    --brand:#0d2b75; --brand-ink:#0d2b75; --brand-soft:#dee3f3;
    --accent:#ccfe00; --accent-ink:#000000; --accent-soft:#f0ffb8;
    --blue:#0155ff; --blue-soft:#dde6ff;

    --ground:#f0f0cf; --surface:#ffffff; --surface-2:#f8f8e8; --surface-3:#e8e8c8;
    --ink:#000000; --ink-2:#33333f; --muted:#6d6d5e; --line:#d9d9b9;

    --ok:#0d2b75; --ok-soft:#dee3f3;
    --status-activo:#ccfe00; --dot-ring:rgba(0,0,0,.38);
    --warn:#6b8f00; --warn-fill:#ccfe00; --warn-ink:#000000; --warn-soft:#f2ffbe;
    --crit:#f01979; --crit-soft:#ffe1ee;

    /* La barra lateral es un bloque de marca fijo en ambos temas */
    --rail-bg:#0d2b75; --rail-ink:#f0f0cf; --rail-muted:#a6b4dd;
    --rail-line:rgba(240,240,207,.20); --rail-hover:rgba(240,240,207,.10);

    --shadow:0 1px 2px rgba(13,43,117,.10), 0 10px 26px -18px rgba(13,43,117,.45);
    --display:"Changa One",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
    --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --brand:#5b7fe0; --brand-ink:#8aa4ee; --brand-soft:#152052;
      --accent:#ccfe00; --accent-ink:#000000; --accent-soft:#2b3300;
      --blue:#6d95ff; --blue-soft:#101d40;
      --ground:#06080f; --surface:#0f1426; --surface-2:#161c33; --surface-3:#212844;
      --ink:#f0f0cf; --ink-2:#d3d3b6; --muted:#8b91ab; --line:#252d48;
      --ok:#7f9bef; --ok-soft:#152052;
      --status-activo:#ccfe00; --dot-ring:rgba(240,240,207,.35);
      --warn:#ccfe00; --warn-fill:#ccfe00; --warn-ink:#000000; --warn-soft:#2b3300;
      --crit:#ff6ba6; --crit-soft:#3a0f22;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -20px rgba(0,0,0,.9);
    }
  }
  :root[data-theme="dark"]{
    --brand:#5b7fe0; --brand-ink:#8aa4ee; --brand-soft:#152052;
    --accent:#ccfe00; --accent-ink:#000000; --accent-soft:#2b3300;
    --blue:#6d95ff; --blue-soft:#101d40;
    --ground:#06080f; --surface:#0f1426; --surface-2:#161c33; --surface-3:#212844;
    --ink:#f0f0cf; --ink-2:#d3d3b6; --muted:#8b91ab; --line:#252d48;
    --ok:#7f9bef; --ok-soft:#152052;
    --status-activo:#ccfe00; --dot-ring:rgba(240,240,207,.35);
    --warn:#ccfe00; --warn-fill:#ccfe00; --warn-ink:#000000; --warn-soft:#2b3300;
    --crit:#ff6ba6; --crit-soft:#3a0f22;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -20px rgba(0,0,0,.9);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--sans); font-size:13.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  button,input,select,textarea{font:inherit; color:inherit}
  :focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:2px}
  @media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}
  .num, td.num, .tabular{font-variant-numeric:tabular-nums}

  .app{display:grid; grid-template-columns:284px minmax(0,1fr); min-height:100vh}

  /* ---------- barra lateral: bloque de marca ---------- */
  .rail{
    background:var(--rail-bg); color:var(--rail-ink);
    display:flex; flex-direction:column; gap:14px;
    padding-block:20px; padding-inline:18px;
    position:sticky; top:0; height:100vh; overflow:auto;
  }
  .rail > *{flex:none}
  .brand{display:flex; flex-direction:row; align-items:center; gap:12px; padding-bottom:14px; border-bottom:2px solid var(--accent)}
  .brand .logo{width:46px; height:46px; flex:none; display:block}
  .brandtext{display:flex; flex-direction:column; gap:3px; min-width:0}
  .brand h1{
    font-family:var(--display); font-weight:400; font-size:23px; line-height:.94; margin:0;
    letter-spacing:.01em; text-transform:uppercase; color:var(--rail-ink); text-wrap:balance;
  }
  .brand .sub{font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--rail-muted); font-weight:600}
  .searchwrap input{
    width:100%; padding:9px 11px; border:1px solid var(--rail-line); border-radius:2px;
    background:rgba(0,0,0,.22); color:var(--rail-ink);
  }
  .searchwrap input::placeholder{color:var(--rail-muted)}
  .navbtn{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; text-align:left; padding:9px 11px; border-radius:2px;
    border:1px solid transparent; background:transparent; color:var(--rail-ink); cursor:pointer;
  }
  .navbtn:hover{background:var(--rail-hover)}
  .navbtn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
  .navbtn .k{font-size:11px; font-weight:700; color:var(--rail-muted); font-variant-numeric:tabular-nums}
  .navbtn.active .k{color:var(--accent-ink)}
  #navDash{font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px}
  .railsection{font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--rail-muted); font-weight:700; margin-top:4px}
  .clientlist{display:flex; flex-direction:column; gap:2px; min-height:60px; overflow-y:auto; flex:1 1 auto}
  .clientlist .navbtn{flex-direction:column; align-items:stretch; gap:2px}
  .cl-top{display:flex; align-items:center; gap:8px}
  .cl-top .nm{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .cl-bot{display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--rail-muted); font-weight:500; letter-spacing:.04em}
  .navbtn.active .cl-bot{color:rgba(0,0,0,.62)}
  .dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted)}
  .dot.activo{background:var(--status-activo); box-shadow:0 0 0 1px var(--dot-ring)}
  .dot.pausado{background:var(--warn)} .dot.finalizado{background:var(--muted)}
  .navbtn.active .dot.activo{background:#0d2b75}
  .railfoot{margin-top:auto; display:flex; flex-direction:column; gap:4px; padding-top:12px; border-top:1px solid var(--rail-line)}
  .railfoot .btn.ghost{color:var(--rail-ink)}
  .railfoot .btn.ghost:hover{background:var(--rail-hover)}
  .railfoot .sub{color:var(--rail-muted); letter-spacing:.04em}

  /* ---------- controles ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:6px; justify-content:center;
    padding:9px 16px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--surface); color:var(--ink); cursor:pointer;
    font-weight:600; font-size:12.5px; letter-spacing:.02em;
  }
  .btn:hover{background:var(--surface-2)}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); text-transform:uppercase; letter-spacing:.07em}
  .btn.primary:hover{filter:brightness(1.06)}
  #btnNewClient{width:100%}
  .btn.ghost{border-color:transparent; background:transparent; font-weight:500}
  .btn.ghost:hover{background:var(--surface-2)}
  .btn.sm{padding:6px 12px; font-size:11.5px}
  .btn.danger{color:var(--crit); border-color:var(--crit-soft)}
  .btn.danger:hover{background:var(--crit-soft)}

  main{padding-block:28px; padding-inline:clamp(16px,3vw,40px); min-width:0}
  .wrap{max-width:1120px; margin-inline:auto; display:flex; flex-direction:column; gap:22px}
  .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
  .eyebrow{font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); font-weight:700}
  h2.title{
    font-family:var(--display); font-weight:400; font-size:40px; line-height:1;
    margin:6px 0 0; text-transform:uppercase; letter-spacing:.01em; color:var(--brand-ink);
    text-wrap:balance; border-bottom:5px solid var(--accent); display:inline-block; padding-bottom:2px;
  }
  h3.sec{
    font-size:12px; font-weight:700; margin:0; text-transform:uppercase;
    letter-spacing:.14em; color:var(--ink);
  }

  /* ---------- tarjetas de cifras ---------- */
  .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px; background:var(--line); border:1.5px solid var(--brand); border-radius:2px; overflow:hidden}
  .tiles.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:880px){.tiles.cols3,.tiles.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:520px){.tiles.cols3,.tiles.cols4{grid-template-columns:minmax(0,1fr)}}
  .tile{background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
  .tile .lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700}
  .tile .val{
    font-family:var(--display); font-weight:400; font-size:31px; line-height:1.05;
    letter-spacing:.005em; font-variant-numeric:tabular-nums; color:var(--brand-ink);
  }
  .tile .note{font-size:11px; color:var(--muted)}
  .tile.crit .val{color:var(--crit)} .tile.warn .val{color:var(--warn)} .tile.ok .val{color:var(--ok)}

  .panel{background:var(--surface); border:1.5px solid var(--line); border-radius:2px}
  .panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1.5px solid var(--line); flex-wrap:wrap}
  .panel-body{padding:16px}
  .panel-body.flush{padding:0}

  /* ---------- tablas ---------- */
  .tablewrap{overflow-x:auto}
  table{width:100%; border-collapse:collapse; font-size:12.5px}
  thead th{background:var(--brand-soft)}
  th{
    text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.12em;
    color:var(--brand-ink); font-weight:700; padding:10px 12px; border-bottom:1.5px solid var(--brand); white-space:nowrap;
  }
  td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
  table{min-width:640px}
  tbody td:first-child{min-width:150px}
  tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--surface-2)}
  td.num, th.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
  td.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; color:var(--ink-2)}
  .rowlink{
    background:none; border:none; padding:0; cursor:pointer; font-weight:600; font-size:12.5px;
    text-align:left; color:var(--brand-ink); text-decoration:underline; text-decoration-thickness:1px;
    text-decoration-color:var(--line); text-underline-offset:3px; font-family:inherit;
  }
  .rowlink:hover{text-decoration-color:var(--accent); text-decoration-thickness:3px}

  /* ---------- estados ---------- */
  .pill{
    display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:2px;
    font-size:10.5px; font-weight:700; white-space:nowrap; border:1.5px solid transparent;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .pill.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
  .alertbar.warn strong{color:var(--warn)}
  .pill.warn{background:var(--warn-fill); color:var(--warn-ink); border-color:var(--warn-fill)}
  .pill.crit{background:var(--crit); color:#ffffff; border-color:var(--crit)}
  .pill.neutral{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}
  .pill.accent{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
  .pill.activo{background:var(--status-activo); color:#000000; border-color:var(--status-activo)}

  .chip{
    font-size:11px; font-weight:600; padding:2px 8px; border-radius:2px;
    background:var(--surface-2); color:var(--ink-2); white-space:nowrap;
    border:1px solid var(--line); font-variant-numeric:tabular-nums;
  }
  .chip.crit{background:var(--crit); color:#ffffff; border-color:var(--crit)}
  .chip.warn{background:var(--warn-fill); color:var(--warn-ink); border-color:var(--warn-fill)}
  .chip.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}

  select.status{
    padding:4px 8px; border-radius:2px; border:1.5px solid var(--line);
    background:var(--surface-2); font-size:11.5px; font-weight:600; cursor:pointer;
  }

  /* ---------- encabezado de cliente ---------- */
  .clienthead{
    display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
    padding:18px 20px; border:1.5px solid var(--line); border-radius:2px;
    background:var(--surface); border-left:6px solid var(--brand); box-shadow:var(--shadow);
  }
  .clienthead .idline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px}
  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px 24px}
  .fact{display:flex; flex-direction:column; gap:2px; min-width:0}
  .fact dt{font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-weight:700}
  .fact dd{margin:0; font-size:13px; overflow-wrap:anywhere}
  .fact dd.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}
  .fact dd a{color:var(--blue)}

  .alertbar{
    display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border-radius:2px;
    background:var(--crit-soft); border:1.5px solid var(--crit); border-left-width:6px; color:var(--crit);
  }
  .alertbar.warn{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
  .alertbar.info{background:var(--blue-soft); border-color:var(--blue); color:var(--brand-ink)}
  .alertbar strong{font-weight:700}
  .alertbar ul{margin:7px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:3px; font-size:12.5px}

  .empty{display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:34px 26px; text-align:left}
  .empty p{margin:0; max-width:60ch; color:var(--ink-2)}

  /* ---------- modales ---------- */
  .modal-bg{position:fixed; inset:0; background:rgba(13,43,117,.55); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:clamp(12px,5vh,56px) 14px; overflow:auto; z-index:50}
  .modal{background:var(--surface); border:2px solid var(--brand); border-radius:2px; width:min(680px,100%); box-shadow:0 26px 60px -22px rgba(0,0,0,.6)}
  .modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--brand); color:#f0f0cf}
  .modal-head h3.sec{color:#f0f0cf; font-size:13px}
  .modal-head .btn.ghost{color:#f0f0cf}
  .modal-head .btn.ghost:hover{background:rgba(240,240,207,.15)}
  .modal-body{padding:18px; display:flex; flex-direction:column; gap:14px}
  .modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1.5px solid var(--line); flex-wrap:wrap}
  .grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
  .field{display:flex; flex-direction:column; gap:5px}
  .field label{font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-weight:700}
  .field input,.field select,.field textarea{
    padding:9px 11px; border:1.5px solid var(--line); border-radius:2px; background:var(--surface-2); width:100%;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
  .field textarea{min-height:74px; resize:vertical}
  .field .hint{font-size:11px; color:var(--muted)}
  .fieldset-note{font-size:11.5px; color:var(--muted); margin:0}

  .toast{
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:2px;
    font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    z-index:80; box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  }

  .portalbanner{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:11px 15px; border-radius:2px; background:var(--brand); border:1.5px solid var(--brand); color:#f0f0cf;
  }
  .portalbanner .btn{background:transparent; color:#f0f0cf; border-color:rgba(240,240,207,.4)}
  .portalbanner .btn:hover{background:rgba(240,240,207,.15)}
  .legend{display:flex; gap:14px; flex-wrap:wrap; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
  .legend span{display:inline-flex; align-items:center; gap:5px}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

  @media (max-width:900px){
    .app{grid-template-columns:1fr}
    .rail{position:static; height:auto}
    .clientlist{max-height:240px}
    h2.title{font-size:30px}
    .tile .val{font-size:26px}
  }

/* ---------- ajustes propios de la versión PHP ---------- */
a{color:var(--blue)}
.rail a.navbtn{text-decoration:none}
.aviso{
  padding:11px 15px; border-radius:2px; font-size:12.5px; font-weight:600;
  border:1.5px solid var(--accent); background:var(--accent); color:#000; border-left-width:6px;
}
.aviso.error{background:var(--crit); border-color:var(--crit); color:#fff}
.formpage{max-width:720px}
.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.inline{display:inline}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{
  width:min(400px,100%); background:var(--surface); border:2px solid var(--brand);
  border-radius:2px; padding:26px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow);
}
.login-card .logo{width:54px; height:54px}
.login-card h1{
  font-family:var(--display); font-weight:400; font-size:26px; margin:0; line-height:1;
  text-transform:uppercase; color:var(--brand-ink);
}
.userbox{font-size:11px; color:var(--rail-muted); line-height:1.4}
.userbox strong{color:var(--rail-ink); font-weight:600; display:block; font-size:12.5px}
table.bitacora td{font-size:11.5px}