/* Colegio San Patricio: tema claro, verde institucional y los colores de los tres niveles. */
:root {
  --bg:#f3f7f5; --card:#ffffff; --text:#1b2a26; --muted:#667770; --line:#e1e8e4; --soft:#eef4f1;
  --primary:#1d5d54; --primary-dark:#144a44; --ok:#2e7d4f; --err:#c0392b; --warn:#b7791f;
  --shadow:0 1px 2px rgba(20,60,50,.06), 0 4px 14px rgba(20,60,50,.05);
  --c0:#43a07a; --c1:#9b3a9e; --c2:#e0b93a; --c3:#4a90c2; --c4:#e08e45; --c5:#c2576e; --c6:#4aa3a8; --c7:#8a8f98;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); }

.stripe { height:5px; background:linear-gradient(90deg,var(--c2) 0 33.3%,var(--c1) 33.3% 66.6%,var(--c0) 66.6%); }
nav { background:var(--card); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:0 20px; display:flex; align-items:center; gap:2px; flex-wrap:wrap; position:sticky; top:0; z-index:5; }
nav a { color:var(--text); text-decoration:none; padding:14px 12px; border-bottom:3px solid transparent; font-weight:500; }
nav a:hover, nav a.active { border-bottom-color:var(--primary); color:var(--primary); }
nav .spacer { flex:1; }
nav .who { color:var(--muted); font-size:13px; margin-right:6px; }
nav .brand { display:flex; align-items:center; gap:10px; padding-top:8px; padding-bottom:8px; font-weight:700; color:var(--primary-dark); margin-right:14px; }
nav .brand:hover { border-bottom-color:transparent; }
.logo { vertical-align:middle; }

main { max-width:1240px; margin:26px auto 60px; padding:0 20px; }
h1 { font-size:24px; margin:0 0 4px; color:var(--primary-dark); }
h2 { font-size:16px; margin:0 0 2px; color:var(--text); }
.sub { color:var(--muted); font-size:13px; margin:0 0 14px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { margin:0; }

.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:18px; box-shadow:var(--shadow); overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
th { color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; background:var(--soft); }
th:first-child { border-radius:8px 0 0 8px; } th:last-child { border-radius:0 8px 8px 0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tbody tr:hover td, table tr:hover td { background:#fafcfb; }
.neg { color:var(--err); }

input, select, textarea, button { font:inherit; color:inherit; background:#fff; border:1px solid #cfd9d4; border-radius:8px; padding:7px 10px; }
input:focus, select:focus, textarea:focus { outline:2px solid rgba(29,93,84,.25); border-color:var(--primary); }
button, .btn { background:var(--primary); color:#fff; border-color:var(--primary); cursor:pointer; text-decoration:none; display:inline-block; font-weight:500; }
button:hover, .btn:hover { background:var(--primary-dark); }
button.secondary, .btn.secondary { background:#fff; color:var(--primary); border-color:#cfd9d4; }
button.secondary:hover, .btn.secondary:hover { background:var(--soft); }
button.danger { background:#fff; color:var(--err); border-color:#e6b9b3; }
button.danger:hover { background:#fdf1ef; }
button.small, .btn.small { padding:3px 10px; font-size:13px; }
.btn + .btn, .btn + form { margin-left:6px; }
button:disabled { opacity:.5; cursor:not-allowed; }

.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.filters label, .form label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
.form { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.form .wide { grid-column:1/-1; }
.flash { padding:11px 15px; border-radius:10px; margin-bottom:16px; font-weight:500; }
.flash.ok { background:#e6f4ec; border:1px solid #b5dcc5; color:#1d5b3a; }
.flash.error { background:#fdecea; border:1px solid #f1b9b2; color:#8e2a20; }
.muted { color:var(--muted); }
.tag { font-size:12px; padding:2px 8px; border-radius:10px; background:var(--soft); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.tag.warn { color:#8e5a10; background:#fff6e5; border-color:#f0d9a8; }
.inline { display:inline; }
.dup { opacity:.5; }
.pager { display:flex; gap:10px; align-items:center; margin-top:12px; }
details summary { cursor:pointer; color:var(--primary); font-weight:500; margin-bottom:10px; }
.login { max-width:350px; margin:70px auto; }

/* Tarjetas de indicadores */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); border-top:4px solid var(--c0); }
.kpi.k1 { border-top-color:var(--c2); } .kpi.k2 { border-top-color:var(--c1); } .kpi.k3 { border-top-color:var(--c3); } .kpi.k4 { border-top-color:var(--c4); }
.kpi .l { color:var(--muted); font-size:12.5px; }
.kpi .v { font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--primary-dark); margin:2px 0; }
.kpi .n { font-size:12.5px; color:var(--muted); }

/* Barras horizontales */
.bars .row { display:grid; grid-template-columns:190px 1fr 130px; gap:12px; align-items:center; margin:8px 0; }
.bars .track { background:var(--soft); border-radius:6px; height:14px; overflow:hidden; }
.bars .fill { background:var(--c0); height:100%; border-radius:6px; }
.bars .label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.bars .amount { text-align:right; font-variant-numeric:tabular-nums; font-size:14px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(440px,1fr)); gap:18px; }
.grid2 > .card { margin-bottom:0; } .grid2 { margin-bottom:18px; }

/* Gráficos */
.chart { width:100%; height:auto; display:block; }
.chart .grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.chart .zero { stroke:#b7c4be; stroke-width:1; }
.chart .axis { fill:var(--muted); font-size:11px; }
.chart .val { fill:var(--text); font-size:11px; font-weight:600; }
.chart rect { transition:opacity .15s; } .chart rect:hover { opacity:.8; }
.chart .line { fill:none; stroke-width:2.5; stroke-linejoin:round; }
.chart .dot { stroke:#fff; stroke-width:2; }
.donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.donut { width:200px; height:200px; flex:none; }
.donut .ring { fill:none; stroke-width:30; }
.donut .center { fill:var(--primary-dark); font-weight:700; font-size:18px; text-anchor:middle; }
.donut .center-sub { fill:var(--muted); font-size:11px; text-anchor:middle; }
.donut-legend { flex:1; min-width:200px; }
.donut-legend .it { display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line); }
.donut-legend .it:last-child { border-bottom:none; }
.donut-legend .pct { color:var(--muted); font-size:12.5px; }
.c0 { fill:var(--c0); stroke:var(--c0); } .c1 { fill:var(--c1); stroke:var(--c1); } .c2 { fill:var(--c2); stroke:var(--c2); }
.c3 { fill:var(--c3); stroke:var(--c3); } .c4 { fill:var(--c4); stroke:var(--c4); } .c5 { fill:var(--c5); stroke:var(--c5); }
.c6 { fill:var(--c6); stroke:var(--c6); } .c7 { fill:var(--c7); stroke:var(--c7); }
.chart rect.c0,.chart rect.c1,.chart rect.c2,.chart rect.c3,.chart rect.c4,.chart rect.c5,.chart rect.c6,.chart rect.c7 { stroke:none; }
.chart .dot.c0,.chart .dot.c1,.chart .dot.c2,.chart .dot.c3,.chart .dot.c4,.chart .dot.c5,.chart .dot.c6,.chart .dot.c7 { stroke:#fff; }
.donut .ring.c0,.donut .ring.c1,.donut .ring.c2,.donut .ring.c3,.donut .ring.c4,.donut .ring.c5,.donut .ring.c6,.donut .ring.c7 { fill:none; }
.legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 0 0; font-size:13px; }
.sw { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.sw.c0 { background:var(--c0); } .sw.c1 { background:var(--c1); } .sw.c2 { background:var(--c2); } .sw.c3 { background:var(--c3); }
.sw.c4 { background:var(--c4); } .sw.c5 { background:var(--c5); } .sw.c6 { background:var(--c6); } .sw.c7 { background:var(--c7); }
.up { color:var(--err); } .down { color:var(--ok); }

/* Selector de período */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.chip { padding:5px 14px; border-radius:20px; background:var(--soft); color:var(--primary); text-decoration:none; font-size:13px; font-weight:500; border:1px solid var(--line); }
.chip:hover { background:#e2eee9; }
.chip.on { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Inicio */
.hero { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; border-radius:14px; padding:22px 26px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:var(--shadow); }
.hero h1 { color:#fff; font-size:26px; margin:0; }
.hero p { margin:4px 0 0; color:#d5eae3; }
.hero .btn { background:#fff; color:var(--primary-dark); border-color:#fff; }
.hero .btn:hover { background:var(--soft); }
.hero .btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.hero .btn.ghost:hover { background:rgba(255,255,255,.12); }
.alerts { display:flex; flex-direction:column; gap:8px; }
.alert { display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff6e5; border:1px solid #f0d9a8; border-radius:10px; padding:10px 14px; color:#7a4e0b; }
.alert.ok { background:#e6f4ec; border-color:#b5dcc5; color:#1d5b3a; }
@media (max-width:600px) { .bars .row { grid-template-columns:110px 1fr 90px; } .grid2 { grid-template-columns:1fr; } }

/* Ajustes: botones-enlace y menú compacto */
.btn { padding:7px 14px; border:1px solid var(--primary); border-radius:8px; line-height:1.3; }
.btn.small { padding:3px 10px; }
.hero .btn { border-color:#fff; }
.hero .btn.ghost { border-color:rgba(255,255,255,.6); }
nav a { padding-left:10px; padding-right:10px; font-size:14px; }
nav .brand { font-size:15px; }
.donut-legend .it { grid-template-columns:14px 1fr auto auto; }
.donut-legend .it strong, .donut-legend .pct { white-space:nowrap; font-variant-numeric:tabular-nums; }
.donut-legend .pct { min-width:48px; text-align:right; }
.donut-wrap { justify-content:center; }
.donut-legend { flex:1 1 230px; min-width:0; }

/* ===== Mejoras generales ===== */
.spacer { flex:1; }
.small { font-size:12.5px; } .strong { font-weight:600; } .nowrap { white-space:nowrap; }
.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card.flush { padding:0; overflow:hidden; }
.card.flush table th:first-child { border-radius:0; } .card.flush table th:last-child { border-radius:0; }
.card.flush th, .card.flush td { padding-left:16px; }
.card.flush th:last-child, .card.flush td:last-child { padding-right:16px; }
.table-head { display:flex; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.table-head strong { color:var(--text); }
td.empty { text-align:center; color:var(--muted); padding:34px 16px; }
table tbody tr:hover td { background:#f8fbf9; }

/* Menú */
nav { gap:0; padding:0 16px; }
details.dd { position:relative; }
details.dd > summary { list-style:none; cursor:pointer; padding:14px 11px; font-weight:500; font-size:14px; margin:0; border-bottom:3px solid transparent; color:var(--text); }
details.dd > summary::-webkit-details-marker { display:none; }
details.dd > summary:not(.who)::after { content:""; display:inline-block; margin-left:7px; border:4px solid transparent; border-top-color:var(--muted); border-bottom:0; vertical-align:2px; }
details.dd > summary:hover, details.dd[open] > summary, details.dd > summary.active { color:var(--primary); border-bottom-color:var(--primary); }
.dd-menu { position:absolute; left:0; top:100%; min-width:210px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(20,60,50,.14); padding:6px; z-index:20; }
details.dd.right .dd-menu { left:auto; right:0; }
.dd-menu a, .dd-menu .linklike { display:block; width:100%; text-align:left; padding:8px 12px; border:none; border-radius:7px; color:var(--text); background:none; font-weight:400; font-size:14px; text-decoration:none; cursor:pointer; }
.dd-menu a:hover, .dd-menu .linklike:hover { background:var(--soft); color:var(--primary); }
.dd-head { padding:6px 12px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.dd-menu form { margin:0; }
.who { display:flex; align-items:center; gap:8px; }
.avatar { display:inline-flex; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
nav a { padding-left:11px; padding-right:11px; }

/* Mensajes */
.flash { position:relative; padding-right:40px; transition:opacity .4s; }
.flash .x { position:absolute; right:8px; top:6px; background:none; border:none; color:inherit; font-size:20px; line-height:1; padding:2px 8px; cursor:pointer; opacity:.6; }
.flash .x:hover { opacity:1; background:none; }

/* Controles */
.sel { padding:4px 8px; font-size:13px; border-radius:7px; min-width:130px; max-width:170px; cursor:pointer; }
.sel.unset { color:#9a6a12; background:#fffaf0; border-color:#ecd9ae; }
.form input, .form select, .form textarea { width:100%; }
.form input.big { font-weight:700; }
label.check { flex-direction:row !important; align-items:center; gap:8px !important; font-size:13px !important; color:var(--text) !important; }
label.check input { width:auto; accent-color:var(--primary); }
.stack .card { margin-bottom:16px; }
.stack h2 + .sub { margin-bottom:14px; }
.actions-bar { display:flex; gap:10px; align-items:center; position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 35%); padding:18px 0 6px; }
.actions-bar button, .actions-bar .btn { padding:9px 20px; }

/* Tablas */
table.invoices td.supplier { max-width:270px; }
table.invoices td.actions { white-space:nowrap; text-align:right; }
table.suppliers td { padding-top:11px; padding-bottom:11px; }
.tags { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; margin-top:4px; }
a.tag { text-decoration:none; } a.tag:hover { filter:brightness(.96); }

/* Importar */
.steps { margin:0 0 18px; padding-left:22px; display:grid; gap:6px; }
.steps li::marker { color:var(--primary); font-weight:700; }
.dropzone { display:flex; gap:12px; align-items:center; flex-wrap:wrap; border:2px dashed #b9cfc6; background:#f6faf8; border-radius:12px; padding:18px; }
.dropzone input[type=file] { flex:1; min-width:240px; border:none; background:none; padding:6px 0; }
.dropzone input[type=file]::file-selector-button { margin-right:12px; border:1px solid #cfd9d4; background:#fff; border-radius:8px; padding:7px 14px; cursor:pointer; color:var(--primary); font-weight:500; }

/* Pantallas angostas */
@media (max-width:900px) {
  main { padding:0 12px; }
  .who-name { display:none; }
  nav .brand span { display:none; }
  .page-head { align-items:flex-start; }
}

table.invoices td.supplier { max-width:215px; }
.sel { min-width:118px; max-width:150px; }
@media (max-width:1180px) { .hide-md { display:none; } }
.card.flush { overflow-x:auto; }
table.invoices th, table.invoices td { padding-left:10px; padding-right:10px; }
table.invoices td.supplier { max-width:190px; }
table.invoices .sel { min-width:108px; max-width:138px; }
table.invoices td.actions .btn, table.invoices td.actions button { padding:3px 9px; }
@media (max-width:1180px) { table.invoices td:nth-child(3) .muted { display:block; } }
table.invoices td.voucher { max-width:165px; }
table.invoices td.voucher { line-height:1.3; }

.report-card { display:flex; gap:24px 36px; align-items:flex-end; flex-wrap:wrap; background:linear-gradient(135deg,#f6faf8,#fff); }
.report-card h2 { margin:0; }

/* Usuarios y roles */
.roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.role { display:flex; flex-direction:column; gap:3px; border:1px solid var(--line); border-left:5px solid var(--c7); border-radius:10px; padding:10px 14px; background:#fafcfb; }
.role-admin { border-left-color:var(--c1); } .role-editor { border-left-color:var(--c0); } .role-guest { border-left-color:var(--c2); }
.role-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:13px; font-weight:600; background:var(--soft); }
.row-form { display:inline-flex; gap:6px; align-items:center; }
.row-form input { padding:4px 8px; font-size:13px; width:150px; }
code.secret { background:#fff; border:1px dashed #6fa890; border-radius:6px; padding:3px 10px; font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--primary-dark); margin:0 6px; user-select:all; }

table.invoices th.sel-col, table.invoices td.sel-col { width:28px; padding-right:0; }
.bulk-bar { display:inline-flex; gap:10px; align-items:center; margin-left:4px; }
.bulk-bar[hidden], .bulk-bar [hidden] { display:none; }

/* Elección explícita al cambiar la clasificación de un proveedor */
.scope-dialog { width:min(540px,calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 18px 60px rgba(20,60,50,.24); }
.scope-dialog::backdrop { background:rgba(16,35,30,.48); }
.scope-dialog h2 { font-size:20px; margin-bottom:8px; }
.scope-dialog p { margin:0 0 14px; }
.scope-options { border:0; padding:0; margin:0 0 15px; }
.scope-options legend { font-weight:600; margin-bottom:8px; }
.scope-options label { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:9px; margin-bottom:7px; cursor:pointer; }
.scope-options label:has(input[type=radio]:checked) { background:var(--soft); border-color:var(--primary); }
.scope-options input[type=radio] { flex:none; margin-top:4px; accent-color:var(--primary); }
.scope-options span { display:grid; gap:2px; }
.scope-options small { color:var(--muted); font-size:12px; }
.scope-options input[type=month] { width:165px; margin-top:6px; }
.scope-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }