@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/app/inter-400.8909904ab6.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/app/inter-500.f3779f1efc.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/app/inter-600.f9a06e79cd.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/app/inter-700.6f56409fd3.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(/app/inter-800.a7d0a50f15.woff2) format("woff2")}
  :root{
    color-scheme:dark;
    --paper:#0e141c; --surface:#161e28; --surface-2:#1d2733; --surface-3:#26313f;
    --ink:#e8edf3; --ink-soft:#9fadbd; --ink-faint:#818e9f; --line:#26313f; --line-strong:#374556;
    --navy:#3f7bb0; --navy-deep:#0a2c48; --navy-ink:#5c93c6;
    --accent:#357bb5; --accent-ink:#5c9bd1; --accent-soft:#14283b;
    --red:#e35e78; --red-soft:#2f1a20;
    --pos:#54b585; --pos-soft:#16281f; --neg:#e06178; --neg-soft:#2f1a20; --warn:#d6a141; --warn-soft:#2c2415;
    --radius:16px; --radius-sm:10px;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px -16px rgba(0,0,0,.65); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  button{font-family:inherit;cursor:pointer}
  h1,h2,h3{margin:0;font-weight:660;letter-spacing:-.015em;text-wrap:balance}
  a{color:var(--accent-ink)}
  .app{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
  .side{background:var(--surface);border-right:1px solid var(--line);
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
  .brand{padding:17px 16px 15px;display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line)}
  .brand img{height:34px;width:auto;flex:none}
  .brand .bt{line-height:1.15}
  .brand b{display:block;font-size:13.5px;letter-spacing:-.01em;color:var(--ink)}
  .brand span{display:block;font-size:10.5px;color:var(--ink-soft);letter-spacing:.02em;text-transform:uppercase}
  nav{padding:10px 10px 20px;display:flex;flex-direction:column;gap:1px}
  .nav-group{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);
    padding:15px 12px 7px;font-weight:700}
  .nav-item{position:relative;display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;border:0;background:none;
    color:var(--ink-soft);font-size:13.5px;text-align:left;width:100%;transition:.13s;font-weight:500}
  .nav-item svg{width:17px;height:17px;flex:none;opacity:.75}
  .nav-item:hover{background:var(--surface-2);color:var(--ink)}
  .nav-item.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:650}
  .nav-item.active svg{opacity:1}
  .nav-item.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
  .nav-badge{margin-left:auto;font-size:11px;background:var(--surface-3);color:var(--ink-soft);
    padding:1px 7px;border-radius:20px;font-variant-numeric:tabular-nums;font-weight:600}
  .main{display:flex;flex-direction:column;min-width:0}
  .topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 84%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:14px;padding:12px 24px}
  .topbar h1{font-size:17px}
  .topbar .sub{font-size:12px;color:var(--ink-soft);font-weight:450;margin-top:1px}
  .spacer{flex:1}
  .rolepick{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
  select,input,textarea{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
    border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:8px 11px;outline:none;transition:.12s}
  select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
    padding:8px 13px;border-radius:9px;font-size:13px;font-weight:560;display:inline-flex;align-items:center;gap:7px;transition:.13s;box-shadow:var(--shadow-sm)}
  .btn:hover{background:var(--surface-2);border-color:var(--ink-faint)}
  .btn svg{width:15px;height:15px}
  .btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(13,59,96,.3),0 4px 12px -4px rgba(13,59,96,.35)}
  .btn.primary:hover{background:var(--accent-ink)}
  .btn.ghost{border-color:transparent;background:none;color:var(--ink-soft);box-shadow:none}
  .btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
  .btn.sm{padding:5px 9px;font-size:12px;border-radius:7px}
  .btn.danger{color:var(--neg)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .view{padding:24px;max-width:1200px;width:100%}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-bottom:20px}
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;box-shadow:var(--shadow);transition:.15s}
  .tile:hover{transform:translateY(-1px);border-color:var(--line-strong)}
  .tile .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);display:flex;align-items:center;gap:7px;font-weight:650}
  .tile .lbl .dot{width:8px;height:8px;border-radius:50%}
  .tile .val{font-size:24px;font-weight:750;margin-top:10px;letter-spacing:-.03em}
  .tile .val.neg{color:var(--neg)} .tile .val.pos{color:var(--pos)}
  .tile .meta{font-size:11.5px;color:var(--ink-faint);margin-top:3px}
  .tile.total{background:linear-gradient(140deg,#155a8f 0%,var(--navy) 42%,var(--navy-deep) 100%);color:#fff;border-color:transparent;position:relative;overflow:hidden}
  .tile.total::after{content:"";position:absolute;top:-42px;right:-42px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.07)}
  .tile.total .lbl{color:rgba(255,255,255,.7)} .tile.total .meta{color:rgba(255,255,255,.62)}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .card-head{display:flex;align-items:center;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line)}
  .card-head h2{font-size:14.5px}
  .card-head .sub{font-size:12px;color:var(--ink-soft)}
  .tbl-wrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);
    font-weight:650;padding:10px 15px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
  td{padding:10px 15px;border-bottom:1px solid var(--line);vertical-align:middle}
  tr:last-child td{border-bottom:0}
  tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 40%,var(--surface))}
  td.r,th.r{text-align:right}
  .amt.pos{color:var(--pos);font-weight:640} .amt.neg{color:var(--neg);font-weight:640}
  .muted{color:var(--ink-faint)}
  .cajagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;padding:15px 17px}
  .cajacard{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:.13s}
  .cajacard:hover{border-color:var(--accent);background:var(--accent-soft)}
  .cajacard .cn{font-size:12px;color:var(--ink-soft);font-weight:600;text-transform:capitalize}
  .cajacard .cv{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
  .cajacard .cv.zero{color:var(--ink-faint);font-weight:600}
  .cajanota{padding:0 17px 15px;font-size:11.5px;color:var(--ink-faint);line-height:1.45}
  .cajacard .cc{font-size:10.5px;color:var(--ink-faint);font-family:var(--mono)}
  .banner.warnbar{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:640;padding:2px 8px;border-radius:20px;
    background:var(--surface-3);color:var(--ink-soft);white-space:nowrap}
  .chip.rubro{background:var(--accent-soft);color:var(--accent-ink)}
  .chip.pos{background:var(--pos-soft);color:var(--pos)} .chip.neg{background:var(--neg-soft);color:var(--neg)}
  .chip.warn{background:var(--warn-soft);color:var(--warn)}
  .chip.medio{background:var(--surface-3);color:var(--ink-soft)}
  .codebox{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);background:var(--surface-2);
    padding:1px 6px;border-radius:5px;border:1px solid var(--line)}
  .toolbar{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
  .filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap;min-width:0}
  .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none;margin-left:auto}
  .toolbar select,.toolbar input,.toolbar .btn{height:36px;box-sizing:border-box}
  .toolbar .flabel{height:36px}
  .search{position:relative;flex:0 1 230px;min-width:170px;max-width:290px}
  .search.imp{flex:0 1 132px;min-width:112px;max-width:140px}
  .search.imp input{padding-left:30px}
  .listcount{font-size:12px;margin:-6px 0 12px;padding-left:2px}
  .chipcat{gap:6px} .chipcat .camt{opacity:.58;font-weight:500;font-variant-numeric:tabular-nums}
  .chipcat.primary .camt{opacity:.82}
  .search input{width:100%;padding-left:34px}
  .search svg{position:absolute;left:11px;top:9px;width:16px;height:16px;color:var(--ink-faint)}
  .flabel{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
  .flabel input{padding:6px 9px}
  tr.clik{cursor:pointer}
  tr.detrow td{padding:8px 15px}
  tr.detrow table th{background:var(--surface-2)}
  .overlay{position:fixed;inset:0;background:rgba(10,22,34,.52);backdrop-filter:blur(2px);z-index:100;
    display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:.2s}
  .overlay.open{opacity:1;pointer-events:auto}
  .panel{background:var(--paper);width:min(470px,100%);height:100%;overflow-y:auto;
    border-left:1px solid var(--line);transform:translateX(24px);transition:.22s;box-shadow:-24px 0 60px -24px rgba(0,0,0,.4)}
  .overlay.open .panel{transform:none}
  .panel.center{margin:auto;height:auto;max-height:88vh;width:min(520px,100%);border-radius:var(--radius);
    border:1px solid var(--line);transform:translateY(16px)}
  .overlay.center-mode{align-items:center;justify-content:center}
  .overlay.center-mode .panel{transform:translateY(16px)} .overlay.center-mode.open .panel{transform:none}
  .panel-head{position:sticky;top:0;background:var(--paper);display:flex;align-items:center;gap:10px;
    padding:16px 19px;border-bottom:1px solid var(--line);z-index:2}
  .panel-head h2{font-size:15px}
  .panel-body{padding:19px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;font-weight:640;color:var(--ink-soft);margin-bottom:5px}
  .field label .req{color:var(--neg)}
  .field input,.field select,.field textarea{width:100%}
  .field .hint{font-size:11px;color:var(--ink-faint);margin-top:4px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .seg{display:flex;gap:0;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;width:100%}
  .seg button{flex:1;border:0;background:var(--surface);color:var(--ink-soft);padding:9px;font-size:12.5px;font-weight:640;border-right:1px solid var(--line)}
  .seg button:last-child{border-right:0}
  .seg button.on{color:#fff}
  .seg button.on.ing{background:var(--pos)} .seg button.on.egr{background:var(--neg)}
  .seg button.on.def{background:var(--accent)}
  .field-err{border-color:var(--neg)!important}
  .form-msg{font-size:12.5px;color:var(--neg);background:var(--neg-soft);padding:8px 11px;border-radius:8px;margin-bottom:12px;display:none}
  .form-msg.show{display:block}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);z-index:200;
    background:var(--navy-deep);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:560;
    box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;display:flex;align-items:center;gap:9px}
  .toast.show{opacity:1;transform:translateX(-50%)}
  .toast svg{width:16px;height:16px;color:#5fd39b}
  .empty{padding:44px 20px;text-align:center;color:var(--ink-faint)}
  .empty svg{width:34px;height:34px;opacity:.5;margin-bottom:8px}
  .banner{display:flex;gap:11px;align-items:flex-start;background:var(--accent-soft);border:1px solid transparent;
    color:var(--accent-ink);padding:13px 16px;border-radius:var(--radius);font-size:12.5px;margin-bottom:18px}
  .banner svg{width:17px;height:17px;flex:none;margin-top:1px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-bottom:18px}
  .seccard{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow-sm)}
  .secico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
  .secico svg{width:20px;height:20px}
  .sectxt h3{font-size:14px;margin:1px 0 5px;color:var(--ink);font-weight:660}
  .sectxt p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
  .kv:last-child{border-bottom:0}
  .kv .k{color:var(--ink-soft)}
  .scrim{display:none}
  .topbar .tt{min-width:0}
  .topbar .tt h1,.topbar .tt .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bottombar{display:none}
  .fbtn{display:none}
  .mlist{display:flex;flex-direction:column}
  .mrow{display:flex;gap:12px;align-items:center;padding:13px 15px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%;font-family:inherit;font-size:inherit;color:inherit}
  .mrow:last-child{border-bottom:0}
  button.mrow:active{background:var(--surface-2)}
  .mrow .ml{flex:1;min-width:0}
  .mrow .mc{font-weight:620;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow .md{font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
  .mrow .mm{font-size:11px;color:var(--ink-faint);margin-top:3px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
  .mrow .mr{flex:none;text-align:right;max-width:46%}
  .mrow .ma{font-weight:700;font-size:14.5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
  .mrow .ma.pos{color:var(--pos)}
  .mrow .ma.neg{color:var(--ink)}
  .mrow .ms{font-size:10.5px;color:var(--ink-faint);margin-top:2px;display:flex;gap:6px;justify-content:flex-end;align-items:center}
  .msub{background:var(--surface-2);border-bottom:1px solid var(--line);padding:6px 15px 12px}
  @media(max-width:880px){
    .app{grid-template-columns:1fr}
    .side{position:fixed;left:0;top:0;z-index:70;width:min(300px,86vw);transform:translateX(-100%);transition:.2s;visibility:hidden}
    .side.open{transform:none;visibility:visible;box-shadow:24px 0 60px -24px rgba(0,0,0,.45)}
    .scrim.show{display:block;position:fixed;inset:0;background:rgba(10,22,34,.45);z-index:65}
    .grid2{grid-template-columns:1fr}
    select,input,textarea{font-size:16px}
    .toolbar select,.toolbar input,.toolbar .btn{height:40px}
    .toolbar .flabel{height:auto}
    .search svg{top:12px}
    .topbar{backdrop-filter:none;background:var(--paper)}
    .bottombar{display:flex;flex-direction:row;gap:0;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px -12px rgba(13,32,48,.25)}
    .bb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--ink-faint);font-size:10px;font-weight:620;padding:5px 2px 3px;border-radius:10px;letter-spacing:.01em}
    .bb-item svg{width:22px;height:22px}
    .bb-item.active{color:var(--accent-ink)}
    .view{padding-bottom:96px}
    #btn-nuevo{position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:49;width:54px;height:54px;border-radius:50%;justify-content:center;padding:0;box-shadow:0 8px 22px -6px rgba(10,44,72,.55)}
    #btn-nuevo .bn-txt{display:none}
    #btn-nuevo svg{width:22px;height:22px}
  }
  @media(max-width:640px){
    .topbar{padding:11px 14px;gap:10px}
    .topbar h1{font-size:17px}
    .topbar .tt .sub{font-size:11.5px}
    .rolepick span{display:none}
    .view{padding:14px 12px 96px}
    .tiles{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:16px}
    .tile{padding:13px 14px;border-radius:12px}
    .tile .val{font-size:19px;margin-top:7px}
    .tile .meta{font-size:10.5px}
    .tile.total{grid-column:1/-1;order:-1;padding:17px 16px}
    .tile.total .val{font-size:26px}
    .cajagrid{grid-template-columns:repeat(2,1fr);gap:8px;padding:12px 13px}
    .card{border-radius:12px}
    .card-head{padding:12px 14px;flex-wrap:wrap;gap:8px 10px}
    .panel-head{padding:13px 16px}
    .panel-body{padding:16px 15px 22px}
    th,td{padding:9px 10px}
    .search{flex:1 1 auto;max-width:none;min-width:0}
    .filters{width:100%;gap:8px}
    .actions{margin-left:0;width:100%}
    .actions .btn{flex:1;justify-content:center}
    .fbtn{display:inline-flex;flex:none}
    .toolbar:not(.fx) .filters>:not(.search):not(.fbtn):not(.keep){display:none}
    .toolbar:not(.fx) .filters>.search.imp{display:none}
    .toolbar{gap:8px;margin-bottom:13px}
    #maes-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
    #maes-tabs .btn{flex:none;white-space:nowrap}
    .banner{padding:11px 13px;font-size:12px;border-radius:12px}
    .overlay{align-items:flex-end;justify-content:center}
    .panel{width:100%;height:auto;max-height:92dvh;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(40px)}
    .overlay.open .panel{transform:none}
    .overlay.center-mode{align-items:flex-end;padding:0}
    .panel.center{margin:0;width:100%;max-height:92dvh;border-radius:18px 18px 0 0;border:0;border-top:1px solid var(--line)}
    .overlay.center-mode .panel{transform:translateY(40px)}
    .overlay.center-mode.open .panel{transform:none}
    .row2{grid-template-columns:1fr;gap:0}
  }
  /* Formas de pago: un renglon por cheque, como la planilla del cuaderno (compacto en 2 lineas) */
  .sugbox{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.14);z-index:80;max-height:230px;overflow:auto}
  .sugit{padding:10px 13px;cursor:pointer;font-size:14px}
  .sugit:hover{background:var(--surface-2)}
  .numbad{border-color:var(--neg)!important;background:rgba(220,38,38,.06)!important}
  .chqrow{border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:6px;background:var(--surface)}
  .chqr1{display:grid;grid-template-columns:106px 1fr 92px 24px;gap:6px;align-items:center}
  .chqr2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
  .chqrow input,.chqrow select{min-width:0}
  .chqrow .chqdel{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:4px;line-height:1}
  .chqrow .chqdel:hover{color:var(--neg)}
  .chqspan{grid-column:2/4;min-width:0}
  .otrrow{display:grid;grid-template-columns:1fr 118px 24px;gap:6px;align-items:center;margin-bottom:6px}
  .otrrow input,.otrrow select{min-width:0}
  .cfblock{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:9px;background:var(--surface-2)}
  .cfblock>.cfbt{font-size:12px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Sistema en vivo: arranque, estado de guardado, usuario y pantallas de acceso ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Accesibilidad del modo oscuro (auditoria 10/09/2026). Al quedar solo oscuro:
   - el anillo de foco del prototipo (--accent-soft) medía 1:1 contra el fondo: invisible;
   - los bordes de los campos medían 1,5 a 1,7:1 (WCAG 1.4.11 pide 3:1);
   - el texto blanco del boton primario bajaba a 3,65:1 en el tope del degradado.
   Mismo lenguaje visual, tonos corregidos. */
:root{--ring:var(--accent-ink);--control-line:#627186;--primary-bg:#2a669a}
select,input,textarea{border-color:var(--control-line)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.btn:focus-visible,.nav-item:focus-visible,.bb-item:focus-visible,.syncstate:focus-visible,a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--primary-bg) 88%,#fff),var(--primary-bg))}
.btn.primary:hover{background:color-mix(in srgb,var(--primary-bg) 88%,#fff)}

.bootscreen{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--paper);color:var(--ink-soft);font-size:13px;text-align:center;padding:24px}
.bootscreen img{height:34px;width:auto}
.bootscreen.error{color:var(--neg)}
.listo .bootscreen{display:none}

/* Estado de guardado: informativo cuando esta todo bien, accionable (reintentar / volver a ingresar) cuando no */
.syncstate{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);font:inherit;font-size:12px;color:var(--ink-soft);white-space:nowrap;
  flex:none;cursor:default}
.syncstate .dot{width:7px;height:7px;border-radius:50%;background:var(--pos);flex:none;transition:background-color .2s ease}
.syncstate[data-estado="guardando"] .dot{background:var(--accent-ink)}
.syncstate[data-estado="offline"]{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);cursor:pointer}
.syncstate[data-estado="offline"] .dot{background:var(--warn)}
.syncstate[data-estado="sesion"],.syncstate[data-estado="error"]{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent);cursor:pointer}
.syncstate[data-estado="sesion"] .dot,.syncstate[data-estado="error"] .dot{background:var(--neg)}

.userchip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);flex:none}
.userchip .un{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560;color:var(--ink)}
.userchip .btn{min-height:32px;padding:0 10px}

@media(max-width:640px){
  /* El texto del estado sigue en el arbol de accesibilidad: solo se oculta a la vista */
  .syncstate .st-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .syncstate{width:40px;height:40px;padding:0}
  .userchip .un{display:none}
  .userchip .btn{min-height:40px;padding:0 12px}
}
@media (prefers-reduced-motion:reduce){.syncstate .dot{transition:none}}

/* Ingreso y primer acceso */
.authwrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.authcard{width:100%;max-width:384px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px 26px 24px}
.authcard .brand{border:0;padding:0 0 24px}
.authcard h1{font-size:20px;margin:0 0 6px}
.authcard .lead{color:var(--ink-soft);font-size:13px;margin:0 0 20px}
.authcard .field{margin-bottom:14px}
.authcard .field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.authcard input{width:100%;height:44px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--control-line);
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px}
.authcard input:disabled{opacity:.5}
.authcard .hint{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
.authcard .btn.primary{width:100%;justify-content:center;height:44px;margin-top:4px;font-size:14px}
.authcard .btn.primary:disabled{opacity:.6;cursor:default}
.authmsg{min-height:20px;font-size:12.5px;color:var(--neg);margin:2px 0 8px}
.authmsg.ok{color:var(--pos)}
.authfoot{margin:18px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5}
.passwrap{position:relative}
.passwrap input{padding-right:72px}
/* Area tactil de toda la altura del campo (56 x 44) */
.passwrap .ver{position:absolute;top:1px;right:1px;bottom:1px;min-width:56px;padding:0 12px;font:inherit;font-size:12px;font-weight:600;
  border:0;border-radius:0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0;background:transparent;color:var(--accent-ink)}
.passwrap .ver:focus-visible{outline:2px solid var(--ring);outline-offset:-3px}

/* ===== Modo claro (switcher 10/09/2026). El oscuro sigue siendo el predeterminado. =====
   Tonos del prototipo original. Los que no llegaban al contraste minimo quedaron corregidos (medidos):
   texto tenue #8794a4 -> #616f81 (2,7:1 -> 4,5:1), borde de campos #cdd6df -> #7e8b9b (1,3:1 -> 3:1),
   texto de aviso #a9741a -> #8f6216 (3,4:1 -> 4,5:1 sobre su fondo). Boton primario navy: 11,6:1. */
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#eef1f4; --surface:#ffffff; --surface-2:#f1f4f7; --surface-3:#e5eaf0;
  --ink:#132030; --ink-soft:#526174; --ink-faint:#616f81; --line:#e2e8ee; --line-strong:#cdd6df;
  --navy:#0d3b60; --navy-deep:#0a2c48; --navy-ink:#0b3252;
  --accent:#0d3b60; --accent-ink:#0a2c48; --accent-soft:#e5edf4;
  --red:#cf2c48; --red-soft:#fbe6ea;
  --pos:#1f7a4d; --pos-soft:#e3f1ea; --neg:#c62a44; --neg-soft:#fbe6ea; --warn:#8f6216; --warn-soft:#f6ecd6;
  --shadow:0 1px 2px rgba(13,32,48,.05),0 10px 30px -16px rgba(13,32,48,.22); --shadow-sm:0 1px 2px rgba(13,32,48,.06);
  --ring:#0d3b60; --control-line:#7e8b9b; --primary-bg:#0d3b60;
}

/* Logo segun el modo: el de oscuro es claro y sobre blanco desaparece */
.logo-claro{display:none}
:root[data-theme="light"] .logo-claro{display:inline-block}
:root[data-theme="light"] .logo-oscuro{display:none}

/* Boton sol / luna de la barra superior */
.temabtn{width:32px;height:32px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink-soft)}
.temabtn:hover{color:var(--ink)}
.temabtn svg{width:17px;height:17px}
.temabtn .ic-luna{display:none}
:root[data-theme="light"] .temabtn .ic-sol{display:none}
:root[data-theme="light"] .temabtn .ic-luna{display:inline}
@media(max-width:640px){.temabtn{width:40px;height:40px}}