:root{
  --tinta:#14302f; --tinta-2:#4b6463; --papel:#edf2f1; --hoja:#fff; --linea:#d3dddb;
  --lateral:#0f2c30; --lateral-2:#a9c9cb;
  --teal:#0d7480; --teal-osc:#094f57; --cian:#c9eff1;
  --ok:#17703f; --ok-bg:#d9f1e2;
  --pen:#7c5300; --pen-bg:#fcebb0;
  --venc:#9c2519; --venc-bg:#f9d9d4;
  --atr:#8a3a00; --atr-bg:#ffe0c2;
  --fuente: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
button,a,select,input,label{touch-action:manipulation}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fuente);line-height:1.45;
  font-variant-numeric:tabular-nums}
a{color:var(--teal-osc)}
h1{font-size:1.65rem;margin:0;font-weight:650;letter-spacing:-.01em}
h2{font-size:1.1rem;margin:0 0 .6rem;font-weight:650}
small,.muted{color:var(--tinta-2)}
:focus-visible{outline:3px solid #f2b01e;outline-offset:2px}

/* estructura */
.shell{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:100vh}
.side{background:var(--lateral);color:#fff;padding:1.2rem .9rem;display:flex;flex-direction:column;gap:1.2rem;
  position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:block;padding:.3rem .6rem}
.brand img{display:block;width:130px;height:auto}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{color:var(--lateral-2);text-decoration:none;padding:.55rem .7rem;border-radius:6px;font-size:.95rem}
.side nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.side nav a.on{background:var(--cian);color:var(--teal-osc);font-weight:650}
.side .sep{height:1px;background:rgba(255,255,255,.14);margin:.5rem .4rem}
.side .who{margin-top:auto;font-size:.88rem;color:var(--lateral-2);padding:.4rem .6rem}
.side .who b{color:#fff;display:block}
.side .who span{display:block}
.side .who .who-links{margin-top:.2rem}
.side .who a{color:var(--lateral-2)}
.linklike{background:none;border:0;padding:0;color:var(--lateral-2);text-decoration:underline;cursor:pointer;font:inherit}
main{padding:1.6rem 2rem 3rem;max-width:1280px;width:100%;min-width:0}
main.solo{margin:6vh auto;max-width:420px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.head-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* mensajes */
.flash{padding:.7rem .9rem;border-radius:8px;margin-bottom:.8rem;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:#9fd5b3;color:var(--ok)}
.flash.error{background:var(--venc-bg);border-color:#eaa79e;color:var(--venc)}
.flash.warn{background:var(--pen-bg);border-color:#e6c765;color:var(--pen)}

/* botones y formularios */
.btn{display:inline-block;background:var(--teal);color:#fff;border:1px solid var(--teal);padding:.5rem .95rem;
  border-radius:7px;text-decoration:none;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--teal-osc)}
.btn-ghost{background:var(--hoja);color:var(--teal-osc);border-color:var(--linea)}
.btn-ghost:hover{background:#f3f8f8}
.btn-danger{background:var(--hoja);color:var(--venc);border-color:#e3a39b}
.btn-danger:hover{background:var(--venc-bg)}
.btn-sm{padding:.25rem .6rem;font-size:.85rem}
.btn-ok{background:var(--ok-bg);color:var(--ok);border-color:#9fd5b3}
.btn-ok:hover{background:#c6e9d3}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.25rem}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],input[type=file],select,textarea{
  width:100%;padding:.5rem .6rem;border:1px solid #b7c7c5;border-radius:6px;font:inherit;background:#fff;color:var(--tinta)}
textarea{min-height:5rem}
.field{margin-bottom:.9rem}
.row{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--hoja);border:1px solid var(--linea);border-radius:10px;padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.card.narrow{max-width:560px}
form.inline{display:inline}

/* libro mayor (resumen del control) */
.ledger{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;background:var(--cian);
  border:2px solid var(--teal);border-radius:10px;margin-bottom:1.2rem;overflow:hidden}
.ledger-main{padding:1.1rem 1.4rem}
.lbl{font-size:.95rem;font-weight:600;color:var(--teal-osc)}
.big{display:block;font-size:2.6rem;line-height:1.1;font-weight:750;letter-spacing:-.02em;margin:.15rem 0 .7rem}
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#fff}
.seg-ok{background:var(--teal)} .seg-venc{background:var(--venc)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.88rem;margin:.55rem 0 0}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.3rem}
.dot-ok{background:var(--teal)} .dot-venc{background:var(--venc)}
.ledger-side{margin:0;display:grid;border-left:2px solid var(--teal);background:#e8f8f9}
.ledger-side div{display:flex;justify-content:space-between;align-items:baseline;padding:.7rem 1.1rem;
  border-bottom:1px solid #a6dadd}
.ledger-side div:last-child{border-bottom:0}
.ledger-side dt{font-weight:600;color:var(--teal-osc)}
.ledger-side dd{margin:0;font-weight:700;font-size:1.25rem}
.ledger-side dd small{font-size:.82rem;font-weight:500;margin-left:.3rem}

/* filtros */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:.9rem}
.filters .f{min-width:150px}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.chip{padding:.35rem .8rem;border:1px solid var(--linea);background:var(--hoja);border-radius:99px;text-decoration:none;
  color:var(--tinta);font-size:.9rem}
.chip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.chip small{color:inherit;opacity:.8;margin-left:.3rem}

/* tablas */
.tablewrap{overflow-x:auto;background:var(--hoja);border:1px solid var(--linea);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{padding:.5rem .7rem;text-align:left;border-bottom:1px solid #e3ebe9;white-space:nowrap}
th{background:#e1eeed;font-weight:650;position:sticky;top:0}
td.num,th.num{text-align:right}
tbody tr:hover{background:#f4faf9}
tfoot td{font-weight:700;background:#f1f6f5}
.empty{padding:1.4rem;color:var(--tinta-2);text-align:center}
tr.estado-vencido td:first-child{box-shadow:inset 4px 0 var(--venc)}
tr.estado-pagado{color:#5d7471}

.pill{display:inline-block;padding:.1rem .6rem;border-radius:99px;font-size:.82rem;font-weight:650}
.pill-pagado{background:var(--ok-bg);color:var(--ok)}
.pill-pendiente{background:var(--pen-bg);color:var(--pen)}
.pill-vencido{background:var(--venc-bg);color:var(--venc)}
.pill-atrasado{background:var(--atr-bg);color:var(--atr)}

/* datos clave */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;margin-bottom:1.2rem}
.fact{background:var(--hoja);border:1px solid var(--linea);border-radius:8px;padding:.6rem .9rem}
.fact span{display:block;font-size:.84rem;color:var(--tinta-2)}
.fact b{font-size:1.25rem}
.fact.hl{background:var(--cian);border-color:var(--teal)}
.two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}
.date-nav{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem}
.date-nav .field{margin:0}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem 0;border-bottom:1px solid #e3ebe9}
.diff-ok{color:var(--ok);font-weight:650} .diff-bad{color:var(--venc);font-weight:700}
.hint{font-size:.88rem;color:var(--tinta-2)}

/* impresión de notas */
.print-bar{display:flex;gap:.6rem;align-items:center;padding:.8rem 1rem;background:var(--hoja);border-bottom:1px solid var(--linea)}
.nota{background:#fff;border:1.5px solid #222;margin:1rem auto;max-width:760px;padding:1rem 1.3rem;break-inside:avoid;page-break-inside:avoid}
.nota h2{text-align:center;font-size:1.15rem;margin:0 0 .6rem}
.nota dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin:0 0 .6rem}
.nota dt{font-weight:700} .nota dd{margin:0}
.nota table.cal{font-size:.82rem}
.nota table.cal td,.nota table.cal th{padding:.15rem .4rem;border:1px solid #aaa;background:#fff;position:static}
.nota .sig{margin-top:1.1rem;display:flex;justify-content:space-between;gap:2rem}
.nota .sig div{flex:1;border-top:1px solid #222;text-align:center;font-size:.8rem;padding-top:.2rem}
.cal-cols{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}


/* piezas nuevas */
.solo-logo{display:block;margin:0 auto 1.2rem;height:auto}
.pill-renovado{background:#dfe8f7;color:#23477f}
.pill-liquidado{background:#e6e3f4;color:#47347f}
.pill-anulado{background:#e8ecec;color:#5d7471}
tr.estado-renovado,tr.estado-liquidado,tr.row-anulado{color:#6d8481}
tr.row-anulado td{text-decoration:line-through;text-decoration-color:#9fb3b0}
tr.row-anulado td:last-child,tr.row-anulado td:nth-last-child(2){text-decoration:none}
.hint-ledger{font-size:.84rem;color:var(--teal-osc);margin:.5rem 0 0;opacity:.85}
.ledger-plain{grid-template-columns:1fr;background:#e8f8f9}
.ledger-flat{border-left:0;display:grid;grid-template-columns:repeat(3,1fr);background:transparent}
.ledger-flat div{border-bottom:0;border-right:1px solid #a6dadd;flex-direction:column;gap:.1rem}
.ledger-flat div:last-child{border-right:0}
.nota-head{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem}
.nota-head h2{flex:1;margin:0;text-align:left;font-size:1.3rem}
.tablewrap{-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:100%}

/* ---------- tablet y pantallas medianas ---------- */
@media (max-width:1180px){
  .opt{display:none}
  main{padding:1.3rem 1.4rem 3rem}
}
@media (max-width:1200px){
  .two{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;align-items:center;gap:.8rem;
    padding:.4rem max(1rem, env(safe-area-inset-right)) .4rem max(1rem, env(safe-area-inset-left));overflow:visible}
  .brand{padding:.2rem 0;flex:none}
  .brand img{width:78px}
  .side nav{flex-direction:row;flex:1;min-width:0;overflow-x:auto;gap:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .side nav::-webkit-scrollbar{display:none}
  .side nav a{white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:.4rem .9rem}
  .side .sep{flex:none;width:1px;height:26px;margin:0 .4rem;align-self:center}
  .side .who{margin:0;padding:0;flex:none;text-align:right;font-size:.8rem;line-height:1.25}
  .side .who .who-links{display:flex;gap:.8rem;justify-content:flex-end;align-items:center}
  .side .who .linklike{min-height:36px}
  main{padding:1.1rem 1.1rem 3rem}
  input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],input[type=file],select,textarea{
    font-size:16px;min-height:44px}
  h1{font-size:1.5rem}
  .big{font-size:2.2rem}
  .facts{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
@media (max-width:760px){
  .ledger{grid-template-columns:1fr}
  .ledger-side{border-left:0;border-top:2px solid var(--teal)}
  .ledger-flat{border-top:0}
  .side{flex-wrap:wrap}
  .side nav{order:3;flex-basis:100%}
  .side .who{margin-left:auto}
}
/* pantallas táctiles: objetivos de toque de al menos 44 px */
@media (pointer:coarse){
  .btn{min-height:44px;padding:.6rem 1.1rem}
  .btn-sm{min-height:44px;padding:.5rem .95rem;font-size:.95rem}
  .chip{min-height:44px;display:inline-flex;align-items:center;padding:.5rem 1rem}
  input[type=checkbox]{width:26px;height:26px}
  th,td{padding:.7rem .8rem}
  .list-plain li{padding:.7rem 0}
  .linklike{min-height:36px;padding:.3rem .2rem}
  .side nav a{min-height:44px}
}

@media print{
  body{background:#fff}
  .no-print,.print-bar{display:none !important}
  .nota{border:1px solid #000;margin:0 0 8mm;max-width:none}
  @page{margin:10mm}
}