@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 {
  --brand-primary:#121080; --brand-secondary:#16B6DC; --brand-cyan:#00E6E6;
  --brand-turquoise:#00C9B7; --brand-gold:#FFC76E; --brand-orange:#FF963D;
  --brand-mid-blue:#2D3FA3; --brand-light-blue:#6EC6F5; --brand-mint:#40E0C3;
  --brand-soft-green:#76E7D2; --brand-yellow:#FFE28A; --brand-peach:#FFB987;
  --brand-violet:#7226B9; --brand-coral:#FF6B6B;
  --ink:#050505; --muted:#4B5563; --line:#E6E6E6; --surface:#fff; --canvas:#F5F3F0;
  --nav:var(--brand-primary); --blue:var(--brand-primary); --green:var(--brand-turquoise);
  --amber:var(--brand-gold); --purple:var(--brand-violet);
  --surface-soft:var(--canvas); --selected:rgba(22,182,220,.10);
  --focus-ring:rgba(18,16,128,.18); --success-bg:var(--brand-soft-green);
  --warning-bg:var(--brand-yellow); --danger-bg:var(--brand-coral);
  --danger-ink:#8E253A;
}
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:var(--brand-cyan); }
.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(18,16,128,.20); }
.primary-button:hover { background:var(--brand-mid-blue); 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(18,16,128,.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:var(--muted); 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 var(--line); white-space:nowrap; }
.data-table tr:last-child td { border-bottom:0; }.number { text-align:right; }
.history-cards { display:grid; gap:.85rem; }
.history-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1rem; box-shadow:0 5px 18px rgba(18,16,128,.05); }
.history-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.history-card-heading h2 { margin:0 0 .2rem; font-size:1rem; overflow-wrap:anywhere; }
.history-card-heading > div > span { color:var(--muted); font-size:.8rem; }
.history-card-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; padding:.9rem 0; }
.history-card-data > div { min-width:0; }
.history-card-data span { display:block; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.history-card-data strong { display:block; margin-top:.2rem; font-size:.9rem; overflow-wrap:anywhere; }
.history-card-data .history-access-key { grid-column:1/-1; }
.history-access-key strong { padding:.55rem .65rem; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; }
.history-card-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.75rem; border-top:1px solid var(--line); }
.retention-number-box { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin:0 0 1rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.retention-number-box span { color:var(--muted); font-size:.82rem; font-weight:700; }
.retention-number-box strong { overflow-wrap:anywhere; text-align:right; }
.form-layout-fieldset { min-width:0; width:100%; margin:0; padding:0; border:0; }
@media (max-width:600px) { .history-card { padding:.85rem; }.history-card-heading { align-items:flex-start; }.history-card-data { gap:.7rem; }.history-card-actions > * { flex:1 1 auto; justify-content:center; }.retention-number-box { align-items:flex-start; flex-direction:column; }.retention-number-box strong { text-align:left; } }
.status,.step-badge,.calculation-chip { border-radius:999px; padding:.3rem .6rem; font-size:.72rem; font-weight:700; }
.status-ok { background:var(--success-bg); color:var(--ink); }.status-pending { background:var(--warning-bg); color:var(--ink); }.step-badge { background:var(--selected); color:var(--blue); }.calculation-chip { background:var(--brand-mid-blue); color:var(--brand-cyan); }
.loading-card,.empty-state { padding:2rem; background:#fff; border:1px dashed var(--line); 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:var(--muted); 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:var(--surface); border:1px solid var(--line); 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 var(--focus-ring); }.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:var(--surface-soft); 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,16,128,.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:var(--brand-light-blue); 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:var(--brand-mint); 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:var(--danger-bg); color:var(--ink); }.result-warning { background:var(--warning-bg); color:var(--ink); }.rule-explanation { background:rgba(255,255,255,.07); color:var(--brand-light-blue); }.save-button { width:100%; justify-content:center; margin-top:1rem; }.save-success { color:var(--brand-mint); font-size:.8rem; margin-top:1rem; }.save-success a { text-decoration:underline; }.alert-danger { background:var(--danger-bg); border:1px solid var(--brand-coral); border-radius:12px; color:var(--ink); 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:var(--selected); color:var(--blue); }
.environment-pill.online { background:var(--success-bg); color:var(--ink); }
.environment-pill.offline { background:var(--warning-bg); color:var(--ink); }
.pending-pill { border-radius:999px; padding:.35rem .7rem; font-size:.72rem; font-weight:700; background:rgba(114,38,185,.10); color:var(--purple); }
.offline-banner { margin:0 1rem; padding:.75rem 1rem; border-radius:10px; background:var(--warning-bg); border:1px solid var(--brand-gold); color:var(--ink); 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:var(--nav); 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:var(--selected); }
@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:var(--line); }
.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(18,16,128,.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:var(--selected); 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:var(--selected); border:1px solid var(--brand-secondary); }
.supplier-selected strong { display:block; font-size:.9rem; }
.supplier-selected small { color:var(--muted); font-size:.75rem; }
.lookup-ok { color:var(--ink); margin-top:.35rem; display:block; }
.lookup-error { color:var(--danger-ink); margin-top:.35rem; display:block; }

/* Dialogo acciones SRI (Pendientes) */
.modal-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(18,16,128,.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,16,128,.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:var(--canvas); 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%; }
}
.sri-dialog { max-height:calc(100vh - 2rem); max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem); overflow-y:auto; overscroll-behavior:contain; }
@media (max-width:600px) {
  .sri-dialog-backdrop { padding:max(.5rem,env(safe-area-inset-top)) .5rem max(.5rem,env(safe-area-inset-bottom)); }
  .sri-dialog { width:100%; padding:1rem; border-radius:16px; }
  .sri-dialog .modal-header { gap:.5rem; margin-bottom:.75rem; }
  .sri-dialog .modal-header h2 { font-size:1.08rem; }
  .sri-dialog .modal-meta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-bottom:.75rem; }
  .sri-dialog .modal-meta strong { font-size:.84rem; overflow-wrap:anywhere; }
  .sri-dialog .modal-actions .primary-button, .sri-dialog .modal-actions .secondary-button { flex:1 1 calc(50% - .55rem); min-width:0; padding:.65rem .5rem; font-size:.88rem; }
  .sri-dialog .modal-actions .primary-button:last-child { flex-basis: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:#fff; border-radius:9px; padding:.78rem .8rem; display:flex; align-items:center; gap:.65rem; width:100%; }
.nav-item a.active { background:var(--brand-mid-blue); 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; }
}
/* Casillas con tamaño propio y etiqueta completa como área táctil. */
.check-row { gap:.7rem; margin-top:0; min-height:44px; padding:.5rem 0; align-items:flex-start; line-height:1.45; cursor:pointer; }
.check-row input[type="checkbox"] { width:20px; height:20px; min-width:20px; min-height:20px; max-width:20px; flex:0 0 20px; padding:0; margin:.15rem 0 0; border-radius:4px; }
@media (max-width:760px) {
  .tax-conditions .form-grid { grid-template-columns:1fr; gap:.35rem; }
  .tax-conditions .check-row { font-size:.88rem; }
  .tax-conditions .section-note { line-height:1.5; }
}

.tax-conditions-summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:44px; cursor:pointer; list-style:none; color:var(--ink); font-weight:700; }
.tax-conditions-summary::-webkit-details-marker { display:none; }
.tax-conditions-summary::after { content:'+'; font-size:1.4rem; flex:0 0 auto; }
.tax-conditions[open] > .tax-conditions-summary::after { content:'−'; }
.tax-conditions-summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; border-radius:4px; }
.tax-conditions-content { padding-top:1rem; }
input[readonly] { background:var(--line); color:var(--muted); }

/* Acentos Elixir para las acciones destacadas y estados. */
.page-heading .primary-button,.save-button { background:var(--brand-orange); color:var(--ink); box-shadow:0 6px 14px rgba(255,150,61,.20); }
.page-heading .primary-button:hover,.save-button:hover { background:var(--brand-gold); color:var(--ink); }
.secondary-button:hover { background:var(--selected); border-color:var(--brand-secondary); }
.primary-button:focus-visible,.secondary-button:focus-visible,a:focus-visible { outline:3px solid var(--brand-mid-blue); outline-offset:3px; }
.primary-button:disabled,.secondary-button:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.save-success { background:var(--success-bg); color:var(--ink); padding:.7rem; border-radius:9px; }
.result-panel .save-success { background:transparent; color:var(--brand-mint); padding:0; }