:root {
  --bg: #f4f6ec; --card: #fffefa; --text: #253329; --muted: #6f7b6b;
  --accent: #2f6f3e; --accent-dark: #1f4e31; --accent-soft: #eef5e5;
  --teal: #2b8c84; --orange: #d9852b; --danger: #b2342a;
  --border: #dfe6d4;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, sans-serif;
       background: var(--bg); color: var(--text); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--accent-dark);
       color: #fff; padding: 1rem; display: flex; flex-direction: column; gap: 1rem;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.brand-block { padding: .25rem .15rem .9rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.brand-row { display: flex; align-items: center; gap: .7rem; }
.brand-mark { width: 42px; height: 28px; border-radius: 50%;
       background:
         linear-gradient(135deg, transparent 0 24%, #8cc63f 25% 42%, transparent 43%),
         linear-gradient(35deg, transparent 0 33%, #2b8c84 34% 51%, transparent 52%),
         linear-gradient(145deg, transparent 0 46%, #d9852b 47% 64%, transparent 65%),
         linear-gradient(25deg, #d9e89b 0 28%, #3d7f3f 29% 54%, #1f4e31 55% 100%);
       border: 1px solid rgba(255,255,255,.3); flex: 0 0 auto; }
.brand { font-weight: 750; font-size: .88rem; letter-spacing: 0; }
.brand-sub { color: rgba(255,255,255,.72); font-size: .82rem; margin-top: .1rem; }
.side-nav, .side-actions { display: grid; gap: .45rem; }
.side-link { color: rgba(255,255,255,.9); padding: .58rem .62rem; border-radius: 7px;
       display: flex; align-items: center; gap: .55rem; font-size: .94rem;
       font-weight: 620; line-height: 1.1; }
.side-link svg, .btn-icon svg { width: 1.05rem; height: 1.05rem; fill: none;
       stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
       flex: 0 0 auto; }
.side-link:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.side-link:focus-visible { outline: 2px solid rgba(217,232,155,.9); outline-offset: 2px; }
.side-user { margin-top: auto; display: grid; gap: .55rem; color: rgba(255,255,255,.8); }
.content { min-width: 0; max-width: 1600px; width: 100%; margin: 0 auto; padding: 1.1rem 1.2rem; }
.content-login { max-width: 1400px; }
h1 { font-size: 1.3rem; margin: .2rem 0; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--accent); }
.muted { color: var(--muted); font-weight: 400; font-size: .85rem; }
.warn { color: var(--danger); }
.flash { background: #fff7d6; border: 1px solid #edc96d; padding: .5rem .8rem;
         border-radius: 6px; margin-bottom: .8rem; }
.toolbar { display: flex; justify-content: space-between; align-items: flex-end;
           margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.grupo, .panel { background: var(--card); border: 1px solid var(--border);
         border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1.2rem;
         overflow-x: auto; }
.filtros { overflow-x: visible; }
.filter-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .65rem; }
.filter-note { margin: -.35rem 0 .65rem; }
.checks { display: flex; flex-wrap: wrap; gap: .45rem .85rem; }
.checks label { display: inline-flex; align-items: center; gap: .35rem;
       padding: .28rem .45rem; border: 1px solid var(--border);
       border-radius: 6px; background: #f8fbf2; white-space: nowrap; }
.filter-actions { margin-top: .75rem; display: flex; gap: .5rem; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .35rem .55rem; text-align: left; border-bottom: 1px solid var(--border); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.expander { width: 2.1rem; text-align: center; padding-right: .15rem; }
thead th { position: sticky; top: 0; background: var(--card);
           border-bottom: 2px solid var(--accent); font-size: .8rem;
           text-transform: uppercase; letter-spacing: 0; }
tfoot th { border-top: 2px solid var(--accent); border-bottom: none; }
td.rojo, .rojo { color: var(--danger); }
td.mora-cell { font-weight: 700; color: #17210f; border-left: 2px solid var(--card); }
td.mora-none { background: transparent; color: var(--muted); font-weight: 400; }
td.mora-zero { background: #dbe4f2; color: #1d3553; }
td.mora-low { background: #93d251; }
td.mora-mid { background: #fff500; }
td.mora-high { background: #ffc000; }
td.mora-critical { background: #ff3333; color: #fff; }
td.comentario { max-width: 220px; font-size: .85rem; color: var(--muted); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn { background: var(--accent); color: #fff; border: 0; padding: .45rem .9rem;
       border-radius: 6px; cursor: pointer; font-size: .9rem; font-weight: 620;
       font-family: inherit; }
.btn:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.btn-sec { background: var(--teal); }
.full { width: 100%; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.side-actions .btn { min-height: 2.35rem; }
.acciones { display: flex; gap: .5rem; align-items: center; }
a.btn { display: inline-block; }
.inline { display: inline; }
.icon-btn { width: 1.55rem; height: 1.55rem; border: 1px solid var(--border);
       border-radius: 4px; background: #fff; color: var(--accent);
       cursor: pointer; font-weight: 700; line-height: 1; }
.icon-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.mini-form select { width: 8.2rem; padding: .22rem .35rem;
       border: 1px solid var(--border); border-radius: 4px;
       background: #fff; color: var(--text); font: inherit; }
.detalle-row > td { background: #f8fbf2; border-bottom: 1px solid var(--border); }
.detalle-inline { padding: .45rem .3rem .7rem; }
.detalle-title { margin-bottom: .35rem; }
table.comprobantes { font-size: .82rem; background: #fff; border: 1px solid var(--border); }
table.comprobantes th, table.comprobantes td { padding: .28rem .45rem; }
table.comprobantes thead th { position: static; }
.help-section { max-width: 1100px; overflow-x: visible; }
.help-section p { margin: .4rem 0; }
.help-section ol { margin: .3rem 0 0; padding-left: 1.4rem; }
.help-section li { margin: .28rem 0; }
.help-table th, .help-table td { vertical-align: top; }
.help-table thead th { position: static; }
details.edit summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
details.edit form { position: absolute; right: 2rem; background: var(--card);
       border: 1px solid var(--border); border-radius: 8px; padding: .8rem;
       box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 10; width: 280px; }
details.edit label { display: block; margin-bottom: .5rem; font-size: .8rem;
       color: var(--muted); }
details.edit input, details.edit select, details.edit textarea {
       width: 100%; padding: .3rem .4rem; border: 1px solid var(--border);
       border-radius: 4px; font: inherit; }
.login-box { max-width: 340px; margin: 8vh auto; background: var(--card);
       border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; }
.login-box label { display: block; margin-bottom: .9rem; color: var(--muted); }
.login-box input { width: 100%; padding: .5rem; border: 1px solid var(--border);
       border-radius: 6px; font: inherit; margin-top: .25rem; }
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .side-actions, .side-nav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}