/* Layout: barra lateral de módulos + área de trabajo con tablas tipo libro contable */
:root {
  --bg: #f3f5f4; --panel: #ffffff; --ink: #15201c; --muted: #5b6b65; --line: #dde3e0;
  --accent: #0e6b58; --accent-soft: #e2f0ec; --warn: #9a5b00; --warn-soft: #fbf0dc;
  --err: #a8322b; --err-soft: #f8e3e1; --ok: #1f7a3a; --side: #13231e; --side-ink: #c9d6d1; --side-active: #1f3a32;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1614; --panel: #16201d; --ink: #e3ebe8; --muted: #93a39d; --line: #26332f;
  --accent: #4fc2a6; --accent-soft: #173a31; --warn: #e5a94a; --warn-soft: #3a2c14;
  --err: #ef8a82; --err-soft: #3d1c1a; --ok: #6fd18c; --side: #0b1110; --side-ink: #b7c6c0; --side-active: #1b2c27; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f1614; --panel: #16201d; --ink: #e3ebe8; --muted: #93a39d; --line: #26332f;
  --accent: #4fc2a6; --accent-soft: #173a31; --warn: #e5a94a; --warn-soft: #3a2c14;
  --err: #ef8a82; --err-soft: #3d1c1a; --ok: #6fd18c; --side: #0b1110; --side-ink: #b7c6c0; --side-active: #1b2c27; color-scheme: dark }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); }
* { box-sizing: border-box; }
button, input, select { font: inherit; color: inherit; }
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100%; }
aside { background: var(--side); color: var(--side-ink); padding-block: 20px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: 14px; display: flex; flex-direction: column; gap: 18px; }
.brand { font-weight: 700; font-size: 17px; color: #fff; letter-spacing: .01em; padding: 0 8px; }
.brand small { display: block; font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink); opacity: .75; }
nav { display: flex; flex-direction: column; gap: 2px; }
nav .grp { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; padding: 12px 8px 4px; }
nav button { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 6px; display: flex; justify-content: space-between; gap: 8px; }
nav button:hover { background: var(--side-active); color: #fff; }
nav button[aria-current="page"] { background: var(--side-active); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
nav button:focus-visible { outline: 2px solid var(--accent); }
nav .n { font-family: var(--mono); font-size: 11.5px; opacity: .7; }
main { min-width: 0; display: flex; flex-direction: column; }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 10px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--panel); }
.emp { font-weight: 600; min-width: 0; }
.emp span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; font-family: var(--mono); }
.top .sp { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.chip.demo { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; }
select.periodo { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 8px; }
.view { padding-block: 22px 48px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 18px; max-width: 1280px; width: 100%; }
h1 { font-size: 22px; margin: 0; text-wrap: balance; }
h2 { font-size: 15px; margin: 0; }
.sub { color: var(--muted); margin: 2px 0 0; max-width: 72ch; }
.hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hd > .row { min-width: 0; max-width: 100%; }
.hd .row select { max-width: 100%; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi .l { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-family: var(--mono); font-size: 21px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12.5px; color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.card > .ch { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.card > .cb { padding: 14px 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--panel); position: sticky; top: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
td.mono { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--accent-soft); }
tr.tot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; }
tr.grp td { background: var(--bg); font-weight: 600; }
.pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.err { background: var(--err-soft); color: var(--err); }
.pill.mute { background: var(--bg); color: var(--muted); }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 500; }
.btn:hover { border-color: var(--accent); }
.btn.pri { background: var(--accent); color: var(--panel); border-color: var(--accent); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tools select { max-width: 100%; }
.tools { min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools input, .tools select, .form input, .form select { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 9px; min-width: 0; }
.obs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.obs li { display: flex; gap: 10px; align-items: baseline; }
a { color: var(--accent); }
.ok { color: var(--ok); font-weight: 600; }
pre.xml { margin: 0; max-height: 420px; overflow: auto; font: 12px/1.45 var(--mono); background: var(--bg); padding: 12px 14px; border-radius: 6px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.drawer { position: fixed; inset: 0; background: rgba(10, 20, 17, .45); display: flex; justify-content: flex-end; z-index: 20; }
.drawer .pn { background: var(--bg); width: min(720px, 100%); height: 100%; overflow-y: auto; padding-block: max(20px, env(safe-area-inset-top, 0px)) 40px; padding-left: 22px; padding-right: max(22px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 16px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.note { font-size: 12.5px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 5px 10px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--panel); }
.toast { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 6px; z-index: 30; }
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  aside, nav { min-width: 0; }
  aside { padding-right: max(14px, env(safe-area-inset-right, 0px)); padding-block: 12px; gap: 8px; }
  nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  nav .grp { display: none; }
  nav button { white-space: nowrap; }
  header.top { position: static; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .view { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Aplicación real: acceso, formularios y estados */
.auth { min-height: 100%; display: grid; place-items: center; padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.auth .card { width: min(420px, 100%); }
.auth h1 { font-size: 20px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label, .form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.stack input, .stack select, .form input, .form select, .form textarea, td input, td select { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 7px 9px; min-width: 0; width: 100%; }
.err-msg { background: var(--err-soft); color: var(--err); padding: 8px 12px; border-radius: 6px; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; }
.empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.empresa { cursor: pointer; padding: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.empresa:hover { border-color: var(--accent); }
.empresa .ruc { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn.danger { color: var(--err); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.lineas td { padding: 4px 6px; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.top select.empsel { max-width: 320px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 8px; }
.user { font-size: 12.5px; color: var(--muted); }
.side-foot { margin-top: auto; padding: 0 8px; font-size: 12px; opacity: .7; }
.side-foot button { all: unset; cursor: pointer; text-decoration: underline; }
.indent-1 { padding-left: 22px !important; } .indent-2 { padding-left: 34px !important; } .indent-3 { padding-left: 46px !important; } .indent-4 { padding-left: 58px !important; }
.bold td { font-weight: 600; }
.lnk{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line,#ccd);text-underline-offset:3px}
.lnk:hover{color:var(--accent,#0f6b52)}
td select{min-width:72px}
.form label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.form label.check input{width:auto}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent);transition:width .2s}
tr.sel td{background:var(--accent-soft)}
tr.det>td{background:var(--bg);padding:4px 12px 10px}
tr.det table{width:100%}