@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";
:root{--c-green: #2eea83;--c-green-dark: #129a63;--c-mint: #ddf8e8;--c-text: #1e2329;--c-bg: #fff;--c-g50: #f8faf9;--c-g100: #f1f4f2;--c-g200: #e4e9e6;--c-g300: #cdd4d0;--c-g400: #9ca7a1;--c-g500: #6e7973;--c-success: #16a765;--c-warning: #f5b82e;--c-danger: #e5484d;--c-info: #3b82f6;--c-font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}.carry-app-icon{object-fit:cover;border-radius:22%}.carry-wordmark{font:800 26px var(--c-font);letter-spacing:-1px}.carry-wordmark span:first-of-type{color:var(--c-green)}.carry-wordmark-product{margin-left:6px;color:var(--c-g500);font-weight:600;letter-spacing:0}.carry-btn,.carry-icon-btn,.carry-input,.carry-select,.carry-textarea{font-family:var(--c-font)}.carry-btn{height:42px;border:0;border-radius:10px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:800;cursor:pointer}.carry-btn--sm{height:36px;font-size:12px}.carry-btn--lg{height:48px}.carry-btn--primary{background:var(--c-green);color:var(--c-text)}.carry-btn--secondary{background:var(--c-mint);color:var(--c-green-dark)}.carry-btn--tertiary{background:transparent;color:var(--c-green-dark)}.carry-btn--danger{background:var(--c-danger);color:#fff}.carry-btn--outline{background:#fff;border:1px solid var(--c-g200)}.carry-icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--c-g200);background:#fff;display:grid;place-items:center}.carry-field{display:grid;gap:7px;font-family:var(--c-font)}.carry-field b{font-size:13px}.carry-field small{font-size:11px;color:var(--c-g500)}.carry-field .carry-is-error-text{color:var(--c-danger)}.carry-input,.carry-select,.carry-textarea{width:100%;box-sizing:border-box;border:1px solid var(--c-g300);border-radius:10px;padding:10px 12px;background:#fff}.carry-input,.carry-select{height:42px}.carry-textarea{min-height:110px;resize:vertical}.carry-input:focus,.carry-select:focus,.carry-textarea:focus{outline:none;border-color:#19c96d;box-shadow:0 0 0 3px #2eea8333}.carry-is-error{border-color:var(--c-danger)!important}.carry-select-wrap{position:relative}.carry-select-wrap>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}.carry-select{appearance:none;padding-right:36px}.carry-choice,.carry-switch-row{display:inline-flex;gap:9px;align-items:center;font:13px var(--c-font)}.carry-choice input{accent-color:#19c96d;width:17px;height:17px}.carry-switch input{position:absolute;opacity:0}.carry-switch>span{width:44px;height:24px;border-radius:999px;background:var(--c-g300);padding:3px;display:flex;box-sizing:border-box}.carry-switch i{width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.carry-switch input:checked+span{background:var(--c-green)}.carry-switch input:checked+span i{transform:translate(20px)}.carry-switch-row em{font-style:normal}.carry-divider{height:1px;background:var(--c-g200);margin:16px 0}.carry-divider-label{display:flex;align-items:center;gap:10px;color:var(--c-g500);font:11px var(--c-font)}.carry-divider-label:before,.carry-divider-label:after{content:"";height:1px;background:var(--c-g200);flex:1}.carry-spinner{width:28px;height:28px;border:3px solid var(--c-mint);border-top-color:#19c96d;border-radius:50%;display:inline-block;animation:carry-spin .8s linear infinite}@keyframes carry-spin{to{transform:rotate(360deg)}}.carry-skeleton{display:inline-block;background:linear-gradient(90deg,var(--c-g100),var(--c-g50),var(--c-g100));background-size:200%;animation:carry-shim 1.5s infinite;border-radius:8px}@keyframes carry-shim{to{background-position:-200% 0}}.carry-tooltip{position:relative;display:inline-flex}.carry-tooltip>span:first-child{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:var(--c-text);color:#fff;padding:6px 8px;border-radius:7px;font:11px var(--c-font);white-space:nowrap;opacity:0;visibility:hidden}.carry-tooltip:hover>span:first-child,.carry-tooltip:focus-within>span:first-child{opacity:1;visibility:visible}.carry-card{font-family:var(--c-font);background:#fff;border:1px solid var(--c-g200);border-radius:12px;padding:20px;box-shadow:0 1px 2px #0000000d}.carry-stat-top{display:flex;justify-content:space-between}.carry-stat-top small{color:var(--c-g500);display:block}.carry-stat-top strong{font-size:30px;display:block;margin-top:7px}.carry-stat-icon{width:40px;height:40px;border-radius:10px;background:var(--c-mint);color:var(--c-green-dark);display:grid;place-items:center}.carry-trend{font:800 11px var(--c-font);font-style:normal}.carry-trend--positive{color:var(--c-success)}.carry-trend--negative{color:var(--c-danger)}.carry-trend--neutral{color:var(--c-g500)}.carry-status,.carry-badge,.carry-tag{font-family:var(--c-font);display:inline-flex;align-items:center;gap:6px}.carry-status{padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800}.carry-status:before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%}.carry-badge{min-width:22px;height:22px;border-radius:999px;padding:0 7px;justify-content:center;font-size:11px;font-weight:800}.carry-tag{padding:6px 9px;border-radius:8px;font-size:11px;font-weight:700}.carry-success{background:#eaf8f2;color:#11855b}.carry-warning{background:#fff7de;color:#a66e00}.carry-danger{background:#fff0f0;color:#c43b40}.carry-info{background:#edf4ff;color:#316bc7}.carry-neutral{background:var(--c-g100);color:#4d5752}.carry-avatar-wrap{position:relative;display:inline-grid}.carry-avatar{display:grid;place-items:center;background:var(--c-text);color:#fff;border-radius:50%;font:800 12px var(--c-font)}.carry-avatar--xs{width:24px;height:24px}.carry-avatar--sm{width:32px;height:32px}.carry-avatar--md{width:40px;height:40px}.carry-avatar--lg{width:52px;height:52px;font-size:16px}.carry-avatar--xl{width:68px;height:68px;font-size:20px}.carry-avatar-wrap.carry-is-online:after,.carry-avatar-wrap.carry-is-busy:after,.carry-avatar-wrap.carry-is-offline:after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;border:2px solid #fff}.carry-avatar-wrap.carry-is-online:after{background:var(--c-success)}.carry-avatar-wrap.carry-is-busy:after{background:var(--c-warning)}.carry-avatar-wrap.carry-is-offline:after{background:var(--c-g400)}.carry-table-wrap{overflow:auto;border:1px solid var(--c-g200);border-radius:12px}.carry-table{width:100%;border-collapse:collapse;font:13px var(--c-font);min-width:650px}.carry-table th,.carry-table td{padding:13px 14px;border-bottom:1px solid var(--c-g100);text-align:left}.carry-table th{background:var(--c-g50);color:var(--c-g500);font-size:11px;text-transform:uppercase}.carry-list-group{border:1px solid var(--c-g200);border-radius:12px;overflow:hidden}.carry-list-item{display:flex;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--c-g100);font-family:var(--c-font)}.carry-list-item>span:first-child{width:34px;height:34px;border-radius:9px;background:var(--c-mint);color:var(--c-green-dark);display:grid;place-items:center}.carry-list-item>div{display:grid;gap:2px;flex:1}.carry-list-item small{color:var(--c-g500)}.carry-empty{text-align:center;padding:36px 18px;border:1px dashed var(--c-g300);border-radius:14px;background:var(--c-g50);font-family:var(--c-font)}.carry-empty>span{width:56px;height:56px;border-radius:16px;background:var(--c-mint);color:var(--c-green-dark);display:grid;place-items:center;margin:auto}.carry-empty p{color:var(--c-g500)}.carry-progress{height:9px;background:var(--c-g100);border-radius:999px;overflow:hidden}.carry-progress span{display:block;height:100%;background:var(--c-green)}.carry-accordion{border:1px solid var(--c-g200);border-radius:12px;overflow:hidden;font-family:var(--c-font)}.carry-accordion details{border-bottom:1px solid var(--c-g100)}.carry-accordion summary{display:flex;justify-content:space-between;padding:14px 16px;font-weight:800;cursor:pointer}.carry-accordion details>div{padding:0 16px 14px;color:var(--c-g500);font-size:12px}.carry-timeline-item{display:grid;grid-template-columns:30px 1fr;gap:12px;min-height:70px;font-family:var(--c-font)}.carry-timeline-item>span{display:flex;flex-direction:column;align-items:center}.carry-timeline-item i{width:14px;height:14px;border-radius:50%;background:var(--c-g300);box-shadow:0 0 0 4px #fff,0 0 0 5px var(--c-g200);z-index:1}.carry-timeline-item u{width:2px;flex:1;background:var(--c-g200);margin-top:4px}.carry-timeline-item.carry-is-done i{background:var(--c-green);box-shadow:0 0 0 4px #fff,0 0 0 5px var(--c-green)}.carry-timeline-item.carry-is-active i{background:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--c-green)}.carry-timeline-item p{margin:4px 0;color:var(--c-g500);font-size:12px}.carry-alert,.carry-toast,.carry-banner{font-family:var(--c-font)}.carry-alert{display:flex;gap:10px;padding:12px 14px;border:1px solid;border-radius:10px}.carry-alert--success{background:#eaf8f2;color:#0e7650}.carry-alert--warning{background:#fff7de;color:#8a5e00}.carry-alert--danger{background:#fff0f0;color:#b4353a}.carry-alert--info,.carry-alert--neutral{background:#edf4ff;color:#2e61b8}.carry-toast{display:flex;gap:11px;background:#fff;border:1px solid var(--c-g200);border-radius:12px;padding:14px;box-shadow:0 4px 12px #00000014}.carry-toast-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center}.carry-toast>div{display:grid}.carry-toast small,.carry-banner small{color:var(--c-g500)}.carry-banner{display:flex;align-items:center;gap:13px;border:1px solid #b9f1d2;background:linear-gradient(90deg,#f0fff7,#fff);border-radius:14px;padding:14px 16px}.carry-banner>span{width:40px;height:40px;border-radius:12px;background:var(--c-green);display:grid;place-items:center}.carry-banner>div{display:grid;gap:2px;flex:1}.carry-overlay{position:fixed;inset:0;background:#1e232999;display:grid;place-items:center;padding:24px;z-index:999}.carry-modal{width:min(520px,100%);background:#fff;border-radius:16px;overflow:hidden;font-family:var(--c-font)}.carry-modal header,.carry-drawer header{display:flex;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--c-g100)}.carry-modal header button,.carry-drawer header button{border:0;background:none;font-size:20px}.carry-modal-body,.carry-drawer-body{padding:20px}.carry-modal footer,.carry-drawer footer{padding:16px 20px;border-top:1px solid var(--c-g100);display:flex;justify-content:flex-end;gap:8px}.carry-overlay-drawer{place-items:stretch end;padding:0}.carry-drawer{width:min(380px,88vw);height:100%;background:#fff;font-family:var(--c-font);display:flex;flex-direction:column}.carry-drawer-body{flex:1}.carry-navbar{font-family:var(--c-font);display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--c-g200);border-radius:14px;padding:12px 16px}.carry-navbar section{display:flex;gap:5px}.carry-navbar a{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;color:#4d5752;font-size:13px}.carry-navbar a.carry-is-active{background:#f0fff7;color:var(--c-green-dark);font-weight:800}.carry-breadcrumb{font:12px var(--c-font);display:flex;gap:7px;color:var(--c-g500)}.carry-breadcrumb span{display:flex;gap:7px}.carry-breadcrumb i{font-style:normal}.carry-tabs{display:flex;border-bottom:1px solid var(--c-g200)}.carry-tabs button{border:0;background:none;padding:10px 12px;font:13px var(--c-font);color:var(--c-g500)}.carry-tabs button.carry-is-active{color:var(--c-green-dark);border-bottom:2px solid var(--c-green);font-weight:800}.carry-pagination{display:flex;gap:6px}.carry-pagination button{width:34px;height:34px;border:1px solid var(--c-g200);background:#fff;border-radius:8px}.carry-pagination button.carry-is-active{background:var(--c-green);border-color:var(--c-green)}.carry-footer{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:22px;background:var(--c-text);color:#fff;border-radius:14px;padding:24px;font-family:var(--c-font)}.carry-footer section a{display:block;color:#c8d2cd;font-size:12px;margin:7px 0}.carry-footer>small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;color:#9fb0a7}.carry-entity-card header{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}.carry-entity-card header>div:first-child{display:grid}.carry-entity-card header small{color:var(--c-g500)}.carry-entity-card>section{display:grid;grid-template-columns:1fr 1fr;gap:12px}.carry-meta{display:grid}.carry-meta small{color:var(--c-g500);font-size:11px}.carry-courier{align-items:center;display:flex!important;gap:12px}.carry-courier>span{display:grid}.carry-courier em{font-style:normal;color:var(--c-warning);font-size:11px}.carry-store-cover{height:82px;background:linear-gradient(135deg,var(--c-mint),#f0fff7);margin:-20px -20px 16px;display:grid;place-items:center;color:var(--c-green-dark)}.carry-live-map{height:320px;border:1px solid var(--c-g200);border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(45deg,#e7f0ea 25%,transparent 25%) 0 0/24px 24px,linear-gradient(-45deg,#f2f7f4 25%,transparent 25%) 0 0/24px 24px,#f8fbf9}.carry-map-marker{position:absolute;display:flex;gap:8px;align-items:center}.carry-map-pin{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid #fff}.carry-map-pin>span{transform:rotate(45deg)}.carry-map-pin--client{background:var(--c-info);color:#fff}.carry-map-pin--store{background:var(--c-warning)}.carry-map-pin--courier{background:var(--c-green)}.carry-map-pin--dropoff{background:var(--c-danger);color:#fff}.carry-map-pin--pickup{background:var(--c-green-dark);color:#fff}.carry-map-label{background:#fff;border:1px solid var(--c-g200);border-radius:8px;padding:6px 8px;font:700 11px var(--c-font)}@media(max-width:760px){.carry-navbar{align-items:flex-start;flex-direction:column}.carry-navbar section{flex-wrap:wrap}.carry-footer{grid-template-columns:1fr 1fr}.carry-entity-card>section{grid-template-columns:1fr}}:root{--carry-action-primary: var(--c-green);--carry-action-secondary: var(--c-mint);--carry-text-primary: var(--c-text);--carry-text-secondary: #4d5752;--carry-surface: var(--c-bg);--carry-surface-subtle: var(--c-g50);--carry-border: var(--c-g200);--carry-focus: 0 0 0 3px rgba(46, 234, 131, .2);--carry-sidebar-width: 240px;--carry-content-max: 1440px;--carry-header-height: 64px;--carry-gutter: 24px}.carry-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.carry-icon{display:inline-flex;flex-shrink:0;vertical-align:middle}.carry-icon iconsax-icon{display:inline-flex}.carry-btn,.carry-icon-btn,.carry-tabs button,.carry-pagination button,.carry-navbar button,.carry-nav-item{transition:background .15s,border-color .15s;cursor:pointer}.carry-btn:disabled,.carry-icon-btn:disabled,.carry-pagination button:disabled,.carry-nav-item:disabled{opacity:.45;cursor:not-allowed}.carry-btn:not(:disabled):hover{filter:brightness(.96)}.carry-btn:focus-visible,.carry-icon-btn:focus-visible,.carry-navbar a:focus-visible,.carry-navbar button:focus-visible,.carry-tabs button:focus-visible,.carry-pagination button:focus-visible,.carry-nav-item:focus-visible,.carry-sort-button:focus-visible,.carry-accordion summary:focus-visible,.carry-dialog button:focus-visible{outline:2px solid var(--c-green-dark);outline-offset:3px;box-shadow:var(--carry-focus)}.carry-input,.carry-select{height:40px}.carry-input:not(:disabled):hover,.carry-textarea:not(:disabled):hover,.carry-select:not(:disabled):hover{border-color:var(--c-g400)}.carry-input:disabled,.carry-select:disabled,.carry-textarea:disabled{background:var(--c-g100);color:var(--c-g400);cursor:not-allowed}.carry-input[readonly]{background:var(--c-g50)}.carry-choice:has(input:disabled),.carry-switch-row:has(input:disabled){opacity:.5;cursor:not-allowed}.carry-switch{position:relative;display:inline-flex}.carry-switch input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}.carry-switch input:focus-visible+span{outline:2px solid var(--c-green-dark);outline-offset:3px}.carry-badge-dot{width:8px;min-width:8px;height:8px;padding:0;background:var(--c-danger)}.carry-badge-dot.carry-success{background:var(--c-success)}.carry-badge-dot.carry-warning{background:var(--c-warning)}.carry-badge-dot.carry-info{background:var(--c-info)}.carry-badge-dot.carry-neutral{background:var(--c-g500)}.carry-avatar-group{display:flex;align-items:center;padding-left:8px}.carry-avatar-group>*{margin-left:-8px;border:2px solid var(--c-bg);border-radius:50%}.carry-avatar-overflow{background:var(--c-warning);color:var(--c-text)}.carry-sidebar{width:var(--carry-sidebar-width);box-sizing:border-box;display:flex;flex-direction:column;gap:24px;padding:24px 16px;background:var(--c-bg);border-right:1px solid var(--c-g200);font-family:var(--c-font)}.carry-sidebar-brand{padding:0 12px}.carry-sidebar nav{display:grid;gap:5px}.carry-sidebar>footer{margin-top:auto;padding:12px;color:var(--c-g500);font-size:12px}.carry-nav-item{display:flex;align-items:center;gap:12px;border:0;border-radius:10px;padding:12px;color:var(--carry-text-secondary);background:transparent;font:500 13px var(--c-font);text-align:left;text-decoration:none}.carry-nav-item:hover{background:var(--c-g50)}.carry-nav-item.carry-is-active{background:var(--c-mint);color:var(--c-green-dark);font-weight:700}.carry-navbar button{border:0;background:transparent;font:inherit}.carry-navbar button,.carry-navbar a{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;color:var(--carry-text-secondary);font-size:13px;text-decoration:none}.carry-navbar button.carry-is-active{background:var(--c-mint);color:var(--c-green-dark);font-weight:700}.carry-data-table{display:grid;gap:16px}.carry-data-table>.carry-field{max-width:360px}.carry-table-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--c-font);color:var(--c-g500)}.carry-sort-button{padding:0;border:0;background:none;text-transform:inherit;font:inherit;color:inherit;cursor:pointer}.carry-data-table input[type=checkbox]{accent-color:var(--c-green-dark);width:16px;height:16px}.carry-page-gap{padding:0 6px}.carry-dialog{padding:0;border:0;border-radius:16px;background:transparent;color:var(--c-text);max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 12px 30px #0000001f}.carry-dialog::backdrop{background:#1e232999}.carry-dialog>.carry-modal{width:min(520px,calc(100vw - 32px))}.carry-dialog-drawer{margin:0 0 0 auto;border-radius:0;max-height:100dvh;height:100dvh;max-width:100vw}.carry-dialog .carry-drawer{height:100%;width:min(420px,92vw)}.carry-dialog .carry-drawer-body{overflow:auto}.carry-dialog header button{cursor:pointer;color:var(--c-g500)}.carry-command{display:grid;gap:16px}.carry-command>small{font-size:11px;color:var(--c-g500)}.carry-command-results{max-height:320px;overflow:auto;display:grid;gap:4px}.carry-command-option{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;cursor:pointer}.carry-command-option.carry-is-active{background:var(--c-mint)}.carry-command-option>span{display:grid;gap:4px}.carry-command-option small{color:var(--c-g500)}.carry-toast>div{flex:1}.carry-tooltip{z-index:1}.carry-entity-label{display:flex;align-items:center;gap:6px}.carry-entity-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.carry-entity-card{overflow:hidden}.carry-entity-card header{align-items:flex-start}.carry-entity-card header>.carry-status{flex-shrink:0}.carry-entity-card header>div:first-child{min-width:0}.carry-meta b{font-size:13px;overflow-wrap:anywhere}.carry-store-logo{display:grid;place-items:center;width:48px;height:48px;background:var(--c-bg);border-radius:12px;font-weight:800}.carry-courier>span.carry-avatar-wrap{display:inline-grid;flex-shrink:0}.carry-courier>span:not(.carry-avatar-wrap){display:grid;gap:4px}.carry-timeline-item:last-child u{display:none}.carry-accordion summary::-webkit-details-marker{display:none}.carry-accordion details[open] summary .carry-icon{transform:rotate(180deg)}.carry-route-progress{display:flex;gap:0;list-style:none;margin:0;padding:0;font-family:var(--c-font)}.carry-route-progress li{position:relative;flex:1;display:grid;align-content:start;gap:10px;font-size:12px;padding-right:12px}.carry-route-progress li:not(:last-child):before{content:"";height:2px;background:var(--c-g200);position:absolute;top:15px;left:32px;right:0}.carry-route-dot{position:relative;z-index:1;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--c-g100);color:var(--c-g500)}.carry-route-progress small{color:var(--c-g500)}.carry-route-progress .carry-is-done .carry-route-dot{background:var(--c-green);color:var(--c-text)}.carry-route-progress .carry-is-done:before{background:var(--c-green)}.carry-route-progress .carry-is-active .carry-route-dot{background:var(--c-bg);outline:2px solid var(--c-green);outline-offset:-2px;color:var(--c-green-dark)}@media(pointer:coarse){.carry-input,.carry-select,.carry-btn,.carry-icon-btn{min-height:44px}}@media(max-width:640px){.carry-route-progress{flex-direction:column;gap:12px}.carry-route-progress li{grid-template-columns:32px 1fr;align-items:center;padding:0}.carry-route-progress li small{grid-column:2}.carry-route-progress li:not(:last-child):before{width:2px;height:calc(100% + 12px);left:15px;top:16px}.carry-table-footer{align-items:flex-start;flex-direction:column}.carry-banner{flex-wrap:wrap}.carry-map-label{max-width:78px;overflow-wrap:anywhere}.carry-live-map{height:380px}.carry-map-marker{gap:4px}.carry-map-pin{width:28px;height:28px;border-width:2px}}@media(prefers-reduced-motion:reduce){.carry-spinner,.carry-skeleton{animation:none}.carry-switch i{transition:none}}.carry-timeline-horizontal{display:flex;gap:0}.carry-timeline-horizontal .carry-timeline-item{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;padding-right:16px}.carry-timeline-horizontal .carry-timeline-item>span{position:relative;display:flex;align-items:flex-start}.carry-timeline-horizontal .carry-timeline-item u{position:absolute;top:2px;left:14px;width:calc(100% + 16px);height:2px}.carry-timeline-horizontal .carry-timeline-item b{font-size:12px}.carry-footer section>div{margin:7px 0}.carry-footer section a{margin:0}.carry-footer>div>p{font-size:12px;color:var(--c-g300)}@media(max-width:640px){.carry-timeline-horizontal{flex-direction:column}.carry-timeline-horizontal .carry-timeline-item{display:grid;grid-template-columns:30px 1fr;padding-right:0;min-height:80px}.carry-timeline-horizontal .carry-timeline-item>span{align-items:center}.carry-timeline-horizontal .carry-timeline-item u{height:100%;width:2px;top:10px;left:14px}}
/*
 * Overrides mínimos para el layout del backoffice. Los tokens (color,
 * tipografía, espaciado, radios) vienen de carry-design-system/styles.css;
 * este archivo solo resuelve la composición de layout que el design system
 * deja a criterio de cada app (es "app-agnostic" por diseño, ver AGENTS.md
 * del paquete) y replica, con los valores reales de
 * carry-design-system/tokens (colors.gray/colors.green), las piezas que el
 * prototipo carry_backoffice_admin_role_flow_v6 pide y que el paquete no
 * expone como componente (sidebar oscuro con subnav, footer de app, tira de
 * herramientas de la tabla) — nunca colores inventados.
 */

body {
  margin: 0;
  font-family: var(--c-font, "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 14px; /* typeScale.body-sm / label-md */
  color: var(--c-text, #1e2329);
}
button,
input,
select,
textarea {
  font: inherit;
}
.carry-alert {
  font-size: 12px; /* typeScale.label-sm — el paquete no define tamaño propio */
}
.carry-btn {
  justify-content: center; /* el paquete no lo define; sin esto, un botón full-width queda con el label pegado a la izquierda */
}
.carry-table-footer small {
  font-size: 12px; /* typeScale.label-sm — el paquete no define tamaño propio */
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--carry-sidebar-width, 240px) minmax(0, 1fr);
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-topbar {
  height: 64px; /* layout.header */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--carry-gutter, 24px);
  border-bottom: 1px solid var(--carry-border);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 15;
}

.app-topbar-spacer {
  flex: 1;
}

.app-search {
  width: 250px;
}

.app-icon-btn-dot {
  position: relative;
  display: inline-flex;
}
.app-icon-btn-dot:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-danger, #e5484d);
  right: 6px;
  top: 6px;
  border: 2px solid #fff;
  pointer-events: none;
}

.app-lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--c-g200);
  background: var(--c-g50);
  border-radius: 9px;
  gap: 2px;
}
.app-lang-btn {
  height: 26px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g500);
  cursor: pointer;
}
.app-lang-btn--active {
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.app-nav-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 6px;
}
.app-nav-user b {
  font-size: 12px; /* typeScale.label-sm */
  display: block;
}
.app-nav-user span {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
}

.app-content {
  flex: 1;
  padding: 28px 28px 20px;
  max-width: var(--carry-content-max, 1440px);
  width: 100%;
  margin: 0 auto;
  background: var(--carry-surface-subtle);
}

/* App footer: barra angosta del shell, distinta del <Footer> multi-columna
   oscuro que trae el design system (pensado para landing/marketing, no para
   una app interna) — ver AppLayout.tsx para el razonamiento completo. */
.app-footer {
  min-height: 58px;
  border-top: 1px solid var(--carry-border);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  color: var(--c-g500);
  font-size: 12px; /* typeScale.label-sm */
}
.app-footer b {
  color: #363e3a; /* colors.gray[700] */
}
.app-footer-spacer {
  flex: 1;
}
.app-footer a {
  color: inherit;
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--c-green-dark);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * El asset de CarryAppIcon (JPEG sin transparencia) trae ~9% de margen
 * blanco alrededor de la forma. Se renderiza ~22% más grande dentro de un
 * contenedor recortado para eliminar ese borde en fondos oscuros.
 */
.app-icon-crop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 22%;
  overflow: hidden;
  flex: 0 0 auto;
}
.app-icon-crop .carry-app-icon {
  width: 46px;
  height: 46px;
  border-radius: 0;
  flex-shrink: 0;
}

.side-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.side-account-logout {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #9eaaa4;
  cursor: pointer;
  display: inline-flex;
  padding: 4px;
  border-radius: 6px;
}
.side-account-logout:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/*
 * El Sidebar del design system solo trae una superficie clara (usa --c-bg
 * internamente) y una lista plana de ítems, sin agrupación ni subnav. El
 * prototipo pide un sidebar oscuro con dos grupos ("Operación"/"Gestión") y
 * un subnav expandido bajo "Seguridad y acceso". AppLayout.tsx arma el
 * <aside> a mano reutilizando las clases reales del paquete
 * (carry-sidebar/carry-nav-item/carry-is-active); acá solo se sobrescriben,
 * dentro de ese scope, las variables que esas clases ya consumen —con los
 * valores hexadecimales reales de colors.gray[900]/colors.green[500] de
 * carry-design-system/tokens— y se agregan las clases propias que el
 * paquete no define (side-label, subnav, sub-item).
 */
.app-sidebar-shell {
  display: contents;
}
.app-sidebar-shell .carry-sidebar {
  --c-bg: #1e2329; /* colors.gray[900] */
  --carry-text-secondary: #cad1cd; /* texto de nav-item, del prototipo */
  --c-g50: rgba(255, 255, 255, 0.06); /* hover de nav-item */
  --c-g200: rgba(255, 255, 255, 0.06); /* borde derecho del sidebar */
  color: var(--carry-text-secondary);
  gap: 0;
  padding: 0;
}
.app-sidebar-shell .carry-sidebar-brand {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-menu-btn,
.app-menu-close {
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.app-menu-btn {
  color: var(--c-g700, #363e3a);
}
.app-menu-close {
  color: #fff;
}
.app-sidebar-shell .carry-wordmark {
  color: #fff;
  font-size: 18px; /* typeScale.body-lg */
}
.app-sidebar-shell .side-brand-subtitle {
  color: #aeb8b3;
  font-size: 12px; /* typeScale.label-sm */
  display: block;
  margin-top: 1px;
}
.app-sidebar-shell .app-sidebar-nav {
  padding: 16px 12px;
  overflow: auto;
  flex: 1;
  display: block;
}
.app-sidebar-shell .side-label {
  font-size: 12px; /* typeScale.label-sm */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7f8b85;
  font-weight: 700; /* typeScale max weight */
  padding: 12px 10px 7px;
}
.app-sidebar-shell .carry-nav-item {
  height: 42px;
  width: 100%;
  border-radius: 10px;
  padding: 0 11px;
  margin: 2px 0;
  gap: 11px;
  font-size: 12px; /* typeScale.label-sm */
  font-weight: 600; /* typeScale.label-sm */
  position: relative;
}
.app-sidebar-shell .carry-nav-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.app-sidebar-shell .carry-nav-item .side-count {
  margin-left: auto;
  color: #7f8b85;
  font-size: 12px; /* typeScale.label-sm */
  font-weight: 600;
}
.app-sidebar-shell .carry-nav-item.carry-is-active {
  background: rgba(46, 234, 131, 0.13); /* colors.green[500] @ 13% */
  color: #fff;
  font-weight: 600; /* typeScale.label-sm */
}
.app-sidebar-shell .carry-nav-item.carry-is-active:before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: #2eea83; /* colors.green[500] */
}
.app-sidebar-shell .carry-nav-item.carry-is-active .carry-icon {
  color: #2eea83; /* colors.green[500] */
}
.app-sidebar-shell .subnav {
  margin: 4px 0 8px 30px;
  padding-left: 11px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.app-sidebar-shell .sub-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px; /* typeScale.label-sm */
  color: #9eaaa4;
  margin: 2px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.app-sidebar-shell .sub-item:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.app-sidebar-shell .sub-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.app-sidebar-shell .sub-item--active {
  color: #2eea83; /* colors.green[500] */
  font-weight: 700; /* typeScale h/label max weight */
  background: rgba(46, 234, 131, 0.08);
}
.app-sidebar-shell .carry-sidebar > footer {
  margin-top: 0;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
}
.app-sidebar-shell .side-account b {
  color: #fff;
  font-size: 12px; /* typeScale.label-sm */
  display: block;
}
.app-sidebar-shell .side-account span {
  font-size: 12px; /* typeScale.label-sm */
  color: #9eaaa4;
}
.app-sidebar-shell .carry-sidebar > footer .carry-avatar {
  background: #2eea83; /* colors.green[500] */
  color: #1e2329; /* colors.gray[900] */
}

.page-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.page-section-head h2 {
  font-size: 18px; /* typeScale.body-lg */
  margin: 0 0 3px;
}
.page-section-head p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  margin: 0;
}

.security-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.eyebrow {
  display: block;
  font-size: 12px; /* typeScale.label-sm */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700; /* typeScale max weight */
  color: var(--c-green-dark);
  margin-bottom: 4px;
}

.security-page-head h1 {
  font-size: 28px; /* typeScale.h2 */
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}

.security-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px; /* typeScale.label-sm */
  line-height: 1.55;
  max-width: 640px;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}

.users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.users-toolbar .carry-field {
  min-width: 290px;
  flex: 1;
  max-width: 420px;
}
.users-toolbar-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.center-panel {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.center-panel h2 {
  font-size: 24px; /* typeScale.h3, nearest to prototype's 22px */
  margin: 0;
}
.center-panel > p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.form-actions.center {
  justify-content: center;
}

.invite-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.invite-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.invite-form-grid .full {
  grid-column: 1 / -1;
}

.invite-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--carry-border);
  border-radius: 10px;
  background: var(--carry-surface-subtle);
}
.invite-check input {
  margin-top: 2px;
  accent-color: var(--c-green-dark);
}
.invite-check b {
  display: block;
  font-size: 12px; /* typeScale.label-sm */
  margin-bottom: 2px;
}
.invite-check span {
  display: block;
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  line-height: 1.45;
}

.invite-preview {
  border: 1px solid var(--carry-border);
  border-radius: 12px;
  overflow: hidden;
}
.invite-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: var(--carry-surface-subtle);
  border-bottom: 1px solid var(--carry-border);
  font-size: 12px; /* typeScale.label-sm */
  font-weight: 700; /* typeScale max weight */
}
.invite-preview-body {
  padding: 14px;
}
.invite-preview-body b {
  font-size: 12px; /* typeScale.label-sm */
  display: block;
  margin-bottom: 4px;
}
.invite-preview-body p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0;
}

.user-detail-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.user-detail-head h3 {
  font-size: 18px; /* typeScale.body-lg, nearest to prototype's 17px */
  margin: 3px 0;
}
.user-detail-head p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  margin: 0;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.meta-grid small {
  display: block;
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  margin-bottom: 3px;
}
.meta-grid b {
  font-size: 12px; /* typeScale.label-sm */
}

.mfa-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.mfa-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.mfa-row h3 {
  font-size: 14px; /* typeScale.label-md */
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.mfa-row p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
}

.mfa-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.mfa-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--carry-border);
}
.mfa-footer p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  margin: 0;
}

.toast-anchor {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
}

/*
 * Panel "Política de roles privilegiados" (`.split`/`.policy`/`.rule`/
 * `.arch` en el prototipo). El prototipo lo muestra junto al contenido en
 * las diez pantallas de Seguridad y acceso, como recordatorio de que la UI
 * nunca es la barrera de seguridad real — ver PolicySidebar.tsx.
 */
.security-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
  gap: 16px;
  align-items: start;
}
.security-split > section {
  min-width: 0;
}

.policy {
  position: sticky;
  top: 92px;
}
.policy h3 {
  font-size: 14px; /* typeScale.label-md */
  margin: 0 0 8px;
}
.policy p {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0;
}
.policy .rule {
  display: flex;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--carry-border);
}
.policy .rule i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--c-green-100, #ddf8e8);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  font-size: 12px; /* typeScale.label-sm */
  font-style: normal;
  font-weight: 700; /* typeScale max weight */
}
.policy .rule b {
  font-size: 12px; /* typeScale.label-sm */
  display: block;
}
.policy .rule span {
  font-size: 12px; /* typeScale.label-sm */
  color: var(--c-g500);
}
.policy .arch {
  margin-top: 14px;
  background: #1e2329; /* colors.gray[900] */
  color: #dce7e2;
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; /* typeScale.label-sm */
  line-height: 1.6;
  white-space: pre-wrap;
}

@media (max-width: 1024px) { /* breakpoints.lg */
  .security-split {
    grid-template-columns: 1fr;
  }
  .policy {
    position: static;
  }
}

@media (max-width: 768px) { /* breakpoints.md */
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-menu-btn {
    display: inline-flex;
  }
  .app-menu-close {
    display: inline-flex;
  }
  .app-sidebar-shell {
    display: block;
  }
  .app-sidebar-shell .carry-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--carry-sidebar-width, 240px);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.25);
  }
  .app-sidebar-shell.is-open .carry-sidebar {
    transform: translateX(0);
  }
  .app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30, 35, 41, 0.52);
    z-index: 30;
  }
  .app-search {
    display: none;
  }
  .meta-grid {
    grid-template-columns: 1fr 1fr;
  }
  .invite-form-grid {
    grid-template-columns: 1fr;
  }
  .invite-form-grid .full {
    grid-column: auto;
  }
}
/* Banner global — montado en AppLayout debajo del navbar real, ver GlobalAlertContext.
   position: sticky (no fixed): reserva su espacio en el flujo normal y, al
   hacer scroll, queda pegado justo debajo del navbar (que mide 64px) en vez
   de desplazarse con el contenido de la página — "sobre todo" y estable. */
.sysalerts-global-banner {
  position: sticky;
  top: 64px;
  z-index: 14;
  background: #fff;
  padding: 14px 24px 0;
}
.sysalerts-global-banner .carry-alert {
  align-items: center;
}
.sysalerts-global-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.sysalerts-global-banner-copy {
  flex: 1;
  min-width: 200px;
}

/* Toast global — montado en AppLayout, fijo en la esquina inferior derecha
   sobre todo el Backoffice (no solo dentro de la maqueta del simulador) y
   siempre en la misma posición de viewport al hacer scroll. */
.sysalerts-global-toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  max-width: 360px;
}

.sysalerts-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.sysalerts-page-head h1 {
  font-size: 28px; /* typeScale.h2 */
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}
.sysalerts-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px; /* typeScale.label-sm */
  line-height: 1.55;
  max-width: 640px;
}

.sysalerts-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin-bottom: 18px;
}
.sysalerts-tab {
  height: 36px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.sysalerts-tab.sysalerts-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}

.sysalerts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .sysalerts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .sysalerts-grid {
    grid-template-columns: 1fr;
  }
}

.sysalerts-card {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 210px;
}
.sysalerts-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sysalerts-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}
.sysalerts-card h3 {
  font-size: 12px;
  margin: 2px 0 3px;
}
.sysalerts-card p {
  font-size: 12px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0;
}
.sysalerts-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sysalerts-action {
  margin-top: auto;
  padding-top: 13px;
}

.sysalerts-simulator-card {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  padding: 20px;
}
.sysalerts-sim-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sysalerts-sim-toolbar .carry-select-wrap {
  min-width: 220px;
}

.sysalerts-simulator {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-g50);
}
.sysalerts-demo-nav {
  height: 58px;
  background: #fff;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  font-size: 12px;
}
.sysalerts-grow {
  flex: 1;
}
.sysalerts-demo-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 460px;
}
.sysalerts-demo-side {
  background: #1e2329; /* colors.gray[900] */
  padding: 18px 12px;
}
.sysalerts-demo-side div {
  height: 34px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.sysalerts-demo-side-active {
  background: rgba(46, 234, 131, 0.13) !important;
}
.sysalerts-demo-content {
  padding: 18px;
  min-width: 0;
  position: relative;
}
.sysalerts-fake-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sysalerts-fake {
  height: 74px;
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
}
.sysalerts-fake--big {
  height: 118px;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .sysalerts-demo-body {
    grid-template-columns: 1fr;
  }
  .sysalerts-demo-side {
    display: none;
  }
  .sysalerts-fake-row {
    grid-template-columns: 1fr;
  }
}

.sysalerts-sim-hint {
  font-size: 12px;
  color: var(--c-g500);
  margin: -6px 0 14px;
}

.sysalerts-modal-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.sysalerts-modal-detail {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  background: var(--c-g50);
  padding: 12px;
  margin-top: 14px;
}
.sysalerts-modal-detail b {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}
.sysalerts-modal-detail span {
  font-size: 12px;
  color: var(--c-g500);
  line-height: 1.5;
}

.sysalerts-rules-notes-card {
  margin-top: 14px;
  background: var(--c-g50);
}
.sysalerts-rules-notes {
  font-size: 12px;
  color: var(--c-g600, #4d5752);
  line-height: 1.9;
  margin: 0;
  padding-left: 18px;
}
/* Adaptado de carry_header_user_controls_v6_notification_flows.html — clases prefijadas con `header-`.
   Colores usan los tokens reales de carry-design-system (--c-g50..--c-g500, --c-green, --c-green-dark,
   --c-success, --c-warning, --c-danger, --c-info), no las variables --n/--g inventadas por el prototipo
   (ver feedback_css_comment_slash_star.md: nunca escribir la secuencia de cierre de comentario literal
   dentro del texto de un comentario, o corta el bloque antes de tiempo y corrompe la regla siguiente). */

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-control {
  position: relative;
  display: flex;
  align-items: center;
}
.header-iconbtn-wrap {
  position: relative;
  display: inline-flex;
}
.header-iconbtn.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}
.header-badge {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-danger);
  color: #fff;
  border: 2px solid #fff;
  font-size: 9px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.header-profile-trigger {
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 8px 3px 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.header-profile-trigger:hover {
  background: var(--c-g50);
}
.header-profile-copy {
  text-align: left;
  min-width: 96px;
}
.header-profile-copy b {
  display: block;
  font-size: 11px;
}
.header-profile-copy span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}

/* Popovers */
.header-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  z-index: 60;
  max-height: calc(100vh - 90px);
  overflow: auto;
}
.header-popover-notifications {
  width: min(380px, calc(100vw - 24px));
}
.header-popover-help,
.header-popover-profile {
  width: min(300px, calc(100vw - 24px));
}
.header-popover-head {
  padding: 13px 14px;
  border-bottom: 1px solid var(--c-g100);
  display: flex;
  gap: 10px;
  align-items: center;
}
.header-popover-head h3 {
  font-size: 11px;
  margin: 0;
}
.header-popover-head p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 2px 0 0;
}
.header-grow {
  flex: 1;
}
.header-link {
  border: 0;
  background: transparent;
  color: var(--c-green-dark);
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.header-popover-foot {
  padding: 9px 10px;
  border-top: 1px solid var(--c-g100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.header-notif-filterbar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-g100);
  overflow: auto;
}
.header-notif-filter {
  height: 27px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 7px;
  font-weight: 800;
  color: #4d5752;
  white-space: nowrap;
  cursor: pointer;
}
.header-notif-filter.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}
.header-notif-list {
  max-height: 360px;
  overflow: auto;
}
.header-notif-empty {
  padding: 20px 14px;
  font-size: 9px;
  color: var(--c-g500);
  text-align: center;
}
.header-notif-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--c-g100);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.header-notif-row:hover {
  background: var(--c-g50);
}
.header-notif-row.unread {
  background: var(--c-mint);
}
.header-notif-row b {
  display: block;
  font-size: 9px;
}
.header-notif-row p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 3px 0;
}
.header-notif-row > div:not(.header-notif-icon) > span {
  font-size: 7px;
  color: var(--c-g500);
}
.header-notif-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  color: #4d5752;
}
.header-notif-icon.high {
  background: #fff0f0;
  color: var(--c-danger);
}
.header-notif-icon.medium {
  background: #fff7de;
  color: #8a5e00;
}
.header-notif-icon.info {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.header-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-green);
  margin-top: 6px;
}

.header-popover-list {
  padding: 7px;
  display: grid;
  gap: 2px;
}
.header-menuitem {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.header-menuitem:hover {
  background: var(--c-g50);
}
.header-menuitem b {
  font-size: 9px;
  display: block;
}
.header-menuitem > div:not(.header-mini) > span {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 2px;
}
.header-menuitem-danger {
  color: var(--c-danger);
}
.header-mini {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  flex: none;
}

.header-profile-summary {
  padding: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--c-g100);
}
.header-profile-summary > div > b {
  font-size: 10px;
  display: block;
}
.header-profile-summary > div > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.header-role-tag {
  display: inline-flex !important;
  background: var(--c-mint);
  color: var(--c-green-dark) !important;
  border-radius: 999px;
  padding: 4px 6px;
  font-size: 7px !important;
  font-weight: 850;
  margin-top: 6px !important;
}
.header-sep {
  height: 1px;
  background: var(--c-g100);
  margin: 6px 0;
}

/* Flow modals */
.header-modal-wide .carry-modal {
  width: min(1020px, 96vw);
}
.header-modal-md .carry-modal {
  width: min(820px, 96vw);
}
.header-modal-wide .carry-modal-body,
.header-modal-md .carry-modal-body {
  max-height: 72vh;
  overflow: auto;
}
.header-flow-desc {
  font-size: 10px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0 0 14px;
}
.header-flow-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 12px;
}
.header-severity {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 850;
}
.header-severity i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.header-severity.danger i {
  background: var(--c-danger);
}
.header-severity.warning i {
  background: var(--c-warning);
}
.header-severity.info i {
  background: var(--c-info);
}

.header-notif-detail-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.header-notif-detail-card h4 {
  font-size: 12px;
  margin: 0 0 5px;
}
.header-notif-detail-card p {
  font-size: 10px;
  color: #4d5752;
  line-height: 1.5;
  margin: 0;
}

.header-context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.header-context-item {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: var(--c-g50);
}
.header-context-item small {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
}
.header-context-item b {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.header-entity-list {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}
.header-entity {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  align-items: center;
}
.header-entity-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  color: #4d5752;
}
.header-entity b {
  display: block;
  font-size: 9px;
}
.header-entity > div:not(.header-entity-icon) > span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 1px;
}

.header-timeline {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
}
.header-timeline-event {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  position: relative;
  padding-bottom: 12px;
}
.header-timeline-event:before {
  content: "";
  position: absolute;
  left: 13px;
  top: 25px;
  bottom: 0;
  width: 1px;
  background: var(--c-g200);
}
.header-timeline-event:last-child:before {
  display: none;
}
.header-timeline-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  z-index: 1;
}
.header-timeline-event b {
  display: block;
  font-size: 9px;
}
.header-timeline-event > div:not(.header-timeline-icon) > span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
  line-height: 1.4;
}

.header-notif-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.header-justify-center {
  justify-content: center;
}
.header-justify-between {
  justify-content: space-between;
  align-items: center;
}

.header-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.header-field {
  display: grid;
  gap: 6px;
}
.header-field--full {
  grid-column: 1 / -1;
}
.header-field label {
  font-size: 10px;
  font-weight: 800;
}
.header-field input {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-g300);
  border-radius: 10px;
  background: #fff;
  outline: none;
  font-size: 10px;
  font-family: inherit;
}
.header-field input:focus {
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(46, 234, 131, 0.18);
}
.header-form-error {
  font-size: 10px;
  color: var(--c-danger);
  margin: 0 0 10px;
}

.header-callout {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.5;
}
.header-callout.info {
  background: #edf4ff;
  border: 1px solid #c7daff;
  color: #2e61b8;
}
.header-callout.warning,
.header-callout.warn {
  background: #fff7de;
  border: 1px solid #f8d986;
  color: #8a5e00;
}

.header-center-list {
  display: grid;
  gap: 8px;
}
.header-center-item {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.header-center-item.unread {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
}
.header-center-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.header-center-item b {
  font-size: 9px;
  display: block;
}
.header-center-item p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 3px 0;
}
.header-center-item > div:not(.header-center-icon) > span {
  font-size: 7px;
  color: var(--c-g500);
}

.header-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.header-section-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.header-section-card h4 {
  font-size: 10px;
  margin: 0 0 9px;
}
.header-switch-list {
  display: grid;
  gap: 8px;
}
.header-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.header-switch-row b {
  display: block;
  font-size: 9px;
}
.header-switch-row > div > span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}
.header-switch-row > div:first-child {
  flex: 1;
}

.header-mt-6 {
  margin-top: 6px;
}
.header-mt-8 {
  margin-top: 8px;
}
.header-mt-10 {
  margin-top: 10px;
}
.header-mt-12 {
  margin-top: 12px;
}
.header-mb-12 {
  margin-bottom: 12px;
}

.header-help-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-mint);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
}
.header-help-hero h4 {
  font-size: 11px;
  margin: 0 0 4px;
}
.header-help-hero p {
  font-size: 9px;
  color: #4d5752;
  margin: 0;
  line-height: 1.5;
}
.header-help-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.header-help-category {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 11px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.header-help-category:hover,
.header-help-category.active {
  border-color: var(--c-green);
  background: var(--c-mint);
}
.header-hc-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  margin-bottom: 7px;
}
.header-help-category b {
  display: block;
  font-size: 9px;
}
.header-help-category > span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}
.header-help-article-list {
  display: grid;
  gap: 8px;
}
.header-help-article {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.header-help-article:hover {
  border-color: var(--c-green);
}
.header-help-article-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.header-help-article b {
  display: block;
  font-size: 10px;
}
.header-help-article p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 3px 0 0;
  line-height: 1.45;
}
.header-article-meta {
  text-align: right;
  font-size: 8px;
  color: var(--c-g500);
}
.header-article-reader h3 {
  font-size: 15px;
  margin: 0 0 6px;
}
.header-article-reader h4 {
  font-size: 11px;
  margin: 14px 0 5px;
}
.header-article-reader p,
.header-article-reader li {
  font-size: 9px;
  color: #4d5752;
  line-height: 1.6;
}
.header-article-reader ol,
.header-article-reader ul {
  padding-left: 18px;
}
.header-reader-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.header-block-label {
  font-size: 10px;
  font-weight: 800;
  display: block;
  margin-bottom: 7px;
}
.header-request-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.header-request-type {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 11px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.header-request-type.active {
  border-color: var(--c-green);
  background: var(--c-mint);
}
.header-request-type b {
  font-size: 9px;
  display: block;
  margin-top: 6px;
}
.header-request-type > span:not(.carry-icon) {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

.header-ticket-confirm,
.header-problem-confirm {
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-mint);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
}
.header-confirm-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  margin: 0 auto 9px;
}
.header-ticket-confirm h4,
.header-problem-confirm h4 {
  font-size: 12px;
  margin: 0 0 5px;
}
.header-ticket-confirm p,
.header-problem-confirm p {
  font-size: 10px;
  color: #4d5752;
  margin: 0 0 10px;
}

.header-problem-context {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.header-ctx {
  border: 1px solid var(--c-g200);
  border-radius: 9px;
  padding: 9px;
  background: var(--c-g50);
}
.header-ctx small {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
}
.header-ctx b {
  font-size: 9px;
  display: block;
  margin-top: 3px;
}

.header-quick-guide-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
}
.header-quick-guide-menu {
  display: grid;
  gap: 7px;
  align-content: start;
}
.header-quick-guide-item {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 10px;
  padding: 9px;
  text-align: left;
  cursor: pointer;
}
.header-quick-guide-item.active {
  border-color: var(--c-green);
  background: var(--c-mint);
}
.header-quick-guide-item b {
  font-size: 9px;
  display: block;
}
.header-quick-guide-item span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.header-quick-guide-reader {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
  min-height: 320px;
}
.header-quick-guide-reader h3 {
  font-size: 13px;
  margin: 0 0 4px;
}
.header-quick-guide-reader p {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.5;
}
.header-guide-progress {
  display: flex;
  gap: 5px;
  margin: 10px 0;
}
.header-guide-progress span {
  height: 5px;
  flex: 1;
  border-radius: 999px;
  background: var(--c-g100);
}
.header-guide-progress span.active {
  background: var(--c-green);
}
.header-guide-step h4 {
  font-size: 11px;
  margin: 8px 0 5px;
}
.header-guide-step p {
  font-size: 9px;
  color: #4d5752;
  line-height: 1.55;
}
.header-step-visual {
  height: 110px;
  border: 1px dashed var(--c-g300);
  border-radius: 10px;
  background: var(--c-g50);
  display: grid;
  place-items: center;
  color: var(--c-g500);
  font-size: 9px;
  margin-top: 8px;
}
.header-subtext {
  font-size: 9px;
  color: var(--c-g500);
}

.header-avatar-editor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.header-avatar-editor b {
  display: block;
  font-size: 10px;
}
.header-photo-upload {
  height: 32px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}

.header-flow-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
  overflow: auto;
}
.header-flow-tab {
  height: 32px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 800;
  color: #4d5752;
  white-space: nowrap;
  cursor: pointer;
}
.header-flow-tab.active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}

.header-list-stack {
  display: grid;
  gap: 8px;
}
.header-list-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-list-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  color: #363e3a;
  flex: none;
}
.header-list-card b {
  display: block;
  font-size: 9px;
}
.header-list-card > div:not(.header-list-icon) > span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}
.header-list-right {
  margin-left: auto;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
  margin-bottom: 8px;
}
.header-meta-row:last-child {
  margin-bottom: 0;
}
.header-meta-row span {
  color: var(--c-g500);
}
.header-meta-row b {
  text-align: right;
}

.header-session-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
}
.header-session-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #edf4ff;
  color: #316bc7;
  display: grid;
  place-items: center;
}
.header-session-card b {
  font-size: 9px;
}
.header-session-card > div:not(.header-session-icon) > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.header-session-side {
  text-align: right;
  display: grid;
  gap: 6px;
  justify-items: end;
}

.header-role-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
}
.header-role-card.active {
  border-color: var(--c-green);
  background: var(--c-g50);
}
.header-role-card h4 {
  font-size: 12px;
  margin: 0 0 4px;
}
.header-role-card p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
}

.header-country-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.header-country-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  background: #fff;
  text-align: left;
}
.header-country-card.active {
  border-color: var(--c-green);
  background: var(--c-g50);
}
.header-country-card b {
  font-size: 10px;
}
.header-country-card span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 3px;
}

.header-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 9px;
  color: #4d5752;
}

@media (max-width: 800px) {
  .header-profile-copy {
    display: none;
  }
  .header-popover-notifications,
  .header-popover-help,
  .header-popover-profile {
    width: min(340px, calc(100vw - 20px));
  }
}

@media (max-width: 700px) {
  .header-form-grid,
  .header-section-grid,
  .header-help-category-grid,
  .header-request-type-grid,
  .header-country-grid,
  .header-context-grid,
  .header-problem-context {
    grid-template-columns: 1fr;
  }
  .header-field--full {
    grid-column: auto;
  }
  .header-quick-guide-layout {
    grid-template-columns: 1fr;
  }
  .header-entity {
    grid-template-columns: 34px 1fr;
  }
  .header-center-item {
    grid-template-columns: 36px 1fr;
  }
}
/* Adaptado de carry_backoffice_dashboard_v3_compact_kpis.html — clases prefijadas con `dashboard-` para no chocar con otros módulos. */

.dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.dashboard-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-dark);
  font-weight: 850;
}
.dashboard-head h1 {
  font-size: 28px;
  margin: 4px 0 5px;
}
.dashboard-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.5;
  max-width: 560px;
}
.dashboard-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-controlbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dashboard-compare-select {
  min-width: 260px;
  font-weight: 800;
}
.dashboard-compare-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #b9f1d2;
  border-radius: 10px;
  background: #f0fff7;
  font-size: 9px;
  color: var(--c-green-dark);
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19c96d;
  box-shadow: 0 0 0 0 rgba(25, 201, 109, 0.35);
  animation: dashboard-pulse 1.7s infinite;
  flex: none;
}
@keyframes dashboard-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 201, 109, 0.35);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(25, 201, 109, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 201, 109, 0);
  }
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.dashboard-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 11px 12px;
  min-height: 98px;
  cursor: pointer;
  transition: 0.18s ease;
  overflow: hidden;
}
.dashboard-kpi:hover {
  border-color: var(--c-green);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.dashboard-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.dashboard-kpi-label {
  font-size: 8px;
  color: var(--c-g500);
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-kpi-icon {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.dashboard-kpi-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 8px;
  align-items: center;
}
.dashboard-kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.dashboard-kpi-value-row b {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-delta {
  font-size: 7px;
  font-weight: 750;
  white-space: nowrap;
}
.dashboard-delta.up {
  color: var(--c-green-dark);
}
.dashboard-delta.down {
  color: var(--c-danger);
}
.dashboard-kpi-meta {
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-sparkline {
  width: 70px;
  height: 30px;
  overflow: visible;
}
.dashboard-spark-current {
  fill: none;
  stroke: #19c96d;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-spark-compare {
  fill: none;
  stroke: var(--c-g300);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.5 2;
}

.dashboard-secondary-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.dashboard-secondary-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  cursor: pointer;
}
.dashboard-secondary-kpi small {
  font-size: 7px;
  color: var(--c-g500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dashboard-secondary-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
}
.dashboard-secondary-value b {
  font-size: 15px;
}
.dashboard-micro-chart {
  height: 28px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.dashboard-micro-chart i {
  display: block;
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: #b9f1d2;
}
.dashboard-micro-chart i:last-child {
  background: #19c96d;
}

.dashboard-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dashboard-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dashboard-card.carry-card {
  padding: 16px;
}

.dashboard-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard-section-head h2 {
  font-size: 14px;
  margin: 0 0 3px;
}
.dashboard-section-head p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
}
.dashboard-link-btn {
  border: 0;
  background: transparent;
  color: var(--c-green-dark);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 0;
  cursor: pointer;
  margin-left: auto;
}
.dashboard-legend-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.dashboard-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  color: var(--c-g500);
}
.dashboard-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.dashboard-legend-current {
  background: var(--c-green);
}
.dashboard-legend-compare {
  background: var(--c-g300);
}

.dashboard-chart {
  height: 260px;
  position: relative;
  padding: 12px 8px 24px 38px;
}
.dashboard-chart-sm {
  height: 170px;
  padding-top: 5px;
}
.dashboard-chart-md {
  height: 220px;
}
.dashboard-yaxis {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 24px;
  width: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 7px;
  color: var(--c-g400);
  text-align: right;
  padding-right: 5px;
}
.dashboard-gridlines {
  position: absolute;
  left: 38px;
  right: 8px;
  top: 12px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard-gridlines span {
  height: 1px;
  background: var(--c-g100);
}
.dashboard-groups {
  position: absolute;
  left: 38px;
  right: 8px;
  top: 12px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 7px;
}
.dashboard-group {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  position: relative;
  min-width: 24px;
}
.dashboard-bar {
  width: 34%;
  border-radius: 5px 5px 2px 2px;
  transition: height 0.25s ease;
}
.dashboard-bar-current {
  background: var(--c-green);
}
.dashboard-bar-compare {
  background: var(--c-g300);
}
.dashboard-xlab {
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: var(--c-g500);
  white-space: nowrap;
}

.dashboard-line-chart {
  height: 260px;
  position: relative;
  padding: 10px 8px 25px 38px;
}
.dashboard-line-chart-sm {
  height: 140px;
  margin-top: 8px;
  padding: 0;
}
.dashboard-line-chart svg {
  position: absolute;
  left: 38px;
  right: 8px;
  top: 10px;
  bottom: 25px;
  width: calc(100% - 46px);
  height: calc(100% - 35px);
  overflow: visible;
}
.dashboard-line-chart-sm svg {
  position: static;
  width: 100%;
  height: 100%;
}
.dashboard-line-grid {
  stroke: #eaefec;
  stroke-width: 0.5;
}
.dashboard-line-current {
  fill: none;
  stroke: #2eea83;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-line-compare {
  fill: none;
  stroke: #cdd4d0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 2;
}
.dashboard-line-axis {
  position: absolute;
  left: 38px;
  right: 8px;
  bottom: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: var(--c-g500);
}

.dashboard-entity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dashboard-entity-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}
.dashboard-vendor-icon {
  background: #f3eeff;
  color: #7c3aed;
}
.dashboard-courier-icon {
  background: #fff2ec;
  color: #c75e2e;
}
.dashboard-entity-head h3 {
  font-size: 14px;
  margin: 0 0 2px;
}
.dashboard-entity-head p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 0;
}
.dashboard-entity-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dashboard-mini-kpi {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
}
.dashboard-mini-kpi small {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
}
.dashboard-mini-kpi b {
  font-size: 12px;
  display: block;
  margin: 3px 0 1px;
}
.dashboard-mini-kpi span {
  font-size: 7px;
  color: var(--c-green-dark);
}

.dashboard-rank-list {
  display: grid;
  gap: 9px;
}
.dashboard-rank-row {
  display: grid;
  grid-template-columns: 24px 1fr 120px auto;
  gap: 8px;
  align-items: center;
}
.dashboard-rank-num {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 850;
}
.dashboard-rank-row b {
  display: block;
  font-size: 8px;
}
.dashboard-rank-row span {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 2px;
}
.dashboard-rank-bars {
  height: 8px;
  background: var(--c-g100);
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-rank-bars i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c-green);
}
.dashboard-rank-val {
  font-size: 8px;
  font-weight: 850;
  text-align: right;
}

.dashboard-funnel {
  display: grid;
  gap: 8px;
}
.dashboard-funnel-row {
  display: grid;
  grid-template-columns: 90px 1fr 44px;
  gap: 8px;
  align-items: center;
  font-size: 8px;
}
.dashboard-funnel-row span:first-child {
  font-weight: 800;
}
.dashboard-funnel-track {
  height: 11px;
  background: var(--c-g100);
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-funnel-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.dashboard-funnel-row b {
  text-align: right;
  font-size: 8px;
}

.dashboard-sla-list {
  display: grid;
  gap: 9px;
}
.dashboard-sla-row {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  gap: 8px;
  align-items: center;
  font-size: 8px;
}
.dashboard-sla-row span:first-child {
  font-weight: 800;
}
.dashboard-sla-track {
  height: 9px;
  background: var(--c-g100);
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-sla-track i {
  display: block;
  height: 100%;
  background: var(--c-green);
  border-radius: 999px;
}
.dashboard-sla-row b {
  text-align: right;
}

.dashboard-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.dashboard-finance-mini {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.dashboard-finance-mini small {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
}
.dashboard-finance-mini b {
  font-size: 10px;
  margin-top: 3px;
  display: block;
}

.dashboard-health-list {
  display: grid;
  gap: 9px;
}
.dashboard-health-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
}
.dashboard-health-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}
.dashboard-health-icon.ok {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.dashboard-health-icon.degraded {
  background: #fff7de;
  color: #8a5e00;
}
.dashboard-health-row b {
  display: block;
  font-size: 8px;
}
.dashboard-health-row span {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 2px;
}
.dashboard-health-state {
  margin-left: auto;
  font-size: 8px;
  font-weight: 850;
}
.dashboard-health-state.ok {
  color: var(--c-green-dark);
}
.dashboard-health-state.degraded {
  color: #8a5e00;
}

@media (max-width: 1400px) {
  .dashboard-kpis,
  .dashboard-secondary-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1250px) {
  .dashboard-grid-2,
  .dashboard-grid-3 {
    grid-template-columns: 1fr;
  }
  .dashboard-entity-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .dashboard-kpis,
  .dashboard-secondary-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .dashboard-kpis,
  .dashboard-secondary-kpis {
    grid-template-columns: 1fr;
  }
  .dashboard-finance-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-rank-row {
    grid-template-columns: 24px 1fr;
    grid-template-areas: "num name" ". bars" ". val";
  }
}
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{position:absolute;left:0;top:0}.mapboxgl-map:-webkit-full-screen{width:100%;height:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}.mapboxgl-ctrl-top-left{top:0;left:0}.mapboxgl-ctrl-top{top:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{top:0;right:0}.mapboxgl-ctrl-right{top:50%;transform:translateY(-50%);right:0}.mapboxgl-ctrl-bottom-right{right:0;bottom:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{top:50%;transform:translateY(-50%);left:0}.mapboxgl-ctrl{clear:both;pointer-events:auto}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left}.mapboxgl-ctrl-top .mapboxgl-ctrl{margin:10px 0;float:left}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{margin:10px 0;float:left}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left}.mapboxgl-ctrl-group{border-radius:4px;background:#fff}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{width:32px;height:32px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:initial;cursor:pointer;overflow:hidden}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#eee}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3h1zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16h1zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205H13zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1V7.5z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1h-5.5zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1v-5.5zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1v5.5zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1h5.5z%22%2F%3E%3C%2Fsvg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3h1zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16h1zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205H13zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1V7.5z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1h-5.5zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1v-5.5zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1v5.5zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1h5.5z%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3h1zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16h1zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205H13zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1V7.5z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1h-5.5zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1v-5.5zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1v5.5zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1h5.5z%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23999%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-up .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.29289%2011.7071C4.68342%2012.0976%205.31658%2012.0976%205.70711%2011.7071L9%208.41421L12.2929%2011.7071C12.6834%2012.0976%2013.3166%2012.0976%2013.7071%2011.7071C14.0976%2011.3166%2014.0976%2010.6834%2013.7071%2010.2929L9.70711%206.29289C9.31658%205.90237%208.68342%205.90237%208.29289%206.29289L4.29289%2010.2929C3.90237%2010.6834%203.90237%2011.3166%204.29289%2011.7071Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-down .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.29289%206.29289C4.68342%205.90237%205.31658%205.90237%205.70711%206.29289L9%209.58579L12.2929%206.29289C12.6834%205.90237%2013.3166%205.90237%2013.7071%206.29289C14.0976%206.68342%2014.0976%207.31658%2013.7071%207.70711L9.70711%2011.7071C9.31658%2012.0976%208.68342%2012.0976%208.29289%2011.7071L4.29289%207.70711C3.90237%207.31658%203.90237%206.68342%204.29289%206.29289Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M4.0017%203.0017L4.0017%2015.0017L10.0017%2015.0017V12.0017H12.0017V15.0017H14.0017L14.0017%203.0017C14.0097%202.86829%2013.9894%202.73469%2013.9419%202.60973C13.8945%202.48477%2013.8211%202.37129%2013.7266%202.27678C13.6321%202.18228%2013.5186%202.10889%2013.3937%202.06147C13.2687%202.01405%2013.1351%201.99368%2013.0017%202.0017L5.0017%202.0017C4.86829%201.99368%204.73469%202.01405%204.60973%202.06147C4.48477%202.10889%204.37129%202.18228%204.27678%202.27678C4.18228%202.37129%204.10889%202.48477%204.06147%202.60973C4.01405%202.73469%203.99368%202.86829%204.0017%203.0017ZM8.0017%2014.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017%2010.0017H6.0017L6.0017%208.0017H8.0017V10.0017ZM8.0017%206.0017L6.0017%206.0017V4.0017H8.0017V6.0017ZM12.0017%2010.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017%206.0017H10.0017V4.0017L12.0017%204.0017V6.0017Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");background-size:18px 18px}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M4.0017%203.0017L4.0017%2015.0017L10.0017%2015.0017V12.0017H12.0017V15.0017H14.0017L14.0017%203.0017C14.0097%202.86829%2013.9894%202.73469%2013.9419%202.60973C13.8945%202.48477%2013.8211%202.37129%2013.7266%202.27678C13.6321%202.18228%2013.5186%202.10889%2013.3937%202.06147C13.2687%202.01405%2013.1351%201.99368%2013.0017%202.0017L5.0017%202.0017C4.86829%201.99368%204.73469%202.01405%204.60973%202.06147C4.48477%202.10889%204.37129%202.18228%204.27678%202.27678C4.18228%202.37129%204.10889%202.48477%204.06147%202.60973C4.01405%202.73469%203.99368%202.86829%204.0017%203.0017ZM8.0017%2014.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017%2010.0017H6.0017L6.0017%208.0017H8.0017V10.0017ZM8.0017%206.0017L6.0017%206.0017V4.0017H8.0017V6.0017ZM12.0017%2010.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017%206.0017H10.0017V4.0017L12.0017%204.0017V6.0017Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M4.0017%203.0017L4.0017%2015.0017L10.0017%2015.0017V12.0017H12.0017V15.0017H14.0017L14.0017%203.0017C14.0097%202.86829%2013.9894%202.73469%2013.9419%202.60973C13.8945%202.48477%2013.8211%202.37129%2013.7266%202.27678C13.6321%202.18228%2013.5186%202.10889%2013.3937%202.06147C13.2687%202.01405%2013.1351%201.99368%2013.0017%202.0017L5.0017%202.0017C4.86829%201.99368%204.73469%202.01405%204.60973%202.06147C4.48477%202.10889%204.37129%202.18228%204.27678%202.27678C4.18228%202.37129%204.10889%202.48477%204.06147%202.60973C4.01405%202.73469%203.99368%202.86829%204.0017%203.0017ZM8.0017%2014.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017%2010.0017H6.0017L6.0017%208.0017H8.0017V10.0017ZM8.0017%206.0017L6.0017%206.0017V4.0017H8.0017V6.0017ZM12.0017%2010.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017%206.0017H10.0017V4.0017L12.0017%204.0017V6.0017Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23aaa%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e58978%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e54e33%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23999%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e58978%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e54e33%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%220.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%220.9%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%221%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%221%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%221%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20fill%3D%22%23fff%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%221%22%20fill%3D%22%23000%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:#ffffff80;margin:0}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;border-radius:12px;box-sizing:initial}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left)>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");background-color:#ffffff80;width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:none;top:0;right:0;border:0}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left) .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;right:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;left:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;font-size:10px;border-color:#333;border-style:none solid solid;border-width:medium 2px 2px;padding:0 5px;color:#333;box-sizing:border-box;white-space:nowrap}.mapboxgl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{width:0;height:0;border:10px solid #0000;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:initial}.mapboxgl-popup-close-button:hover{background-color:#eee}.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{position:absolute;top:0;left:0;will-change:transform;opacity:1;transition:opacity .2s}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;width:15px;height:15px;border-radius:50%}.mapboxgl-user-location-dot:before{content:"";position:absolute;animation:mapboxgl-user-location-dot-pulse 2s infinite}.mapboxgl-user-location-dot:after{border-radius:50%;border:2px solid #fff;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;box-shadow:0 0 3px #00000059}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{width:0;height:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{content:"";border-bottom:7.5px solid #4aa1eb;position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}to{transform:scale(1);opacity:0}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;width:1px;height:1px;border-radius:100%}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;justify-content:center;text-align:center;position:absolute;display:flex;align-items:center;top:0;left:0;width:100%;height:100%;background:#000000b3;opacity:0;pointer-events:none;transition:opacity .75s ease-in-out;transition-delay:1s}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{font-weight:600;font-size:14px;text-align:center}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#bccbd7;color:#000}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#ccc}/*
 * Estilos del módulo Pedidos (ver conceptualización en
 * carry_backoffice_orders_v7_chat_intervention.html). Reutiliza los tokens
 * reales de carry-design-system (--c-*) en vez de los hex del prototipo;
 * solo resuelve composición de layout que el design system deja a criterio
 * de cada app — mismo criterio que styles.css y systemAlerts.css.
 */

.orders-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.orders-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-dark);
  font-weight: 850;
}
.orders-head h1 {
  font-size: 28px;
  margin: 4px 0 5px;
}
.orders-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.5;
  max-width: 620px;
}
.orders-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orders-subtext {
  display: block;
  font-size: 11px;
  color: var(--c-g500);
  margin-top: 2px;
}
.orders-cell-strong {
  font-weight: 850;
}

/* KPIs */
.orders-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1250px) {
  .orders-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .orders-kpis {
    grid-template-columns: 1fr;
  }
}

/* Tabs */
.orders-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin-bottom: 14px;
}
.orders-tab {
  height: 36px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 750;
  color: var(--c-g500);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.orders-tab--active {
  background: var(--c-mint);
  border-color: var(--c-g200);
  color: var(--c-green-dark);
}
.orders-tab-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-g100);
  font-size: 9px;
}
.orders-tab--active .orders-tab-count {
  background: #fff;
  color: var(--c-green-dark);
}

/* Filters */
.orders-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.orders-filter-search {
  min-width: 250px;
  flex: 1;
  max-width: 360px;
}
.orders-filter-count {
  font-size: 10px;
  color: var(--c-g500);
  margin-left: auto;
}

/* Table cells */
.orders-customer-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.orders-payment-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.orders-row-actions {
  display: flex;
  gap: 5px;
}
.orders-sla-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.orders-sla-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.orders-sla-dot--success {
  background: var(--c-success);
}
.orders-sla-dot--warning {
  background: var(--c-warning);
}
.orders-sla-dot--danger {
  background: var(--c-danger);
}

/* Drawer overlay */
.orders-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.42);
  z-index: 70;
  display: none;
}
.orders-drawer-overlay--open {
  display: block;
}
/*
 * Selector `.orders-drawer-overlay .orders-drawer` (en vez de `.orders-drawer`
 * a secas) a propósito: el paquete trae su propia regla responsive
 * `.carry-drawer { width: min(520px, 92vw) }` en un breakpoint angosto, con
 * la MISMA especificidad que una clase sola — cuál de las dos "gana" termina
 * dependiendo del orden de inyección de los <style> de Vite en dev (no del
 * orden de los imports en el código), así que el ancho de acá podía quedar
 * pisado de forma no determinística. Un selector descendiente sube la
 * especificidad y hace que esta regla gane siempre, sin depender de eso.
 */
.orders-drawer-overlay .orders-drawer {
  /* `position: absolute` (no solo `relative`) es a propósito: además de
     anclar el panel a la derecha del overlay fijo, ya establece el bloque
     contenedor que necesita `.orders-chat-panel` (position: absolute) más
     abajo — no declarar `position` de nuevo en la sección de chat, o se
     pisa este valor y el panel deja de anclarse a la derecha. */
  position: absolute;
  right: 0;
  top: 0;
  /* 900px original + 50% (pedido explícito del usuario). */
  width: min(1350px, 98vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.orders-drawer-head {
  height: 64px;
  flex: none;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.orders-drawer-head h3 {
  font-size: 16px;
  margin: 0;
}
.orders-grow {
  flex: 1;
}
.orders-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.orders-msg-btn {
  position: relative;
  display: inline-flex;
}
.orders-msg-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-danger);
  color: #fff;
  font-size: 8px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
}
.orders-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
}
.orders-drawer-foot {
  flex: none;
  padding: 14px 18px;
  border-top: 1px solid var(--c-g200);
  background: var(--c-g50);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Detail grid + cards */
.orders-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}
.orders-detail-card {
  align-self: start;
}
.orders-detail-card h4 {
  font-size: 12px;
  margin: 0 0 10px;
}
.orders-detail-card--wide {
  grid-column: 1 / -1;
}
@media (max-width: 980px) {
  .orders-detail-grid {
    grid-template-columns: 1fr;
  }
}

.orders-meta-list {
  display: grid;
  gap: 9px;
}
.orders-meta-list--top {
  margin-top: 12px;
}
.orders-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.orders-meta-row span {
  color: var(--c-g500);
}
.orders-meta-row b {
  text-align: right;
}
.orders-card-action {
  margin-top: 12px;
}

/* Route card */
.orders-route-stops {
  display: grid;
  gap: 11px;
  margin-bottom: 12px;
}
.orders-route-stop {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
}
.orders-stop-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}
.orders-stop-icon--a {
  background: var(--c-green-dark);
}
.orders-stop-icon--b {
  background: var(--c-info);
}

/* Map card */
.orders-mapbox-canvas {
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-g200);
}
.orders-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  color: var(--c-g500);
}
.orders-map-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.orders-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.orders-map-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.orders-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.orders-map-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.orders-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--c-g500);
  padding: 6px 8px;
  border: 1px solid var(--c-g200);
  border-radius: 999px;
}
.orders-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.orders-legend-dot--pickup {
  background: var(--c-green-dark);
}
.orders-legend-dot--dropoff {
  background: var(--c-danger);
}
.orders-legend-dot--courier {
  background: var(--c-green);
}
.orders-route-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 12px;
}
.orders-route-stat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.orders-route-stat small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.orders-route-stat b {
  font-size: 11px;
}
@media (max-width: 980px) {
  .orders-route-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Package card */
.orders-package-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
}
.orders-package-photo {
  width: 120px;
  height: 100px;
  border-radius: 12px;
  border: 1px solid var(--c-g200);
  background: linear-gradient(180deg, var(--c-g100), var(--c-g200));
  display: grid;
  place-items: center;
  color: var(--c-g500);
}
.orders-package-info b {
  display: block;
  font-size: 12px;
}
.orders-package-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.orders-package-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.orders-metric-box {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: var(--c-g50);
}
.orders-metric-box small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.orders-metric-box b {
  font-size: 11px;
}
@media (max-width: 980px) {
  .orders-package-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* Profile / vehicle */
.orders-profile-block {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
}
.orders-profile-photo,
.orders-vehicle-photo {
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--c-g100), var(--c-g200));
  border: 1px solid var(--c-g200);
  display: grid;
  place-items: center;
  color: var(--c-g500);
}
.orders-profile-photo {
  width: 60px;
}
.orders-profile-name {
  font-size: 12px;
}
.orders-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.orders-stars {
  color: var(--c-warning);
  font-size: 11px;
}
.orders-vehicle-layout {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
}
.orders-vehicle-photo {
  width: 90px;
  height: 70px;
}
@media (max-width: 560px) {
  .orders-vehicle-layout,
  .orders-profile-block,
  .orders-package-layout {
    grid-template-columns: 1fr;
  }
}

/* Price */
.orders-price-breakdown,
.orders-price-summary {
  display: grid;
  gap: 7px;
}
.orders-price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.orders-price-row--total {
  font-weight: 850;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--c-g200);
}
.orders-payment-status {
  color: var(--c-success);
}

/* Chat panel (usa `.orders-drawer { position: absolute }` de más arriba como contenedor) */
.orders-chat-panel {
  position: absolute;
  top: 64px;
  right: 0;
  bottom: 0;
  /* 380px original + 20% + 10% (pedidos explícitos del usuario, aplicados en pasos). */
  width: min(502px, 100%);
  background: #fff;
  border-left: 1px solid var(--c-g200);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  z-index: 5;
}
.orders-chat-panel--open {
  transform: translateX(0);
}
.orders-chat-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.orders-chat-head h4 {
  margin: 0 0 2px;
  font-size: 13px;
}
.orders-chat-head p {
  margin: 0;
  font-size: 10px;
  color: var(--c-g500);
  line-height: 1.45;
}
.orders-chat-body {
  flex: 1;
  overflow: auto;
  padding: 14px;
  background: var(--c-g50);
}
.orders-chat-empty {
  text-align: center;
  margin-top: 20px;
}
.orders-chat-day {
  margin: 0 auto 12px;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--c-g100);
  color: var(--c-g500);
  font-size: 9px;
  font-weight: 800;
}
.orders-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  max-width: 92%;
}
.orders-msg--right {
  margin-left: auto;
  flex-direction: row-reverse;
}
.orders-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 850;
  flex: none;
}
.orders-msg--client .orders-msg-avatar {
  background: #eaf2ff;
  color: #316bc7;
}
.orders-msg--driver .orders-msg-avatar {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.orders-msg--agent .orders-msg-avatar {
  background: #f3eeff;
  color: #6d28d9;
}
.orders-bubble {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  padding: 10px 11px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.orders-msg--right .orders-bubble {
  background: #f6f1ff;
  border-color: #e4d8ff;
}
.orders-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.orders-msg-meta b {
  font-size: 10px;
}
.orders-msg-meta span {
  font-size: 9px;
  color: var(--c-g500);
}
.orders-msg-meta--footer {
  margin-top: 7px;
  margin-bottom: 0;
}
.orders-bubble p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text);
}
.orders-chat-tools {
  padding: 12px 16px;
  border-top: 1px solid var(--c-g200);
  background: #fff;
  display: grid;
  gap: 10px;
}
.orders-chat-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.orders-chat-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Sin wrap, el <select> (que no trunca con ellipsis, solo recorta el
     texto) se dejaba comprimir por flexbox por debajo de lo que necesita
     "Enviar a cliente y driver" cuando `.orders-chat-chip-row` ya ocupa
     espacio — con wrap, si no entran ambos en la fila el select baja a la
     suya propia a ancho completo en vez de recortarse. */
  flex-wrap: wrap;
}
.orders-chat-audience {
  /* Sin `height` propio: el padding vertical de `.carry-select` (10px arriba
     y abajo) está pensado para su alto por defecto (~40px); forzar un alto
     menor acá (como hacía esta regla antes, 34px) no reduce ese padding y
     termina recortando visualmente el texto de la opción seleccionada. */
  min-width: 190px;
  flex: 1 1 auto;
}
.orders-chat-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.orders-intervention-note {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 980px) {
  .orders-chat-panel {
    width: 100%;
    border-left: 0;
  }
}

/* Actions modal */
.orders-action-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.orders-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.orders-callout {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.5;
  margin-top: 12px;
}
.orders-callout--info {
  background: #edf4ff;
  border: 1px solid #c7daff;
  color: #2e61b8;
}

/* New order wizard */
.orders-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.orders-step {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 12px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.orders-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-g100);
  font-size: 10px;
  font-weight: 850;
  flex: none;
}
.orders-step b {
  display: block;
  font-size: 10px;
}
.orders-step span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.orders-step--active {
  border-color: var(--c-green);
  box-shadow: 0 0 0 2px rgba(46, 234, 131, 0.15);
}
.orders-step--active .orders-step-num {
  background: var(--c-green);
}
.orders-step--done .orders-step-num {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
@media (max-width: 1120px) {
  .orders-stepper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .orders-stepper {
    grid-template-columns: 1fr 1fr;
  }
}

.orders-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}
@media (max-width: 1120px) {
  .orders-create-layout {
    grid-template-columns: 1fr;
  }
  .orders-sticky {
    position: static;
  }
}
.orders-sticky {
  position: sticky;
  top: 84px;
}

.orders-h2-sm {
  font-size: 14px;
}
.orders-segment {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--c-g200);
  background: var(--c-g50);
  border-radius: 10px;
  gap: 4px;
}
.orders-seg {
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g500);
  cursor: pointer;
}
.orders-seg--active {
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.orders-search-customer {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.orders-search-customer > :first-child {
  flex: 1;
}
.orders-btn-outline {
  height: 42px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  color: var(--c-text);
  white-space: nowrap;
  cursor: pointer;
}
.orders-customer-results {
  display: grid;
  gap: 8px;
}
.orders-customer-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.orders-customer-card--selected {
  border-color: var(--c-green);
  background: var(--c-mint);
}
.orders-cavatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-g100);
  font-size: 11px;
  font-weight: 850;
  flex: none;
}
.orders-customer-card b {
  display: block;
  font-size: 11px;
}
.orders-customer-card span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.orders-select-mark {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--c-g300);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  font-size: 12px;
}
.orders-customer-card--selected .orders-select-mark {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-text);
}

.orders-default-customer {
  border: 1px solid var(--c-g200);
  background: linear-gradient(135deg, var(--c-g50), #fff);
  border-radius: 13px;
  padding: 14px;
}
.orders-default-customer-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.orders-default-customer-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.orders-default-customer h3 {
  font-size: 11px;
  margin: 0 0 4px;
}
.orders-default-customer p {
  font-size: 10px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 10px 0 0;
}

.orders-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.orders-field-full {
  grid-column: 1 / -1;
}
.orders-field-label {
  font-size: 10px;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}
.orders-divider {
  height: 1px;
  background: var(--c-g100);
  margin: 16px 0;
}
@media (max-width: 820px) {
  .orders-form-grid {
    grid-template-columns: 1fr;
  }
}

.orders-route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.orders-route-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
}
.orders-point {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.orders-point-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  flex: none;
}
.orders-point-badge--a {
  background: var(--c-green-dark);
}
.orders-point-badge--b {
  background: var(--c-info);
}
.orders-helper {
  font-size: 9px;
  color: var(--c-g500);
}
@media (max-width: 820px) {
  .orders-route-grid {
    grid-template-columns: 1fr;
  }
}

.orders-fake-map {
  height: 220px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  background: linear-gradient(180deg, #fcfefd, var(--c-g50));
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}
.orders-fake-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orders-map-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
}
.orders-map-marker--a {
  left: 15%;
  top: 23%;
}
.orders-map-marker--b {
  right: 12%;
  bottom: 22%;
}
.orders-map-chip {
  background: #fff;
  border: 1px solid var(--c-g200);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}
.orders-stat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
}
.orders-stat small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.orders-stat b {
  font-size: 11px;
}
.orders-stat-ok {
  color: var(--c-green-dark);
}

.orders-package-box {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
}
.orders-package-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.orders-package-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.orders-package-head h3 {
  font-size: 11px;
  margin: 0;
}
.orders-package-head span {
  font-size: 9px;
  color: var(--c-g500);
}
.orders-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.orders-metric {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
}
.orders-metric small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.orders-metric b {
  font-size: 11px;
}
@media (max-width: 820px) {
  .orders-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

.orders-quote-box {
  background: var(--c-g50);
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
  margin-top: 14px;
}

.orders-summary-card {
  display: grid;
  gap: 11px;
}
.orders-summary-head {
  margin-bottom: 2px;
}
.orders-summary-block {
  padding-top: 10px;
  border-top: 1px solid var(--c-g100);
}
.orders-summary-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.orders-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
}
.orders-summary-line span {
  color: var(--c-g500);
}
.orders-summary-line b {
  text-align: right;
}
.orders-summary-total {
  font-size: 14px;
}

.orders-action-bar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.orders-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.orders-review-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
}
.orders-review-card h3 {
  font-size: 11px;
  margin: 0 0 10px;
}
.orders-review-list {
  display: grid;
  gap: 8px;
}
.orders-review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
}
.orders-review-row span {
  color: var(--c-g500);
}
.orders-review-row b {
  text-align: right;
}
@media (max-width: 820px) {
  .orders-review-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PEDIDOS V9 · detalle del pedido por tabs (12 páginas)
   Adaptado de carry_backoffice_orders_v9_tabbed_detail.html.
   Los colores usan los tokens reales de carry-design-system, no los hex
   del prototipo, mismo criterio que el resto de este archivo.
   ========================================================== */
.orders-detail-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--c-g200);
}
.orders-detail-tab {
  height: 32px;
  flex: none;
  border: 1px solid var(--c-g200);
  background: #fff;
  color: #4d5752;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.orders-detail-tab:hover {
  background: var(--c-g50);
  border-color: var(--c-g300);
}
.orders-detail-tab.active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.orders-tab-badge {
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 5px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
}

.orders-tab-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.orders-tab-heading h3 {
  font-size: 14px;
  margin: 0 0 3px;
}
.orders-tab-heading p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.45;
}

.orders-overview-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.orders-overview-item {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
  background: #fff;
}
.orders-overview-item small {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.orders-overview-item b {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
.orders-risk-inline {
  color: var(--c-green-dark);
}

.orders-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.orders-summary-card {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.orders-summary-card small {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
}
.orders-summary-card b {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.orders-service-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  background: var(--c-mint);
  color: var(--c-green-dark);
  flex: none;
}

/* Ruta: plan de paradas */
.orders-stop-plan {
  display: grid;
  gap: 8px;
}
.orders-route-stop-card {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: start;
}
.orders-stop-seq {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
}
.orders-stop-seq--success {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.orders-stop-seq--info {
  background: #edf4ff;
  color: #316bc7;
}
.orders-route-stop-card h5 {
  font-size: 10px;
  margin: 0 0 3px;
}
.orders-route-stop-card p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.4;
}
.orders-stop-side {
  text-align: right;
  font-size: 8px;
  color: var(--c-g500);
  display: grid;
  gap: 4px;
  justify-items: end;
}

/* Paquetes: lista v8 */
.orders-package-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.orders-package-row {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
}
.orders-package-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.orders-package-row > div:not(.orders-package-row-icon) b {
  font-size: 10px;
  display: block;
}
.orders-package-row > div:not(.orders-package-row-icon) > span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.orders-package-row-metrics {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.orders-package-metric {
  font-size: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--c-g100);
  color: #4d5752;
}

/* Entrega: historial de asignaciones */
.orders-assignment-history {
  display: grid;
  gap: 0;
  margin-top: 8px;
}
.orders-assign-event {
  display: grid;
  grid-template-columns: 72px 28px 1fr;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-g100);
}
.orders-assign-event:last-child {
  border-bottom: 0;
}
.orders-assign-event time {
  font-size: 8px;
  color: var(--c-g500);
}
.orders-assign-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.orders-assign-event b {
  font-size: 9px;
  display: block;
}
.orders-assign-event > div > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Participantes */
.orders-participant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.orders-participant-card {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.orders-participant-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.orders-participant-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  flex: none;
}
.orders-participant-head b {
  font-size: 9px;
  display: block;
}
.orders-participant-head span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.orders-participant-card > b {
  font-size: 9px;
  display: block;
}
.orders-participant-card > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.orders-schedule-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c7daff;
  background: #f5f9ff;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}
.orders-schedule-banner > div {
  flex: 1;
}
.orders-schedule-banner b {
  font-size: 9px;
  display: block;
}
.orders-schedule-banner span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Finanzas: movimientos */
.orders-finance-events {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}
.orders-finance-event {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  align-items: center;
}
.orders-finance-event-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.orders-finance-event b {
  font-size: 9px;
  display: block;
}
.orders-finance-event > div:not(.orders-finance-event-icon) > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.orders-finance-amount {
  text-align: right;
  font-size: 10px;
  font-weight: 850;
}

/* Evidencias */
.orders-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.orders-evidence-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
}
.orders-evidence-preview {
  height: 84px;
  border-radius: 9px;
  background: linear-gradient(180deg, #eef3f0, #dde6e1);
  display: grid;
  place-items: center;
  color: #4d5752;
  margin-bottom: 8px;
}
.orders-evidence-card > b {
  font-size: 9px;
  display: block;
}
.orders-evidence-card > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Conversaciones: preview */
.orders-conversation-preview {
  display: grid;
  gap: 8px;
}
.orders-conversation-line {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.orders-conversation-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 900;
  flex: none;
}
.orders-conversation-line b {
  display: block;
  font-size: 9px;
}
.orders-conversation-line p {
  font-size: 9px;
  color: #4d5752;
  margin: 3px 0 0;
  line-height: 1.45;
}
.orders-conversation-line time {
  margin-left: auto;
  font-size: 8px;
  color: var(--c-g500);
  white-space: nowrap;
}

/* Resolución */
.orders-resolution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.orders-resolution-action {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 10px;
  padding: 9px;
  text-align: left;
  cursor: pointer;
}
.orders-resolution-action:hover {
  border-color: var(--c-green);
  background: var(--c-g50);
}
.orders-resolution-action b {
  font-size: 8px;
  display: block;
  margin-top: 5px;
}
.orders-resolution-action span {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.orders-full-width {
  width: 100%;
  margin: 10px 0;
}

/* Notificaciones */
.orders-notification-log {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}
.orders-notification-log-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--c-g100);
  padding: 7px 0;
}
.orders-notification-log-row:last-child {
  border-bottom: 0;
}
.orders-notification-log-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.orders-notification-log-row b {
  font-size: 9px;
  display: block;
}
.orders-notification-log-row > div:not(.orders-notification-log-icon) > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Reclamos y riesgo */
.orders-claim-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
  margin-top: 9px;
}
.orders-claim-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff7de;
  color: #8a5e00;
  display: grid;
  place-items: center;
  flex: none;
}
.orders-claim-card b {
  font-size: 9px;
  display: block;
}
.orders-claim-card > div:not(.orders-claim-icon):not(.orders-claim-actions) > span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.orders-claim-actions {
  margin-left: auto;
  display: flex;
  gap: 5px;
}
.orders-risk-box {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: center;
}
.orders-risk-score {
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-g50);
  border-radius: 12px;
  padding: 13px;
  text-align: center;
}
.orders-risk-score small {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
}
.orders-risk-score b {
  font-size: 22px;
  color: var(--c-green-dark);
  display: block;
  margin: 4px 0;
}
.orders-risk-flags {
  display: grid;
  gap: 6px;
}
.orders-risk-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  color: #4d5752;
}

/* Auditoría: referencias técnicas */
.orders-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.orders-tech-fact {
  border: 1px solid var(--c-g100);
  background: var(--c-g50);
  border-radius: 9px;
  padding: 8px;
}
.orders-tech-fact small {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
}
.orders-tech-fact b {
  font-size: 8px;
  display: block;
  margin-top: 3px;
  word-break: break-word;
}

@media (max-width: 1050px) {
  .orders-overview-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .orders-participant-grid,
  .orders-evidence-grid,
  .orders-tech-grid {
    grid-template-columns: 1fr 1fr;
  }
  .orders-resolution-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .orders-overview-strip,
  .orders-summary-grid,
  .orders-participant-grid,
  .orders-evidence-grid,
  .orders-tech-grid,
  .orders-resolution-grid {
    grid-template-columns: 1fr;
  }
  .orders-route-stop-card {
    grid-template-columns: 28px 1fr;
  }
  .orders-stop-side {
    grid-column: 2;
    text-align: left;
    justify-items: start;
  }
  .orders-risk-box {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Modales v8/v9: acciones del pedido, resolución, evidencia,
   reembolso, ajuste, reclamo, edición controlada.
   ========================================================== */
.orders-modal-lg .carry-modal {
  width: min(760px, 96vw);
}
.orders-modal-xl .carry-modal {
  width: min(980px, 96vw);
}
.orders-modal-lg .carry-modal-body,
.orders-modal-xl .carry-modal-body {
  max-height: 72vh;
  overflow: auto;
}
.orders-modal-desc {
  font-size: 10px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0 0 12px;
}
.orders-modal-section {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  margin-top: 10px;
}
.orders-modal-section h4 {
  font-size: 9px;
  margin: 0 0 8px;
}
.orders-mt-10 {
  margin-top: 10px;
}
.orders-mt-12 {
  margin-top: 12px;
}
.orders-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.orders-switch-row > div {
  flex: 1;
}
.orders-switch-row b {
  display: block;
  font-size: 9px;
}
.orders-switch-row span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}

.orders-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.orders-choice {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 10px;
  padding: 9px;
  text-align: left;
  cursor: pointer;
}
.orders-choice.active {
  border-color: var(--c-green);
  background: var(--c-g50);
}
.orders-choice b {
  font-size: 8px;
  display: block;
}
.orders-choice span {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

.orders-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.orders-impact-card {
  border: 1px solid var(--c-g200);
  border-radius: 9px;
  padding: 8px;
}
.orders-impact-card small {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
}
.orders-impact-card b {
  font-size: 9px;
  display: block;
  margin-top: 3px;
}

.orders-refund-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-g100);
  font-size: 8px;
}
.orders-refund-line:last-child {
  border-bottom: 0;
}
.orders-refund-line span {
  color: var(--c-g500);
}

.orders-evidence-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.orders-evidence-upload {
  height: 100px;
  border: 1px dashed var(--c-g300);
  border-radius: 10px;
  background: var(--c-g50);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--c-g500);
  font-size: 7px;
  padding: 8px;
  gap: 6px;
  cursor: pointer;
}

.orders-claim-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.orders-table-wrap {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  overflow: auto;
}
.orders-edit-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}
.orders-edit-matrix th,
.orders-edit-matrix td {
  padding: 7px 8px;
  font-size: 7px;
  border-bottom: 1px solid var(--c-g100);
  text-align: left;
}
.orders-edit-matrix th {
  background: var(--c-g50);
  color: var(--c-g500);
}
.orders-cell-allowed {
  color: var(--c-green-dark);
  font-weight: 850;
}
.orders-cell-limited {
  color: #8a5e00;
  font-weight: 850;
}
.orders-cell-blocked {
  color: var(--c-danger);
  font-weight: 850;
}

@media (max-width: 700px) {
  .orders-choice-grid,
  .orders-impact-grid,
  .orders-evidence-upload-grid,
  .orders-claim-type-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PEDIDOS V9 · wizard "Nuevo pedido" — tipo de servicio, programación,
   paradas múltiples, paquetes múltiples y contactos frecuentes.
   Adaptado de carry_backoffice_orders_v9_tabbed_detail.html.
   ========================================================== */
.orders-service-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.orders-service-card {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 12px;
  padding: 13px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 6px;
}
.orders-service-card > b {
  font-size: 11px;
}
.orders-service-card > span {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.4;
}
.orders-service-card--active {
  border-color: var(--c-green);
  box-shadow: 0 0 0 2px rgba(46, 234, 131, 0.12);
}
.orders-svc-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
@media (max-width: 820px) {
  .orders-service-selector {
    grid-template-columns: 1fr;
  }
}

.orders-schedule-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  margin-top: 14px;
}
.orders-schedule-mode > div:first-child b {
  display: block;
  font-size: 11px;
}
.orders-schedule-mode > div:first-child span {
  font-size: 9px;
  color: var(--c-g500);
}

.orders-stop-manager {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.orders-stop-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.orders-stop-manager-head h3 {
  font-size: 11px;
  margin: 0;
}
.orders-wizard-stop-list {
  display: grid;
  gap: 8px;
}
.orders-wizard-stop {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--c-g100);
  border-radius: 10px;
  padding: 9px;
  background: var(--c-g50);
}
.orders-ws-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  flex: none;
}
.orders-wizard-stop > div:nth-child(2) > b {
  display: block;
  font-size: 10px;
}
.orders-wizard-stop > div:nth-child(2) > span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}

.orders-frequent-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.orders-contact-chip {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.orders-contact-chip:hover {
  border-color: var(--c-green);
}

.orders-package-create-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.orders-creation-risk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 820px) {
  .orders-creation-risk {
    grid-template-columns: 1fr;
  }
}

.orders-review-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
/*
 * Estilos del módulo Entregas (ver conceptualización en
 * carry_backoffice_deliveries_v2_realtime_monitoring.html). Reutiliza los
 * tokens reales de carry-design-system (--c-*) en vez de los hex del
 * prototipo — mismo criterio que orders.css/systemAlerts.css.
 */

.deliveries-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.deliveries-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-dark);
  font-weight: 850;
}
.deliveries-head h1 {
  font-size: 28px;
  margin: 4px 0 5px;
}
.deliveries-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.5;
  max-width: 640px;
}
.deliveries-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.deliveries-grow {
  flex: 1;
}
.deliveries-subtext {
  font-size: 11px;
  color: var(--c-g500);
}

/* Live bar */
.deliveries-livebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--c-g200);
  background: var(--c-mint);
  border-radius: 12px;
  margin-bottom: 14px;
}
.deliveries-livepulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-green-dark);
  box-shadow: 0 0 0 0 rgba(25, 201, 109, 0.45);
  animation: deliveries-pulse 1.7s infinite;
  flex: none;
}
.deliveries-livepulse--paused {
  animation: none;
  background: var(--c-g400);
}
@keyframes deliveries-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 201, 109, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(25, 201, 109, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 201, 109, 0);
  }
}
.deliveries-livebar b {
  font-size: 11px;
  display: block;
}
.deliveries-livebar span {
  font-size: 10px;
  color: var(--c-g500);
}
.deliveries-live-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
}
.deliveries-switch {
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--c-green);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.deliveries-switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 19px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: 0.2s;
}
.deliveries-switch--off {
  background: var(--c-g300);
}
.deliveries-switch--off::after {
  left: 3px;
}

/* KPIs */
.deliveries-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1250px) {
  .deliveries-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .deliveries-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

/* Toolbar */
.deliveries-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.deliveries-filter-search {
  min-width: 220px;
  flex: 1;
  max-width: 340px;
}
.deliveries-view-toggle {
  display: flex;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.deliveries-view-btn {
  height: 38px;
  border: 0;
  background: #fff;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g500);
  cursor: pointer;
}
.deliveries-view-btn--active {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.deliveries-counter {
  font-size: 10px;
  color: var(--c-g500);
  margin-left: auto;
}

/* Map view */
.deliveries-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 14px;
}
@media (max-width: 1250px) {
  .deliveries-map-layout {
    grid-template-columns: 1fr;
  }
}
.deliveries-map-panel {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
}
.deliveries-map-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-g200);
}
.deliveries-map-head b {
  font-size: 11px;
  display: block;
}
.deliveries-map-head span {
  font-size: 9px;
  color: var(--c-g500);
}
.deliveries-mapbox-canvas {
  height: 650px;
}
@media (max-width: 1250px) {
  .deliveries-mapbox-canvas {
    height: 480px;
  }
}
.deliveries-map-empty {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  color: var(--c-g500);
}
.deliveries-map-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.deliveries-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.deliveries-map-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--c-g200);
}
.deliveries-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--c-g600);
}
.deliveries-ldot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.deliveries-attention {
  display: grid;
  gap: 10px;
  align-content: start;
}
.deliveries-attention-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.deliveries-attention-head b {
  font-size: 12px;
}
.deliveries-attention-card {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}
.deliveries-attention-card:hover {
  border-color: var(--c-green);
}
.deliveries-attention-card h3 {
  font-size: 11px;
  margin: 0 0 4px;
}
.deliveries-attention-card p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.4;
}
.deliveries-attention-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.deliveries-attention-note {
  font-size: 10px;
}
.deliveries-attention-note--danger {
  color: var(--c-danger);
}
.deliveries-attention-note--warning {
  color: #8a5e00;
}

/* Board view */
.deliveries-board-wrap {
  overflow: auto;
  padding-bottom: 6px;
}
.deliveries-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(260px, 1fr));
  gap: 12px;
  min-width: 1640px;
}
.deliveries-column {
  background: var(--c-g100);
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  min-height: 400px;
  padding: 10px;
}
.deliveries-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px 10px;
}
.deliveries-column-head b {
  font-size: 11px;
  display: block;
}
.deliveries-column-head span {
  font-size: 9px;
  color: var(--c-g500);
}
.deliveries-column-count {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-g200);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 850;
}
.deliveries-card {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 11px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.deliveries-card:hover {
  border-color: var(--c-green);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}
.deliveries-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.deliveries-card h4 {
  font-size: 11px;
  margin: 0;
}
.deliveries-card p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 3px 0 0;
  line-height: 1.4;
}
.deliveries-route-mini {
  display: grid;
  gap: 5px;
  margin: 10px 0;
}
.deliveries-rmini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
}
.deliveries-rpoint {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.deliveries-rpoint--a {
  background: var(--c-green-dark);
}
.deliveries-rpoint--b {
  background: var(--c-info);
}
.deliveries-card-driver {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--c-g100);
  padding-top: 8px;
  margin-top: 8px;
}
.deliveries-driver-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-mint);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  font-size: 9px;
  font-weight: 850;
  flex: none;
}
.deliveries-card-driver b {
  display: block;
  font-size: 9px;
}
.deliveries-card-driver span {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}
.deliveries-sla {
  margin-left: auto;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.deliveries-sla--good {
  color: var(--c-green-dark);
}
.deliveries-sla--risk {
  color: #8a5e00;
}
.deliveries-sla--late {
  color: var(--c-danger);
}

/* Drawer */
.deliveries-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.42);
  z-index: 70;
  display: none;
}
.deliveries-drawer-overlay--open {
  display: block;
}
.deliveries-drawer {
  position: absolute;
  right: 0;
  top: 0;
  width: min(700px, 98vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.deliveries-drawer-head {
  height: 64px;
  flex: none;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.deliveries-drawer-head h3 {
  font-size: 16px;
  margin: 0;
}
.deliveries-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
}
.deliveries-drawer-foot {
  flex: none;
  padding: 14px 18px;
  border-top: 1px solid var(--c-g200);
  background: var(--c-g50);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.deliveries-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.deliveries-detail-card--wide {
  grid-column: 1 / -1;
}
.deliveries-detail-card h4 {
  font-size: 11px;
  margin: 0 0 9px;
}
@media (max-width: 900px) {
  .deliveries-detail-grid {
    grid-template-columns: 1fr;
  }
  .deliveries-detail-card--wide {
    grid-column: auto;
  }
}

.deliveries-mini-mapbox-canvas {
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-g200);
}

.deliveries-meta-list {
  display: grid;
  gap: 8px;
}
.deliveries-meta-list--top {
  margin-top: 10px;
}
.deliveries-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
}
.deliveries-meta-row span {
  color: var(--c-g500);
}
.deliveries-meta-row b {
  text-align: right;
}
.deliveries-sla-buffer {
  color: var(--c-green-dark);
}
/* ==========================================================
   Módulo Repartidores — listado, KPIs, filtros, tabla y drawer
   de 13 pestañas. Adaptado de carry_backoffice_drivers_v1_complete.html.
   Los colores usan los tokens reales de carry-design-system, no los hex
   del prototipo — mismo criterio que el resto de los módulos.
   ========================================================== */

.drivers-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.drivers-head h1 {
  font-size: 24px;
  margin: 0 0 5px;
}
.drivers-head p {
  font-size: 12px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
  max-width: 640px;
}
.drivers-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex: none;
}

.drivers-kpis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}
@media (max-width: 1200px) {
  .drivers-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 650px) {
  .drivers-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.drivers-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.drivers-filter-search {
  min-width: 220px;
  flex: 1;
}
.drivers-filter-count {
  font-size: 10px;
  color: var(--c-g500);
  white-space: nowrap;
  margin-left: auto;
}

.drivers-entity-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.drivers-subtext {
  font-size: 9px;
  color: var(--c-g500);
}
.drivers-subtext-block {
  display: block;
  margin-top: 2px;
}
.drivers-row-actions {
  display: flex;
  gap: 6px;
}
.drivers-rating-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 850;
  color: #8a5e00;
}

/* Drawer */
.drivers-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.36);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}
.carry-drawer.drivers-drawer {
  width: min(1320px, 96vw);
  background: #fff;
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
}
.drivers-drawer-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 11px;
}
.drivers-drawer-head h3 {
  font-size: 16px;
  margin: 0 0 3px;
}
.drivers-grow {
  flex: 1;
}
.drivers-drawer-body {
  padding: 14px 18px 18px;
  overflow: auto;
  flex: 1;
}
.drivers-drawer-foot {
  padding: 11px 18px;
  border-top: 1px solid var(--c-g200);
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  background: var(--c-g50);
}

.drivers-detail-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--c-g200);
}
.drivers-detail-tab {
  height: 33px;
  flex: none;
  border: 1px solid var(--c-g200);
  background: #fff;
  color: #4d5752;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 850;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.drivers-detail-tab.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}

.drivers-tab-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.drivers-tab-heading h3 {
  font-size: 15px;
  margin: 0 0 3px;
}
.drivers-tab-heading p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
}

/* Profile hero */
.drivers-profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.drivers-profile-hero h3 {
  font-size: 16px;
  margin: 0 0 4px;
}
.drivers-profile-hero p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0 0 8px;
}
.drivers-hero-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.drivers-hero-score {
  text-align: center;
  border-left: 1px solid var(--c-g200);
  padding-left: 14px;
}
.drivers-hero-score strong {
  font-size: 24px;
  display: block;
}
.drivers-hero-score span {
  font-size: 9px;
  color: var(--c-g500);
}
@media (max-width: 700px) {
  .drivers-profile-hero {
    grid-template-columns: auto 1fr;
  }
  .drivers-hero-score {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--c-g200);
    padding: 10px 0 0;
    text-align: left;
  }
}

.drivers-quickstats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.drivers-quickstat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.drivers-quickstat small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.drivers-quickstat b {
  font-size: 13px;
  display: block;
  margin-top: 3px;
}
@media (max-width: 900px) {
  .drivers-quickstats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.drivers-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drivers-detail-card--wide {
  grid-column: 1 / -1;
}
.drivers-detail-card h4 {
  font-size: 11px;
  margin: 0 0 10px;
}
@media (max-width: 900px) {
  .drivers-detail-grid {
    grid-template-columns: 1fr;
  }
}

.drivers-meta {
  display: grid;
  gap: 8px;
}
.drivers-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
}
.drivers-row span {
  color: var(--c-g500);
}
.drivers-row b {
  text-align: right;
}
.drivers-row-value--success {
  color: var(--c-green-dark);
}
.drivers-row-value--danger {
  color: var(--c-danger);
}
.drivers-row-value--warning {
  color: #8a5e00;
}

.drivers-doc-list {
  display: grid;
  gap: 8px;
}
.drivers-doc {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
}
.drivers-docicon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  color: var(--c-g600);
}
.drivers-doc > div:nth-child(2) > b {
  display: block;
  font-size: 10px;
}
.drivers-doc > div:nth-child(2) > span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}

.drivers-timeline {
  display: grid;
  gap: 0;
}
.drivers-event {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  padding-bottom: 11px;
  position: relative;
}
.drivers-event:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 27px;
  bottom: 0;
  width: 1px;
  background: var(--c-g200);
}
.drivers-event:last-child:before {
  display: none;
}
.drivers-evicon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  z-index: 1;
}
.drivers-event > div:nth-child(2) > b {
  display: block;
  font-size: 10px;
}
.drivers-event > div:nth-child(2) > span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
  line-height: 1.4;
}

/* Vehicle */
.drivers-vehicle-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
}
.drivers-vehicle-visual {
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--c-g50), var(--c-g100));
  display: grid;
  place-items: center;
  color: var(--c-g600);
}
@media (max-width: 700px) {
  .drivers-vehicle-card {
    grid-template-columns: 1fr;
  }
}

/* Device */
.drivers-device-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 11px;
}
.drivers-device-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #edf4ff;
  color: #316bc7;
  display: grid;
  place-items: center;
}
.drivers-device-card > div:nth-child(2) > b {
  display: block;
  font-size: 10px;
}
.drivers-device-card > div:nth-child(2) > span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}

/* Operation */
.drivers-operation-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
}
.drivers-mapbox-canvas {
  height: 260px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-g200);
}
.drivers-map-empty {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  color: var(--c-g500);
}
.drivers-map-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.drivers-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.drivers-full-width {
  width: 100%;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .drivers-operation-grid {
    grid-template-columns: 1fr;
  }
}

/* Deliveries / Performance */
.drivers-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.drivers-stat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 11px;
}
.drivers-stat small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
}
.drivers-stat strong {
  display: block;
  font-size: 17px;
  margin-top: 4px;
}
.drivers-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--c-g100);
  overflow: hidden;
  margin-top: 8px;
}
.drivers-progress i {
  display: block;
  height: 100%;
  background: var(--c-green);
}
.drivers-progress i.drivers-progress-warn {
  background: #f5b82e;
}
@media (max-width: 900px) {
  .drivers-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reputation */
.drivers-rating-big {
  font-size: 32px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drivers-rating-breakdown {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}
.drivers-rating-line {
  display: grid;
  grid-template-columns: 110px 1fr 42px;
  gap: 8px;
  align-items: center;
  font-size: 10px;
}
.drivers-bar {
  height: 6px;
  background: var(--c-g100);
  border-radius: 999px;
  overflow: hidden;
}
.drivers-bar i {
  display: block;
  height: 100%;
  background: #f5b82e;
}
.drivers-rate-history {
  display: grid;
  gap: 8px;
}
.drivers-rate-item {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  align-items: center;
}
.drivers-rate-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
}
.drivers-rate-item > div:nth-child(2) > b {
  display: block;
  font-size: 10px;
}
.drivers-rate-item > div:nth-child(2) > span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}

/* Finance */
.drivers-money-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.drivers-money {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 11px;
}
.drivers-money small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.drivers-money strong {
  font-size: 15px;
  display: block;
  margin-top: 4px;
}
.drivers-money-positive {
  color: var(--c-green-dark);
}
.drivers-money-negative {
  color: var(--c-danger);
}
.drivers-transactions {
  display: grid;
  gap: 8px;
}
.drivers-tx {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
}
.drivers-txicon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.drivers-tx > div:nth-child(2) > b {
  display: block;
  font-size: 10px;
}
.drivers-tx > div:nth-child(2) > span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.drivers-tx strong {
  font-size: 11px;
}
@media (max-width: 900px) {
  .drivers-money-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 650px) {
  .drivers-money-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.drivers-mt-10 {
  margin-top: 10px;
}
.drivers-mb-10 {
  margin-bottom: 10px;
}

/* Modals */
.drivers-modal-lg .carry-modal {
  width: min(760px, 96vw);
}
.drivers-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drivers-modal-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.drivers-modal-desc {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0 0 12px;
  line-height: 1.5;
}
.drivers-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.drivers-choice {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.drivers-choice b {
  display: block;
  font-size: 10px;
}
.drivers-choice span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.drivers-choice.active {
  border-color: var(--c-green);
  background: var(--c-mint);
}
@media (max-width: 700px) {
  .drivers-choice-grid {
    grid-template-columns: 1fr;
  }
}

.drivers-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.drivers-field-full {
  grid-column: 1 / -1;
}
.drivers-field-label {
  font-size: 10px;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}
.drivers-helper {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .drivers-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Override default control style */
.mapbox-gl-draw_ctrl-bottom-left,
.mapbox-gl-draw_ctrl-top-left {
  margin-left:0;
  border-radius:0 4px 4px 0;
}
.mapbox-gl-draw_ctrl-top-right,
.mapbox-gl-draw_ctrl-bottom-right {
  margin-right:0;
  border-radius:4px 0 0 4px;
}

.mapbox-gl-draw_ctrl-draw-btn {
  border-color:rgba(0,0,0,0.9);
  color:rgba(255,255,255,0.5);
  width:30px;
  height:30px;
}

.mapbox-gl-draw_ctrl-draw-btn.active,
.mapbox-gl-draw_ctrl-draw-btn.active:hover {
  background-color:rgb(0 0 0/5%);
}
.mapbox-gl-draw_ctrl-draw-btn {
  background-repeat: no-repeat;
  background-position: center;
}

.mapbox-gl-draw_point {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>');
}
.mapbox-gl-draw_polygon {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>');
}
.mapbox-gl-draw_line {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>');
}
.mapbox-gl-draw_trash {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>');
}
.mapbox-gl-draw_uncombine {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>');
}
.mapbox-gl-draw_combine {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>');
}

.mapboxgl-map.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: pointer;
}
.mapboxgl-map.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: move;
}
.mapboxgl-map.mouse-add .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: crosshair;
}
.mapboxgl-map.mouse-move.mode-direct_select .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.mapboxgl-map.mode-direct_select.feature-vertex.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: move;
}
.mapboxgl-map.mode-direct_select.feature-midpoint.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: cell;
}
.mapboxgl-map.mode-direct_select.feature-feature.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: move;
}
.mapboxgl-map.mode-static.mouse-pointer  .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.mapbox-gl-draw_boxselect {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(0,0,0,.1);
    border: 2px dotted #fff;
    opacity: 0.5;
}
/*
 * Estilos del módulo Repartidores → Freelancers, a partir de
 * carry_backoffice_freelancers_global_config_v2.html. Los valores de color
 * son las custom properties reales de carry-design-system; el resto son
 * piezas de layout que el paquete no expone como componente (tabs de
 * módulo, tarjetas de vehículo, grid de cobertura, drawer CRUD) — mismo
 * criterio que modules/countries/countries.css.
 */

.freelancers-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.freelancers-page-head h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}
.freelancers-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.55;
  max-width: 640px;
}

.freelancers-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 18px;
}
.freelancers-tab {
  height: 36px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  font-family: inherit;
}
.freelancers-tab.freelancers-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}

.freelancers-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.freelancers-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
}
.freelancers-kpi small {
  display: block;
  color: var(--c-g500);
  font-size: 12px;
}
.freelancers-kpi b {
  display: block;
  font-size: 20px;
  margin: 5px 0 2px;
}
.freelancers-kpi span {
  font-size: 12px;
  color: var(--c-g500);
}

.freelancers-vehicle-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.freelancers-vehicle-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.freelancers-vehicle-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  font-size: 18px;
}
.freelancers-vehicle-card b {
  display: block;
  font-size: 12px;
}
.freelancers-vehicle-card span {
  font-size: 12px;
  color: var(--c-g500);
}

.freelancers-muted-sm {
  font-size: 12px;
  color: var(--c-g500);
}

.freelancers-coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 340px;
  gap: 16px;
  margin-bottom: 16px;
}
.freelancers-map-card {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-g50);
  min-height: 420px;
  position: relative;
}
.freelancers-map-card--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  color: var(--c-g500);
}
.freelancers-map-card--empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.freelancers-map-card--empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.freelancers-map-card-canvas {
  width: 100%;
  height: 420px;
}
.freelancers-map-card-toolbar {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
}
.freelancers-mapbtn {
  height: 34px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.freelancers-map-card-help {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--c-g600, #4d5752);
  max-width: 370px;
  z-index: 2;
}

.freelancers-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.freelancers-meta small {
  display: block;
  font-size: 12px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.freelancers-meta b {
  font-size: 12px;
}
.freelancers-actionbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.freelancers-sql {
  background: #1e2329;
  color: #dce7e2;
  border-radius: 12px;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow: auto;
  margin: 0;
}

.freelancers-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 13px;
}
.freelancers-field--full {
  grid-column: 1 / -1;
}
.freelancers-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-g100);
}
.freelancers-switch-row b {
  display: block;
  font-size: 12px;
}
.freelancers-switch-row span {
  font-size: 12px;
  color: var(--c-g500);
}
.freelancers-drawer-body .carry-alert {
  margin-top: 14px;
}

.freelancers-map-field {
  display: grid;
  gap: 8px;
}
.freelancers-map-field > label {
  font-size: 12px;
  font-weight: 800;
}
.freelancers-map-canvas-wrap {
  position: relative;
}
.freelancers-map-canvas {
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-g200);
}
.freelancers-map-canvas-wrap:fullscreen,
.freelancers-map-canvas-wrap:-webkit-full-screen {
  height: 100vh;
  background: #fff;
}
.freelancers-map-canvas-wrap:fullscreen .freelancers-map-canvas,
.freelancers-map-canvas-wrap:-webkit-full-screen .freelancers-map-canvas {
  height: 100%;
  border-radius: 0;
  border: none;
}
.freelancers-map-toolbar {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.freelancers-map-toolbar--zoom {
  top: 10px;
  right: 10px;
}
.freelancers-map-toolbar--draw {
  top: 10px;
  left: 10px;
}
.freelancers-map-toolbar button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  padding: 0;
}
.freelancers-map-toolbar button:hover {
  background: var(--c-g50);
}
.freelancers-map-toolbar button.freelancers-is-active {
  background: #1e2329;
  border-color: #1e2329;
  color: #fff;
}
.freelancers-map-field small {
  font-size: 12px;
  color: var(--c-g500);
}
.freelancers-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  background: var(--c-g50);
  color: var(--c-g500);
}
.freelancers-map-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.freelancers-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .freelancers-coverage-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  .freelancers-kpis,
  .freelancers-vehicle-types {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .freelancers-form-grid {
    grid-template-columns: 1fr;
  }
  .freelancers-field--full {
    grid-column: auto;
  }
}
/*
 * Estilos del módulo Comercios (Operación → Comercios), a partir de
 * carry_backoffice_merchants_v5_marketplace_mode.html. Los valores de color
 * son las custom properties reales de carry-design-system; el resto son
 * piezas de layout que el paquete no expone como componente — mismo
 * criterio que modules/countries/countries.css y modules/freelancers/freelancers.css.
 */

.merchants-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.merchants-page-head h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}
.merchants-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.5;
  max-width: 640px;
}
.merchants-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* KPIs */
.merchants-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.merchants-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  min-height: 94px;
}
.merchants-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.merchants-kpi-top small {
  font-size: 9px;
  color: var(--c-g500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.merchants-kpi-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.merchants-kpi-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.merchants-kpi-main b {
  font-size: 21px;
  line-height: 1;
}
.merchants-delta {
  font-size: 9px;
  font-weight: 800;
  display: block;
  margin-top: 4px;
}
.merchants-delta--up {
  color: var(--c-green-dark);
}
.merchants-delta--down {
  color: var(--c-danger);
}
.merchants-spark {
  width: 62px;
  height: 24px;
}
.merchants-kpi-meta {
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status tabs */
.merchants-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.merchants-tab {
  height: 36px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 750;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  font-family: inherit;
}
.merchants-tab.merchants-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.merchants-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-g100);
  font-size: 9px;
  margin-left: 5px;
}
.merchants-tab.merchants-is-active .merchants-count {
  background: #fff;
  color: var(--c-green-dark);
}

/* Toolbar / filters */
.merchants-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.merchants-filter-search {
  min-width: 240px;
  max-width: 340px;
  flex: 1;
}
.merchants-filter-count {
  font-size: 11px;
  color: var(--c-g500);
  margin-left: auto;
}

/* Category chips */
.merchants-category-cell {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.merchants-cat-tag {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.merchants-cat-food {
  background: #fff2e5;
  color: #a65300;
}
.merchants-cat-pharmacy {
  background: #f3eeff;
  color: #6d28d9;
}
.merchants-cat-package {
  background: #edf4ff;
  color: #316bc7;
}
.merchants-cat-retail {
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
}
.merchants-cat-grocery {
  background: #eaf9ef;
  color: #21824e;
}
.merchants-cat-neutral {
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
}
.merchants-cat-purple {
  background: #f3eeff;
  color: #6d28d9;
}

/* Table cells */
.merchants-vendor-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.merchants-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-mint), #fff);
  border: 1px solid var(--c-green-200, #b9f1d2);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: var(--c-green-dark);
  flex: none;
}
.merchants-subtext {
  display: block;
  font-size: 10px;
  color: var(--c-g500);
  margin-top: 2px;
}
.merchants-metric-inline b {
  display: block;
  font-size: 11px;
}
.merchants-metric-inline span {
  font-size: 9px;
  color: var(--c-g500);
}
.merchants-plan b {
  display: block;
  font-size: 10px;
}
.merchants-plan span {
  font-size: 9px;
  color: var(--c-g500);
}
.merchants-score {
  display: flex;
  align-items: center;
  gap: 5px;
}
.merchants-star {
  color: var(--c-warning);
}
.merchants-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.merchants-health-dot--ok {
  background: var(--c-success);
}
.merchants-health-dot--warn {
  background: var(--c-warning);
}
.merchants-health-dot--danger {
  background: var(--c-danger);
}
.merchants-row-actions {
  display: flex;
  gap: 5px;
}
.merchants-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.merchants-mode-badge--market {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.merchants-mode-badge--logistics {
  background: #edf4ff;
  color: #316bc7;
}

/* Generic tags used across the drawer */
.merchants-tag-ok,
.merchants-tag-warn,
.merchants-tag-info,
.merchants-tag-neutral {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.merchants-tag-ok {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.merchants-tag-warn {
  background: #fff7de;
  color: #8a5e00;
}
.merchants-tag-info {
  background: #edf4ff;
  color: #316bc7;
}
.merchants-tag-neutral {
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
}
.merchants-ml-auto {
  margin-left: auto;
}

/* Drawer shell */
.merchants-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.42);
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}
.carry-drawer.merchants-drawer {
  width: min(980px, 98vw);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.merchants-drawer-head {
  height: 72px;
  flex: none;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.merchants-drawer-head h3 {
  font-size: 16px;
  margin: 0;
}
.merchants-drawer-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--c-mint);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  font-weight: 900;
  flex: none;
}
.merchants-grow {
  flex: 1;
}
.merchants-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
}
.merchants-drawer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.merchants-dtab {
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
}
.merchants-dtab.merchants-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.merchants-drawer-foot {
  flex: none;
  padding: 14px 18px;
  border-top: 1px solid var(--c-g200);
  background: var(--c-g50);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Flow header (used inside every drawer view with a CTA) */
.merchants-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.merchants-flow-header h3 {
  font-size: 15px;
  margin: 0 0 3px;
}
.merchants-flow-header p {
  font-size: 11px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
}

/* Detail grid (Summary/Commercial/Operation) */
.merchants-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.merchants-detail-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
}
.merchants-detail-card--wide {
  grid-column: 1 / -1;
}
.merchants-detail-card h4 {
  font-size: 12px;
  margin: 0 0 10px;
}
.merchants-meta {
  display: grid;
  gap: 9px;
}
.merchants-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.merchants-meta-row span {
  color: var(--c-g500);
}
.merchants-meta-row b {
  text-align: right;
}
.merchants-meta-positive {
  color: var(--c-green-dark);
}
.merchants-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.merchants-perf {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.merchants-perf small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.merchants-perf b {
  font-size: 12px;
  display: block;
  margin: 4px 0 2px;
}
.merchants-perf span {
  font-size: 9px;
  color: var(--c-green-dark);
}
.merchants-model-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
}
.merchants-model-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.merchants-model-card h5 {
  font-size: 11px;
  margin: 0 0 3px;
}
.merchants-model-card p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.45;
}
.merchants-model-card .merchants-mode-badge {
  margin-left: auto;
}
.merchants-chartbox {
  height: 160px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
}
.merchants-chartbox svg {
  width: 100%;
  height: 100%;
}

/* Generic item list (branches read view, integrations, audit) */
.merchants-branch-list,
.merchants-integration-list,
.merchants-audit-list {
  display: grid;
  gap: 8px;
}
.merchants-item {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
}
.merchants-item-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.merchants-item-top h5 {
  font-size: 11px;
  margin: 0 0 3px;
}
.merchants-item-top p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
}
.merchants-item-right {
  margin-left: auto;
}
.merchants-item-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--c-g100);
  font-size: 9px;
  color: var(--c-g500);
}

/* Catalog */
.merchants-catalog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.merchants-catalog-stat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
}
.merchants-catalog-stat small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.merchants-catalog-stat b {
  font-size: 12px;
  display: block;
  margin-top: 3px;
}
.merchants-catalog-public-preview {
  border: 1px solid var(--c-g200);
  border-radius: 13px;
  padding: 12px;
  background: var(--c-g50);
  margin-bottom: 12px;
}
.merchants-catalog-public-preview h4 {
  font-size: 11px;
  margin: 0 0 8px;
}
.merchants-public-category-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.merchants-public-cat {
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.merchants-catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.merchants-mode-toggle {
  display: flex;
  border: 1px solid var(--c-g200);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}
.merchants-mode-btn {
  height: 36px;
  border: 0;
  background: #fff;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g500);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.merchants-mode-btn.merchants-is-active {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.merchants-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.merchants-product-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.merchants-product-photo {
  height: 100px;
  background: linear-gradient(135deg, #eef4f1, #dde8e2);
  position: relative;
  display: grid;
  place-items: center;
  color: var(--c-g600, #4d5752);
}
.merchants-product-state {
  position: absolute;
  right: 8px;
  top: 8px;
}
.merchants-product-body {
  padding: 10px;
}
.merchants-product-body h5 {
  font-size: 11px;
  margin: 0 0 3px;
}
.merchants-product-body p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.4;
  min-height: 24px;
}
.merchants-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}
.merchants-product-price {
  font-size: 12px;
  font-weight: 850;
}
.merchants-sku {
  font-size: 8px;
  color: var(--c-g500);
}
.merchants-product-actions {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--c-g100);
}
.merchants-product-actions button {
  height: 30px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.merchants-table-wrap {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  overflow-x: auto;
}
.merchants-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.merchants-table-wrap th,
.merchants-table-wrap td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--c-g100);
  text-align: left;
}
.merchants-table-wrap th {
  background: var(--c-g50);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--c-g500);
}
.merchants-table-wrap td {
  font-size: 11px;
}

/* Schedule */
.merchants-schedule-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.merchants-week-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.merchants-week-row {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
}
.merchants-day-name {
  font-size: 10px;
  font-weight: 850;
}
.merchants-time-range {
  font-size: 10px;
  color: var(--c-g600, #4d5752);
}
.merchants-branch-chip {
  font-size: 9px;
  color: var(--c-g500);
}
.merchants-exception-list h4 {
  font-size: 11px;
  margin: 0 0 8px;
}
.merchants-exception-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
  margin-bottom: 7px;
}
.merchants-exception-row b {
  font-size: 9px;
}
.merchants-exception-row span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Commercial plan */
.merchants-plan-current-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-g50);
  border-radius: 12px;
  margin-bottom: 12px;
}
.merchants-plan-current-banner h4 {
  font-size: 11px;
  margin: 0 0 2px;
}
.merchants-plan-current-banner p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
}

/* Discounts */
.merchants-discount-principle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-g50);
  border-radius: 12px;
  margin-bottom: 12px;
}
.merchants-discount-principle-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.merchants-discount-principle b {
  display: block;
  font-size: 10px;
}
.merchants-discount-principle p {
  font-size: 9px;
  color: var(--c-g600, #4d5752);
  margin: 3px 0 0;
  line-height: 1.45;
}
.merchants-discount-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.merchants-discount-kpi {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.merchants-discount-kpi small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.merchants-discount-kpi b {
  font-size: 13px;
  display: block;
  margin: 4px 0 2px;
}
.merchants-discount-kpi span {
  font-size: 9px;
  color: var(--c-g500);
}
.merchants-discount-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.merchants-discount-tab {
  height: 34px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 850;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  font-family: inherit;
}
.merchants-discount-tab.merchants-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.merchants-promo-list {
  display: grid;
  gap: 8px;
}
.merchants-promo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 11px;
  flex-wrap: wrap;
}
.merchants-promo-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.merchants-promo-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.merchants-promo-icon--carry {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.merchants-promo-icon--merchant {
  background: #f3eeff;
  color: #6d28d9;
}
.merchants-promo-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.merchants-promo-title b {
  font-size: 10px;
}
.merchants-promo-card p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 3px 0;
  line-height: 1.4;
}
.merchants-promo-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 9px;
  color: var(--c-g500);
}
.merchants-promo-side {
  min-width: 150px;
  text-align: right;
}
.merchants-promo-side > b {
  font-size: 11px;
  display: block;
  margin-top: 6px;
}
.merchants-promo-side small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.merchants-promo-side .merchants-row-actions {
  justify-content: flex-end;
  margin-top: 7px;
}
.merchants-funding {
  display: inline-flex;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
}
.merchants-funding--carry {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.merchants-funding--merchant {
  background: #f3eeff;
  color: #6d28d9;
}
.merchants-merchant-discount-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-g200);
  background: var(--c-g50);
  border-radius: 11px;
  padding: 11px;
  margin-bottom: 10px;
}
.merchants-merchant-discount-banner b {
  font-size: 10px;
}
.merchants-merchant-discount-banner p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 2px 0 0;
}
.merchants-discount-example {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
}
.merchants-discount-example h4 {
  font-size: 11px;
  margin: 0 0 10px;
}
.merchants-calc-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-g100);
  font-size: 10px;
}
.merchants-calc-row:last-child {
  border-bottom: 0;
}
.merchants-calc-row span {
  color: var(--c-g600, #4d5752);
}
.merchants-calc-row--merchant b {
  color: #6d28d9;
}
.merchants-calc-row--carry b {
  color: var(--c-green-dark);
}
.merchants-calc-row--total {
  font-size: 11px;
  font-weight: 850;
}
.merchants-vendor-payout {
  background: #f7fbf8;
  padding: 9px;
  border-radius: 8px;
  margin-top: 7px;
}
.merchants-platform-net {
  background: var(--c-g50);
  padding: 9px;
  border-radius: 8px;
  margin-top: 5px;
}

/* Public profile editor */
.merchants-profile-preview {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 14px;
}
.merchants-cover {
  height: 150px;
  background: linear-gradient(120deg, #1e2329, #363e3a 50%, #129a63);
  position: relative;
}
.merchants-cover-actions {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  gap: 7px;
}
.merchants-upload-chip {
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}
.merchants-profile-summary {
  padding: 0 16px 16px;
  position: relative;
}
.merchants-profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin-top: -43px;
  position: relative;
  display: grid;
  place-items: center;
}
.merchants-profile-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: var(--c-mint);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  font-size: 20px;
  font-weight: 900;
}
.merchants-avatar-edit {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-text);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.merchants-profile-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
}
.merchants-profile-title h3 {
  font-size: 18px;
  margin: 0 0 4px;
}
.merchants-profile-title p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
}
.merchants-profile-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.merchants-about-box {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  background: var(--c-g50);
}
.merchants-about-box h4 {
  margin: 0 0 6px;
  font-size: 11px;
}
.merchants-about-box p {
  margin: 0;
  font-size: 10px;
  color: var(--c-g600, #4d5752);
  line-height: 1.55;
}
.merchants-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.merchants-field--full {
  grid-column: 1 / -1;
}
.merchants-field > label {
  font-size: 10px;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}
.merchants-helper {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 4px;
}
.merchants-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--c-g300);
  border-radius: 10px;
  background: #fff;
  outline: none;
  font: inherit;
  min-height: 110px;
  padding: 10px 12px;
  resize: vertical;
}
.merchants-textarea:focus {
  border-color: #19c96d;
  box-shadow: 0 0 0 3px rgba(46, 234, 131, 0.2);
}
.merchants-category-picker {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.merchants-category-option {
  height: 34px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  font-family: inherit;
}
.merchants-category-option.merchants-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.merchants-category-note {
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 7px;
}
.merchants-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Branch map field (real Mapbox) */
.merchants-branch-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
}
.merchants-map-editor {
  border: 1px solid var(--c-g200);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}
.merchants-map-editor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-g200);
}
.merchants-map-editor-head b {
  font-size: 10px;
  display: block;
}
.merchants-map-editor-head span {
  font-size: 9px;
  color: var(--c-g500);
}
.merchants-btn-outline-sm {
  margin-left: auto;
  height: 32px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}
.merchants-branch-map {
  height: 300px;
  width: 100%;
}
.merchants-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--c-g200);
}
.merchants-coord {
  border: 1px solid var(--c-g200);
  border-radius: 9px;
  padding: 8px;
}
.merchants-coord small {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
}
.merchants-coord b {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}
.merchants-map-help {
  padding: 9px 12px;
  background: var(--c-g50);
  border-top: 1px solid var(--c-green-200, #b9f1d2);
  font-size: 9px;
  color: var(--c-green-dark);
  line-height: 1.45;
}
.merchants-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  background: var(--c-g50);
  color: var(--c-g500);
}
.merchants-map-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.merchants-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.merchants-branch-form {
  border: 1px solid var(--c-g200);
  border-radius: 13px;
  padding: 13px;
}
.merchants-branch-form h4 {
  font-size: 11px;
  margin: 0 0 11px;
}
.merchants-status-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
}
.merchants-status-switch b {
  font-size: 9px;
  display: block;
}
.merchants-status-switch span {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Modals */
.merchants-modal-lg .carry-modal {
  width: min(980px, 96vw);
}
.merchants-modal-md .carry-modal {
  width: min(720px, 96vw);
}
.merchants-modal-description {
  font-size: 11px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0 0 4px;
}
.merchants-modal-section {
  margin-top: 15px;
}
.merchants-modal-section h4 {
  font-size: 10px;
  margin: 0 0 9px;
}
.merchants-check-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.merchants-check-chip {
  height: 32px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 800;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  font-family: inherit;
}
.merchants-check-chip.merchants-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.merchants-image-drop {
  height: 120px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  background: var(--c-g50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: var(--c-g500);
  font-size: 9px;
}
.merchants-image-drop b {
  color: var(--c-text);
  font-size: 10px;
}
.merchants-category-builder {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
  background: var(--c-g50);
}
.merchants-category-builder-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.merchants-category-builder-row > div:first-child {
  flex: 1;
}
.merchants-action-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

/* Create merchant: marketplace vs logistics-only choice */
.merchants-market-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.merchants-market-option {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.merchants-market-option:hover {
  border-color: var(--c-green);
}
.merchants-market-option.merchants-is-active {
  border-color: var(--c-green);
  box-shadow: 0 0 0 2px rgba(46, 234, 131, 0.12);
  background: var(--c-g50);
}
.merchants-market-opt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.merchants-market-opt-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
}
.merchants-market-option.merchants-is-active .merchants-market-opt-icon {
  background: #fff;
  color: var(--c-green-dark);
}
.merchants-market-option b {
  font-size: 10px;
}
.merchants-market-option p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.45;
}
.merchants-market-conditional {
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-g50);
  border-radius: 11px;
  padding: 10px;
  margin-top: 10px;
}
.merchants-market-conditional b {
  font-size: 9px;
  display: block;
}
.merchants-market-conditional p {
  font-size: 9px;
  color: var(--c-g600, #4d5752);
  margin: 3px 0 0;
  line-height: 1.45;
}
.merchants-logistics-conditional {
  border: 1px solid #c7daff;
  background: #f5f9ff;
  border-radius: 11px;
  padding: 10px;
  margin-top: 10px;
}
.merchants-logistics-conditional b {
  font-size: 9px;
  display: block;
  color: #316bc7;
}
.merchants-logistics-conditional p {
  font-size: 9px;
  color: var(--c-g600, #4d5752);
  margin: 3px 0 0;
  line-height: 1.45;
}

/* Plan cards */
.merchants-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 15px;
}
.merchants-plan-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
}
.merchants-plan-card:hover {
  border-color: var(--c-green);
}
.merchants-plan-card.merchants-is-selected {
  border-color: var(--c-green);
  box-shadow: 0 0 0 2px rgba(46, 234, 131, 0.12);
}
.merchants-plan-current-flag {
  position: absolute;
  right: 9px;
  top: 9px;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 8px;
  font-weight: 850;
}
.merchants-plan-card h4 {
  font-size: 11px;
  margin: 0 0 3px;
}
.merchants-plan-price {
  font-size: 16px;
  font-weight: 850;
  margin: 8px 0 2px;
}
.merchants-plan-commission {
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 9px;
}
.merchants-feature-list {
  display: grid;
  gap: 5px;
}
.merchants-feature {
  display: flex;
  gap: 5px;
  font-size: 9px;
  color: var(--c-g600, #4d5752);
}
.merchants-feature:before {
  content: "✓";
  color: var(--c-green-dark);
  font-weight: 900;
}
.merchants-plan-change-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}
.merchants-plan-side {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.merchants-plan-side small {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
}
.merchants-plan-side b {
  font-size: 11px;
  display: block;
  margin-top: 3px;
}
.merchants-plan-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Discount preview strip */
.merchants-discount-funding-lock {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-g50);
  border-radius: 11px;
  padding: 10px;
}
.merchants-discount-funding-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  flex: none;
}
.merchants-discount-funding-lock b {
  font-size: 9px;
  display: block;
}
.merchants-discount-funding-lock span:not(.merchants-tag-ok) {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.merchants-discount-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  margin-top: 12px;
}
.merchants-discount-preview div {
  text-align: center;
}
.merchants-discount-preview small {
  font-size: 8px;
  color: var(--c-g500);
  display: block;
}
.merchants-discount-preview b {
  font-size: 11px;
  display: block;
  margin-top: 3px;
}

@media (max-width: 1280px) {
  .merchants-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1100px) {
  .merchants-branch-grid {
    grid-template-columns: 1fr;
  }
  .merchants-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .merchants-plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .merchants-catalog-stats,
  .merchants-schedule-summary,
  .merchants-discount-kpis {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .merchants-detail-grid,
  .merchants-edit-grid,
  .merchants-plan-form {
    grid-template-columns: 1fr;
  }
  .merchants-detail-card--wide,
  .merchants-field--full {
    grid-column: auto;
  }
  .merchants-perf-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .merchants-product-grid,
  .merchants-plan-grid,
  .merchants-catalog-stats,
  .merchants-schedule-summary,
  .merchants-plan-form,
  .merchants-kpis {
    grid-template-columns: 1fr;
  }
  .merchants-week-row {
    grid-template-columns: 1fr auto;
  }
  .merchants-week-row .merchants-time-range {
    grid-column: 1 / -1;
  }
  .merchants-market-choice {
    grid-template-columns: 1fr;
  }
}
/*
 * Estilos del módulo Clientes (Operación → Clientes), a partir de
 * carry_backoffice_clients_v4_devices_security_iconsax_stars.html. Los
 * valores de color son las custom properties reales de
 * carry-design-system; el resto son piezas de layout que el paquete no
 * expone como componente — mismo criterio que modules/merchants/merchants.css.
 */

.clients-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.clients-page-head h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}
.clients-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.5;
  max-width: 640px;
}
.clients-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* KPIs */
.clients-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.clients-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  min-height: 92px;
}
.clients-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clients-kpi-top small {
  font-size: 9px;
  color: var(--c-g500);
  text-transform: uppercase;
}
.clients-kpi-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.clients-kpi b {
  font-size: 21px;
  display: block;
  margin-top: 8px;
}
.clients-delta {
  font-size: 9px;
  font-weight: 800;
  margin-left: 6px;
}
.clients-delta--up {
  color: var(--c-green-dark);
}
.clients-delta--down {
  color: var(--c-danger);
}
.clients-kpi-meta {
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 8px;
}

/* Status tabs */
.clients-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.clients-tab {
  height: 36px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 750;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  font-family: inherit;
}
.clients-tab.clients-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.clients-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-g100);
  font-size: 9px;
  margin-left: 5px;
}
.clients-tab.clients-is-active .clients-count {
  background: #fff;
  color: var(--c-green-dark);
}

/* Toolbar / filters */
.clients-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.clients-filter-search {
  min-width: 240px;
  max-width: 360px;
  flex: 1;
}
.clients-filter-count {
  font-size: 11px;
  color: var(--c-g500);
  margin-left: auto;
}

/* Table cells */
.clients-client-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.clients-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  flex: none;
}
.clients-avatar--system {
  background: #edf4ff;
  color: #316bc7;
}
.clients-subtext {
  display: block;
  font-size: 10px;
  color: var(--c-g500);
  margin-top: 2px;
}
.clients-metric-inline b {
  display: block;
  font-size: 11px;
}
.clients-metric-inline span {
  font-size: 9px;
  color: var(--c-g500);
}
.clients-score {
  display: flex;
  gap: 5px;
  align-items: center;
}
.clients-stars-icons {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--c-warning);
}
.clients-stars-icons--compact svg,
.clients-stars-icons--compact .carry-icon {
  width: 11px;
  height: 11px;
}
.clients-rating-number {
  font-size: 10px;
  font-weight: 850;
  color: var(--c-text);
  margin-left: 3px;
}
.clients-row-actions {
  display: flex;
  gap: 5px;
}

/* Generic tags used across the drawer */
.clients-tag-ok,
.clients-tag-info,
.clients-tag-neutral,
.clients-tag-danger,
.clients-tag-purple {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.clients-tag-ok {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.clients-tag-info {
  background: #edf4ff;
  color: #316bc7;
}
.clients-tag-neutral {
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
}
.clients-tag-danger {
  background: #fff0f0;
  color: #b4353a;
}
.clients-tag-purple {
  background: #f3eeff;
  color: #6d28d9;
}
.clients-ml-auto {
  margin-left: auto;
}
.clients-meta-positive {
  color: var(--c-green-dark);
}

/* Drawer shell */
.clients-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.42);
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}
.carry-drawer.clients-drawer {
  width: min(980px, 98vw);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.clients-drawer-head {
  height: 72px;
  flex: none;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.clients-drawer-head h3 {
  font-size: 16px;
  margin: 0;
}
.clients-drawer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-mint);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  font-weight: 900;
  flex: none;
}
.clients-grow {
  flex: 1;
}
.clients-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
}
.clients-drawer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.clients-dtab {
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
}
.clients-dtab.clients-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.clients-drawer-foot {
  flex: none;
  padding: 14px 18px;
  border-top: 1px solid var(--c-g200);
  background: var(--c-g50);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Flow header (Orders/Addresses view CTA) */
.clients-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.clients-flow-header h3 {
  font-size: 15px;
  margin: 0 0 3px;
}
.clients-flow-header p {
  font-size: 11px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
}

/* Detail grid (Summary) */
.clients-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.clients-detail-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
}
.clients-detail-card--wide {
  grid-column: 1 / -1;
}
.clients-detail-card h4 {
  font-size: 12px;
  margin: 0 0 10px;
}
.clients-meta {
  display: grid;
  gap: 9px;
}
.clients-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.clients-meta-row span {
  color: var(--c-g500);
}
.clients-meta-row b {
  text-align: right;
}
.clients-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.clients-perf {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
}
.clients-perf small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.clients-perf b {
  font-size: 12px;
  display: block;
  margin: 4px 0 2px;
}
.clients-perf span {
  font-size: 9px;
  color: var(--c-green-dark);
}

/* Generic item list (Orders/Support views) */
.clients-list {
  display: grid;
  gap: 8px;
}
.clients-list-item {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
}
.clients-item-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.clients-item-top h5 {
  font-size: 11px;
  margin: 0 0 3px;
}
.clients-item-top p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
}
.clients-item-right {
  margin-left: auto;
}
.clients-item-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--c-g100);
  font-size: 9px;
  color: var(--c-g500);
}

/* Addresses */
.clients-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.clients-address-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 11px;
}
.clients-address-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clients-address-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.clients-address-card h5 {
  font-size: 10px;
  margin: 0;
}
.clients-address-card p {
  font-size: 10px;
  color: var(--c-g500);
  line-height: 1.45;
  margin: 8px 0 6px;
}
.clients-address-meta {
  font-size: 9px;
  color: var(--c-g500);
}

/* Payments */
.clients-payment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  margin-bottom: 8px;
}
.clients-payment-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  flex: none;
}
.clients-payment-card b {
  font-size: 10px;
}
.clients-payment-card span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.clients-payment-state {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* Credit */
.clients-credit-hero {
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-g50);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
}
.clients-credit-hero-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.clients-credit-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.clients-credit-value {
  background: #fff;
  border: 1px solid var(--c-green-200, #b9f1d2);
  border-radius: 10px;
  padding: 9px;
}
.clients-credit-value small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}
.clients-credit-value b {
  font-size: 12px;
  display: block;
  margin-top: 3px;
}

/* Activity timeline */
.clients-timeline {
  display: grid;
}
.clients-event {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  position: relative;
  padding-bottom: 14px;
}
.clients-event:before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: var(--c-g200);
}
.clients-event:last-child:before {
  display: none;
}
.clients-event-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  z-index: 1;
}
.clients-event b {
  display: block;
  font-size: 10px;
}
.clients-event span {
  font-size: 9px;
  color: var(--c-g500);
}

/* Profile hero + reputation */
.clients-profile-hero {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px;
}
.clients-profile-cover {
  height: 84px;
  background: linear-gradient(125deg, #1e2329, #363e3a 58%, var(--c-green-dark));
}
.clients-profile-main {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  padding: 0 14px 14px;
  flex-wrap: wrap;
}
.clients-profile-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  margin-top: -42px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.clients-profile-photo-edit {
  position: absolute;
  right: -3px;
  bottom: 2px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-text);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.clients-profile-info {
  padding-top: 10px;
}
.clients-profile-info h3 {
  font-size: 17px;
  margin: 0 0 3px;
}
.clients-profile-info p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
}
.clients-profile-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.clients-profile-actions {
  margin-left: auto;
  padding-top: 10px;
}
.clients-btn-outline {
  height: 40px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: inherit;
}

.clients-reputation-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 12px;
  margin-top: 12px;
}
.clients-reputation-score,
.clients-rating-breakdown,
.clients-rating-rules {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
  background: #fff;
}
.clients-reputation-score {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clients-score-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: conic-gradient(var(--c-green) 0 96%, var(--c-g100) 96% 100%);
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
}
.clients-score-ring:after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}
.clients-score-ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}
.clients-score-ring b {
  font-size: 23px;
  display: block;
}
.clients-score-ring span {
  font-size: 9px;
  color: var(--c-g500);
}
.clients-reputation-score h4,
.clients-rating-breakdown h4,
.clients-rating-rules h4 {
  font-size: 11px;
  margin: 0 0 7px;
}
.clients-reputation-score p {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0 0 8px;
}
.clients-classification {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 9px;
  font-weight: 850;
}
.clients-rater-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-g100);
}
.clients-rater-row:last-child {
  border-bottom: 0;
}
.clients-rater-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.clients-rater-row b {
  font-size: 9px;
  display: block;
}
.clients-rater-row span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.clients-rater-value {
  text-align: right;
}

.clients-rating-dimensions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.clients-rating-dimension {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
}
.clients-rating-dimension small {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
}

.clients-rating-rules {
  margin-top: 12px;
}
.clients-rating-rule {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-g100);
}
.clients-rating-rule:last-child {
  border-bottom: 0;
}
.clients-rating-rule svg {
  color: var(--c-green-dark);
}
.clients-rating-rule b {
  font-size: 9px;
  display: block;
}
.clients-rating-rule span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
  line-height: 1.45;
}

.clients-rating-visibility {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #c7daff;
  background: #f5f9ff;
  border-radius: 11px;
  margin-top: 12px;
}
.clients-rating-visibility b {
  font-size: 9px;
}
.clients-rating-visibility span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

.clients-rating-history {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.clients-rating-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
}
.clients-rating-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clients-rating-who {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
}
.clients-rating-card-head b {
  font-size: 9px;
  display: block;
}
.clients-rating-card-head span {
  font-size: 9px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.clients-rating-card p {
  font-size: 10px;
  color: var(--c-g600, #4d5752);
  line-height: 1.45;
  margin: 8px 0 0;
}
.clients-rating-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.clients-rating-tag {
  font-size: 9px;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
}

/* Iconsax ratings + demographic data cards */
.clients-profile-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.clients-profile-data-card {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.clients-data-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
  display: grid;
  place-items: center;
  margin-bottom: 7px;
}
.clients-profile-data-card small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
}
.clients-profile-data-card b {
  display: block;
  font-size: 11px;
  margin-top: 3px;
}
.clients-profile-data-card span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
  line-height: 1.4;
}

/* Devices & Security tab */
.clients-security-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.clients-security-stat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.clients-security-stat small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
}
.clients-security-stat b {
  display: block;
  font-size: 12px;
  margin: 4px 0 2px;
}
.clients-security-stat span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
}
.clients-security-section {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
  background: #fff;
}
.clients-security-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}
.clients-sec-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-g100);
  color: var(--c-g600, #4d5752);
  display: grid;
  place-items: center;
  flex: none;
}
.clients-security-section-head h4 {
  font-size: 11px;
  margin: 0 0 2px;
}
.clients-security-section-head p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.45;
}
.clients-right-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.clients-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.clients-tech-item {
  border: 1px solid var(--c-g100);
  border-radius: 9px;
  padding: 9px;
  background: var(--c-g50);
}
.clients-tech-item small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
}
.clients-tech-item b {
  display: block;
  font-size: 10px;
  margin-top: 3px;
  word-break: break-word;
}
.clients-session-list {
  display: grid;
  gap: 8px;
}
.clients-session-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
}
.clients-session-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #edf4ff;
  color: #316bc7;
  display: grid;
  place-items: center;
}
.clients-session-copy b {
  display: block;
  font-size: 10px;
}
.clients-session-copy span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
  line-height: 1.45;
}
.clients-session-side {
  text-align: right;
  min-width: 120px;
}
.clients-session-side small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 4px;
}
.clients-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.clients-auth-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.clients-auth-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.clients-auth-card b {
  display: block;
  font-size: 10px;
}
.clients-auth-card span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.clients-auth-card .clients-tag-ok,
.clients-auth-card .clients-tag-neutral {
  margin-left: auto;
}
.clients-security-timeline {
  display: grid;
}
.clients-security-event {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-g100);
}
.clients-security-event:last-child {
  border-bottom: 0;
}
.clients-security-event-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  color: var(--c-g600, #4d5752);
}
.clients-security-event b {
  display: block;
  font-size: 10px;
}
.clients-security-event span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
  line-height: 1.45;
}
.clients-security-event time {
  font-size: 9px;
  color: var(--c-g500);
  white-space: nowrap;
}
.clients-security-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #f8d986;
  background: #fff9e9;
  border-radius: 11px;
  padding: 10px;
}
.clients-security-warning svg {
  color: #8a5e00;
  flex: none;
}
.clients-security-warning b {
  display: block;
  font-size: 10px;
  color: #8a5e00;
}
.clients-security-warning span {
  display: block;
  font-size: 9px;
  color: var(--c-g600, #4d5752);
  margin-top: 2px;
  line-height: 1.45;
}

/* Modals reused across the module */
.clients-modal-description {
  font-size: 11px;
  color: var(--c-g500);
  line-height: 1.5;
  margin: 0 0 4px;
}
.clients-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.clients-field--full {
  grid-column: 1 / -1;
}
.clients-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
}
.clients-switch-row b {
  font-size: 10px;
  display: block;
}
.clients-switch-row span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.clients-default-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c7daff;
  background: #f5f9ff;
  border-radius: 11px;
  padding: 11px;
  margin-top: 14px;
}
.clients-default-banner > div:not(.clients-default-icon) b {
  display: block;
}
.clients-default-banner > div:not(.clients-default-icon) span {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-top: 2px;
}
.clients-default-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: #316bc7;
  display: grid;
  place-items: center;
  flex: none;
}
.clients-action-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 1280px) {
  .clients-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1000px) {
  .clients-security-overview,
  .clients-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .clients-detail-grid,
  .clients-edit-grid,
  .clients-reputation-grid {
    grid-template-columns: 1fr;
  }
  .clients-detail-card--wide,
  .clients-field--full {
    grid-column: auto;
  }
  .clients-perf-grid,
  .clients-address-grid {
    grid-template-columns: 1fr 1fr;
  }
  .clients-rating-dimensions {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .clients-security-overview,
  .clients-tech-grid,
  .clients-auth-grid {
    grid-template-columns: 1fr;
  }
  .clients-session-card {
    grid-template-columns: 40px 1fr;
  }
  .clients-session-side {
    grid-column: 2;
    text-align: left;
  }
  .clients-security-event {
    grid-template-columns: 30px 1fr;
  }
  .clients-security-event time {
    grid-column: 2;
  }
}
@media (max-width: 600px) {
  .clients-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .clients-perf-grid,
  .clients-address-grid,
  .clients-credit-values {
    grid-template-columns: 1fr;
  }
  .clients-profile-actions {
    margin-left: 0;
    width: 100%;
  }
  .clients-rating-dimensions {
    grid-template-columns: 1fr 1fr;
  }
}
/* Adaptado de carry_backoffice_support_v2_knowledge_base_articles.html — clases prefijadas con `support-`.
   Los colores usan los tokens reales de carry-design-system (--c-g50..--c-g500, --c-green, --c-green-dark,
   --c-mint, --c-text, --c-success, --c-warning, --c-danger, --c-info), no las variables --n, --g y --purple
   inventadas por el prototipo (ver módulo dashboard, que las tenía y quedaban transparentes sin error). */

.support-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.support-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-dark);
  font-weight: 850;
}
.support-head h1 {
  font-size: 28px;
  margin: 4px 0 5px;
}
.support-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  max-width: 640px;
}
.support-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.support-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.support-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
}
.support-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.support-kpi-top small {
  font-size: 8px;
  color: var(--c-g500);
  text-transform: uppercase;
}
.support-kpi-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.support-kpi-main {
  margin-top: 8px;
}
.support-kpi-main b {
  font-size: 21px;
}
.support-delta {
  font-size: 8px;
  font-weight: 800;
}
.support-delta.up {
  color: var(--c-green-dark);
}
.support-delta.down {
  color: var(--c-danger);
}
.support-kpi-meta {
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 7px;
}

.support-module-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.support-module-tab {
  height: 38px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  color: #4d5752;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.support-module-tab.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}
.support-tab-count {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 8px;
}

.support-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.support-filter-search {
  height: 40px;
  min-width: 250px;
  flex: 1;
  max-width: 380px;
  border: 1px solid var(--c-g300);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}
.support-filter-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 10px;
}
.support-filter-count {
  font-size: 9px;
  color: var(--c-g500);
  margin-left: auto;
  white-space: nowrap;
}

.support-requester {
  display: flex;
  align-items: center;
  gap: 9px;
}
.support-requester-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  flex: none;
}
.support-subtext {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}
.support-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.support-tag-purple {
  background: #f3eeff;
  color: #6d28d9;
}
.support-tag-info {
  background: #edf4ff;
  color: #316bc7;
}
.support-tag-orange {
  background: #fff2e5;
  color: #a65300;
}
.support-priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 850;
}
.support-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.support-sla {
  font-size: 8px;
  font-weight: 800;
}
.support-sla-good {
  color: var(--c-green-dark);
}
.support-sla-warn {
  color: #8a5e00;
}
.support-sla-bad {
  color: var(--c-danger);
}

/* Drawer de ticket — mismo patrón obligatorio de scroll que el resto de módulos:
   contenedor flex column + overflow hidden, head/foot flex:none, body flex:1 + overflow:auto. */
.support-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 41, 0.42);
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}
.carry-drawer.support-drawer {
  width: min(1050px, 98vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.carry-drawer.support-drawer.support-drawer-md {
  width: min(620px, 98vw);
}
.support-drawer-head {
  height: 74px;
  flex: none;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.support-drawer-head h3 {
  font-size: 15px;
  margin: 0;
}
.support-drawer-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.support-grow {
  flex: 1;
}
.support-drawer-body {
  padding: 18px;
  overflow: auto;
  flex: 1;
}
.support-drawer-foot {
  flex: none;
  padding: 14px 18px;
  border-top: 1px solid var(--c-g200);
  background: var(--c-g50);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.support-drawer-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.support-dtab {
  height: 34px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 800;
  color: #4d5752;
  cursor: pointer;
}
.support-dtab.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}

.support-ticket-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}
.support-ticket-card.carry-card {
  padding: 13px;
}
.support-ticket-card h4 {
  font-size: 10px;
  margin: 0 0 10px;
}
.support-ticket-card-wide {
  grid-column: 1 / -1;
}
.support-meta {
  display: grid;
  gap: 9px;
}
.support-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
}
.support-meta-row span {
  color: var(--c-g500);
}
.support-timeline {
  display: grid;
}
.support-event {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  padding-bottom: 14px;
}
.support-event-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.support-event b {
  font-size: 8px;
}
.support-event span {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
}

.support-message-card.carry-card {
  padding: 16px;
}
.support-message {
  display: flex;
  margin-bottom: 10px;
}
.support-message-agent {
  justify-content: flex-end;
}
.support-bubble {
  max-width: 72%;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 9px;
  line-height: 1.45;
  background: #fff;
  border: 1px solid var(--c-g200);
}
.support-message-agent .support-bubble {
  background: var(--c-mint);
  border-color: var(--c-green);
}
.support-bubble-internal {
  background: #fff7de;
  border-color: #f8d986;
  max-width: 88%;
}
.support-bubble-time {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 5px;
}
.support-attachment {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--c-g200);
  border-radius: 9px;
  background: #fff;
  margin-top: 7px;
}

/* Chats */
.support-chat-layout {
  display: grid;
  grid-template-columns: 330px 1fr 280px;
  height: 680px;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.support-chat-list {
  border-right: 1px solid var(--c-g200);
  display: flex;
  flex-direction: column;
}
.support-chat-list-head {
  padding: 12px;
  border-bottom: 1px solid var(--c-g200);
}
.support-chat-list-head h3 {
  font-size: 11px;
  margin: 0 0 8px;
}
.support-chat-search {
  height: 36px;
  border: 1px solid var(--c-g200);
  border-radius: 9px;
  padding: 0 9px;
  display: flex;
  align-items: center;
}
.support-chat-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 9px;
}
.support-chat-queue {
  overflow: auto;
  flex: 1;
}
.support-chat-item {
  padding: 11px 12px;
  border-bottom: 1px solid var(--c-g100);
  cursor: pointer;
}
.support-chat-item.active,
.support-chat-item:hover {
  background: #f0fff7;
}
.support-chat-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.support-chat-person {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  flex: none;
}
.support-chat-person-client {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.support-chat-person-driver {
  background: #edf4ff;
  color: #316bc7;
}
.support-chat-person-vendor {
  background: #fff2e5;
  color: #a65300;
}
.support-chat-person-courier {
  background: #f3eeff;
  color: #6d28d9;
}
.support-chat-item b {
  font-size: 9px;
}
.support-role {
  font-size: 7px;
  color: var(--c-g500);
}
.support-chat-item p {
  font-size: 8px;
  color: #4d5752;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px 0 0;
}
.support-chat-time {
  font-size: 7px;
  color: var(--c-g500);
  margin-left: auto;
}
.support-unread {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--c-green);
  color: var(--c-text);
  font-size: 7px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.support-chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.support-chat-head {
  height: 64px;
  flex: none;
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
}
.support-chat-head h4 {
  font-size: 10px;
  margin: 0;
}
.support-chat-head p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 2px 0;
}
.support-chat-messages {
  padding: 14px;
  overflow: auto;
  flex: 1;
  background: var(--c-g50);
}
.support-chat-compose {
  flex: none;
  border-top: 1px solid var(--c-g200);
  padding: 10px;
}
.support-compose-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 7px;
}
.support-compose-tab {
  height: 28px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.support-compose-tab.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}
.support-composer {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.support-composer textarea {
  flex: 1;
  min-height: 42px;
  border: 1px solid var(--c-g300);
  border-radius: 10px;
  padding: 9px;
  resize: vertical;
  font-size: 9px;
  font-family: inherit;
}
.support-chat-context {
  border-left: 1px solid var(--c-g200);
  overflow: auto;
}
.support-context-block {
  padding: 12px;
  border-bottom: 1px solid var(--c-g100);
}
.support-context-block h4 {
  font-size: 9px;
  margin: 0 0 9px;
}
.support-context-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
  margin-bottom: 7px;
}
.support-context-row span {
  color: var(--c-g500);
}
.support-context-actions {
  display: grid;
  gap: 6px;
}
.support-context-actions .carry-btn {
  height: 34px;
}

@media (max-width: 1280px) {
  .support-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
  .support-chat-layout {
    grid-template-columns: 300px 1fr;
  }
  .support-chat-context {
    display: none;
  }
}
@media (max-width: 900px) {
  .support-chat-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .support-chat-list {
    height: 300px;
    border-bottom: 1px solid var(--c-g200);
  }
  .support-chat-main {
    height: 600px;
  }
  .support-ticket-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .support-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Knowledge Base */
.support-kb-card-root.carry-card {
  padding: 16px;
}
.support-kb-head {
  margin-bottom: 14px;
}
.support-kb-head h1 {
  font-size: 19px;
  margin: 3px 0 4px;
}
.support-kb-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.support-kb-stat {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.support-kb-stat small {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.support-kb-stat b {
  display: block;
  font-size: 13px;
  margin: 4px 0 2px;
}
.support-kb-stat span {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
}
.support-kb-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow: auto;
}
.support-kb-subtab {
  height: 34px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 8px;
  font-weight: 850;
  color: #4d5752;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.support-kb-subtab.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}
.support-kb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.support-kb-toolbar .support-filter-search {
  max-width: 420px;
}
.support-kb-sort {
  margin-left: auto;
}
.support-kb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.support-kb-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  transition: 0.15s ease;
}
.support-kb-card:hover {
  border-color: var(--c-green);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.support-kb-card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.support-kb-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  flex: none;
}
.support-kb-card h4 {
  font-size: 10px;
  margin: 0 0 4px;
  line-height: 1.35;
}
.support-kb-card p {
  font-size: 8px;
  color: var(--c-g500);
  line-height: 1.45;
  margin: 0;
  min-height: 34px;
}
.support-kb-card .carry-tag {
  margin-left: auto;
  flex: none;
}
.support-kb-audiences {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.support-kb-audience {
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--c-g100);
  color: #4d5752;
  font-size: 7px;
  font-weight: 800;
}
.support-kb-audience-client {
  background: var(--c-mint);
  color: var(--c-green-dark);
}
.support-kb-audience-driver {
  background: #edf4ff;
  color: #316bc7;
}
.support-kb-audience-vendor {
  background: #fff2e5;
  color: #a65300;
}
.support-kb-audience-courier {
  background: #f3eeff;
  color: #6d28d9;
}
.support-kb-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--c-g100);
  font-size: 7px;
  color: var(--c-g500);
}
.support-kb-footer-metrics {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 9px;
  font-size: 7px;
  color: var(--c-g500);
}
.support-kb-footer-metrics b {
  font-size: 7px;
  color: #363e3a;
}
.support-kb-empty {
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  color: var(--c-g500);
  font-size: 9px;
}

.support-kb-macros-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.support-kb-macros-head h1 {
  font-size: 15px;
  margin: 0 0 3px;
}
.support-kb-macros-head p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
}
.support-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.support-macro-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.support-macro-card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.support-macro-card h4 {
  font-size: 9px;
  margin: 0 0 3px;
}
.support-macro-card p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 0;
}
.support-macro-preview {
  margin-top: 9px;
  padding: 9px;
  border-radius: 9px;
  background: var(--c-g50);
  font-size: 8px;
  color: #4d5752;
  line-height: 1.5;
}
.support-macro-actions {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.support-category-table {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  overflow: hidden;
}
.support-category-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px 110px 120px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--c-g100);
}
.support-category-row:last-child {
  border-bottom: 0;
}
.support-category-row-header {
  background: var(--c-g50);
  font-size: 7px;
  text-transform: uppercase;
  color: var(--c-g500);
  font-weight: 800;
}
.support-category-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.support-cat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  flex: none;
}
.support-category-name b {
  font-size: 8px;
}
.support-category-name span {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .support-category-row {
    grid-template-columns: 1fr 80px 90px;
  }
  .support-category-row > *:nth-child(4),
  .support-category-row > *:nth-child(5) {
    display: none;
  }
  .support-macro-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1200px) {
  .support-kb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .support-kb-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .support-kb-grid,
  .support-kb-summary {
    grid-template-columns: 1fr;
  }
}

/* Modales: new ticket / article detail / editor / category */
.support-modal-subtitle {
  font-size: 9px;
  color: var(--c-g500);
  margin: 6px 0 0;
}
.support-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.support-field-full {
  grid-column: 1 / -1;
}
.support-form-error {
  color: var(--c-danger);
  font-size: 9px;
  margin-top: 10px;
}
.support-audience-choice {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.support-audience-card {
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 11px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.support-audience-card.active {
  border-color: var(--c-green);
  background: #f0fff7;
}
.support-audience-card b {
  display: block;
  font-size: 8px;
  margin-top: 6px;
}
.support-audience-card span {
  font-size: 7px;
  color: var(--c-g500);
}
@media (max-width: 640px) {
  .support-edit-grid,
  .support-audience-choice {
    grid-template-columns: 1fr 1fr;
  }
}

.support-article-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
}
.support-article-reader-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-g200);
}
.support-article-reader-header p {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.55;
  margin: 6px 0 0;
}
.support-article-breadcrumb {
  font-size: 7px;
  color: var(--c-g500);
}
.support-article-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.support-article-body {
  padding-top: 14px;
}
.support-article-body h3 {
  font-size: 12px;
  margin: 18px 0 7px;
}
.support-article-body h4 {
  font-size: 10px;
  margin: 14px 0 6px;
}
.support-article-body p,
.support-article-body li {
  font-size: 9px;
  line-height: 1.65;
  color: #4d5752;
}
.support-article-body ol,
.support-article-body ul {
  padding-left: 18px;
}
.support-article-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  padding: 9px 0;
}
.support-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 8px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.support-article-note {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #edf4ff;
  border: 1px solid #c7daff;
  font-size: 8px;
  color: #2e61b8;
  line-height: 1.5;
  margin: 10px 0;
}
.support-article-warning {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #fff7de;
  border: 1px solid #f8d986;
  font-size: 8px;
  color: #8a5e00;
  line-height: 1.5;
  margin: 10px 0;
}
.support-article-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
}
.support-article-side-card {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 11px;
}
.support-article-side-card h4 {
  font-size: 9px;
  margin: 0 0 9px;
}
.support-article-side-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
  margin-bottom: 7px;
}
.support-article-side-row:last-child {
  margin-bottom: 0;
}
.support-article-side-row span {
  color: var(--c-g500);
}
.support-related-article {
  padding: 8px;
  border-radius: 9px;
  background: var(--c-g50);
  margin-bottom: 6px;
}
.support-related-article:last-child {
  margin-bottom: 0;
}
.support-related-article b {
  font-size: 8px;
  display: block;
}
.support-related-article span {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.support-version-item {
  display: flex;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-g100);
}
.support-version-item:last-child {
  border-bottom: 0;
}
.support-version-item b {
  font-size: 8px;
}
.support-version-item span {
  display: block;
  font-size: 7px;
  color: var(--c-g500);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .support-article-detail-layout {
    grid-template-columns: 1fr;
  }
  .support-article-sidebar {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .support-article-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Article editor */
.support-article-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.support-field-label {
  font-size: 9px;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}
.support-form-section {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}
.support-form-section h4 {
  font-size: 10px;
  margin: 0 0 9px;
}
.support-form-section p {
  font-size: 8px;
  color: var(--c-g500);
  margin: 0 0 9px;
}
.support-choice-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.support-choice-chip {
  height: 32px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 8px;
  font-weight: 800;
  color: #4d5752;
  cursor: pointer;
}
.support-choice-chip.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}
.support-editor-toolbar {
  height: 36px;
  border: 1px solid var(--c-g300);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--c-g50);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
}
.support-editor-tool {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.support-editor-tool:hover {
  background: #fff;
}
.support-article-editor {
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--c-g300);
  border-radius: 0 0 10px 10px;
  padding: 12px;
  font-size: 9px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
.support-slug-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-g300);
  border-radius: 10px;
  overflow: hidden;
}
.support-slug-prefix {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  background: var(--c-g50);
  color: var(--c-g500);
  font-size: 8px;
  border-right: 1px solid var(--c-g200);
}
.support-slug-input {
  border: 0;
  flex: 1;
  padding: 0 10px;
  font-size: 10px;
  color: var(--c-g500);
}
.support-review-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  background: var(--c-g50);
  margin-top: 12px;
}
.support-review-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.support-review-banner b {
  font-size: 8px;
  display: block;
}
.support-review-banner span {
  font-size: 7px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
@media (max-width: 900px) {
  .support-article-form-grid {
    grid-template-columns: 1fr;
  }
}
/* Adaptado de carry_backoffice_courier_b2b_management.html — clases prefijadas con `courier-`.
   Colores usan los tokens reales de carry-design-system (--c-g50..--c-g500, --c-green, --c-green-dark,
   --c-success, --c-warning, --c-danger, --c-info), no las variables --n y --g inventadas por el
   prototipo (ver módulo support: mismo hallazgo, y ver feedback_css_comment_slash_star.md). */

.courier-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.courier-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-dark);
  font-weight: 850;
}
.courier-head h1 {
  font-size: 28px;
  margin: 4px 0 5px;
}
.courier-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  max-width: 640px;
  line-height: 1.5;
}
.courier-pill {
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 10px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.courier-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.courier-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
}
.courier-kpi small {
  display: block;
  color: var(--c-g500);
  font-size: 9px;
}
.courier-kpi b {
  display: block;
  font-size: 19px;
  margin: 5px 0;
}
.courier-kpi span {
  font-size: 9px;
  color: var(--c-g500);
}

.courier-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin-bottom: 18px;
}
.courier-tab {
  height: 36px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 750;
  color: #4d5752;
  white-space: nowrap;
  cursor: pointer;
}
.courier-tab.active {
  background: var(--c-mint);
  border-color: var(--c-green);
  color: var(--c-green-dark);
}

.courier-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.courier-section-head h2 {
  font-size: 18px;
  margin: 0 0 3px;
}
.courier-section-head p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
  line-height: 1.5;
}

.courier-toolbar {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.courier-filter-search {
  height: 40px;
  min-width: 260px;
  border: 1px solid var(--c-g300);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
}
.courier-filter-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 11px;
  background: transparent;
}
.courier-filter-count {
  font-size: 9px;
  color: var(--c-g500);
}

.courier-subtext {
  display: block;
  font-size: 8px;
  color: var(--c-g500);
  margin-top: 2px;
}

.courier-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 360px;
  gap: 16px;
}
.courier-detail-card {
  position: sticky;
  top: 90px;
  height: max-content;
}
.courier-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.courier-detail-head h3 {
  font-size: 15px;
  margin: 0 0 3px;
}
.courier-detail-head p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
}
.courier-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.courier-meta small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.courier-meta b {
  font-size: 10px;
}
.courier-divider {
  height: 1px;
  background: var(--c-g100);
  margin: 14px 0;
}
.courier-actionbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.courier-credit-amount {
  display: block;
  font-size: 16px;
  margin-top: 3px;
}
.courier-credit-meter {
  height: 10px;
  background: var(--c-g100);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
}
.courier-credit-meter i {
  display: block;
  height: 100%;
  background: var(--c-green);
}

.courier-callout {
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.5;
  margin: 14px 0;
}
.courier-callout.info {
  background: #edf4ff;
  border: 1px solid #c7daff;
  color: #2e61b8;
}
.courier-callout.warn {
  background: #fff7de;
  border: 1px solid #f8d986;
  color: #8a5e00;
}
.courier-callout.success {
  background: #eaf8f2;
  border: 1px solid #b9f1d2;
  color: #0e7650;
}

.courier-mt-16 {
  margin-top: 16px;
}

.courier-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 340px;
  gap: 16px;
}
/* Mapa Mapbox de solo lectura (pestaña Cobertura) — mismo patrón que
   `freelancers/components/CoverageMapView.tsx`. El dibujo/edición vive en
   `CourierZoneMapField`, dentro del drawer CRUD (ver clases `-field`/
   `-canvas-wrap`/`-canvas` más abajo, sufijadas `-card-*` para no chocar). */
.courier-map-card {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-g50);
  min-height: 420px;
  position: relative;
}
.courier-map-card--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  color: var(--c-g500);
}
.courier-map-card--empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.courier-map-card--empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.courier-map-card-canvas {
  width: 100%;
  height: 420px;
}
.courier-map-card-toolbar {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
}
.courier-mapbtn {
  height: 34px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.courier-map-card-help {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 9px;
  color: #4d5752;
  max-width: 370px;
  z-index: 2;
}

/* Mapa Mapbox editable dentro del drawer CRUD (campo "Geometría" de tipo
   "map") — mismo patrón que `freelancers/components/ZoneMapField.tsx`. */
.courier-map-field {
  display: grid;
  gap: 8px;
}
.courier-map-field > label {
  font-size: 10px;
  font-weight: 800;
}
.courier-map-canvas-wrap {
  position: relative;
}
.courier-map-canvas {
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-g200);
}
.courier-map-canvas-wrap:fullscreen,
.courier-map-canvas-wrap:-webkit-full-screen {
  height: 100vh;
  background: #fff;
}
.courier-map-canvas-wrap:fullscreen .courier-map-canvas,
.courier-map-canvas-wrap:-webkit-full-screen .courier-map-canvas {
  height: 100%;
  border-radius: 0;
  border: none;
}
.courier-map-toolbar {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.courier-map-toolbar--zoom {
  top: 10px;
  right: 10px;
}
.courier-map-toolbar--draw {
  top: 10px;
  left: 10px;
}
.courier-map-toolbar button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #4d5752;
  cursor: pointer;
  padding: 0;
}
.courier-map-toolbar button:hover {
  background: var(--c-g50);
}
.courier-map-toolbar button.courier-is-active {
  background: #1e2329;
  border-color: #1e2329;
  color: #fff;
}
.courier-map-field small {
  font-size: 9px;
  color: var(--c-g500);
}
.courier-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  background: var(--c-g50);
  color: var(--c-g500);
}
.courier-map-empty p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  max-width: 320px;
}
.courier-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
}

.courier-sql {
  background: var(--c-text);
  color: #dce7e2;
  border-radius: 12px;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow: auto;
  margin-top: 14px;
}

.courier-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.courier-vehicle-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.courier-vehicle-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--c-mint);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  margin-bottom: 10px;
}
.courier-vehicle-card b {
  font-size: 11px;
  display: block;
}
.courier-vehicle-card span {
  font-size: 9px;
  color: var(--c-g500);
}

.courier-timeline {
  display: grid;
  gap: 12px;
}
.courier-event {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
}
.courier-event-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
}
.courier-event b {
  font-size: 10px;
  display: block;
}
.courier-event span,
.courier-event time {
  font-size: 9px;
  color: var(--c-g500);
}

/* Drawer CRUD genérico — usa el componente `Drawer` de carry-design-system
   (ya ancla a la derecha y maneja Escape/backdrop), mismo patrón que
   countries/freelancers. */
.courier-drawer-body .carry-alert {
  margin-top: 14px;
}
.courier-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 13px;
}
.courier-field--full {
  grid-column: 1 / -1;
}
.courier-block-title {
  font-size: 11px;
  font-weight: 900;
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-g100);
}
.courier-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-g100);
}
.courier-switch-row b {
  display: block;
  font-size: 12px;
}
.courier-switch-row span {
  font-size: 12px;
  color: var(--c-g500);
}

/* Foto de portada/avatar y "Acerca de" de la empresa (sección "profile" del
   drawer de empresa) — mismo patrón que `merchants-profile-*`. */
.courier-profile-preview {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 14px;
}
.courier-cover {
  height: 140px;
  background: linear-gradient(120deg, #1e2329, #363e3a 50%, #129a63);
  position: relative;
}
.courier-cover-actions {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  gap: 7px;
}
.courier-upload-chip {
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.courier-profile-summary {
  padding: 0 16px 16px;
  position: relative;
}
.courier-profile-avatar {
  width: 78px;
  height: 78px;
  border-radius: 20px;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin-top: -39px;
  position: relative;
  display: grid;
  place-items: center;
}
.courier-profile-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: var(--c-mint);
  display: grid;
  place-items: center;
  color: var(--c-green-dark);
  font-size: 18px;
  font-weight: 900;
}
.courier-avatar-edit {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-text);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.courier-about-box {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  background: var(--c-g50);
}
.courier-about-box h4 {
  margin: 0 0 6px;
  font-size: 11px;
}
.courier-about-textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  border: 1px solid var(--c-g300);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 10px;
  color: var(--c-text);
}
.courier-about-textarea:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(46, 234, 131, 0.18);
}
.courier-helper {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  color: var(--c-g500);
}

/* Campo de foto ilustrativo (vehículo, conductor) — caja placeholder +
   botón "Subir foto", sin subida de archivo real. */
.courier-photo-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
}
.courier-photo-box {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--c-g100), var(--c-g200));
  border: 1px solid var(--c-g200);
  display: grid;
  place-items: center;
  color: var(--c-g500);
}
.courier-photo-info {
  display: grid;
  gap: 3px;
}
.courier-photo-info b {
  font-size: 11px;
}
.courier-photo-info span {
  font-size: 9px;
  color: var(--c-g500);
}
.courier-photo-upload {
  justify-self: start;
  margin-top: 4px;
  height: 32px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}

@media (max-width: 1160px) {
  .courier-split,
  .courier-map-grid {
    grid-template-columns: 1fr;
  }
  .courier-detail-card {
    position: static;
  }
  .courier-kpis,
  .courier-vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .courier-kpis,
  .courier-vehicle-grid,
  .courier-form-grid {
    grid-template-columns: 1fr;
  }
  .courier-field--full {
    grid-column: auto;
  }
}
/*
 * Estilos del módulo Tarifas (Configuración → Tarifas), a partir de
 * carry_backoffice_tarifas_v6_carga_masiva.html (Fase 1: listado + drawer de
 * alta/edición). Mismo criterio que modules/countries y modules/freelancers:
 * custom properties reales de carry-design-system + piezas de layout que el
 * paquete no expone como componente.
 */

/*
 * El drawer de Tarifas es un wizard de 6 pasos (más ancho que el resto de la
 * app) — se escopea a `.tariffs-page` con selector de mayor especificidad que
 * `.carry-dialog .carry-drawer` (default del paquete) para no depender del
 * orden de imports, y sin tocar el override global de `.countries.css`
 * (drawers de un solo panel, se quedan en su ancho de 520px).
 */
.tariffs-page .carry-dialog .carry-drawer {
  width: min(880px, 94vw);
}
/*
 * El modal de carga masiva (Fase 4) también es más ancho que el default de
 * 520px — pero el ConfirmationDialog de "Eliminar tarifa" reusa el mismo
 * `.carry-modal` del paquete, así que se apunta por contenido (:has) en vez
 * de por `.tariffs-page` a secas, para no ensancharlo también.
 */
.tariffs-page .carry-dialog .carry-modal:has(.tariffs-bulk-steps) {
  width: min(820px, 96vw);
}

.tariffs-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.tariffs-page-head h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}
.tariffs-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.55;
  max-width: 640px;
}
.tariffs-page-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tariffs-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 18px;
}
.tariffs-switcher strong {
  font-size: 12px;
}
.tariffs-switcher .carry-select-wrap {
  min-width: 200px;
}

.tariffs-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.tariffs-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
}
.tariffs-kpi small {
  display: block;
  color: var(--c-g500);
  font-size: 12px;
}
.tariffs-kpi b {
  display: block;
  font-size: 20px;
  margin: 5px 0 2px;
}
.tariffs-kpi span {
  font-size: 12px;
  color: var(--c-g500);
}

.tariffs-filters {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.tariffs-zone-links {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tariffs-zone-tag {
  font-size: 11px;
  padding: 4px 7px;
  background: var(--c-g50);
  border-radius: 7px;
  color: var(--c-g600, #4d5752);
}

/* ---------- Drawer: wizard de pasos ---------- */
.tariffs-step-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.tariffs-step {
  border: 0;
  background: var(--c-g50);
  color: var(--c-g600, #4d5752);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.tariffs-step.tariffs-is-active {
  background: #1e2329;
  color: #fff;
}
.tariffs-step.tariffs-is-completed {
  background: #ecfdf3;
  color: #027a48;
}

.tariffs-segment-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.tariffs-segment-card {
  border: 1px solid var(--c-g200);
  border-radius: 13px;
  padding: 13px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
}
.tariffs-segment-card.tariffs-is-selected {
  border-color: var(--c-green-200, #b9f1d2);
  background: var(--c-mint);
}
.tariffs-segment-card b {
  display: block;
}
.tariffs-segment-card span {
  font-size: 12px;
  color: var(--c-g500);
}

.tariffs-zone-select {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: end;
  gap: 10px;
}
.tariffs-arrowbox {
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--c-g500);
}

.tariffs-tier-table {
  width: 100%;
  border-collapse: collapse;
}
.tariffs-tier-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-g500);
  text-align: left;
  padding: 8px;
}
.tariffs-tier-table td {
  padding: 6px 8px;
  vertical-align: middle;
}
.tariffs-tier-input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--c-g200);
  border-radius: 8px;
  padding: 0 8px;
  font: inherit;
}
.tariffs-add-row {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--c-green-dark);
  font-weight: 850;
  cursor: pointer;
  font-family: inherit;
}
.tariffs-tier-remove {
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--c-g500);
  cursor: pointer;
}

.tariffs-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-g100);
}
.tariffs-switch-row b {
  display: block;
  font-size: 12px;
}
.tariffs-switch-row span {
  font-size: 12px;
  color: var(--c-g500);
}

.tariffs-summary-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.tariffs-mini-kpi {
  background: var(--c-g50);
  border-radius: 12px;
  padding: 12px;
}
.tariffs-mini-kpi small {
  color: var(--c-g500);
}
.tariffs-mini-kpi strong {
  display: block;
  font-size: 18px;
  margin-top: 4px;
}

.tariffs-block-title {
  font-size: 12px;
  font-weight: 900;
  margin: 4px 0 8px;
}

.tariffs-view-tabs {
  display: flex;
  gap: 5px;
  background: var(--c-g100);
  border-radius: 12px;
  padding: 4px;
  width: max-content;
  margin-bottom: 16px;
}
.tariffs-view-tab {
  border: 0;
  background: transparent;
  padding: 8px 13px;
  border-radius: 9px;
  font-weight: 800;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  font-family: inherit;
}
.tariffs-view-tab.tariffs-is-active {
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.tariffs-sim-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}
.tariffs-sim-card {
  border: 1px solid var(--c-g200);
  border-radius: 15px;
  padding: 16px;
  background: #fff;
}
.tariffs-sim-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
}
.tariffs-sim-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tariffs-cost-line {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed var(--c-g200);
  font-size: 13px;
}
.tariffs-cost-total {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  font-size: 18px;
  font-weight: 900;
}
.tariffs-sim-empty {
  color: var(--c-g500);
  font-size: 13px;
  text-align: center;
  padding: 30px 10px;
}

.tariffs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 13px;
}
.tariffs-field--full {
  grid-column: 1 / -1;
}

.tariffs-matrix-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--c-g200);
  border-bottom: none;
  border-radius: 15px 15px 0 0;
  background: #fff;
}
.tariffs-matrix-subtitle {
  font-size: 12px;
  color: var(--c-g500);
  margin-top: 2px;
}
.tariffs-matrix-actions {
  display: flex;
  gap: 8px;
}
.tariffs-matrix-actions .carry-select-wrap {
  min-width: 140px;
}

.tariffs-matrix-wrap {
  border: 1px solid var(--c-g200);
  border-top: none;
  overflow: auto;
  background: #fff;
}
.tariffs-matrix {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
}
.tariffs-matrix th,
.tariffs-matrix td {
  text-align: center;
  border-right: 1px solid var(--c-g100);
  border-bottom: 1px solid var(--c-g100);
  padding: 11px 14px;
  font-size: 13px;
  white-space: nowrap;
}
.tariffs-matrix th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-g500);
  background: var(--c-g50);
}
.tariffs-matrix th:first-child,
.tariffs-matrix td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  font-weight: 800;
}
.tariffs-matrix-price {
  font-weight: 900;
  color: var(--c-green-dark);
}
.tariffs-matrix-empty {
  color: var(--c-g400);
}

@media (max-width: 1100px) {
  .tariffs-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .tariffs-filters {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .tariffs-sim-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .tariffs-segment-cards,
  .tariffs-zone-select,
  .tariffs-summary-kpis {
    grid-template-columns: 1fr;
  }
  .tariffs-arrowbox {
    display: none;
  }
  .tariffs-bulk-steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Carga masiva (Fase 4) ---------- */
.tariffs-bulk-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.tariffs-bulk-step {
  padding: 10px 11px;
  border-radius: 11px;
  background: var(--c-g100);
  color: var(--c-g500);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.tariffs-bulk-step.tariffs-is-active {
  background: #1e2329;
  color: #fff;
}
.tariffs-bulk-step.tariffs-is-done {
  background: #ecfdf3;
  color: #027a48;
}

.tariffs-bulk-template-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--c-green-200, #b9f1d2);
  background: var(--c-mint);
  border-radius: 14px;
  padding: 14px 15px;
  margin-bottom: 14px;
}
.tariffs-bulk-template-box b {
  display: block;
}
.tariffs-bulk-template-box p {
  margin: 4px 0 0;
  color: var(--c-g500);
  font-size: 12px;
}

.tariffs-bulk-upload-zone {
  display: block;
  border: 2px dashed var(--c-g300);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  background: var(--c-g50);
  cursor: pointer;
  transition: 0.15s;
  margin-bottom: 14px;
}
.tariffs-bulk-upload-zone.tariffs-is-dragging {
  border-color: var(--c-green-dark);
  background: var(--c-mint);
}
.tariffs-bulk-upload-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-size: 13px;
  font-weight: 900;
}
.tariffs-bulk-upload-zone h3 {
  margin: 0 0 5px;
  font-size: 15px;
}
.tariffs-bulk-upload-zone p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
}

.tariffs-bulk-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--c-g200);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.tariffs-bulk-file-meta {
  display: flex;
  align-items: center;
  gap: 11px;
}
.tariffs-bulk-file-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ecfdf3;
  color: #027a48;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}
.tariffs-bulk-file-size {
  font-size: 12px;
  color: var(--c-g500);
}

.tariffs-bulk-validation {
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.tariffs-bulk-validation-title {
  padding: 12px 14px;
  background: var(--c-g50);
  border-bottom: 1px solid var(--c-g200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 850;
}
.tariffs-bulk-validation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-g100);
  font-size: 12px;
}
.tariffs-bulk-validation-item:last-child {
  border-bottom: 0;
}
.tariffs-bulk-ok {
  color: #027a48;
  font-weight: 850;
}
.tariffs-bulk-error {
  color: var(--c-danger);
}
.tariffs-bulk-warn {
  color: #b54708;
}

.tariffs-bulk-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.tariffs-bulk-footer-actions {
  display: flex;
  gap: 8px;
}
/*
 * Estilos del módulo Países (Configuración → Países), a partir de
 * carry_backoffice_country_operations_crud_v3.html. Los valores de color
 * son las custom properties reales de carry-design-system; el resto son
 * piezas de layout que el paquete no expone como componente (barra de
 * país, tabs de módulo, grid del drawer CRUD) — mismo criterio que
 * app/styles.css y modules/security.
 */

.countries-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.countries-page-head h1 {
  font-size: 28px; /* typeScale.h2 */
  letter-spacing: -0.7px;
  margin: 4px 0 5px;
}
.countries-page-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px; /* typeScale.label-sm */
  line-height: 1.55;
  max-width: 640px;
}

.countries-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 18px;
}
.countries-switcher strong {
  font-size: 12px; /* typeScale.label-sm */
}
.countries-switcher .carry-select-wrap {
  min-width: 160px;
}
.countries-switcher-spacer {
  margin-left: auto;
}

.countries-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 18px;
}
.countries-tab {
  height: 36px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 12px; /* typeScale.label-sm */
  font-weight: 700;
  color: var(--c-g600, #4d5752);
  white-space: nowrap;
  font-family: inherit;
}
.countries-tab.countries-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}

.countries-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.countries-kpi {
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 14px;
}
.countries-kpi small {
  display: block;
  color: var(--c-g500);
  font-size: 12px;
}
.countries-kpi b {
  display: block;
  font-size: 20px; /* typeScale.h4, medido 19px en el prototipo */
  margin: 5px 0 2px;
}
.countries-kpi span {
  font-size: 12px;
  color: var(--c-g500);
}

.countries-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 13px;
}
.countries-field--full {
  grid-column: 1 / -1;
}
.countries-block-title {
  font-size: 12px; /* typeScale.label-sm */
  font-weight: 900;
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-g100);
}
.countries-checkbox-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-g100);
}
.countries-checkbox-row b {
  font-size: 12px;
  display: block;
}
.countries-checkbox-row span {
  font-size: 12px;
  color: var(--c-g500);
}
.countries-drawer-body .carry-alert {
  margin-top: 14px;
}
/*
 * El <Drawer> del paquete no acepta className, así que este override es
 * global — hoy es seguro porque este es el único Drawer de la app. Si otro
 * módulo agrega un segundo Drawer con un ancho distinto, hay que revisar
 * este selector (o pedirle al paquete un prop de ancho/className).
 */
.carry-drawer {
  width: min(520px, 92vw); /* medido en el prototipo: 92vw, no el 88vw por defecto del paquete */
}

.countries-map-field {
  display: grid;
  gap: 8px;
}
.countries-map-field > label {
  font-size: 12px; /* typeScale.label-sm, mismo criterio que .field label del prototipo */
  font-weight: 800;
}
.countries-map-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.countries-map-mode {
  display: flex;
  gap: 6px;
}
.countries-map-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  font-family: inherit;
}
.countries-map-mode-btn.countries-is-active {
  background: var(--c-mint);
  border-color: var(--c-green-200, #b9f1d2);
  color: var(--c-green-dark);
}
.countries-map-polygon-controls {
  display: grid;
  gap: 8px;
}
.countries-map-field-error {
  color: var(--c-danger);
}
.countries-map-canvas-wrap {
  position: relative;
}
.countries-map-canvas {
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-g200);
}
.countries-map-canvas-wrap:fullscreen,
.countries-map-canvas-wrap:-webkit-full-screen {
  height: 100vh;
  background: #fff;
}
.countries-map-canvas-wrap:fullscreen .countries-map-canvas,
.countries-map-canvas-wrap:-webkit-full-screen .countries-map-canvas {
  height: 100%;
  border-radius: 0;
  border: none;
}
.countries-map-toolbar {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.countries-map-toolbar--zoom {
  top: 10px;
  right: 10px;
}
.countries-map-toolbar--draw {
  top: 10px;
  left: 10px;
}
.countries-map-toolbar button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--c-g600, #4d5752);
  cursor: pointer;
  padding: 0;
}
.countries-map-toolbar button:hover {
  background: var(--c-g50);
}
.countries-map-toolbar button.countries-is-active {
  background: #1e2329; /* colors.gray[900] */
  border-color: #1e2329;
  color: #fff;
}
.countries-map-field small {
  font-size: 12px;
  color: var(--c-g500);
}
.countries-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--c-g300);
  border-radius: 12px;
  background: var(--c-g50);
  color: var(--c-g500);
}
.countries-map-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
}
.countries-map-empty code {
  background: var(--c-g100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.countries-map-radius-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.countries-map-radius-input {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
}
.countries-map-radius-input input {
  width: 64px;
  height: 32px;
  border: 1px solid var(--c-g300);
  border-radius: 8px;
  padding: 0 8px;
  font: inherit;
}

@media (max-width: 1100px) {
  .countries-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .countries-form-grid {
    grid-template-columns: 1fr;
  }
  .countries-field--full {
    grid-column: auto;
  }
}
/*
 * Estilos del módulo Versiones (ver conceptualización en
 * carry_backoffice_versions_v2_automatic.html, sin las pestañas "Origen del
 * release" y "Build metadata" — pedido explícito del usuario). Reutiliza los
 * tokens reales de carry-design-system (--c-*) en vez de los hex del
 * prototipo, mismo criterio que el resto de los módulos.
 */

.versions-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.versions-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-dark);
  font-weight: 850;
}
.versions-head h1 {
  font-size: 28px;
  margin: 4px 0 5px;
}
.versions-head p {
  margin: 0;
  color: var(--c-g500);
  font-size: 12px;
  line-height: 1.5;
  max-width: 620px;
}
.versions-pill {
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 10px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  height: max-content;
  white-space: nowrap;
}

/* Update banner */
.versions-update-banner {
  background: #eff6ff;
  border: 1px solid #c7daff;
  color: #254e91;
  border-radius: 13px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.versions-update-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ddeaff;
  display: grid;
  place-items: center;
  flex: none;
}
.versions-update-copy {
  min-width: 0;
  flex: 1;
}
.versions-update-copy b {
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}
.versions-update-copy span {
  font-size: 10px;
  line-height: 1.45;
  color: #4b6fa7;
}
.versions-update-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tabs */
.versions-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin-bottom: 18px;
}
.versions-tab {
  height: 36px;
  border: 1px solid var(--c-g200);
  background: #fff;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 750;
  color: var(--c-g500);
  white-space: nowrap;
  cursor: pointer;
}
.versions-tab--active {
  background: var(--c-mint);
  border-color: var(--c-g200);
  color: var(--c-green-dark);
}

/* Overview cards */
.versions-overview-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1180px) {
  .versions-overview-grid {
    grid-template-columns: 1fr;
  }
}
.versions-card {
  height: 100%;
}
.versions-card--current {
  border-color: var(--c-g200);
  background: linear-gradient(135deg, var(--c-mint), #fff 68%);
}
.versions-vtop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.versions-vlabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-g500);
  font-weight: 850;
}
.versions-vnum {
  font-size: 26px;
  font-weight: 800;
  margin: 5px 0 4px;
}
.versions-vdesc {
  font-size: 10px;
  color: var(--c-g500);
  line-height: 1.45;
}
.versions-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.versions-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 14px;
}
.versions-meta {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 9px;
  background: #fff;
}
.versions-meta small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
  margin-bottom: 3px;
}
.versions-meta b {
  font-size: 10px;
  word-break: break-all;
}
@media (max-width: 820px) {
  .versions-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* Delta grid */
.versions-delta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-bottom: 16px;
}
@media (max-width: 1180px) {
  .versions-delta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .versions-delta-grid {
    grid-template-columns: 1fr;
  }
}
.versions-delta {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  background: #fff;
  padding: 13px;
}
.versions-delta small {
  display: block;
  font-size: 9px;
  color: var(--c-g500);
}
.versions-delta b {
  display: block;
  font-size: 22px;
  margin: 4px 0;
}
.versions-delta span {
  font-size: 9px;
  color: var(--c-g500);
}
.versions-delta--new {
  color: var(--c-green-dark);
}
.versions-delta--imp {
  color: #316bc7;
}
.versions-delta--fix {
  color: #8a5e00;
}

/* Pipeline */
.versions-pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 1180px) {
  .versions-pipeline {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .versions-pipeline {
    grid-template-columns: 1fr;
  }
}
.versions-step {
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  background: #fff;
  padding: 11px;
}
.versions-step-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.versions-step b {
  display: block;
  font-size: 10px;
  margin-bottom: 3px;
}
.versions-step span {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.35;
}

/* Changes / history groups */
.versions-group {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  margin-bottom: 10px;
}
.versions-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.versions-gicon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--c-mint);
  color: var(--c-green-dark);
  flex: none;
}
.versions-group-head h3 {
  font-size: 11px;
  margin: 0;
}
.versions-group-head span {
  font-size: 9px;
  color: var(--c-g500);
}
.versions-change {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid var(--c-g100);
}
.versions-change:first-of-type {
  border-top: 0;
}
.versions-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 10px;
  font-weight: 900;
}
.versions-change b {
  display: block;
  font-size: 10px;
  margin-bottom: 2px;
}
.versions-change span {
  font-size: 9px;
  color: var(--c-g500);
  line-height: 1.4;
}

/* History */
.versions-release-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) {
  .versions-release-layout {
    grid-template-columns: 1fr;
  }
}
.versions-release-list {
  display: grid;
  gap: 8px;
}
.versions-release-item {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  cursor: pointer;
}
.versions-release-item--active {
  border-color: var(--c-green);
  box-shadow: 0 0 0 2px rgba(46, 234, 131, 0.1);
}
.versions-release-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.versions-release-item h3 {
  font-size: 12px;
  margin: 0 0 2px;
}
.versions-release-item p {
  font-size: 9px;
  color: var(--c-g500);
  margin: 0;
}
.versions-release-bottom {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.versions-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.versions-detail-header h2 {
  font-size: 20px;
  margin: 0 0 4px;
}
.versions-detail-header p {
  font-size: 10px;
  color: var(--c-g500);
  margin: 0;
}
.versions-detail-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}
@media (max-width: 820px) {
  .versions-detail-meta {
    grid-template-columns: 1fr 1fr;
  }
}

/* Modal */
.versions-modal-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #eaf3ff;
  color: #316bc7;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
/*
 * Estilos del módulo de autenticación. Vive fuera de app-shell (AppLayout)
 * a propósito — no hay sidebar/navbar/footer antes de iniciar sesión. Los
 * valores de color son, salvo aclaración, las custom properties reales que
 * carry-design-system/styles.css ya expone (--c-green, --c-text, --c-g500,
 * etc.), nunca colores inventados. Los degradados oscuros del panel visual
 * (`.auth-visual`) son la única excepción: el prototipo
 * carry_backoffice_login_flow_v6.html los usa para un panel de marketing y
 * el paquete no expone tokens de degradado.
 */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(#fff, var(--c-g50));
  font-family: var(--c-font);
  /* El prototipo de login nunca fija font-size en su <body> (a diferencia
     del prototipo de Seguridad y acceso, que usa 14px): su base real,
     medida en el navegador, es el 16px por defecto — typeScale.body-md. */
  font-size: 16px;
}
.auth-page--mfa {
  background:
    radial-gradient(circle at 50% 10%, rgba(46, 234, 131, 0.1), transparent 22rem),
    #fff;
}

.auth-card {
  width: min(930px, 100%);
  background: #fff;
  border: 1px solid var(--c-g200);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

.auth-card--single {
  width: min(520px, 100%);
  grid-template-columns: 1fr;
}

.auth-visual {
  background: linear-gradient(145deg, #0f2a20, #0a5b3f); /* sin token DS: degradado de marketing del prototipo */
  color: #fff;
  padding: 38px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.auth-visual:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border: 50px solid rgba(46, 234, 131, 0.13); /* colors.green[500] @ 13% */
  border-radius: 50%;
  right: -120px;
  bottom: -110px;
}
.auth-visual-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  z-index: 1;
}
/*
 * El asset de CarryAppIcon (JPEG sin transparencia) trae ~9% de margen
 * blanco alrededor de la forma — mismo recorte que .app-icon-crop en
 * src/styles.css (ver AppLayout.tsx), reproducido acá porque este módulo no
 * importa CSS de otros módulos.
 */
.auth-icon-crop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 22%;
  overflow: hidden;
  flex: 0 0 auto;
}
.auth-icon-crop .carry-app-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  flex-shrink: 0;
}
.auth-visual h2 {
  font-size: 32px; /* typeScale.h3, medido 33px en el prototipo real */
  line-height: 1.12;
  max-width: 380px;
  margin: auto 0 14px;
  position: relative;
  z-index: 1;
}
.auth-visual p {
  color: #cfe5db;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
  /* sin font-size propio en el prototipo: hereda el 16px base (typeScale.body-md) */
}
.auth-visual small {
  color: #9fc9b7;
  position: relative;
  z-index: 1;
  margin-top: 24px;
  font-size: 14px; /* typeScale.body-sm, medido 13.33px (default de <small>) en el prototipo */
}

.auth-form {
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.auth-form--center {
  text-align: center;
}
.auth-form h1 {
  font-size: 28px; /* typeScale.h2, medido 27px en el prototipo real */
  margin: 7px 0 8px;
}
.auth-form > p {
  font-size: 14px;
  color: var(--c-g500);
  margin: 0 0 22px;
  line-height: 1.5;
}
.auth-form--center > p {
  margin-bottom: 18px;
}

.auth-field {
  margin-bottom: 13px;
}
.full {
  width: 100%;
  margin-top: 4px;
}
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.auth-link {
  color: var(--c-green-dark);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.auth-link:hover {
  text-decoration: underline;
}
.auth-link:disabled {
  color: var(--c-gray-400, #9ca3af);
  cursor: not-allowed;
}
.auth-link:disabled:hover {
  text-decoration: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-g400, #9ca7a1);
  font-size: 12px;
  margin: 18px 0;
}
.auth-divider:before,
.auth-divider:after {
  content: "";
  height: 1px;
  background: var(--c-g200);
  flex: 1;
}

.auth-help {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  background: #fff;
}
.auth-help-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 32px;
}
.auth-help-copy {
  min-width: 0;
  flex: 1;
}
.auth-help-copy b {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}
.auth-help-copy span {
  display: block;
  font-size: 12px;
  color: var(--c-g500);
  line-height: 1.4;
}

.auth-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  background: var(--c-mint);
  color: var(--c-green-dark);
  font-size: 28px;
  font-weight: 900;
}
.auth-circle--warn {
  background: #fff7de;
  color: #8a5e00;
}
.auth-circle--info {
  background: #edf4ff;
  color: #316bc7;
}

.auth-rules {
  display: grid;
  gap: 6px;
  margin: 4px 0 13px;
  width: 100%;
}
.auth-rule {
  font-size: 12px;
  color: var(--c-g500);
}
.auth-rule--ok {
  color: var(--c-success);
  font-weight: 700;
}

/* MFA: pantalla de una sola columna, sin panel visual */
.auth-card--mfa {
  padding: 56px 54px;
}
.auth-card--mfa h1 {
  font-size: 28px; /* typeScale.h2, nearest al 30px del prototipo */
}
.auth-card--mfa > .auth-form > p {
  max-width: 390px;
}
.auth-mfa-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-mint);
  color: var(--c-green-dark);
  margin: 0 auto 18px;
  font-size: 28px;
  font-weight: 900;
}
.auth-otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  gap: 10px;
  width: min(366px, 100%);
  margin: 8px auto 18px;
}
.auth-otp input {
  min-width: 0;
  height: 56px;
  border: 1px solid var(--c-g300);
  border-radius: 12px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  padding: 0;
  font-family: inherit;
}
.auth-otp input:focus {
  border-color: #19c96d;
  box-shadow: 0 0 0 3px rgba(46, 234, 131, 0.18);
  outline: none;
}
.auth-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(366px, 100%);
  margin: 0 auto 6px;
  font-size: 12px;
  color: var(--c-g500);
}
.auth-mfa-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  width: min(366px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.auth-mfa-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.auth-mfa-help {
  text-align: center;
  margin-top: 18px;
  max-width: 390px;
}
.auth-mfa-help strong {
  display: block;
  color: var(--c-text);
  margin-bottom: 3px;
}

@media (max-width: 760px) {
  .auth-card {
    grid-template-columns: 1fr;
  }
  .auth-visual {
    display: none;
  }
  .auth-form {
    padding: 32px 24px;
  }
}
@media (max-width: 620px) {
  .auth-card--mfa {
    padding: 36px 22px;
  }
  .auth-otp {
    grid-template-columns: repeat(3, 1fr);
    max-width: 260px;
  }
  .auth-otp input {
    height: 52px;
  }
}

/*
 * ==========================================================
 * V10 · Fondo degradado Carry + estados restantes del flujo
 * (carry_backoffice_login_flow_v10_gradient.html)
 * ==========================================================
 */
.auth-page,
.auth-page--mfa {
  background:
    radial-gradient(circle at 12% 18%, rgba(46, 234, 131, 0.18), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(18, 154, 99, 0.12), transparent 24%),
    radial-gradient(circle at 72% 82%, rgba(221, 248, 232, 0.92), transparent 28%),
    linear-gradient(135deg, #f8faf9 0%, #f0fff7 48%, #ddf8e8 100%);
  background-attachment: fixed;
}
.auth-card {
  box-shadow:
    0 24px 60px rgba(30, 35, 41, 0.1),
    0 6px 20px rgba(18, 154, 99, 0.06);
}
@media (max-width: 950px) {
  .auth-page,
  .auth-page--mfa {
    background:
      radial-gradient(circle at 20% 15%, rgba(46, 234, 131, 0.16), transparent 30%),
      linear-gradient(145deg, #f8faf9 0%, #f0fff7 55%, #ddf8e8 100%);
    background-attachment: fixed;
  }
}

/* Mostrar/ocultar contraseña + aviso de Bloq Mayús */
.auth-password-wrap {
  position: relative;
}
.auth-password-wrap .carry-input {
  padding-right: 40px;
}
.auth-password-toggle {
  position: absolute;
  right: 4px;
  bottom: 0;
  height: 40px;
  width: 34px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--c-g500);
  cursor: pointer;
}
.auth-password-toggle:hover {
  background: var(--c-g100);
  color: var(--c-text);
}
.auth-caps-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a5e00;
  background: #fff7de;
  border: 1px solid #f3d57b;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11px;
  margin-top: 6px;
}

/* Spinner de carga en botones */
.auth-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(30, 35, 41, 0.18);
  border-top-color: currentColor;
  animation: auth-spin 0.75s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--c-g500);
}

.auth-link--center {
  display: block;
  text-align: center;
  margin-top: 12px;
}

.auth-circle--danger {
  background: #fff0f0;
  color: var(--c-danger);
}

/* MFA · método alternativo */
.auth-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 16px;
}
.auth-method-card {
  border: 1px solid var(--c-g200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
  justify-items: start;
  font-family: inherit;
}
.auth-method-card:hover,
.auth-method-card--active {
  border-color: var(--c-green);
  background: #f0fff7;
}
.auth-method-card b {
  font-size: 12px;
}
.auth-method-card span {
  font-size: 11px;
  color: var(--c-g500);
}
@media (max-width: 800px) {
  .auth-method-grid {
    grid-template-columns: 1fr;
  }
}

/* Otra sesión activa */
.auth-device-card {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--c-g200);
  border-radius: 11px;
  padding: 10px;
  margin: 9px 0;
}
.auth-device-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #edf4ff;
  color: #316bc7;
  display: grid;
  place-items: center;
}
.auth-device-card b {
  font-size: 12px;
  display: block;
}
.auth-device-card span {
  font-size: 11px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.auth-device-tag {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-green-dark);
  background: var(--c-mint);
  border: 1px solid var(--c-g200);
}
.auth-device-status {
  font-size: 11px;
  color: var(--c-g500);
}

/* Alcance / país */
.auth-scope-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 16px;
}
.auth-scope-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--c-g200);
  border-radius: 10px;
}
.auth-scope-item--disabled {
  opacity: 0.55;
}
.auth-scope-item b {
  font-size: 12px;
  display: block;
}
.auth-scope-item span {
  font-size: 11px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}
.auth-policy-note {
  font-size: 11px;
  color: var(--c-g500);
  line-height: 1.5;
  margin-top: 10px;
}

/* Estados administrativos / resiliencia (rate-limit, network-error, maintenance…) */
.auth-state-card {
  border: 1px solid var(--c-g200);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  background: #fff;
  text-align: left;
}
.auth-state-card h4 {
  font-size: 12px;
  margin: 0 0 4px;
}
.auth-state-card p {
  font-size: 11px;
  margin: 0;
  color: var(--c-g500);
  line-height: 1.5;
}
.auth-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 28px;
  margin-top: 5px;
}
/* Alert de countdown (LockedPage/RateLimitPage): mismo tamaño de letra que el
   texto, todo en una fila, centrado horizontal y verticalmente dentro del
   alert. Escopeado a .auth-countdown-alert para no tocar otros usos de
   carry-alert/.auth-countdown en el resto de la app. */
.auth-countdown-alert {
  margin: 20px;
}
.auth-countdown-alert .carry-alert {
  justify-content: center;
}
.auth-countdown-alert .auth-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
}
.auth-countdown-alert .auth-countdown {
  font-size: inherit;
  font-weight: 800;
  margin-top: 0;
}
.auth-state-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-g100);
}
.auth-state-row:last-child {
  border-bottom: 0;
}
.auth-state-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-g100);
  display: grid;
  place-items: center;
  flex: none;
}
.auth-state-row b {
  font-size: 12px;
  display: block;
}
.auth-state-row span {
  font-size: 11px;
  color: var(--c-g500);
  display: block;
  margin-top: 2px;
}

/* Navegador no soportado */
.auth-browser-box {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  flex-wrap: wrap;
}
.auth-browser-chip {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--c-g100);
  font-size: 11px;
  font-weight: 800;
}