:root {
    --bg: #f7f8fa;
    --panel: #ffffff;
    --ink: #152331;
    --muted: #607187;
    --line: #cfd8e3;
    --nav: #ffffff;
    --brand: #172635;
    --brand-dark: #111d28;
    --blue: #0b73d9;
    --gold: #ffd84d;
    --danger: #cf3f35;
    --success: #04935d;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, Segoe UI, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button {
    border: 0;
    min-height: 40px;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.danger-button { background: var(--danger); color: #fff; }
.bank-account-preview { color: var(--muted); font-size: 12px; }
input, select, textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 9px 11px;
}
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e6f4f1 0%, #f6f8fb 56%, #edf2ff 100%);
}
.auth-shell {
    width: min(920px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(300px, .86fr) minmax(360px, 1.14fr);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 24px 70px rgba(24, 34, 45, .16);
}
.auth-brand {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 40px;
    background: var(--brand-dark);
    color: #fff;
}
.auth-logo {
    width: min(100%, 230px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #0e5a4f;
    border: 1px solid rgba(255, 255, 255, .18);
}
.auth-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--gold);
    color: #17202a;
    font-weight: 900;
}
.logo-mark {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
}
.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.auth-brand h1 { margin: 4px 0 0; font-size: 30px; letter-spacing: 0; }
.auth-brand p { max-width: 330px; margin: 0; color: #d8eeeb; font-size: 16px; line-height: 1.5; }
.auth-card { display: grid; align-content: center; gap: 18px; padding: 64px 58px; }
.auth-card h2 { margin: 0; font-size: 34px; line-height: 1.05; }
.auth-card p { margin: 0; color: var(--muted); }
.auth-card input { min-height: 46px; }
.auth-card button { min-height: 46px; }
.auth-footer {
    display: grid;
    gap: 3px;
    padding-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.auth-footer strong { color: var(--brand); }
.shell { display: grid; grid-template-columns: 274px 1fr; min-height: 100vh; }
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    color: var(--ink);
    padding: 22px 16px;
    border-right: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.logo strong { font-size: 15px; }
.nav { display: grid; gap: 12px; }
.nav-group {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.nav-group summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
    content: "+";
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--ink);
}
.nav-group[open] summary::after { content: "-"; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 8px;
    padding: 10px 12px;
    color: #3f5268;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 800;
}
.nav-link span, .nav-group summary span {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .8);
}
.nav-link:hover, .nav-link.active {
    color: var(--ink);
    border-color: rgba(21, 35, 49, .12);
    transform: translateX(2px);
}
.nav-link.active { box-shadow: inset 4px 0 0 currentColor; }
.nav-dashboard { background: #e9f3ff; color: #0b5faa; }
.nav-sales { background: #fff8d9; }
.nav-sales .nav-link.active, .nav-sales .nav-link:hover { background: #ffef9b; color: #6b4b00; }
.nav-stock { background: #e9fbf4; }
.nav-stock .nav-link.active, .nav-stock .nav-link:hover { background: #c9f3df; color: #075f46; }
.nav-money { background: #eef4ff; }
.nav-money .nav-link.active, .nav-money .nav-link:hover { background: #dce9ff; color: #0b5faa; }
.nav-admin { background: #f4efff; }
.nav-admin .nav-link.active, .nav-admin .nav-link:hover { background: #eadfff; color: #5f2aa8; }
.content { min-width: 0; padding: 28px; }
.app-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}
.app-footer strong { color: var(--brand); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.eyebrow { margin: 0 0 4px; color: var(--brand); font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2, h3 { letter-spacing: 0; }
h1 { margin: 0; font-size: 30px; }
h2 { margin: 0 0 16px; font-size: 20px; }
.userbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: #fff;
}
.userbox div { display: grid; gap: 2px; }
.userbox small { color: var(--muted); }
.link-button { background: transparent; color: var(--blue); padding: 0; min-height: auto; }
.alert {
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid #b8eadc;
    background: #e8fff7;
    color: #145546;
}
.alert.error { border-color: #ffd0cc; background: #fff0ef; color: var(--danger); }
.notification-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    background: #fff8e6;
    border-color: #f7d774;
    color: #47370a;
}
.notification-box div { display: grid; gap: 8px; }
.notification-box a { text-decoration: underline; font-weight: 700; }
.notification-box button { white-space: nowrap; }
.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.metric, .panel { border: 1px solid var(--line); background: var(--panel); }
.metric { display: grid; gap: 8px; padding: 18px; }
.metric span, .muted { color: var(--muted); }
.metric strong { font-size: 24px; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: minmax(320px, .85fr) minmax(430px, 1.15fr); }
.panel { padding: 18px; overflow: hidden; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .full, .form-grid button { grid-column: 1 / -1; }
.variation-rules {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    background: #f7fbff;
}
.variation-rule {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) 86px;
    gap: 8px;
    align-items: center;
}
.variation-rule.header {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}
.variation-rule input { min-height: 40px; }
.form-grid .variation-rule button { grid-column: auto; min-height: 40px; }
.form-grid #add-variation-rule { grid-column: 1 / -1; justify-self: start; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.print-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 680px; border-collapse: collapse; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.badge { display: inline-flex; padding: 4px 9px; background: #eef2ff; color: #263b8f; font-size: 12px; font-weight: 900; }
.badge.income, .badge.entrada, .badge.admin { background: #e8fff7; color: #12705a; }
.badge.expense, .badge.salida, .badge.inactive { background: #fff0ef; color: var(--danger); }
.audit-form { display: grid; gap: 18px; }
.audit-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compact-audit-sections { grid-column: 1 / -1; }
.compact-audit-sections .denomination-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.compact-audit-sections .denomination-grid label { padding: 8px; }
.audit-card {
    border: 1px solid var(--line);
    background: #fbfdfc;
    padding: 16px;
}
.audit-card h3 { margin: 0 0 12px; font-size: 18px; }
.denomination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 10px;
}
.denomination-grid label {
    padding: 10px;
    border: 1px solid #dce6ee;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
}
.denomination-grid input { min-height: 38px; padding: 7px 9px; }
.expense-grid { display: grid; gap: 10px; }
.expense-line {
    display: grid;
    grid-template-columns: 1.15fr .55fr 1fr .65fr .85fr;
    gap: 8px;
    align-items: center;
}
.checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ink);
    font-weight: 800;
}
.checkline input { width: auto; min-height: auto; }
.audit-result {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.audit-result div {
    border: 1px solid var(--line);
    background: #eefaf6;
    padding: 14px;
    display: grid;
    gap: 6px;
}
.audit-result span { color: var(--muted); }
.audit-result strong { font-size: 20px; }
.audit-row.audit-cuadrado { background: #f1fff8; }
.audit-row.audit-faltante { background: #fff0ef; }
.audit-row.audit-sobrante { background: #fff8dd; }
.audit-badge { background: #e9f3ff; color: #0b5faa; }
.detail-list { display: grid; gap: 10px; }
.detail-list p {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.detail-list span { color: var(--muted); }
.credit-help { display: grid; gap: 12px; }
.credit-help article {
    border-left: 5px solid var(--success);
    background: #effaf6;
    padding: 14px;
}
.credit-help article:nth-child(2) { border-color: var(--danger); background: #fff3f2; }
.credit-help article:nth-child(3) { border-color: var(--gold); background: #fff9df; }
.credit-help p { margin: 7px 0 0; color: var(--muted); }
.credit-overdue { background: #fff0ef; color: #7d1711; }
.service-help { display: grid; gap: 12px; align-content: start; }
.service-help article {
    border: 1px solid #dbe7f1;
    border-left: 6px solid #0b8575;
    background: #f5fffb;
    padding: 14px;
}
.service-help article:nth-child(3) { border-left-color: #ffd84d; background: #fffbed; }
.service-help article:nth-child(4) { border-left-color: #0b73d9; background: #f0f7ff; }
.service-help p, .service-note p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
.service-note {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    background: #fbfdff;
}
.historical-payment {
    padding: 10px 12px;
    border: 1px solid #f3d58b;
    background: #fff8df;
}
.historical-note {
    padding: 10px 12px;
    border-left: 5px solid #f59f00;
    background: #fffaf0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.badge.historical {
    background: #fff4bd;
    color: #745300;
}
.progress-track {
    width: 120px;
    height: 12px;
    overflow: hidden;
    background: #edf1f5;
    border-radius: 999px;
}
.progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b8575, #37d67a);
}
.service-recibido td { background-color: #e9f3ff; }
.service-en_proceso td { background-color: #fff4bd; }
.service-esperando_cliente td { background-color: #fff0ef; }
.service-listo td { background-color: #d9f8ea; }
.service-entregado td { background-color: #edf1f5; }
.service-cancelado td { background-color: #ffd9d6; color: #7a1111; }
.inventory-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.inventory-stats { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); }
.inventory-stats span { padding-right: 18px; border-right: 1px solid var(--line); }
.inventory-stats strong { margin-left: 8px; color: var(--ink); }
.inventory-actions { display: flex; gap: 10px; }
.inventory-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #9bd8c2;
    border-left: 5px solid var(--success);
    background: #effaf6;
}
.inventory-result > div:first-child { display: grid; gap: 4px; }
.inventory-result strong { font-size: 18px; color: #067346; }
.inventory-result span { color: var(--muted); }
.inventory-result-actions { display: flex; align-items: center; gap: 10px; }
.big-action, .primary-action { min-height: 48px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 8px; font-weight: 900; }
.primary-action { background: var(--brand); color: #fff; }
.inventory-filters { display: grid; grid-template-columns: minmax(260px, 1fr) 210px 170px 130px 145px 100px; gap: 10px; margin-bottom: 14px; }
.category-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.category-strip a { padding: 9px 15px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #314256; font-weight: 700; }
.category-strip a.active { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.category-strip a.blue.active, .category-strip a.blue:hover { border-color: var(--blue); background: #e9f3ff; color: var(--blue); }
.inventory-panel { padding: 0; border-radius: 10px; }
.inventory-table { min-width: 1120px; }
.inventory-table th { background: #f1f4f7; font-size: 13px; }
.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #f0c7c3;
    background: #fff8f7;
}
.bulk-action-bar label { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.bulk-action-bar input, .selection-column input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--brand); }
.bulk-action-bar span { color: var(--muted); }
.bulk-action-bar button { margin-left: auto; }
.bulk-action-bar button:disabled { cursor: not-allowed; opacity: .45; }
.selection-column { width: 86px; text-align: center; }
.inventory-pagination {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}
.inventory-pagination.bottom { border-top: 1px solid var(--line); border-bottom: 0; }
.page-controls { display: flex !important; align-items: center; gap: 8px; }
.page-controls a, .page-controls span, .page-controls strong {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid var(--line);
    background: #fff;
}
.page-controls a { color: var(--blue); font-weight: 900; }
.page-controls strong { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-controls .disabled { color: #9aa6b2; background: #f3f5f7; }
.product-cell { display: flex; align-items: center; gap: 12px; }
.product-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #edf1f5; color: #77879a; font-weight: 900; }
.product-name { text-decoration: underline; font-weight: 900; }
.product-cell small { display: block; color: var(--muted); margin-top: 3px; }
.inline-money, .inline-qty { display: inline-flex; min-width: 100px; min-height: 38px; align-items: center; justify-content: center; border: 2px solid #c8d2dd; border-radius: 10px; background: #fff; font-weight: 800; }
.inline-qty { min-width: 76px; }
.margin-pill { margin-left: 8px; padding: 4px 9px; border-radius: 999px; background: #d6f5e8; color: #067346; font-size: 12px; font-weight: 900; }
.table-action { color: var(--blue); font-weight: 900; }
.row-actions { display: flex; align-items: center; gap: 8px; }
.small-button { min-height: 30px; padding: 6px 9px; font-size: 12px; }
.panel nav[role="navigation"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 13px;
}
.panel nav[role="navigation"] svg {
    width: 18px;
    height: 18px;
}
.panel nav[role="navigation"] a,
.panel nav[role="navigation"] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}
.panel nav[role="navigation"] a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 800;
}
.panel nav[role="navigation"] [aria-current="page"] span,
.panel nav[role="navigation"] span[aria-current="page"] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.status-pill { display: inline-flex; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; text-transform: capitalize; background: #e8eef5; color: #314256; }
.status-pill.recibido, .order-recibido td { background-color: #e9f3ff; }
.status-pill.en_diseno, .order-en_diseno td { background-color: #eee5ff; color: #5f3b96; }
.status-pill.en_elaboracion, .order-en_elaboracion td { background-color: #fff4bd; }
.status-pill.listo, .order-listo td { background-color: #d9f8ea; }
.status-pill.entregado, .order-entregado td { background-color: #edf1f5; }
.status-pill.entregado_credito, .order-entregado_credito td { background-color: #ffe8c7; color: #7a4b00; }
.status-pill.cancelado, .order-cancelado td { background-color: #ffd9d6; color: #7a1111; }
.delivery-open td { background-color: #e9f9ef; }
.delivery-soon td { background-color: #fff4bd; }
.delivery-due td { background-color: #ffd9d6; color: #7a1111; }
.delivery-due .product-name { color: #7a1111; }
.delivery-soon .product-name { color: #745300; }
.sale-line { display: grid; grid-template-columns: minmax(260px, 1fr) 110px 120px 130px; gap: 10px; align-items: end; margin-bottom: 10px; }
.sale-product-line {
    display: block;
    padding: 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--success);
    background: #fbfcfd;
}
.sale-product-filters {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(280px, 1fr);
    gap: 12px;
    align-items: end;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e7ed;
}
.sale-product-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: end;
    padding-top: 12px;
}
.sale-product-values {
    display: grid;
    grid-template-columns: 110px 145px 145px;
    justify-content: end;
    gap: 12px;
}
.sale-product-line select,
.sale-product-line input,
.sale-product-line output { min-height: 40px; height: 40px; }
.line-search { position: relative; }
.line-search small {
    position: absolute;
    right: 10px;
    bottom: 11px;
    padding-left: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
}
.line-search input { padding-right: 104px; }
.order-line { grid-template-columns: 180px minmax(260px, 1fr) 100px 120px 130px; }
.doc-line label { gap: 5px; }
.doc-line output {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    background: #f8fafc;
    color: var(--ink);
    font-weight: 800;
    white-space: nowrap;
}
.document-summary { max-width: 360px; margin: 12px 0 0 auto; padding: 10px 12px; border: 1px solid var(--line); background: #fbfcfe; }
.document-summary .report-row { padding: 8px 0; }
.order-advance-fields {
    padding: 14px;
    border: 1px solid #b9ded7;
    background: #f1fbf8;
}
.order-file-upload small { color: var(--muted); line-height: 1.4; }
.credit-delivery-form {
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ead7a2;
    background: #fffaf0;
}
.credit-delivery-form label { min-width: 170px; }
.order-files { display: grid; gap: 12px; }
.order-file-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #fbfcfd;
}
.order-file-card small { display: block; margin-top: 4px; color: var(--muted); }
.report-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.account-help {
    padding: 14px 16px;
    border: 1px solid #b9ded7;
    border-left: 5px solid var(--success);
    background: #f1fbf8;
    color: var(--ink);
}
.account-help strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}
.account-help p {
    margin: 7px 0;
    color: #314256;
}
.account-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}
.amount-calculator-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
.amount-calculator-field button { min-height: 40px; padding: 8px 10px; border-radius: 5px; background: var(--success); }
.daily-calculator-popover {
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, 340px);
    padding: 14px;
    border: 1px solid #b8d7ce;
    background: #fff;
    box-shadow: 0 18px 45px rgba(20, 33, 45, .18);
}
.calculator-display {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--brand-dark);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    overflow: hidden;
}
.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.calculator-grid button {
    grid-column: auto;
    min-height: 38px;
    padding: 6px;
    border-radius: 5px;
}
.form-grid .calculator-grid button { grid-column: auto; }
.calculator-grid .operator { background: #0b8575; }
.calculator-grid button:last-child {
    grid-column: span 3;
    background: var(--success);
}
.analytics-card {
    padding: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.analytics-card .toolbar h2, .analytics-card > h2 { font-size: 24px; }
.line-chart { height: 230px; border: 1px solid var(--line); background: linear-gradient(#f7fafc 1px, transparent 1px) 0 0 / 100% 44px; }
.line-chart svg { width: 100%; height: 100%; }
.line-chart line { stroke: var(--brand); stroke-width: 3; }
.line-chart circle { fill: var(--gold); stroke: var(--brand-dark); stroke-width: 2; }
.chart-caption, .legend { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; color: var(--muted); }
.chart-caption strong { color: var(--ink); }
.bar-chart { display: grid; gap: 11px; }
.bar-row, .rank-row { display: grid; grid-template-columns: 74px minmax(120px, 1fr) 120px; gap: 12px; align-items: center; }
.bar-row strong, .rank-row strong { text-align: right; }
.bar-track, .mini-bar { position: relative; height: 14px; overflow: hidden; background: #edf1f5; border-radius: 999px; }
.bar-track i, .bar-track b, .mini-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
.bar-track i { background: linear-gradient(90deg, #0b8575, #20c997); z-index: 2; }
.bar-track b { background: #ffd84d; opacity: .55; }
.projection-note {
    margin: 14px 0 18px;
    border-left: 5px solid #ffd84d;
    background: #fffdf1;
}
.projection-note p {
    margin: 6px 0 0;
    color: var(--muted);
}
.financial-section {
    margin: 18px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.financial-metrics {
    margin-bottom: 18px;
}
.financial-metrics .metric strong {
    font-size: 21px;
}
.financial-metrics .metric strong.positive {
    color: #087f5b;
}
.financial-metrics .metric strong.negative {
    color: var(--danger);
}
.financial-card {
    border: 1px solid var(--line);
    background: #fff;
    padding: 18px;
}
.financial-card h3 {
    margin: 0 0 14px;
    font-size: 22px;
}
.statement-group {
    display: grid;
    gap: 2px;
    margin-bottom: 16px;
}
.statement-group > strong {
    display: inline-flex;
    width: max-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e9f3ff;
    color: #0b5faa;
    font-size: 12px;
    text-transform: uppercase;
}
.statement-group:nth-of-type(2) > strong {
    background: #fff4bd;
    color: #745300;
}
.statement-group:nth-of-type(3) > strong {
    background: #e9fbf4;
    color: #075f46;
}
.report-row.total {
    margin-top: 4px;
    background: #f4f7fb;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 900;
}
.report-row.grand-total {
    margin-top: 4px;
    background: var(--brand);
    color: #fff;
    padding-left: 12px;
    padding-right: 12px;
    border-bottom: 0;
    font-weight: 900;
}
.balance-check {
    margin-top: 10px;
    padding: 10px 12px;
    font-weight: 900;
}
.balance-check.ok {
    background: #e8fff7;
    color: #087f5b;
}
.balance-check.warning {
    background: #fff0ef;
    color: #9b1c1c;
}
.cash-flow-card {
    margin-top: 18px;
}
.projection-row {
    display: grid;
    grid-template-columns: minmax(78px, 92px) minmax(220px, 1fr) minmax(150px, 190px);
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.projection-row small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}
.projection-values {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 13px;
}
.projection-status {
    padding: 10px 12px;
    border-radius: 8px;
    text-align: right;
    background: #e7f8f1;
    color: #075f46;
}
.projection-status.behind {
    background: #fff4d6;
    color: #805300;
}
.projection-status strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
}
.projection-status small {
    color: inherit;
    font-weight: 700;
}
.legend { justify-content: flex-start; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; display: inline-block; border-radius: 3px; }
.legend-real { background: var(--brand); }
.legend-projected { background: #ffd84d; }
.rank-row {
    grid-template-columns: minmax(96px, 130px) minmax(80px, 1fr) minmax(96px, max-content);
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.rank-row span { font-weight: 800; }
.rank-row small { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; }
.rank-row strong {
    min-width: 96px;
    white-space: nowrap;
    color: var(--ink);
    font-size: 18px;
}
.rank-1 strong { color: #075f46; }
.rank-2 strong { color: #805300; }
.rank-3 strong { color: #0d5f9f; }
.mini-bar { height: 18px; }
.mini-bar i { background: linear-gradient(90deg, #087f5b, #37d67a); }
.rank-2 .mini-bar i { background: linear-gradient(90deg, #f59f00, #ffd43b); }
.rank-3 .mini-bar i { background: linear-gradient(90deg, #1971c2, #74c0fc); }
.rank-4 .mini-bar i { background: linear-gradient(90deg, #9c36b5, #da77f2); }
.rank-5 .mini-bar i { background: linear-gradient(90deg, #e8590c, #ffa94d); }
.rank-6 .mini-bar i { background: linear-gradient(90deg, #0b7285, #66d9e8); }
.rank-7 .mini-bar i { background: linear-gradient(90deg, #495057, #adb5bd); }
.mini-bar.gold i { background: linear-gradient(90deg, #f08c00, #ffd43b); }
.mini-bar.navy i { background: linear-gradient(90deg, #17202a, #4dabf7); }
.low td { background: #fff8e6; }
.stock-low td { background: #fff4bd; }
.stock-out td { background: #ffd9d6; color: #7a1111; }
.location-pill {
    display: inline-flex;
    margin: 2px 4px 2px 0;
    padding: 4px 8px;
    border: 1px solid #bdd8d2;
    border-radius: 5px;
    background: #eefaf7;
    color: #075f46;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.stagnant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}
.stagnant-item {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid #ead7a2;
    border-left: 5px solid #f59f00;
    background: #fffaf0;
}
.stagnant-item span {
    color: #805300;
    font-size: 18px;
    font-weight: 900;
}
.stagnant-item small { color: var(--muted); }
@media (max-width: 960px) {
    .auth-shell, .shell, .grid.two, .metrics, .form-grid, .sale-line, .inventory-filters { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; max-height: none; }
    .inventory-head { align-items: stretch; flex-direction: column; }
    .inventory-actions { flex-direction: column; }
    .inventory-result { align-items: stretch; flex-direction: column; }
    .inventory-result-actions { align-items: stretch; flex-direction: column; }
    .variation-rule { grid-template-columns: 1fr; }
    .variation-rule.header { display: none; }
    .auth-brand { padding: 34px; }
    .content { padding: 18px; }
    .topbar { align-items: stretch; flex-direction: column; }
    .projection-row { grid-template-columns: 1fr; }
    .projection-status { text-align: left; }
}
@media print {
    body { background: #fff; }
    .sidebar, .topbar, .inventory-filters, .print-actions, .userbox { display: none !important; }
    .shell { display: block; min-height: auto; }
    .content { padding: 0; }
    .metrics, .grid.two { grid-template-columns: 1fr 1fr; }
    .panel, .metric { break-inside: avoid; box-shadow: none; }
    .table-wrap { overflow: visible; }
    table { min-width: 0; }
    a { text-decoration: none; }
}

/* Venta: distribución estable de filtros y detalle, por encima de la rejilla genérica. */
.document-form #sale-lines > .sale-product-line {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    grid-template-columns: none !important;
    gap: 0;
}
.document-form #sale-lines > .sale-product-line > .sale-product-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}
.document-form #sale-lines > .sale-product-line > .sale-product-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
.document-form #sale-lines > .sale-product-line .line-product {
    display: grid;
    width: 100%;
}
.document-form #sale-lines > .sale-product-line .line-product select {
    width: 100% !important;
    min-width: 0;
}
.document-form #sale-lines > .sale-product-line label {
    min-width: 0;
}
.document-form #sale-lines > .sale-product-line select,
.document-form #sale-lines > .sale-product-line input,
.document-form #sale-lines > .sale-product-line output {
    width: 100%;
}
@media (max-width: 760px) {
    .document-form #sale-lines > .sale-product-line > .sale-product-filters,
    .document-form #sale-lines > .sale-product-line > .sale-product-fields {
        grid-template-columns: 1fr;
    }
    .sale-product-values {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
}