@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#17212b; --muted:#6b7785; --line:#e7ebef; --surface:#fff; --canvas:#f4f7fb; --nav:#12233d; --blue:#2672e8; --green:#1a9b73; --amber:#c98524; --purple:#7557c7; }
html, body { font-family:'DM Sans', Arial, sans-serif; background:var(--canvas); color:var(--ink); margin:0; }
h1,h2,h3,.navbar-brand { font-family:'Space Grotesk', sans-serif; }
h1 { font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.04em; margin:.2rem 0 .4rem; }
h2 { font-size:1.15rem; margin:.2rem 0; }
a { color:inherit; text-decoration:none; }
.content { padding:2.25rem 2.5rem 3rem; max-width:1400px; margin:0 auto; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2rem; }
.compact-heading { margin-bottom:1.35rem; }
.eyebrow { color:var(--blue); font-size:.7rem; font-weight:700; letter-spacing:.14em; margin:0 0 .5rem; }
.light-eyebrow { color:#98baff; }
.muted { color:var(--muted); margin:.2rem 0; }
.primary-button,.secondary-button { border-radius:10px; padding:.78rem 1.05rem; font-weight:700; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; border:1px solid transparent; cursor:pointer; }
.primary-button { color:white; background:var(--blue); box-shadow:0 6px 14px rgba(38,114,232,.2); }
.primary-button:hover { background:#1d5fc6; color:#fff; }
.secondary-button { color:var(--ink); background:#fff; border-color:var(--line); }
.text-link { color:var(--blue); font-size:.88rem; font-weight:700; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.3rem; }
.metric-card,.content-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 28px rgba(28,46,72,.04); }
.metric-card { padding:1.2rem 1.25rem; border-top:3px solid var(--blue); }
.metric-card span,.metric-card small { display:block; color:var(--muted); font-size:.83rem; }
.metric-card strong { display:block; font-family:'Space Grotesk'; font-size:1.8rem; letter-spacing:-.04em; margin:.55rem 0 .22rem; }
.metric-card small { font-size:.74rem; }
.accent-green { border-top-color:var(--green); }.accent-amber { border-top-color:var(--amber); }.accent-purple { border-top-color:var(--purple); }
.content-card { padding:1.25rem; }
.section-header,.result-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.data-table th { color:#8994a2; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; text-align:left; padding:.75rem .65rem; border-bottom:1px solid var(--line); }
.data-table td { padding:.9rem .65rem; border-bottom:1px solid #f0f2f5; white-space:nowrap; }
.data-table tr:last-child td { border-bottom:0; }.number { text-align:right; }
.status,.step-badge,.calculation-chip { border-radius:999px; padding:.3rem .6rem; font-size:.72rem; font-weight:700; }
.status-ok { background:#e7f7f0; color:#13825e; }.status-pending { background:#fff3de; color:#a76818; }.step-badge { background:#edf3ff; color:var(--blue); }.calculation-chip { background:#284b85; color:#cfe0ff; }
.loading-card,.empty-state { padding:2rem; background:#fff; border:1px dashed #cbd4df; border-radius:16px; color:var(--muted); }
.company-banner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:14px; margin-bottom:1rem; }
.company-banner > div { background:#fff; padding:1rem 1.15rem; }
.company-banner span,.company-banner small { display:block; color:var(--muted); font-size:.72rem; }
.company-banner strong { display:block; font-size:.92rem; margin:.25rem 0; }
.form-layout { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:1rem; align-items:start; }
.form-main-column { display:grid; gap:1rem; }
.form-card { padding:1.35rem; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.three-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }.wide-field { grid-column:1/-1; }
label { color:#5f6c7b; display:flex; flex-direction:column; gap:.42rem; font-size:.8rem; font-weight:700; min-width:0; width:100%; max-width:100%; }
input,select { font:inherit; font-weight:500; color:var(--ink); background:#fbfcfe; border:1px solid #dbe2ea; border-radius:9px; padding:.72rem .75rem; outline:none; min-width:0; width:100%; max-width:100%; box-sizing:border-box; }
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(38,114,232,.1); }.check-row { flex-direction:row; align-items:center; margin-top:1rem; }.check-row input { accent-color:var(--blue); }
.section-note { font-size:.8rem; margin-bottom:1rem; }
.vat-split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; min-width:0; overflow:visible; }
.vat-block { display:grid; gap:.85rem; background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:1rem; min-width:0; max-width:100%; overflow:visible; box-sizing:border-box; }
.vat-block > * { min-width:0; max-width:100%; }
.vat-block-title { display:flex; align-items:center; gap:.5rem; }
.vat-dot { width:.65rem; height:.65rem; border-radius:50%; display:inline-block; }
.goods-dot { background:var(--blue); }.services-dot { background:var(--green); }
.result-panel { background:var(--nav); color:white; border-radius:16px; padding:1.35rem; box-shadow:0 16px 36px rgba(18,35,61,.16); }.result-panel h2 { color:#fff; }.result-grid { display:grid; gap:1rem; }.result-grid > div { border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:.85rem; }.result-grid span,.result-grid small { display:block; color:#a9b9d2; font-size:.78rem; }.result-grid strong { display:block; font-family:'Space Grotesk'; font-size:1.65rem; margin:.2rem 0; }.result-grid small { font-size:.7rem; }.total-result { border-bottom:0!important; }.total-result strong { color:#8ce0bd; font-size:2rem; }.result-error,.result-warning,.rule-explanation { border-radius:9px; padding:.75rem; margin-top:.85rem; font-size:.79rem; line-height:1.45; }.result-error { background:#562f3b; color:#ffc8cb; }.result-warning { background:#5a482d; color:#ffdea1; }.rule-explanation { background:rgba(255,255,255,.07); color:#d8e3f4; }.save-button { width:100%; justify-content:center; margin-top:1rem; }.save-success { color:#8ce0bd; font-size:.8rem; margin-top:1rem; }.save-success a { text-decoration:underline; }.alert-danger { background:#fff0f0; border:1px solid #f4c7c7; border-radius:12px; color:#a43131; padding:1rem; }
@media (max-width:900px) { .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-layout { grid-template-columns:1fr; }.result-panel { order:-1; }.content { padding:1.4rem; } }
@media (max-width:600px) { .page-heading { align-items:flex-start; flex-direction:column; }.metrics-grid,.company-banner { grid-template-columns:1fr; }.form-grid,.three-columns,.vat-split-grid { grid-template-columns:1fr; }.wide-field { grid-column:auto; }.content { padding:1rem; } }

/* Offline + responsive (alineado a PagoLoteFrm.razor.css de LibDilitiumFast) */
.top-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.environment-pill { border-radius:999px; padding:.35rem .7rem; font-size:.72rem; font-weight:700; background:#edf3ff; color:var(--blue); }
.environment-pill.online { background:#e7f7f0; color:#13825e; }
.environment-pill.offline { background:#fff3de; color:#a76818; }
.pending-pill { border-radius:999px; padding:.35rem .7rem; font-size:.72rem; font-weight:700; background:#efe8ff; color:var(--purple); }
.offline-banner { margin:0 1rem; padding:.75rem 1rem; border-radius:10px; background:#fff8eb; border:1px solid #f0d7a4; color:#8a5a12; font-size:.85rem; }
.compact-btn { padding:.45rem .7rem !important; font-size:.78rem !important; }
.content { width:100%; max-width:min(1400px,100%); box-sizing:border-box; min-width:0; }
.form-layout, .form-main-column, .content-card, .company-banner, .vat-split-grid { min-width:0; max-width:100%; }
.form-card, .content-card, .form-main-column, .form-layout { overflow:visible; }
input, select, button, .primary-button, .secondary-button { max-width:100%; box-sizing:border-box; }
@media (max-width:900px) {
  .result-panel { position:sticky; top:.5rem; z-index:2; }
  .primary-button, .secondary-button { width:100%; justify-content:center; }
  .page-heading .primary-button, .page-heading .secondary-button { width:auto; }
}
@media (max-width:640px) {
  .top-row { padding-inline:.75rem !important; }
  .offline-banner { margin:.5rem; }
  .page-heading .primary-button, .page-heading .secondary-button { width:100%; }
  .data-table td, .data-table th { white-space:normal; }
  .metric-card strong { font-size:clamp(1.3rem,6vw,1.8rem); }
  .result-grid strong { font-size:clamp(1.25rem,5vw,1.65rem); }
  .save-button { min-height:44px; }
}
.tenant-chip { border-radius:999px; padding:.35rem .75rem; font-size:.75rem; font-weight:700; background:#12233d; color:#fff; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
tr.tenant-active td { background:#f3f8ff; }
@media (max-width:640px) {
  .tenant-actions { width:100%; }
  .tenant-actions .primary-button, .tenant-actions .secondary-button { flex:1 1 auto; }
}
/* SearchSelect autocomplete (reemplazo de combos nativos) */
.search-select { position:relative; width:100%; max-width:100%; min-width:0; }
.search-select.is-open { z-index:300; }
.search-select-input { width:100%; max-width:100%; box-sizing:border-box; padding-right:2rem; text-overflow:ellipsis; }
.search-select-clear { position:absolute; right:.45rem; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:.2rem .35rem; z-index:2; }
.search-select.is-disabled .search-select-input { opacity:.55; cursor:not-allowed; background:#f0f2f5; }
.search-select-menu { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:400; margin:0; padding:.35rem; list-style:none; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 28px rgba(28,46,72,.18); max-height:220px; overflow:auto; }
/* En tarjetas IVA el menu abre hacia arriba para no quedar cortado */
.vat-block .search-select-menu { top:auto; bottom:calc(100% + 4px); }
.search-select-option { padding:.55rem .65rem; border-radius:8px; cursor:pointer; font-size:.82rem; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-select-option:hover, .search-select-option.selected { background:#edf3ff; color:var(--blue); }
.search-select-empty { padding:.65rem; color:var(--muted); font-size:.8rem; }
@media (max-width:1100px) {
  .vat-split-grid { grid-template-columns:1fr; }
}
.ruc-lookup-row { display:flex; gap:.5rem; align-items:stretch; width:100%; min-width:0; }
.ruc-lookup-row input { flex:1 1 auto; min-width:0; }
.ruc-lookup-row .compact-btn { flex:0 0 auto; white-space:nowrap; }
.supplier-selected { margin-top:.45rem; padding:.55rem .7rem; border-radius:9px; background:#edf3ff; border:1px solid #d5e4ff; }
.supplier-selected strong { display:block; font-size:.9rem; }
.supplier-selected small { color:var(--muted); font-size:.75rem; }
.lookup-ok { color:#13825e; margin-top:.35rem; display:block; }
.lookup-error { color:#a43131; margin-top:.35rem; display:block; }

/* Dialogo acciones SRI (Pendientes) */
.modal-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(18,35,61,.45); display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-card { width:min(560px,100%); background:#fff; border-radius:16px; border:1px solid var(--line); box-shadow:0 24px 48px rgba(18,35,61,.22); padding:1.25rem 1.35rem 1.4rem; }
.modal-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.modal-header h2 { margin:.15rem 0 .25rem; font-size:1.25rem; }
.modal-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; }
.modal-meta span { display:block; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.modal-meta strong { display:block; margin-top:.2rem; font-size:.92rem; }
.modal-clave { margin:0 0 1rem; }
.modal-clave span { display:block; color:var(--muted); font-size:.72rem; font-weight:700; margin-bottom:.3rem; }
.modal-clave code { display:block; font-size:.78rem; word-break:break-all; background:#f4f7fb; border:1px solid var(--line); border-radius:8px; padding:.55rem .65rem; }
.modal-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.modal-actions .primary-button, .modal-actions .secondary-button { flex:1 1 140px; justify-content:center; }
@media (max-width:600px) {
  .modal-meta { grid-template-columns:1fr; }
  .modal-actions .primary-button, .modal-actions .secondary-button { flex:1 1 100%; }
}

/* Layout PWA (MainLayout + NavMenu) */
.page { position:relative; display:flex; flex-direction:column; min-height:100vh; }
main { flex:1; min-width:0; width:100%; }
.sidebar { background:var(--nav); }
.navbar-toggler { appearance:none; cursor:pointer; width:3.5rem; height:2.5rem; color:white; position:absolute; top:.5rem; right:1rem; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); border-radius:8px; }
.navbar-toggler:checked { background:rgba(255,255,255,.2); }
.navbar-brand { font-size:1.15rem; color:#fff; letter-spacing:-.02em; }
.nav-item { font-size:.9rem; padding-bottom:.4rem; }
.nav-item:first-of-type { padding-top:1rem; }
.nav-item:last-of-type { padding-bottom:1rem; }
.nav-item .nav-link { color:#aebbd0; border-radius:9px; padding:.78rem .8rem; display:flex; align-items:center; gap:.65rem; width:100%; }
.nav-item a.active { background:#274e86; color:#fff; }
.nav-item .nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-icon { width:1.35rem; text-align:center; font-size:1.1rem; }
.nav-scrollable { display:none; }
.navbar-toggler:checked ~ .nav-scrollable { display:block; }
.sidebar .top-row { background:rgba(0,0,0,.12); min-height:3.5rem; }
@media (min-width:641px) {
  .page { flex-direction:row; }
  .sidebar { width:250px; min-height:100vh; position:sticky; top:0; }
  .navbar-toggler { display:none; }
  .nav-scrollable { display:block; height:calc(100vh - 3.5rem); overflow-y:auto; }
}