/*
 * PITSTOP UI — hoja maestra del MVP
 * Referencias visuales: /v0.html y /v0.png
 */
:root {
    --color-ink: #17262b;
    --color-muted: #637579;
    --color-line: #cfdcd7;
    --color-line-soft: #e0e8e4;
    --color-paper: #eaf0ed;
    --color-surface: #fff;
    --color-surface-subtle: #f2f6f4;
    --color-teal: #23ad9d;
    --color-teal-dark: #168f84;
    --color-navy: #20383d;
    --color-amber: #d89531;
    --color-red: #dc6d61;
    --color-purple: #8874cc;
    --color-blue: #5b91d3;
    --color-accent-soft: #e2f6f2;
    --color-accent-hover: #eaf8f6;
    --color-accent-wash: #f2fbf9;
    --color-neutral-soft: #edf1f2;
    --color-warning-soft: #fff3df;
    --color-warning-wash: #fffaf0;
    --color-danger-soft: #ffebe9;
    --color-purple-soft: #eeeafb;
    --color-blue-soft: #e9f1fb;
    --color-warning-text: #9b691f;
    --color-danger-text: #a94d44;
    --color-blue-text: #3f72b0;
    --color-accent-border: #b4ddd5;
    --color-warning-border: #f1dfbd;
    --color-danger-border: #f2cac6;
    --color-switch-track: #dfe5e4;
    --color-surface-sticky: rgb(255 255 255 / 96%);
    --color-action: #23ad9d;
    --color-action-hover: #168f84;
    --sidebar-width: 238px;
    --topbar-height: 70px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --shadow-action: 0 4px 10px rgb(35 173 157 / 13%);
    --shadow-card: 0 2px 5px rgb(23 38 43 / 5%), 0 8px 20px rgb(23 38 43 / 3%);
    --color-landing-float: #20383d;
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: light; }
body {
    margin: 0;
    overflow: hidden;
    background: var(--color-paper);
    color: var(--color-ink);
    font: 13px/1.45 var(--font-ui);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }

/* Shell: sidebar y contenido conservan scroll vertical independiente. */
.app-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    flex: 0 0 var(--sidebar-width);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--color-surface);
    border-right: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    padding: 25px 14px 16px;
}
.sidebar__content { flex: 1 0 auto; }
.sidebar__footer { margin-top: auto; padding-top: 20px; }
.sidebar__header { display: flex; align-items: flex-start; justify-content: space-between; }
.sidebar__close, .sidebar-toggle, .sidebar-backdrop { display: none; }
.app-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    outline: none;
}
.content-container { width: min(100%, 1440px); margin-inline: auto; padding: 33px 35px 48px; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--color-navy); font-size: 21px; font-weight: 760; letter-spacing: -.8px; padding: 0 12px 28px; }
.brand__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--color-action); color: white; display: grid; place-items: center; transform: rotate(-8deg); }
.brand__dot { color: var(--color-teal); }
.workspace { width: calc(100% - 4px); border: 1px solid var(--color-line); border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 9px; margin: 0 2px 25px; text-align: left; background: var(--color-surface-subtle); }
.workspace__icon { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--color-accent-soft); color: var(--color-teal-dark); display: grid; place-items: center; font-size: 10px; font-weight: 750; }
.workspace__copy, .user-card__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.workspace strong, .user-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.workspace small, .user-card small { color: var(--color-muted); font-size: 10px; }
.nav-label { margin: 0 0 8px; padding: 0 12px; color: var(--color-muted); font-size: 9px; font-weight: 750; letter-spacing: 1.2px; }
.nav-label--spaced { margin-top: 24px; }
.nav-item { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--color-muted); position: relative; }
.nav-item > span:nth-child(2) { flex: 1; font-size: 12px; }
.nav-item:hover { color: var(--color-teal-dark); background: var(--color-accent-wash); }
.nav-item.is-active { color: var(--color-teal-dark); background: var(--color-accent-hover); font-weight: 650; }
.nav-item.is-active::before { content: ""; position: absolute; left: -14px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--color-teal); }
.nav-item__icon { width: 17px; flex: none; text-align: center; }
.nav-item--group b { color: var(--color-muted); font-size: 10px; }
.nav-item--disabled { cursor: default; opacity: .55; }
.nav-item--disabled:hover { color: var(--color-muted); background: transparent; }
.nav-item--disabled small { font-size: 9px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.nav-submenu { display: grid; gap: 2px; margin: 2px 0 8px 41px; }
.nav-subitem { border-radius: 6px; padding: 7px 10px; color: var(--color-muted); font-size: 10px; }
.nav-subitem:hover, .nav-subitem.is-active { background: var(--color-accent-hover); color: var(--color-teal-dark); font-weight: 700; }
.badge { min-width: 20px; height: 19px; display: grid; place-items: center; border-radius: 10px; background: var(--color-neutral-soft); color: var(--color-muted); font-size: 10px; }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.user-card { border-top: 1px solid var(--color-line); padding: 16px 8px 0; display: flex; align-items: center; gap: 9px; }
.logout-form { flex: none; }
.logout-form button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--color-muted); font-size: 17px; }
.logout-form button:hover { background: var(--color-danger-soft); color: var(--color-danger-text); }
.logout-form button:focus-visible { outline: 3px solid rgb(35 173 157 / 25%); outline-offset: 2px; }
.avatar { width: 27px; height: 27px; flex: none; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-teal-dark); display: grid; place-items: center; font-size: 9px; font-weight: 750; }

.topbar { height: var(--topbar-height); flex: 0 0 var(--topbar-height); background: var(--color-surface); border-bottom: 1px solid var(--color-line); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 35px; }
.breadcrumbs { display: flex; gap: 10px; color: var(--color-muted); font-size: 11px; }
.breadcrumbs strong { color: var(--color-ink); }
.breadcrumbs a:hover { color: var(--color-teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs__separator { color: var(--color-muted); }
.global-search { position: relative; width: min(320px, 30vw); margin-left: auto; color: var(--color-muted); }
.global-search > input { width: 100%; height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); outline: none; background: var(--color-surface-subtle); padding: 8px 38px 8px 32px; color: var(--color-ink); font-size: 10px; }
.global-search > input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.global-search__icon { position: absolute; left: 11px; top: 8px; z-index: 1; font-size: 14px; pointer-events: none; }
.global-search__indicator { position: absolute; right: 12px; top: 12px; width: 12px; height: 12px; border: 2px solid var(--color-line); border-top-color: var(--color-teal); border-radius: 50%; animation: spin 600ms linear infinite; }
.htmx-indicator { visibility: hidden; opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { visibility: visible; opacity: 1; }
.global-search__results { position: absolute; z-index: 60; top: calc(100% + 7px); left: 0; right: 0; max-height: min(460px, calc(100dvh - 90px)); overflow-y: auto; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-surface); box-shadow: 0 14px 38px rgb(23 38 43 / 16%); color: var(--color-ink); }
.global-search__results:empty { display: none; }
.search-group { padding: 7px; }
.search-group + .search-group { border-top: 1px solid var(--color-line); }
.search-group h2 { margin: 3px 6px 5px; color: var(--color-muted); font-size: 8px; letter-spacing: 1px; }
.search-result { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: center; gap: 9px; border-radius: 7px; padding: 8px 7px; }
.search-result:hover, .search-result:focus-visible { outline: none; background: var(--color-accent-hover); }
.search-result > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-result strong, .search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result strong { font-size: 10px; }
.search-result small { color: var(--color-muted); font-size: 8px; }
.search-result__plate { border-radius: 5px; background: var(--color-neutral-soft); padding: 4px 3px; color: var(--color-muted); font-size: 7px; font-weight: 750; text-align: center; }
.global-search__message { margin: 0; padding: 18px; color: var(--color-muted); font-size: 9px; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.icon-button { position: relative; padding: 7px; color: var(--color-muted); font-size: 18px; }

.button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--radius-sm); padding: 8px 13px; font-size: 11px; font-weight: 700; }
.button--primary { background: var(--color-action); color: white; box-shadow: var(--shadow-action); }
.button--primary:hover { background: var(--color-action-hover); }
.button--secondary { border: 1px solid var(--color-line); color: var(--color-muted); font-weight: 500; }
.button--danger { border: 1px solid var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger-text); }
.button:focus-visible, .nav-item:focus-visible, .workspace:focus-visible, .date-control:focus-visible { outline: 3px solid rgb(35 173 157 / 25%); outline-offset: 2px; }

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 8px; color: var(--color-muted); font-size: 9px; font-weight: 800; letter-spacing: 1.25px; }
.page-heading h1 { margin: 0; color: var(--color-navy); font-size: 28px; line-height: 1.1; letter-spacing: -1.2px; }
.page-heading h1 em { color: var(--color-teal); font-style: normal; }
.page-heading p:last-child { margin: 8px 0 0; color: var(--color-muted); font-size: 12px; }
.date-control { border: 1px solid var(--color-line); background: var(--color-surface); border-radius: var(--radius-sm); padding: 9px 11px; color: var(--color-muted); font-size: 11px; }

.card, .panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 20px; }
.kpi-card { min-height: 127px; display: flex; flex-direction: column; padding: 16px 17px; }
.kpi-card__icon { width: 31px; height: 31px; border-radius: var(--radius-sm); display: grid; place-items: center; margin-bottom: 13px; font-size: 17px; }
.kpi-card__icon--teal { background: var(--color-accent-soft); color: var(--color-teal-dark); }
.kpi-card__icon--violet { background: var(--color-purple-soft); color: var(--color-purple); }
.kpi-card__icon--gold { background: var(--color-warning-soft); color: var(--color-amber); }
.kpi-card__icon--blue { background: var(--color-blue-soft); color: var(--color-blue); }
.kpi-card__icon--slate { background: var(--color-neutral-soft); color: var(--color-muted); }
.kpi-card__label { color: var(--color-muted); font-size: 10px; }
.kpi-card__value { margin-top: 5px; font-size: 20px; letter-spacing: -.5px; }
.kpi-card__detail { margin-top: 6px; color: var(--color-teal-dark); font-size: 10px; }
.kpi-card__detail--warning { color: var(--color-amber); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr); gap: 18px; align-items: start; }
.dashboard-stack { display: flex; flex-direction: column; gap: 18px; }
.panel-header-actions { display: flex; align-items: center; gap: 14px; }
.dashboard-order-tabs { display: flex; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--color-line); padding: 0 13px; }
.dashboard-order-tabs a { min-height: 39px; display: flex; align-items: center; gap: 5px; border-bottom: 2px solid transparent; padding: 0 8px; color: var(--color-muted); font-size: 9px; white-space: nowrap; }
.dashboard-order-tabs a:hover { border-color: var(--color-teal); color: var(--color-teal-dark); }
.dashboard-order-tabs b { border-radius: 10px; background: var(--color-neutral-soft); padding: 2px 6px; font-size: 8px; }
.dashboard-orders { overflow-x: auto; }
.dashboard-orders__head, .dashboard-orders > a { min-width: 820px; display: grid; grid-template-columns: 1.15fr 1.1fr 1fr .8fr .8fr 18px; align-items: center; gap: 10px; padding-inline: 20px; }
.dashboard-orders__head { min-height: 34px; background: var(--color-surface-subtle); color: var(--color-muted); font-size: 8px; font-weight: 750; letter-spacing: .7px; }
.dashboard-orders > a { min-height: 65px; border-bottom: 1px solid var(--color-line-soft); }
.dashboard-orders > a:last-child { border-bottom: 0; }
.dashboard-orders > a:hover { background: var(--color-surface-subtle); }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; border-bottom: 1px solid var(--color-line); background: var(--color-surface-subtle); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.panel__header h2 { margin: 0; color: var(--color-navy); font-size: 14px; }
.panel__header p { margin: 5px 0 0; color: var(--color-muted); font-size: 10px; }
.empty-state { min-height: 335px; display: grid; place-content: center; justify-items: center; padding: 32px; color: var(--color-muted); text-align: center; }
.empty-state__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 20px; }
.empty-state h3 { margin: 14px 0 0; color: var(--color-navy); font-size: 13px; }
.empty-state p { max-width: 370px; margin: 6px 0 0; font-size: 10px; }
.empty-state--compact { min-height: 135px; }
.metric-placeholder { min-height: 145px; display: flex; align-items: center; padding: 20px; color: var(--color-navy); font-size: 21px; font-weight: 700; }
.dashboard-agenda { display: flex; flex-direction: column; }
.dashboard-agenda > a { min-height: 57px; display: grid; grid-template-columns: 36px 2px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-line-soft); padding: 8px 14px; }
.dashboard-agenda > a:last-child { border-bottom: 0; }
.dashboard-agenda > a:hover { background: var(--color-surface-subtle); }
.dashboard-agenda time { color: var(--color-navy); font-size: 11px; font-weight: 750; }
.dashboard-agenda a > span:nth-child(3) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashboard-agenda strong, .dashboard-agenda small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-agenda strong { font-size: 10px; }
.dashboard-agenda small { color: var(--color-muted); font-size: 8px; }
.dashboard-agenda__line { width: 2px; height: 29px; border-radius: 2px; background: var(--color-accent-soft); }
.dashboard-agenda .is-now .dashboard-agenda__line { background: var(--color-teal); }
.dashboard-agenda .is-now time { color: var(--color-teal-dark); }
.now-pill { border-radius: 10px; background: var(--color-accent-soft); padding: 4px 7px; color: var(--color-teal-dark); font-size: 8px; font-weight: 700; }
.appointment-check { color: var(--color-teal-dark); font-size: 13px; }
.link-with-icon { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* Clientes, vehículos y formularios */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.customer-toolbar { align-items: center; }
.search-form { width: min(100%, 430px); display: flex; gap: 8px; }
.search-form input, .form-field input:not([type="checkbox"]), .form-field select, .form-field textarea {
    width: 100%;
    min-height: 39px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-surface-subtle);
    padding: 9px 11px;
    color: var(--color-ink);
}
.search-form select { min-width: 130px; min-height: 39px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); outline: none; background: var(--color-surface-subtle); padding: 9px 30px 9px 11px; color: var(--color-ink); }
.search-form input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.search-form select:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.customer-list { display: flex; flex-direction: column; }
.customer-row { min-height: 70px; display: grid; grid-template-columns: 35px minmax(180px, 1.3fr) minmax(170px, 1fr) 90px 70px 20px; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--color-line-soft); }
.customer-row:last-child { border-bottom: 0; }
.customer-row:hover { background: var(--color-surface-subtle); }
.customer-row__avatar { width: 31px; height: 31px; }
.customer-row__identity, .customer-row__contact, .customer-row__vehicles, .vehicle-row > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.customer-row strong, .vehicle-row strong { overflow: hidden; color: var(--color-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.customer-row small, .vehicle-row small { overflow: hidden; color: var(--color-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-row__arrow { color: var(--color-muted); font-size: 20px; }
.status-pill { display: inline-flex; justify-content: center; border-radius: 999px; background: var(--color-accent-soft); padding: 4px 7px; color: var(--color-teal-dark); font-size: 8px; font-weight: 700; }
.status-pill--muted { background: var(--color-neutral-soft); color: var(--color-muted); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; border-top: 1px solid var(--color-line); padding: 14px 20px; color: var(--color-muted); font-size: 10px; }
.record-form { overflow: hidden; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field > label { color: var(--color-muted); font-size: 10px; font-weight: 700; }
.form-field > label .required { color: var(--color-red); }
.form-field textarea { resize: vertical; }
.form-field--check { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.form-field--check input { width: 17px; height: 17px; accent-color: var(--color-teal); }
.form-help { color: var(--color-muted); font-size: 9px; }
.form-error { color: var(--color-red); font-size: 9px; }
.form-errors { margin: 20px 22px 0; border-radius: var(--radius-sm); background: var(--color-danger-soft); padding: 10px 12px; color: var(--color-danger-text); font-size: 10px; }
.form-errors ul { margin: 0; padding-left: 18px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--color-line); padding: 16px 22px; }
.vin-input-row { display: flex; align-items: stretch; gap: 8px; }
.vin-input-row .button { flex: none; white-space: nowrap; }
.vin-scanner { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.vin-scanner__backdrop { position: absolute; inset: 0; background: rgb(9 24 28 / 72%); }
.vin-scanner__dialog { position: relative; width: min(100%, 560px); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 22px 60px rgb(0 0 0 / 28%); }
.vin-scanner__dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 19px; }
.vin-scanner__dialog h2 { margin: 0; color: var(--color-navy); font-size: 15px; }
.vin-scanner__dialog header p { margin: 5px 0 0; color: var(--color-muted); font-size: 10px; }
.vin-scanner__close { width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm); color: var(--color-muted); font-size: 22px; line-height: 1; }
.vin-scanner__close:hover { background: var(--color-neutral-soft); }
.vin-scanner__viewport { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #071114; }
.vin-scanner__camera { position: absolute; inset: 0; }
.vin-scanner__camera video, .vin-scanner__camera canvas { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.vin-scanner__camera canvas { display: none; }
.vin-scanner__guide { position: absolute; left: 7%; right: 7%; top: 50%; height: 31%; border: 2px solid #6ce0cf; border-radius: 8px; box-shadow: 0 0 0 999px rgb(0 0 0 / 28%); transform: translateY(-50%); }
.vin-scanner__status { min-height: 42px; display: flex; align-items: center; padding: 10px 19px; color: var(--color-teal-dark); font-size: 10px; }
.vin-scanner__status--error { color: var(--color-red); }
.vin-scanner__dialog > footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--color-line); padding: 13px 19px; }
.detail-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
.definition-list { margin: 0; padding: 7px 20px 16px; }
.definition-list > div { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 15px; border-bottom: 1px solid var(--color-line-soft); padding: 11px 0; }
.definition-list > div:last-child { border-bottom: 0; }
.definition-list dt { color: var(--color-muted); font-size: 9px; }
.definition-list dd { margin: 0; overflow-wrap: anywhere; font-size: 10px; }
.vehicle-row { min-height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr) 20px; gap: 16px; align-items: center; border-bottom: 1px solid var(--color-line-soft); padding: 10px 20px; }
.vehicle-row:last-child { border-bottom: 0; }
.vehicle-row:hover { background: var(--color-surface-subtle); }
.text-link { color: var(--color-teal-dark); font-weight: 700; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.panel-metric { color: var(--color-navy); font-size: 13px; }
.odometer-list { display: flex; flex-direction: column; }
.odometer-row { min-height: 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, .7fr); align-items: center; gap: 14px; border-bottom: 1px solid var(--color-line-soft); padding: 10px 20px; }
.odometer-row:last-child { border-bottom: 0; }
.odometer-row > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.odometer-row strong { font-size: 10px; }
.odometer-row small { color: var(--color-muted); font-size: 9px; }
.messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.message { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--color-accent-border); border-radius: var(--radius-sm); background: var(--color-accent-hover); padding: 10px 12px; color: var(--color-teal-dark); font-size: 10px; }
.message button { width: 24px; height: 24px; flex: none; border-radius: 5px; font-size: 17px; }
.message button:hover { background: rgb(22 143 132 / 9%); }
.message--error { border-color: var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger-text); }
.message--warning { border-color: var(--color-warning-border); background: var(--color-warning-soft); color: var(--color-warning-text); }
.research-warning { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; border: 1px solid var(--color-warning-border); border-radius: var(--radius-sm); background: var(--color-warning-wash); padding: 12px 14px; color: var(--color-warning-text); font-size: 10px; }
.research-warning strong { flex: none; }
.research-layout, .research-history { display: flex; flex-direction: column; gap: 18px; }
.research-scope { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px; }
.research-scope span { border-radius: 999px; background: var(--color-accent-soft); padding: 6px 9px; color: var(--color-teal-dark); font-size: 9px; font-weight: 700; }
.research-result__answer { padding: 20px; color: var(--color-ink); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.research-sources { border-top: 1px solid var(--color-line); padding: 14px 20px; font-size: 10px; }
.research-sources ul { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 8px 0 0; padding-left: 18px; }
.research-sources a { color: var(--color-teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.research-result > footer { border-top: 1px solid var(--color-line); padding: 10px 20px; color: var(--color-muted); font-size: 9px; }

/* Agenda */
.calendar-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 15px; border-bottom: 1px solid var(--color-line); padding: 12px 20px; }
.calendar-date-form { display: flex; align-items: center; gap: 8px; }
.calendar-date-form label { color: var(--color-muted); font-size: 10px; font-weight: 700; }
.calendar-date-form input { min-height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); outline: none; background: var(--color-surface-subtle); padding: 7px 10px; color: var(--color-ink); font-size: 10px; }
.calendar-date-form input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.icon-nav { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-muted); font-size: 22px; }
.icon-nav:hover { border-color: var(--color-accent-border); background: var(--color-accent-hover); color: var(--color-teal-dark); }
.agenda-list { display: flex; flex-direction: column; }
.agenda-row { min-height: 76px; display: grid; grid-template-columns: 58px 3px minmax(220px, 1.35fr) minmax(170px, .8fr) 112px 14px; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-line-soft); padding: 10px 20px; }
.agenda-row:last-child { border-bottom: 0; }
.agenda-row:hover { background: var(--color-surface-subtle); }
.agenda-row time, .agenda-row__vehicle, .agenda-row__customer { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agenda-row time strong { color: var(--color-navy); font-size: 14px; }
.agenda-row strong, .agenda-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row__vehicle strong, .agenda-row__customer strong { color: var(--color-ink); font-size: 10px; }
.agenda-row small { color: var(--color-muted); font-size: 9px; }
.agenda-row__line { width: 3px; height: 40px; border-radius: 999px; background: #9ba7a9; }
.agenda-row__line--confirmed, .agenda-row__line--completed { background: var(--color-teal); }
.agenda-row__line--checked_in { background: var(--color-amber); }
.agenda-row__line--no_show { background: var(--color-red); }
.status-pill--scheduled, .status-pill--cancelled { background: var(--color-neutral-soft); color: var(--color-muted); }
.status-pill--confirmed, .status-pill--completed { background: var(--color-accent-soft); color: var(--color-teal-dark); }
.status-pill--checked_in { background: var(--color-warning-soft); color: var(--color-warning-text); }
.status-pill--no_show { background: var(--color-danger-soft); color: var(--color-danger-text); }
.lookup-field { position: relative; align-self: start; }
.lookup-control { position: relative; }
.lookup-control input { padding-right: 36px !important; }
.lookup-control input:disabled { cursor: not-allowed; background: var(--color-neutral-soft); color: var(--color-muted); }
.lookup-spinner { position: absolute; right: 12px; top: 13px; width: 13px; height: 13px; border: 2px solid var(--color-line); border-top-color: var(--color-teal); border-radius: 50%; animation: spin 600ms linear infinite; }
.lookup-results { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface); box-shadow: 0 12px 30px rgb(23 38 43 / 14%); padding: 6px; }
.lookup-option { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border-radius: 6px; padding: 9px; text-align: left; }
.lookup-option:hover, .lookup-option:focus-visible { outline: none; background: var(--color-accent-hover); }
.lookup-option strong { font-size: 10px; }
.lookup-option small, .lookup-empty { color: var(--color-muted); font-size: 9px; }
.lookup-empty { margin: 0; padding: 13px 9px; text-align: center; }
.lookup-selection { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--color-accent-border); border-radius: var(--radius-sm); background: var(--color-accent-wash); margin-top: 7px; padding: 7px 9px 7px 11px; }
.lookup-selection > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lookup-selection strong, .lookup-selection small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-selection strong { color: var(--color-teal-dark); font-size: 10px; }
.lookup-selection small { color: var(--color-muted); font-size: 8px; }
.lookup-selection button { width: 26px; height: 26px; flex: none; border-radius: 5px; color: var(--color-muted); font-size: 17px; }
.lookup-selection button:hover { background: var(--color-accent-soft); color: var(--color-ink); }
.context-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--color-accent-border); border-radius: var(--radius-md); background: var(--color-accent-wash); margin-bottom: 18px; padding: 12px 16px; color: var(--color-teal-dark); font-size: 10px; font-weight: 700; }
.context-action--warning { border-color: var(--color-warning-border); background: var(--color-warning-wash); color: var(--color-warning-text); }
.workflow-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: 18px; padding: 14px 16px; }
.workflow-bar > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.workflow-bar strong { color: var(--color-navy); font-size: 11px; }
.workflow-bar small { color: var(--color-muted); font-size: 9px; }
.order-history { margin-top: 18px; overflow: hidden; }
.history-row { min-height: 56px; display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 11px; border-bottom: 1px solid var(--color-line-soft); padding: 9px 20px; }
.history-row:last-child { border-bottom: 0; }
.history-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-teal); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.history-row > span { display: flex; flex-direction: column; gap: 3px; }
.history-row strong { font-size: 10px; }
.history-row small { color: var(--color-muted); font-size: 8px; }
.orders-panel { overflow: hidden; }
.orders-toolbar { align-items: center; }
.orders-toolbar__actions { display: flex; align-items: center; gap: 9px; }
.orders-toolbar__actions .search-form { width: min(360px, 32vw); }
.invoice-search-form { width: min(540px, 48vw) !important; }
.invoice-search-form input { min-width: 190px; }
.invoice-search-form select { min-width: 145px; min-height: 39px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); outline: none; background: var(--color-surface-subtle); padding: 9px 30px 9px 11px; color: var(--color-ink); }
.invoice-search-form select:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.filter-active-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-teal); }
.order-tabs { display: flex; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--color-line); padding: 0 13px; scrollbar-width: thin; }
.order-tab { min-height: 39px; display: flex; align-items: center; gap: 5px; border-bottom: 2px solid transparent; padding: 0 9px; color: var(--color-muted); font-size: 10px; white-space: nowrap; }
.order-tab.is-active { border-color: var(--color-teal); color: var(--color-teal-dark); font-weight: 700; }
.order-tab--pending { color: var(--color-warning-text); }
.order-tab--pending.is-active { border-color: var(--color-amber); color: var(--color-warning-text); }
.order-tab b { border-radius: 10px; background: var(--color-neutral-soft); padding: 2px 6px; font-size: 9px; }
.advanced-filters { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: 12px; border-bottom: 1px solid var(--color-line); background: var(--color-surface-subtle); padding: 14px 20px; }
.advanced-filters label { display: flex; flex-direction: column; gap: 5px; color: var(--color-muted); font-size: 9px; font-weight: 700; }
.advanced-filters input, .advanced-filters select { width: 100%; min-height: 35px; border: 1px solid var(--color-line); border-radius: 7px; outline: none; background: var(--color-surface); padding: 7px 9px; color: var(--color-ink); font-size: 9px; }
.advanced-filters > div { display: flex; gap: 7px; }
.orders-table { overflow-x: auto; }
.orders-table__head, .orders-table__row { min-width: 950px; display: grid; grid-template-columns: 1.15fr 1.2fr 1fr .65fr .8fr .75fr 18px; align-items: center; gap: 12px; padding-inline: 20px; }
.orders-table__head { min-height: 35px; background: var(--color-surface-subtle); color: var(--color-muted); font-size: 8px; font-weight: 750; letter-spacing: .7px; }
.orders-table__row { min-height: 68px; border-bottom: 1px solid var(--color-line-soft); }
.orders-table__row:last-child { border-bottom: 0; }
.orders-table__row:hover { background: var(--color-surface-subtle); }
.orders-table__row--pending { border-left: 3px solid var(--color-amber); background: var(--color-warning-wash); padding-left: 17px; }
.orders-table__row--pending .order-identity > small, .orders-table__row--pending .table-person small { color: var(--color-warning-text); }
.order-identity, .table-person > span, .orders-table__row time { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.order-identity small { color: var(--color-muted); font-size: 8px; }
.order-identity strong { color: var(--color-ink); font-size: 11px; }
.order-identity em, .table-person small, .orders-table__row time small { overflow: hidden; color: var(--color-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.table-person { min-width: 0; display: flex; align-items: center; gap: 8px; }
.table-person .avatar { width: 28px; height: 28px; }
.table-person strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.table-person--technician .avatar { background: var(--color-purple-soft); color: var(--color-purple); }
.orders-table__row time { color: var(--color-muted); font-size: 9px; font-weight: 650; }
.billing-table__row { min-width: 700px; grid-template-columns: 1fr 1.35fr .75fr .8fr .85fr 18px; }
.status-pill--received, .status-pill--diagnosis { background: var(--color-blue-soft); color: var(--color-blue-text); }
.status-pill--awaiting, .status-pill--paused { background: var(--color-warning-soft); color: var(--color-warning-text); }
.status-pill--approved, .status-pill--in_progress { background: var(--color-accent-soft); color: var(--color-teal-dark); }
.status-pill--delivered { background: var(--color-neutral-soft); color: var(--color-muted); }
.status-pill--pending { background: var(--color-neutral-soft); color: var(--color-muted); }

/* Autenticación */
.auth-page { min-height: 100%; overflow: auto; background: var(--color-paper); }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 390px); border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface); padding: 30px; box-shadow: 0 18px 50px rgb(23 38 43 / 7%); }
.auth-brand { padding: 0 0 32px; }
.auth-heading { margin-bottom: 22px; }
.auth-heading h1 { margin: 0; color: var(--color-navy); font-size: 24px; letter-spacing: -1px; }
.auth-heading > p:last-child { margin: 7px 0 0; color: var(--color-muted); font-size: 11px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-card input { width: 100%; min-height: 42px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); outline: none; background: var(--color-surface-subtle); padding: 9px 11px; }
.auth-card input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.auth-errors { margin: 0 0 18px; }
.auth-submit { width: 100%; min-height: 42px; margin-top: 4px; }
.auth-help { margin: 18px 0 0; color: var(--color-muted); font-size: 9px; text-align: center; }

/* Acta de recepción: formulario documental y lectura posterior. */
.reception-form { display: grid; gap: 18px; }
.wizard-pills { display: flex; align-items: center; width: min(100%, 760px); margin: 0 auto; padding: 4px 0 8px; }
.wizard-pills > i { height: 1px; flex: 1; background: var(--color-line); }
.wizard-pills button, .wizard-pills a { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 10px; color: var(--color-muted); font-size: 10px; font-weight: 700; transition: color 150ms, background 150ms; }
.wizard-pills button:not(:disabled):hover { background: var(--color-accent-hover); color: var(--color-teal-dark); }
.wizard-pills button:disabled { cursor: default; opacity: .55; }
.wizard-pills button b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-surface); font-size: 9px; }
.wizard-pills a b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-surface); font-size: 9px; }
.wizard-pills button.is-active { background: var(--color-accent-hover); color: var(--color-teal-dark); }
.wizard-pills a.is-active { background: var(--color-accent-hover); color: var(--color-teal-dark); }
.wizard-pills button.is-active b { border-color: var(--color-teal); background: var(--color-action); color: white; }
.wizard-pills a.is-active b { border-color: var(--color-teal); background: var(--color-action); color: white; }
.wizard-pills button.is-complete b { border-color: var(--color-accent-border); background: var(--color-accent-soft); color: var(--color-teal-dark); }
.wizard-pills a.is-complete b { border-color: var(--color-accent-border); background: var(--color-accent-soft); color: var(--color-teal-dark); }
.wizard-panel { min-height: 410px; }
.wizard-panel .form-section-heading { padding: 22px 22px 0; }
.wizard-actions { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto auto 1fr auto; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface-sticky); box-shadow: 0 -8px 24px rgb(30 48 52 / 7%); }
.form-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.form-section-heading > span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-action); color: #fff; font-size: 11px; font-weight: 800; }
.form-section-heading h2, .inspection-group h3, .detail-card h2, .inspection-detail-grid h3 { margin: 0; }
.form-section-heading p { margin: 3px 0 0; color: var(--color-muted); font-size: 11px; }
.choice-grid > div, .choice-grid > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.choice-grid > div > div, .choice-grid > ul > li { min-width: 0; margin: 0; padding: 0; }
.choice-grid label { min-height: 42px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface-subtle); padding: 8px 10px; color: var(--color-muted); font-size: 10px; font-weight: 600; cursor: pointer; transition: border-color 150ms, background 150ms, color 150ms; }
.choice-grid label:hover { border-color: var(--color-accent-border); background: var(--color-accent-wash); color: var(--color-ink); }
.choice-grid input.switch-input { width: 31px; height: 18px; flex: none; appearance: none; border: 1px solid var(--color-line); border-radius: 999px; outline: none; background: var(--color-switch-track); padding: 2px; cursor: pointer; transition: border-color 160ms, background 160ms; }
.choice-grid input.switch-input::before { content: ""; width: 12px; height: 12px; display: block; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(23 38 43 / 22%); transition: transform 160ms; }
.choice-grid input.switch-input:checked { border-color: var(--color-teal); background: var(--color-teal); }
.choice-grid input.switch-input:checked::before { transform: translateX(13px); }
.choice-grid label:has(input.switch-input:checked) { border-color: var(--color-accent-border); background: var(--color-accent-hover); color: var(--color-teal-dark); }
.choice-grid input.switch-input:focus-visible { box-shadow: 0 0 0 3px rgb(35 173 157 / 20%); }
.inspection-group { padding: 0 22px; }
.inspection-group + .inspection-group { margin-top: 22px; }
.inspection-group:last-child { padding-bottom: 22px; }
.inspection-group h3 { margin-bottom: 9px; font-size: 12px; }
.inspection-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inspection-row { min-width: 0; display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface-subtle); padding: 11px 12px; transition: border-color 150ms, background 150ms; }
.inspection-row:has(input.inspection-radio:checked) { border-color: var(--color-accent-border); background: var(--color-accent-wash); }
.inspection-row > strong { overflow: hidden; color: var(--color-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inspection-row > div, .inspection-row > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.inspection-row > div > div, .inspection-row > ul > li { min-width: 0; }
.inspection-row label { min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--color-line); border-radius: 6px; background: var(--color-surface); padding: 4px 5px; color: var(--color-muted); font-size: 8px; font-weight: 650; text-align: center; cursor: pointer; transition: border-color 150ms, background 150ms, color 150ms; }
.inspection-row label:hover { border-color: var(--color-accent-border); color: var(--color-teal-dark); }
.inspection-row label:has(input.inspection-radio:checked) { border-color: var(--color-teal); background: var(--color-accent-soft); color: var(--color-teal-dark); }
.inspection-row input.inspection-radio { width: 13px; height: 13px; flex: none; appearance: none; border: 1.5px solid var(--color-line); border-radius: 50%; background: var(--color-surface); padding: 2px; }
.inspection-row input.inspection-radio::before { content: ""; width: 100%; height: 100%; display: block; border-radius: 50%; background: transparent; }
.inspection-row input.inspection-radio:checked { border-color: var(--color-teal); }
.inspection-row input.inspection-radio:checked::before { background: var(--color-teal); }
.inspection-row input.inspection-radio:focus-visible { outline: 3px solid rgb(35 173 157 / 22%); outline-offset: 2px; }
.form-actions--sticky { position: sticky; bottom: 0; z-index: 5; padding: 12px 18px; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface-sticky); box-shadow: 0 -8px 24px rgb(30 48 52 / 7%); }
.lookup-selection--static { display: flex !important; position: static; margin-top: 0; }
.order-source-card { margin-bottom: 18px; overflow: hidden; }
.order-source-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.order-source-summary > div { display: block; padding: 13px 20px; }
.order-source-summary > div:last-child { grid-column: 1 / -1; }
.order-source-summary dt { margin-bottom: 5px; }
.order-planning-form { overflow: hidden; }
.reception-list .orders-table__head, .reception-list .orders-table__row { grid-template-columns: 1.1fr 1.4fr .7fr .9fr .7fr 20px; }
.reception-notes-grid, .reception-inspection { margin-top: 18px; }
.reception-copy { padding: 17px 20px 20px; }
.reception-copy > p { margin: 0; color: var(--color-ink); font-size: 10px; line-height: 1.65; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag-list span { padding: 6px 9px; border-radius: 16px; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 9px; font-weight: 700; }
.tag-list .tag-list__empty { background: var(--color-neutral-soft); color: var(--color-muted); }
.inspection-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.reception-inspection .inspection-detail-grid { padding: 18px 20px 22px; }
.inspection-detail-grid h3 { margin-bottom: 8px; font-size: 11px; }
.inspection-detail-grid dl { margin: 0; border-top: 1px solid var(--color-line); }
.inspection-detail-grid dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-line); font-size: 10px; }
.inspection-state { flex: none; font-weight: 750; }
.inspection-state--present { color: var(--color-teal-dark); }
.inspection-state--absent, .inspection-state--damaged { color: var(--color-danger-text); }
.inspection-state--unchecked { color: var(--color-muted); }
.work-file-section { margin-top: 18px; overflow: hidden; }
.work-file-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid var(--color-line); }
.work-file-tabs button { min-height: 40px; display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; padding: 0 11px; color: var(--color-muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.work-file-tabs button:hover { color: var(--color-ink); }
.work-file-tabs button.is-active { border-color: var(--color-teal); color: var(--color-teal-dark); }
.work-file-tabs button b { min-width: 18px; border-radius: 9px; background: var(--color-neutral-soft); padding: 2px 5px; font-size: 8px; text-align: center; }
.work-file-section--tab, .work-file-section.work-file-section--tab { margin-top: 0; }
.inline-record-form { border-bottom: 1px solid var(--color-line); background: var(--color-surface-subtle); }
.operation-list { display: flex; flex-direction: column; }
.operation-row { min-height: 72px; display: grid; grid-template-columns: 34px minmax(190px, 1fr) 90px 90px minmax(150px, auto); align-items: center; gap: 12px; border-bottom: 1px solid var(--color-line-soft); padding: 10px 20px; }
.operation-row:last-child { border-bottom: 0; }
.operation-row__sequence { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 9px; font-weight: 800; }
.operation-row__copy, .operation-row__time { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.operation-row__copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.operation-row__copy small, .operation-row__time small { color: var(--color-muted); font-size: 8px; }
.operation-row__time strong { font-size: 11px; }
.operation-row__actions { display: flex; justify-content: flex-end; gap: 6px; }
.operation-complete-mark { width: 28px; height: 28px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-teal-dark); font-weight: 800; }
.material-table { overflow-x: auto; }
.material-row { min-width: 760px; min-height: 54px; display: grid; grid-template-columns: minmax(190px, 1.4fr) .65fr .8fr .8fr .75fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-line-soft); padding: 9px 20px; font-size: 9px; }
.material-row > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.material-row > span:first-child strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.material-row small { color: var(--color-muted); font-size: 8px; }
.material-row--head { min-height: 34px; background: var(--color-surface-subtle); color: var(--color-muted); font-size: 8px; font-weight: 750; letter-spacing: .6px; }
.material-totals { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 13px 20px; background: var(--color-surface-subtle); color: var(--color-muted); font-size: 9px; }
.material-totals strong { color: var(--color-navy); font-size: 11px; }
.estimate-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.estimate-main, .estimate-sidebar { display: grid; gap: 18px; }
.estimate-table { overflow-x: auto; }
.estimate-row { min-width: 650px; min-height: 55px; display: grid; grid-template-columns: minmax(220px, 1.5fr) .65fr .75fr .75fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-line-soft); padding: 9px 20px; font-size: 9px; }
.estimate-row > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.estimate-row > span:first-child strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.estimate-row small { color: var(--color-muted); font-size: 8px; }
.estimate-row--head { min-height: 34px; background: var(--color-surface-subtle); color: var(--color-muted); font-size: 8px; font-weight: 750; letter-spacing: .6px; }
.estimate-totals { width: min(100%, 360px); margin: 0 0 0 auto; padding: 12px 20px 18px; }
.estimate-totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; color: var(--color-muted); font-size: 9px; }
.estimate-totals dd { margin: 0; color: var(--color-ink); font-weight: 650; }
.estimate-totals .estimate-totals__grand { margin-top: 5px; border-top: 1px solid var(--color-line); padding-top: 11px; color: var(--color-navy); font-size: 12px; font-weight: 800; }
.estimate-editor { overflow: hidden; }
.estimate-actions { padding-bottom: 16px; }
.estimate-actions > form { display: grid; gap: 10px; margin: 16px 20px 0; }
.decision-form label { color: var(--color-muted); font-size: 9px; font-weight: 700; }
.decision-form textarea { width: 100%; border: 1px solid var(--color-line); border-radius: 7px; padding: 9px; resize: vertical; }
.estimate-version-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--color-line-soft); padding: 11px 20px; }
.estimate-version-list > div:last-child { border-bottom: 0; }
.estimate-version-list > div.is-current { border-left: 3px solid var(--color-teal); padding-left: 17px; background: var(--color-accent-wash); }
.estimate-version-list span:first-child { display: flex; flex-direction: column; gap: 3px; }
.estimate-version-list strong { font-size: 9px; }
.estimate-version-list small { color: var(--color-muted); font-size: 8px; }
.status-pill--estimate-draft { background: var(--color-neutral-soft); color: var(--color-muted); }
.status-pill--estimate-sent { background: var(--color-blue-soft); color: var(--color-blue-text); }
.status-pill--estimate-approved { background: var(--color-accent-soft); color: var(--color-teal-dark); }
.status-pill--estimate-rejected { background: var(--color-danger-soft); color: var(--color-danger-text); }
.inventory-table { overflow-x: auto; }
.inventory-row { min-width: 720px; min-height: 60px; display: grid; grid-template-columns: minmax(220px, 1.4fr) .55fr .65fr .65fr .75fr 18px; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-line-soft); padding: 9px 20px; font-size: 9px; }
.inventory-row > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inventory-row > span:first-child strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-row small { color: var(--color-muted); font-size: 8px; }
.inventory-row--head { min-height: 34px; background: var(--color-surface-subtle); color: var(--color-muted); font-size: 8px; font-weight: 750; letter-spacing: .6px; }
.inventory-row--low:not(.inventory-row--head) { border-left: 3px solid var(--color-amber); background: var(--color-warning-wash); padding-left: 17px; }
.stock-movement-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 14px; border-bottom: 1px solid var(--color-line-soft); padding: 11px 20px; }
.stock-movement-row > span { display: flex; flex-direction: column; gap: 3px; }
.stock-movement-row > span:last-child { text-align: right; }
.stock-movement-row strong { font-size: 9px; }
.stock-movement-row small { color: var(--color-muted); font-size: 8px; }
.warehouse-movement-row, .operation-row { min-width: 760px; display: grid; grid-template-columns: 1.1fr 1.3fr .8fr .6fr .8fr; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-line-soft); padding: 12px 20px; font-size: 9px; }
.warehouse-movement-row > span, .operation-row > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.warehouse-movement-row small, .operation-row small { color: var(--color-muted); font-size: 8px; }
.warehouse-movement-row--head, .operation-row--head { background: var(--color-surface-subtle); color: var(--color-muted); font-size: 8px; font-weight: 750; }
.operation-row { grid-template-columns: 1fr 1.2fr .7fr .7fr .9fr .5fr; }
.stock-positive { color: var(--color-teal-dark); }
.stock-negative { color: var(--color-red); }
.inventory-select-row { min-width: 680px; display: grid; grid-template-columns: 36px minmax(220px, 1.4fr) .5fr .7fr .8fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-line-soft); padding: 11px 20px; font-size: 9px; }
.inventory-select-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.accent-check { width: 17px; height: 17px; accent-color: var(--color-teal); }
.quantity-table { overflow-x: auto; }
.quantity-row { min-width: 620px; display: grid; grid-template-columns: minmax(230px, 1fr) 180px 180px; align-items: end; gap: 18px; border-bottom: 1px solid var(--color-line-soft); padding: 14px 20px; font-size: 10px; }
.quantity-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.quantity-row small { color: var(--color-muted); font-size: 8px; }
.quantity-row label { display: grid; gap: 5px; color: var(--color-muted); font-size: 8px; font-weight: 700; }
.quantity-row input { width: 100%; border: 1px solid var(--color-line); border-radius: 7px; padding: 9px; }
.request-strip { display: flex; flex-wrap: wrap; gap: 9px; border-bottom: 1px solid var(--color-line); padding: 14px 20px; }
.request-strip a { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--color-line); border-radius: 8px; padding: 9px 12px; }
.request-strip span, .request-strip p { margin: 0; color: var(--color-muted); font-size: 8px; }
.linked-documents { margin-top: 18px; }
.workflow-reason { width: 180px; border: 1px solid var(--color-line); border-radius: 7px; padding: 8px 9px; font-size: 9px; }
.workflow-bar form { display: flex; align-items: center; gap: 7px; }
.billing-payment-form label { display: grid; gap: 4px; color: var(--color-muted); font-size: 8px; font-weight: 700; }
.billing-payment-form select, .billing-payment-form input:not([type="hidden"]) { min-width: 155px; min-height: 39px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); outline: none; background: var(--color-surface-subtle); padding: 9px 11px; color: var(--color-ink); font: inherit; }
.billing-payment-form input:not([type="hidden"]) { min-width: 210px; }
.billing-payment-form select:focus, .billing-payment-form input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(35 173 157 / 10%); }
.advanced-filters--warehouse { grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; }

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-stack { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .choice-grid > div, .choice-grid > ul, .inspection-detail-grid { grid-template-columns: 1fr; }
    .inspection-table { grid-template-columns: 1fr; }
    .wizard-pills { align-items: flex-start; }
    .wizard-pills button { min-width: 42px; flex-direction: column; gap: 4px; padding: 6px 4px; text-align: center; }
    .wizard-pills button span { font-size: 8px; }
    .wizard-actions { grid-template-columns: auto auto 1fr auto; }
}

@media (max-width: 1024px) {
    .global-search { width: min(300px, 36vw); }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        width: min(82vw, 280px);
        max-width: 100%;
        transform: translateX(-101%);
        visibility: hidden;
        box-shadow: 16px 0 40px rgb(23 38 43 / 16%);
        transition: transform 180ms ease, visibility 180ms;
    }
    .sidebar.is-open { transform: translateX(0); visibility: visible; }
    .sidebar__close {
        width: 36px;
        height: 36px;
        flex: none;
        display: grid;
        place-items: center;
        border-radius: var(--radius-sm);
        color: var(--color-muted);
        font-size: 25px;
        line-height: 1;
    }
    .sidebar__close:hover { background: var(--color-paper); color: var(--color-ink); }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgb(23 38 43 / 42%);
        transition: opacity 180ms ease, visibility 180ms;
    }
    .sidebar-backdrop.is-open { visibility: visible; opacity: 1; }
    .sidebar-toggle {
        width: 38px;
        height: 38px;
        flex: none;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }
    .sidebar-toggle span { width: 16px; height: 1.5px; border-radius: 2px; background: var(--color-ink); }
    .sidebar-toggle:focus-visible, .sidebar__close:focus-visible { outline: 3px solid rgb(35 173 157 / 25%); outline-offset: 2px; }
}

@media (max-width: 720px) {
    .topbar { padding: 0 16px; gap: 12px; }
    .breadcrumbs { display: none; }
    .global-search { width: auto; min-width: 0; flex: 1; margin-left: 0; }
    .global-search__results { position: fixed; top: calc(var(--topbar-height) - 1px); left: 8px; right: 8px; max-height: calc(100dvh - var(--topbar-height) - 8px); }
    .content-container { padding: 26px 16px 35px; }
    .page-heading { display: block; }
    .date-control { margin-top: 16px; }
    .page-heading h1 { font-size: 25px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi-card { min-height: 116px; padding: 13px; }
    .kpi-card:last-child { grid-column: span 2; }
    .dashboard-stack { display: flex; }
    .button--primary span:last-child { display: none; }
    .page-heading .button--primary span { display: inline; }
    .customer-toolbar { align-items: stretch; flex-direction: column; }
    .search-form { width: 100%; }
    .customer-row { grid-template-columns: 35px minmax(0, 1fr) 20px; gap: 10px; padding: 12px 14px; }
    .customer-row__contact, .customer-row__vehicles, .customer-row .status-pill { display: none; }
    .form-grid { grid-template-columns: 1fr; padding: 17px 14px; }
    .form-field--wide, .form-field--check { grid-column: auto; }
    .form-actions { padding: 14px; }
    .vin-input-row { align-items: stretch; flex-direction: column; }
    .vin-scanner { padding: 0; }
    .vin-scanner__dialog { width: 100%; max-height: 100dvh; border: 0; border-radius: 0; }
    .detail-grid { grid-template-columns: 1fr; }
    .definition-list { padding-inline: 14px; }
    .definition-list > div { grid-template-columns: 95px minmax(0, 1fr); }
    .vehicle-row { grid-template-columns: minmax(0, 1fr) 20px; gap: 7px 10px; padding-inline: 14px; }
    .vehicle-row > span:nth-child(2) { grid-column: 1; }
    .vehicle-row > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
    .odometer-row { padding-inline: 14px; }
    .calendar-toolbar { justify-content: space-between; gap: 7px; padding-inline: 12px; }
    .calendar-date-form { min-width: 0; flex: 1; }
    .calendar-date-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .calendar-date-form input { min-width: 0; flex: 1; }
    .agenda-row { grid-template-columns: 48px 3px minmax(0, 1fr) 14px; gap: 10px; padding-inline: 14px; }
    .agenda-row__customer, .agenda-row > .status-pill { display: none; }
    .context-action { align-items: stretch; flex-direction: column; }
    .research-warning { flex-direction: column; }
    .workflow-bar { align-items: stretch; flex-direction: column; }
    .billing-payment-form { align-items: stretch; justify-content: flex-start; }
    .billing-payment-form label { flex: 1 1 150px; }
    .billing-payment-form select, .billing-payment-form input:not([type="hidden"]) { width: 100%; min-width: 0; }
    .orders-toolbar { align-items: stretch; flex-direction: column; }
    .orders-toolbar__actions { align-items: stretch; flex-direction: column; }
    .orders-toolbar__actions .search-form { width: 100%; }
    .invoice-search-form { width: 100% !important; flex-wrap: wrap; }
    .invoice-search-form input { min-width: 0; flex: 1 1 180px; }
    .invoice-search-form select { flex: 1 1 145px; }
    .advanced-filters { grid-template-columns: 1fr 1fr; padding-inline: 14px; }
    .advanced-filters > div { grid-column: 1 / -1; justify-content: flex-end; }
    .orders-table__head, .orders-table__row { padding-inline: 14px; }
    .operation-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding-inline: 14px; }
    .operation-row__time { grid-column: 2; }
    .operation-row > .status-pill { grid-column: 3; grid-row: 1; }
    .operation-row__actions { grid-column: 2 / -1; justify-content: flex-start; }
    .estimate-layout { grid-template-columns: 1fr; }
    .order-source-summary { grid-template-columns: 1fr; }
    .order-source-summary > div:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-backdrop { transition: none; }
}
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 24px; }
.module-card { display: block; position: relative; min-height: 210px; padding: 26px; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.module-card:hover, .module-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 35, 45, .12); }
.module-card__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 25px; }
.module-card h2 { margin: 20px 0 7px; font-size: 21px; }
.module-card p { margin: 0; color: var(--color-muted); }
.module-card__arrow { position: absolute; right: 24px; bottom: 22px; font-size: 23px; color: var(--color-teal-dark); }
.module-home-activity { margin-top: 34px; }
.module-home-activity__heading { margin-bottom: 16px; }
.module-home-activity__heading h2 { margin: 0; color: var(--color-navy); font-size: 18px; }
.module-home-activity__heading p { margin: 5px 0 0; color: var(--color-muted); font-size: 11px; }
.module-home-activity__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.module-home-list__row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 20px; border-bottom: 1px solid var(--color-line); }
.module-home-list__row:last-child { border-bottom: 0; }
.module-home-list__row:hover { background: var(--color-surface-subtle); }
.module-home-list__row time { flex: 0 0 38px; color: var(--color-teal-dark); font-size: 11px; font-weight: 750; }
.module-home-list__main { display: grid; min-width: 0; gap: 4px; flex: 1; }
.module-home-list__main strong { overflow: hidden; color: var(--color-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.module-home-list__main small { overflow: hidden; color: var(--color-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.module-home-list__row .status-pill { flex: 0 0 auto; }
.module-home-progress { display: grid; flex: 0 0 96px; gap: 5px; color: var(--color-teal-dark); font-size: 11px; font-weight: 750; text-align: right; }
.module-home-progress progress { width: 100%; height: 7px; appearance: none; border: 0; border-radius: 7px; overflow: hidden; }
.module-home-progress progress::-webkit-progress-bar { background: var(--color-neutral-soft); }
.module-home-progress progress::-webkit-progress-value { background: var(--color-teal); }
.module-home-progress progress::-moz-progress-bar { background: var(--color-teal); }
@media (max-width: 900px) { .module-home-activity__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .module-home-list__row { flex-wrap: wrap; padding-inline: 14px; } .module-home-list__row .status-pill { margin-left: auto; } }
.module-summary-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.module-summary-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 18px; margin-top: 20px; }
.module-summary-list { padding: 0 20px 10px; }
.module-summary-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--color-line); }
.module-summary-row:last-child { border-bottom: 0; }
.module-summary-row > span:first-child { display: grid; gap: 3px; min-width: 0; flex: 1; }
.module-summary-row strong { font-size: 13px; }
.module-summary-row small { color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-summary-row__status { color: var(--color-teal-dark); font-size: 11px; font-weight: 700; }
.module-summary-shortcuts > div:last-child { display: grid; gap: 9px; padding: 15px 18px 18px; }
.module-summary-shortcuts > div:last-child a { display: flex; justify-content: space-between; padding: 11px 13px; border: 1px solid var(--color-line); border-radius: 8px; font-weight: 700; }
.module-summary-shortcuts > div:last-child a:hover { color: var(--color-teal-dark); background: var(--color-accent-wash); }
.catalog-table { overflow-x: auto; }
.catalog-row { display: grid; grid-template-columns: 110px minmax(210px, 1.5fr) 90px 115px 115px 80px 155px; align-items: center; gap: 12px; min-width: 900px; padding: 12px 20px; border-bottom: 1px solid var(--color-line); }
.catalog-row--head { color: var(--color-muted); background: var(--color-surface-subtle); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.catalog-row__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.catalog-row__actions form { margin: 0; }
.catalog-row__actions button { padding: 0; }
.catalog-form { max-width: 800px; }
.catalog-form .form-grid { padding: 22px; }
.catalog-import { max-width: 800px; }
.catalog-import__content { padding: 22px; }
.catalog-import__content form { margin-top: 22px; }
.work-progress { display: grid; gap: 9px; padding: 15px 20px; border-bottom: 1px solid var(--color-line); background: var(--color-surface-subtle); }
.work-progress > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.work-progress > div span, .work-progress small { color: var(--color-muted); }
.work-progress progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 8px; overflow: hidden; }
.work-progress progress::-webkit-progress-bar { background: var(--color-neutral-soft); }
.work-progress progress::-webkit-progress-value { background: var(--color-teal); }
.work-progress progress::-moz-progress-bar { background: var(--color-teal); }
.catalog-picker { position: relative; }
.catalog-picker__results { position: absolute; top: calc(100% - 4px); left: 0; right: 0; z-index: 5; max-height: 245px; overflow-y: auto; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); box-shadow: 0 14px 28px rgb(23 38 43 / 14%); }
.catalog-picker__results button { width: 100%; display: grid; gap: 3px; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-line); }
.catalog-picker__results button:hover, .catalog-picker__results button:focus-visible { background: var(--color-accent-hover); }
.catalog-picker__results small, .catalog-picker__results p { color: var(--color-muted); }
.catalog-picker__results p { margin: 0; padding: 12px; }
.operation-row.operation-row--catalog { grid-template-columns: 34px minmax(210px, 1fr) 90px 88px minmax(180px, auto); min-width: 760px; font-size: 11px; }
.operation-row--catalog .operation-row__copy strong { font-size: 11px; }
.operation-row--catalog .operation-row__copy small { font-size: 9px; white-space: normal; }
.operation-row--catalog .operation-row__controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.operation-row--catalog .operation-row__controls .button { padding: 6px 8px; font-size: 10px; }
.operation-row--catalog .operation-complete-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--color-accent-border); border-radius: 7px; color: var(--color-teal-dark); font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.operation-row--catalog .operation-complete-toggle input { accent-color: var(--color-teal-dark); }
.operation-row--catalog .operation-complete-mark { width: auto; height: auto; padding: 6px 9px; border-radius: 8px; font-size: 10px; white-space: nowrap; }
@media (max-width: 850px) { .operation-list { overflow-x: auto; } .operation-row.operation-row--catalog { min-width: 760px; } }
@media (max-width: 900px) { .module-summary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .module-summary-grid { grid-template-columns: 1fr; } }
@media (max-width: 550px) { .module-summary-kpis { grid-template-columns: 1fr 1fr; } .module-summary-row__status { display: none; } }
.topbar--modules { height: 78px; flex-basis: 78px; padding: 0 24px; }
.topbar-modules__inner { width: min(1200px, 100%); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 38px; }
.topbar-modules__brand { padding: 0; font-size: 22px; white-space: nowrap; }
.topbar-modules__nav { margin-left: auto; color: var(--color-muted); font-size: 13px; font-weight: 600; }
.topbar-modules__nav a:hover { color: var(--color-teal-dark); }
.topbar-modules__actions { display: flex; align-items: center; gap: 15px; }
.topbar-modules__logout { padding: 9px 13px; border: 1px solid var(--color-line); border-radius: 8px; color: var(--color-navy); font-size: 12px; font-weight: 700; white-space: nowrap; }
.topbar-modules__logout:hover { background: var(--color-accent-wash); }
@media (max-width: 700px) { .topbar--modules { padding: 0 16px; } .topbar-modules__inner { gap: 10px; } .topbar-modules__nav { display: none; } .topbar-modules__actions { margin-left: auto; gap: 7px; } .topbar-modules__logout { padding: 8px; } }

/* Landing pública: mockup comercial independiente del shell operativo. */
body.landing-page { height: auto; min-height: 100%; overflow: auto; background: var(--color-surface); font-size: 15px; }
.landing-page .landing-container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.landing-header { position: sticky; top: 0; z-index: 10; background: var(--color-surface-sticky); border-bottom: 1px solid var(--color-line); backdrop-filter: blur(14px); }
.landing-header__inner { min-height: 78px; display: flex; align-items: center; gap: 42px; }
.landing-header .brand, .landing-footer .brand { font-size: 22px; }
.landing-nav { display: flex; gap: 30px; margin-left: auto; color: var(--color-muted); font-weight: 600; font-size: 13px; }
.landing-nav a:hover, .landing-nav a:focus-visible, .landing-text-link:hover { color: var(--color-teal-dark); }
.landing-login { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.landing-hero { min-height: 650px; padding-block: 96px 110px; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: clamp(36px, 7vw, 100px); }
.landing-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--color-teal-dark); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.landing-kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-teal); box-shadow: 0 0 0 5px var(--color-accent-soft); }
.landing-hero h1 { margin: 22px 0 23px; font-size: clamp(42px, 5.1vw, 70px); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; }
.landing-hero h1 em { color: var(--color-teal-dark); font-style: normal; }
.landing-hero__copy > p { max-width: 510px; color: var(--color-muted); font-size: 18px; line-height: 1.65; }
.landing-hero__actions { display: flex; align-items: center; gap: 25px; margin-top: 32px; }
.landing-hero__actions .button { padding: 14px 21px; display: inline-flex; align-items: center; gap: 21px; }
.landing-text-link { font-size: 14px; font-weight: 700; }
.landing-hero__notes { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 52px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
.landing-preview { position: relative; padding: 18px; border: 1px solid var(--color-line); border-radius: 22px; background: var(--color-surface-subtle); box-shadow: 0 32px 75px rgb(21 64 60 / 12%); transform: rotate(1.3deg); }
.landing-preview__top { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 17px; }
.landing-preview__brand { font-weight: 800; letter-spacing: -.05em; font-size: 19px; }
.landing-preview__brand span { color: var(--color-teal); }
.landing-preview__pill { padding: 6px 11px; border-radius: 20px; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 10px; font-weight: 800; }
.landing-preview__body { padding: 25px; border: 1px solid var(--color-line); border-radius: 15px; background: var(--color-surface); }
.landing-preview__heading { display: flex; justify-content: space-between; align-items: flex-start; }
.landing-preview__heading div { display: grid; gap: 4px; }
.landing-preview__heading small { color: var(--color-teal-dark); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.landing-preview__heading strong { font-size: 21px; }
.landing-preview__heading > span { padding: 7px 9px; border: 1px solid var(--color-line); border-radius: 7px; color: var(--color-muted); font-size: 10px; font-weight: 800; }
.landing-preview__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.landing-preview__stats > div { min-width: 0; padding: 15px 13px; border: 1px solid var(--color-line); border-radius: 10px; display: grid; gap: 4px; }
.landing-preview__stats span, .landing-preview__stats small { color: var(--color-muted); font-size: 10px; }
.landing-preview__stats strong { font-size: 27px; line-height: 1; }
.landing-preview__list { margin-top: 25px; border: 1px solid var(--color-line); border-radius: 10px; overflow: hidden; }
.landing-preview__list-head, .landing-preview__list > div:not(:first-child) { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--color-line-soft); }
.landing-preview__list > div:last-child { border: 0; }
.landing-preview__list-head { justify-content: space-between; background: var(--color-surface-subtle); font-size: 11px; }
.landing-preview__list-head span { color: var(--color-teal-dark); font-weight: 700; }
.landing-preview__avatar { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 9px; font-weight: 800; }
.landing-preview__avatar--gold { background: var(--color-warning-soft); color: var(--color-warning-text); }
.landing-preview__avatar--blue { background: var(--color-blue-soft); color: var(--color-blue-text); }
.landing-preview__list > div:not(:first-child) > span:nth-child(2) { display: grid; gap: 1px; font-size: 11px; }
.landing-preview__list small { color: var(--color-muted); font-size: 10px; }
.landing-preview__list i { margin-left: auto; padding: 5px 7px; border-radius: 5px; color: var(--color-teal-dark); background: var(--color-accent-soft); font-size: 9px; font-style: normal; font-weight: 700; white-space: nowrap; }
.landing-preview__list i.landing-preview__status--gold { color: var(--color-warning-text); background: var(--color-warning-soft); }
.landing-preview__list i.landing-preview__status--blue { color: var(--color-blue-text); background: var(--color-blue-soft); }
.landing-preview__float { position: absolute; right: -23px; bottom: -23px; padding: 14px 16px; border-radius: 10px; background: var(--color-landing-float); box-shadow: 0 14px 30px rgb(14 46 44 / 22%); color: #fff; font-size: 12px; font-weight: 700; transform: rotate(-1.3deg); }
.landing-preview__float b { color: #73dccd; margin-left: 12px; }
.landing-flow, .landing-pricing { background: var(--color-paper); padding-block: 88px; }
.landing-section-heading { max-width: 700px; margin-bottom: 37px; }
.landing-section-heading h2 { margin: 15px 0 11px; font-size: clamp(29px, 3.4vw, 43px); line-height: 1.17; letter-spacing: -.035em; }
.landing-section-heading p { margin: 0; color: var(--color-muted); font-size: 16px; line-height: 1.65; }
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.landing-steps article { padding: 28px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-surface); }
.landing-steps article > span { font-size: 12px; color: var(--color-teal-dark); font-weight: 800; }
.landing-steps h3 { margin: 19px 0 8px; font-size: 21px; }
.landing-steps p, .landing-module-grid p, .landing-price-card > p { margin: 0; color: var(--color-muted); line-height: 1.6; }
.landing-modules { padding-block: 98px; }
.landing-module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.landing-module-grid article { min-height: 236px; padding: 23px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-surface); }
.landing-module-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 24px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-teal-dark); font-size: 24px; }
.landing-module-grid small { color: var(--color-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.landing-module-grid h3 { margin: 7px 0 9px; font-size: 19px; }
.landing-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; align-items: stretch; }
.landing-price-card { position: relative; display: flex; flex-direction: column; padding: 31px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface); }
.landing-price-card--featured { border: 2px solid var(--color-teal); box-shadow: 0 16px 35px rgb(35 173 157 / 12%); }
.landing-price-card__badge { position: absolute; top: -13px; right: 20px; padding: 6px 10px; border-radius: 5px; color: #fff; background: var(--color-action-hover); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.landing-price-card__label { color: var(--color-teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.landing-price-card h3 { margin: 13px 0 8px; font-size: 22px; }
.landing-price-card__price { margin-top: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--color-line); font-size: 36px; font-weight: 800; letter-spacing: -.04em; }
.landing-price-card__price small { color: var(--color-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.landing-price-card ul { display: grid; gap: 13px; padding: 0; margin: 23px 0 29px; list-style: none; color: var(--color-ink); font-size: 13px; }
.landing-price-card li::before { content: '✓'; color: var(--color-teal-dark); font-weight: 800; margin-right: 10px; }
.landing-price-card__action { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding: 13px 15px; border: 1px solid var(--color-line); border-radius: 8px; color: var(--color-teal-dark); font-size: 13px; font-weight: 800; }
.landing-price-card__action:hover { background: var(--color-accent-hover); }
.landing-price-card--featured .landing-price-card__action { color: #fff; background: var(--color-action-hover); border-color: var(--color-action-hover); }
.landing-price-card--featured .landing-price-card__action:hover { background: var(--color-action); }
.landing-price-note { margin: 18px 0 0; color: var(--color-muted); font-size: 12px; }
.landing-cta { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding-block: 95px; }
.landing-cta h2 { margin: 14px 0 10px; font-size: clamp(28px, 3.5vw, 43px); letter-spacing: -.04em; }
.landing-cta p { max-width: 650px; margin: 0; color: var(--color-muted); line-height: 1.6; }
.landing-cta .button { flex: 0 0 auto; display: inline-flex; gap: 18px; padding: 14px 22px; }
.landing-footer { border-top: 1px solid var(--color-line); }
.landing-footer .landing-container { min-height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--color-muted); font-size: 12px; }
.landing-footer a:last-child { color: var(--color-teal-dark); font-weight: 700; }
@media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; padding-block: 75px; } .landing-preview { width: min(650px, calc(100% - 24px)); margin-inline: auto; } .landing-module-grid { grid-template-columns: repeat(2, 1fr); } .landing-price-grid { grid-template-columns: 1fr; max-width: 580px; } }
@media (max-width: 650px) { .landing-page .landing-container { width: min(100% - 32px, 1200px); } .landing-header__inner { min-height: 66px; gap: 10px; } .landing-nav { display: none; } .landing-login { margin-left: auto; padding: 9px 10px; font-size: 11px; gap: 6px; } .landing-hero { padding-block: 60px 75px; gap: 50px; } .landing-hero h1 { font-size: clamp(40px, 11vw, 54px); } .landing-hero__copy > p { font-size: 16px; } .landing-hero__notes { margin-top: 33px; gap: 10px; } .landing-preview { padding: 10px; } .landing-preview__body { padding: 14px; } .landing-preview__stats { gap: 5px; } .landing-preview__stats > div { padding: 9px 6px; } .landing-preview__stats strong { font-size: 22px; } .landing-preview__float { right: -10px; bottom: -26px; } .landing-flow, .landing-pricing, .landing-modules { padding-block: 65px; } .landing-steps, .landing-module-grid { grid-template-columns: 1fr; } .landing-module-grid article { min-height: 0; } .landing-cta { display: block; padding-block: 70px; } .landing-cta .button { margin-top: 23px; } .landing-footer .landing-container { flex-wrap: wrap; padding-block: 22px; } }
.billing-order-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--color-line); }
.billing-order-row > div:first-child { display: grid; flex: 1; min-width: 180px; gap: 5px; }
.billing-order-row small { color: var(--color-muted); }
.billing-order-row .heading-actions { margin-left: auto; }
.order-secondary-actions { position: relative; color: var(--color-muted); font-size: 12px; }
.order-secondary-actions summary { cursor: pointer; padding: 9px 12px; }
.order-secondary-actions > div { position: absolute; z-index: 3; right: 0; display: grid; gap: 8px; min-width: 180px; padding: 12px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); box-shadow: 0 8px 20px rgb(16 35 45 / 12%); }
.estimate-version-list > a { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--color-line); }

.module-summary-row .status-pill { flex: none; }
.module-home-list__row .module-home-progress, .module-summary-row .module-home-progress { flex: 0 0 120px; }
@media (max-width: 550px) { .module-summary-row:has(.module-home-progress) { flex-wrap: wrap; } .module-summary-row:has(.module-home-progress) > span:first-child { flex-basis: 100%; } .module-summary-row:has(.module-home-progress) .status-pill { margin-left: auto; } }

/* Billing configuration */
.billing-config-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 0 0 18px; border-bottom: 1px solid var(--color-line); scrollbar-width: thin; }
.billing-config-tabs a { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--color-muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.billing-config-tabs a.is-active { border-color: var(--color-teal); color: var(--color-teal-dark); }
.billing-method-table { overflow-x: auto; }
.billing-method-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.billing-method-table th, .billing-method-table td { padding: 14px 20px; border-bottom: 1px solid var(--color-line); }
.billing-method-table th { color: var(--color-muted); font-size: 10px; }
.billing-method-table small { display: block; margin-top: 4px; color: var(--color-muted); }
.billing-currency-section { margin: 0 22px 22px; padding: 18px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.billing-currency-section__header h3 { margin: 0; color: var(--color-navy); font-size: 12px; }
.billing-currency-section__header p { margin: 6px 0 14px; color: var(--color-muted); font-size: 10px; line-height: 1.5; }
.billing-currency-editor__row:last-child { border-bottom: 0; }
.billing-currency-check input { width: 17px; height: 17px; accent-color: var(--color-teal); }
.billing-currency-editor__row { display: grid; grid-template-columns: 110px 1fr 1.3fr 1.3fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.billing-currency-editor__head { color: var(--color-muted); font-size: 11px; }
.billing-currency-check { display: flex; align-items: center; gap: 8px; }
.billing-currency-editor input[type=number] { width: 100%; min-width: 0; }
@media (max-width: 640px) { .billing-currency-section { margin: 0 14px 17px; padding: 14px; } .billing-currency-editor__row { grid-template-columns: 90px 1fr; } .billing-currency-editor__row > div { grid-column: 1 / -1; } .billing-currency-editor__head span:nth-child(n+3) { display: none; } }

.billing-percent-input { display: flex; align-items: center; gap: 7px; min-width: 0; }
.billing-percent-input select { width: 105px; flex: 0 0 105px; }
.billing-percent-input input { flex: 1; min-width: 0; }
.billing-percent-input > span { color: var(--color-muted); font-size: 11px; }

.billing-currency-editor input:disabled, .billing-currency-editor select:disabled { background: var(--color-neutral-soft); color: var(--color-muted); cursor: not-allowed; opacity: .7; }

.operation-customer-request { margin: 18px 20px; padding: 15px 17px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.operation-customer-request__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.operation-customer-request h3 { margin: 0; color: var(--color-navy); font-size: 12px; }
.operation-customer-request > p { margin: 10px 0 0; color: var(--color-ink); font-size: 11px; line-height: 1.6; }
.operation-customer-request .tag-list { margin-top: 10px; }
@media (max-width: 640px) { .operation-customer-request { margin: 14px; padding: 14px; } }
.order-parts-sections { display: grid; gap: 20px; overflow: visible; }
.order-parts-panel { overflow: hidden; }
.order-parts-panel .panel__header { background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-line); }
.order-parts-panel .panel__header h2 { font-size: 15px; font-weight: 750; color: var(--color-navy); }
.order-parts-panel .panel__header .order-parts-panel__label { margin: 0 0 6px; font-size: 8px; font-weight: 750; letter-spacing: 1px; color: var(--color-teal-dark); }
.order-needed-list { padding: 0 20px; }
.order-needed-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.order-needed-row:last-child { border-bottom: 0; }
.order-needed-row > span { display: grid; gap: 6px; flex: 1; min-width: 0; }
.order-needed-row__name { font-size: 11px; font-weight: 650; color: var(--color-ink); }
.order-needed-row small { font-size: 10px; line-height: 1.6; color: var(--color-muted); }
.order-request-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--color-line); }
.order-request-row:last-child { border-bottom: 0; }
.order-request-row:hover { background: var(--color-accent-wash); }
.order-request-row__icon { display: grid; place-items: center; width: 38px; height: 42px; flex: none; background: var(--color-accent-soft); color: var(--color-teal-dark); border-radius: 8px; font-size: 19px; }
.order-request-row__identity { display: grid; gap: 4px; flex: 1; }
.order-request-row__identity small { font-size: 9px; color: var(--color-muted); }
.order-request-row__identity strong { font-size: 12px; color: var(--color-navy); }
.order-request-row__identity > span { font-size: 10px; color: var(--color-muted); }
.order-request-row__link { font-size: 10px; color: var(--color-teal-dark); font-weight: 650; }
@media (max-width: 550px) { .order-request-row { flex-wrap: wrap; gap: 12px; padding: 14px; } .order-request-row__identity { min-width: 150px; } .order-request-row__link { margin-left: auto; } .order-parts-panel .panel__header { flex-wrap: wrap; gap: 12px; } .order-needed-list { padding-inline: 14px; } }
.warehouse-document-details { margin-bottom: 20px; }
.warehouse-products { overflow: visible; margin-bottom: 20px; }
.warehouse-products > .panel__header { background: var(--color-surface-subtle); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.warehouse-products > .panel__header h2 { font-size: 15px; font-weight: 750; }
.warehouse-product { padding: 20px; border-top: 1px solid var(--color-line); }
.warehouse-product__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.warehouse-product__heading h3 { margin: 0; font-size: 12px; font-weight: 700; }
.warehouse-product__heading p { margin: 5px 0 0; font-size: 10px; color: var(--color-muted); }
.warehouse-product__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 18px 0; }
.warehouse-product__metrics dt { margin-bottom: 5px; font-size: 9px; color: var(--color-muted); }
.warehouse-product__metrics dd { margin: 0; font-size: 11px; font-weight: 650; }
.warehouse-product__notice { border-left: 3px solid var(--color-amber); background: var(--color-warning-wash); padding: 12px 14px; }
.warehouse-product__notice strong { font-size: 11px; }
.warehouse-product__notice p, .warehouse-product__stock-note { margin: 6px 0 0; font-size: 10px; line-height: 1.65; color: var(--color-warning-text); }
.warehouse-product__link-form { margin-top: 16px; }
.warehouse-product__link-form .catalog-picker { max-width: 600px; }
.warehouse-product__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 550px) { .warehouse-product { padding: 14px; } .warehouse-product__heading { flex-wrap: wrap; } .warehouse-product__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.commercial-heading .commercial-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.commercial-status__empty { align-self: center; color: var(--color-muted); font-size: 10px; }
.commercial-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commercial-kpis .kpi-card { min-width: 0; min-height: 160px; }
.commercial-kpis .kpi-card__value { color: var(--color-navy); font-size: 25px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.commercial-kpis .kpi-card__value small { display: inline-block; color: var(--color-muted); font-size: 11px; font-weight: 650; letter-spacing: 0; }
.commercial-kpis .kpi-card__detail { line-height: 1.5; }
.commercial-kpis .commercial-kpi--received { border-top: 3px solid var(--color-teal); }
.commercial-kpis .commercial-kpi--received .kpi-card__value { color: var(--color-teal-dark); font-size: 29px; }
.commercial-kpis .commercial-kpi--balance { border-top: 3px solid var(--color-amber); }
.commercial-kpis .commercial-kpi--balance .kpi-card__value { font-size: 29px; }
.commercial-kpi-empty { margin-top: 8px; color: var(--color-navy); font-size: 17px; }
.commercial-kpis .commercial-kpi-note { color: var(--color-muted); }
.commercial-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.commercial-next .eyebrow { margin: 0 0 6px; }
.commercial-next p:last-child { margin: 0; color: var(--color-ink); font-size: 12px; line-height: 1.6; }
.commercial-next > a, .commercial-next > form { flex-shrink: 0; }
.commercial-tabs { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--color-line); margin: 20px 0; }
.commercial-tabs a { padding: 12px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--color-muted); }
.commercial-tabs a[aria-current="page"] { color: var(--color-teal-dark); border-color: var(--color-teal); }
@media (max-width: 1100px) { .commercial-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .commercial-kpis .kpi-card:last-child { grid-column: auto; } .commercial-next { align-items: stretch; flex-direction: column; padding: 14px; } }
@media (max-width: 420px) { .commercial-kpis { grid-template-columns: 1fr; } .commercial-kpis .kpi-card { min-height: 135px; } }

/* Contexto explícito: selección inicial e identidad permanente sin desplegables. */
.workspace-businesses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.workspace-branches { padding: 0 20px 12px; }
.workspace-branch { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 8px; border-top: 1px solid var(--color-line); border-radius: 6px; }
.workspace-branch:hover { background: var(--color-accent-hover); }
.workspace-branch:focus-visible, .workspace__change:focus-visible { outline: 3px solid rgb(35 173 157 / 25%); outline-offset: 2px; }
.workspace-branch > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.workspace-branch strong { font-size: 12px; }
.workspace-branch small { color: var(--color-muted); font-size: 10px; overflow-wrap: anywhere; }
.workspace-branch .text-link { white-space: nowrap; }
.workspace__branch { color: var(--color-ink); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace__change { margin-top: 6px; color: var(--color-teal-dark); font-size: 10px; font-weight: 650; }
.workspace__change:hover { text-decoration: underline; }
.module-workspace { width: 260px; flex-shrink: 0; }
.module-workspace .workspace { margin: 0; background: var(--color-surface); }
.topbar__actions { margin-left: 0; }
@media (max-width: 1024px) {
    .topbar { gap: 10px; padding-inline: 16px; }
    .topbar__actions { gap: 10px; }
}
@media (max-width: 640px) {
    .workspace-businesses { grid-template-columns: 1fr; }
    .module-workspace { width: 100%; margin-top: 16px; }
}

/* Tema oscuro: las superficies, acentos y estados comparten variables. */
:root[data-theme="dark"] {
    --color-landing-float: #29483b;
    color-scheme: dark;
    --color-ink: #e3eeea;
    --color-muted: #a0b3ad;
    --color-line: #3b534a;
    --color-line-soft: #2c4038;
    --color-paper: #101a16;
    --color-surface: #1b2a23;
    --color-surface-subtle: #22352c;
    --color-teal: #38baa5;
    --color-teal-dark: #70dbc5;
    --color-navy: #e3eeea;
    --color-amber: #e9b660;
    --color-red: #f2988c;
    --color-purple: #b6a4ee;
    --color-blue: #8cb8ed;
    --color-accent-soft: #21463b;
    --color-accent-hover: #285246;
    --color-accent-wash: #1f382f;
    --color-neutral-soft: #304039;
    --color-warning-soft: #483923;
    --color-warning-wash: #352e22;
    --color-danger-soft: #492d2b;
    --color-purple-soft: #373049;
    --color-blue-soft: #283c52;
    --color-warning-text: #f0c47c;
    --color-danger-text: #f4aaa0;
    --color-blue-text: #a0c4f2;
    --color-accent-border: #3d7563;
    --color-warning-border: #78613b;
    --color-danger-border: #86514c;
    --color-switch-track: #465b51;
    --color-surface-sticky: rgb(27 42 35 / 96%);
    --color-action: #167e70;
    --color-action-hover: #12675c;
    --shadow-card: 0 2px 5px rgb(0 0 0 / 20%), 0 8px 20px rgb(0 0 0 / 12%);
}

.theme-toggle { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-ink); }
.theme-toggle:hover { background: var(--color-accent-hover); color: var(--color-teal-dark); }
.theme-toggle:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 2px; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
input, select, textarea { color: var(--color-ink); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }

[data-theme="dark"] body.landing-page { background: var(--color-paper); }
.landing-header .theme-toggle { margin-left: auto; }
.landing-header .theme-toggle + .landing-login { margin-left: 0; }
@media (max-width: 650px) {
    .landing-header .brand { flex-shrink: 0; }
    .landing-header .landing-login { min-width: 0; white-space: normal; text-align: center; }
}