:root {
  --brand-red: #d92d27;
  --brand-orange: #ef761d;
  --brand-yellow: #f5bd30;
  --brand-gradient: linear-gradient(112deg, var(--brand-red) 0%, var(--brand-orange) 54%, var(--brand-yellow) 100%);
  --background: #f7f7f5;
  --surface: #ffffff;
  --text-primary: #252526;
  --text-secondary: #72716d;
  --border: #e9e8e3;
  --success: #3e9766;
  --warning: #c98117;
  --danger: #c93732;
  --shadow: 0 8px 24px rgba(33, 29, 21, .055);
  --shadow-floating: 0 18px 44px rgba(33, 29, 21, .13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text-primary); background: var(--background); font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; background: var(--background); overflow: hidden; }
.auth-shell::before { content: ""; position: fixed; inset: 0 0 auto; height: 7px; background: var(--brand-gradient); }
.login-panel { width: min(1020px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 430px; gap: 82px; align-items: center; }
.login-copy { position: relative; padding: 32px 0; }
.login-copy::before { content: ""; position: absolute; width: 182px; height: 182px; left: -78px; top: -32px; border-radius: 50%; background: var(--brand-gradient); opacity: .12; }
.login-copy .brand-lockup { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.login-copy h1 { position: relative; max-width: 520px; margin: 0 0 16px; font-size: 54px; line-height: 1.04; letter-spacing: 0; }
.login-copy p { position: relative; max-width: 470px; color: var(--text-secondary); font-size: 17px; line-height: 1.6; }
.login-card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.login-card { padding: 34px; }
.login-card h2 { margin: 0 0 8px; font-size: 25px; }
.login-card > p { color: var(--text-secondary); margin: 0 0 20px; }
label { display: grid; gap: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; background: var(--surface); color: var(--text-primary); outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(239,118,29,.12); }
textarea { min-height: 96px; resize: vertical; }
form { display: grid; gap: 16px; }
button, .icon-button { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); padding: 10px 14px; font-weight: 750; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
button:hover, .icon-button:hover { border-color: #d9d6ce; }
button:active { transform: translateY(1px); }
button.primary, .primary { color: #fff; border-color: transparent; background: var(--brand-gradient); box-shadow: 0 7px 14px rgba(217,45,39,.16); }
button[disabled] { cursor: not-allowed; color: #9c9a94; background: #f4f3ef; border-color: #efeee9; box-shadow: none; }

.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 14px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 32px; height: 32px; padding: 7px 5px; border-radius: 10px; background: var(--brand-gradient); box-shadow: 0 7px 15px rgba(217,45,39,.18); }
.brand-mark i { display: block; width: 5px; border-radius: 8px; background: rgba(255,255,255,.92); }
.brand-mark i:nth-child(1) { height: 10px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 20px; }
.brand-copy { display: grid; gap: 2px; }.brand-copy strong { font-size: 14px; letter-spacing: .04em; }.brand-copy small { color: var(--text-secondary); font-size: 11px; }
.demo-pill { display: inline-flex; margin: -18px 10px 18px; padding: 4px 8px; border-radius: 999px; background: #fff4dc; color: #9a6410; font-size: 10px; font-weight: 850; }
.nav { display: grid; gap: 3px; }.nav a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 11px; border-radius: 8px; color: #4f4d49; font-size: 13px; font-weight: 700; }.nav a .icon { width: 18px; height: 18px; color: #76736d; }.nav a:hover { background: #f7f6f2; }.nav a.active { color: #fff; background: var(--brand-gradient); box-shadow: 0 7px 16px rgba(217,45,39,.16); }.nav a.active .icon { color: #fff; }

.workspace { min-width: 0; padding: 18px 34px 40px; }.topbar { min-height: 54px; display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }.nav-toggle { display: none; padding: 8px; }.nav-toggle .icon { width: 19px; height: 19px; }
.global-search { display: flex; align-items: center; gap: 9px; width: min(510px, 44vw); padding: 0 12px; color: #8e8b84; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }.global-search .icon { width: 18px; height: 18px; }.global-search input { border: 0; padding: 11px 0; box-shadow: none; font-weight: 500; }.global-search:focus-within { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(239,118,29,.1); }
.top-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }.notification-button { position: relative; display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border-radius: 50%; }.notification-button span { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); border: 1px solid #fff; }.user-menu { position: relative; }.user-trigger { display: flex; align-items: center; gap: 9px; padding: 3px; border: 0; background: transparent; text-align: left; }.user-trigger > .icon { width: 14px; height: 14px; color: var(--text-secondary); }.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-size: 13px; font-weight: 850; }.user-meta { display: grid; gap: 2px; }.user-meta strong { font-size: 12px; }.user-meta small { max-width: 150px; overflow: hidden; color: var(--text-secondary); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.user-popover { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; display: none; min-width: 150px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-floating); }.user-popover.open { display: block; }.user-popover a { display: block; padding: 9px 10px; border-radius: 6px; color: var(--danger); font-size: 12px; font-weight: 750; }.user-popover a:hover { background: #fff4f2; }

.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }.page-heading h1 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: 0; }.eyebrow { margin: 0 0 6px; color: var(--text-secondary); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.page-heading p:last-child { margin: 0; color: var(--text-secondary); }.flash { padding: 12px 14px; border-radius: 9px; margin-bottom: 16px; font-weight: 700; }.flash.ok { background: #eaf7ef; color: #257346; }.flash.error { background: #fff0ef; color: #a92d2a; }
.filters { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }.filters input, .filters select { background: var(--surface); }.panel { min-width: 0; padding: 20px; }.panel h2 { margin: 0; font-size: 16px; line-height: 1.25; }.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }.panel-head p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }.panel-link { color: var(--brand-red); font-size: 12px; font-weight: 800; white-space: nowrap; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }.kpi { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; min-height: 116px; padding: 17px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }.kpi-icon { display: grid; grid-row: span 2; place-items: center; width: 42px; height: 42px; border-radius: 50%; }.kpi-icon .icon { width: 20px; height: 20px; }.kpi-icon.red { background: #fff0ee; color: var(--brand-red); }.kpi-icon.orange { background: #fff5e8; color: var(--brand-orange); }.kpi-icon.yellow { background: #fff9dd; color: #a97800; }.kpi-icon.grey { background: #f0f0ed; color: #686660; }.kpi span { color: var(--text-secondary); font-size: 12px; font-weight: 700; }.kpi strong { grid-column: 2; align-self: end; font-size: 29px; line-height: 1; letter-spacing: 0; }.kpi small { grid-column: 1 / -1; margin-top: 12px; color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 16px; }.dashboard-grid .wide { grid-column: 1 / -1; }.dashboard-bottom { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 16px; }.hero-panel { position: relative; min-height: 148px; overflow: hidden; padding: 28px; color: #fff; border: 0; background: var(--brand-gradient); box-shadow: 0 12px 26px rgba(217,45,39,.16); }.hero-panel::after { content: ""; position: absolute; width: 230px; height: 230px; right: -72px; top: -126px; border: 34px solid rgba(255,255,255,.14); border-radius: 50%; }.hero-panel h1 { position: relative; margin: 0 0 7px; font-size: 29px; }.hero-panel p { position: relative; margin: 0; color: rgba(255,255,255,.88); }.hero-panel .hero-message { position: absolute; right: 32px; bottom: 28px; font-size: 12px; font-weight: 800; }
.donut-layout { display: grid; grid-template-columns: 152px 1fr; gap: 18px; align-items: center; }.donut { position: relative; width: 142px; height: 142px; border-radius: 50%; margin: auto; }.donut::after { content: attr(data-total); position: absolute; inset: 27px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--text-primary); font-size: 21px; font-weight: 850; }.legend { display: grid; gap: 10px; }.legend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; }.legend-row span { display: flex; align-items: center; gap: 7px; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; }.office-bars { display: grid; gap: 13px; }.office-row { display: grid; grid-template-columns: minmax(100px, 1fr) 34px; gap: 8px; align-items: center; color: var(--text-secondary); font-size: 12px; }.office-row strong { color: var(--text-primary); font-size: 12px; text-align: right; }.office-bar { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #f0efeb; }.office-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); }
.driver-list { display: grid; gap: 1px; }.driver-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }.driver-row:last-child { border-bottom: 0; }.presence { width: 8px; height: 8px; border-radius: 50%; background: #adaba6; }.presence.active { background: var(--success); box-shadow: 0 0 0 3px #e7f5ec; }.driver-row strong, .driver-row small { display: block; }.driver-row small { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }.driver-row > span:last-child { color: var(--text-secondary); font-size: 11px; }
.route-preview { min-height: 236px; position: relative; overflow: hidden; border-radius: 9px; background: linear-gradient(90deg, rgba(217,45,39,.06) 1px, transparent 1px), linear-gradient(rgba(239,118,29,.06) 1px, transparent 1px), #fcfcfa; background-size: 35px 35px; }.route-preview::before, .route-preview::after { content: ""; position: absolute; border: 2px dashed rgba(217,45,39,.52); border-radius: 55% 45% 52% 48%; transform: rotate(-15deg); }.route-preview::before { inset: 34px 50px 58px 35px; }.route-preview::after { inset: 68px 35px 25px 86px; border-color: rgba(239,118,29,.48); transform: rotate(17deg); }.route-preview-label { position: absolute; z-index: 1; left: 16px; bottom: 14px; padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,.9); color: var(--text-secondary); font-size: 11px; font-weight: 750; }

table { width: 100%; border-collapse: collapse; }th, td { padding: 13px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }th { color: var(--text-secondary); font-size: 10px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }td { font-size: 12px; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover td { background: #fcfbf8; }.table-wrap { overflow-x: auto; }.order-customer strong, .order-customer small { display: block; }.order-customer small { margin-top: 3px; color: var(--text-secondary); }.status { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; line-height: 1; }.status.delivered { background: #e9f7ee; color: #227643; }.status.pending, .status.pendiente_de_entrega { background: #fff0ee; color: #b53530; }.status.absent, .status.ausente { background: #f1f0ed; color: #65635e; }.status.replanned, .status.replanificado { background: #fff4e5; color: #ab6811; }.status.cancelled, .status.cancelado { background: #eeeeeb; color: #7c7972; }.status.active, .status.activo { background: #e9f7ee; color: #227643; }.status.inactive, .status.inactivo { background: #f1f0ed; color: #65635e; }
.orders-layout { display: grid; grid-template-columns: minmax(0, 1fr) 365px; gap: 16px; }.order-detail { align-self: start; position: sticky; top: 18px; }.detail-title { margin-bottom: 18px; }.detail-title h2 { margin: 0 0 5px; }.detail-title p { margin: 0; color: var(--text-secondary); }.detail-card { padding: 14px 0; border-top: 1px solid var(--border); }.detail-card h3 { margin: 0 0 10px; font-size: 11px; color: var(--text-secondary); letter-spacing: .06em; text-transform: uppercase; }.detail dl, .panel dl { display: grid; grid-template-columns: 110px 1fr; gap: 9px; margin: 0; }dt { color: var(--text-secondary); font-size: 12px; font-weight: 700; }dd { margin: 0; font-size: 12px; }.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }.detail-actions button { padding: 9px 11px; font-size: 12px; }.timeline-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }.timeline-list li { position: relative; padding-left: 18px; color: var(--text-secondary); font-size: 12px; }.timeline-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange); }.timeline-list li::after { content: ""; position: absolute; left: 3px; top: 15px; width: 2px; height: 18px; background: var(--border); }.timeline-list li:last-child::after { display: none; }
.filter-panel { align-items: end; }.filter-panel label { display: grid; gap: 6px; color: var(--text-secondary); font-size: 11px; font-weight: 800; }.filter-actions { display: flex; gap: 8px; }.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-primary); font-size: 12px; font-weight: 800; }.button.secondary { background: #fff; }.order-list-panel { padding: 0; overflow: hidden; }.order-list-panel .panel-head { padding: 20px 20px 10px; }.order-list { min-width: 0; }.order-row { display: grid; grid-template-columns: minmax(190px,1.5fr) minmax(120px,1fr) 105px minmax(130px,1fr) minmax(115px,.8fr) 18px; gap: 14px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--border); color: inherit; }.order-row:hover { background: #fff8f2; }.order-head { color: var(--text-secondary); font-size: 10px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }.order-head:hover { background: transparent; }.order-primary strong, .order-primary small, .compact-copy strong, .compact-copy small { display: block; }.order-primary small, .compact-copy small { margin-top: 3px; overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.compact-copy { overflow: hidden; font-size: 11px; }.row-arrow { color: var(--brand-red); font-size: 23px; line-height: 1; }.flag { display: inline-flex; margin: 6px 4px 0 0; padding: 3px 5px; border-radius: 4px; font-size: 9px; font-style: normal; font-weight: 850; text-transform: uppercase; }.flag.urgent { background: #fff0ee; color: #b53530; }.flag.sensitive { background: #fff4e5; color: #9a5e12; }.drawer-backdrop { position: fixed; z-index: 39; inset: 0; background: rgba(31,30,29,.24); }.drawer-backdrop a { display: block; width: 100%; height: 100%; }.slide-over { position: fixed; z-index: 40; top: 0; right: 0; width: min(510px, calc(100vw - 30px)); height: 100dvh; overflow-y: auto; padding: 22px; background: #fff; box-shadow: -14px 0 34px rgba(34,32,30,.18); animation: slide-in .2s ease-out; }.slide-over > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.slide-over header h2 { margin: 3px 0 0; font-size: 20px; }.simple-list { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }.simple-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }.timeline-list small { display: block; margin-top: 3px; }.detail-actions form { margin: 0; }.dashboard-office-filter { display: flex; justify-content: flex-end; margin: 12px 0 0; }.dashboard-office-filter label { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 800; }.dashboard-office-filter select { min-width: 160px; }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.alerts-menu { position: relative; }.alerts-popover { display: none; position: absolute; z-index: 35; top: calc(100% + 10px); right: 0; width: 280px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-floating); }.alerts-popover.open { display: grid; gap: 8px; }.alerts-popover > a:not(.panel-link) { display: grid; gap: 3px; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: 12px; }.alerts-popover small { color: var(--text-secondary); font-size: 10px; }.alerts-popover p { margin: 2px 0; color: var(--text-secondary); font-size: 12px; }.notification-button span:not(:empty) { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--brand-red); color: #fff; font-size: 9px; }
.floating-chat { position: fixed; z-index: 34; right: 22px; bottom: 22px; }.floating-chat-toggle { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 0; border-radius: 8px; background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-floating); }.floating-chat-panel { display: none; width: min(380px, calc(100vw - 32px)); height: min(610px, calc(100dvh - 90px)); grid-template-rows: auto auto 1fr auto; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-floating); }.floating-chat.open .floating-chat-panel { display: grid; }.floating-chat.open .floating-chat-toggle { display: none; }.floating-chat-panel header { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid var(--border); }.floating-conversations { display: flex; gap: 6px; overflow-x: auto; padding: 9px; border-bottom: 1px solid var(--border); }.floating-conversations a, .system-message { min-width: 126px; padding: 7px; border-radius: 6px; background: #f7f5f1; color: var(--text-primary); font-size: 10px; }.floating-conversations strong, .floating-conversations small { display: block; }.floating-conversations small { color: var(--text-secondary); }.system-message { background: #fff4e5; color: #8a5411; }.system-message b { display: block; font-size: 9px; }.floating-messages { overflow-y: auto; padding: 12px; }.floating-messages p { max-width: 85%; margin: 0 0 8px; padding: 8px 10px; border-radius: 7px; background: #f4f3f0; font-size: 12px; }.floating-messages p.office_user { margin-left: auto; background: #fff0ee; }.floating-composer { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 10px; border-top: 1px solid var(--border); }.floating-composer input { min-width: 0; }.floating-composer button { font-size: 11px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 16px; }.driver-card { min-height: 176px; }.driver-card h2 { font-size: 15px; }.driver-card > p { min-height: 34px; color: var(--text-secondary); font-size: 12px; }.driver-card dl { margin-top: 16px; }.route-card { display: grid; gap: 9px; }.route-card p { margin: 0; color: var(--text-secondary); }.origin { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 5px; background: #f5f4f0; color: #706e68; font-size: 10px; font-weight: 800; }.coming-soon { color: var(--text-secondary); font-size: 12px; }
.map-layout, .chat-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; align-items: stretch; }.timeline { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); }.timeline h2 { margin: 0 0 12px; font-size: 15px; }.timeline-item, .conversation { display: grid; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 6px; background: transparent; text-align: left; }.timeline-item:hover, .conversation:hover, .conversation.active { background: #fff6ed; }.timeline-item strong, .timeline-item span, .timeline-item small { display: block; }.timeline-item span, .timeline-item small { color: var(--text-secondary); font-size: 11px; }.map-mock { position: relative; min-height: 590px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(90deg, rgba(217,45,39,.06) 1px, transparent 1px), linear-gradient(0deg, rgba(239,118,29,.06) 1px, transparent 1px), #fbfbf8; background-size: 42px 42px; }.map-label { position: absolute; z-index: 2; top: 15px; left: 15px; padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,.9); color: var(--text-secondary); font-size: 10px; font-weight: 800; }.pin { position: absolute; z-index: 1; display: grid; place-items: center; transform: translate(-50%, -50%); }.pin.driver { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-size: 10px; font-weight: 850; box-shadow: 0 6px 13px rgba(217,45,39,.2); }.pin.order { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-red); box-shadow: 0 2px 6px rgba(0,0,0,.14); }.pin.order.delivered { background: var(--success); }.pin.order.absent { background: #6e6b66; }
.chat-layout { grid-template-columns: 290px minmax(0,1fr); }.chat-thread { display: grid; grid-template-rows: auto 1fr auto; min-height: 540px; }.chat-thread > h2 { padding-bottom: 16px; border-bottom: 1px solid var(--border); }.conversation small { margin-top: 4px; color: var(--text-secondary); }.bubble { max-width: min(560px, 80%); padding: 12px 14px; margin-bottom: 10px; border-radius: 10px 10px 10px 2px; background: #f5f4f0; }.bubble.office_user { margin-left: auto; border-radius: 10px 10px 2px 10px; background: #fff0ee; }.bubble strong, .bubble small { font-size: 11px; }.bubble p { margin: 5px 0; line-height: 1.45; }.bubble small { color: var(--text-secondary); }.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(90px,1fr)); gap: 8px; margin-bottom: 16px; }.day { min-height: 104px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }.day strong { font-size: 12px; }.day span { display: block; margin-top: 7px; padding: 4px 6px; overflow: hidden; border-radius: 5px; background: #fff4e5; color: #9a5e12; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.alert-card { border-left: 4px solid var(--warning); }.alert-card[data-severity="CRITICAL"] { border-left-color: var(--danger); }.alert-card[data-severity="WARNING"] { border-left-color: var(--brand-yellow); }.alert-card p { min-height: 40px; color: var(--text-secondary); line-height: 1.5; }.form-grid { display: grid; gap: 12px; max-width: 720px; }.empty-state { padding: 28px 0; color: var(--text-secondary); text-align: center; }.empty-state .icon { width: 30px; height: 30px; margin-bottom: 8px; color: #aaa79f; }.subtle { color: var(--text-secondary); font-size: 12px; }.detail-json { max-width: 520px; max-height: 260px; overflow: auto; padding: 12px; border-radius: 8px; background: #f7f6f3; font-size: 11px; white-space: pre-wrap; }
dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: var(--shadow-floating); }dialog::backdrop { background: rgba(37,37,38,.28); }.modal-form, .dialog-content { padding: 24px; }.modal-form h2, .dialog-content h2 { margin: 0; }.modal-form > p { margin: -8px 0 4px; color: var(--text-secondary); }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 23px; line-height: 1; }.modal-form > h2:first-child, .dialog-content > .panel-head { padding-right: 42px; }.discard-dialog { width: min(390px, calc(100vw - 32px)); }.discard-dialog .danger { color: #fff; border-color: var(--danger); background: var(--danger); }
@media (max-width: 1100px) { .workspace { padding: 18px 22px 32px; }.app-shell { grid-template-columns: 214px minmax(0,1fr); }.kpi-grid { grid-template-columns: repeat(2,1fr); }.cards { grid-template-columns: repeat(2, minmax(220px,1fr)); }.orders-layout { grid-template-columns: 1fr; }.order-detail { position: static; }.user-meta { display: none; } }
@media (max-width: 820px) { .login-panel { grid-template-columns: 1fr; gap: 24px; }.login-copy { padding-bottom: 0; }.login-copy h1 { font-size: 42px; }.app-shell { display: block; }.sidebar { position: fixed; z-index: 30; left: 0; top: 0; width: 244px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-floating); }.sidebar.open { transform: translateX(0); }.nav-toggle { display: grid; place-items: center; }.workspace { padding: 16px; }.global-search { width: auto; flex: 1; }.dashboard-grid, .dashboard-bottom, .orders-layout, .map-layout, .chat-layout { grid-template-columns: 1fr; }.order-detail { position: static; }.cards { grid-template-columns: 1fr; }.calendar-grid { grid-template-columns: repeat(4, minmax(80px,1fr)); }.hero-panel .hero-message { display: none; } }
@media (max-width: 560px) { .login-panel { width: min(100% - 28px, 430px); }.login-copy h1 { font-size: 35px; }.login-card { padding: 24px; }.global-search input { min-width: 0; }.notification-button { display: none; }.kpi-grid, .filters { grid-template-columns: 1fr; }.donut-layout { grid-template-columns: 1fr; }.calendar-grid { grid-template-columns: repeat(2, minmax(80px,1fr)); }.topbar { margin-bottom: 18px; }.page-heading { align-items: start; flex-direction: column; }.panel { padding: 16px; } }
.nav-group { display: grid; gap: 3px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }.nav-group-first { padding-top: 0; margin-top: 0; border-top: 0; }.nav-future { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 22px; padding: 12px 11px; border-top: 1px solid var(--border); color: #aaa79f; font-size: 13px; font-weight: 700; cursor: not-allowed; }.nav-future .icon { width: 18px; height: 18px; }.nav-future small { grid-column: 2; color: #a06d11; font-size: 9px; font-weight: 850; letter-spacing: .05em; }
.management-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 780px; }.management-choice { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: inherit; text-decoration: none; }.management-choice:hover { border-color: var(--brand-orange); }.management-choice h2 { margin: 0 0 5px; font-size: 17px; }.management-choice p { margin: 0; color: var(--text-secondary); }.management-choice .icon { flex: 0 0 auto; width: 23px; height: 23px; color: var(--brand-red); }.management-form { max-width: 820px; }.admin-shortcuts { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }.admin-shortcuts h2 { margin: 0 0 4px; font-size: 16px; }.admin-shortcuts p { margin: 0; color: var(--text-secondary); }.admin-shortcuts > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 820px) { .management-choices { grid-template-columns: 1fr; }.admin-shortcuts { align-items: flex-start; flex-direction: column; } }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }.contextual-drawer { right: min(430px, 46vw); z-index: 25; } @media (max-width: 820px) { .contextual-drawer { right: 0; } }
.route-subnav b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: #f1f0ed; font-size: 10px; }.route-kpis { margin-bottom: 16px; }.route-queue-item, .route-rule { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); }.route-queue-item:first-of-type, .route-rule:first-of-type { border-top: 0; }.route-queue-item p, .route-rule p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }.route-detail .weekday-list { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }.weekday-list label { font-size: 12px; }.route-card small { color: var(--text-secondary); font-size: 11px; } @media (max-width: 560px) { .route-queue-item, .route-rule { align-items: flex-start; flex-direction: column; }.route-queue-item .detail-actions { margin-top: 0; } }