:root { color-scheme: light; --ink:#173027; --muted:#66766e; --brand:#174c38; --lime:#d8ef65; --surface:#fff; --line:#dfe5de; --warning:#c68524; }
html, body { margin: 0; font-family: Inter, Aptos, "Segoe UI", sans-serif; color: var(--ink); background:#f3f5f1; }
* { box-sizing: border-box; }
h1, h2, p { margin-top: 0; }
h1 { letter-spacing:-.035em; font-size:clamp(2rem,4vw,3.4rem); line-height:1.02; }
h2 { letter-spacing:-.02em; }
a { color:var(--brand); }
button, input { font:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #79a8ff; outline-offset:2px; }
.eyebrow { display:block; color:#66766e; font-size:.72rem; font-weight:800; letter-spacing:.13em; margin-bottom:.75rem; }
.hero-panel { border-radius:24px; background:var(--brand); color:white; padding:clamp(1.5rem,4vw,3rem); display:flex; align-items:end; justify-content:space-between; gap:2rem; box-shadow:0 22px 60px rgba(23,76,56,.18); }
.hero-panel p { color:#cde0d6; max-width:650px; margin-bottom:0; }
.hero-panel .eyebrow { color:var(--lime); }
.primary-action, .secondary-action, .pay-action { border:0; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none; }
.primary-action { padding:1rem 1.3rem; background:var(--lime); color:#173027; white-space:nowrap; }
.secondary-action { padding:.85rem 1.2rem; background:#e9eee9; color:var(--ink); }
.pay-action { width:100%; padding:1rem; background:var(--lime); color:#173027; }
.pay-action:disabled { cursor:not-allowed; opacity:.45; }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.25rem 0 2.5rem; }
.status-card { background:var(--surface); border:1px solid var(--line); padding:1.25rem; border-radius:16px; display:flex; flex-direction:column; gap:.25rem; }
.status-card strong { font-size:1.2rem; }
.status-card small, .module-card span, .cart-line small, .policy-note, .operations-list small { color:var(--muted); }
.status-card.status-ok { border-top:4px solid #42a873; }
.status-label { color:var(--muted); font-size:.77rem; font-weight:700; }
.module-section { margin-top:2rem; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:1rem; }
.section-heading h2 { margin-bottom:0; }
.module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.module-card { min-height:130px; padding:1.25rem; border-radius:16px; border:1px solid var(--line); background:white; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; }
.module-card strong { font-size:1.2rem; }
.module-card:hover { border-color:#9eb9aa; transform:translateY(-2px); }
.module-card.is-planned { opacity:.72; }
.connection-pill { padding:.35rem .65rem; border-radius:999px; background:#dcf6e5; color:#17613a; font-size:.74rem; font-weight:800; }
.checkout-header, .page-heading { margin-bottom:1.5rem; }
.checkout-header { display:flex; justify-content:space-between; align-items:start; }
.checkout-header h1, .page-heading h1 { font-size:2.3rem; margin-bottom:.25rem; }
.checkout-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:1rem; align-items:start; }
.sale-panel, .totals-panel { background:white; border:1px solid var(--line); border-radius:20px; padding:1.25rem; }
.scanner-label { display:block; font-weight:750; margin-bottom:.5rem; }
.scanner-row { display:flex; gap:.65rem; }
.scanner-input { min-width:0; flex:1; padding:.85rem 1rem; border:1px solid #aebbb3; border-radius:12px; }
.empty-state { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); }
.empty-state strong { color:var(--ink); }
.cart-lines { margin-top:1rem; border-top:1px solid var(--line); }
.cart-line { display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); }
.cart-line div { display:flex; flex-direction:column; }
.icon-action { width:34px; height:34px; border:0; border-radius:50%; background:#f1f3f0; cursor:pointer; }
.totals-panel { position:sticky; top:80px; }
.totals-panel dl div { display:flex; justify-content:space-between; padding:.6rem 0; }
.totals-panel dt { font-weight:500; color:var(--muted); }
.totals-panel dd { margin:0; font-weight:750; }
.totals-panel .grand-total { border-top:1px solid var(--line); margin-top:.5rem; padding-top:1rem; }
.grand-total dt, .grand-total dd { font-size:1.45rem; color:var(--ink); font-weight:850; }
.checkout-message { margin:1rem 0; padding:.8rem; border-radius:10px; background:#eef5ec; font-size:.85rem; }
.policy-note { display:block; margin-top:1rem; line-height:1.45; }
.page-heading p { color:var(--muted); max-width:700px; }
.operations-list { display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.operations-list article { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1.15rem 1.25rem; border-bottom:1px solid var(--line); }
.operations-list article:last-child { border-bottom:0; }
.operations-list article div { display:flex; flex-direction:column; }
.operations-list b { font-size:.78rem; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#999; }.status-dot.healthy{background:#42a873}.status-dot.pending{background:var(--warning)}
#blazor-error-ui { display:none; position:fixed; bottom:0; width:100%; padding:1rem; background:#8d2828; color:white; z-index:1000; }
.loading-progress { position:absolute; display:block; width:8rem; height:8rem; inset:20vh 0 auto; margin:auto; }.loading-progress circle{fill:none;stroke:#dfe5de;stroke-width:.6rem}.loading-progress circle:last-child{stroke:var(--brand)}
.loading-progress-text { position:absolute; inset:calc(20vh + 3.4rem) 0 auto; text-align:center; }.loading-progress-text:after{content:var(--blazor-load-percentage-text,"Cargando")}
@media (max-width:1000px) { .status-grid,.module-grid{grid-template-columns:repeat(2,1fr)} .checkout-grid{grid-template-columns:1fr}.totals-panel{position:static} }
@media (max-width:600px) { .hero-panel{align-items:start;flex-direction:column}.status-grid,.module-grid{grid-template-columns:1fr}.scanner-row{align-items:stretch;flex-direction:column}.operations-list article{grid-template-columns:auto 1fr}.operations-list b{grid-column:2} }