/* Fernanvel • white / graphite / racing red */
:root {
    color-scheme: light;
    --bg:#fff; --surface:#fff; --surface-2:#f7f7f9; --surface-3:#f1f1f4;
    --line:#e2e2e8; --text:#22232b; --muted:#656570;
    --primary:#c91f32; --primary-2:#a51224; --accent:#b7172a;
    --green:#16734c; --red:#bd2032; --yellow:#936100; --blue:#555563; --success:#16734c;
    --radius:16px;
}
body {background:#fff;}
a {color:var(--primary);}
a:hover {color:var(--primary-2);}
h1,h2,h3 {letter-spacing:-.025em;}
.sidebar {background:linear-gradient(180deg,#fff,#fafafb); border-right:1px solid var(--line); gap:22px; box-shadow:4px 0 24px #26263304;}
.brand {justify-content:center; padding:0 0 12px; border-bottom:1px solid var(--line);}
.brand-identity {display:block; width:218px; max-width:100%; height:auto;}
.brand-mark {background:#fff; box-shadow:none;}
.nav-label {color:#797985; font-size:.68rem; letter-spacing:.19em;}
.nav-link {color:#565661; border:1px solid transparent; font-size:.92rem;}
.nav-link span {color:var(--primary);}
.nav-link:hover {background:#fff4f5; color:var(--primary);}
.nav-link.active {background:linear-gradient(100deg,#fdecee,#fff8f9); color:#a9192b; border-color:#f4d9de; box-shadow:inset 3px 0 var(--primary);}
.system-status {background:#fff; border-color:var(--line);}
.status-dot {background:var(--primary); box-shadow:0 0 0 5px #c91f3210; flex-shrink:0;}
.avatar {background:#fbecef; color:var(--primary); border:1px solid #f3d7dd;}
.icon-button,.menu-button {color:var(--primary);}
.topbar::after {background:linear-gradient(90deg,#c91f32, #c91f3220 25%,transparent 75%);}
.topbar h1 {font-weight:800;}
.search {background:#fafafb; border-color:#dedee5; min-width:0;}
.search > span {color:var(--primary);}
.search input {color:var(--text);}
.search input::placeholder,input::placeholder,textarea::placeholder {color:#797984; opacity:1;}
.top-actions .search {width:250px;}
.inner-search {width:350px; max-width:100%;}
.btn {border-radius:10px; transition:background .18s,box-shadow .18s,transform .18s;}
.btn-primary {background:linear-gradient(125deg,#da293a,#b9192c); color:#fff; box-shadow:0 5px 14px #c91f3225; border-color:#b9192c;}
.btn-primary:hover {background:#ac1526; box-shadow:0 7px 18px #c91f3235; color:#fff;}
.btn-secondary,.btn-edit,.btn-print,.btn-export-csv,.btn-export-pdf {background:#fff; color:#b4192c; border-color:#e8bfc6; box-shadow:none;}
.btn-secondary:hover,.btn-edit:hover,.btn-print:hover,.btn-export-csv:hover,.btn-export-pdf:hover {background:#fff0f2; color:#971325; box-shadow:none; filter:none;}
.btn-receipt {background:#c91f32; color:#fff; border-color:#c91f32;}
.btn-receipt:hover {background:#a51224; color:#fff; box-shadow:0 5px 14px #c91f3220;}
.btn-danger {background:#fff; color:#a9192b; border-color:#edcdd2;}
.btn-danger:hover {background:#fce9ed;}
.btn:disabled {opacity:.55; cursor:wait; transform:none;}
.row-actions {flex-wrap:wrap;}
.row-actions .btn {white-space:nowrap;}
.panel {background:#fff; border-color:var(--line); box-shadow:0 8px 32px #24242f06;}
.panel-heading h2::before {content:''; display:inline-block; width:4px; height:.85em; margin-right:10px; background:var(--primary); border-radius:2px; transform:skew(-12deg);}
.hero-operation {position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(115deg,#fff 40%,#f9f5f6); border-color:#e7dce0; box-shadow:0 10px 35px #25252c05; padding:36px;}
.hero-operation::before {content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(122deg,transparent 66%,#c91f3208 66%,#c91f3208 69%,transparent 69%,transparent 79%,#c91f3210 79%,#c91f3210 80%,transparent 80%); pointer-events:none;}
.hero-operation::after {content:''; position:absolute; left:0; top:0; height:100%; width:4px; background:linear-gradient(#e13b46,#aa1426);}
.hero-operation h2 {font-weight:850; font-size:clamp(1.65rem,2.8vw,2.4rem); line-height:1.15;}
.hero-operation .hero-symbol {width:260px; max-width:32%; opacity:1; filter:drop-shadow(0 12px 15px #20202512);}
.eyebrow {color:#b1192b; font-size:.69rem; letter-spacing:.17em;}
.hero-actions {display:flex; flex-wrap:wrap; gap:10px;}
.quick-card {position:relative; background:#fff; border-color:var(--line); transition:border-color .2s,box-shadow .2s; padding:22px;}
.quick-card:hover {color:var(--text); border-color:#de9ba6; box-shadow:0 8px 24px #c91f3208;}
.quick-card strong {color:var(--primary); font-size:.98rem;}
.metric-card,.metric-card:nth-child(2),.metric-card:nth-child(3),.metric-card:nth-child(4) {background:#fff; border-color:var(--line); box-shadow:0 5px 20px #23233004;}
.metric-card::after,.metric-card:nth-child(2)::after,.metric-card:nth-child(3)::after,.metric-card:nth-child(4)::after {background:#c91f3209; border-radius:20px; transform:rotate(30deg);}
.metric-card strong {font-variant-numeric:tabular-nums;}
.metric-highlight {background:linear-gradient(125deg,#fff0f2,#fff)!important; border-color:#edc3cb!important; box-shadow:none;}
.metric-highlight strong {color:#ae182a;}
.metric-highlight span,.metric-highlight small {color:#7e4a55;}
.table-wrap {background:#fff; border-color:var(--line);}
.data-table th {background:#f7f7f9; color:#686873; font-size:.73rem; letter-spacing:.08em;}
.data-table td {color:var(--text); border-color:#ededf1;}
.data-table tbody tr:hover {background:#fff9fa;}
.data-table td:first-child strong {color:#b7192c;}
.filter-tabs {padding:5px; background:#f7f7f9; border:1px solid #eeeef2; border-radius:13px; width:fit-content; max-width:100%;}
.filter-tabs button {color:#64646e;}
.filter-tabs button:hover {color:#ac1729; background:#ffedef; border-color:#f4d6dc;}
.filter-tabs button.active {background:#c91f32; color:#fff; border-color:#c91f32; box-shadow:0 3px 8px #c91f3220;}
.badge {background:#eeeef2; color:#53535e;}
.badge-success,.badge-paid,.badge-delivered,.badge-income {color:#176443; background:#e9f5ee;}
.badge-awaiting_payment {color:#805414; background:#fff3d8;}
.badge-ready,.badge-out_for_delivery {color:#9f2335; background:#fcecf0;}
.badge-cancelled,.badge-expense {color:#a41a2d; background:#fce8ed;}
input,select,textarea {color:var(--text); background:#fcfcfd; border-color:#d8d8e1;}
input:focus,select:focus,textarea:focus {border-color:var(--primary); box-shadow:0 0 0 3px #c91f3210;}
input[readonly] {background:#f1f1f4; color:#686873;}
input[type=file]::file-selector-button {background:#fff0f2; color:#a91428; border:1px solid #eac2ca; padding:8px 12px; border-radius:7px; margin-right:12px; cursor:pointer;}
.form-grid label > span,.form-stack label > span,.report-filter label > span {color:#454550;}
.money-input {background:#fcfcfd;}
.money-input > span {color:#ac1d30;}
.money-input:focus-within {border-color:var(--primary); box-shadow:0 0 0 3px #c91f3210;}
.report-summary span {color:var(--muted);}
.report-note {background:#fff4f5; color:#67434b;}
.quote-result {background:linear-gradient(120deg,#fff1f3,#fff); border-color:#ebc2ca; color:#9d1628;}
.integration-tabs a {color:#696974;}
.integration-tabs a.active {color:var(--primary);}
.integration-logo,.flow-grid span {background:#fcecf0; color:var(--primary);}
.workflow-summary span {color:var(--primary);}
.credential-alert {background:#fff8e9; border-color:#ebdcb6;}
.credential-alert strong {color:#79530c;}
.credential-alert p {color:#796442;}
.alert-success {color:#166343; background:#edf8f1; border-color:#c3dfce;}
.alert-error {color:#a1192c; background:#fff0f2; border-color:#efc4cd;}
.whatsapp-instance-summary > div {background:#fff; border-color:var(--line);}
.whatsapp-qr-card {background:linear-gradient(140deg,#fff,#fff5f6); border-color:#e8bcc5;}
.whatsapp-icon,.transaction-icon {color:var(--primary); background:#fcecf0;}
.login-body {background:linear-gradient(135deg,#fff 45%,#f7f2f4);}
.login-card {position:relative; overflow:hidden; background:#fff; box-shadow:0 25px 80px #29212b12; border-color:#e5dce0;}
.login-card::before {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#971123,#f04a53,#a71023);}
.login-identity {width:245px; max-width:100%; display:block; margin:0 auto 28px;}
:focus-visible {outline:2px solid #b51b2e; outline-offset:3px;}
@media(min-width:851px) and (max-width:1100px) {.top-actions .search {display:none;}.hero-operation .hero-symbol {width:185px;}}
@media(max-width:850px) {.sidebar {overflow-y:auto; box-shadow:10px 0 35px #29212b14;}.hero-operation {padding:26px;}.hero-operation .hero-symbol {max-width:28%;}}
@media(max-width:600px) {.hero-actions {display:grid; grid-template-columns:1fr;}.hero-actions .btn {width:100%;}.hero-operation {padding:24px;}.topbar h1 {font-size:1.22rem;}.filter-tabs {gap:4px;}.filter-tabs button {padding:0 10px; font-size:.84rem;}.form-actions {flex-wrap:wrap;}.inner-search {width:100%;}.login-card {padding:28px;}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important;}.btn:hover {transform:none;}}
@media print {.hero-operation,.panel,.metric-card {box-shadow:none!important; background:#fff!important;}}

/* Cockpit graphite: contrast, machined edges and illuminated red accents. */
.sidebar {
    background:radial-gradient(ellipse at 0 0,#4c182332,transparent 55%),linear-gradient(155deg,#22242d,#111219 65%);
    color:#f5f5f8; border-right:1px solid #37313b;
    box-shadow:8px 0 32px #14141f12;
}
.sidebar::after {content:''; position:absolute; right:0; top:12%; width:2px; height:32%; background:linear-gradient(transparent,#ec354e,transparent); pointer-events:none;}
.sidebar .brand {border-bottom-color:#ffffff14; padding-bottom:20px;}
.sidebar .brand-identity {filter:drop-shadow(0 6px 12px #0005);}
.sidebar .nav-label {color:#a6a3b2; font-size:.65rem;}
.sidebar small {color:#aaa8b7;}
.sidebar .nav-link {position:relative; color:#d0cfd9; border-radius:5px 13px 5px 13px; min-height:52px; transition:background .2s,border-color .2s;}
.sidebar .nav-link span {color:#ff6074; width:30px; min-width:30px; height:30px; display:grid; place-items:center; border:1px solid #f74b6525; background:#f74b6509; border-radius:7px; font-size:1.2rem;}
.sidebar .nav-link:hover {background:#ffffff08; border-color:#ffffff14; color:#fff;}
.sidebar .nav-link.active {background:linear-gradient(110deg,#8c203955,#ea304316); border-color:#ff53673d; color:#fff; box-shadow:inset 3px 0 #f4435e,0 4px 15px #0002;}
.sidebar .nav-link.active::after {content:''; width:5px; height:5px; margin-left:auto; flex-shrink:0; border-radius:50%; background:#ff6378; box-shadow:0 0 9px #ff526dcc;}
.sidebar .nav-link.active span {color:#fff; border-color:#fd536859; background:#d9254133;}
.sidebar .system-status {background:linear-gradient(120deg,#29232d,#1b1c25); border-color:#3e303d; border-radius:6px 14px;}
.sidebar .system-status strong {color:#f3e8ed;}
.sidebar .status-dot {background:#ff526b; box-shadow:0 0 0 4px #ff526b12,0 0 12px #ff526b55;}
.sidebar .user-box {padding-top:16px; border-top:1px solid #ffffff12;}
.sidebar .avatar {background:linear-gradient(140deg,#52303d,#2a2531); color:#ffb0bd; border-color:#6c3444; border-radius:6px 13px;}
.sidebar .icon-button {color:#ff8b9d;}

.btn {
    position:relative; isolation:isolate; overflow:hidden;
    border-radius:5px 14px 5px 14px; letter-spacing:.015em;
    border-width:1px; font-weight:750;
    transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;
}
.btn::after {content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 30%,#ffffff1c 48%,transparent 66%); transform:translateX(-140%); transition:transform .5s ease; z-index:-1;}
.btn:hover::after {transform:translateX(140%);}
.btn:active {transform:translateY(1px);}
.btn-primary,.btn-receipt {
    color:#fff; border-color:#a3142b;
    background:linear-gradient(165deg,#ff5965 0%,#e22d44 12%,#c21734 56%,#a30e2b 100%);
    box-shadow:inset 0 1px #ffadb680,inset 0 -2px #76031e55,0 4px 0 #890e24,0 8px 18px #b4163330;
    text-shadow:0 1px 1px #780a2a66;
}
.btn-primary:hover,.btn-receipt:hover {color:#fff; background:linear-gradient(150deg,#f44659,#bf1230); border-color:#a20d28; box-shadow:inset 0 1px #ffb3c080,0 4px 0 #890e24,0 10px 23px #cf224144;}
.btn-secondary,.btn-edit,.btn-print,.btn-export-csv,.btn-export-pdf {
    color:#fff; border-color:#373744;
    background:linear-gradient(160deg,#494a57 0%,#30313d 18%,#20212c 100%);
    box-shadow:inset 0 1px #ffffff30,inset 3px 0 #ec3552,0 3px 0 #161620,0 6px 13px #1717221c;
}
.btn-secondary:hover,.btn-edit:hover,.btn-print:hover,.btn-export-csv:hover,.btn-export-pdf:hover {color:#fff; background:linear-gradient(150deg,#444450,#282833); border-color:#c43450; box-shadow:inset 0 1px #ffffff30,inset 3px 0 #ff4967,0 3px 0 #171720,0 7px 18px #29203324; filter:none;}
.btn-danger {background:linear-gradient(135deg,#fff,#fff1f4); border-color:#d98999; color:#a21331; box-shadow:inset 0 1px #fff,0 3px 0 #e5bec8,0 5px 12px #a2133110;}
.btn-danger:hover {color:#8c1029; background:#ffe7ed; border-color:#be2747; box-shadow:0 3px 0 #d7a0af,0 6px 15px #a2133120;}
.btn-edit::before,.btn-danger::before {content:''; display:block; width:16px; height:16px; flex:0 0 16px; background:currentColor; mask-repeat:no-repeat; mask-position:center; mask-size:contain;}
.btn-edit::before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m15 5 4 4M4 20l5-1L21 7a2.8 2.8 0 0 0-4-4L5 15z'/%3E%3C/svg%3E");}
.btn-danger::before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/g%3E%3C/svg%3E");}
.btn-small {min-height:40px; padding:8px 14px; font-size:.82rem;}
.row-actions {gap:12px; padding-block:3px;}
.row-actions form {display:flex;}
.customer-table .row-actions {flex-direction:column; align-items:stretch; min-width:132px;}
.customer-table .row-actions .btn {width:100%;}
.menu-button {background:linear-gradient(145deg,#333541,#1d1e28); border-color:#48404a; color:#ff637a; box-shadow:inset 0 1px #ffffff25,0 3px 9px #19182115; border-radius:5px 11px;}
.filter-tabs button.active {background:linear-gradient(145deg,#e8314c,#b91534); border-color:#ba1935; box-shadow:inset 0 1px #ffffff30,0 3px 8px #b4193225;}
@media(max-width:850px) {.sidebar {box-shadow:12px 0 45px #12121e45;}}
@media(prefers-reduced-motion:reduce) {.btn::after {display:none;}}

[data-fixed-pricing][hidden], [data-km-pricing][hidden] {display:none!important;}