:root{
--bg:#131720;--bg2:#191e2b;--bg3:#1e2537;--bg4:#252d42;--bg5:#2e384f;
--border:#242c3f;--border2:#2e3a52;
--accent:#f5a623;--accent2:#e8891a;
--green:#22c55e;--green2:#16a34a;
--red:#ef4444;--red2:#dc2626;
--blue:#3b82f6;--blue2:#2563eb;
--purple:#a855f7;--cyan:#06b6d4;
--text:#e8eaf2;--text2:#9aa2ba;--text3:#5a6278;
--radius:10px;--radius2:14px;
--shadow:0 4px 28px rgba(0,0,0,.5);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:var(--bg2);}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
/* LOGIN */
#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 55% 35%,#181b24 0%,#0b0d12 70%);padding-top:50px;}
@keyframes updateSpin{to{transform:rotate(360deg);}}
@keyframes toastSlideIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
@keyframes pointBounce{0%,100%{transform:translateX(0);}50%{transform:translateX(7px);}}
@keyframes verifyPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.55),0 2px 6px rgba(0,0,0,.15);}50%{box-shadow:0 0 0 8px rgba(245,166,35,0),0 2px 6px rgba(0,0,0,.15);}}
@keyframes starPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
@keyframes bannerShimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes arrowUpPoint{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes arrowDiagonalPoint{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(5px,-5px) rotate(0deg);}}
@keyframes updateChipPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.55),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);}50%{box-shadow:0 0 0 7px rgba(245,166,35,0),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);}}
@keyframes updateChipPulseUrgent{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.65),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);}50%{box-shadow:0 0 0 8px rgba(239,68,68,0),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);}}
#updateChip{display:none;align-items:center;gap:5px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--accent);border-radius:10px;padding:5px 10px;color:var(--text);font-size:11px;font-weight:700;cursor:pointer;animation:updateChipPulse 1.6s ease-in-out infinite;flex-shrink:0;transition:transform .15s ease;white-space:nowrap;letter-spacing:.2px;}
#updateChip svg{flex-shrink:0;}
#updateChip:hover{transform:translateY(-1px);}
#updateChip.show{display:inline-flex;}
#updateChip.urgent{border-color:#ef4444;animation:updateChipPulseUrgent 1.1s ease-in-out infinite;}
#updateChip.urgent svg{stroke:#ef4444;}
@keyframes swWarnPopIn{from{opacity:0;transform:translateY(-8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes swWarnHandPoint{0%,100%{transform:translate(0,0) rotate(-10deg);}50%{transform:translate(3px,-4px) rotate(0deg);}}
/* Campos apagados en el form de zona (funciones avanzadas no conectadas todavía) */
.zona-campo-apagado{position:relative;opacity:.55;pointer-events:none;border-radius:8px;padding:6px 4px;transition:opacity .2s ease;}
.zona-campo-apagado:hover{opacity:.7;}
.zona-campo-apagado input,.zona-campo-apagado select,.zona-campo-apagado textarea{background:var(--bg)!important;cursor:not-allowed!important;border-color:var(--border)!important;}
.zona-campo-apagado label::after{content:' 🔒';font-size:10px;color:var(--text3);margin-left:4px;}
.zona-campo-apagado::after{content:attr(data-tooltip);position:absolute;bottom:-14px;left:6px;font-size:9px;color:var(--text3);font-style:italic;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 12px);}
.zona-section-title{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.zona-section-title.disabled{color:var(--text3);}
.zona-gps-badge{display:none;align-items:center;gap:5px;background:linear-gradient(180deg,rgba(34,197,94,.18),rgba(34,197,94,.08));border:1px solid #22c55e;border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;color:#22c55e;margin-top:6px;width:fit-content;}
.zona-gps-badge.show{display:inline-flex;}
.zona-map-preview{width:100%;height:160px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;margin-top:8px;overflow:hidden;position:relative;}
.zona-map-preview.empty::before{content:'📍 Buscá una ubicación arriba para ver el mapa';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;text-align:center;padding:10px;}
.app-version-tag{display:inline-block;font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.5px;margin-left:6px;opacity:.7;}
.banner-icon-pulse{animation:starPulse 2s ease-in-out infinite;display:inline-block;transform-origin:center;}
.banner-finger{display:inline-block;animation:pointBounce 1.1s ease-in-out infinite;font-size:17px;flex-shrink:0;line-height:1;}
.banner-verify-btn{animation:verifyPulse 2.2s ease-in-out infinite;}
.banner-shimmer-text{background:linear-gradient(90deg,var(--text) 0%,var(--text) 40%,var(--accent) 50%,var(--text) 60%,var(--text) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bannerShimmer 4.5s ease-in-out infinite;}
body.no-auth .topbar,body.no-auth .sidebar,body.no-auth .sidebarCollapseBtn,body.no-auth #menuBtn,body.no-auth .main>.topbar,body.no-auth .overlay-sidebar,body.no-auth #appScreen .topbar,body.no-auth #appScreen .sidebar,body.no-auth #sidebarOverlay,body.no-auth #aiBtn,body.no-auth #aiPanel,body.no-auth #codexNotifBell,body.no-auth #codexNotifPanel,body.no-auth #_panelAcciones,body.no-auth #_panelAccionesOverlay{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
/* Doble guardia: si #appScreen NO está visible (login/perfil inicial), ocultar SIEMPRE flechita y hamburger, sin depender de body.no-auth */
body:not(:has(#appScreen.show)) .sidebarCollapseBtn,
body:not(:has(#appScreen.show)) #menuBtn,
body:not(:has(#appScreen.show)) .sidebar,
body:not(:has(#appScreen.show)) .topbar,
body:not(:has(#appScreen.show)) #sidebarOverlay,
body:not(:has(#appScreen.show)) .overlay-sidebar{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.lcard{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);padding:48px 42px;width:100%;max-width:430px;box-shadow:var(--shadow);animation:fadeIn .4s ease;}
.llogo h1{font-family:'Bebas Neue',sans-serif;font-size:46px;letter-spacing:4px;color:var(--accent);line-height:1;text-align:center; animation: slideInDown 0.8s ease-out forwards;}
.llogo p{color:var(--text2);font-size:12px;margin-top:5px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-bottom:30px;}
/* Bandera 🇵🇾 inline al lado del título — separación equilibrada */
.bandera-py{display:inline-block;font-size:.55em;margin-left:.45em;vertical-align:middle;letter-spacing:normal;line-height:1;animation:slideInDown 1s ease-out forwards}
.lmode{text-align:center;margin-top:12px;font-size:11px;padding:6px 10px;border-radius:6px;}
.lmode.sup{background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.2);}
.lmode.loc{background:rgba(245,166,35,.1);color:var(--accent);border:1px solid rgba(245,166,35,.2);}
.ldemo{margin-top:16px;padding:11px 13px;background:var(--bg3);border-radius:var(--radius);font-size:11px;color:var(--text2);line-height:1.9;}
.ldemo b{color:var(--accent);font-family:'JetBrains Mono',monospace;}
/* FORM */
.fg{margin-bottom:13px;}
.fg label{display:block;font-size:11px;color:var(--text2);margin-bottom:5px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;}
.fg input,.fg select,.fg textarea{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:var(--radius);padding:11px 13px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .18s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.12);}
/* Global focus fallback para inputs/selects/textareas que usan outline:none inline o fuera de .fg */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,0.18);}
.fg select option{background:var(--bg3);}
.fg textarea{resize:vertical;min-height:65px;}
.pwd-wrap{position:relative;display:flex;align-items:center;}
.pwd-wrap input{width:100%;padding-right:40px!important;}
.pwd-eye{position:absolute;right:0;top:0;bottom:0;width:44px;background:none;border:none;cursor:pointer;color:var(--text3);padding:0;line-height:1;transition:color .15s;display:flex;align-items:center;justify-content:center;touch-action:manipulation;}
.pwd-eye:hover{color:var(--accent);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
/* BUTTONS */
.btn{padding:10px 20px;border-radius:var(--radius);border:none;cursor:pointer;font-size:13px;font-family:'DM Sans',sans-serif;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--ease-out);white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,.12);touch-action:manipulation;}
.btn:hover{transform:translateY(-1px);box-shadow:0 3px 6px rgba(0,0,0,.15);}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.1);}
.btn-primary{background:var(--accent);color:#000;box-shadow:0 4px 14px rgba(245,166,35,.35);}.btn-primary:hover{background:var(--accent2);}
.btn-gradient{background:var(--accent-gradient,var(--accent));color:#fff;border:none;}
/* Topbar icon buttons — Premium nivel Apple/Linear */
.topbar-icon-btn{
width:40px;height:40px;
border-radius:14px;
border:1px solid transparent;
background:rgba(255,255,255,0.04);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:var(--text);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
margin-right:8px;
position:relative;
font-size:16px;
transition:all .25s cubic-bezier(.4,0,.2,1);
overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.05);
}
.topbar-icon-btn::before{
content:'';
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(245,166,35,.22),rgba(245,166,35,0));
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.topbar-icon-btn::after{
content:'';
position:absolute;inset:0;
border-radius:14px;
padding:1px;
background:linear-gradient(135deg,rgba(245,166,35,.6),rgba(245,166,35,0));
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.topbar-icon-btn:hover{
background:rgba(245,166,35,.08);
transform:translateY(-1px);
box-shadow:0 4px 16px rgba(245,166,35,.15),0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
.topbar-icon-btn:hover::before{opacity:1;}
.topbar-icon-btn:hover::after{opacity:1;}
.topbar-icon-btn:active{
transform:translateY(0);
box-shadow:0 1px 2px rgba(0,0,0,.1),inset 0 2px 6px rgba(0,0,0,.12);
}
.topbar-icon-btn svg{
width:18px;height:18px;
stroke:currentColor;
transition:transform .4s cubic-bezier(.4,0,.2,1),color .25s ease;
}
.topbar-icon-btn:hover svg{
color:var(--accent);
transform:scale(1.08);
}
.topbar-icon-btn.spinning{
background:rgba(245,166,35,.08);
border-color:rgba(245,166,35,.2);
}
.topbar-icon-btn.spinning svg{
animation:premiumSpin 1.1s cubic-bezier(.5,0,.5,1) infinite;
color:var(--accent);
}
@keyframes premiumSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
/* GPS pill — indicador integrado en topbar */
.gps-pill{display:none;align-items:center;gap:6px;padding:5px 10px 5px 8px;background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.35);border-radius:99px;color:#16a34a;font-size:11px;font-weight:600;letter-spacing:0.2px;cursor:pointer;transition:background .15s var(--ease-out),border-color .15s var(--ease-out);white-space:nowrap;height:30px;margin-right:8px;font-family:inherit;}
.gps-pill.active{display:inline-flex;}
.gps-pill:hover{background:rgba(34,197,94,0.18);border-color:rgba(34,197,94,0.5);}
.gps-pill-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,0.7);animation:gpsPulse 2s ease-in-out infinite;}
@keyframes gpsPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.7)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.gps-pill-time{font-size:10px;opacity:0.8;}
:root[data-theme="dark"] .gps-pill{background:rgba(34,197,94,0.15);color:#4ade80;border-color:rgba(34,197,94,0.4);}
@media (max-width: 480px){.gps-pill-text{display:none;}.gps-pill{padding:5px 8px;}}
.topbar-icon-btn.theme-btn span{
font-size:18px;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
transition:transform .35s var(--ease-spring),filter .2s var(--ease-out);
display:inline-block;
}
.topbar-icon-btn.theme-btn:hover span{
transform:rotate(20deg) scale(1.15);
}
.topbar-icon-btn.theme-btn svg{
transition:transform .35s var(--ease-spring),color .2s var(--ease-out);
display:block;
}
.topbar-icon-btn.theme-btn:hover svg{
transform:rotate(20deg) scale(1.15);
}
:root[data-theme="light"] #themeIconSun,
:root[data-theme="light"] #themeIconMoon{
color:#4a4a4a;
}
:root[data-theme="dark"] #themeIconSun{
color:#f5a623;
}
:root[data-theme="dark"] #themeIconMoon{
color:#e0e0e0;
}
[data-theme="light"] .topbar-icon-btn{
background:rgba(0,0,0,.04);
box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="light"] .topbar-icon-btn:hover{
background:rgba(245,166,35,.1);
}
#codexNotifBell{overflow:visible !important;}
#codexNotifBadge{
position:absolute;
top:-2px;right:-2px;
min-width:16px;height:16px;
border-radius:8px;
background:linear-gradient(180deg,#ef4444,#dc2626);
color:#fff;
font-size:9px;
font-weight:700;
letter-spacing:0;
line-height:16px;
text-align:center;
display:none;
align-items:center;justify-content:center;
padding:0 4px;
border:2px solid var(--bg);
box-shadow:0 1px 3px rgba(239,68,68,.4);
z-index:10;
pointer-events:none;
animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{
0%,100%{box-shadow:0 1px 3px rgba(239,68,68,.4)}
50%{box-shadow:0 1px 8px rgba(239,68,68,.7)}
}
.btn-secondary{background:linear-gradient(180deg,var(--bg2),var(--bg3))!important;color:#ffffff!important;border:1px solid var(--accent)!important;font-weight:700!important;text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);}
.btn-secondary:hover{background:var(--accent)!important;color:#000!important;border-color:var(--accent)!important;transform:translateY(-1px);text-shadow:none;box-shadow:0 4px 14px rgba(245,166,35,.35);}
.btn-secondary:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 2px 4px rgba(0,0,0,.15);}
[data-theme="light"] .btn-secondary{color:#1a1f2c!important;text-shadow:none;background:linear-gradient(180deg,#fff,#f3f4f6)!important;}
[data-theme="light"] .btn-secondary:hover{color:#fff!important;background:var(--accent)!important;}
.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);border:1px solid #b91c1c;color:#fff;}
.btn-danger:hover:not(:disabled){background:linear-gradient(180deg,#dc2626,#b91c1c);border-color:#b91c1c;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.3)}
.btn-success{background:linear-gradient(180deg,#22c55e,#16a34a);border:1px solid #15803d;color:#fff;}
.btn-success:hover:not(:disabled){background:linear-gradient(180deg,#16a34a,#15803d);border-color:#15803d;transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,.3)}
.btn-warning{background:linear-gradient(180deg,#fbbf24,#f59e0b);border:1px solid #d97706;color:#000;box-shadow:0 3px 10px rgba(245,158,11,.30);}
.btn-warning:hover:not(:disabled){background:linear-gradient(180deg,#f59e0b,#d97706);border-color:#d97706;transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,158,11,.35)}
.btn-purple{background:linear-gradient(180deg,#a855f7,#7c3aed);border:1px solid #6d28d9;color:#fff;}
.btn-purple:hover:not(:disabled){background:linear-gradient(180deg,#7c3aed,#6d28d9);border-color:#6d28d9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(168,85,247,.3)}
.btn-blue{background:linear-gradient(180deg,#3b82f6,#2563eb);border:1px solid #1d4ed8;color:#fff;}
.btn-blue:hover:not(:disabled){background:linear-gradient(180deg,#2563eb,#1d4ed8);border-color:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.btn-danger:active,.btn-success:active,.btn-blue:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn-full{width:100%;justify-content:center;}
.btn-sm{padding:8px 16px;font-size:11px;border-radius:8px;letter-spacing:0.3px;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none;filter:saturate(.6);}
.btn:focus-visible,.btnSm:focus-visible,.topbar-icon-btn:focus-visible,.mapBtn:focus-visible,.filterBtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,166,35,0.35);}
.scan-manual{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
.scan-manual input{flex:1 1 170px;min-width:0;background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:var(--radius);padding:10px 12px;font-size:16px;font-family:'DM Sans',sans-serif;outline:none;}
.scan-manual input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.12);}
.btn{transition:transform .12s var(--ease-out),box-shadow .15s var(--ease-out),background .15s var(--ease-out),opacity .15s var(--ease-out)}
.btn:active:not(:disabled){transform:translateY(1px)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#000;padding:8px 16px;border-radius:0 0 8px 0;font-weight:600;z-index:99999}
.skip-link:focus{left:0;min-height:44px;padding:12px 16px;max-width:90vw;}
/* MAP BUTTONS */
.dropdown-premium{appearance:none;-webkit-appearance:none;background:linear-gradient(180deg,var(--bg2),var(--bg3));background-image:linear-gradient(180deg,var(--bg2),var(--bg3)),url("data:image/svg+xml;utf8,");background-repeat:no-repeat,no-repeat;background-position:0 0, right 12px center;background-size:100% 100%, 12px 12px;border:1px solid var(--border2);border-radius:12px;padding:9px 36px 9px 14px;color:var(--text);font:500 13px 'DM Sans',sans-serif;cursor:pointer;transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out),background .15s var(--ease-out);min-width:160px;letter-spacing:.1px;}
.dropdown-premium:hover{border-color:var(--accent);background-image:linear-gradient(180deg,var(--bg3),var(--bg2)),url("data:image/svg+xml;utf8,");}
.dropdown-premium:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.2);}
:root[data-theme="light"] .dropdown-premium,:root[data-theme="light-soft"] .dropdown-premium{background-image:linear-gradient(180deg,var(--bg2),var(--bg3)),url("data:image/svg+xml;utf8,");}
.map-btn{background:var(--bg2);border:1px solid var(--accent);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.30);min-height:36px;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap;touch-action:manipulation;}
.map-btn:hover{background:var(--bg3);border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.35);}
.map-btn:active{background:var(--bg4);}
.map-btn.active{background:var(--blue);border-color:var(--blue2);color:#fff;}
.map-btn.btn-end{background:#0f766e;border-color:#0d9488;color:#fff;} .map-btn.btn-end:hover{background:#0d9488;}
.map-btn.btn-start{background:#16a34a;border-color:#15803d;color:#fff;} .map-btn.btn-start:hover{background:#15803d;}
.map-btn.btn-locate{background:rgba(14,165,233,.12);border-color:#0ea5e9;color:#0ea5e9;} .map-btn.btn-locate:hover{background:rgba(14,165,233,.22);}
.mapa-estilo-panel{position:absolute;top:12px;right:12px;z-index:10000;display:flex;flex-direction:column;gap:6px;background:transparent;border:none;padding:0;box-shadow:none;}
.mapa-estilo-btn{width:36px;height:36px;border-radius:10px;background:rgba(20,22,28,0.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.18);transition:transform .15s var(--ease-out,ease-out), background .15s var(--ease-out,ease-out), border-color .15s var(--ease-out,ease-out), box-shadow .15s var(--ease-out,ease-out);padding:0;}
.mapa-estilo-btn:hover{background:rgba(20,22,28,0.95);transform:translateY(-1px);border-color:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,166,35,0.2);}
.mapa-estilo-btn.active{background:linear-gradient(180deg, var(--accent), #c47a1a);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(245,166,35,0.35);}
.mapa-estilo-btn svg{width:18px;height:18px;stroke-width:1.8;display:block;}
:root[data-theme="light"] .mapa-estilo-btn,
:root[data-theme="light-soft"] .mapa-estilo-btn{background:rgba(255,255,255,0.92);color:#1a1a1a;border:1px solid rgba(0,0,0,0.1);}
:root[data-theme="light"] .mapa-estilo-btn:hover,
:root[data-theme="light-soft"] .mapa-estilo-btn:hover{background:rgba(255,255,255,1);}
:root[data-theme="light"] .mapa-estilo-btn.active,
:root[data-theme="light-soft"] .mapa-estilo-btn.active{background:linear-gradient(180deg, var(--accent), #c47a1a);color:#fff;border-color:var(--accent);box-shadow:0 4px 14px rgba(196,122,26,0.4), 0 0 0 2px rgba(196,122,26,0.15);}
:root[data-theme="light"] .mapa-estilo-btn:hover:not(.active),
:root[data-theme="light-soft"] .mapa-estilo-btn:hover:not(.active){background:rgba(255,255,255,0.98);border-color:rgba(196,122,26,0.4);color:#c47a1a;transform:translateY(-1px);}
@media(max-width:639px){
.mapa-estilo-panel{flex-direction:row;flex-wrap:wrap;gap:4px;background:rgba(15,18,28,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:6px;top:auto;bottom:52px;right:12px;max-width:calc(5*36px + 4*4px + 12px);display:none;}
.mapa-estilo-panel.mobile-open{display:flex;}
.mapa-estilo-toggle{position:absolute;bottom:10px;right:12px;z-index:10001;display:none;width:38px;height:38px;border-radius:10px;background:rgba(15,18,28,0.88);border:1px solid rgba(255,255,255,0.15);color:#fff;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);}
}
@media(max-width:639px){
.mapa-estilo-toggle{display:flex;bottom:56px!important;right:12px;}
.mapa-locate-btn{bottom:10px;right:12px;}
}
:root[data-theme="light"] .mapa-locate-btn.active,
:root[data-theme="light-soft"] .mapa-locate-btn.active{background:linear-gradient(180deg, var(--accent), #c47a1a);color:#fff;border-color:var(--accent);}
.mapa-locate-btn{position:absolute;bottom:4px;right:4px;z-index:10000;width:36px;height:36px;border-radius:10px;background:rgba(20,22,28,0.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.18);transition:transform .15s var(--ease-out,ease-out), background .15s var(--ease-out,ease-out), border-color .15s var(--ease-out,ease-out);}
.mapa-locate-btn:hover{background:rgba(20,22,28,0.95);transform:translateY(-1px);border-color:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,166,35,0.2);}
.mapa-locate-btn svg{width:18px;height:18px;stroke-width:1.8;}
/* SFP — Side Filter Panel */
.sfp-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:800;width:22px;height:56px;background:var(--accent);border-radius:8px 0 0 8px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:-2px 0 10px rgba(0,0,0,.3);transition:width .15s ease;}
.sfp-tab:hover{width:28px;}
.sfp-tab-icon{font-size:11px;color:#000;font-weight:900;pointer-events:none;line-height:1;}
.sfp-panel{position:fixed;right:-300px;top:0;height:100%;width:min(280px,85vw);background:var(--bg2);border-left:1px solid var(--border2);z-index:900;transition:right .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:14px 12px;box-shadow:-4px 0 20px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:0;}
.sfp-panel.open{right:0;}
.sfp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:899;display:none;}
.sfp-overlay.show{display:block;}
.sfp-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-shrink:0;}
.sfp-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text);}
.sfp-close{width:28px;height:28px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;}
.sfp-close:hover{border-color:var(--accent);color:var(--accent);}
.sfp-section{margin-bottom:12px;}
.sfp-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:6px;}
.sfp-pills{display:flex;flex-wrap:wrap;gap:5px;}
.sfp-pill{padding:5px 11px;border-radius:20px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:12px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;line-height:1.3;}
.sfp-pill:hover{border-color:var(--accent);color:var(--accent);}
.sfp-pill.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;}
.sfp-pill.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);border-color:#b91c1c;color:#fff;}
.sfp-pill.btn-success{background:linear-gradient(180deg,#22c55e,#16a34a);border-color:#15803d;color:#fff;}
.sfp-divider{height:1px;background:var(--border);margin:10px 0;}
.sfp-select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:13px;cursor:pointer;}
.sfp-select:focus{outline:none;border-color:var(--accent);}
.sfp-buscar{width:100%;margin-top:6px;padding:10px 14px;border-radius:8px;background:var(--accent);border:none;color:#000;font-size:13px;font-weight:700;cursor:pointer;}
.sfp-buscar:hover{opacity:.88;}
:root[data-theme="light"] .mapa-locate-btn,
:root[data-theme="light-soft"] .mapa-locate-btn{background:rgba(255,255,255,0.92);color:#1a1a1a;border:1px solid rgba(0,0,0,0.1);}
.mapa-estilo-fade #ordersMap{transition:opacity .2s ease;opacity:.0;}
/* APP LAYOUT */
#appScreen{display:none;min-height:100vh;}
#appScreen.show{display:flex;}
.sidebar{width:238px;min-height:100vh;height:100vh;overflow-y:auto;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:1000;transition:width .25s ease;box-shadow:0 0 12px rgba(139,92,246,0.6);user-select:none;-webkit-user-select:none;}
.slogo{padding:16px 20px 13px;border-bottom:1px solid var(--border);}
.slogo h2{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;color:var(--accent);}
.slogo p{font-size:10px;color:var(--text3);margin-top:1px;}
.suser{padding:11px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.savatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;font-size:13px;flex-shrink:0;}
.sname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srole{font-size:10px;color:var(--text2);}
.sconn{padding:5px 20px 8px;font-size:10px;display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--border);}
.sconn .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.dot-green{background:var(--green);}.dot-amber{background:var(--accent);}
.snav{flex:1;padding:8px 0;overflow-y:auto;}
.nsec{padding:7px 20px 2px;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.ni{display:flex;align-items:center;gap:9px;padding:8px 20px;font-size:13px;color:var(--text);opacity:0.78;cursor:pointer;border-left:2px solid transparent;transition:all 0.15s var(--ease-out);position:relative;touch-action:manipulation;font-weight:500;}
.ni:hover{background:rgba(245,166,35,0.08);color:var(--text);opacity:1;padding-left:18px;transform:translateX(2px);transition:padding-left .2s var(--ease-out),transform .2s var(--ease-out),background .15s var(--ease-out);}
.ni.active{background:var(--bg3);color:var(--accent);opacity:1;border-left-color:var(--accent);transform:translateX(2px);}
.ni .nbadge{position:absolute;right:14px;background:var(--red);color:#fff;font-size:9px;padding:1px 5px;border-radius:10px;font-weight:700;}
.sfooter{padding:11px 20px;border-top:1px solid var(--border);}
.snav-version{padding:8px 20px 12px;font-size:10px;color:#6b7280;text-align:center;border-top:1px solid var(--border);letter-spacing:.3px;}
.page-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.55);backdrop-filter:blur(2px);z-index:40;animation:pgfadein .12s ease-out;}
.page-loading-overlay .spinner{width:38px;height:38px;border:3px solid rgba(245,166,35,0.25);border-top-color:var(--accent);border-radius:50%;animation:pgspin .7s linear infinite;}
@keyframes pgspin{to{transform:rotate(360deg);}}
@keyframes pgfadein{from{opacity:0;}to{opacity:1;}}
.main{margin-left:238px;flex:1;min-height:100vh;display:flex;flex-direction:column;}
.topbar{padding:max(13px, env(safe-area-inset-top)) 24px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2);position:sticky;top:0;z-index:500;box-shadow:0 1px 8px rgba(0,0,0,.3);}
.tbtitle{font-size:17px;font-weight:700;user-select:none;-webkit-user-select:none;}
.tbactions{display:flex;align-items:center;gap:12px;flex:1;justify-content:center;margin:0 16px;flex-wrap:wrap;}
.ca{padding:22px 24px;flex:1;}
/* STATS */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.sc{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:16px 16px 14px;position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.16);transition:box-shadow .2s,transform .18s;}
.sc:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.18),0 0 0 1px rgba(245,166,35,.2);transition:all .2s var(--ease-out);}
.sc::before{content:'';position:absolute;top:-10px;right:-10px;width:90px;height:90px;border-radius:50%;opacity:.10;}
.sc.ac::before{background:var(--accent);}.sc.gr::before{background:var(--green);}
.sc.re::before{background:var(--red);}.sc.bl::before{background:var(--blue);}
.sc.pu::before{background:var(--purple);}.sc.cy::before{background:var(--cyan);}
.sc.yw::before{background:#eab308;}
.sc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--radius) var(--radius);}
.sc.ac::after{background:linear-gradient(90deg,var(--accent),transparent);}
.sc.gr::after{background:linear-gradient(90deg,var(--green),transparent);}
.sc.re::after{background:linear-gradient(90deg,var(--red),transparent);}
.sc.bl::after{background:linear-gradient(90deg,var(--blue),transparent);}
.sc.pu::after{background:linear-gradient(90deg,var(--purple),transparent);}
.sc.cy::after{background:linear-gradient(90deg,var(--cyan),transparent);}
.sc.yw::after{background:linear-gradient(90deg,#eab308,transparent);}
.slabel{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;font-weight:700;}
.sval{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.5px;margin:5px 0 2px;line-height:1;}
.sc.ac .sval{color:var(--accent);}.sc.gr .sval{color:var(--green);}
.sc.re .sval{color:var(--red);}.sc.bl .sval{color:var(--blue);}
.sc.pu .sval{color:var(--purple);}.sc.cy .sval{color:var(--cyan);}
.sc.yw .sval{color:#eab308;}
.ssub{font-size:11px;color:var(--text3);}
/* STATS PREMIUM — animación cascada + ranking con barras */
@keyframes statRise{0%{opacity:0;transform:translateY(20px) scale(0.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes barGrow{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}
@keyframes numberCountUp{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:translateY(0);}}
@keyframes shimmerSweep{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.sgrid .sc{animation:statRise .55s var(--ease-out) backwards;}
.sgrid .sc .sval{animation:numberCountUp .6s var(--ease-out) .2s backwards;}
.sgrid .sc:nth-child(1){animation-delay:0ms}
.sgrid .sc:nth-child(2){animation-delay:80ms}
.sgrid .sc:nth-child(3){animation-delay:160ms}
.sgrid .sc:nth-child(4){animation-delay:240ms}
.sgrid .sc:nth-child(5){animation-delay:320ms}
.sgrid .sc:nth-child(6){animation-delay:400ms}
.sgrid .sc:nth-child(7){animation-delay:480ms}
.sgrid .sc:nth-child(8){animation-delay:560ms}
.sc::after{transform-origin:left;animation:barGrow .9s var(--ease-out) .3s backwards;}
/* Ranking de Delivery — barras horizontales animadas */
.ranking-list{display:flex;flex-direction:column;gap:8px;}
.ranking-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;position:relative;overflow:hidden;animation:statRise .5s var(--ease-out) backwards;transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);}
.ranking-row:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18),0 0 0 1px rgba(245,166,35,.18);border-color:rgba(245,166,35,.3);}
.ranking-row .rank-bar{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,rgba(245,166,35,.18),rgba(245,166,35,.04));border-right:2px solid var(--accent);z-index:0;transform:scaleX(0);transform-origin:left;animation:barGrow 1s var(--ease-out) .4s forwards;}
.ranking-row > *:not(.rank-bar){position:relative;z-index:1;}
.ranking-row .rank-pos{width:26px;height:26px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--text);flex-shrink:0;}
.ranking-row:nth-child(1) .rank-pos{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;box-shadow:0 2px 8px rgba(217,119,6,.4);}
.ranking-row:nth-child(2) .rank-pos{background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#1a1a1a;}
.ranking-row:nth-child(3) .rank-pos{background:linear-gradient(135deg,#fb923c,#c2410c);color:#fff;}
.ranking-row .rank-name{flex:1;font-weight:700;font-size:13px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ranking-row .rank-meta{font-size:11px;color:var(--text3);margin-left:6px;font-weight:500;}
.ranking-row .rank-value{font-weight:800;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums;flex-shrink:0;}
.ranking-row .rank-pct{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;color:#fff;margin-left:8px;}
.ranking-row:nth-child(1){animation-delay:0ms}
.ranking-row:nth-child(2){animation-delay:60ms}
.ranking-row:nth-child(3){animation-delay:120ms}
.ranking-row:nth-child(4){animation-delay:180ms}
.ranking-row:nth-child(5){animation-delay:240ms}
.ranking-row:nth-child(6){animation-delay:300ms}
.ranking-row:nth-child(7){animation-delay:360ms}
.ranking-row:nth-child(8){animation-delay:420ms}
/* Ranking — scroll si lista larga */
.ranking-list{max-height:480px;overflow-y:auto;padding-right:2px;}
.ranking-list::-webkit-scrollbar{width:6px;}
.ranking-list::-webkit-scrollbar-track{background:transparent;}
.ranking-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px;opacity:.6;}
.ranking-list::-webkit-scrollbar-thumb:hover{background:var(--accent);opacity:1;}
/* Stats premium — evitar re-animar en re-render (flag JS aplica .no-anim) */
.est-page.no-anim .sgrid .sc,
.est-page.no-anim .sgrid .sc .sval,
.est-page.no-anim .sc::after,
.est-page.no-anim .ranking-row,
.est-page.no-anim .ranking-row .rank-bar{animation:none !important;}
.est-page.no-anim .ranking-row .rank-bar{transform:scaleX(1) !important;}
/* Mobile 320-480px — compactar ranking y stat cards */
@media (max-width: 480px){
.ranking-row{padding:8px 10px !important;gap:8px !important;font-size:12px !important;}
.ranking-row .rank-pos{width:22px !important;height:22px !important;font-size:11px !important;}
.ranking-row .rank-name{font-size:12px !important;}
.ranking-row .rank-value{font-size:13px !important;}
.ranking-row .rank-meta{font-size:10px !important;}
.ranking-row .rank-pct{font-size:10px !important;padding:2px 6px !important;margin-left:4px !important;}
.est-page .sc{padding:14px 16px !important;}
.est-page .sc .sval{font-size:24px !important;}
}
/* Reduced motion — anular animaciones para usuarios sensibles */
@media (prefers-reduced-motion: reduce){
.sgrid .sc,
.sgrid .sc .sval,
.sc::after,
.ranking-row,
.ranking-row .rank-bar,
.stat-premium-card,
.stat-premium-card::before{animation:none !important;transition:none !important;}
.ranking-row .rank-bar{transform:scaleX(1) !important;}
}
/* Contraste medallas en temas claros — texto legible */
:root[data-theme="light"] .ranking-row:nth-child(2) .rank-pos,
:root[data-theme="light-soft"] .ranking-row:nth-child(2) .rank-pos{color:#1a1a1a;text-shadow:0 1px 0 rgba(255,255,255,.5);}
:root[data-theme="light"] .ranking-row:nth-child(1) .rank-pos,
:root[data-theme="light-soft"] .ranking-row:nth-child(1) .rank-pos,
:root[data-theme="light"] .ranking-row:nth-child(3) .rank-pos,
:root[data-theme="light-soft"] .ranking-row:nth-child(3) .rank-pos{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
/* TABLES */
.tc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;overflow-y:hidden;margin-bottom:18px;border-left:3px solid var(--accent);}
.th2{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.tt{font-size:14px;font-weight:700;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{padding:8px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);border-bottom:1px solid var(--border);background:var(--bg3);font-weight:700;}
.tbl td{padding:10px 12px;font-size:13px;border-bottom:1px solid var(--border);}
.tbl tr:last-child td{border-bottom:none;}
.tbl thead{position:sticky;top:0;z-index:5;background:var(--bg2);box-shadow:0 1px 0 var(--border2);}
.tbl thead th{background:var(--bg2);font-weight:600;}
.tbl tbody tr{transition:background .12s ease}
.tbl tbody tr:hover td{background:rgba(245,166,35,.06)}
.tbl tbody tr:hover{cursor:pointer}
@media(min-width:769px){
.tbl-pedidos th{text-align:center;font-weight:700;}
.tbl-pedidos td{text-align:center;}
.tbl-pedidos th:not(:last-child),.tbl-pedidos td:not(:last-child){border-right:1px solid var(--border);}
}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--text3);gap:12px;}
.empty-state-icon{font-size:48px;opacity:.6}
.empty-state-title{font-weight:600;color:var(--text);font-size:16px}
.empty-state-msg{font-size:14px;max-width:280px;line-height:1.5}
.empty-state-cta{margin-top:8px}
@media(max-width:640px){.tbl{font-size:13px}.tbl th,.tbl td{padding:8px 6px}}
.td-actions, .act-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.td-actions .btn, .act-btns .btn { margin: 0 !important; }
/* BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap;}
.etiq-chip{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;}
.etiq-chip:hover{border-color:var(--accent);color:var(--accent);}
.etiq-chip-on{background:var(--accent);color:#fff;border-color:var(--accent);}
.bp{background:rgba(245,166,35,.14);color:var(--accent);}
.bdisp{background:rgba(59,130,246,.18);color:#93c5fd;}
.br{background:rgba(6,182,212,.14);color:var(--cyan);}
.be{background:rgba(34,197,94,.14);color:var(--green);}
.bc{background:rgba(239,68,68,.14);color:var(--red);}
.bn1{background:rgba(168,85,247,.14);color:var(--purple);}
.bn2{background:rgba(168,85,247,.2);color:#c084fc;}
.bn3{background:rgba(168,85,247,.28);color:#d8b4fe;}
.bprov{background:rgba(184,84,31,.22);color:#e0a070;border:1px solid rgba(184,84,31,.5);}
.brp{background:rgba(251,191,36,.13);color:#fbbf24;}
.bret{background:rgba(239,68,68,.2);color:#fca5a5;}
/* BADGES DE ROL — por rol, con dot + borde */
.brol{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap;letter-spacing:.5px;text-transform:uppercase;border:1px solid transparent;}
.brol::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.brol-superadmin{background:rgba(251,191,36,.13);color:#fbbf24;border-color:rgba(251,191,36,.35);}
.brol-admin{background:rgba(239,68,68,.13);color:#f87171;border-color:rgba(239,68,68,.35);}
.brol-subadmin{background:rgba(249,115,22,.13);color:#fb923c;border-color:rgba(249,115,22,.35);}
.brol-vendedor{background:rgba(59,130,246,.13);color:#60a5fa;border-color:rgba(59,130,246,.35);}
.brol-dropshipper{background:rgba(168,85,247,.13);color:#c084fc;border-color:rgba(168,85,247,.35);}
.brol-delivery{background:rgba(34,197,94,.13);color:#4ade80;border-color:rgba(34,197,94,.35);}
.brol-proveedor{background:rgba(236,72,153,.13);color:#f472b6;border-color:rgba(236,72,153,.35);}
.brol-cliente{background:rgba(6,182,212,.13);color:#22d3ee;border-color:rgba(6,182,212,.35);}
/* Fila usuario con acento lateral por rol */
.urow-superadmin td:first-child{border-left:3px solid #fbbf24;}
.urow-admin td:first-child{border-left:3px solid #f87171;}
.urow-subadmin td:first-child{border-left:3px solid #fb923c;}
.urow-vendedor td:first-child{border-left:3px solid #60a5fa;}
.urow-dropshipper td:first-child{border-left:3px solid #c084fc;}
.urow-delivery td:first-child{border-left:3px solid #4ade80;}
.urow-proveedor td:first-child{border-left:3px solid #f472b6;}
.urow-cliente td:first-child{border-left:3px solid #22d3ee;}
/* MODALS */
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);z-index:1000;align-items:center;justify-content:center;padding:14px;will-change:backdrop-filter,opacity;}
.moverlay.open{display:flex;}
.mbox{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);width:100%;max-width:540px;max-height:93vh;overflow-y:auto;overflow-x:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05) inset;}
.mbox.lg{max-width:800px;}.mbox.xl{max-width:1020px;}
/* ─── CALIFICACIONES / PERFIL ─── */
.stars-input{display:flex;gap:6px;margin:6px 0;}
.stars-input span{font-size:28px;cursor:pointer;transition:transform .15s;line-height:1;color:#4b5563;}
.stars-input span.on{color:#f59e0b;}
.stars-input span:hover{transform:scale(1.2);}
.star-disp{color:#f59e0b;font-size:13px;letter-spacing:1px;}
.badge-confianza{display:inline-flex;align-items:center;gap:4px;background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.5px;}
.badge-verif{display:inline-flex;align-items:center;gap:3px;background:rgba(59,130,246,.15);color:#3b82f6;border:1px solid rgba(59,130,246,.3);border-radius:20px;padding:2px 7px;font-size:10px;font-weight:700;}
.perfil-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);}
.perfil-avatar-placeholder{width:80px;height:80px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#000;border:3px solid var(--accent);}
.ptabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:0;}
.ptab{padding:8px 14px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.ptab.active{color:var(--accent);border-bottom-color:var(--accent);}
.ptab-content{display:none;}.ptab-content.active{display:block;}
.resena-foto{width:72px;height:72px;object-fit:cover;border-radius:8px;cursor:pointer;}
.logo-upload{border:2px dashed var(--border2);border-radius:12px;padding:24px 18px;text-align:center;cursor:pointer;transition:border-color .15s var(--ease-out),background .15s var(--ease-out);}
.logo-upload:hover{border-color:var(--accent);background:rgba(245,166,35,0.04);}
.logo-upload-icon{width:48px;height:48px;margin:0 auto 8px;color:var(--text3);display:flex;align-items:center;justify-content:center;}
.logo-upload-title{font-weight:600;font-size:14px;color:var(--text);margin-bottom:2px;}
.logo-upload-hint{font-size:11px;color:var(--text3);}
.stars-display{display:inline-flex;gap:2px;vertical-align:middle;}
.stars-display .star-full,.stars-display .star-half,.stars-display .star-empty{display:inline-flex;line-height:0;}
.stars-display .star-empty{color:#4b5563;opacity:.5;}
.resena-card{background:var(--bg3);border-radius:var(--radius);padding:12px;margin-bottom:10px;}
.savatar img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.mbody img{max-width:100%;height:auto;}
.mbody video{max-width:100%;}
.mhead{padding:17px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:2;}
.mtitle{font-size:15px;font-weight:700;}
.mclose{cursor:pointer;color:var(--text2);font-size:20px;line-height:1;transition:color .15s;padding:2px 4px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;}
.mclose:hover{color:var(--red);}
.mbody{padding:22px;}.mfoot{padding:13px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center;position:sticky;bottom:0;background:var(--bg2);}
.modal-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.modal-btn-grid > button:last-child:nth-child(odd){grid-column:1/-1}
.mfoot-alert{width:100%;margin-bottom:2px;}
/* MAPA LABELS */
.mapboxgl-popup-content{background:var(--bg2)!important;color:var(--text)!important;border-radius:10px!important;padding:12px 14px!important;box-shadow:0 4px 20px rgba(0,0,0,.35)!important;border:1px solid var(--border2,rgba(255,255,255,.08))!important;}
.mapboxgl-popup-close-button{color:var(--text2)!important;font-size:16px!important;top:6px!important;right:8px!important;}
.mapboxgl-popup-tip{border-top-color:var(--bg2)!important;border-bottom-color:var(--bg2)!important;}
.mapboxgl-ctrl-attrib{font-size:9px!important;}
/* MAPA BOTONES PREMIUM */
.mapBtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);color:var(--text);border:1px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.05);transition:all .15s var(--ease-out);user-select:none}
.mapBtn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.mapBtn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 2px 4px rgba(0,0,0,.2)}
.mapBtn.active{background:linear-gradient(180deg,var(--accent) 0%,#d97706 100%);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.mapBtn .dot{width:8px;height:8px;border-radius:50%}
.mapBar{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;overflow-x:auto}
.mapBar .sep{width:1px;background:var(--border);margin:0 4px}
@media(max-width:640px){.mapBtn{padding:6px 10px;font-size:11px}}
/* SEARCH COMBO PREMIUM (estilo Apple/Linear) */
.search-combo{position:relative;min-width:220px;display:inline-block;vertical-align:middle}
.search-combo-input{width:100%;padding:10px 36px 10px 38px;background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:12px;color:var(--text);font:500 14px var(--font,inherit);transition:border .15s,box-shadow .15s;box-sizing:border-box}
.search-combo-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.search-combo-input::placeholder{color:var(--text3);opacity:.7}
.search-combo-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text3);pointer-events:none}
.search-combo-emoji{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none;z-index:1;line-height:1}
.search-combo-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:var(--text3);padding:4px;border-radius:6px;display:none}
.search-combo-clear.show{display:flex;align-items:center;justify-content:center}
.search-combo-clear:hover{background:var(--bg3);color:var(--text)}
.search-combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;list-style:none;padding:4px;margin:0;max-height:260px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:1000;display:none}
.search-combo-list.open{display:block}
.search-combo-list li{padding:8px 12px;border-radius:8px;cursor:pointer;font:500 13px var(--font,inherit);color:var(--text)}
.search-combo-list li:hover,.search-combo-list li.active{background:var(--accent);color:#fff}
.search-combo-list li.empty{color:var(--text3);cursor:default;font-style:italic}
.search-combo-list li.empty:hover{background:transparent;color:var(--text3)}
/* MAPA COMBO BTN — apariencia de botón compacto coherente con .mapBtn */
#mapaZonaCombo,#mapaVendCombo{min-width:0;max-width:180px;width:180px;vertical-align:middle}
#mapaVendCombo{max-width:200px;width:200px}
#mapaVendCombo .search-combo-input{font-size:11px !important}
@media(max-width:768px){#mapaVendCombo,#mapaZonaCombo{max-width:100%;width:100%}#mapaVendCombo .search-combo-input{font-size:12px !important}}
#mapaZonaCombo .search-combo-input,#mapaVendCombo .search-combo-input{height:36px;padding:7px 30px 7px 14px;font:600 12px var(--font,inherit);border-radius:10px;background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--accent);box-shadow:0 2px 4px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
#mapaZonaCombo .search-combo-input:hover,#mapaVendCombo .search-combo-input:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
#mapaZonaCombo .search-combo-input:focus,#mapaVendCombo .search-combo-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.25),inset 0 1px 0 rgba(255,255,255,.05)}
#mapaZonaCombo .search-combo-emoji,#mapaVendCombo .search-combo-emoji{font-size:12px;left:11px}
#mapaZonaCombo::after,#mapaVendCombo::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2);transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.85}
#mapaZonaCombo .search-combo-clear,#mapaVendCombo .search-combo-clear{right:6px}
#mapaZonaCombo .search-combo-list,#mapaVendCombo .search-combo-list{max-height:220px;border-radius:10px}
#mapaZonaCombo .search-combo-list li,#mapaVendCombo .search-combo-list li{padding:7px 12px;font:500 13px var(--font,inherit);border-radius:7px}
[data-theme="light"] #mapaZonaCombo .search-combo-input,[data-theme="light"] #mapaVendCombo .search-combo-input,[data-theme="light-soft"] #mapaZonaCombo .search-combo-input,[data-theme="light-soft"] #mapaVendCombo .search-combo-input{background:linear-gradient(180deg,#ffffff 0%,#f3f4f6 100%);color:#1a1f2c;border-color:#d1d5db;box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="light"] #mapaZonaCombo::after,[data-theme="light"] #mapaVendCombo::after,[data-theme="light-soft"] #mapaZonaCombo::after,[data-theme="light-soft"] #mapaVendCombo::after{border-color:#4b5563}
@media(max-width:640px){#mapaZonaCombo,#mapaVendCombo{max-width:150px;width:150px}#mapaZonaCombo .search-combo-input,#mapaVendCombo .search-combo-input{height:32px;font-size:11px;padding:6px 26px 6px 12px}}
/* FIX: mapa combos misma altura forzada en mobile (Todo Paraguay = Todos los Usuarios) */
@media(max-width:768px){
#mapaZonaCombo,#mapaVendCombo{height:38px!important;min-height:38px!important;max-height:38px!important;max-width:100%!important;width:100%!important;box-sizing:border-box}
#mapaZonaCombo .search-combo-input,#mapaVendCombo .search-combo-input{height:36px!important;min-height:36px!important;max-height:36px!important;box-sizing:border-box}
}
/* FIX: placeholder real "Día/Mes/Año" dentro de inputs type=date vacíos */
.date-wrap{position:relative;display:block;width:100%;box-sizing:border-box;height:44px}
.date-wrap input[type="date"]{width:100%;box-sizing:border-box;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0 12px!important;font-size:16px!important;line-height:1!important;border-radius:8px!important}
.date-wrap input[type="date"]:required:invalid::-webkit-datetime-edit{color:transparent}
.date-wrap input[type="date"]:required:focus::-webkit-datetime-edit,.date-wrap input[type="date"]:required:valid::-webkit-datetime-edit{color:var(--text)}
.date-wrap::after{content:'Día/Mes/Año';position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text2);font-size:13px;font-weight:500;white-space:nowrap}
.date-wrap:has(input:focus)::after,.date-wrap:has(input:valid)::after{display:none}
/* Combobox delivery más fino (desktop) */
#dlvSearchCombo .search-combo-input,#dlvSearchInput{padding:7px 32px 7px 36px !important;height:36px !important;font-size:12px !important;border-radius:10px !important}
#dlvSearchCombo .search-combo-icon,#dlvSearchInput + .search-combo-icon{width:14px !important;height:14px !important;left:12px !important}
#dlvSearchCombo .search-combo-clear{right:6px !important;padding:3px !important}
#dlvSearchCombo .search-combo-clear svg{width:12px !important;height:12px !important}
/* Mobile: mantener tamaño cómodo touch (>=44px) */
@media(max-width:768px){#dlvSearchCombo .search-combo-input,#dlvSearchInput{height:44px !important;padding:10px 36px 10px 38px !important;font-size:14px !important;border-radius:12px !important}#dlvSearchCombo .search-combo-icon,#dlvSearchInput + .search-combo-icon{width:16px !important;height:16px !important}#dlvSearchCombo .search-combo-clear{right:8px !important;padding:4px !important}#dlvSearchCombo .search-combo-clear svg{width:14px !important;height:14px !important}}
/* SEARCH INPUT PREMIUM (sin combo, para buscadores simples) */
.search-input-premium{padding:10px 14px;background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:12px;color:var(--text);font:500 14px var(--font,inherit);transition:border .15s,box-shadow .15s;box-sizing:border-box}
.search-input-premium:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.search-input-premium::placeholder{color:var(--text3);opacity:.7}
/* PLACEHOLDERS PREMIUM GLOBAL — capitalize, cursiva, semi-transparente, sin emojis */
input::placeholder,
textarea::placeholder{
color: var(--text3);
opacity: 0.65;
font-style: italic;
font-weight: 400;
text-transform: none;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
opacity: 0.55;
}
/* FILTROS PREMIUM REUSABLES */
.filterBtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);color:var(--text);border:1px solid var(--border);font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.05);transition:all .15s var(--ease-out);user-select:none;white-space:nowrap}
.filterBtn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.filterBtn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 2px 4px rgba(0,0,0,.2)}
.filterBtn.active{background:linear-gradient(180deg,var(--accent) 0%,#d97706 100%);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.filterBtn .dot{width:7px;height:7px;border-radius:50%}
.filterBar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;margin-bottom:10px}
@media(max-width:640px){.filterBtn{padding:5px 9px;font-size:11px}}
/* GPS */
.gpsw{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:12px;margin-bottom:12px;}
.gpss{display:flex;align-items:center;gap:8px;font-size:13px;}
.gpsd{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0;}
.gpsd.on{background:var(--green);animation:gpp 2s infinite;}
@keyframes gpp{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4);}50%{box-shadow:0 0 0 5px rgba(34,197,94,0);}}
@keyframes dlvPulse{0%,100%{box-shadow:0 3px 14px rgba(0,0,0,.5),0 0 0 0 rgba(29,78,216,.7);}50%{box-shadow:0 3px 14px rgba(0,0,0,.5),0 0 0 9px rgba(29,78,216,0);}}
@keyframes dlvPulseStrong{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 0 0 rgba(14,165,233,.9),0 0 0 0 rgba(14,165,233,.35)}50%{box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 0 16px rgba(14,165,233,0),0 0 0 30px rgba(14,165,233,0)}}
@keyframes bell-ring{0%,100%{transform:rotate(0) scale(1)}10%{transform:rotate(-22deg) scale(1.14)}20%{transform:rotate(22deg) scale(1.14)}30%{transform:rotate(-16deg)}40%{transform:rotate(16deg)}50%{transform:rotate(-10deg)}60%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}90%{transform:rotate(-2deg)}}
@keyframes bell-glow{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.22)}50%{box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 10px rgba(251,191,36,.4),0 0 30px rgba(251,191,36,.25)}}
#codexNotifBell.bell-ringing{animation:bell-ring .7s ease-in-out}
#codexNotifBell.bell-has-unread{animation:bell-glow 2s ease-in-out infinite}
@keyframes urgWarn{0%,100%{box-shadow:0 3px 14px rgba(0,0,0,.5),0 0 0 0 rgba(234,179,8,.8);}50%{box-shadow:0 3px 14px rgba(0,0,0,.5),0 0 0 8px rgba(234,179,8,0);}}
@keyframes urgCrit{0%,100%{box-shadow:0 3px 14px rgba(0,0,0,.5),0 0 0 0 rgba(220,38,38,.9);}50%{box-shadow:0 3px 14px rgba(0,0,0,.5),0 0 0 9px rgba(220,38,38,0);}}
@keyframes pin-shake{0%,100%{transform:translateY(-50%) translateX(0) rotate(0deg)}20%{transform:translateY(-50%) translateX(-3px) rotate(-4deg)}40%{transform:translateY(-50%) translateX(3px) rotate(4deg)}60%{transform:translateY(-50%) translateX(-2px) rotate(-2deg)}80%{transform:translateY(-50%) translateX(2px) rotate(2deg)}}
@keyframes pin-sonar{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7),0 0 0 0 rgba(239,68,68,.4)}70%{box-shadow:0 0 0 16px rgba(239,68,68,0),0 0 0 28px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0),0 0 0 0 rgba(239,68,68,0)}}
.pin-priority{animation:pin-shake 0.6s ease-in-out infinite,pin-sonar 1.8s ease-out infinite!important;border-radius:50%;}
.pin-priority-wrap{animation:pin-sonar 1.8s ease-out infinite;border-radius:50%;}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;}
.empty-state,.no-data,.lista-vacia{text-align:center;color:var(--text2);font-size:13px;padding:2rem;}
@keyframes slideInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.mapboxgl-popup-content{background:var(--bg2)!important;color:var(--text)!important;border-radius:10px!important;padding:12px!important;}
.gpsc{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);margin-top:4px;}
/* PROGRESS */
.progbar{background:var(--bg4);border-radius:20px;height:10px;overflow:hidden;}
.progfill{height:100%;border-radius:20px;transition:width .4s var(--ease-out);}
.plow{background:linear-gradient(90deg,var(--green),#4ade80);}
.pmid{background:linear-gradient(90deg,var(--accent),#fbbf24);}
.phigh{background:linear-gradient(90deg,var(--red),#f97316);}
/* ALERTS */
.alert{padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:13px;}
.alrt-s{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:var(--green);}
.alrt-e{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--red);}
.alrt-w{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);color:var(--accent);}
.alrt-i{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:var(--blue);}
/* FILTERS */
.fbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
.fbar input,.fbar select{background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:9px;padding:8px 12px;font-size:12px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .18s,box-shadow .18s;}
.fbar input:focus,.fbar select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.10);}
/* LIQ */
.lcard2{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-bottom:11px;border-left:3px solid var(--accent);transition:box-shadow .2s ease;}
.lcard2:hover{box-shadow:0 4px 20px rgba(0,0,0,.25);}
.lrow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px;}
.lrow:last-child{border-bottom:none;font-weight:700;}
.llbl{color:var(--text2);}
/* HISTORIAL */
.hitem{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;}
.hitem:last-child{border-bottom:none;}
.hdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:3px;}
.htime{color:var(--text3);min-width:110px;font-family:'JetBrains Mono',monospace;font-size:10px;}
/* METODO */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;}
.mcard{background:var(--bg4);border:2px solid var(--border2);border-radius:9px;padding:11px;cursor:pointer;transition:all .18s var(--ease-out);text-align:center;}
.mcard:hover,.mcard.sel{border-color:var(--accent);background:rgba(245,166,35,.07);}
.mci{font-size:20px;margin-bottom:3px;}.mcn{font-size:12px;font-weight:600;}
/* ZONAS */
.zgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0;}
.zcard{background:var(--bg4);border:2px solid var(--border2);border-radius:9px;padding:12px;cursor:pointer;transition:all .18s var(--ease-out);}
.zcard:hover,.zcard.sel{border-color:var(--accent);background:rgba(245,166,35,.06);}
.znm{font-size:13px;font-weight:700;}
.zpr{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--accent);margin:2px 0;}
.zdsc{font-size:10px;color:var(--text2);line-height:1.4;}
/* SECTION TITLE */
.stitle{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin:17px 0 12px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.stitle:first-child{margin-top:0;}
/* BOLETA */
.boleta{background:#fff;color:#000;border-radius:var(--radius);padding:24px;font-size:12px;font-family:'DM Sans',sans-serif;}
.boleta-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;color:#f5a623;}
.bt{width:100%;border-collapse:collapse;margin:10px 0;}
.bt th,.bt td{border:1px solid #ddd;padding:5px 8px;text-align:left;}
.bt th{background:#f4f4f4;font-weight:700;}
/* PHOTO UPLOAD */
.phupload{border:2px dashed var(--border2);border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;transition:border-color .18s;}
.phupload:hover{border-color:var(--accent);}
.phupload input{display:none;}
/* MAP CONTAINER */
.mapbox{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;position:relative;}
.mapbox #gmap{width:100%;height:280px;}
.map-placeholder{height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text3);}
/* AI AVATAR ANIMADO — estilo Pixar/Wall-E baby */
.ai-avatar-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
.ai-avatar{display:inline-block;vertical-align:middle;animation:aiFloat 3s ease-in-out infinite;overflow:visible;filter:drop-shadow(0 4px 8px rgba(217,119,6,0.25));}
@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.ai-avatar .ai-mic-led{animation:aiMicLed 2s ease-in-out infinite;}
@keyframes aiMicLed{0%,100%{opacity:1;fill:#10b981}50%{opacity:0.4;fill:#34d399}}
.ai-avatar.thinking .ai-mic-led{animation:aiMicThink .5s ease-in-out infinite;}
@keyframes aiMicThink{0%,100%{fill:#fbbf24;opacity:1}50%{fill:#f59e0b;opacity:0.6}}
.ai-avatar .ai-headphone-l,.ai-avatar .ai-headphone-r{opacity:0.85;}
/* MACAQUITO — figura humanoide del botón flotante */
#aiBtn .aim-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
#aiBtn .aim-svg{display:block;overflow:visible;filter:drop-shadow(0 2px 4px rgba(15,23,42,0.18));}
#aiBtn .aim-figure{transform-origin:32px 58px;animation:aimBob 3.2s ease-in-out infinite;}
#aiBtn .aim-arm-l{transform-origin:19.2px 28px;animation:aimArmL 2.4s ease-in-out infinite;}
#aiBtn .aim-arm-r{transform-origin:44.8px 28px;animation:aimArmR 2.4s ease-in-out infinite;}
#aiBtn .aim-leg-l{transform-origin:28px 43px;animation:aimLegL 2.4s ease-in-out infinite;}
#aiBtn .aim-leg-r{transform-origin:36px 43px;animation:aimLegR 2.4s ease-in-out infinite;}
#aiBtn .aim-head{transform-origin:32px 27px;animation:aimHead 4s ease-in-out infinite;}
#aiBtn .aim-shadow{animation:aimShadow 3.2s ease-in-out infinite;transform-origin:32px 58px;}
@keyframes aimBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes aimHead{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes aimArmL{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
@keyframes aimArmR{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-6deg)}}
@keyframes aimLegL{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-3deg)}}
@keyframes aimLegR{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes aimShadow{0%,100%{transform:scaleX(1);opacity:0.18}50%{transform:scaleX(0.88);opacity:0.12}}
#aiBtn:hover .aim-figure{animation-duration:1.4s}
#aiBtn:hover .aim-arm-l{animation:aimArmWaveL .55s ease-in-out infinite}
#aiBtn:hover .aim-arm-r{animation:aimArmWaveR .55s ease-in-out infinite}
#aiBtn:hover .aim-leg-l,#aiBtn:hover .aim-leg-r{animation-duration:1.1s}
#aiBtn:hover .aim-head{animation-duration:2s}
@keyframes aimArmWaveL{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(22deg)}}
@keyframes aimArmWaveR{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-22deg)}}
#aiBtn:active .aim-figure{animation:aimJump .35s ease-out 1}
#aiBtn:active .aim-arm-l{animation:aimArmJumpL .35s ease-out 1}
#aiBtn:active .aim-arm-r{animation:aimArmJumpR .35s ease-out 1}
@keyframes aimJump{0%{transform:translateY(0)}40%{transform:translateY(-5px) scale(1.05)}100%{transform:translateY(0)}}
@keyframes aimArmJumpL{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-45deg)}}
@keyframes aimArmJumpR{0%,100%{transform:rotate(4deg)}50%{transform:rotate(45deg)}}
@media (prefers-reduced-motion: reduce){
.ai-avatar,.ai-avatar .ai-mic-led,.ai-avatar .ai-eye,
#aiBtn .aim-figure,#aiBtn .aim-arm-l,#aiBtn .aim-arm-r,#aiBtn .aim-leg-l,#aiBtn .aim-leg-r,#aiBtn .aim-head,#aiBtn .aim-shadow,#aiBtn .aim-antenna,#aiBtn .aim-eye{animation:none!important;}
}
/* AI CHAT FLOATING — botón blanco con borde sombreado */
#aiBtn{position:fixed;bottom:24px;right:24px;z-index:500;width:56px;height:56px;border-radius:50%;background:#ffffff;color:#0f172a;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(15,23,42,.12),0 8px 24px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.06),0 0 0 2px rgba(59,130,246,.18),0 0 14px rgba(59,130,246,.18);transition:transform .2s ease,box-shadow .25s ease,background .25s ease;touch-action:none;user-select:none;}
#aiBtn:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 4px 10px rgba(59,130,246,.22),0 14px 32px rgba(59,130,246,.32),0 0 0 2px rgba(59,130,246,.55),0 0 22px rgba(59,130,246,.4),0 0 40px rgba(59,130,246,.18);}
#aiBtn:active{transform:translateY(0) scale(0.96);transition-duration:.08s;}
#aiBtn.dragging{transition:none!important;transform:scale(1.04);box-shadow:0 12px 36px rgba(59,130,246,.45),0 0 0 2px rgba(59,130,246,.65),0 0 32px rgba(59,130,246,.4);}
/* modo claro: glow azul más visible por defecto */
[data-theme="light"] #aiBtn,[data-theme="light-soft"] #aiBtn{background:#fff;color:#1a1f2c;box-shadow:0 2px 8px rgba(59,130,246,.22),0 8px 24px rgba(59,130,246,.18),0 0 0 2px rgba(59,130,246,.35),0 0 18px rgba(59,130,246,.25);}
[data-theme="light"] #aiBtn:hover,[data-theme="light-soft"] #aiBtn:hover{box-shadow:0 4px 12px rgba(59,130,246,.35),0 12px 32px rgba(59,130,246,.28),0 0 0 2.5px rgba(59,130,246,.7),0 0 28px rgba(59,130,246,.5),0 0 50px rgba(59,130,246,.2);}
.ai-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;}
#aiPanel{position:fixed;bottom:86px;right:24px;z-index:500;width:360px;max-height:520px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);box-shadow:var(--shadow);display:none;flex-direction:column;transition:width .2s,max-height .2s;}
#aiPanel.open{display:flex !important;}
body:has(#appScreen.show) #aiPanel{display:none;}
body:has(#appScreen.show) #aiPanel.open{display:flex !important;}
#aiPanel.maximized{width:680px;max-height:82vh;}
#aiPanel.maximized .ai-msgs{max-height:calc(82vh - 140px);}
#aiPanel.minimized .ai-msgs,#aiPanel.minimized .ai-input{display:none;}
#aiPanel.minimized{max-height:unset;}
#aiPanel.fullscreen{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-height:100vh!important;border-radius:0!important;z-index:600;}
#aiPanel.fullscreen .ai-msgs{max-height:calc(100vh - 150px)!important;}
.ai-win-btn.aw-fs{background:#5e5e5e;color:#fff;font-size:11px;}
.ai-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ai-head-title{flex:1;min-width:0;}
.ai-head-title div:first-child{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-win-controls{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.ai-win-btn{width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;line-height:1;padding:0;transition:filter .15s;}
.ai-win-btn:hover{filter:brightness(1.25);}
.ai-win-btn.aw-close{background:#ff5f57;color:#7a0000;}
.ai-win-btn.aw-max{background:#28c840;color:#003d00;}
.ai-win-btn.aw-min{background:#febc2e;color:#6b4700;}
.ai-msgs{flex:1;overflow-y:auto;padding:12px;min-height:200px;max-height:340px;}
.ai-msg{margin-bottom:10px;font-size:13px;line-height:1.5;}
.ai-msg.user{text-align:right;}.ai-msg.user span{background:var(--accent);color:#000;padding:6px 12px;border-radius:12px 12px 2px 12px;display:inline-block;max-width:85%;word-break:break-word;}
.ai-msg.bot span{background:var(--bg4);padding:6px 12px;border-radius:12px 12px 12px 2px;display:inline-block;max-width:90%;word-break:break-word;}
:root[data-theme="light"] .ai-msg.bot span,:root[data-theme="light-soft"] .ai-msg.bot span{background:linear-gradient(180deg,#f3f4f6,#e5e7eb);color:#1a1a1a;border:1px solid #d1d5db;}
:root[data-theme="light"] .ai-msg.user span,:root[data-theme="light-soft"] .ai-msg.user span{background:linear-gradient(180deg,#fef3cd,#fde68a);color:#1a1a1a;border:1px solid #fcd34d;}
.mic-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s var(--ease-out);flex-shrink:0;padding:0;}
.mic-btn:hover{background:var(--bg3);border-color:var(--accent);color:var(--accent);transform:scale(1.05);}
.mic-btn.recording{background:#ef4444;border-color:#dc2626;color:#fff;animation:micPulse 1.2s ease-in-out infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.5);}50%{box-shadow:0 0 0 8px rgba(239,68,68,0);}}
.ai-hint{display:block;font-size:10px;color:var(--text3);margin-top:4px;text-align:right;padding:0 10px 6px;}
.ai-input{border-top:1px solid var(--border);padding:10px;display:flex;gap:8px;align-items:flex-end;}
.ai-input textarea{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:8px 11px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;resize:none;overflow-y:hidden;line-height:1.45;height:38px;max-height:130px;transition:border-color .18s;}
.ai-input textarea:focus{border-color:var(--accent);}
.ai-input textarea.at-max{overflow-y:auto;}
/* NOTIFICATIONS */
#notifArea{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);top:auto;right:auto;z-index:480;display:flex;flex-direction:column-reverse;gap:8px;max-width:min(420px,90vw);width:auto;pointer-events:none;align-items:center;}
#notifArea > .notif{pointer-events:auto;position:relative;}
.notif{background:rgba(20,22,28,0.55);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.92);font-weight:500;font-size:13px;letter-spacing:0.1px;border-radius:999px;padding:8px 16px;box-shadow:0 4px 16px rgba(0,0,0,0.15);opacity:0.85;animation:notifIn .25s ease;transition:opacity .25s ease, transform .25s ease;white-space:nowrap;will-change:filter,opacity,transform;}
.notif.notif-out{opacity:0;transform:translateY(20px);}
:root[data-theme="light"] .notif,:root[data-theme="light-soft"] .notif{background:rgba(255,255,255,0.55);border:1px solid rgba(0,0,0,0.06);color:rgba(40,40,40,0.92);box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.notif.notif-s,.notif.ok{box-shadow:0 4px 16px rgba(34,197,94,0.25);border-color:rgba(34,197,94,0.3);}
.notif.notif-e,.notif.err{box-shadow:0 4px 16px rgba(239,68,68,0.25);border-color:rgba(239,68,68,0.3);}
.notif.notif-w,.notif.warn{box-shadow:0 4px 16px rgba(245,166,35,0.25);border-color:rgba(245,166,35,0.3);}
@keyframes notifIn{from{opacity:0;transform:translateY(20px);}to{opacity:0.85;transform:translateY(0);}}
/* CODE BLOCK */
.code-block{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);overflow-x:auto;line-height:1.6;white-space:pre;}
/* BELL NOTIFICATIONS */
.ntbell{position:relative;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .15s;display:flex;align-items:center;flex-shrink:0;}
.ntbell:hover{background:var(--bg3);}
.nbcount{position:absolute;top:1px;right:1px;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:2px 4px;box-sizing:border-box;}
#ntPanel{position:fixed;top:52px;right:12px;width:320px;max-height:440px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);box-shadow:var(--shadow);z-index:490;display:none;flex-direction:column;overflow:hidden;}
#ntPanel.open{display:flex;}
.ntp-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.ntp-list{overflow-y:auto;flex:1;}
.ntp-item{padding:9px 13px;border-bottom:1px solid var(--border);font-size:12px;display:flex;gap:8px;align-items:flex-start;cursor:default;}
.ntp-item.clickable{cursor:pointer;}
.ntp-item.clickable:active{background:var(--bg3);}
.ntp-item:hover{background:var(--bg3);}
.ntp-item.unread{background:rgba(245,166,35,.04);}
.ntp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.ntp-empty{padding:32px;text-align:center;color:var(--text2);font-size:13px;}
/* CHAT PER ORDER */
.chat-wrap{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;margin-top:4px;}
.chat-msgs{max-height:200px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;}
.chat-msg{}
.chat-meta{font-size:10px;color:var(--text2);margin-bottom:2px;}
.chat-meta.right{text-align:right;}
.chat-bubble{display:inline-block;max-width:82%;background:var(--bg4);padding:6px 10px;border-radius:10px;word-break:break-word;font-size:12px;line-height:1.4;}
.chat-bubble.mine{background:var(--accent);color:#000;}
.chat-bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;}
.chat-bubble-wrap.right{align-items:flex-end;}
.chat-footer{border-top:1px solid var(--border);padding:8px;display:flex;gap:6px;align-items:center;}
.chat-footer input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:7px;padding:7px 10px;font-size:12px;font-family:'DM Sans',sans-serif;outline:none;}
/* CHAT EXTRAS: mention dropdown, image preview, reactions */
.chat-mention-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;}
.chat-mention-wrap input{width:100%;}
.chat-mention-dd{position:absolute;bottom:calc(100% + 4px);left:0;background:var(--bg4);border:1px solid var(--border2);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.3);min-width:180px;max-height:160px;overflow-y:auto;z-index:200;display:none;}
.chat-mention-dd.open{display:block;}
.chat-mention-item{padding:6px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.chat-mention-item:hover{background:var(--bg3);}
.chat-mention-item .cmr{font-size:10px;color:var(--text3);}
.chat-attach-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:4px 6px;color:var(--text2);border-radius:6px;flex-shrink:0;line-height:1;}
.chat-attach-btn:hover{background:var(--bg3);}
.chat-img-preview-wrap{padding:0 8px 6px;display:none;}
.chat-img-preview-wrap.show{display:block;}
.chat-img-preview{max-width:120px;max-height:80px;border-radius:6px;cursor:pointer;border:1px solid var(--border2);}
.chat-bubble img.chat-img{max-width:140px;max-height:100px;border-radius:6px;display:block;margin-top:3px;cursor:pointer;}
.chat-mention-tag{color:var(--accent);font-weight:700;}
.chat-reactions-wrap{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap;}
.chat-react-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:10px;font-size:11px;padding:1px 6px;cursor:pointer;display:flex;align-items:center;gap:3px;}
.chat-react-btn:hover,.chat-react-btn.active{background:rgba(245,166,35,.18);}
.chat-react-quick{display:none;gap:3px;position:absolute;top:-34px;right:0;background:var(--bg4);border:1px solid var(--border2);border-radius:20px;padding:3px 8px;z-index:100;white-space:nowrap;}
.chat-react-quick.show{display:flex;}
.chat-react-quick span{font-size:16px;cursor:pointer;transition:transform .1s;}
.chat-react-quick span:hover{transform:scale(1.3);}
.chat-bubble-wrap{position:relative;}
/* OFFLINE BADGE */
.offline-badge{background:rgba(245,166,35,.15);border:1px solid rgba(245,166,35,.3);color:var(--accent);font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700;display:none;}
.offline-badge.show{display:inline-flex;align-items:center;gap:4px;}
/* Ocultar elementos flotantes en pantalla de login (forzar !important para vencer cache) */
#ntBell,#aiBtn,#aiPanel,#notifArea,#codexNotifBell,#bgWrap{display:none !important;}
/* Cuando la app está visible, #aiPanel.open debe vencer al display:none !important global */
body:has(#appScreen.show) #aiPanel.open{display:flex !important;}
body:not(:has(#appScreen.show)) #codexScrollTopBtn{display:none !important;}
#appScreen.show #ntBell,
#appScreen.show #aiBtn,
body:has(#appScreen.show) #notifArea,
body:has(#appScreen.show) #codexNotifBell{display:flex !important;}
body:has(#appScreen.show) #bgWrap{display:inline-flex !important;max-width:200px;flex-shrink:1;}
#codexNotifBell{transition:opacity .25s ease;}
@media(max-width:639px){
/* 🔔🌙🎓🔄 siempre visibles en mobile — kebab eliminado */
#topbarKebab{display:none!important;}
}
#codexNotifBell.scroll-faded{opacity:0.3;}
/* Campanita en topbar — ajuste mobile */
@media(max-width:768px){
#codexNotifBell{width:30px !important;height:30px !important;font-size:15px !important;}
}
/* CATÁLOGO GRID */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.prod-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);}
.prod-card:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(245,166,35,.12);}
.prod-img-wrap{position:relative;aspect-ratio:1/1;background:var(--bg3);overflow:hidden;flex-shrink:0;}
.prod-img-wrap img{width:100%;height:100%;object-fit:cover;}
.prod-img-placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:52px;color:var(--text3);}
.prod-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase;}
.prod-badge-share{position:absolute;top:8px;right:8px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;}
.prod-badge-tienda{position:absolute;bottom:8px;left:8px;background:var(--green2);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;}
.prod-info{padding:11px;flex:1;display:flex;flex-direction:column;gap:3px;}
.prod-cat{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;}
.prod-nombre{font-weight:700;font-size:13px;color:var(--text);line-height:1.35;}
.prod-prov{font-size:11px;color:var(--accent);}
.prod-precio-wrap{margin-top:5px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.prod-precio-tachado{font-size:11px;color:var(--text3);text-decoration:line-through;}
.prod-precio-actual{font-size:16px;font-weight:700;color:var(--green);}
.prod-precio-mayor{font-size:10px;color:var(--text2);margin-top:1px;}
.prod-stock{font-size:11px;color:var(--text2);}
.prod-actions{margin-top:auto;padding-top:9px;display:flex;flex-direction:column;gap:5px;}
.prod-pres-grid{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.prod-pres-chip{background:linear-gradient(180deg,rgba(20,20,20,.92),rgba(10,10,10,.96));border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:8px 12px;font-size:11px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.25);display:flex;flex-direction:column;gap:4px;transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out);}
.prod-pres-chip:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -1px 0 rgba(0,0,0,0.3) inset,0 6px 16px rgba(0,0,0,0.22);}
:root[data-theme="light"] .prod-pres-chip,
:root[data-theme="light-soft"] .prod-pres-chip{border:1.5px solid rgba(255,255,255,0.35);box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 -1px 0 rgba(0,0,0,0.3) inset,0 4px 12px rgba(0,0,0,0.18);}
:root[data-theme="light"] .prod-pres-chip:hover,
:root[data-theme="light-soft"] .prod-pres-chip:hover{box-shadow:0 1px 0 rgba(255,255,255,0.55) inset,0 -1px 0 rgba(0,0,0,0.35) inset,0 6px 16px rgba(0,0,0,0.22);}
.prod-pres-chip .pres-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.prod-pres-chip .pres-nombre{font-weight:700;font-size:12px;letter-spacing:.2px;color:#fff;}
.prod-pres-chip .pres-precio{font-weight:700;font-size:13px;color:var(--accent);letter-spacing:.3px;}
.prod-pres-chip .pres-roles{font-size:10px;color:rgba(255,255,255,0.6);display:flex;flex-wrap:wrap;gap:8px;}
.prod-pres-chip .pres-roles span b{color:rgba(255,255,255,0.85);font-weight:600;}
.prod-pres-chip .pres-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:2px;}
.prod-pres-chip .pres-actions button{background:transparent;border:none;color:rgba(255,255,255,0.7);padding:3px 6px;border-radius:6px;cursor:pointer;font-size:11px;transition:background .15s var(--ease-out),color .15s var(--ease-out);}
.prod-pres-chip .pres-actions button:hover{background:rgba(255,255,255,0.12);color:#fff;}
.prod-pres-chip .pres-actions button.pres-del:hover{background:rgba(220,38,38,.25);color:#fca5a5;}
/* Imágenes dentro de descripciones HTML */
.desc-html img{max-width:100%;height:auto;border-radius:8px;margin:6px 0;display:block;}
.desc-html video{max-width:100%;border-radius:8px;margin:6px 0;display:block;}
.desc-html p{margin-bottom:8px;}
.desc-html h1,.desc-html h2,.desc-html h3{margin-bottom:6px;margin-top:12px;}
/* PRINT */
/* Botón hamburger ☰ visible siempre (PC + mobile) — el usuario lo usa para abrir/cerrar la sidebar */
#menuBtn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text);cursor:pointer;padding:6px;border-radius:6px;}
#menuBtn:hover{background:var(--bg3);}
/* ── Account Switcher (multi-rol tipo TikTok) ── */
.account-switcher{position:relative;display:inline-block;width:100%}
.account-current{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:99px;cursor:pointer;transition:all .15s ease-out;}
.account-current:hover{border-color:var(--accent)}
.account-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--bg3);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text)}
.account-name{font-weight:600;font-size:13px}
.account-role{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-left:6px}
.account-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:6px;min-width:260px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:1000;}
.account-list{max-height:300px;overflow-y:auto}
.account-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .12s;}
.account-item:hover{background:var(--bg3)}
.account-item img,.account-item .account-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;font-size:13px}
.account-item-info{flex:1;min-width:0}
.account-item-info .nm{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-item-info .role{font-size:11px;color:var(--text3)}
.badge-active{margin-left:auto;font-size:9px;background:var(--accent);color:#fff;padding:2px 6px;border-radius:99px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.account-rm{margin-left:6px;background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:6px}
.account-rm:hover{color:var(--red);background:var(--bg3)}
.account-divider{height:1px;background:var(--border2);margin:6px 0}
.account-add-btn{width:100%;padding:8px;text-align:left;background:transparent;border:none;color:var(--accent);font-weight:600;cursor:pointer;border-radius:8px;font-size:13px;}
.account-add-btn:hover{background:var(--bg3)}
/* ── Toggle moderno (Tutorial switch) ── */
.toggle-modern{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:8px 0}
.toggle-modern input{position:absolute;opacity:0;width:0;height:0}
.toggle-modern-track{position:relative;width:40px;height:22px;background:var(--bg3);border:1px solid var(--border2);border-radius:99px;transition:background .15s;flex-shrink:0}
.toggle-modern-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--text);border-radius:50%;transition:transform .15s}
.toggle-modern input:checked + .toggle-modern-track{background:var(--accent);border-color:var(--accent)}
.toggle-modern input:checked + .toggle-modern-track::after{transform:translateX(18px);background:#fff}
.toggle-modern-label{font-size:13px;font-weight:600;color:var(--text)}
/* PANEL ACCIONES (_abrirPanelAcciones) */
#_panelAccionesOverlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9997;opacity:0;display:none;transition:opacity .22s var(--ease-in-out,cubic-bezier(.4,0,.2,1))}
#_panelAccionesOverlay.open{display:block;opacity:1}
#_panelAcciones{position:fixed;top:0;right:0;z-index:9998;width:min(300px,92vw);height:100vh;background:var(--bg2);border-left:1px solid var(--border2);box-shadow:-14px 0 40px rgba(0,0,0,.4);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .22s var(--ease-in-out,cubic-bezier(.4,0,.2,1))}
#_panelAcciones.open{transform:translateX(0)}
._pa-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
._pa-header h3{font-size:15px;font-weight:800;color:var(--text);margin:0}
._pa-close-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
._pa-close-btn:hover{background:var(--bg4,var(--bg3));color:var(--text)}
._pa-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
._pa-section{display:flex;flex-direction:column;gap:7px}
._pa-section-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
._pa-chips{display:flex;flex-wrap:wrap;gap:6px}
._pa-chip{height:36px;padding:0 13px;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;touch-action:manipulation}
._pa-chip:hover{border-color:var(--accent);color:var(--text)}
._pa-chip.active{background:rgba(245,166,35,.15);border-color:var(--accent);color:var(--accent)}
._pa-chip.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);border-color:#b91c1c;color:#fff}
._pa-chip.btn-success{background:linear-gradient(180deg,#22c55e,#16a34a);border-color:#15803d;color:#fff}
._pa-input{width:100%;height:44px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:0 13px;font-size:13px;font-family:inherit;outline:none;transition:border-color .18s;box-sizing:border-box}
._pa-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
._pa-select-wrap{position:relative;display:block}
._pa-select-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text3);font-size:12px}
._pa-select{width:100%;height:44px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:10px;padding:0 32px 0 13px;font-size:13px;font-family:inherit;outline:none;appearance:none;cursor:pointer;transition:border-color .18s;box-sizing:border-box}
._pa-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
._pa-fecha-row{display:flex;gap:8px}
._pa-fecha-row ._pa-input{flex:1}
._pa-sep{border:none;border-top:1px solid var(--border);margin:2px 0;width:100%}
._pa-footer{padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0}
@media(max-width:640px){#_panelAcciones{width:min(310px,92vw)}._pa-chip{font-size:12px;padding:0 11px;height:34px}}
@media print{.sidebar,.topbar,.btn,.fbar,.moverlay,#aiBtn,#aiPanel,#notifArea,#menuBtn,#sideOverlay,#ntPanel,#ntBell{display:none!important;}.main{margin:0!important;}}
/* ── MENSAJES ── */
.ca.mc-page{padding:0!important;overflow:hidden;height:0;min-height:0;flex:1;}
.mc-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%;}
.mc-conv-list{flex:1;overflow-y:auto;overflow-x:hidden;width:100%;min-height:0;}
.mc-conv-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;min-width:0;}
.mc-conv-item:hover,.mc-conv-item:active{background:var(--bg3);}
.mc-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#000;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mc-info{flex:1;min-width:0;}
.mc-name{font-weight:600;font-size:14px;color:var(--text);}
.mc-preview{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.mc-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.mc-time{font-size:10px;color:var(--text3);}
.mc-badge{background:var(--accent);color:#000;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;min-width:18px;text-align:center;}
/* Hilo de conversación */
.mc-thread{display:flex;flex-direction:column;height:100%;overflow:hidden;}
.mc-thread-header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;}
.mc-back{cursor:pointer;color:var(--accent);font-size:20px;line-height:1;padding:4px;}
.mc-thread-name{font-weight:700;font-size:15px;}
.mc-thread-role{font-size:11px;color:var(--text3);}
.mc-bubbles{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box;}
.mc-bubble{max-width:78%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.5;word-break:break-word;}
.mc-bubble.sent{align-self:flex-end;background:var(--accent);color:#000;border-bottom-right-radius:3px;}
.mc-bubble.recv{align-self:flex-start;background:var(--bg3);color:var(--text);border-bottom-left-radius:3px;}
.mc-btime{font-size:10px;opacity:.65;margin-top:3px;text-align:right;}
.mc-recv-name{font-size:10px;font-weight:700;color:var(--accent);margin-bottom:2px;}
.mc-input-bar{display:flex;gap:8px;padding:10px 12px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;width:100%;box-sizing:border-box;}
.mc-input-bar textarea{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:8px 14px;color:var(--text);font-size:13px;resize:none;max-height:100px;overflow-y:auto;min-width:0;}
.mc-send-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#000;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border:none;}
.mc-empty{text-align:center;padding:60px 20px;color:var(--text2);font-size:14px;}
.mc-day-sep{text-align:center;font-size:10px;color:var(--text3);margin:8px 0;position:relative;}
.mc-day-sep span{background:var(--bg);padding:0 10px;}
/* TABLET */
@media(max-width:1024px){
.sidebar{width:210px;}
.main{margin-left:210px;}
.sgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}
/* MOBILE */
@media(max-width:768px){
.sidebar{
width:260px;
transform:translateX(-100%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
z-index:400;
box-shadow:4px 0 24px rgba(0,0,0,.5);
}
.sidebar.open{transform:translateX(0);}
#sideOverlay{
display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
z-index:399;opacity:0;transition:opacity .28s;
}
#sideOverlay.show{display:block;opacity:1;}
/* Fix: main en mobile como columna fija para que sticky topbar funcione bien */
.main{margin-left:0;overflow-x:hidden;max-width:100vw;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
/* Fix topbar: fija en mobile, no se superpone con contenido */
.topbar{padding:10px 14px;gap:8px;position:sticky;top:0;z-index:500;flex-shrink:0;}
.tbtitle{font-size:15px;}
.tbactions{gap:5px;flex-wrap:wrap;}
.tbactions .btn{padding:8px 13px;font-size:12px;}
#menuBtn{
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:8px;border:1px solid var(--border2);
background:var(--bg3);color:var(--text);cursor:pointer;flex-shrink:0;
}
/* Fix: ca es el scroll container real en mobile */
.ca{padding:14px;overflow-x:hidden;max-width:100%;flex:1;overflow-y:auto;}
/* Fix padding uniforme en cards mobile */
.sc{padding:12px 12px 10px;}
/* Grids de presentaciones de 4 cols → 2 cols en mobile (recuadro negro no se corta) */
.mbody [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:8px!important;}
.mbody [style*="grid-template-columns:2fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:8px!important;}
/* Catálogo: cards más pequeñas en mobile */
.prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:10px!important;}
/* Liquidación/Balance: KPIs ajustados a mobile */
[style*="grid-template-columns:repeat(auto-fill,minmax(150px,1fr))"],
[style*="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))"],
[style*="grid-template-columns:repeat(auto-fill,minmax(160px,1fr))"]{grid-template-columns:repeat(2,1fr)!important;gap:8px!important;}
/* Analítica: rankings 1fr 1fr → 1fr en mobile */
[style*="grid-template-columns:1fr 1fr;gap:14px"]{grid-template-columns:1fr!important;}
/* Filtros de pedidos (fbar) — apilar en mobile */
.fbar{flex-wrap:wrap!important;gap:6px!important;}
.fbar select,.fbar input{flex:1 1 calc(50% - 6px)!important;min-width:0!important;}
.sgrid{grid-template-columns:repeat(2,1fr);gap:10px;}
.sval{font-size:22px;}
.frow,.frow3{grid-template-columns:1fr;}
.zgrid{grid-template-columns:1fr;}
.zgrid.collapsed .zcard:not(.sel){display:none;}
.zgrid.collapsed .zcard.sel{border-color:var(--accent);}
.mgrid{grid-template-columns:1fr 1fr;}
.fbar{gap:6px;}
.fbar input,.fbar select{font-size:16px !important;padding:7px 9px;flex:1;min-width:120px;}
.tbl th{padding:6px 8px;font-size:11px;}
.tbl td{padding:8px 8px;font-size:12px;}
/* Tablas: scroll solo dentro del contenedor, sin afectar la página */
.tc{overflow-x:auto;max-width:100%;}
#mapaBackBtn{display:block!important;}
#ordersMap{height:calc(100vh - 260px)!important;min-height:280px!important;}
/* Ocultar columna usuario en mobile */
.tbl td.td-user,.tbl th.th-user{display:none;}
/* Botones acción tabla — compactos y táctiles en mobile */
.tbl td.td-actions{display:flex;flex-wrap:wrap;gap:4px;padding:6px 4px;}
.tbl td.td-actions .btn{flex:0 0 auto;justify-content:center;padding:6px 10px;font-size:11px;margin:0;min-height:36px;min-width:52px;}
/* Modal — evitar desborde en pantallas angostas */
.moverlay{padding:10px;}
.mbox{border-radius:var(--radius);max-width:calc(100vw - 20px)!important;width:100%!important;box-sizing:border-box;max-height:95vh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
.mbox.lg,.mbox.xl{max-width:calc(100vw - 20px)!important;}
.mbody{padding:14px;word-break:break-word;overflow-x:hidden;overflow-y:auto!important;flex:1 1 auto!important;-webkit-overflow-scrolling:touch!important;}
.fg input, .fg select, .fg textarea { font-size:16px !important; }
.mbody input,.mbody select,.mbody textarea{max-width:100%;box-sizing:border-box;}
.mhead{padding:13px 16px;flex-shrink:0!important;}
.mfoot{padding:10px 14px;flex-wrap:wrap;flex-shrink:0!important;position:relative!important;}
/* Grids inline en modales — colapsar a 1 columna */
.mbody [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
.mbody [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
/* Boleta en modal */
.boleta>div:first-child{flex-direction:column!important;}
.boleta [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
.boleta [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;}
.bt{font-size:10px;word-break:break-word;}
.bt th,.bt td{padding:3px 5px;}
.bt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Botones de acción en tabla pedidos — más compactos */
.act-btns{display:flex;flex-wrap:wrap;gap:7px;}
.act-btns .btn{padding:6px 10px;font-size:10px;}
#aiPanel{width:calc(100vw - 24px);right:12px;bottom:80px;}
#aiPanel.maximized{width:calc(100vw - 24px);max-height:80vh;}
#aiBtn{bottom:16px;right:16px;width:46px;height:46px;font-size:19px;}
#notifArea{bottom:80px;left:50%;right:auto;top:auto;transform:translateX(-50%);max-width:min(420px,90vw);width:auto;}
#ntPanel{width:calc(100vw - 24px);right:12px;top:52px;}
.lcard{padding:28px 20px;}
.ldemo{font-size:10px;}
.boleta{padding:14px;font-size:11px;}
.stitle{font-size:10px;}
/* Ocultar columnas no esenciales en tablas */
.tbl .col-hide{display:none;}
.col-show-mobile{display:block!important;}
/* Mensajes: prevenir overflow en lista y vista de hilo */
.mc-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.mc-wrap,.mc-thread{max-width:100vw;width:100%;height:100%;}
.mc-conv-list,.mc-bubbles{max-width:100vw;}
/* En mobile, col-show-mobile es visible; en desktop se oculta abajo */
/* Mejoras para tablas en pantallas más pequeñas */
@media(max-width:640px){
.tbl td,.tbl th{font-size:11px;padding:6px 4px;}
}
/* Ajustes para la pantalla de login en móviles */
.lcard{padding:28px 18px;}
.llogo h1{font-size:clamp(20px,7vw,36px);letter-spacing:1px;white-space:normal;word-break:break-word;}
.llogo p{font-size:11px;}
/* Bandera 🇵🇾 mobile: separación 0.5em (~6mm) del título */
.bandera-py{font-size:.5em;margin-left:.5em;}
/* Padding uniforme en recuadros — igual a Liquidación */
.lcard2{padding:14px 14px 14px 20px;}
/* Tablas con borde amarillo (.tc): mismo espacio interno que .lcard2 */
.tc{padding-left:20px;}
/* Topbar mobile: fila única compacta */
.topbar{gap:4px;padding:6px 12px;}
.tbtitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#menuBtn{order:0;flex-shrink:0;margin-top:2px;}
.tbactions{order:1;flex:1;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;margin-top:2px;}
/* Fix botón ⋮ kebab siempre alineado a la derecha en cualquier contexto */
.lcard2 .order-menu-wrap{margin-left:auto;flex-shrink:0;}
.order-menu-wrap{margin-left:auto;flex-shrink:0;}
/* Botones acción táctiles en mobile */
.act-btns{justify-content:flex-start;gap:8px;}
.order-menu-btn{min-width:40px;min-height:40px;}
/* Fix: elementos que se corten por overflow */
.sgrid{overflow:hidden;}
.sc{box-sizing:border-box;min-width:0;word-break:break-word;}
/* Topbar mobile: ☰ | título (izq) | 4 iconos compactos (der) — una sola línea */
#menuBtn{order:0;flex-shrink:0;}
.tbtitle,#tbTitle{order:1;flex:1 1 auto;text-align:left!important;justify-content:flex-start!important;margin-left:0!important;padding-left:6px!important;padding-right:6px!important;font-size:13px!important;min-width:0!important;}
#tbTitleText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex-shrink:1;display:inline-block;max-width:100%;}
/* En mobile el GPS pill muestra solo el dot, no el texto largo */
#gpsStatusPill{order:1;flex-shrink:0;padding:4px 6px!important;}
#gpsStatusPill .gps-pill-text, #gpsStatusPill .gps-pill-time{display:none!important;}
.tbactions,#tbActions{order:2;flex:0 0 auto;}
/* #tbGlobalBtns va a la derecha (order:3) — sin esto quedaba order:0 y aparecía entre ☰ y el título */
#tbGlobalBtns{order:3;flex-shrink:0;gap:3px!important;}
#tbGlobalBtns .topbar-icon-btn{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;border-radius:8px!important;margin-right:0!important;}
#topbarKebab{order:4;}
#offlineBadge{order:5;}
}
/* FIX mobile mapa: 2 filas en topbar — botones fila 1, combos fila 2 */
@media(max-width:639px){
:root{--mapa-offset:175px;}
/* Topbar mapa mobile: 2 filas */
.page-mapa #tbActions{
flex-wrap:wrap!important;
overflow:visible!important;
gap:4px!important;
padding:4px 6px;
align-items:center;
}
/* Botones de acción del mapa: fluyen en orden DOM */
.page-mapa #tbActions .map-btn{order:0;flex-shrink:0;}
/* Zona + Usuarios: lado a lado en la misma fila (cada uno 1 columna del grid 2-col) */
#mapaZonaCombo{order:0!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;}
#mapaVendCombo{order:1!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;}
#mapaZonaCombo .search-combo-input,#mapaVendCombo .search-combo-input{height:36px!important;min-height:36px!important;max-height:36px!important;padding:6px 26px 6px 12px!important;}
/* Contenedor contadores: flex-wrap + ancho completo para que dlvSearchCombo quepa */
#mapaContadores{display:flex!important;flex-wrap:wrap!important;width:100%!important;box-sizing:border-box!important;gap:4px!important;}
/* Buscador delivery dentro de contadores: ancho completo, compacto como los botones */
#dlvSearchCombo{width:100%!important;flex:1 1 100%!important;box-sizing:border-box!important;margin:0!important;}
#dlvSearchCombo .search-combo-input,#dlvSearchInput{height:32px!important;min-height:32px!important;padding:6px 28px 6px 36px!important;}
/* Dropdown combos: posición dinámica vía JS (evita clipping overflow subMenuActions) */
#mapaZonaCombo .search-combo-list,#mapaVendCombo .search-combo-list,#dlvSearchCombo .search-combo-list{z-index:9999!important;}
/* Botones del mapa más compactos en mobile */
.map-btn{padding:5px 8px!important;font-size:11px!important;gap:3px!important;flex-shrink:0;white-space:nowrap;}
/* Topbar title: solo una línea en mapa */
.page-mapa .tbtitle{font-size:12px;padding-bottom:4px;}
/* tbactions general: cuando hay botones del mapa, NO wrappear */
.tbactions:has(.map-btn){flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* MOB2 — área táctil mínima Apple 44px en btn-sm y .btnPagado (deben verse iguales en pagos) */
.btn-sm,.btnPagado{min-height:44px;padding:8px 12px;}
}
@media(max-width:600px){input,select,textarea{font-size:16px !important;}}
@media(max-width:639px){
#mapaZonaCombo .search-combo-input,#mapaVendCombo .search-combo-input,
#dlvSearchInput,.search-combo-input{font-size:16px !important;}
}
/* En desktop: ocultar elementos que solo deben verse en mobile */
.col-show-mobile{display:none;}
.act-btns{display:flex;gap:8px;flex-wrap:wrap;}
/* ─── KEBAB MENU pedidos ─── */
.order-menu-wrap{position:relative;display:inline-block;}
.order-menu-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:10px 14px;min-height:44px;min-width:44px;cursor:pointer;color:var(--text);font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,box-shadow .15s;}
.order-menu-btn:hover{background:var(--bg3);box-shadow:0 2px 8px rgba(0,0,0,.25);}
.order-dropdown{position:absolute;right:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--border2,var(--border));border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.35);z-index:200;min-width:172px;padding:6px 0;display:none;backdrop-filter:blur(4px);}
.order-dropdown.open{display:block;animation:fadeInDown .12s ease;}
.order-dropdown button{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;cursor:pointer;color:var(--text);font-size:13px;transition:background .12s;border-radius:0;}
.order-dropdown button:hover{background:var(--bg3,rgba(255,255,255,.07));}
.order-dropdown button:first-child{border-radius:12px 12px 0 0;}
.order-dropdown button:last-child{border-radius:0 0 12px 12px;}
.order-dropdown .od-sep{height:1px;background:var(--border);margin:4px 0;}
/* Botón Cerrar Jornada — sobrio, ghost/outline, hover accent sutil */
.btnCerrarJornada{display:inline-flex;align-items:center;gap:10px;margin:24px auto;padding:11px 22px 11px 18px;font-size:13.5px;font-weight:600;letter-spacing:0.2px;color:var(--text);background:linear-gradient(180deg, var(--bg2), var(--bg3));border:1px solid var(--border2,var(--border));border-radius:12px;cursor:pointer;position:relative;transition:transform .15s var(--ease-out,ease-out), border-color .15s var(--ease-out,ease-out), color .15s var(--ease-out,ease-out), box-shadow .15s var(--ease-out,ease-out);box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 4px rgba(0,0,0,0.08);}
.btnCerrarJornada:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,166,35,0.12), 0 0 0 1px rgba(245,166,35,0.18);}
.btnCerrarJornada:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;}
.btnCerrarJornada:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,166,35,0.25);}
.btnCerrarJornada:disabled,.btnCerrarJornada[aria-disabled="true"]{opacity:0.45;cursor:not-allowed;pointer-events:none;}
.btnCerrarJornada svg{flex-shrink:0;stroke-width:1.8;opacity:0.85;transition:opacity .15s var(--ease-out,ease-out);}
.btnCerrarJornada:hover svg{opacity:1;}
.btnCerrarJornada .btn-arrow{margin-left:4px;opacity:0.55;transition:transform .2s var(--ease-out,ease-out), opacity .2s var(--ease-out,ease-out);}
.btnCerrarJornada:hover .btn-arrow{transform:translateX(3px);opacity:0.85;}
:root[data-theme="light"] .btnCerrarJornada,:root[data-theme="light-soft"] .btnCerrarJornada{/* hereda vars del tema */}
/* Toggle 3D genérico */
.toggleBtn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 14px;border-radius:999px;background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);transition:all .2s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.toggleBtn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(34,197,94,.0) 0%,rgba(6,182,212,.0) 100%);transition:background .25s ease;pointer-events:none}
.toggleBtn.on{background:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);border-color:rgba(6,182,212,.55);color:#fff;box-shadow:0 6px 18px rgba(16,185,129,.35),0 0 0 1px rgba(6,182,212,.25) inset,0 0 24px rgba(34,197,94,.18)}
.toggleBtn.off{background:linear-gradient(180deg,#475569 0%,#334155 100%);color:#cbd5e1;border-color:rgba(148,163,184,.25)}
.toggleBtn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(16,185,129,.32)}
.toggleBtn.off:hover{box-shadow:0 6px 16px rgba(0,0,0,.28)}
.toggleBtn:active{transform:translateY(1px)}
.toggleBtn .dot{position:relative;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:all .25s ease}
.toggleBtn.on .dot{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9),0 0 18px rgba(34,197,94,.55),inset 0 0 0 2px rgba(255,255,255,.6)}
.toggleBtn.on .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:tglPulse 2.2s ease-in-out infinite}
@keyframes tglPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:0}}
/* Renglón de usuario en Pagos — 3D clickeable */
.userPagoRow{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--accent);border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.04);cursor:pointer;transition:all .15s var(--ease-out);margin-bottom:10px;flex-wrap:wrap}
.userPagoRow:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.userPagoRow:active{transform:translateY(1px) scale(.998);box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 0 0 rgba(255,255,255,0);transition:transform .08s ease,box-shadow .12s ease}
.userPagoRow .avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#d97706);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px;flex-shrink:0;overflow:hidden;border:2px solid rgba(0,0,0,0.45);box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset}
.userPagoRow .avatar img{width:100%;height:100%;object-fit:cover}
.userPagoRow .info{flex:1;min-width:140px}
.userPagoRow .nombre{font-size:15px;font-weight:800;color:var(--text)}
.userPagoRow .rol{font-size:11px;color:var(--text2);text-transform:capitalize}
.userPagoRow .saldo{font-size:18px;font-weight:900;text-align:right;min-width:120px}
.userPagoRow .saldo.deuda{color:#ef4444}
.userPagoRow .saldo.ok{color:#22c55e}
.userPagoRow .saldo .label{font-size:10px;color:var(--text2);font-weight:600;display:block;text-transform:uppercase}
.userPagoRow .acciones{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;width:100%}
.userPagoRow .acciones > button{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
.btnPagado{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;background:linear-gradient(135deg,#10b981 0%,#16a34a 55%,#059669 100%);color:#fff;border:1px solid rgba(16,185,129,.55);font-size:11px;font-weight:800;letter-spacing:.01em;cursor:pointer;box-shadow:0 4px 14px rgba(16,185,129,.32),0 0 22px rgba(34,197,94,.18),inset 0 1px 0 rgba(255,255,255,.22);transition:all .2s cubic-bezier(.2,.8,.2,1);position:relative;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.btnPagado:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(16,185,129,.5),0 0 32px rgba(34,197,94,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.btnPagado:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(16,185,129,.35)}
.btnPagado:disabled,.btnPagado[disabled]{box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);filter:saturate(.4);opacity:.85}
.btnPagado.alto{box-shadow:0 0 0 3px rgba(245,158,11,.45),0 6px 18px rgba(16,185,129,.45),0 0 26px rgba(34,197,94,.28)}
.btnPagado.urgente{animation:pulseUrg 1.5s infinite;box-shadow:0 0 0 0 rgba(239,68,68,.55),0 6px 18px rgba(16,185,129,.45),0 0 26px rgba(34,197,94,.28)}
@keyframes pulseUrg{
0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55),0 6px 18px rgba(16,185,129,.45),0 0 26px rgba(34,197,94,.28)}
50%{box-shadow:0 0 0 12px rgba(239,68,68,0),0 6px 18px rgba(16,185,129,.45),0 0 26px rgba(34,197,94,.28)}
}
.pagoSaldoLive{margin-top:8px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;font-size:12px;line-height:1.7}
.pagoSaldoLive .line{display:flex;justify-content:space-between;gap:12px}
.pagoSaldoLive .line b{font-weight:800}
.pagoSaldoLive .complete{color:#22c55e;font-weight:800;text-align:center;margin-top:4px}
.pagoPeriodTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.pagoPeriodTab{padding:10px 14px;min-height:44px;border-radius:8px;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--accent);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s ease;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;box-sizing:border-box;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media(hover:hover){.pagoPeriodTab:hover{transform:translateY(-1px);background:var(--accent);color:#000}}
.pagoPeriodTab.active{background:linear-gradient(180deg,var(--accent) 0%,#d97706 100%);color:#000;border-color:#d97706;box-shadow:0 4px 10px rgba(245,158,11,.3)}
.pagoCalDay{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:var(--bg2);border:1px solid var(--border);font-size:12px;cursor:pointer;transition:all .12s ease}
.pagoCalDay:hover{transform:translateY(-1px);border-color:var(--accent)}
.pagoCalDay.has{background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%);border-color:var(--accent)}
.pagoCalDay.sel{background:linear-gradient(180deg,var(--accent) 0%,#d97706 100%);color:#fff;border-color:#d97706}
.pagoCalDay .dot{font-size:10px;color:var(--accent);margin-top:1px}
.pagoCalDay.sel .dot{color:#fff}
/* ── Controles búsqueda/filtro en PAGES.pagos ── */
.pagosControls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;align-items:center}
.pagosSearchInput{flex:1;min-width:200px;padding:9px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:13px}
.pagosSearchInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,158,11,.15)}
.pagosFilterChips{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pagosFilterChips > button:nth-child(5){grid-column:1/-1}
.pagosChip{padding:10px 14px;min-height:44px;border-radius:8px;background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--accent);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s ease;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;box-sizing:border-box;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media(hover:hover){.pagosChip:hover{background:var(--accent);color:#000}}
.pagosChip.active{background:linear-gradient(180deg,var(--accent) 0%,#d97706 100%);color:#000;border-color:#d97706;box-shadow:0 3px 8px rgba(245,158,11,.3)}
.pagosOrderSel{padding:9px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
/* ── Histórico mensual (Bloque 5) ── */
.historico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:16px}
.hmes{padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);transition:all .15s}
.hmes:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.2);border-color:var(--accent)}
.hmes.actual{background:linear-gradient(180deg,var(--bg3),var(--bg2));border-color:var(--accent);box-shadow:0 4px 12px rgba(245,158,11,.2)}
.hmes-nombre{font-size:10px;color:var(--text2);font-weight:700;text-transform:uppercase;margin-bottom:4px}
.hmes-pedidos{font-size:11px;color:var(--text2)}
.hmes-monto{font-size:14px;font-weight:900;color:var(--text);margin-top:4px}
/* ── Base de clientes por zona ── */
.zona-clientes{margin-bottom:10px}
.zona-clientes summary::-webkit-details-marker{display:none}
.zona-clientes summary::before{content:'▶';margin-right:6px;display:inline-block;transition:transform .15s}
.zona-clientes[open] summary::before{transform:rotate(90deg)}
.cliente-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);transition:background .15s}
.cliente-row:hover{background:var(--bg2)}
.cliente-row:last-child{border-bottom:none}
/* ── At-risk + badge ── */
.userPagoRow{position:relative}
.userPagoRow.atRisk{border-left:4px solid #f59e0b}
.userPagoRow .atRiskBadge{position:absolute;top:8px;right:10px;background:#f59e0b;color:#1a1a1a;font-size:10px;font-weight:900;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 2px 6px rgba(245,158,11,.4)}
/* ── Animaciones suaves ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pago-fade{animation:fadeInUp .3s ease}
/* ── Indicador de tendencia ── */
.metricTrend{font-size:11px;font-weight:700;margin-top:4px;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px}
.metricTrend.up{color:#22c55e;background:rgba(34,197,94,.1)}
.metricTrend.down{color:#ef4444;background:rgba(239,68,68,.1)}
.metricTrend.flat{color:var(--text2);background:rgba(120,120,120,.1)}
/* ── Botón volver con flecha animada ── */
.btnVolver{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s ease}
.btnVolver:hover{transform:translateX(-2px);border-color:var(--accent);background:var(--bg3)}
.btnVolver .arrow{display:inline-block;transition:transform .2s ease}
.btnVolver:hover .arrow{transform:translateX(-4px)}
/* ── Paginación ── */
.pagPager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.pagPager button{padding:6px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s ease}
.pagPager button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.pagPager button:disabled{opacity:.4;cursor:not-allowed}
.pagPager .info{font-size:12px;color:var(--text2);font-weight:700}
/* === SIDEBAR COLLAPSE BUTTON (Tarea 14A) === */
.sidebarCollapseBtn{position:fixed;left:230px;top:50%;transform:translateY(-50%);width:18px;height:38px;padding:0;background:linear-gradient(180deg,#f59e0b 0%,#d97706 100%);border:1px solid var(--border2,#1a0f00);border-left:none;border-radius:0 8px 8px 0;cursor:pointer;z-index:55;display:flex;align-items:center;justify-content:center;color:#1a0f00;font-size:10px;font-weight:900;box-shadow:2px 0 8px rgba(245,158,11,0.35),inset 0 1px 0 rgba(255,255,255,0.3);transition:background .15s ease, color .15s ease, width .2s ease, transform .15s ease, box-shadow .15s ease;user-select:none;}
.sidebarCollapseBtn:hover{width:22px;transform:translateY(-50%) translateX(1px);box-shadow:3px 0 12px rgba(245,158,11,0.55),inset 0 1px 0 rgba(255,255,255,0.4);}
.sidebarCollapseBtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,166,35,0.35);}
.sidebarCollapseBtn:active{transform:translateY(-50%) translateX(-1px);}
body.sidebarCollapsed .sidebar{transform:translateX(-100%);transition:transform 0.25s ease;}
body.sidebarCollapsed .main{margin-left:0!important;width:100%!important;}
body.sidebarCollapsed .sidebarCollapseBtn{left:0;border-radius:0 8px 8px 0;border-left:1px solid var(--border2,#1a0f00);}
body.sidebarCollapsed .sidebarCollapseBtn .arrow{transform:rotate(180deg);}
.sidebar{transition:transform 0.25s ease}
.main{transition:margin-left 0.25s ease, width 0.25s ease}
@media(max-width:768px){.sidebarCollapseBtn{display:none!important}}
/* === LIGHT THEME (Tarea 17) === */
:root[data-theme="light"]{--bg:#f8f9fb;--bg2:#ffffff;--bg3:#f1f3f5;--text:#1a1f2c;--text2:#6b7280;--text3:#9ca3af;--accent:#f59e0b;--border:#e5e7eb;--green:#10b981;--red:#ef4444;--blue:#3b82f6;--cyan:#06b6d4;--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.1);}
:root[data-theme="light-soft"]{
/* base — tono crema/papel reciclado en lugar de blanco puro */
--bg: #f4f1ea;
--bg2: #ece8df;
--bg3: #e3dfd5;
--text: #2a2a2a;
--text2: #5a5a5a;
--text3: #8a8a8a;
--border: #d4cfc3;
--border2: #c9c4b8;
/* accent: el mismo naranja pero ligeramente desaturado */
--accent: #c47a1a;
--accent-soft: rgba(196,122,26,0.14);
}
[data-theme="light"] .userPagoRow{background:linear-gradient(180deg,#ffffff 0%,#f8f9fb 100%);box-shadow:0 1px 4px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7);}
[data-theme="light"] .mapBtn,[data-theme="light"] .filterBtn{background:linear-gradient(180deg,#ffffff 0%,#f3f4f6 100%);color:#1a1f2c;}
[data-theme="light"] .filterBtn.active,[data-theme="light"] .mapBtn.active{background:linear-gradient(180deg,#f59e0b 0%,#d97706 100%);color:#fff;}
/* Hover gris sobrio en modo claro (override azul brillante) */
:root[data-theme="light"] .mapBtn:hover,
:root[data-theme="light"] .filterBtn:hover{
background:#e5e5e5;
color:#1a1a1a;
border-color:#c4c4c4;
}
:root[data-theme="light-soft"] .mapBtn:hover,
:root[data-theme="light-soft"] .filterBtn:hover{
background:var(--bg3);
color:var(--text);
border-color:var(--border2);
}
:root[data-theme="light"] .mapBtn.active:hover,
:root[data-theme="light"] .filterBtn.active:hover{
background:linear-gradient(180deg,#f59e0b 0%,#d97706 100%);
color:#fff;
border-color:var(--accent);
}
:root[data-theme="light-soft"] .mapBtn.active:hover,
:root[data-theme="light-soft"] .filterBtn.active:hover{
background:linear-gradient(180deg,var(--accent),#a0571a);
color:#fff;
border-color:var(--accent);
}
/* Controles nativos de Mapbox (+, -, escala) — estilo unificado */
.mapboxgl-ctrl-group{
border-radius:10px!important;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,.2)!important;
border:1px solid var(--border2,var(--border))!important;
}
.mapboxgl-ctrl-group button{
background:var(--bg2)!important;
color:var(--text)!important;
transition:background .15s var(--ease-out);
}
.mapboxgl-ctrl-group button:hover{
background:var(--bg3)!important;
}
:root[data-theme="light"] .mapboxgl-ctrl-group button:hover,
:root[data-theme="light-soft"] .mapboxgl-ctrl-group button:hover{
background:#e5e5e5!important;
}
/* Tooltip nombre del delivery — más legible (modo noche/día) */
.dlv-label{
background:rgba(20,22,28,0.92);
color:#fff;
padding:3px 8px;
border-radius:6px;
font-size:11px;
font-weight:600;
letter-spacing:0.2px;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
white-space:nowrap;
backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.12);
}
:root[data-theme="light"] .dlv-label,
:root[data-theme="light-soft"] .dlv-label{
background:rgba(255,255,255,0.98);
color:#1a1a1a;
border:1px solid rgba(0,0,0,0.1);
box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
/* Botones zoom +/- de Mapbox — visibles en modo noche y día */
.mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-zoom-out{
background-color:rgba(255,255,255,0.95)!important;
color:#1a1a1a!important;
}
.mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-zoom-out:hover{
background-color:rgba(245,166,35,0.95)!important;
color:#fff!important;
}
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-in,
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-out{
background-color:rgba(40,42,48,0.95)!important;
color:#fff!important;
}
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-in:hover,
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-out:hover{
background-color:rgba(245,166,35,0.95)!important;
color:#1a1a1a!important;
}
/* Íconos SVG internos visibles en dark */
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-in span,
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-out span,
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-in::before,
:root[data-theme="dark"] .mapboxgl-ctrl-zoom-out::before{
filter:invert(1);
}
/* D6 — Respetar preferencia de movimiento reducido (a11y) */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* THEME CUSTOMIZER */
.theme-customizer{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.color-row{display:flex;align-items:center;gap:10px}
.color-row label{flex:1;font-size:13px;color:var(--text)}
.color-row input[type=color]{width:50px;height:34px;border-radius:8px;border:1px solid var(--border);cursor:pointer;background:transparent;padding:2px}
.btn-icon{padding:7px 10px;font-size:14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text)}
.btn-icon:hover{background:var(--bg3)}
.btn-icon-refresh{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.btn-icon-refresh:hover{background:var(--accent);color:#000;transform:rotate(180deg)}
.asist-msg{display:flex;animation:asistFadeIn .25s ease}
@keyframes asistFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.asist-user{justify-content:flex-end}
.asist-bot{justify-content:flex-start}
.asist-bubble{max-width:80%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.5}
.asist-user .asist-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.asist-bot .asist-bubble{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px}
/* ── Onboard (coachmarks) ── */
#onboardOverlay{position:fixed;inset:0;z-index:99980;pointer-events:auto;background:rgba(0,0,0,0.45);transition:opacity .25s ease;opacity:0}
#onboardOverlay.show{opacity:1}
#onboardHole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 3px var(--accent), 0 0 30px rgba(245,166,35,.55);pointer-events:none;z-index:99981;transition:all .2s ease}
#onboardHand{position:fixed;font-size:34px;line-height:1;z-index:99983;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));animation:onboardBounce 1.2s ease-in-out infinite;user-select:none}
@media(max-width:639px){#onboardHand{font-size:22px;}}
@keyframes onboardBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#onboardTip{position:fixed;background:var(--bg2);border:1px solid var(--accent);border-radius:12px;padding:12px 14px;max-width:240px;color:var(--text);font-size:13px;line-height:1.45;box-shadow:0 8px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(245,166,35,.18);z-index:99984;pointer-events:auto;animation:onboardTipIn .22s ease}
#onboardTip .onboardTipTitle{font-weight:700;color:var(--accent);font-size:12px;letter-spacing:.3px;text-transform:uppercase;margin-bottom:4px}
#onboardTip .onboardTipSkip{display:block;margin-top:8px;font-size:11px;color:var(--text3);text-align:right;cursor:pointer}
#onboardTip .onboardTipSkip:hover{color:var(--accent)}
#onboardTip .onboard-tip-action{font-size:11px;color:var(--text3);margin-top:8px;padding-top:8px;border-top:1px solid var(--border2);font-weight:500;letter-spacing:.2px;display:flex;align-items:center;justify-content:space-between;gap:8px}
#onboardTip .onboard-tip-action .onboard-tip-action-text{flex:1}
#onboardTip .onboard-tip-skip{background:transparent;border:1px solid var(--border2);color:var(--text3);font-size:11px;padding:3px 10px;border-radius:6px;cursor:pointer;font-weight:600;letter-spacing:.3px;transition:all .15s ease}
#onboardTip .onboard-tip-skip:hover{background:var(--accent);border-color:var(--accent);color:#fff}
#onboardTip::before{content:"";position:absolute;width:12px;height:12px;background:var(--bg2);border-left:1px solid var(--accent);border-top:1px solid var(--accent);transform:rotate(45deg)}
#onboardTip[data-arrow="top"]::before{top:-7px;left:24px}
#onboardTip[data-arrow="bottom"]::before{bottom:-7px;left:24px;transform:rotate(225deg)}
#onboardTip[data-arrow="left"]::before{left:-7px;top:20px;transform:rotate(-45deg)}
#onboardTip[data-arrow="right"]::before{right:-7px;top:20px;transform:rotate(135deg)}
@keyframes onboardTipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:600px){#onboardTip{max-width:84vw}}
.pedido-grupo{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:border-color .2s var(--ease-out)}
.pedido-grupo[open]{border-color:var(--accent)}
.pedido-grupo-header{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;user-select:none;font-weight:600;color:var(--text);list-style:none;background:linear-gradient(180deg, var(--bg2), var(--bg3));transition:background .15s var(--ease-out)}
.pedido-grupo-header::-webkit-details-marker{display:none}
.pedido-grupo-header:hover{background:linear-gradient(180deg, var(--bg3), var(--bg2))}
.pedido-grupo-fecha{flex:1;font-size:14px;letter-spacing:.2px}
.pedido-grupo-count{font-size:12px;color:var(--text2);font-weight:500}
.pedido-grupo-arrow{font-size:11px;color:var(--text3);transition:transform .2s var(--ease-out)}
.pedido-grupo[open] .pedido-grupo-arrow{transform:rotate(180deg)}
.pedido-grupo-list{padding:0 14px 14px 14px;display:flex;flex-direction:column;gap:8px}
/* ============================================================
MOBILE RESPONSIVE FIXES — auditoria 2026-05-16
Sin romper desktop. Todo dentro de @media max-width.
============================================================ */
@media(max-width:768px){
/* (1) Topbar: separar menuBtn de tbactions con margin-right + gap mas amplio */
.topbar #menuBtn{margin-right:8px;}
.topbar .tbactions{gap:8px;}
.topbar .tbactions .topbar-icon-btn{width:38px;height:38px;}
/* #mapaContadores vive dentro del panel ⋯ — sin estilos de barra separada */
/* (3) Filtros mapa: forzar wrap (sin scroll horizontal) */
.mapBar{flex-wrap:wrap!important;overflow-x:visible!important;gap:6px;padding:8px 10px;}
.mapBar .mapBtn,.mapBar .filterBtn{flex:0 0 auto;}
/* (4) Combobox mapa al lado: ancho full si esta debajo de mapBar */
.mapBar #mapaZonaCombo,.mapBar #mapaVendCombo{flex:1 1 100%;max-width:100%;width:100%;}
/* (5) Cards estadisticas: ya en 2col por defecto en mobile (linea 802) - refuerzo con auto-fit */
.sgrid{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))!important;}
/* (6) Boleta mas compacta y items con scroll */
.boleta{padding:16px 14px!important;}
.boleta table,.boleta .bt{overflow-x:auto;display:block;}
/* (7) Modal mbox: 96vw exacto */
.mbox{width:96vw!important;max-width:96vw!important;}
.mhead{padding:12px 14px;}
.mhead h3,.mhead .mtitle{font-size:15px;}
/* (9) Pedido grupo accordion: padding y font mas compactos */
.pedido-grupo-header{padding:10px 12px;}
.pedido-grupo-fecha{font-size:13px;}
.pedido-grupo-count{font-size:11px;}
.pedido-grupo-list{padding:0 10px 10px;}
/* (10) Tablas: si una .tbl no esta dentro de .tbl-wrap/.tc, forzar scroll */
.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
/* (11) Touch targets: agrandar .mapa-estilo-btn a 42x42 */
.mapa-estilo-btn{width:42px;height:42px;}
.mapa-estilo-btn svg{width:20px;height:20px;}
/* Touch target minimo en botones chicos */
.mapBtn,.filterBtn{min-height:36px;}
/* Ocultar botones zoom +/- del mapa en móvil — ocupan espacio y no se usan */
.mapboxgl-ctrl-zoom-in,.mapboxgl-ctrl-zoom-out{display:none!important;}
/* (12) Inputs sin zoom iOS - refuerzo */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="tel"],input[type="search"],input[type="date"],input[type="time"],
textarea,select{font-size:16px!important;}
}
@media(max-width:480px){
/* (3) Reducir font filtros a 11px */
.mapBtn,.filterBtn{font-size:11px!important;padding:5px 8px!important;}
/* (5) Cards estadisticas 1 columna en <480 */
.sgrid{grid-template-columns:1fr!important;gap:8px;}
.sval{font-size:20px;}
/* (6) Boleta padding aun mas reducido */
.boleta{padding:14px 10px!important;font-size:11px;}
/* (7) Modal mbox cabecera */
.mhead h3,.mhead .mtitle{font-size:14px;}
/* (9) Pedido grupo: aun mas compacto */
.pedido-grupo-header{padding:10px;font-size:12px;}
}
/* ============================================================
MOBILE COMPLETO — proteccion general (auditoria 2026-05-16)
============================================================ */
@media (max-width: 768px){
/* Textos largos no rebalsan */
.ni, .btn, .mapBtn, .filterBtn, .userPagoRow, .prod-card *, .tbl td, .tbl th,
.mcard, .zcard, .sc, .ranking-row, .empty-state, .pedido-grupo-header,
.stat-premium-card, .factura-iva-tabla td, .factura-iva-tabla th{
overflow-wrap: anywhere;
word-break: break-word;
}
/* Truncar emails/URLs largas con ellipsis */
.email-cell, .url-cell, [data-truncate]{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Containers globales: padding consistente */
#ca{ padding: 12px 14px !important; }
.mbox{ padding: 14px !important; }
/* Headers mas compactos */
h1, .page-title{ font-size: 18px !important; }
h2{ font-size: 15px !important; }
h3{ font-size: 14px !important; }
/* Botones touch friendly */
.btn, .mapBtn, .filterBtn{
min-height: 44px;
padding: 8px 14px;
}
.btn-sm,.btnPagado{ min-height: 44px; padding: 10px 14px; }
/* Inputs anti-zoom iOS */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="date"], input[type="time"], textarea, select{
font-size: 16px !important;
min-height: 44px;
}
/* Tablas: scroll horizontal */
.tbl{
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
/* Modales: ocupar pantalla */
.moverlay .mbox{
width: 96vw;
max-width: 96vw;
max-height: 90vh;
overflow-y: auto;
}
/* Sidebar mobile: full width al abrir */
.sidebar.open, .sidebar.show{
width: 80vw !important;
max-width: 320px;
}
/* Toast no estorba */
#notifArea{ bottom: 80px !important; left: 12px !important; right: 12px !important; max-width: none !important; }
/* GPS pill compact en mobile */
#gpsStatusPill .gps-pill-text{ display: none; }
/* GLOB-3: tutorial más pequeño en mobile */
#onboardTip{max-width:min(210px,88vw)!important;font-size:12px!important;padding:8px 10px!important;}
#onboardTip .onboardTipTitle{font-size:11px!important;}
/* DEL-7: combos mapa (zona y vend) idénticos en mobile — mismo ancho, mismo font-size, mismo padding */
#mapaZonaCombo,#mapaVendCombo{max-width:100%!important;width:100%!important;}
#mapaZonaCombo .search-combo-input,#mapaVendCombo .search-combo-input{font-size:12px!important;padding:6px 26px 6px 12px!important;}
/* Stat cards 2 columnas en tablet, 1 en mobile chico */
.sgrid{
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
/* Botones de accion en accordion no se cortan */
.pedido-grupo-list .order-actions{
flex-wrap: wrap;
gap: 4px;
}
}
@media (max-width: 480px){
/* Stat cards 1 columna */
.sgrid{ grid-template-columns: 1fr !important; }
/* Title aun mas chico */
h1, .page-title{ font-size: 16px !important; }
/* Filtros mapa: una fila por boton si hace falta */
.mapBar{ gap: 4px; flex-wrap: wrap; }
.mapBar .mapBtn{ font-size: 11px; padding: 6px 9px; min-height: 32px; }
/* Combobox compactos */
.search-combo{ max-width: 100% !important; }
/* Topbar compacto — tamaño base para botones fuera de #tbGlobalBtns */
.topbar-icon-btn{ width: 32px; height: 32px; }
/* Cards margen minimo */
.sc, .mcard, .zcard, .ranking-row{
padding: 12px !important;
}
/* Boleta padding minimo */
.boleta, .factura-iva, .factura-iva-wrap{
padding: 12px !important;
}
}
/* === DELIVERY OUTDOOR UI (alta legibilidad bajo sol fuerte) === */
/* Nota: variables de color eliminadas — ahora heredan del tema global (dark/light) */
body[data-rol="delivery"]{}
body[data-rol="delivery"] .btn,
body[data-rol="delivery"] button.btn{
min-height:48px;font-size:15px;font-weight:700;letter-spacing:.3px;
}
body[data-rol="delivery"] .btn-success{
background:#16a34a;border:3px solid #15803d;color:#fff;
font-size:16px;font-weight:800;min-height:56px;letter-spacing:.5px;
}
body[data-rol="delivery"] .btn-danger{
background:#dc2626;border:3px solid #991b1b;color:#fff;
font-size:16px;font-weight:800;min-height:56px;
}
body[data-rol="delivery"] input,
body[data-rol="delivery"] textarea,
body[data-rol="delivery"] select{
font-size:16px;min-height:44px;border-width:2px;
}
body[data-rol="delivery"] .card,
body[data-rol="delivery"] .pedido-card{
border-width:2px;font-size:15px;
}
body[data-rol="delivery"] .badge,
body[data-rol="delivery"] .estado-chip{
font-weight:800;font-size:13px;letter-spacing:.4px;
}
body[data-rol="delivery"] .leaflet-marker-icon.dlv-pin,
body[data-rol="delivery"] .pin-dlv{
filter:drop-shadow(0 0 6px rgba(217,119,6,.9));
}
body[data-rol="delivery"] .pin-dlv::after,
body[data-rol="delivery"] .leaflet-marker-icon.dlv-pin::after{
content:"";position:absolute;inset:-8px;border-radius:50%;
border:3px solid #d97706;animation:dlvPulse 1.6s ease-out infinite;
}
@keyframes dlvPulse{
0%{transform:scale(.8);opacity:.9}
100%{transform:scale(1.8);opacity:0}
}
/* Halo de geolocalización tipo Google Maps "estás aquí" — indica "vivo/moviéndose" */
@keyframes dlvGeoPulse{
0%{transform:scale(1);opacity:.6}
100%{transform:scale(2.5);opacity:0}
}
.pin-dlv{position:relative;}
.pin-dlv::before{
content:'';position:absolute;inset:0;border-radius:50%;
background:rgba(59,130,246,.4);
animation:dlvGeoPulse 2s ease-out infinite;
z-index:-1;pointer-events:none;
}
/* Estado seleccionado — al clickear o elegir desde combobox */
.pin-dlv.selected{
transform:scale(1.15);
box-shadow:0 6px 20px rgba(245,166,35,.6),0 0 0 4px rgba(245,166,35,.4) !important;
z-index:100 !important;
transition:transform .2s ease;
}
.pin-dlv.selected::before{
background:rgba(245,166,35,.5);
animation:dlvGeoPulse 1.2s ease-out infinite;
}
/* Modo alta visibilidad — togglable */
body.alta-visibilidad{filter:contrast(1.15) saturate(1.1);}
body.alta-visibilidad *{font-weight:600 !important;}
body.alta-visibilidad .btn{
border-width:3px;font-size:17px;min-height:56px;
}
body.alta-visibilidad .btn-success,
body.alta-visibilidad .btn-danger{
font-size:18px;min-height:60px;
}
body.alta-visibilidad input,
body.alta-visibilidad textarea,
body.alta-visibilidad select{
font-size:17px !important;min-height:48px;border-width:3px !important;
}
.toggle-altavis-row{
display:flex;align-items:center;gap:10px;padding:12px;border:2px solid var(--border);
border-radius:10px;margin:10px 0;background:var(--bg2);
}
.toggle-altavis-row input[type="checkbox"]{width:22px;height:22px;cursor:pointer;}
.toggle-altavis-row label{font-size:15px;font-weight:600;cursor:pointer;flex:1;}
.sa-mini-card{background:var(--card);border-radius:10px;border:1px solid var(--border);border-top:3px solid var(--card-c,var(--accent));padding:12px 10px;text-align:center;min-width:0}
.sa-mini-card .sa-mini-icon{font-size:20px;line-height:1;opacity:.78;margin-bottom:5px}
.sa-mini-card .sa-mini-value{font-size:22px;font-weight:900;line-height:1;color:var(--card-c,var(--accent));overflow-wrap:anywhere}
.sa-mini-card .sa-mini-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-top:5px}
/* UX nuevas (Mejoras 1-5) */
.btn-loading{pointer-events:none;position:relative;color:transparent !important;}
.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:btnSpin .7s linear infinite;}
@keyframes btnSpin{to{transform:rotate(360deg);}}
.btn-confirm-pending{background:linear-gradient(180deg,#f59e0b,#d97706) !important;color:#fff !important;animation:pulseConfirm .6s ease-in-out infinite;}
@keyframes pulseConfirm{50%{filter:brightness(1.15);}}
.btn-success-flash{position:relative;}
.btn-success-flash::after{content:'\2713 Listo';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;background:linear-gradient(180deg,#22c55e,#16a34a);border-radius:inherit;animation:successFlash .8s ease forwards;}
@keyframes successFlash{0%{opacity:0;transform:scale(.7);}25%{opacity:1;transform:scale(1.05);}80%{opacity:1;transform:scale(1);}100%{opacity:0;}}
#_globalSearchOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;backdrop-filter:blur(4px);}
#_globalSearchOverlay ._gs-box{background:var(--card,#fff);color:var(--text,#111);width:min(640px,92vw);max-height:75vh;display:flex;flex-direction:column;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;border:1px solid var(--border,#e5e7eb);}
#_globalSearchOverlay ._gs-input{padding:16px 18px;font-size:17px;border:0;outline:0;border-bottom:1px solid var(--border,#e5e7eb);background:transparent;color:inherit;}
#_globalSearchOverlay ._gs-results{overflow-y:auto;padding:6px 0;}
#_globalSearchOverlay ._gs-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text2,#888);padding:8px 18px 4px;}
#_globalSearchOverlay ._gs-item{padding:9px 18px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:14px;}
#_globalSearchOverlay ._gs-item:hover,#_globalSearchOverlay ._gs-item.sel{background:var(--bg2,#f3f4f6);}
#_globalSearchOverlay ._gs-item small{color:var(--text2,#888);font-size:12px;}
#_globalSearchOverlay ._gs-empty{padding:18px;color:var(--text2,#888);font-size:13px;text-align:center;}
#_globalSearchOverlay ._gs-hint{padding:8px 14px;border-top:1px solid var(--border,#e5e7eb);font-size:11px;color:var(--text2,#888);display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}