:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17233b;
  background: #f5f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f7fb; }
button, a { font: inherit; }

.shell { min-height: 100vh; max-width: 1240px; margin: 0 auto; padding: 28px clamp(20px, 5vw, 72px) 32px; }
.topbar, .brand, .environment, .status-card, .section-heading, .module-card, .footer { display: flex; align-items: center; }
.topbar { justify-content: space-between; gap: 24px; }
.brand { gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; background: #d5f15d; color: #17200a; font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.eyebrow { margin: 0 0 7px; color: #8694ae; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.accent { color: #d5f15d; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 18px; letter-spacing: -.02em; }
.environment { gap: 8px; color: #aab5c8; font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #d5f15d; box-shadow: 0 0 0 4px rgba(213,241,93,.12); }

.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 24px; padding: clamp(64px, 11vw, 128px) 0 76px; }
.hero-copy { max-width: 720px; }
h2 { margin-bottom: 16px; color: #f5f7fb; font-size: clamp(34px, 6vw, 72px); line-height: .98; letter-spacing: -.06em; }
.lead { max-width: 610px; color: #aab5c8; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; }
.status-card { max-width: 560px; gap: 13px; margin-top: 32px; padding: 16px; border: 1px solid rgba(213,241,93,.2); border-radius: 14px; background: rgba(213,241,93,.06); }
.status-icon { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d5f15d; color: #17200a; font-weight: 900; }
.status-card strong { font-size: 14px; }
.status-card p, .proof-card p { margin: 5px 0 0; color: #9daabe; font-size: 12px; line-height: 1.5; }
.proof-card { align-self: end; padding: 24px; border: 1px solid #24314a; border-radius: 20px; background: linear-gradient(145deg, #131e32, #101827); box-shadow: 0 22px 70px rgba(0,0,0,.2); }
.proof-card h3 { margin: 0; color: #f5f7fb; font-size: 23px; letter-spacing: -.03em; }
.metric { margin-bottom: 10px; color: #d5f15d; font-size: 66px; font-weight: 850; line-height: .8; letter-spacing: -.08em; }

.module-section { padding-top: 10px; }
.section-heading { justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading h2 { margin-bottom: 0; font-size: clamp(24px, 4vw, 38px); }
.count { padding: 7px 11px; border: 1px solid #2b3952; border-radius: 999px; color: #aab5c8; font-size: 12px; white-space: nowrap; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.module-card { gap: 14px; min-height: 112px; padding: 18px; border: 1px solid #24314a; border-radius: 16px; background: #111a2b; transition: transform .16s ease-out, border-color .16s ease-out, background .16s ease-out; }
.module-card:hover { transform: translateY(-2px); border-color: #60733b; background: #152139; }
.module-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #1f2e45; color: #d5f15d; font-size: 23px; }
.module-card h3 { margin-bottom: 6px; font-size: 15px; }
.module-card p { margin: 0; color: #8290a9; font-size: 12px; }
.footer { justify-content: space-between; gap: 20px; margin-top: 72px; padding-top: 18px; border-top: 1px solid #24314a; color: #74829b; font-size: 11px; }

@media (max-width: 760px) {
  .shell { padding-top: 20px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .hero { grid-template-columns: 1fr; padding: 68px 0 58px; }
  .proof-card { align-self: stretch; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { align-items: flex-start; flex-direction: column; margin-top: 52px; }
}

@media (max-width: 460px) {
  .module-grid { grid-template-columns: 1fr; }
  h2 { font-size: 42px; }
}

.header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.role-control { display: grid; gap: 4px; color: #aab5c8; font-size: 11px; }
.role-control select { min-width: 130px; padding: 7px 9px; border: 1px solid #2b3952; border-radius: 8px; background: #111a2b; color: #f5f7fb; }
.login-button { padding: 9px 13px; border: 1px solid rgba(213,241,93,.36); border-radius: 999px; background: rgba(213,241,93,.1); color: #d5f15d; cursor: pointer; }
.layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 36px; align-items: start; }
.sidebar { display: grid; gap: 8px; position: sticky; top: 20px; }
.module-label { margin-top: 20px; }
.nav-link { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #aab5c8; text-align: left; cursor: pointer; }
.nav-link.active, .nav-link:hover { border-color: #24314a; background: #111a2b; color: #f5f7fb; }
.workspace-card { min-height: 430px; padding: clamp(24px, 4vw, 48px); border: 1px solid #24314a; border-radius: 22px; background: linear-gradient(145deg, #131e32, #0f1726); }
.workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.workspace-heading h2 { margin-bottom: 0; font-size: clamp(32px, 5vw, 58px); }
.coming-soon { padding: 7px 10px; border: 1px solid #2b3952; border-radius: 999px; color: #aab5c8; font-size: 11px; white-space: nowrap; }
.module-note { max-width: 680px; margin: 24px 0 30px; color: #aab5c8; line-height: 1.6; }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.action-card { display: grid; gap: 9px; min-height: 112px; padding: 17px; border: 1px solid #2b3952; border-radius: 14px; background: rgba(17,26,43,.75); color: #f5f7fb; text-align: left; }
.action-card:disabled { cursor: not-allowed; opacity: .76; }
.action-card small { color: #8290a9; line-height: 1.4; }
@media (max-width: 820px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; } .action-grid { grid-template-columns: 1fr; } }

/* Migrated order capture surface */
.capture-heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.capture-grid { display: grid; gap: 16px; margin-top: 28px; }
.capture-main { display: grid; gap: 14px; }
.capture-section { padding: 20px; border: 1px solid #263652; border-radius: 16px; background: rgba(9,15,27,.42); }
.capture-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border-color: rgba(213,241,93,.28); background: linear-gradient(130deg, rgba(213,241,93,.1), rgba(23,43,54,.48)); }
.capture-section h3 { margin: 0; color: #f5f7fb; font-size: 18px; }
.capture-section p { color: #aab5c8; line-height: 1.5; }
.section-description { margin: 6px 0 14px; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.form-grid label { display: grid; gap: 7px; color: #c8d2e2; font-size: 12px; font-weight: 700; }
.form-grid input, .form-grid select, .item-row input { width: 100%; padding: 10px 11px; border: 1px solid #334563; border-radius: 9px; background: #101a2c; color: #f5f7fb; outline: none; }
.form-grid input:focus, .form-grid select:focus, .item-row input:focus { border-color: #d5f15d; box-shadow: 0 0 0 3px rgba(213,241,93,.1); }
.shipping-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
.shipping-option { display: grid; gap: 5px; padding: 13px; border: 1px solid #334563; border-radius: 11px; background: #101a2c; color: #f5f7fb; cursor: pointer; }
.shipping-option:has(input:checked) { border-color: #d5f15d; background: rgba(213,241,93,.1); }
.shipping-option input { accent-color: #d5f15d; }
.shipping-option span { font-weight: 800; }
.shipping-option small, .field-hint { color: #8290a9; font-size: 11px; line-height: 1.4; }
.inline-hint { align-self: end; margin: 0 0 10px; }
.hidden { display: none !important; }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
.primary-action { border: 1px solid #d5f15d; background: #d5f15d; color: #17200a; }
.secondary-action { border: 1px solid #334563; background: #111a2b; color: #e8edf7; }
.primary-action:disabled { cursor: not-allowed; opacity: .55; }
.file-action { cursor: pointer; }
.file-action input { display: none; }
.file-status { display: block; margin-top: 8px; color: #aab5c8; font-size: 11px; overflow-wrap: anywhere; }
.items-list { display: grid; gap: 8px; margin-top: 12px; }
.item-row { display: grid; grid-template-columns: 28px 1fr 2fr 90px 32px; gap: 8px; align-items: center; }
.item-index { color: #d5f15d; font-size: 12px; font-weight: 900; text-align: center; }
.remove-item { width: 32px; height: 32px; border: 1px solid #4a3143; border-radius: 8px; background: #251827; color: #ff9cae; cursor: pointer; }
.empty-state { padding: 16px; border: 1px dashed #334563; border-radius: 10px; color: #8290a9; font-size: 12px; }
.capture-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 0; }
.capture-footer strong { color: #f5f7fb; font-size: 13px; }
.capture-footer p { margin: 5px 0 0; color: #8290a9; font-size: 12px; }
@media (max-width: 680px) { .capture-hero, .form-grid, .shipping-options { grid-template-columns: 1fr; } .capture-heading-actions, .capture-footer { align-items: stretch; flex-direction: column; } .capture-heading-actions .secondary-action, .capture-footer .primary-action { width: 100%; } .item-row { grid-template-columns: 24px 1fr 1fr 64px 32px; } }
@media (max-width: 440px) { .item-row { grid-template-columns: 22px 1fr 54px 30px; } .item-row input:nth-of-type(2) { grid-column: 2 / -1; } }

.people-dashboard { display: grid; gap: 1rem; }
.people-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.collection-kpi, .admin-panel { border: 1px solid #24314a; border-radius: 1rem; background: #111a2b; padding: 1rem; }
.collection-kpi span, .collection-kpi small { display: block; color: #8290a9; font-size: .78rem; }
.collection-kpi strong { display: block; color: #d5f15d; font-size: 1.65rem; margin: .35rem 0; }
.collection-toolbar { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; }
.collection-toolbar input { flex: 1; min-width: 0; border: 1px solid #334563; border-radius: .75rem; padding: .75rem .9rem; color: #f5f7fb; background: #101a2c; }
.people-list, .access-list { display: grid; gap: .65rem; }
.access-row, .integration-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #24314a; color: #c8d2e2; font-weight: 700; font-size: .86rem; }
.access-row:last-child, .integration-item:last-child { border-bottom: 0; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.admin-panel h3 { margin: 0 0 .7rem; color: #f5f7fb; font-size: 1rem; }
.status-chip.warning { color: #fbbf24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.35); }
.api-feedback.success { border-color: #86efac; background: rgba(22,101,52,.2); color: #bbf7d0; }
.api-feedback.error { border-color: #fca5a5; background: rgba(153,27,27,.2); color: #fecaca; }
@media (max-width: 720px) { .people-kpis, .admin-grid { grid-template-columns: 1fr; } .collection-toolbar { align-items: stretch; flex-direction: column; } .collection-toolbar input, .collection-toolbar button { width: 100%; } }

/* Base44-aligned operational console */
:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14213d; background: #f5f7fb; }
body { min-width: 320px; background: #f5f7fb; color: #14213d; }
button, input, select, textarea { font: inherit; }
.console-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: #f5f7fb; }
.console-sidebar { display: flex; min-height: 100vh; flex-direction: column; padding: 18px 12px 14px; background: #111a30; color: #dbe5f6; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 3px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.side-logo { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: #ffbd16; color: #14213d; font-size: 12px; font-weight: 900; }
.side-brand strong, .side-brand small { display: block; line-height: 1.2; }
.side-brand strong { color: #fff; font-size: 12px; letter-spacing: .02em; }
.side-brand small { margin-top: 3px; color: #ffbd16; font-size: 10px; font-weight: 700; }
.change-module { margin: 14px 6px 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #afbdd1; text-align: left; cursor: pointer; font-size: 12px; }
.change-module:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav { display: grid; gap: 3px; }
.side-nav-link { display: grid; grid-template-columns: 22px 1fr 12px; align-items: center; gap: 9px; padding: 10px 11px; border: 0; border-radius: 10px; background: transparent; color: #bac7d9; text-align: left; cursor: pointer; font-size: 12px; font-weight: 700; }
.side-nav-link span { color: #d8e1ef; font-size: 17px; text-align: center; }
.side-nav-link b { color: transparent; font-size: 18px; font-weight: 400; }
.side-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-nav-link.active { background: #ffb814; color: #16213a; box-shadow: 0 8px 18px rgba(255,184,20,.16); }
.side-nav-link.active span, .side-nav-link.active b { color: #16213a; }
.side-footer { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid rgba(255,255,255,.08); }
.user-pill { display: flex; align-items: center; gap: 9px; padding: 9px 7px; }
.user-pill > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #2764dd; color: #fff; font-size: 12px; }
.user-pill strong, .user-pill small { display: block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pill strong { color: #fff; font-size: 11px; }
.user-pill small { margin-top: 3px; color: #96a6bf; font-size: 10px; }
.logout-button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 8px; border: 0; border-radius: 8px; background: transparent; color: #b8c5d8; cursor: pointer; font-size: 12px; }
.logout-button:hover { background: rgba(255,255,255,.07); color: #fff; }
.console-main { min-width: 0; }
.console-topbar { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 30px; border-bottom: 1px solid #e4e8ef; background: #fff; }
.crumbs { display: flex; align-items: center; gap: 10px; color: #9aa8b9; font-size: 11px; font-weight: 700; }
.crumbs span:first-child { padding: 6px 9px; border: 1px solid #dce5f4; border-radius: 6px; background: #edf4ff; color: #2458b6; }
.crumbs strong { color: #263750; font-size: 10px; letter-spacing: .08em; }
.top-actions, .heading-actions, .filters { display: flex; align-items: center; gap: 9px; }
.icon-button, .workspace-button, .soft-button, .outline-button, .green-button { border: 1px solid #d8e1ec; border-radius: 9px; background: #fff; color: #56677f; cursor: pointer; font-size: 11px; font-weight: 700; }
.icon-button { width: 34px; height: 34px; border-radius: 50%; }
.workspace-button { padding: 9px 13px; }
.soft-button { border-color: #b6ead7; background: #effcf7; color: #15966d; padding: 9px 12px; }
.outline-button { padding: 9px 12px; color: #b57b1b; }
.green-button { border-color: #198a6a; background: #11845f; color: #fff; padding: 10px 14px; box-shadow: 0 5px 12px rgba(17,132,95,.14); }
.green-button:hover { background: #0d6f51; }
.console-content { min-width: 0; padding: 16px clamp(16px, 2.2vw, 28px) 32px; }
.warehouse-dashboard { max-width: 1500px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid #e2e8f0; border-radius: 17px; background: #fff; box-shadow: 0 2px 7px rgba(28,48,78,.04); }
.page-heading.compact { min-height: 115px; }
.page-heading h1 { margin: 6px 0 3px; color: #12223f; font-size: clamp(21px, 2.4vw, 29px); letter-spacing: -.035em; }
.page-heading p { margin: 0; color: #8290a1; font-size: 12px; }
.breadcrumb-label { display: inline-block; padding: 5px 9px; border-radius: 6px; background: #dff7ed; color: #16876c; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.section-line { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 25px 0 10px; }
.section-line h2, .panel-title { margin: 0; color: #273751; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.section-line h2 span { color: #8290a1; font-weight: 700; }
.section-line small { color: #8290a1; font-size: 11px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-card { min-height: 125px; padding: 17px; border: 1px solid #e1e7ef; border-top: 3px solid #bdd0e8; border-radius: 14px; background: #fff; box-shadow: 0 3px 9px rgba(28,48,78,.04); }
.kpi-card.mint { border-top-color: #62d5b2; }.kpi-card.amber { border-top-color: #f2c95c; }.kpi-card.blue { border-top-color: #5f8ee7; }.kpi-card.slate { border-top-color: #c3d0df; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: #6b7a8e; font-size: 10px; font-weight: 900; }
.kpi-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #eef5fb; color: #4778d5; font-size: 15px; }.mint .kpi-icon { background: #e5faf3; color: #12a476; }.amber .kpi-icon { background: #fff9e5; color: #d49d0b; }
.kpi-card > strong { display: block; margin: 14px 0 6px; color: #12223f; font-size: 25px; letter-spacing: -.04em; }.kpi-card > small { color: #8290a1; font-size: 11px; }
.panel { border: 1px solid #e1e7ef; border-radius: 15px; background: #fff; box-shadow: 0 3px 9px rgba(28,48,78,.035); }
.monthly-panel { margin-top: 24px; padding: 18px 20px 20px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.panel-heading h2 { margin: 0 0 5px; color: #1c2c47; font-size: 15px; }.panel-heading p { margin: 0; color: #8492a3; font-size: 11px; }.filters button, .filters select { height: 32px; padding: 0 9px; border: 1px solid #dbe3ed; border-radius: 8px; background: #fff; color: #43546b; font-size: 11px; }
.monthly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }.monthly-grid > div { padding: 14px; border: 1px solid #edf0f4; border-radius: 11px; background: #fbfcfe; }.monthly-grid span { color: #718095; font-size: 10px; font-weight: 900; }.monthly-grid strong { display: block; margin: 10px 0 5px; color: #117957; font-size: 20px; }.monthly-grid strong small { color: #8290a1; font-size: 10px; font-weight: 700; }.monthly-grid p { margin: 0; color: #8592a3; font-size: 10px; }.blue-text { color: #2e65cb !important; }.orange-text { color: #b76c18 !important; }
.shipment-summary { margin-top: 17px; padding: 18px 20px; }.shipment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }.shipment-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 70px; padding: 13px; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; color: #263750; text-align: left; cursor: pointer; }.shipment-card:hover { border-color: #a9c7ef; background: #f8fbff; }.shipment-card span { font-size: 12px; font-weight: 800; }.shipment-card small { display: block; margin-top: 7px; color: #8492a3; font-size: 10px; font-weight: 500; }.shipment-card b { color: #263750; font-size: 18px; }
.dashboard-lower { display: grid; grid-template-columns: 1.35fr .65fr; gap: 17px; margin-top: 17px; }.chart-panel, .status-panel { padding: 18px 20px; }.panel-chip { padding: 6px 9px; border-radius: 6px; background: #f2f6fb; color: #718095; font-size: 10px; }.fake-chart { display: flex; height: 140px; align-items: end; gap: 6%; margin-top: 26px; padding: 0 12px; border-bottom: 1px solid #e5ebf2; background: repeating-linear-gradient(to top, transparent 0 34px, #f0f3f7 35px); }.fake-chart i { flex: 1; min-height: 10px; border-radius: 5px 5px 0 0; background: linear-gradient(#5e8ee5, #b8d0f7); }.chart-labels { display: flex; justify-content: space-around; margin-top: 8px; color: #8996a6; font-size: 10px; }.status-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #edf0f4; color: #526278; font-size: 12px; }.status-row:last-child { border-bottom: 0; }.status-row span { display: flex; align-items: center; gap: 8px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e9b84d; }.status-dot.process { background: #5d92e5; }.status-dot.done { background: #44bb8c; }.status-dot.cancel { background: #db7d8c; }
.list-page { min-height: 440px; padding: 22px; }.empty-table { display: grid; place-items: center; min-height: 270px; border: 1px dashed #dce4ee; border-radius: 13px; color: #738198; text-align: center; }.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eef4fb; color: #4677d2; font-size: 21px; }.empty-table strong { margin-top: 12px; color: #33445e; font-size: 14px; }.empty-table p { max-width: 380px; margin: 6px 20px 0; color: #8895a5; font-size: 12px; }
.module-selector, .landing-shell { min-height: 100vh; }.landing-shell { max-width: 1100px; margin: 0 auto; padding: 28px clamp(20px,5vw,72px); }.landing-top { display: flex; align-items: center; justify-content: space-between; }.module-selector { display: grid; place-content: center; justify-items: center; padding: 60px 20px; text-align: center; }.selector-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: #d9f35c; color: #21300b; font-weight: 900; }.module-selector h1 { margin: 8px 0 7px; color: #16233c; font-size: clamp(28px,4vw,42px); letter-spacing: -.05em; }.module-selector > p:not(.eyebrow) { color: #8290a1; font-size: 14px; }.selector-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 16px; width: min(780px, 100%); margin-top: 28px; }.selector-grid .module-card { min-height: 150px; flex-direction: column; justify-content: center; border-color: #e0e7ef; background: #fff; box-shadow: 0 5px 16px rgba(28,48,78,.06); text-align: center; }.selector-grid .module-card:hover { border-color: #ffbd16; background: #fffdf6; }.selector-grid .module-card small { display: block; margin-top: 7px; color: #8290a1; }.selector-grid .module-icon { background: #eef5ff; color: #2d6ad8; }
@media (max-width: 1050px) { .console-shell { grid-template-columns: 225px minmax(0, 1fr); }.console-topbar { padding: 0 18px; }.heading-actions { flex-wrap: wrap; justify-content: flex-end; }.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .console-shell { display: block; }.console-sidebar { min-height: auto; padding: 10px; }.side-brand { padding-bottom: 10px; }.change-module { margin: 8px 0; }.side-nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; }.side-nav-link { min-width: max-content; grid-template-columns: 18px auto; padding: 9px 10px; }.side-nav-link b { display: none; }.side-footer { display: none; }.console-topbar { min-height: 50px; padding: 0 12px; }.crumbs b, .crumbs span:nth-child(2) { display: none; }.workspace-button { display: none; }.console-content { padding: 12px; }.page-heading { align-items: flex-start; flex-direction: column; }.heading-actions { width: 100%; justify-content: flex-start; }.monthly-grid, .shipment-grid, .dashboard-lower { grid-template-columns: 1fr; }.selector-grid { grid-template-columns: 1fr; max-width: 360px; }.selector-grid .module-card { min-height: 112px; flex-direction: row; text-align: left; }.selector-grid .module-card small { margin-top: 4px; } }
@media (max-width: 470px) { .kpi-grid { grid-template-columns: 1fr; }.section-line { align-items: flex-start; flex-direction: column; }.filters { width: 100%; }.filters select { flex: 1; }.page-heading h1 { font-size: 22px; } }

/* Paleta clara solicitada: sólo la barra lateral conserva azul oscuro. */
:root {
  color-scheme: light;
  background: #f6f8fb;
  color: #17233b;
}
body {
  background: #f6f8fb;
  color: #17233b;
}
.console-shell,
.console-main,
.console-content,
.warehouse-dashboard {
  background: #f6f8fb;
}
.console-sidebar {
  background: #111a30;
}
.console-topbar,
.page-heading,
.panel,
.kpi-card,
.shipment-card,
.workspace-card,
.capture-section,
.collection-kpi,
.admin-panel,
.table-shell,
.action-card {
  background: #ffffff;
  color: #17233b;
}
.workspace-card,
.capture-section,
.collection-kpi,
.admin-panel,
.table-shell,
.action-card {
  border-color: #e1e7ef;
}
.workspace-card h1,
.workspace-card h2,
.workspace-card h3,
.capture-section h3,
.admin-panel h3,
.action-card strong,
.table-heading h3 {
  color: #17233b;
}
.workspace-card p,
.capture-section p,
.action-card small,
.module-note,
.file-status,
.field-hint {
  color: #6d7b8f;
}
.form-grid input,
.form-grid select,
.item-row input,
.collection-toolbar input,
.shipping-option {
  background: #ffffff;
  color: #17233b;
  border-color: #cfd9e6;
}
.secondary-action {
  background: #ffffff;
  color: #29415f;
  border-color: #cfd9e6;
}
.empty-table {
  background: #fbfcfe;
}

/* Selector de módulos: iconografía específica y tarjetas de acceso refinadas. */
.selector-grid .module-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 164px;
  padding: 24px 22px;
  overflow: hidden;
  border: 1px solid #e3e9f1;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 26px rgba(31, 52, 82, .07);
  color: #17233b;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.selector-grid .module-card::after {
  position: absolute;
  right: -30px;
  bottom: -46px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--module-wash, #eef5ff);
  content: "";
  opacity: .7;
}
.selector-grid .module-card:hover,
.selector-grid .module-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--module-color, #5d8dde);
  box-shadow: 0 16px 34px rgba(31, 52, 82, .13);
  outline: none;
}
.selector-grid .module-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--module-color, #4677d2) 18%, white);
  border-radius: 17px;
  background: var(--module-wash, #eef5ff);
  color: var(--module-color, #4677d2);
}
.selector-grid .module-icon svg { width: 30px; height: 30px; }
.selector-grid .module-card-copy { position: relative; z-index: 1; min-width: 0; }
.selector-grid .module-card-copy strong { display: block; color: #17233b; font-size: 16px; letter-spacing: -.02em; }
.selector-grid .module-card-copy small { display: block; max-width: 150px; margin-top: 7px; color: #7a889a; font-size: 11px; line-height: 1.35; }
.selector-grid .module-card-arrow { position: absolute; z-index: 1; top: 18px; right: 20px; color: var(--module-color, #8392a5); font-size: 25px; line-height: 1; transition: transform .18s ease; }
.selector-grid .module-card:hover .module-card-arrow { transform: translateX(3px); }
.module-card-almacen { --module-color: #137d67; --module-wash: #e4f7f0; }
.module-card-ventas { --module-color: #2e6bc7; --module-wash: #e8f0ff; }
.module-card-compras { --module-color: #c97922; --module-wash: #fff1dc; }
.module-card-cobranza { --module-color: #7a52b8; --module-wash: #f0e9ff; }
.module-card-rh { --module-color: #d05a72; --module-wash: #ffeaf0; }
.module-card-administracion { --module-color: #34445d; --module-wash: #e9edf4; }
@media (max-width: 760px) {
  .selector-grid .module-card { min-height: 112px; padding: 18px; }
  .selector-grid .module-icon { width: 50px; height: 50px; border-radius: 15px; }
  .selector-grid .module-icon svg { width: 26px; height: 26px; }
}

/* Compras: panel claro y lectura operativa. */
.purchases-dashboard { background: #fff; border: 1px solid #e4eaf1; border-radius: 18px; box-shadow: 0 8px 24px rgba(31,52,82,.06); }
.purchases-dashboard .workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 8px; }
.purchases-dashboard .workspace-heading h2 { margin: 3px 0 8px; color: #17233b; font-size: clamp(25px, 3.2vw, 38px); letter-spacing: -.04em; }
.purchases-dashboard .module-note { max-width: 720px; margin: 0 26px 22px; color: #738196; line-height: 1.55; }
.purchase-toolbar { display: flex; align-items: end; gap: 12px; margin: 0 26px 18px; padding: 16px; border: 1px solid #e7edf4; border-radius: 13px; background: #f8fafc; }
.purchase-toolbar label { display: grid; gap: 6px; color: #53647a; font-size: 12px; font-weight: 700; }
.purchase-toolbar input, .purchase-toolbar select { min-height: 38px; padding: 0 11px; border: 1px solid #d6e0eb; border-radius: 8px; background: #fff; color: #24344d; font: inherit; }
.purchases-dashboard .metric-grid { margin: 0 26px 18px; }
.purchases-dashboard .metric-card { border: 1px solid #e4eaf1; background: #fff; box-shadow: none; }
.purchases-dashboard .status-card { margin: 0 26px 22px; border: 1px solid #e7edc5; background: #fbfdec; }
.status-icon.success { color: #17815f; }.status-icon.warning { color: #b77918; }
.purchases-dashboard .table-shell { margin: 0 26px 26px; overflow: hidden; border: 1px solid #e4eaf1; border-radius: 13px; background: #fff; }
.purchase-table-head, .purchase-table-row { display: grid; grid-template-columns: 1.8fr .8fr 1fr .8fr 1.2fr; align-items: center; gap: 14px; padding: 13px 16px; }
.purchase-table-head { border-bottom: 1px solid #e6edf4; background: #f7f9fc; color: #718095; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.purchase-table-row { border-bottom: 1px solid #edf1f5; color: #53647a; font-size: 12px; }.purchase-table-row:last-child { border-bottom: 0; }.purchase-table-row strong { color: #263750; }.rotation-pill { width: max-content; padding: 4px 8px; border-radius: 999px; background: #edf3fb; color: #4677d2; font-size: 10px; font-weight: 800; text-transform: capitalize; }.rotation-pill.alta { background: #e4f7f0; color: #137d67; }.rotation-pill.media { background: #fff1dc; color: #b66a1b; }.rotation-pill.baja { background: #f0f2f6; color: #718095; }
@media (max-width: 760px) { .purchases-dashboard .workspace-heading { display: block; padding: 20px 16px 8px; }.purchases-dashboard .module-note { margin: 0 16px 16px; }.purchase-toolbar { display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px 16px; }.purchase-toolbar label:first-child { grid-column: 1 / -1; }.purchases-dashboard .metric-grid, .purchases-dashboard .status-card { margin-left: 16px; margin-right: 16px; }.purchases-dashboard .table-shell { margin: 0 16px 16px; overflow-x: auto; }.purchase-table-head, .purchase-table-row { min-width: 640px; } }

/* Base visual compartida para todos los módulos operativos. */
.console-content .workspace-card,
.console-content .sales-dashboard,
.console-content .shipments-dashboard,
.console-content .people-dashboard,
.console-content .collections-dashboard,
.console-content .admin-panel,
.console-content .order-capture,
.console-content .list-page {
  color: #17233b;
}
.console-content .workspace-card h2,
.console-content .workspace-card h3,
.console-content .workspace-card strong,
.console-content .workspace-card label,
.console-content .workspace-card th {
  color: #17233b;
}
.console-content .workspace-card input,
.console-content .workspace-card select,
.console-content .workspace-card textarea,
.console-content .workspace-card button {
  font: inherit;
}
.dashboard-toolbar,
.purchase-toolbar,
.collection-toolbar,
.filters,
.filter-row {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}
.dashboard-toolbar {
  margin: 22px 0 18px;
  padding: 14px;
  border: 1px solid #e4eaf1;
  border-radius: 13px;
  background: #f8fafc;
}
.dashboard-toolbar label,
.collection-toolbar label {
  display: grid;
  gap: 6px;
  color: #53647a;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-toolbar input,
.dashboard-toolbar select,
.collection-toolbar input,
.collection-toolbar select,
.inline-select,
.inline-select select {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #fff;
  color: #24344d;
}
.secondary-button,
.button,
.button-primary,
.button-secondary,
.button-ghost,
.outline-button,
.soft-button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #fff;
  color: #3f536d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.secondary-button:hover,
.button:hover,
.button-secondary:hover,
.button-ghost:hover,
.outline-button:hover,
.soft-button:hover {
  border-color: #9bb8e4;
  background: #f5f9ff;
}
.button-primary,
.primary-button,
.primary-action {
  border-color: #198a6a;
  background: #11845f;
  color: #fff;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.metric-card {
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 16px;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(28,48,78,.04);
}
.metric-card small,
.metric-card span {
  color: #7c899a;
  font-size: 11px;
}
.metric-card strong {
  color: #17233b;
  font-size: 25px;
  letter-spacing: -.04em;
}
.table-shell {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
  background: #fff;
}
.table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid #e6edf4;
  background: #f7f9fc;
}
.table-heading h3 { margin: 0; color: #263750; font-size: 14px; }
.table-heading span { color: #7c899a; font-size: 11px; }
.table-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr .8fr;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid #edf1f5;
  color: #53647a;
  font-size: 12px;
}
.table-row:last-child { border-bottom: 0; }
.table-row strong { color: #263750; }
.status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e4eaf1;
  border-radius: 12px;
  background: #fbfcfe;
  color: #53647a;
}
.status-card strong { color: #263750; font-size: 13px; }
.status-card p { margin: 4px 0 0; color: #7c899a; font-size: 11px; line-height: 1.4; }
.status-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #eef5fb; color: #3973d1; font-weight: 900; }
.status-chip,
.filter-pill,
.document-pill,
.rotation-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 9px;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #f4f7fb;
  color: #53647a;
  font-size: 10px;
  font-weight: 800;
}
.filter-pill { cursor: pointer; }
.filter-pill.active { border-color: #8db4ed; background: #eaf2ff; color: #2f66c5; }
.status-chip.success,
.document-pill.attached { border-color: #b6ead7; background: #effcf7; color: #158463; }
.status-chip.warning,
.document-pill.missing { border-color: #f0dfad; background: #fff9e8; color: #b77918; }
.status-chip.danger { border-color: #f2c5ce; background: #fff1f3; color: #b34e63; }
.status-chip.neutral { background: #f4f7fb; color: #64748b; }
.collection-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.collection-kpi {
  display: grid;
  gap: 6px;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
  background: #fff;
  color: #263750;
  text-align: left;
}
.collection-kpi span,
.collection-kpi small { color: #7c899a; font-size: 11px; }
.collection-kpi strong { color: #17233b; font-size: 24px; }
.collection-list { display: grid; gap: 12px; margin-top: 16px; }
.collection-ticket { padding: 16px; border: 1px solid #e1e7ef; border-radius: 13px; background: #fff; }
.collection-ticket-main,
.collection-ticket-meta,
.collection-documents { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.collection-ticket-main h3 { margin: 0 0 5px; color: #263750; font-size: 15px; }
.collection-ticket-meta { margin-top: 14px; color: #6d7b8f; font-size: 11px; }
.collection-documents { justify-content: flex-start; margin-top: 13px; }
.collection-document-note { margin: 12px 0 0; color: #7c899a; font-size: 11px; }
.api-feedback { margin: 14px 0; padding: 11px 13px; border: 1px solid #dbe4ef; border-radius: 10px; background: #f8fafc; color: #53647a; font-size: 12px; }
.api-feedback.success { border-color: #b6ead7; background: #effcf7; color: #158463; }
.api-feedback.error { border-color: #f2c5ce; background: #fff1f3; color: #b34e63; }
.empty-state { background: #fbfcfe; color: #7c899a; }
@media (max-width: 900px) {
  .metric-grid, .collection-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .dashboard-toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .dashboard-toolbar label, .dashboard-toolbar input, .dashboard-toolbar select, .dashboard-toolbar button { width: 100%; }
  .metric-grid, .collection-kpis { grid-template-columns: 1fr; }
  .table-shell { overflow-x: auto; }
  .table-row { min-width: 620px; }
  .collection-toolbar { align-items: stretch; }
  .collection-toolbar input { width: 100%; }
}