:root{--azul:#145b92;--azul-fuerte:#0d4776;--verde:#16863a;--verde-oscuro:#075f24;--verde-claro:#59d56f;--rojo:#c0392b;--naranja:#d68910;--fondo:#f2f6f4;--blanco:#fff;--texto:#101820;--borde:#9ab5a3;--am-metal-verde:linear-gradient(180deg,#63df78 0%,#25ad49 38%,#08752a 62%,#15923a 100%);--am-sombra:0 5px 0 #07551f,0 8px 16px rgba(5,76,29,.22);--am-radio:12px}
*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100vw}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--fondo);color:var(--texto);font-size:16px;line-height:1.45}
header{background:var(--am-metal-verde);color:white;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:15px;position:sticky;top:0;z-index:5;box-shadow:0 2px 8px #0002}
header h1{margin:0;font-size:25px}header .sub{opacity:.9;font-size:13px}.nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(760px,100%);margin:0 auto;align-items:stretch}.nav a{width:100%;box-sizing:border-box}.nav a,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #58c56f;border-bottom:3px solid #07551f;border-radius:var(--am-radio);padding:10px 16px;text-decoration:none;cursor:pointer;font-weight:800;font-size:15px;text-align:center}.nav a{background:var(--am-metal-verde);color:white;box-shadow:var(--am-sombra)}.btn{background:var(--am-metal-verde);color:white;box-shadow:var(--am-sombra)}.btn.green{background:var(--am-metal-verde)}.btn.red{background:#c0392b}.btn.orange{background:#d68910}.btn.purple{background:#7d3c98}.btn.gray{background:var(--am-metal-verde)}.btn.light{background:#fff;color:var(--azul);border:2px solid #8eb7d3;box-shadow:0 3px 0 #6c96b2}
main{max-width:1400px;margin:0 auto;padding:24px}.hero{background:#f8fbff;border-radius:12px;padding:28px;text-align:center;box-shadow:0 2px 10px #0001}.hero h2{font-size:34px;color:var(--azul);margin:0 0 8px}.hero p{color:#5b6770}.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.role{background:white;border-radius:12px;padding:28px;text-align:center;box-shadow:0 2px 10px #0001}.role h3{font-size:22px;margin:8px}.role p{min-height:55px;color:#667085}.role .btn{width:100%;padding:14px}
.grid{display:grid;grid-template-columns:1fr 390px;gap:18px}.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.catalogo>.card:nth-child(n+13){content-visibility:auto;contain-intrinsic-size:auto 330px}.card{background:white;border:1px solid #d5dde5;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #0001;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0002}.foto{height:130px;background:#f5f7fa;display:flex;align-items:center;justify-content:center;overflow:hidden}.foto img{width:100%;height:100%;object-fit:contain}.sinfoto{color:#78909c;font-weight:bold;font-size:12px}.card .body{padding:10px;text-align:center;flex:1}.card h3{color:#245f88;margin:3px 0 6px;font-size:14px;line-height:1.25}.precio{font-size:18px;color:#078b38;font-weight:bold}.estado{font-weight:bold;margin:6px 0;font-size:12px}.estado.ok{color:#229954}.estado.off{color:#c0392b}.puntos{color:#667085;font-size:11px}.panel{background:#fff;border:1px solid #d7e4db;border-radius:14px;padding:18px;box-shadow:0 5px 16px rgba(18,70,38,.10)}.panel h2{margin-top:0;color:var(--azul)}.cart{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto}.cart-item{border-bottom:1px solid #e5e7eb;padding:9px 0}.total{font-size:24px;color:#c0392b;font-weight:bold;text-align:center;margin:18px 0}.empty{text-align:center;color:#777;padding:25px}
.lista-pedidos{display:flex;flex-direction:column;gap:14px}
.pedido-card{background:white;border-radius:12px;box-shadow:0 2px 8px #0001;padding:16px 18px;border-left:8px solid #90a4ae}
.pedido-card.espera{border-left-color:#f39c12}.pedido-card.camino{border-left-color:#2980b9}.pedido-card.pendiente{border-left-color:#c0392b}
.pedido-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.pedido-card-num{font-size:20px;font-weight:bold;color:#245f88}
.pedido-card-total{font-size:23px;font-weight:bold;color:#078b38}
.pedido-card-info{margin:10px 0;color:#333;font-size:16px;line-height:1.5}
.pedido-card-info .zona-mia{color:#229954;font-weight:bold}
.pedido-card-acciones{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.btn-grande{display:block;width:100%;padding:22px;font-size:20px;font-weight:bold;border:none;border-radius:12px;cursor:pointer;text-align:center;text-decoration:none;box-sizing:border-box;min-height:64px}
.btn-grande.tomar{background:#229954;color:white}.btn-grande.camino{background:#e67e22;color:white}.btn-grande.entregar{background:#245f88;color:white}.btn-grande.completar{background:#c0392b;color:white}
.codigo-grande{display:flex;gap:8px;justify-content:center;margin:6px 0}
.codigo-grande input{width:60px;height:64px;font-size:32px;text-align:center;border-radius:10px;border:3px solid #245f88;font-weight:bold}
.codigo-grande input:focus{border-color:#229954;outline:none}
.btn-entregar-grande{display:block;width:100%;padding:20px;font-size:20px;font-weight:bold;border:none;border-radius:12px;cursor:pointer;background:#245f88;color:white;min-height:64px;margin-top:10px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-grid .full{grid-column:1/-1}label{font-weight:bold;font-size:15px;line-height:1.35;color:#344054}input,select,textarea{width:100%;padding:12px 13px;min-height:46px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:16px;box-sizing:border-box}textarea{min-height:100px;resize:vertical}
/* Formularios administrativos de carga/configuración: lectura y captura cómodas sin alterar catálogo ni navegación. */
.rol-admin .form-grid{gap:18px}.rol-admin .form-grid label{font-size:16px}.rol-admin .form-grid input,.rol-admin .form-grid select,.rol-admin .form-grid textarea{font-size:17px;min-height:50px;padding:13px 14px}.rol-admin .form-grid .small{font-size:14px;line-height:1.45}.rol-admin form>label{font-size:16px}.rol-admin form>input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.rol-admin form>select,.rol-admin form>textarea{font-size:17px;min-height:50px;padding:13px 14px}.rol-admin form>.small{font-size:14px;line-height:1.45}
.table-wrap{overflow:auto;background:white;border-radius:10px;box-shadow:0 2px 8px #0001}.table{width:100%;border-collapse:collapse;min-width:800px}.table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}.table th{background:#edf3f8;color:#245f88}.table tr:hover{background:#f8fafc}.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:12px;font-weight:bold;background:#eef2f6}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start}.actions .btn{min-width:128px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.stat{background:white;border-radius:10px;padding:18px;box-shadow:0 2px 8px #0001}.stat b{display:block;font-size:26px;color:#245f88}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.notice{padding:14px;border-radius:8px;background:#fff8df;border:1px solid #f1d27a}.success{padding:14px;border-radius:8px;background:#eaf8ef;border:1px solid #9ad8ad}.danger{padding:14px;border-radius:8px;background:#fff0ef;border:1px solid #efaaa5}.login{max-width:430px;margin:60px auto}.small{font-size:12px;color:#667085}.code{font-size:30px;font-weight:bold;letter-spacing:5px;text-align:center;background:#f4f7fb;border-radius:8px;padding:10px;color:#245f88}.footer{text-align:center;color:#667085;padding:30px}
/* ---- Portada del cliente: clara, acogedora y comercial sin alterar su lógica ---- */
.rol-cliente{background:linear-gradient(180deg,#f4f8fb 0,#eef4f8 42%,#f7fafc 100%)}
.header-cliente{background:linear-gradient(135deg,#12345a 0%,#155d91 58%,#1d7cb0 100%);padding:20px 24px 18px;box-shadow:0 8px 24px rgba(14,48,78,.18)}
.header-cliente .cabecera-identidad h1{font-family:'Poppins',Arial,sans-serif;display:flex;align-items:center;gap:14px;font-size:clamp(23px,4vw,32px);line-height:1.12;letter-spacing:-.5px}
.header-cliente .cabecera-identidad h1 img{box-shadow:0 5px 18px rgba(0,0,0,.16)}
.header-cliente .sub{font-size:14px;letter-spacing:.1px;margin-top:5px;color:#e8f3fb;opacity:1}
.nav-cliente{align-items:center}.nav-cliente a{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.12);border-radius:12px;padding:11px 14px;backdrop-filter:blur(3px);transition:background .15s,transform .15s}.nav-cliente a:hover{background:rgba(255,255,255,.20);transform:translateY(-1px)}.nav-cliente .nav-comprar{background:#fff;color:#123f68;border-color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.12)}.nav-cliente .nav-secundario{background:rgba(7,37,64,.22);font-weight:700}
.rol-cliente main{padding-top:28px}.saludo-cliente-bienvenida{font-family:'Poppins',Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:1.8px;color:#bfe2ff;margin-bottom:2px}.ubicacion-cliente-chip{display:inline-flex;align-items:center;max-width:100%;margin:0 0 16px;padding:9px 12px;border-radius:999px;background:#fff;color:#506272;border:1px solid #dce7ef;box-shadow:0 2px 8px rgba(20,61,92,.05);font-size:12px;font-weight:700}
@media(max-width:900px){.header-cliente{gap:17px}.nav-cliente{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.nav-cliente a{text-align:center;padding:12px 8px}.nav-cliente .nav-comprar{grid-column:1/-1;font-size:16px}.rol-cliente main{padding:20px 16px}.header-cliente .cabecera-identidad h1{align-items:center}}
@media(max-width:520px){.header-cliente{padding:18px 16px}.header-cliente .cabecera-identidad h1{font-size:25px}.header-cliente .sub{font-size:13px}.nav-cliente a{font-size:13px}.saludo-cliente-marca{padding:20px 18px}.saludo-cliente-texto{font-size:24px}.saludo-cliente-sub{font-size:14px;line-height:1.45}}
/* ---- Marca "ahorromas": saludo del cliente y presentación de tiendas ---- */
.saludo-cliente-marca{background:linear-gradient(120deg,#0b3f73,#1877D1);border-radius:14px;padding:18px 20px;margin-bottom:14px;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 14px #0b3f7333}
.saludo-cliente-texto{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:22px;color:#fff;letter-spacing:.2px}
.saludo-cliente-sub{color:#dceafb;font-size:14px}
.panel-tiendas-marca{border-top:3px solid #1877D1}
.encabezado-tiendas-marca{display:flex;align-items:center;gap:12px}
.marca-a-mini{width:48px;height:48px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 4px 12px #0b3f7326;border:1px solid #dce8f3;overflow:hidden}.marca-a-mini img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}.marca-a-mini-fallback{font-size:25px}
.titulo-tiendas-marca{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:20px;color:#0b3f73;margin:0;letter-spacing:.2px}
@keyframes apareceTiendaCliente{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.tarjeta-tienda-anim{animation:apareceTiendaCliente .45s ease backwards;transition:transform .15s,box-shadow .15s}
/* ---- Botones grandes y redondos para hablar o mandar foto, pensados para quien no lee con comodidad ---- */
.acciones-pedido-cliente{display:grid;grid-template-columns:repeat(3,minmax(96px,1fr));gap:14px;align-items:start;justify-content:center;max-width:440px;margin:16px auto}.accion-pedido-cliente{text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0}.boton-accion-redonda{width:82px;height:82px;border-radius:22px;border:2px solid #ffffffaa;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #0002;transition:transform .15s,box-shadow .15s}.boton-accion-redonda:hover{transform:translateY(-2px);box-shadow:0 9px 20px #0003}.boton-accion-redonda:active{transform:scale(.95)}
.boton-accion-redonda:disabled{opacity:.75;cursor:default}
.boton-voz{background:linear-gradient(135deg,#f39c12,#e67e22)}
.boton-foto{background:linear-gradient(135deg,#5dade2,#2e86c1)}
.logo-tienda-cliente{width:64px;height:64px;margin:0 auto 8px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(15,61,43,.14);border:1px solid #dce9e2;overflow:hidden}.logo-tienda-cliente img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box}.logo-tienda-cliente-fallback{font-size:30px}.tarjeta-tienda-clic{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;background:#fff}.tarjeta-tienda-clic:hover,.tarjeta-tienda-clic:focus{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,59,42,.16)!important}.tienda-cliente-nombre{font-weight:900;font-size:16px;line-height:1.2;color:#173b2d;overflow-wrap:anywhere;margin:2px 0 8px}.tienda-cliente-meta{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:12px;font-weight:800;margin-bottom:10px}.tienda-cliente-estado{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px}.tienda-cliente-estado.abierta{background:#dff3e7;color:#12663b}.tienda-cliente-estado.cerrada{background:#f7e4e2;color:#9f2f2f}.tienda-cliente-distancia{color:#53675e;font-weight:800}.tienda-cliente-cta{width:100%;border:0;border-radius:10px;padding:9px 8px;font-size:13px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,#176a43,#0e5735);box-shadow:0 4px 10px rgba(14,87,53,.18)}.tienda-cliente-cta.cerrada{background:#68746f;box-shadow:none}.modal-camara-cliente{position:fixed;inset:0;background:#000c;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}.camara-cliente-caja{width:min(620px,96vw);background:#fff;border-radius:20px;padding:16px;text-align:center;box-shadow:0 20px 60px #0008}.camara-cliente-caja video{width:100%;max-height:65vh;background:#111;border-radius:14px;object-fit:contain}.camara-cliente-acciones{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.boton-accion-icono{font-size:36px;line-height:1}
.boton-accion-etiqueta{font-size:13px;font-weight:700;color:#344054;margin:8px 0 0;max-width:112px;min-height:32px;line-height:1.25;text-align:center}
@keyframes latidoGrabando{0%,100%{box-shadow:0 0 0 0 #e74c3c66}50%{box-shadow:0 0 0 14px #e74c3c00}}
.boton-voz.grabando{background:linear-gradient(135deg,#e74c3c,#c0392b);animation:latidoGrabando 1.1s ease-in-out infinite}
.tarjeta-tienda-anim:hover,.tarjeta-tienda-anim:active{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 18px #0002}
@media(max-width:520px){.acciones-pedido-cliente{gap:8px}.boton-accion-redonda{width:72px;height:72px;border-radius:19px}.boton-accion-icono{font-size:31px}.boton-accion-etiqueta{font-size:12px}}
.precio-producto-principal{font-size:30px;color:#078b38;font-weight:900;margin:8px 0 4px;line-height:1.05}.precio-oferta-wrap{margin:7px 0}.precio-anterior-producto{font-size:15px;color:#7b8794;text-decoration:line-through;font-weight:700}.ahorro-producto{display:inline-block;margin-top:4px;padding:4px 8px;border-radius:999px;background:#fff0e8;color:#b33a16;font-size:12px;font-weight:900}.subtotal-producto{margin-top:8px;padding:9px 10px;border-radius:10px;background:#f2f7fb;border:1px solid #d9e6ef;color:#245f88;font-weight:800;font-size:14px}.subtotal-producto b{font-size:18px}.en-carrito-producto{margin-top:8px;padding:8px 10px;border:2px solid #20a464;border-radius:10px;background:#edf9f2;color:#146c43;font-weight:900;font-size:13px}
.qty{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}.qty button{width:42px;height:38px;border:0;border-radius:7px;font-size:22px;font-weight:bold;cursor:pointer}.qty .minus{background:#e8eef4;color:#245f88}.qty .plus{background:#229954;color:white}.qty .num{min-width:34px;text-align:center;font-size:18px;font-weight:bold}.qty button:disabled{opacity:.45;cursor:not-allowed}
.saludo-cliente-marca{background:linear-gradient(135deg,#0d426f 0%,#1267a4 58%,#2389c6 100%);border-radius:22px;padding:22px 24px;margin-bottom:12px;box-shadow:0 10px 26px rgba(13,66,111,.18);border:1px solid rgba(255,255,255,.28)}
.saludo-cliente-texto{font-size:25px}.saludo-cliente-sub{font-size:15px;line-height:1.45;color:#e8f4fd}
.panel-tiendas-marca{border-top:0;border:1px solid #dce7ef;border-radius:20px;box-shadow:0 10px 28px rgba(23,54,93,.08);padding:20px}
.encabezado-tiendas-marca{align-items:center}.titulo-tiendas-marca{font-size:22px;letter-spacing:-.2px}.marca-a-mini{width:54px;height:54px;border-radius:16px}
/* ---- Afinación portada cliente: acciones y bloque de tiendas acogedor ---- */
.nav-cliente .nav-salir{order:-10;margin-left:auto;background:transparent!important;border-color:transparent!important;color:rgba(255,255,255,.68);font-size:12px;padding:7px 9px;box-shadow:none}.nav-cliente .nav-salir:hover{color:#fff;background:rgba(255,255,255,.08)!important}
.nav-cliente .nav-comprar{order:20;flex-basis:100%;text-align:center;background:linear-gradient(135deg,#27a7df,#1678bd)!important;color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:15px!important;padding:13px 18px!important;font-size:16px;box-shadow:0 8px 20px rgba(5,49,83,.24)!important}
.nav-cliente .nav-comprar:hover{background:linear-gradient(135deg,#35b4eb,#1b83c9)!important;transform:translateY(-1px)}
.panel-tiendas-marca{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fcff 0%,#eef7fd 58%,#f7fbf8 100%);border:1px solid #cfe1ed!important;border-radius:22px!important;padding:0!important;box-shadow:0 12px 30px rgba(20,68,102,.10)!important}
.encabezado-tiendas-marca{position:relative;padding:20px 22px 18px;gap:15px;background:linear-gradient(120deg,rgba(255,255,255,.92),rgba(229,244,253,.92));border-bottom:1px solid #d8e8f2}.encabezado-tiendas-marca:after{content:'›';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:34px;font-weight:800;color:#2585bd;opacity:.72}.texto-tiendas-marca{padding-right:30px}.tiendas-marca-kicker{font-family:'Poppins',Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#2585bd;margin-bottom:2px}.titulo-tiendas-marca{font-size:24px!important;color:#123f68!important;line-height:1.15}.mensaje-tiendas-marca{margin:5px 0 0;color:#536a7a;font-size:13px;line-height:1.45;font-weight:600}.marca-a-mini{width:62px!important;height:62px!important;border-radius:18px!important;box-shadow:0 7px 18px rgba(17,70,105,.14)!important}
.buscador-tiendas-cliente{display:block;width:calc(100% - 36px);margin:16px 18px 12px;padding:12px 14px!important;border:1px solid #c9dce8!important;border-radius:13px!important;background:rgba(255,255,255,.92);font-size:14px!important;box-shadow:inset 0 1px 2px rgba(18,63,104,.03)}.buscador-tiendas-cliente:focus{outline:none;border-color:#2b91c8!important;box-shadow:0 0 0 3px rgba(43,145,200,.12)}
.carrusel-tiendas-wrap{position:relative;padding:0 10px 18px}.carrusel-tiendas-cliente{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:4px 38px 8px;scrollbar-width:thin}.flecha-tiendas{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid #b8d4e4;background:linear-gradient(135deg,#fff,#e9f5fb);color:#12689c;font-size:28px;font-weight:900;line-height:34px;cursor:pointer;box-shadow:0 6px 16px rgba(19,77,111,.18);transition:transform .15s,box-shadow .15s}.flecha-tiendas:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 8px 20px rgba(19,77,111,.24)}.flecha-tiendas-izq{left:8px}.flecha-tiendas-der{right:8px}
.tarjeta-tienda-clic{position:relative;transform:translateY(-4px);box-shadow:0 12px 22px rgba(20,64,45,.18),0 3px 0 rgba(255,255,255,.95) inset,0 -2px 0 rgba(18,88,57,.08) inset!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;will-change:transform}.tienda-seleccionada-badge{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;padding:10px 16px;border-radius:12px;background:linear-gradient(180deg,#17865a,#0b5e3c);border:2px solid rgba(255,255,255,.96);color:#fff;font-size:15px;font-weight:950;letter-spacing:.2px;white-space:nowrap;box-shadow:inset 0 2px 3px rgba(255,255,255,.18),0 4px 8px rgba(7,65,40,.28)}.tarjeta-tienda-clic.seleccionada{border:2px solid #0a6741!important;background:linear-gradient(180deg,#d8eee2 0%,#c9e5d5 100%)!important;box-shadow:inset 0 9px 16px rgba(6,71,43,.28),inset 0 -2px 3px rgba(255,255,255,.62),0 1px 2px rgba(7,63,40,.12)!important;transform:translateY(7px) scale(.965)!important}.tarjeta-tienda-clic.seleccionada:after{content:'✓';position:absolute;right:9px;bottom:9px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#0c6b44;color:#fff;font-size:17px;font-weight:950;box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}.tarjeta-tienda-clic.seleccionada .logo-tienda-cliente{margin-top:29px;box-shadow:inset 0 3px 7px rgba(16,83,53,.14),0 1px 3px rgba(16,83,53,.08);transform:scale(.97)}.tarjeta-tienda-clic.seleccionada .tienda-seleccionada-badge{display:block}.tarjeta-tienda-clic.seleccionada .tienda-cliente-nombre{color:#0a5134;font-weight:950}.tarjeta-tienda-clic.seleccionada .tienda-cliente-cta{background:linear-gradient(180deg,#116f48,#095a39);box-shadow:inset 0 3px 6px rgba(0,0,0,.25)!important;transform:translateY(1px)}.tarjeta-tienda-clic.seleccionada:hover,.tarjeta-tienda-clic.seleccionada:focus{transform:translateY(7px) scale(.965)!important;box-shadow:inset 0 9px 16px rgba(6,71,43,.28),inset 0 -2px 3px rgba(255,255,255,.62),0 1px 2px rgba(7,63,40,.12)!important}
@media(max-width:520px){.encabezado-tiendas-marca{padding:17px 16px;gap:11px}.marca-a-mini{width:54px!important;height:54px!important}.titulo-tiendas-marca{font-size:20px!important}.mensaje-tiendas-marca{font-size:12px}.encabezado-tiendas-marca:after{right:12px;font-size:28px}.buscador-tiendas-cliente{width:calc(100% - 28px);margin:14px 14px 10px}.flecha-tiendas{width:38px;height:38px}.nav-cliente .nav-salir{grid-column:2;justify-self:end}.nav-cliente .nav-comprar{grid-column:1/-1!important}}
/* ---- Pulido móvil: prioridad comercial y menos ruido ---- */
.rol-cliente>.footer{display:none!important}
.nav-cliente .nav-comprar{border:2px solid rgba(255,255,255,.72)!important;box-shadow:0 7px 18px rgba(5,49,83,.20),inset 0 0 0 1px rgba(8,73,116,.18)!important;letter-spacing:.15px}
.nav-cliente .nav-comprar:active{transform:translateY(2px)!important;box-shadow:inset 0 4px 9px rgba(5,49,83,.25),0 2px 7px rgba(5,49,83,.14)!important}

/* === ACABADO METALICO PREMIUM - NAVEGACION CLIENTE === */
.nav-cliente a:not(.nav-salir){
  position:relative;overflow:hidden;
  background:var(--am-metal-verde)!important;
  color:#173a59!important;
  border:1px solid #8f9ca7!important;
  border-top-color:#ffffff!important;
  border-bottom-color:#6f7c87!important;
  border-radius:13px!important;
  text-shadow:0 1px 0 rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(67,82,94,.18),0 4px 9px rgba(4,31,52,.20)!important;
}
.nav-cliente a:not(.nav-salir):before{
  content:"";position:absolute;left:7%;right:7%;top:3px;height:34%;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.08));pointer-events:none;
}
.nav-cliente a:not(.nav-salir):hover{transform:translateY(-1px);filter:brightness(1.025)}
.nav-cliente a:not(.nav-salir):active{
  transform:translateY(2px)!important;
  background:linear-gradient(180deg,#b7c1ca 0%,#d7dde2 48%,#eef1f3 100%)!important;
  box-shadow:inset 0 4px 8px rgba(42,57,68,.28),inset 0 -1px 0 rgba(255,255,255,.75),0 1px 3px rgba(4,31,52,.16)!important;
}
.nav-cliente .nav-secundario{color:#29475f!important}
.nav-cliente .nav-comprar{
  background:linear-gradient(180deg,#5eb9e3 0%,#2488bd 43%,#116899 52%,#2d93c6 100%)!important;
  color:#fff!important;
  border:2px solid #a9d8ed!important;
  border-bottom-color:#0a4c72!important;
  text-shadow:0 1px 1px rgba(0,39,67,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(3,56,86,.28),0 6px 13px rgba(4,43,70,.28)!important;
}
.nav-cliente .nav-comprar:before{background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.04))}
.nav-cliente .nav-comprar:hover{background:linear-gradient(180deg,#70c5ea 0%,#2e94c9 43%,#1473a7 52%,#39a0d2 100%)!important}
.nav-cliente .nav-comprar:active{
  background:linear-gradient(180deg,#126b9c 0%,#247fae 48%,#4aa8d2 100%)!important;
  box-shadow:inset 0 5px 10px rgba(0,42,68,.42),inset 0 -1px 0 rgba(255,255,255,.30),0 1px 3px rgba(3,42,66,.18)!important;
}
.nav-cliente .nav-salir{border:1px solid rgba(206,217,225,.16)!important;border-radius:9px!important;background:rgba(16,45,68,.22)!important;color:rgba(231,238,243,.68)!important;text-shadow:none!important}
.nav-cliente .nav-salir:hover{color:#fff!important;border-color:rgba(230,238,244,.28)!important;background:rgba(255,255,255,.07)!important}

.checkout-direccion{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.checkout-direccion.seleccionada{transform:translateY(3px) scale(.988);background:linear-gradient(180deg,#dceefb,#d3e8f7)!important;border:2px solid #176fa8!important;box-shadow:inset 0 7px 13px rgba(17,79,120,.22),inset 0 -1px 2px rgba(255,255,255,.8)!important}
.checkout-direccion:not(.seleccionada){transform:translateY(-1px);box-shadow:0 4px 10px rgba(31,54,74,.07)!important}
.checkout-marca{font-size:12px!important;padding:5px 9px!important;background:#176fa8!important;color:#fff!important;border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(12,72,111,.16)}
/* Tilde de "seleccionada": grande, clara, con un brillo azul suave para
   que se sienta premium y no un simple texto verde plano. */
.checkout-direccion-metal.seleccionada .checkout-marca{
  font-size:15px!important;font-weight:900!important;padding:6px 13px!important;letter-spacing:.2px;
  background:linear-gradient(135deg,#1fae6e 0%,#0f7047 55%,#0b5636 100%)!important;
  border:1px solid #7ee6b8!important;
  box-shadow:0 0 0 1px rgba(121,211,247,.35),0 0 12px rgba(121,211,247,.45),0 3px 9px rgba(9,60,40,.4)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.4)!important;
}
/* Pantalla de "Confirma tu pedido" en gris metálico elegante: el mismo
   grafito mate del resto de la app, pero con un rayo de luz azul cruzando
   arriba (igual que el panel de tiendas) y un resplandor azul cielo
   alrededor de la tarjeta -- sin fondos negros. El texto pasa a azul
   cielo/blanco para mantenerse legible; la tarjeta ya seleccionada
   conserva su verde (el significado no cambia). */
.checkout-modal-metal{
  position:relative;overflow:hidden;
  background:var(--am-metal-verde)!important;
  border:1px solid #454e55!important;border-top-color:#5c6971!important;
  box-shadow:0 0 0 1px rgba(121,211,247,.14),0 0 38px rgba(56,150,199,.20),
             inset 0 1px 0 rgba(255,255,255,.10),inset 0 -3px 0 rgba(0,0,0,.55),
             0 20px 55px rgba(2,8,13,.5)!important;
}
.checkout-modal-metal:before{
  content:"";position:absolute;top:0;left:-20%;right:-20%;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,#2f79a3 15%,#7fdcff 50%,#2f79a3 85%,transparent)!important;
  box-shadow:0 0 14px 2px rgba(121,211,247,.55)!important;opacity:.85;
}
.checkout-modal-metal:after{
  content:"";position:absolute;top:-40%;left:50%;width:140%;height:60%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(90,190,230,.16) 0%,rgba(90,190,230,0) 70%)!important;
}
.checkout-modal-metal>*{position:relative;z-index:1}
.checkout-modal-metal .checkout-modal-titulo,.checkout-modal-metal h2{color:#8fe0ff!important;text-shadow:0 0 10px rgba(121,211,247,.45),0 1px 2px #000!important}
.checkout-modal-metal .checkout-modal-subtitulo{color:#9fb4bf!important}
.checkout-modal-metal .checkout-modal-etiqueta{color:#9fb4bf!important}
.checkout-modal-metal .checkout-modal-caja{
  background:var(--am-metal-verde)!important;
  border:1px solid #74818a!important;border-top-color:#525b62!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.3)!important;
}
.checkout-modal-metal .checkout-modal-caja-total{border-color:#3a7fa8!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 14px rgba(56,150,199,.22)!important}
.checkout-modal-metal .checkout-modal-monto{color:#8fe0ff!important;text-shadow:0 0 8px rgba(121,211,247,.4),0 1px 1px rgba(0,0,0,.6)!important}
.checkout-modal-metal #modal_envio_total{color:#8fe3b0!important;text-shadow:0 0 8px rgba(143,227,176,.4),0 1px 1px rgba(0,0,0,.6)!important}
.checkout-modal-metal .checkout-modal-input{background:#56626b!important;color:#e6eef2!important;border:1px solid #74818a!important}
.checkout-modal-metal .checkout-modal-input:focus{border-color:#4fb8e6!important;box-shadow:0 0 0 3px rgba(79,184,230,.25)!important;outline:none}
.checkout-modal-metal .checkout-direccion-metal:not(.seleccionada){
  background:var(--am-metal-verde)!important;
  border:2px solid #74818a!important;border-top-color:#5c6971!important;border-bottom-color:#587080!important;
}
.checkout-modal-metal .checkout-direccion-metal:not(.seleccionada):hover{border-top-color:#7fdcff!important}
.checkout-modal-metal .checkout-direccion-metal:not(.seleccionada) .checkout-dir-cabecera b,
.checkout-modal-metal .checkout-direccion-metal:not(.seleccionada) .checkout-dir-detalle{color:#79d3f7!important;text-shadow:0 1px 1px rgba(0,0,0,.6)!important}
.checkout-modal-metal .checkout-direccion-metal.seleccionada{box-shadow:0 0 0 1px rgba(121,211,247,.25),inset 0 8px 15px rgba(5,70,41,.29),inset 0 -1px 2px rgba(255,255,255,.65),0 1px 2px rgba(7,63,40,.12)!important}
.checkout-modal-metal .btn.light{background:linear-gradient(180deg,#333a40 0%,#55616a 100%)!important;color:#79d3f7!important;border:1px solid #454e55!important}
.checkout-modal-metal .btn.green{box-shadow:0 0 16px rgba(56,150,199,.28),0 5px 0 #0a4f31,0 8px 14px rgba(0,0,0,.35)!important}
/* Pantalla accesible de confirmar-por-voz: para quien no lee bien, no sabe
   leer, o solo quiere resolver rápido. Todo grande, todo ícono, un solo
   toque decide y envía -- nada de letra chica ni pasos escondidos. */
.checkout-voz-metal{
  max-width:420px;margin:12px auto;padding:14px 10px;border-radius:24px;text-align:center;position:relative;overflow:hidden;
  background:var(--am-metal-verde);
  border:1px solid #454e55;box-shadow:0 0 0 1px rgba(121,211,247,.14),0 0 38px rgba(56,150,199,.20),inset 0 1px 0 rgba(255,255,255,.10),0 20px 55px rgba(2,8,13,.5);
}
.checkout-voz-metal:before{content:"";position:absolute;top:0;left:-20%;right:-20%;height:2px;background:linear-gradient(90deg,transparent,#2f79a3 15%,#7fdcff 50%,#2f79a3 85%,transparent);box-shadow:0 0 14px 2px rgba(121,211,247,.55);opacity:.85}
.checkout-voz-icono{font-size:34px;margin-bottom:2px;filter:drop-shadow(0 0 10px rgba(121,211,247,.5))}
.checkout-voz-resumen{color:#e6f3fa;font-size:17px;font-weight:700;line-height:1.45;margin:4px 0 8px;text-shadow:0 1px 2px #000}
.dg-caja{background:#fff!important;border:2px solid #cfdbe6;border-radius:14px;padding:2px 10px;margin:6px 0;text-align:left;box-sizing:border-box;width:100%;max-width:100%}
.dg-fila{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;align-items:center;padding:7px 0;border-bottom:1px solid #e3eaf1}
.dg-ico{font-size:22px;line-height:1;text-align:center}
.dg-tit{font-size:17px!important;font-weight:800;color:#0f2a43!important;-webkit-text-fill-color:#0f2a43!important;text-shadow:none!important;line-height:1.2;overflow-wrap:anywhere}
.dg-exp{display:none}
.dg-monto{font-size:19px!important;font-weight:800;color:#0f2a43!important;-webkit-text-fill-color:#0f2a43!important;text-shadow:none!important;white-space:nowrap}
.dg-sub,.dg-total{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 0;color:#0f2a43!important;-webkit-text-fill-color:#0f2a43!important;text-shadow:none!important;white-space:nowrap}
.dg-sub{font-size:17px;font-weight:800;border-bottom:1px solid #e3eaf1}
.dg-total{font-size:17px;font-weight:900;color:#0b3a66!important;-webkit-text-fill-color:#0b3a66!important}
.dg-total b{font-size:24px}
.checkout-voz-metal .dg-caja{margin:4px 0 10px}
.checkout-voz-pregunta{color:#8fe0ff;font-size:19px;font-weight:900;margin:6px 0 14px;text-shadow:0 0 10px rgba(121,211,247,.4)}
.checkout-voz-botones{display:flex;flex-direction:column;gap:14px}
.checkout-voz-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:118px;border-radius:20px;cursor:pointer;
  background:var(--am-metal-verde);
  border:2px solid #74818a;border-top-color:#5c6971;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(121,211,247,.10),0 8px 18px rgba(0,0,0,.35);
  transition:transform .12s ease,box-shadow .12s ease;
}
.checkout-voz-btn:active{transform:scale(.97)}
.checkout-voz-btn:hover{border-top-color:#7fdcff}
.checkout-voz-btn-icono{font-size:52px;filter:drop-shadow(0 0 8px rgba(121,211,247,.4))}
.checkout-voz-btn-texto{color:#8fe0ff;font-size:19px;font-weight:900;letter-spacing:.3px;text-shadow:0 1px 2px #000}
.checkout-voz-btn-elegido{background:linear-gradient(135deg,#1fae6e 0%,#0f7047 55%,#0b5636 100%)!important;border-color:#7ee6b8!important;box-shadow:0 0 0 1px rgba(121,211,247,.35),0 0 16px rgba(121,211,247,.5)!important}
.checkout-voz-btn-elegido .checkout-voz-btn-texto{color:#fff!important}
.checkout-voz-btn:disabled{opacity:.55;cursor:default}
.checkout-voz-estado{min-height:20px;color:#9fe0b8;font-size:14px;font-weight:700;margin-top:14px}
.checkout-voz-revisar{display:inline-block;margin-top:16px;color:#79d3f7;font-size:13px;text-decoration:underline}
@media(max-width:420px){.checkout-voz-btn{min-height:104px}.checkout-voz-btn-icono{font-size:44px}}
.checkout-acciones{position:sticky;bottom:-1px;z-index:5;background:linear-gradient(180deg,rgba(255,255,255,.76),#fff 28%);padding-top:9px;padding-bottom:2px}
@media(max-width:520px){.checkout-modal{padding:15px!important;border-radius:19px!important;max-height:calc(100dvh - 20px)!important;overflow-y:auto!important}.checkout-modal h2{font-size:20px!important}.checkout-modal .notice{font-size:13px!important;padding:10px!important}.checkout-direccion{padding:9px 10px!important}.checkout-acciones .btn{padding:12px!important}}
/* === EXPERIENCIA CLIENTE UNIFICADA: ACERO + SELECCION ACTIVA === */
.panel-tiendas-unificado{background:var(--am-metal-verde)!important;border:1px solid #87949e!important;border-top-color:#fff!important;border-bottom-color:#687781!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(61,76,87,.16),0 8px 20px rgba(19,48,68,.18)!important}
.encabezado-tiendas-unificado{background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(216,224,229,.18))!important;border-bottom:1px solid rgba(96,113,125,.30)!important;padding:15px 18px 13px!important}.encabezado-tiendas-unificado:after{display:none!important}.encabezado-tiendas-unificado .texto-tiendas-marca{padding-right:0!important}.saludo-unificado{font-family:'Poppins',Arial,sans-serif;font-size:13px;font-weight:800;color:#365064;margin-bottom:2px;text-shadow:0 1px 0 #fff}.encabezado-tiendas-unificado .titulo-tiendas-marca{font-size:22px!important;color:#123e61!important;text-shadow:0 1px 0 rgba(255,255,255,.95)}.encabezado-tiendas-unificado .mensaje-tiendas-marca{margin-top:3px!important;color:#4e606d!important;font-size:12px!important}.panel-tiendas-unificado .marca-a-mini{width:56px!important;height:56px!important;border-radius:15px!important;border:1px solid #8e9ca6!important;box-shadow:inset 0 1px 0 #fff,0 4px 9px rgba(28,50,65,.18)!important}
.panel-tiendas-unificado .buscador-tiendas-cliente{background:linear-gradient(180deg,#fff,#f2f5f7)!important;border-color:#9caab4!important;box-shadow:inset 0 2px 4px rgba(38,55,67,.08),0 1px 0 rgba(255,255,255,.8)!important}
.tarjeta-tienda-clic{background:var(--am-metal-verde)!important;border:1px solid #87949e!important;border-top-color:#fff!important;border-bottom-color:#667680!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(59,74,85,.18),0 8px 15px rgba(20,45,61,.20)!important}.tarjeta-tienda-clic .tienda-cliente-nombre{color:#243f52!important;text-shadow:0 1px 0 #fff}.tarjeta-tienda-clic .tienda-cliente-distancia{color:#435663!important}.tarjeta-tienda-clic.seleccionada{background:linear-gradient(180deg,#dff3e8 0%,#b9ddc8 48%,#8ec2a5 52%,#cce7d7 100%)!important;border:2px solid #176943!important;border-top-color:#6fc697!important;border-bottom-color:#0a4f31!important;box-shadow:inset 0 9px 17px rgba(5,70,41,.30),inset 0 -2px 3px rgba(255,255,255,.58),0 1px 2px rgba(7,63,40,.12)!important}
.checkout-direccion-metal{padding:11px 12px!important;border-radius:14px!important;background:linear-gradient(145deg,#f9fbfc 0%,#e0e6ea 40%,#bbc5cc 51%,#f0f3f5 72%,#d6dde2 100%)!important;border:1px solid #87949e!important;border-top-color:#fff!important;border-bottom-color:#65747e!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(59,74,85,.18),0 5px 10px rgba(21,46,62,.18)!important}.checkout-direccion-metal:not(.seleccionada){transform:translateY(-2px)!important}.checkout-direccion-metal.seleccionada{transform:translateY(3px) scale(.988)!important;background:linear-gradient(180deg,#d9f0e3 0%,#b9ddc8 48%,#8ec2a5 52%,#cce7d7 100%)!important;border:2px solid #176943!important;border-top-color:#6fc697!important;border-bottom-color:#0a4f31!important;box-shadow:inset 0 8px 15px rgba(5,70,41,.29),inset 0 -1px 2px rgba(255,255,255,.65),0 1px 2px rgba(7,63,40,.12)!important}.checkout-dir-contenido{display:flex;gap:10px;align-items:center}.checkout-dir-icono{font-size:25px;flex:0 0 auto}.checkout-dir-texto{min-width:0;flex:1}.checkout-dir-cabecera{display:flex;justify-content:space-between;gap:8px;align-items:center}.checkout-dir-cabecera b{font-family:'Poppins',Arial,sans-serif;font-size:16px;color:#183d55;line-height:1.2;letter-spacing:.1px}.checkout-direccion-metal.seleccionada .checkout-dir-cabecera b{color:#0b5636}.checkout-dir-detalle{font-size:12px;color:#52636f;margin-top:4px;line-height:1.3;overflow-wrap:anywhere}.checkout-direccion-metal.seleccionada .checkout-dir-detalle{color:#315c46}.checkout-direccion-metal .checkout-marca{white-space:nowrap;background:#0f7047!important;border-color:#dff5e8!important}
.panel-tiendas-unificado{background:linear-gradient(145deg,#f7f8f7 0%,#cfd3d3 22%,#9da5a7 48%,#e7e9e7 70%,#b7bdbe 100%)!important;border:1px solid #737b7d!important;border-top-color:#fff!important;border-bottom-color:#565e60!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(65,70,69,.22),0 9px 20px rgba(24,38,44,.20)!important}.panel-tiendas-unificado:before{content:'';display:block;height:2px;margin:-2px 5% 8px;background:linear-gradient(90deg,transparent,rgba(176,139,67,.65),rgba(255,244,196,.9),rgba(176,139,67,.65),transparent);border-radius:99px}.tarjeta-tienda-clic{background:linear-gradient(145deg,#f5f6f5 0%,#c9cecf 23%,#929b9e 49%,#e9ebea 69%,#adb5b7 100%)!important;border:1px solid #6b7477!important;border-top-color:#fdfefe!important;border-bottom-color:#4e585b!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.92),inset 0 -3px 0 rgba(56,64,67,.22),0 9px 17px rgba(22,39,47,.24)!important}.tarjeta-tienda-clic:not(.seleccionada){outline:1px solid rgba(177,139,67,.24);outline-offset:-4px}.tarjeta-tienda-clic.seleccionada{outline:none!important}.tienda-cliente-cta{border:1px solid rgba(79,86,87,.65)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 5px rgba(30,40,44,.20)!important}
.oferta-destacada{position:relative;margin:10px 0 8px;padding:11px 10px 10px;border-radius:14px;background:linear-gradient(145deg,#fff9f2,#ffe5c8 48%,#ffd09a 52%,#fff0dc);border:1px solid #e99b45;box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(175,92,22,.14)}.oferta-etiqueta{display:inline-block;margin-bottom:5px;padding:4px 9px;border-radius:999px;background:#b43b17;color:#fff;font-size:11px;font-weight:950;letter-spacing:.35px;box-shadow:0 2px 5px rgba(118,38,13,.22)}.oferta-destacada .precio-anterior-producto{font-size:14px;color:#765f50}.oferta-destacada .precio-anterior-producto span{text-decoration:line-through;text-decoration-thickness:2px}.oferta-destacada .precio-producto-principal{margin:4px 0;color:#087c3b;font-size:31px}.oferta-destacada .ahorro-producto{background:#fff7e9;border:1px solid #efbd7a;color:#98420f;font-size:12px}.ahorro-total-producto{margin-top:7px;padding:7px 8px;border-radius:9px;background:#e9f8ef;border:1px solid #70bd8e;color:#12683c;font-size:12px;font-weight:900}.ahorro-total-producto b{font-size:15px}
@media(max-width:520px){.encabezado-tiendas-unificado{padding:13px 14px 11px!important}.panel-tiendas-unificado .marca-a-mini{width:50px!important;height:50px!important}.saludo-unificado{font-size:12px}.encabezado-tiendas-unificado .titulo-tiendas-marca{font-size:19px!important}.checkout-dir-cabecera b{font-size:14px}.checkout-marca{font-size:10px!important;padding:4px 7px!important}.checkout-dir-detalle{font-size:11px}}
/* === ACABADO CLIENTE: ACERO PROFUNDO / AUTORIDAD VISUAL === */
@keyframes reflejoAceroCliente{0%,68%{transform:translateX(-145%) skewX(-18deg);opacity:0}74%{opacity:.28}88%{opacity:.10}100%{transform:translateX(245%) skewX(-18deg);opacity:0}}
.panel-tiendas-unificado{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#e8ebea 0%,#aeb5b5 17%,#697476 42%,#3f4b4e 50%,#8e9898 59%,#d9ddda 76%,#707a7c 100%)!important;
  border:2px solid #3e484a!important;border-top-color:#f1f2ee!important;border-bottom-color:#252d2f!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.72),inset 0 -4px 0 rgba(20,27,29,.34),inset 0 0 0 1px rgba(180,145,75,.24),0 12px 28px rgba(12,28,38,.30)!important;
}
.panel-tiendas-unificado:before{height:3px!important;margin:-2px 4% 9px!important;background:linear-gradient(90deg,transparent,#8f7137 15%,#d4b66c 38%,#fff0bd 50%,#c29a4d 63%,#80632e 85%,transparent)!important;box-shadow:0 1px 3px rgba(55,39,10,.25)!important}
.panel-tiendas-unificado:after{content:'';position:absolute;z-index:0;top:0;bottom:0;left:0;width:22%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),rgba(214,185,116,.18),transparent);animation:reflejoAceroCliente 8s ease-in-out infinite}
.panel-tiendas-unificado>*{position:relative;z-index:1}
.encabezado-tiendas-unificado{background:linear-gradient(180deg,rgba(248,249,246,.72),rgba(88,100,103,.18))!important;border-bottom:1px solid rgba(41,51,54,.48)!important;box-shadow:inset 0 -1px 0 rgba(229,204,145,.22)!important}
.saludo-unificado{color:#253a48!important;text-shadow:0 1px 0 rgba(255,255,255,.70)!important}.encabezado-tiendas-unificado .titulo-tiendas-marca{color:#0b3452!important;font-weight:900!important}.encabezado-tiendas-unificado .mensaje-tiendas-marca{color:#354a56!important;font-weight:700!important}
.tarjeta-tienda-clic:not(.seleccionada){
  overflow:hidden;background:linear-gradient(145deg,#e5e8e6 0%,#a8b0b0 18%,#687376 43%,#4a5558 50%,#90999a 59%,#d6dad7 77%,#737d7f 100%)!important;
  border:2px solid #465154!important;border-top-color:#f0f1ed!important;border-bottom-color:#2b3437!important;
  outline:1px solid rgba(205,170,91,.50)!important;outline-offset:-5px!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.72),inset 0 -4px 0 rgba(22,30,32,.30),inset 0 0 0 1px rgba(190,151,68,.16),0 10px 20px rgba(10,27,37,.30)!important;
}
.tarjeta-tienda-clic:not(.seleccionada):before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 37%,rgba(255,255,255,.22) 45%,rgba(221,189,111,.12) 49%,transparent 57%);transform:translateX(-120%);transition:transform .65s ease}
.tarjeta-tienda-clic:not(.seleccionada):hover:before,.tarjeta-tienda-clic:not(.seleccionada):focus:before{transform:translateX(120%)}
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-nombre{color:#102f43!important;text-shadow:0 1px 0 rgba(255,255,255,.70)!important}.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-distancia{color:#263d49!important}.tarjeta-tienda-clic:not(.seleccionada) .logo-tienda-cliente{border-color:#667174!important;box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(13,29,37,.28)!important}
.tienda-cliente-cta{background:linear-gradient(180deg,#3b647b 0%,#183f57 47%,#0b2d43 53%,#24526a 100%)!important;border:1px solid #172f3e!important;border-top-color:#8ba5b4!important;border-bottom-color:#061b29!important;text-shadow:0 1px 1px rgba(0,0,0,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -2px 0 rgba(0,0,0,.28),0 4px 8px rgba(10,27,38,.25)!important}
.tarjeta-tienda-clic.seleccionada .tienda-cliente-cta{background:linear-gradient(180deg,#16855a,#0a593a)!important;border-color:#084a31!important}
.checkout-direccion-metal:not(.seleccionada){background:linear-gradient(145deg,#e7eae8 0%,#adb4b4 20%,#6d787a 47%,#4b5659 52%,#9ca5a4 63%,#d8dcd9 80%,#747e80 100%)!important;border:2px solid #465154!important;border-top-color:#f0f1ed!important;border-bottom-color:#2b3437!important;outline:1px solid rgba(200,163,79,.38);outline-offset:-5px;box-shadow:inset 0 2px 0 rgba(255,255,255,.70),inset 0 -3px 0 rgba(22,30,32,.28),0 6px 13px rgba(11,29,39,.27)!important}
.checkout-direccion-metal:not(.seleccionada) .checkout-dir-cabecera b{color:#102f43!important;text-shadow:0 1px 0 rgba(255,255,255,.68)}.checkout-direccion-metal:not(.seleccionada) .checkout-dir-detalle{color:#273f4b!important;font-weight:650}
.flecha-tiendas{border:2px solid #465154!important;background:linear-gradient(145deg,#dfe3e1,#737e80 48%,#3e4b4f 52%,#aeb6b5)!important;color:#fff!important;text-shadow:0 1px 2px #18262d;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 14px rgba(11,29,39,.32)!important}
@media(prefers-reduced-motion:reduce){.panel-tiendas-unificado:after{animation:none!important}.tarjeta-tienda-clic:not(.seleccionada):before{transition:none!important}}

/* === RECORRIDO CLIENTE PREMIUM / LEGIBILIDAD === */
.login-cliente-premium{max-width:430px!important;padding:30px 26px!important;overflow:hidden;position:relative;background:linear-gradient(145deg,#e9ecea 0%,#aab2b2 18%,#667276 43%,#39474d 51%,#929b9b 65%,#d9ddda 83%,#697477 100%)!important;border:2px solid #465154!important;border-top-color:#f5f4ed!important;border-bottom-color:#202c31!important;outline:1px solid rgba(204,166,78,.48);outline-offset:-7px;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 0 rgba(15,24,28,.28),0 18px 45px rgba(8,25,37,.34)!important}.login-cliente-premium:after{content:'';position:absolute;inset:-40% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.22) 48%,rgba(211,174,88,.12) 51%,transparent 56%);animation:brilloClienteEntrada 8s ease-in-out infinite}.login-cliente-premium>*{position:relative;z-index:1}.login-cliente-marca{width:68px;height:68px;margin:0 auto 10px;border-radius:20px;display:grid;place-items:center;font-size:35px;background:linear-gradient(180deg,#294f68,#0c2e44);border:1px solid #b79a58;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(10,28,39,.3)}.login-cliente-premium h1{text-align:center;margin:4px 0;color:#092c43;font-size:31px;text-shadow:0 1px 0 rgba(255,255,255,.7)}.login-cliente-lema{text-align:center;font-size:16px;font-weight:800;color:#263e4a;margin:0 0 22px}.login-cliente-premium label{font-size:15px;color:#142f3e;font-weight:900}.login-cliente-premium input{font-size:17px;padding:13px 14px;border:2px solid #5b676b;background:rgba(255,255,255,.92)}.btn-cliente-entrar{font-size:17px!important;padding:14px!important;color:#fff!important;background:linear-gradient(180deg,#37677f,#123e58 48%,#082c43 52%,#24556e)!important;border:1px solid #102c3c!important;border-top-color:#9eb5c0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 12px rgba(7,26,38,.28)!important}.login-cliente-separador{text-align:center;border-top:1px solid rgba(40,53,57,.35);margin:20px 0 14px}.login-cliente-separador span{position:relative;top:-10px;background:#9aa3a3;padding:0 10px;font-size:13px;font-weight:800;color:#263c47}.btn-cliente-crear{width:100%;box-sizing:border-box;text-align:center;background:rgba(245,247,246,.82)!important;border:2px solid #596568!important;color:#12354a!important;font-weight:900}.login-cliente-confianza{text-align:center;font-size:13px;font-weight:700;color:#263c47;line-height:1.45;margin:15px 5px 0}@keyframes brilloClienteEntrada{0%,68%{transform:translateX(-35%)}85%,100%{transform:translateX(35%)}}
.tienda-cliente-nombre{font-size:18px!important;line-height:1.15!important;margin-top:6px!important}.tienda-cliente-meta{gap:6px!important}.tienda-cliente-estado,.tienda-cliente-distancia{font-size:14px!important;font-weight:900!important}.tienda-favorita-badge{display:inline-block;margin:5px auto 1px;padding:3px 7px;border-radius:999px;background:linear-gradient(180deg,#f2dfaa,#b99242);border:1px solid #725820;color:#25333a;font-size:10px;font-weight:1000;letter-spacing:.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.buscador-catalogo-cliente{padding:14px!important;background:linear-gradient(180deg,#fbfcfc,#eef2f3)!important;border:1px solid #c5cdd0!important}.buscador-contexto{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#17384d}.buscador-contexto>span{font-size:25px}.buscador-contexto b{display:block;font-size:17px}.buscador-contexto small{display:block;color:#5d6d77;font-size:12px;margin-top:2px}.buscador-catalogo-cliente input{width:100%;padding:13px 14px;border-radius:12px;border:2px solid #9ba7ac;font-size:16px;box-sizing:border-box;background:#fff}.categorias-producto-cliente{display:flex;gap:7px;overflow-x:auto;padding:10px 1px 3px;scrollbar-width:thin}.categoria-chip{flex:0 0 auto;border:1px solid #59666a;border-radius:999px;padding:8px 13px;background:linear-gradient(180deg,#e5e8e7,#9da6a6);color:#173747;font-weight:900;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 5px rgba(12,29,38,.16);cursor:pointer}.categoria-chip.activa{color:#fff;background:linear-gradient(180deg,#285a74,#0c344d);border-color:#092a3d;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}.categoria-chip.oferta{border-color:#a56c22}.acciones-pedido-cliente{gap:18px!important}.boton-accion-etiqueta{font-size:13px!important;font-weight:850!important}.card .body h3{font-size:17px!important;line-height:1.25}.cart h2{font-size:19px!important;color:#123b55}.cart .total{font-size:22px!important}
@media(max-width:600px){.login-cliente-premium{margin:12px!important;padding:25px 19px!important}.tarjeta-tienda-clic{min-width:185px!important;max-width:185px!important}.tienda-cliente-nombre{font-size:18px!important}.precio-producto-principal{font-size:32px!important}.card .body h3{font-size:18px!important}.categorias-producto-cliente{margin-right:-8px}}
@media(prefers-reduced-motion:reduce){.login-cliente-premium:after{animation:none!important}}

/* === CONTRASTE METALICO CLIENTE: AZUL CIELO + ACERO CLARO === */
/* Azul claro luminoso sobre acero. Se conserva azul profundo solo en el encabezado. */
.nav-cliente a:not(.nav-salir){color:#67c8f3!important;text-shadow:0 1px 1px rgba(7,49,78,.62),0 0 2px rgba(255,255,255,.34)!important}
.nav-cliente .nav-secundario{color:#67c8f3!important}
.panel-tiendas-unificado .saludo-unificado,
.panel-tiendas-unificado .titulo-tiendas-marca,
.panel-tiendas-unificado .mensaje-tiendas-marca{color:#68c9f4!important;text-shadow:0 1px 1px rgba(8,51,78,.58),0 0 2px rgba(255,255,255,.38)!important}
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-nombre,
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-distancia{color:#63c7f3!important;text-shadow:0 1px 1px rgba(7,48,73,.62),0 0 2px rgba(255,255,255,.30)!important}
/* ABIERTO/CERRADO mantienen sus colores semánticos. */
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-estado.ok{color:#178a54!important;text-shadow:0 1px 0 rgba(255,255,255,.62)!important}
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-estado.off{color:#b53636!important;text-shadow:0 1px 0 rgba(255,255,255,.58)!important}
.checkout-direccion-metal:not(.seleccionada) .checkout-dir-cabecera b,
.checkout-direccion-metal:not(.seleccionada) .checkout-dir-detalle{color:#63c7f3!important;text-shadow:0 1px 1px rgba(7,48,73,.58),0 0 2px rgba(255,255,255,.30)!important}
.login-cliente-premium h1,
.login-cliente-premium .login-cliente-lema,
.login-cliente-premium label,
.login-cliente-premium .login-cliente-confianza{color:#63c7f3!important;text-shadow:0 1px 1px rgba(7,48,73,.60),0 0 2px rgba(255,255,255,.28)!important}
.login-cliente-premium .login-cliente-separador span{color:#70cef5!important;background:#7d888a!important;text-shadow:0 1px 1px rgba(7,48,73,.58)!important}
.categoria-chip:not(.activa){color:#56bce9!important;text-shadow:0 1px 1px rgba(7,48,73,.46)!important}

/* El acero se aclara solo un grado: conserva relieve, reflejo y profundidad. */
.panel-tiendas-unificado{background:linear-gradient(145deg,#fbfcfb 0%,#dde1e1 22%,#b4bbbc 48%,#f1f3f2 70%,#cbd0d1 100%)!important;border-color:#879092!important;border-top-color:#fff!important;border-bottom-color:#687173!important}
.tarjeta-tienda-clic:not(.seleccionada){background:linear-gradient(145deg,#fafbfa 0%,#d9ddde 23%,#abb3b5 49%,#f2f3f2 69%,#c6cccd 100%)!important;border-color:#818b8e!important;border-top-color:#fff!important;border-bottom-color:#626c6f!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 0 rgba(65,73,76,.16),0 8px 15px rgba(22,39,47,.18)!important}
.checkout-direccion-metal:not(.seleccionada){background:linear-gradient(145deg,#fafbfa 0%,#d9ddde 22%,#aeb6b7 48%,#f0f2f1 70%,#c8cdce 100%)!important;border-color:#818b8e!important;border-top-color:#fff!important;border-bottom-color:#626c6f!important}
.flecha-tiendas{background:linear-gradient(145deg,#f2f4f3,#aab3b5 48%,#6f7b7e 52%,#cdd2d1)!important;border-color:#6d787b!important;color:#fff!important}


/* === CLIENTE: GRIS METALICO MATE + AZUL CIELO ===
   Sustituye el acero inoxidable por grafito/antracita mate.
   Sin reflejo cromado; el relieve nace de variaciones oscuras y bordes finos. */
.panel-tiendas-unificado{
  background:linear-gradient(145deg,#24282c 0%,#56626b 24%,#5e7482 50%,#59656e 72%,#505b64 100%)!important;
  border:2px solid #6d7982!important;border-top-color:#4a5157!important;border-bottom-color:#587080!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -3px 0 rgba(0,0,0,.52),0 10px 24px rgba(4,10,15,.28)!important;
}
.panel-tiendas-unificado:before{background:linear-gradient(90deg,transparent,#707c85 18%,#596168 50%,#707c85 82%,transparent)!important;box-shadow:none!important;opacity:.72}
.panel-tiendas-unificado:after{display:none!important}
.encabezado-tiendas-unificado{background:linear-gradient(180deg,#626e77 0%,#141719 100%)!important;border-bottom:1px solid #707c85!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}

.tarjeta-tienda-clic:not(.seleccionada){
  background:linear-gradient(145deg,#68747d 0%,#1a1e21 24%,#5e7482 50%,#5e6a73 72%,#121416 100%)!important;
  border:2px solid #707c85!important;border-top-color:#515960!important;border-bottom-color:#587080!important;
  outline:1px solid rgba(112,124,133,.32)!important;outline-offset:-5px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -3px 0 rgba(0,0,0,.48),0 9px 17px rgba(3,10,14,.34)!important;
}
.tarjeta-tienda-clic:not(.seleccionada):before{display:none!important}
.tarjeta-tienda-clic:not(.seleccionada) .logo-tienda-cliente{border-color:#4b545b!important;box-shadow:0 5px 12px rgba(0,0,0,.34)!important}

/* Azul cielo: acento legible sobre negro mate. */
.nav-cliente a:not(.nav-salir),.nav-cliente .nav-secundario,
.panel-tiendas-unificado .saludo-unificado,.panel-tiendas-unificado .titulo-tiendas-marca,.panel-tiendas-unificado .mensaje-tiendas-marca,
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-nombre,.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-distancia,
.checkout-direccion-metal:not(.seleccionada) .checkout-dir-cabecera b,.checkout-direccion-metal:not(.seleccionada) .checkout-dir-detalle{
  color:#79d3f7!important;text-shadow:0 1px 1px rgba(0,0,0,.72)!important;
}

/* Navegacion y controles que usan acabado metalico. */
.nav-cliente .nav-secundario{
  background:linear-gradient(180deg,#6d7982 0%,#1c2024 46%,#101214 54%,#626e77 100%)!important;
  border-color:#74818a!important;border-top-color:#5c656c!important;border-bottom-color:#08090a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.45),0 4px 9px rgba(0,0,0,.24)!important;
}
.checkout-direccion-metal:not(.seleccionada){
  background:linear-gradient(145deg,#68747d 0%,#1a1e21 24%,#4c5760 50%,#5e6a73 72%,#121416 100%)!important;
  border:2px solid #707c85!important;border-top-color:#515960!important;border-bottom-color:#587080!important;
  outline:1px solid rgba(112,124,133,.28)!important;outline-offset:-5px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -3px 0 rgba(0,0,0,.48),0 6px 13px rgba(0,0,0,.30)!important;
}
.flecha-tiendas{
  background:linear-gradient(145deg,#6d7982,#59656e 48%,#5e7482 52%,#626e77)!important;
  border-color:#444c52!important;color:#79d3f7!important;text-shadow:0 1px 2px #000!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 14px rgba(0,0,0,.34)!important;
}
.categoria-chip:not(.activa){background:linear-gradient(180deg,#6d7982,#56626b)!important;border-color:#41494f!important;color:#79d3f7!important;text-shadow:0 1px 1px #000!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 5px rgba(0,0,0,.22)!important}

/* Login del cliente conserva la misma familia visual. */
.login-cliente-premium{background:linear-gradient(145deg,#68747d 0%,#57636c 25%,#5e7482 50%,#5e6a73 73%,#505b64 100%)!important;border-color:#707c85!important;border-top-color:#515960!important;border-bottom-color:#587080!important;outline-color:rgba(112,124,133,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -4px 0 rgba(0,0,0,.48),0 18px 45px rgba(0,0,0,.35)!important}
.login-cliente-premium:after{display:none!important}
.login-cliente-premium .login-cliente-separador span{background:#56626b!important;color:#79d3f7!important}

/* Estados conservan significado y la seleccion conserva verde. */
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-estado.ok{color:#29a86a!important;text-shadow:none!important}
.tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-estado.off{color:#e15b5b!important;text-shadow:none!important}


/* ===== AJUSTE VISUAL CLIENTE: GRIS METALICO EN TODOS LOS CONTROLES ===== */
.rol-cliente .nav-cliente a,
.rol-cliente .nav-cliente .nav-secundario,
.rol-cliente .nav-cliente .nav-comprar,
.rol-cliente .nav-cliente .nav-salir{
  color:#63d4ff!important;
  background:linear-gradient(180deg,#647079 0%,#4b5760 43%,#3f4a52 56%,#171b1e 100%)!important;
  border:2px solid #7d8991!important;
  border-top-color:#d7e0e5!important;
  border-left-color:#aab6bd!important;
  border-right-color:#566168!important;
  border-bottom-color:#20272b!important;
  outline:1px solid #78858e!important;
  outline-offset:2px!important;
  border-radius:13px!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(0,0,0,.72),0 5px 0 #414c54,0 8px 14px rgba(0,0,0,.38)!important;
  text-shadow:0 1px 2px #000!important;
  font-weight:850!important;
  transform:translateY(-2px);
}
.rol-cliente .nav-cliente a:hover{
  background:linear-gradient(180deg,#6d7982 0%,#4e5a63 43%,#78858e 56%,#5c6871 100%)!important;
  border-top-color:#f0f5f7!important;
  transform:translateY(-3px)!important;
}
.rol-cliente .nav-cliente a:active{
  transform:translateY(3px)!important;
  box-shadow:inset 0 5px 10px rgba(0,0,0,.82),inset 0 -1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.35)!important;
  border-top-color:#424b50!important;border-bottom-color:#8d9aa2!important;
}
.rol-cliente .nav-cliente .nav-comprar{font-size:17px!important;letter-spacing:.15px!important}

/* Buscador: blanco limpio para dar descanso visual al gris metalico. */
.rol-cliente .buscador-tiendas-wrap,
.rol-cliente .buscador-tiendas-wrap input,
.rol-cliente input[type="search"]{
  background:#fff!important;color:#25313a!important;
}
.rol-cliente .buscador-tiendas-wrap{border-color:#cbd8e1!important;box-shadow:0 3px 9px rgba(0,0,0,.22)!important}
.rol-cliente .buscador-tiendas-wrap input{border-color:transparent!important;box-shadow:none!important}

/* Voz, camara y galeria: misma tecla gris metalica con borde elevado. */
.rol-cliente .boton-accion-redonda{
  background:linear-gradient(180deg,#647079 0%,#4b5760 43%,#3f4a52 56%,#171b1e 100%)!important;
  border:2px solid #7d8991!important;border-top-color:#d7e0e5!important;border-left-color:#aab6bd!important;border-right-color:#566168!important;border-bottom-color:#20272b!important;
  outline:1px solid #78858e;outline-offset:2px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(0,0,0,.72),0 5px 0 #414c54,0 9px 16px rgba(0,0,0,.38)!important;
  transform:translateY(-2px);transition:transform .12s,box-shadow .12s,border-color .12s!important;
}
.rol-cliente .boton-accion-redonda:hover{transform:translateY(-4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 0 rgba(0,0,0,.72),0 6px 0 #414c54,0 11px 18px rgba(0,0,0,.42)!important}
.rol-cliente .boton-accion-redonda:active,
.rol-cliente .boton-accion-redonda.grabando,
.rol-cliente .boton-accion-redonda.camara-activa{
  transform:translateY(4px) scale(.985)!important;
  border-top-color:#343c41!important;border-bottom-color:#8d9aa2!important;
  box-shadow:inset 0 7px 13px rgba(0,0,0,.92),inset 0 -1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.30)!important;
}
.rol-cliente .boton-accion-icono{filter:drop-shadow(0 1px 2px #000)}
.rol-cliente .boton-accion-etiqueta{color:#63d4ff!important;text-shadow:0 1px 2px #000!important;font-weight:850!important}
.rol-cliente .boton-accion-etiqueta.estado-activo{transform:translateY(2px);color:#63d4ff!important;text-shadow:0 2px 2px #000!important}
.rol-cliente .boton-accion-redonda.grabando{animation:latidoGrabandoMetal 1.15s ease-in-out infinite!important}
@keyframes latidoGrabandoMetal{0%,100%{outline-color:#78858e}50%{outline-color:#39bff2}}

/* La informacion secundaria de cada tienda queda blanca, como se acordo. */
.rol-cliente .seccion-tienda-cliente .small,
.rol-cliente .panel-tiendas-unificado .small{color:#f4f7f9!important}


/* ===== CLIENTE: GRAFITO SUAVE FINAL + TEXTO BLANCO =====
   Dirección visual aprobada: gris oscuro metálico, no negro puro.
   Solo el título "Tiendas cerca de ti" conserva el azul de acento. */
.rol-cliente .panel-tiendas-unificado{
  background:linear-gradient(145deg,#78858e 0%,#39434c 24%,#2e373f 50%,#414c55 73%,#343e47 100%)!important;
  border-color:#667581!important;border-top-color:#a8bac6!important;border-bottom-color:#20282e!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(9,14,18,.35),0 10px 24px rgba(11,22,30,.25)!important;
}
.rol-cliente .encabezado-tiendas-unificado{background:linear-gradient(180deg,#78858e 0%,#35404a 100%)!important;border-bottom-color:#66737d!important}
.rol-cliente .tarjeta-tienda-clic:not(.seleccionada){
  background:linear-gradient(145deg,#4c5862 0%,#3b4650 25%,#65727c 51%,#78858e 73%,#36414a 100%)!important;
  border-color:#71818d!important;border-top-color:#b4c3cc!important;border-bottom-color:#222b31!important;
  outline-color:rgba(149,169,182,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(9,14,18,.34),0 8px 16px rgba(7,15,21,.27)!important;
}
.rol-cliente .nav-cliente a,.rol-cliente .nav-cliente .nav-secundario,.rol-cliente .nav-cliente .nav-comprar,.rol-cliente .nav-cliente .nav-salir,
.rol-cliente .boton-accion-redonda,.rol-cliente .tienda-cliente-cta{
  background:linear-gradient(180deg,#53606b 0%,#3d4852 43%,#2d353c 56%,#46525c 100%)!important;
  border-color:#83939f!important;border-top-color:#c5d1d8!important;border-left-color:#aab9c3!important;border-right-color:#66747e!important;border-bottom-color:#252e34!important;
}
.rol-cliente .nav-cliente a:hover,.rol-cliente .boton-accion-redonda:hover{background:linear-gradient(180deg,#5c6974 0%,#78858e 43%,#343e46 56%,#4d5963 100%)!important}
.rol-cliente .flecha-tiendas,.rol-cliente .categoria-chip:not(.activa){background:linear-gradient(145deg,#53606b,#6e7b85 48%,#2e373e 52%,#77848d)!important}

/* Texto principal blanco sobre grafito. */
.rol-cliente .nav-cliente a,
.rol-cliente .nav-cliente .nav-secundario,
.rol-cliente .nav-cliente .nav-comprar,
.rol-cliente .nav-cliente .nav-salir,
.rol-cliente .panel-tiendas-unificado .saludo-unificado,
.rol-cliente .panel-tiendas-unificado .mensaje-tiendas-marca,
.rol-cliente .tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-nombre,
.rol-cliente .tarjeta-tienda-clic:not(.seleccionada) .tienda-cliente-distancia,
.rol-cliente .tienda-cliente-cta,
.rol-cliente .boton-accion-etiqueta,
.rol-cliente .boton-accion-etiqueta.estado-activo,
.rol-cliente .categoria-chip:not(.activa){color:#f7fafc!important;text-shadow:0 1px 2px rgba(0,0,0,.62)!important}

/* Único acento tipográfico azul del bloque central. */
.rol-cliente .encabezado-tiendas-unificado .titulo-tiendas-marca{color:#35b9f2!important;text-shadow:0 1px 2px rgba(0,0,0,.52)!important}

/* Buscador permanece blanco. */
.rol-cliente .buscador-tiendas-wrap,.rol-cliente .buscador-tiendas-wrap input,.rol-cliente input[type="search"]{background:#fff!important;color:#25313a!important}

/* === AJUSTE FINAL CLIENTE: acciones integradas + grafito suave === */
.rol-cliente .acciones-pedido-cliente{
  width:100%!important;max-width:none!important;margin:14px 0 4px!important;
  display:grid!important;grid-template-columns:1.25fr 1fr 1fr!important;gap:14px!important;
  padding:12px!important;box-sizing:border-box!important;border-radius:22px!important;
  background:linear-gradient(145deg,#4d5a65 0%,#3f4b55 34%,#697783 52%,#75838e 76%,#3b4650 100%)!important;
  border:2px solid #718392!important;border-top-color:#9fb1be!important;border-bottom-color:#202a31!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(15,22,27,.30),0 8px 18px rgba(10,20,27,.26)!important;
}
.rol-cliente .accion-pedido-cliente{
  min-height:116px!important;padding:10px 12px!important;box-sizing:border-box!important;border-radius:18px!important;
  justify-content:center!important;background:linear-gradient(180deg,#84929c 0%,#75838e 42%,#37434d 58%,#7b8993 100%)!important;
  border:2px solid #8495a2!important;border-top-color:#b4c2cc!important;border-bottom-color:#202a31!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(9,15,19,.30),0 5px 0 #202a31,0 9px 14px rgba(0,0,0,.24)!important;
}
.rol-cliente .boton-accion-redonda{
  width:100%!important;height:70px!important;border-radius:15px!important;margin:0!important;
  background:linear-gradient(180deg,#84929c 0%,#75838e 43%,#35414a 57%,#4b5862 100%)!important;
  border:2px solid #8fa0ad!important;border-top-color:#c0ccd4!important;border-bottom-color:#1c252c!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(7,12,15,.30),0 4px 0 #202a31,0 8px 13px rgba(0,0,0,.24)!important;
}
.rol-cliente .accion-pedido-cliente:first-child .boton-accion-redonda{height:78px!important}
.rol-cliente .boton-accion-icono{font-size:38px!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))!important}
.rol-cliente .boton-accion-etiqueta{color:#fff!important;font-size:15px!important;margin:10px 2px 2px!important;text-shadow:0 1px 2px rgba(0,0,0,.65)!important}
.rol-cliente .accion-pedido-cliente:first-child .boton-accion-etiqueta{font-size:17px!important;font-weight:950!important}
.rol-cliente .boton-accion-redonda:hover{transform:translateY(-2px)!important;background:linear-gradient(180deg,#62717d 0%,#4e5c67 43%,#3b4852 57%,#82909a 100%)!important}
.rol-cliente .boton-accion-redonda:active,.rol-cliente .boton-accion-redonda.grabando,.rol-cliente .boton-accion-redonda.camara-activa{
  transform:translateY(4px)!important;box-shadow:inset 0 5px 10px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #202a31!important;
  border-top-color:#26313a!important;border-bottom-color:#8295a3!important;background:linear-gradient(180deg,#303b44,#3a4650)!important;
}
.rol-cliente .boton-accion-etiqueta.estado-activo{color:#fff!important;font-weight:950!important}
@media(max-width:700px){.rol-cliente .acciones-pedido-cliente{grid-template-columns:1fr!important}.rol-cliente .accion-pedido-cliente{min-height:102px!important}}

/* Entrada del cliente: mismo grafito suave del catalogo, con acentos azules discretos. */
.login-cliente-premium{
  background:linear-gradient(145deg,#82909a 0%,#75838e 24%,#697783 50%,#4b5964 74%,#3c4852 100%)!important;
  border:2px solid #718493!important;border-top-color:#a9bac6!important;border-bottom-color:#202a31!important;
  outline:1px solid rgba(53,185,242,.42)!important;outline-offset:-7px!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -5px 0 rgba(10,18,23,.28),0 18px 42px rgba(5,19,29,.32),0 0 0 1px rgba(53,185,242,.16)!important;
}
.login-cliente-premium:after{display:block!important;content:''!important;position:absolute!important;inset:-35% -80%!important;pointer-events:none!important;background:linear-gradient(110deg,transparent 44%,rgba(53,185,242,.06) 49%,rgba(255,255,255,.055) 51%,transparent 56%)!important;animation:brilloClienteEntrada 11s ease-in-out infinite!important}
.login-cliente-premium h1,.login-cliente-premium .login-cliente-lema,.login-cliente-premium label,.login-cliente-premium .login-cliente-confianza{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important}
.login-cliente-premium .login-cliente-separador span{background:#75838e!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important}
.login-cliente-marca{border-color:#4ebff0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 2px rgba(53,185,242,.12),0 8px 18px rgba(10,28,39,.28)!important}
.login-cliente-premium input{border-color:#7f929f!important;box-shadow:0 0 0 1px rgba(53,185,242,.10)!important}
.btn-cliente-entrar{border-color:#35b9f2!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 2px rgba(53,185,242,.12),0 6px 12px rgba(7,26,38,.28)!important}
.btn-cliente-crear{background:linear-gradient(180deg,#84929c,#3d4953)!important;border-color:#7d909e!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 0 1px rgba(53,185,242,.12)!important}


/* ===== EFECTO AZUL FINAL APROBADO: GRAFITO + LUZ AZUL MODERADA =====
   Se aplica a todas las teclas oscuras del cliente y a la entrada.
   La intensidad queda deliberadamente por debajo del prototipo neon fuerte. */
.rol-cliente .nav-cliente a,
.rol-cliente .nav-cliente .nav-secundario,
.rol-cliente .nav-cliente .nav-comprar,
.rol-cliente .nav-cliente .nav-salir,
.rol-cliente .tienda-cliente-cta,
.rol-cliente .boton-accion-redonda,
.rol-cliente .accion-pedido-cliente,
.rol-cliente .flecha-tiendas,
.rol-cliente .categoria-chip:not(.activa){
  background-color:#697783!important;
  background-image:
    linear-gradient(132deg,transparent 0 68%,rgba(45,181,244,.22) 68.4%,rgba(45,181,244,.06) 69.2%,transparent 70%),
    linear-gradient(180deg,#84929c 0%,#75838e 42%,#697783 58%,#7b8993 100%)!important;
  border-color:#66c8f3!important;
  border-top-color:#a9e4ff!important;
  border-bottom-color:#257eaa!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -4px 0 rgba(8,15,20,.28),
    0 0 0 1px rgba(40,174,238,.24),
    0 0 9px rgba(29,169,235,.27),
    0 5px 0 #202a31,
    0 9px 15px rgba(0,0,0,.24)!important;
}
.rol-cliente .nav-cliente a:hover,
.rol-cliente .tienda-cliente-cta:hover,
.rol-cliente .boton-accion-redonda:hover{
  border-color:#82d8ff!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 0 rgba(8,15,20,.27),0 0 0 1px rgba(48,187,250,.34),0 0 12px rgba(31,178,245,.34),0 6px 0 #202a31,0 10px 17px rgba(0,0,0,.25)!important;
}
.rol-cliente .boton-accion-redonda:active,
.rol-cliente .boton-accion-redonda.grabando,
.rol-cliente .boton-accion-redonda.camara-activa{
  background-image:linear-gradient(132deg,transparent 0 68%,rgba(45,181,244,.18) 68.5%,transparent 70%),linear-gradient(180deg,#303b44,#3a4650)!important;
  border-top-color:#257eaa!important;border-bottom-color:#8fdcff!important;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.52),inset 0 0 9px rgba(32,179,244,.12),0 0 8px rgba(31,178,245,.24),0 1px 0 #202a31!important;
}
.rol-cliente .acciones-pedido-cliente{
  border-color:#4faed8!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.13),inset 0 -4px 0 rgba(15,22,27,.27),0 0 0 1px rgba(45,181,244,.15),0 0 11px rgba(31,166,228,.18),0 8px 18px rgba(10,20,27,.26)!important;
}
.rol-cliente .panel-tiendas-unificado{
  background-image:linear-gradient(132deg,transparent 0 76%,rgba(45,181,244,.18) 76.3%,rgba(45,181,244,.04) 77.2%,transparent 78%),linear-gradient(145deg,#78858e 0%,#39434c 24%,#2e373f 50%,#414c55 73%,#343e47 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(9,14,18,.35),0 0 0 1px rgba(45,181,244,.16),0 0 12px rgba(31,166,228,.16),0 10px 24px rgba(11,22,30,.25)!important;
}
.rol-cliente .tarjeta-tienda-clic:not(.seleccionada){
  background-image:linear-gradient(132deg,transparent 0 70%,rgba(45,181,244,.18) 70.4%,rgba(45,181,244,.04) 71.2%,transparent 72%),linear-gradient(145deg,#4c5862 0%,#3b4650 25%,#65727c 51%,#78858e 73%,#36414a 100%)!important;
  border-color:#579fc1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(9,14,18,.34),0 0 8px rgba(31,166,228,.18),0 8px 16px rgba(7,15,21,.27)!important;
}

/* Entrada: mismo lenguaje visual, sin convertirla en un letrero neon. */
.login-cliente-premium{
  background-image:linear-gradient(132deg,transparent 0 72%,rgba(45,181,244,.20) 72.4%,rgba(45,181,244,.05) 73.2%,transparent 74%),linear-gradient(145deg,#82909a 0%,#75838e 24%,#697783 50%,#4b5964 74%,#3c4852 100%)!important;
  border-color:#5dbde8!important;border-top-color:#9fddf8!important;border-bottom-color:#287fa8!important;
  outline-color:rgba(45,181,244,.34)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -5px 0 rgba(10,18,23,.27),0 0 0 1px rgba(45,181,244,.22),0 0 14px rgba(31,169,235,.22),0 18px 42px rgba(5,19,29,.32)!important;
}
.login-cliente-premium:after{background:linear-gradient(110deg,transparent 44%,rgba(45,181,244,.09) 49%,rgba(255,255,255,.045) 51%,transparent 56%)!important}
.btn-cliente-entrar,.btn-cliente-crear{
  background-image:linear-gradient(132deg,transparent 0 70%,rgba(45,181,244,.20) 70.5%,transparent 72%),linear-gradient(180deg,#84929c 0%,#75838e 43%,#35414a 57%,#4b5862 100%)!important;
  border:2px solid #63c8f4!important;border-top-color:#a8e3fd!important;border-bottom-color:#267fa8!important;color:#fff!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(8,15,20,.28),0 0 0 1px rgba(45,181,244,.22),0 0 9px rgba(31,169,235,.26),0 5px 10px rgba(7,26,38,.28)!important;
}
.btn-cliente-entrar:hover,.btn-cliente-crear:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(8,15,20,.25),0 0 0 1px rgba(45,181,244,.30),0 0 12px rgba(31,178,245,.32),0 6px 12px rgba(7,26,38,.30)!important}
.login-cliente-premium input:focus{border-color:#45bdf2!important;box-shadow:0 0 0 2px rgba(45,181,244,.16),0 0 9px rgba(31,169,235,.20)!important;outline:none!important}


/* ===== EFECTO REAL APROBADO: GRAFITO + LUZ AZUL + RAYOS =====
   Este bloque es CSS de producción: se renderiza en la pantalla real del usuario.
   Intensidad moderada, con luz azul debajo y reflejos diagonales finos. */
.rol-cliente .nav-cliente a,
.rol-cliente .nav-cliente .nav-secundario,
.rol-cliente .nav-cliente .nav-comprar,
.rol-cliente .nav-cliente .nav-salir,
.rol-cliente .tienda-cliente-cta,
.rol-cliente .boton-accion-redonda,
.rol-cliente .accion-pedido-cliente,
.rol-cliente .flecha-tiendas,
.rol-cliente .categoria-chip:not(.activa){
  background-image:
    linear-gradient(132deg,transparent 0 72%,rgba(43,188,255,.26) 72.4%,rgba(111,216,255,.10) 73.1%,transparent 74.0%),
    linear-gradient(42deg,transparent 0 17%,rgba(41,184,250,.13) 17.4%,transparent 18.2%),
    linear-gradient(180deg,#596773 0%,#75838e 42%,#697783 58%,#7b8993 100%)!important;
  border-color:#55c5f5!important;
  border-top-color:#9ee1ff!important;
  border-left-color:#72d1f8!important;
  border-right-color:#318db6!important;
  border-bottom-color:#17668a!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -4px 0 rgba(7,14,19,.28),
    0 0 0 1px rgba(40,184,248,.20),
    0 0 10px rgba(29,171,238,.25),
    0 6px 0 rgba(17,83,112,.58),
    0 10px 16px rgba(4,20,30,.30)!important;
}
.rol-cliente .nav-cliente a:hover,
.rol-cliente .tienda-cliente-cta:hover,
.rol-cliente .boton-accion-redonda:hover,
.rol-cliente .flecha-tiendas:hover{
  border-color:#75d7ff!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -4px 0 rgba(7,14,19,.25),
    0 0 0 1px rgba(49,195,255,.27),
    0 0 13px rgba(31,181,246,.31),
    0 7px 0 rgba(17,91,124,.62),
    0 12px 18px rgba(4,20,30,.32)!important;
}
.rol-cliente .nav-cliente a:active,
.rol-cliente .boton-accion-redonda:active,
.rol-cliente .boton-accion-redonda.grabando,
.rol-cliente .boton-accion-redonda.camara-activa{
  transform:translateY(4px)!important;
  border-top-color:#277da3!important;
  border-bottom-color:#70d4fc!important;
  box-shadow:
    inset 0 7px 13px rgba(4,15,22,.70),
    inset 0 0 12px rgba(24,166,231,.16),
    0 0 0 1px rgba(50,195,255,.22),
    0 0 8px rgba(28,176,241,.25),
    0 1px 0 rgba(15,77,104,.60)!important;
}
/* Las tres acciones conservan el brillo azul en todo su bloque; voz tiene un poco más de autoridad. */
.rol-cliente .acciones-pedido-cliente{
  border-color:#4ebff0!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -4px 0 rgba(10,18,23,.28),0 0 0 1px rgba(45,181,244,.14),0 0 12px rgba(31,169,235,.18),0 8px 18px rgba(10,20,27,.26)!important;
}
.rol-cliente .accion-pedido-cliente:first-child,
.rol-cliente .accion-pedido-cliente:first-child .boton-accion-redonda{
  border-color:#6bd2fb!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(7,14,19,.28),0 0 0 1px rgba(45,190,252,.25),0 0 12px rgba(31,178,245,.30),0 6px 0 rgba(17,89,121,.60),0 10px 16px rgba(4,20,30,.30)!important;
}
/* Entrada del cliente: el mismo material y los mismos rayos, no una maqueta. */
.login-cliente-premium{
  background-image:
    linear-gradient(132deg,transparent 0 70%,rgba(42,188,255,.22) 70.5%,rgba(107,215,255,.08) 71.2%,transparent 72.2%),
    linear-gradient(42deg,transparent 0 16%,rgba(42,188,255,.10) 16.4%,transparent 17.3%),
    linear-gradient(145deg,#82909a 0%,#75838e 24%,#697783 50%,#4b5964 74%,#3c4852 100%)!important;
  border-color:#55c5f5!important;
  border-top-color:#9ee1ff!important;
  border-bottom-color:#17688c!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -5px 0 rgba(10,18,23,.27),0 0 0 1px rgba(45,181,244,.22),0 0 15px rgba(31,169,235,.24),0 18px 42px rgba(5,19,29,.32)!important;
}
.btn-cliente-entrar,.btn-cliente-crear{
  background-image:
    linear-gradient(132deg,transparent 0 71%,rgba(43,188,255,.27) 71.5%,rgba(108,216,255,.10) 72.2%,transparent 73.1%),
    linear-gradient(42deg,transparent 0 18%,rgba(42,188,255,.12) 18.4%,transparent 19.2%),
    linear-gradient(180deg,#596773 0%,#75838e 43%,#697783 57%,#4b5862 100%)!important;
  border:2px solid #5bc9f7!important;
  border-top-color:#a5e4ff!important;
  border-bottom-color:#237ba2!important;
  color:#fff!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(8,15,20,.28),0 0 0 1px rgba(45,181,244,.23),0 0 11px rgba(31,169,235,.29),0 5px 0 rgba(17,84,114,.56),0 9px 14px rgba(7,26,38,.28)!important;
}
.btn-cliente-entrar:hover,.btn-cliente-crear:hover{
  border-color:#78d9ff!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(8,15,20,.25),0 0 0 1px rgba(45,181,244,.30),0 0 14px rgba(31,178,245,.34),0 6px 0 rgba(17,91,124,.60),0 10px 15px rgba(7,26,38,.30)!important;
}
.btn-cliente-entrar:active,.btn-cliente-crear:active{
  transform:translateY(4px)!important;
  box-shadow:inset 0 6px 12px rgba(5,18,27,.62),inset 0 0 10px rgba(32,176,241,.15),0 0 8px rgba(31,178,245,.24),0 1px 0 rgba(17,82,111,.55)!important;
}
.login-cliente-premium input:focus{
  border-color:#59c9f7!important;
  box-shadow:0 0 0 2px rgba(45,181,244,.18),0 0 11px rgba(31,169,235,.24)!important;
  outline:none!important;
}



/* ===== ORGANIZACION FINAL DE VOZ / CAMARA / GALERIA =====
   El bloque pertenece a la tienda seleccionada, pero visualmente vive dentro
   del panel "Tiendas cerca de ti", antes del buscador y catalogo de productos. */
.rol-cliente .acciones-tienda-activa-mount{
  margin:12px 14px 14px!important;display:none;
}
.rol-cliente .acciones-tienda-activa-mount .panel-medios-tienda{
  margin:0!important;padding:12px!important;
  background:linear-gradient(145deg,#75838e 0%,#697783 48%,#2e3942 100%)!important;
  border:1.5px solid rgba(69,190,255,.72)!important;
  border-radius:18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 10px rgba(0,174,255,.22),0 8px 18px rgba(6,18,28,.30)!important;
}
.rol-cliente .acciones-tienda-activa-mount .panel-medios-tienda>h3,
.rol-cliente .acciones-tienda-activa-mount .panel-medios-tienda>p.small{margin-left:4px!important;margin-right:4px!important}
.rol-cliente .acciones-pedido-cliente{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
}
.rol-cliente .acciones-pedido-cliente .accion-pedido-cliente:first-child{
  grid-column:1/-1!important;min-height:126px!important;
}
.rol-cliente .acciones-pedido-cliente .accion-pedido-cliente:first-child .boton-accion-redonda{height:84px!important}
.rol-cliente .slot-medios-tienda:empty{display:none!important}
@media(max-width:700px){
  .rol-cliente .acciones-tienda-activa-mount{margin:10px 10px 12px!important}
  .rol-cliente .acciones-tienda-activa-mount .panel-medios-tienda{padding:10px!important}
  .rol-cliente .acciones-pedido-cliente{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:9px!important}
  .rol-cliente .acciones-pedido-cliente .accion-pedido-cliente{min-width:0!important;min-height:94px!important;padding:8px!important}
  .rol-cliente .acciones-pedido-cliente .accion-pedido-cliente:first-child{grid-column:1/-1!important;min-height:116px!important}
  .rol-cliente .acciones-pedido-cliente .boton-accion-redonda{height:62px!important}
  .rol-cliente .acciones-pedido-cliente .accion-pedido-cliente:first-child .boton-accion-redonda{height:76px!important}
  .rol-cliente .acciones-pedido-cliente .boton-accion-icono{font-size:32px!important}
  .rol-cliente .acciones-pedido-cliente .boton-accion-etiqueta{font-size:12px!important;line-height:1.2!important}
  .rol-cliente .acciones-pedido-cliente .accion-pedido-cliente:first-child .boton-accion-etiqueta{font-size:16px!important}
}


/* ===== MEDIOS COMPACTOS: VOZ PRINCIPAL + FOTO/GALERIA HORIZONTALES ===== */
.rol-cliente .acciones-tienda-activa-mount .panel-medios-compacto{padding:9px 10px 10px!important}
.rol-cliente .panel-medios-compacto .mensaje-medios-principal{margin:0 3px 7px!important;text-align:center;color:#f7fafc!important;font-size:15px!important;line-height:1.25!important;font-weight:750!important}
.rol-cliente .panel-medios-compacto .mensaje-medios-principal strong{color:#fff!important;font-weight:950!important}
.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{margin:5px 0 2px!important;padding:7px!important;gap:8px!important;border-radius:17px!important}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente{min-height:78px!important;padding:6px 7px!important;border-radius:15px!important}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child{min-height:92px!important}
.rol-cliente .panel-medios-compacto .boton-accion-redonda{height:48px!important;border-radius:13px!important}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-redonda{height:58px!important}
.rol-cliente .panel-medios-compacto .boton-accion-icono{font-size:28px!important}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-icono{font-size:34px!important}
.rol-cliente .panel-medios-compacto .boton-accion-etiqueta{margin:5px 1px 0!important;font-size:12px!important;min-height:0!important;max-width:none!important;line-height:1.15!important}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-etiqueta{font-size:15px!important}
.rol-cliente .panel-medios-compacto #vozEstado,.rol-cliente .panel-medios-compacto #fotoEstado{margin:3px 0!important}
/* ===== AJUSTE FINAL: TRES ACCIONES EN UNA LINEA + PANEL AROBAN ACTIVO ===== */
.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;align-items:stretch!important;
}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente,
.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child{
  grid-column:auto!important;min-width:0!important;min-height:82px!important;
}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-redonda{height:48px!important}
.rol-cliente .panel-medios-compacto.aroban-voz-activa{
  animation:arobanPanelRobot 1.35s ease-in-out infinite!important;
}
.rol-cliente .panel-medios-compacto.aroban-voz-activa .acciones-pedido-cliente{
  animation:arobanMarcoRobot 1.05s ease-in-out infinite!important;
}
@keyframes arobanPanelRobot{
  0%,100%{border-color:#39c8ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 12px rgba(30,190,255,.55),0 0 24px rgba(30,120,255,.25),0 8px 18px rgba(6,18,28,.32)!important}
  25%{border-color:#7b61ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 15px rgba(123,97,255,.62),0 0 28px rgba(0,220,255,.30),0 8px 18px rgba(6,18,28,.32)!important}
  50%{border-color:#00e5c3!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 17px rgba(0,229,195,.62),0 0 30px rgba(49,176,255,.32),0 8px 18px rgba(6,18,28,.32)!important}
  75%{border-color:#4f8cff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 16px rgba(79,140,255,.68),0 0 29px rgba(111,75,255,.28),0 8px 18px rgba(6,18,28,.32)!important}
}
@keyframes arobanMarcoRobot{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(60,201,255,.45),0 0 9px rgba(48,190,255,.28)!important}
  50%{box-shadow:inset 0 0 0 2px rgba(0,235,207,.62),0 0 15px rgba(106,91,255,.38)!important}
}
/* El estado activo ilumina TODO el bloque: mensaje, controles y respuesta de Arobán. */
.rol-cliente .panel-medios-compacto.aroban-voz-activa{
  position:relative!important;overflow:hidden!important;
  background-image:
    linear-gradient(125deg,transparent 0 18%,rgba(42,194,255,.24) 18.5%,transparent 20%),
    linear-gradient(48deg,transparent 0 42%,rgba(0,235,207,.18) 42.6%,transparent 44.2%),
    linear-gradient(138deg,transparent 0 69%,rgba(92,107,255,.20) 69.6%,transparent 71.2%),
    linear-gradient(145deg,#5d6b75 0%,#586872 42%,#53636e 62%,#1d2c35 100%)!important;
  background-size:180% 180%,170% 170%,190% 190%,100% 100%!important;
  animation:arobanPanelRobot 1.2s ease-in-out infinite,arobanFondoRobot 2.2s linear infinite!important;
}
.rol-cliente .panel-medios-compacto.aroban-voz-activa .mensaje-medios-principal,
.rol-cliente .panel-medios-compacto.aroban-voz-activa [id^="vozEstado-"]{
  animation:arobanTextoRobot 1.2s ease-in-out infinite!important;
}
.rol-cliente .panel-medios-compacto.aroban-voz-activa [id^="vozEstado-"]{
  border-color:#55dfff!important;
  box-shadow:inset 0 0 12px rgba(0,229,195,.16),0 0 17px rgba(44,191,255,.42)!important;
}
@keyframes arobanFondoRobot{
  0%{background-position:0% 30%,100% 40%,20% 100%,0 0}
  50%{background-position:100% 70%,0% 60%,90% 0%,0 0}
  100%{background-position:0% 30%,100% 40%,20% 100%,0 0}
}
@keyframes arobanTextoRobot{
  0%,100%{text-shadow:0 0 4px rgba(55,195,255,.28)}
  50%{text-shadow:0 0 10px rgba(0,235,207,.68),0 0 18px rgba(71,139,255,.38)}
}
/* Efecto Arobán visible en TODO el panel mientras escucha/procesa.
   Se mantiene deliberadamente perceptible también en móviles. */
.rol-cliente .panel-medios-compacto.aroban-voz-activa{
  isolation:isolate!important;
  border:3px solid #35d9ff!important;
  animation:arobanPanelRobotFuerte .82s ease-in-out infinite!important;
}
.rol-cliente .panel-medios-compacto.aroban-voz-activa::before{
  content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(32,173,255,.10),rgba(0,255,220,.48),rgba(62,118,255,.14),rgba(124,79,255,.42),rgba(0,229,195,.16),rgba(32,173,255,.10));
  animation:arobanBarridoRobot 1.45s linear infinite!important;
}
.rol-cliente .panel-medios-compacto.aroban-voz-activa::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 0 24%,rgba(92,224,255,.28) 31%,transparent 39% 58%,rgba(0,255,213,.22) 66%,transparent 75%);
  background-size:220% 100%;
  animation:arobanDestelloRobot 1.05s linear infinite!important;
}
.rol-cliente .panel-medios-compacto.aroban-voz-activa>*{position:relative;z-index:1}
@keyframes arobanPanelRobotFuerte{
  0%,100%{border-color:#32cfff!important;box-shadow:inset 0 0 18px rgba(44,190,255,.22),0 0 10px rgba(44,190,255,.72),0 0 24px rgba(39,121,255,.42),0 0 38px rgba(0,229,195,.18)!important;filter:brightness(1)}
  50%{border-color:#00ffd5!important;box-shadow:inset 0 0 26px rgba(0,255,213,.30),0 0 18px rgba(0,255,213,.88),0 0 34px rgba(50,164,255,.62),0 0 48px rgba(112,75,255,.24)!important;filter:brightness(1.12)}
}
@keyframes arobanBarridoRobot{to{transform:rotate(360deg)}}
@keyframes arobanDestelloRobot{0%{background-position:180% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
 /* El usuario pidió una señal visual activa; reducimos velocidad, no la eliminamos. */
 .rol-cliente .panel-medios-compacto.aroban-voz-activa{animation:arobanPanelRobotFuerte 1.7s ease-in-out infinite!important}
 .rol-cliente .panel-medios-compacto.aroban-voz-activa::before{animation:arobanBarridoRobot 3.2s linear infinite!important}
 .rol-cliente .panel-medios-compacto.aroban-voz-activa::after{animation:arobanDestelloRobot 2.4s linear infinite!important}
}
@media(max-width:700px){
 .rol-cliente .acciones-tienda-activa-mount{margin:7px 8px 9px!important}
 .rol-cliente .acciones-tienda-activa-mount .panel-medios-compacto{padding:7px!important;border-radius:16px!important}
 .rol-cliente .panel-medios-compacto .mensaje-medios-principal{font-size:13px!important;margin:0 2px 6px!important;line-height:1.22!important}
 .rol-cliente .panel-medios-compacto .acciones-pedido-cliente{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:6px!important;margin:3px 0 1px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente{min-height:70px!important;padding:5px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child{grid-column:1/-1!important;min-height:82px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-redonda{height:43px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-redonda{height:52px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-icono{font-size:25px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-icono{font-size:31px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-etiqueta{font-size:11px!important;margin-top:4px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-etiqueta{font-size:12px!important}
 .rol-cliente .panel-medios-compacto .acciones-pedido-cliente{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente,
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child{grid-column:auto!important;min-height:72px!important;padding:4px 3px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-redonda,
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-redonda{height:43px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-icono,
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-icono{font-size:25px!important}
}

@media(max-width:700px){.tabs-tiendas{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:thin}.tabs-tiendas .tab-tienda{flex:0 0 auto!important;white-space:nowrap;min-height:46px}}
@media(max-width:900px){.roles,.grid,.two,.stats{grid-template-columns:1fr}.cart{position:static;max-height:none}.form-grid{grid-template-columns:1fr}header{position:static;flex-direction:column;align-items:center;text-align:center}.nav{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:520px}.nav a{min-height:56px;font-size:16px}}

/* ===== JERARQUIA MOVIL CLIENTE: PEDIDOS + COMPRAR PRINCIPALES ===== */
@media(max-width:700px){
  .rol-cliente .nav-cliente{
    position:relative!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;
    padding-top:25px!important;
    align-items:stretch!important;
  }
  .rol-cliente .nav-cliente a[href="/cliente/creditos"]{grid-column:1!important;grid-row:1!important}
  .rol-cliente .nav-cliente a[href="/cliente/tiendas"]{grid-column:2!important;grid-row:1!important}
  .rol-cliente .nav-cliente a[href="/cliente/perfil"]{grid-column:1!important;grid-row:2!important}
  .rol-cliente .nav-cliente .nav-secundario{grid-column:2!important;grid-row:2!important}
  .rol-cliente .nav-cliente .nav-pedidos{
    grid-column:1/-1!important;grid-row:3!important;order:0!important;
    min-height:58px!important;font-size:18px!important;font-weight:950!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
  }
  .rol-cliente .nav-cliente .nav-comprar{
    grid-column:1/-1!important;grid-row:4!important;order:0!important;
    min-height:58px!important;font-size:19px!important;font-weight:950!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
  }
  .rol-cliente .nav-cliente .nav-salir{
    position:absolute!important;right:0!important;top:-7px!important;z-index:2!important;
    width:auto!important;min-height:0!important;margin:0!important;padding:3px 7px!important;
    font-size:10px!important;font-weight:600!important;line-height:1.15!important;
    color:rgba(255,255,255,.52)!important;background:rgba(20,31,39,.20)!important;
    border:1px solid rgba(88,164,198,.28)!important;border-radius:8px!important;
    box-shadow:none!important;text-shadow:none!important;opacity:.72!important;
  }
  .rol-cliente .nav-cliente .nav-salir:before{display:none!important}
  .rol-cliente .nav-cliente .nav-salir:hover{opacity:.92!important;box-shadow:none!important}
}
/* === PORTADA + REPARTIDOR: IDENTIDAD GRAFITO AZUL UNIFICADA === */
.portada-app-unificada{max-width:1180px;margin:0 auto;padding:8px 0 26px}
.portada-app-unificada .hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#454d53 0%,#353c42 28%,#6b7780 55%,#394148 78%,#30373d 100%);border:1px solid #59646d;border-top-color:#6f7d87;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -3px 0 rgba(8,13,18,.32),0 10px 26px rgba(8,23,34,.22),0 0 13px rgba(24,134,216,.18)}
.portada-app-unificada .hero:after,.rol-repartidor .panel:after,.login-repartidor-unificado:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 0 17%,rgba(34,153,235,.10) 17.4%,transparent 18.2% 68%,rgba(40,160,239,.08) 68.4%,transparent 69.2%);opacity:.75}
.portada-app-unificada .hero h2{color:#fff;text-shadow:0 0 10px rgba(57,174,245,.24)}.portada-app-unificada .hero p{color:#dbe6ee}
.portada-app-unificada .roles{gap:16px}.portada-app-unificada .role{position:relative;overflow:hidden;background:linear-gradient(145deg,#485158 0%,#373f45 30%,#2c3237 58%,#3b444b 82%,#31383e 100%);border:2px solid #82909a;border-top-color:#70818d;border-bottom-color:#20272c;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -4px 0 rgba(8,13,17,.30),0 9px 18px rgba(8,20,29,.24),0 0 12px rgba(22,137,218,.20)}
.portada-app-unificada .role:before{content:'';position:absolute;left:10%;right:10%;bottom:-2px;height:3px;border-radius:50%;background:#1596e8;box-shadow:0 0 10px #1596e8,0 4px 14px rgba(21,150,232,.38);opacity:.72}.portada-app-unificada .role:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(124deg,transparent 0 26%,rgba(31,153,235,.12) 26.5%,transparent 27.3% 72%,rgba(31,153,235,.08) 72.4%,transparent 73.2%)}
.portada-app-unificada .role>*{position:relative;z-index:1}.portada-app-unificada .role h3{color:#fff}.portada-app-unificada .role p{color:#d4dee5}.portada-app-unificada .role .btn{background:linear-gradient(180deg,#414b52,#2c343a 48%,#252c31 52%,#394249)!important;border:1px solid #168fdc!important;border-top-color:#58bdf7!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(4,17,26,.30),0 0 9px rgba(21,151,232,.28)!important}
/* Repartidor: mismo ADN visual, con un grafito un poco mas claro que el gris del cliente. */
.rol-repartidor{background:linear-gradient(180deg,#eaf0f4 0,#f3f6f8 100%)}.header-repartidor{background:linear-gradient(135deg,#66737d 0%,#263139 54%,#1d4f70 100%);box-shadow:0 7px 22px rgba(8,27,40,.24)}.header-repartidor .nav a{background:linear-gradient(180deg,#424c53,#2d353b 50%,#272e33 51%,#394249);border:1px solid #168fdc;border-top-color:#55b9f1;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 9px rgba(4,18,28,.28),0 0 8px rgba(20,143,222,.24)}
.rol-repartidor .panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#4a535a 0%,#3a4248 28%,#6d7982 56%,#3e474e 80%,#343b41 100%);border:1px solid #5a6872;border-top-color:#74838d;color:#f5f8fa;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 18px rgba(8,22,31,.18),0 0 10px rgba(21,145,224,.12)}.rol-repartidor .panel>*{position:relative;z-index:1}.rol-repartidor .panel h2,.rol-repartidor .panel h3{color:#fff}.rol-repartidor .panel .small{color:#d2dde4}.rol-repartidor .pedido-card{border:1px solid #c9d4db;box-shadow:0 4px 12px rgba(11,30,43,.12)}
.rol-repartidor .btn,.rol-repartidor .btn-grande,.rol-repartidor .btn-entregar-grande{border:1px solid #168fdc!important;border-top-color:#58bdf7!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 9px rgba(4,18,28,.24),0 0 8px rgba(20,143,222,.22)}
.login-repartidor-unificado{position:relative;overflow:hidden;background:linear-gradient(145deg,#4b545b 0%,#3b4349 30%,#6d7982 58%,#40484f 82%,#353c42 100%)!important;border:2px solid #596873!important;border-top-color:#74848f!important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px rgba(7,22,32,.24),0 0 13px rgba(22,145,224,.18)!important}.login-repartidor-unificado>*{position:relative;z-index:1}.login-repartidor-unificado h2,.login-repartidor-unificado label{color:#fff}.login-repartidor-unificado input{background:#f8fbfd;border:2px solid #7d929f}.login-repartidor-unificado .btn{border:1px solid #168fdc!important;border-top-color:#58bdf7!important;background:linear-gradient(180deg,#424c53,#2d353b 49%,#252c31 51%,#3a444b)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 11px rgba(5,18,27,.30),0 0 9px rgba(21,151,232,.26)!important}
.login-repartidor-unificado .danger{background:#5b2020!important;border:2px solid #ff8f87!important;color:#fff!important;font-weight:800;line-height:1.35;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 10px rgba(255,93,82,.20)}
.login-repartidor-unificado .danger *{color:#fff!important}
@media(max-width:760px){.portada-app-unificada{padding:0}.portada-app-unificada .roles{grid-template-columns:1fr;gap:12px}.portada-app-unificada .role{padding:20px}.portada-app-unificada .role p{min-height:0}.header-repartidor{position:relative}.header-repartidor .nav{width:100%;display:grid;grid-template-columns:1fr 1fr}.header-repartidor .nav a{text-align:center}.rol-repartidor main{padding:16px}}

/* === REPARTIDOR: legibilidad + azul activo refinado === */
.header-repartidor .nav a,.rol-repartidor .btn,.rol-repartidor .btn-grande,.rol-repartidor .btn-entregar-grande{
  font-size:15px!important;letter-spacing:.1px;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .16s ease;
}
.header-repartidor .nav a,.rol-repartidor .btn:not(.green):not(.red):not(.orange):not(.purple):not(.light),.rol-repartidor .btn-grande:not(.tomar):not(.camino):not(.completar),.rol-repartidor .btn-entregar-grande{
  background:linear-gradient(180deg,#46545e 0%,#34434d 47%,#293842 52%,#3d4c56 100%)!important;
  border-color:#24a8f2!important;border-top-color:#78cdfa!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 11px rgba(4,18,28,.26),0 0 11px rgba(29,164,240,.34)!important;
}
.header-repartidor .nav a:hover,.header-repartidor .nav a:focus-visible,
.rol-repartidor .btn:hover,.rol-repartidor .btn:focus-visible,
.rol-repartidor .btn-grande:hover,.rol-repartidor .btn-grande:focus-visible,
.rol-repartidor .btn-entregar-grande:hover,.rol-repartidor .btn-entregar-grande:focus-visible{
  border-color:#66caff!important;border-top-color:#b4e6ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px rgba(3,25,40,.30),0 0 18px rgba(42,181,255,.62)!important;
  filter:brightness(1.10);transform:translateY(-1px);outline:none;
}
.header-repartidor .nav a:active,.rol-repartidor .btn:active,.rol-repartidor .btn-grande:active,.rol-repartidor .btn-entregar-grande:active{
  transform:translateY(1px);filter:brightness(1.04);box-shadow:inset 0 3px 7px rgba(0,0,0,.24),0 0 14px rgba(42,181,255,.52)!important;
}
.rol-repartidor .aviso-ruta-repartidor{
  background:linear-gradient(145deg,#46535c 0%,#35434c 52%,#2f414c 100%)!important;color:#fff!important;
  border:1px solid #2caaf1!important;border-top-color:#72cdfb!important;font-size:15px;line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(4,18,28,.22),0 0 10px rgba(35,168,241,.28)!important;
}
.rol-repartidor .aviso-ruta-repartidor b{color:#fff;font-size:16px}
.rol-repartidor a.btn.green{font-size:17px!important;background:linear-gradient(180deg,#27ad70,#188c59)!important;border-color:#2cb8ff!important;border-top-color:#7bd5ff!important}
@media(max-width:760px){.header-repartidor .nav a,.rol-repartidor .btn{font-size:15px!important}.rol-repartidor .btn-grande,.rol-repartidor .btn-entregar-grande{font-size:18px!important}}

.rol-repartidor .panel-repartidor-compacto{padding:13px 16px!important}.rol-repartidor .panel-repartidor-compacto h2,.rol-repartidor .panel-repartidor-compacto h3{margin:0 0 8px!important}.rol-repartidor .panel-repartidor-compacto p{margin:7px 0!important}.rol-repartidor .panel-zona-repartidor .btn{padding:10px 12px!important;margin:3px 0!important;min-height:46px}.rol-repartidor .panel-resumen-repartidor p{margin-bottom:0!important}
.rol-repartidor .pedido-gps-alerta{position:relative;border:2px solid #28b6ff!important;animation:pedidoGpsPulso 1.15s ease-in-out infinite;will-change:box-shadow,border-color,filter}.rol-repartidor .gps-alerta-tarjeta{margin:-4px -5px 10px;padding:8px 10px;border-radius:8px;background:#0b6fa8;color:#fff;font-size:14px;font-weight:950;letter-spacing:.2px;text-align:center;border:1px solid #75d7ff;box-shadow:0 0 10px rgba(42,185,255,.42)}
@keyframes pedidoGpsPulso{0%,100%{border-color:#249bd8;box-shadow:0 4px 12px rgba(11,30,43,.14),0 0 5px rgba(35,170,240,.22);filter:brightness(1)}50%{border-color:#8ee2ff;box-shadow:0 5px 15px rgba(11,30,43,.18),0 0 22px rgba(31,181,255,.78);filter:brightness(1.07)}}@media(prefers-reduced-motion:reduce){.rol-repartidor .pedido-gps-alerta{animation:none!important;box-shadow:0 0 16px rgba(31,181,255,.58)!important}}@media(max-width:760px){.rol-repartidor .panel-repartidor-compacto{padding:11px 13px!important}.rol-repartidor .panel-repartidor-compacto p{font-size:15px!important;line-height:1.35!important}.rol-repartidor .panel-zona-repartidor .small{font-size:13px!important}.rol-repartidor .gps-alerta-tarjeta{font-size:13px;padding:7px 8px}}


/* === SEÑAL PERMANENTE: GPS === */
.pedido-gps-alerta{animation:pedidoGpsFuerte .82s ease-in-out infinite!important;border:3px solid #00d9ff!important}
.gps-alerta-tarjeta{background:linear-gradient(90deg,#006ea8,#00aee8)!important;color:#fff!important;border:2px solid #baf5ff!important;font-size:15px!important;font-weight:950!important;box-shadow:0 0 18px rgba(0,211,255,.82)!important}
@keyframes pedidoGpsFuerte{0%,100%{border-color:#00aee8!important;box-shadow:0 0 7px rgba(0,174,232,.42);filter:brightness(.92)}50%{border-color:#fff36a!important;box-shadow:0 0 30px rgba(0,217,255,1),0 0 12px rgba(255,243,106,.92);filter:brightness(1.30)}}
/* Aunque el sistema operativo pida reducir animaciones, estas dos señales son operativas y conservan una pulsación suave. */
@media(prefers-reduced-motion:reduce){.pedido-gps-alerta{animation:pedidoGpsFuerte 1.35s ease-in-out infinite!important}}


/* === REPARTIDOR: avisos críticos y lectura reforzada === */
.header-repartidor .nav a{font-size:16px!important;font-weight:800!important;padding:12px 15px!important}
.rol-repartidor .btn{font-size:16px!important;font-weight:800!important;line-height:1.25}
.rol-repartidor .btn-grande,.rol-repartidor .btn-entregar-grande{font-size:19px!important;font-weight:900!important}
.rol-repartidor .panel p,.rol-repartidor .panel li{font-size:16px;line-height:1.48}
.rol-repartidor .panel h2{font-size:25px}.rol-repartidor .panel h3{font-size:19px}
.rol-repartidor .aviso-alcohol-repartidor{background:linear-gradient(145deg,#5a3032,#45282a)!important;border:2px solid #ff6b6b!important;color:#fff!important;font-size:16px!important;line-height:1.5!important;box-shadow:0 0 14px rgba(255,84,84,.28)!important}
.rol-repartidor .aviso-alcohol-repartidor b{color:#fff!important;font-size:18px!important}
.rol-repartidor .aviso-gps-repartidor,.rol-repartidor .gps-alert-pulse{background:linear-gradient(145deg,#164e73,#123c5b)!important;border:2px solid #48c2ff!important;color:#fff!important;font-size:16px!important;line-height:1.5!important}
.rol-repartidor .aviso-gps-repartidor b,.rol-repartidor .gps-alert-pulse b{color:#fff!important;font-size:18px!important}
@keyframes gpsAvisoPulso{0%,100%{border-color:#39baff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 8px rgba(38,180,255,.30);filter:brightness(.94)}50%{border-color:#a7e5ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 24px rgba(44,190,255,.78);filter:brightness(1.18)}}
.rol-repartidor .gps-alert-pulse{animation:gpsAvisoPulso 1.35s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rol-repartidor .gps-alert-pulse{animation:none!important;box-shadow:0 0 16px rgba(44,190,255,.55)!important}}
.rol-repartidor .table-wrap{background:#f8fbfd!important;border:1px solid #9fb4c1!important}
.rol-repartidor .table th{background:#dce8f0!important;color:#123d62!important;font-size:16px!important;font-weight:900!important}
.rol-repartidor .table td{background:#f8fbfd!important;color:#24323c!important;font-size:15px!important;font-weight:600!important}
.rol-repartidor .table tr:hover td{background:#eaf5fb!important}
.rol-repartidor details summary{color:#ffd36a!important;font-size:16px!important;font-weight:900!important;line-height:1.4}
.rol-repartidor details[open] summary{color:#ffe49c!important}
.rol-repartidor .codigo-grande input{font-size:26px!important}
@media(max-width:760px){.header-repartidor .nav a{font-size:16px!important;min-height:48px}.rol-repartidor .btn{font-size:16px!important}.rol-repartidor .btn-grande,.rol-repartidor .btn-entregar-grande{font-size:19px!important}.rol-repartidor .panel h2{font-size:22px}.rol-repartidor .panel p,.rol-repartidor .panel li{font-size:15.5px}}
.header-repartidor .nav-salir-repartidor{font-size:11px!important;min-height:28px!important;padding:5px 8px!important;opacity:.62!important;align-self:center!important}.header-repartidor .nav-salir-repartidor:hover,.header-repartidor .nav-salir-repartidor:focus-visible{opacity:1!important}
@media(max-width:760px){.header-repartidor .nav-repartidor{grid-template-columns:1fr 1fr!important}.header-repartidor .nav-salir-repartidor{font-size:10px!important;min-height:26px!important;padding:4px 7px!important;justify-self:end!important;width:auto!important}}


/* ===== AROBÁN: VOZ PARA TIENDAS + MICRÓFONO PRINCIPAL + RAYOS TECNOLÓGICOS ===== */
.rol-cliente .buscador-tienda-voz-wrap{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:10px;align-items:stretch;margin:0 12px 5px}.rol-cliente .buscador-tienda-voz-wrap .buscador-tiendas-cliente{margin:0!important;width:100%!important;box-sizing:border-box!important}.rol-cliente .btn-micro-tienda{min-height:48px;border-radius:14px;border:2px solid #ff7b7b;border-top-color:#ffc0c0;border-bottom-color:#691010;color:#fff;font-weight:950;cursor:pointer;background-image:linear-gradient(132deg,transparent 0 62%,rgba(255,142,142,.30) 62.5%,transparent 64%),linear-gradient(42deg,transparent 0 25%,rgba(255,184,184,.18) 25.5%,transparent 27%),linear-gradient(180deg,#e44747,#bd2727 52%,#941818);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -4px 0 rgba(78,5,5,.32),0 0 0 1px rgba(255,92,92,.28),0 0 14px rgba(255,58,58,.38),0 6px 0 rgba(107,14,14,.72),0 10px 16px rgba(24,5,5,.32);text-shadow:0 1px 2px #000}.rol-cliente .btn-micro-tienda span{font-size:24px;display:block;line-height:23px}.rol-cliente .btn-micro-tienda b{font-size:11px;display:block;margin-top:2px}.rol-cliente .btn-micro-tienda.escuchando{animation:latidoMicroTienda .85s ease-in-out infinite;background:linear-gradient(180deg,#d73a3a,#9f1717)!important;border-color:#ff8a8a!important;box-shadow:0 0 18px rgba(255,62,62,.55),0 5px 0 #651010!important}@keyframes latidoMicroTienda{50%{transform:translateY(2px) scale(.985)}}.rol-cliente .estado-voz-tienda{min-height:18px;margin:3px 14px 7px;text-align:center;color:#fff!important;font-weight:800;font-size:12px}
.rol-cliente .acciones-pedido-cliente{grid-template-columns:1fr 1fr!important;gap:14px!important}.rol-cliente .accion-voz-principal{grid-column:1/-1!important;min-height:126px!important}.rol-cliente .accion-voz-principal .boton-accion-redonda{height:88px!important;background-image:linear-gradient(132deg,transparent 0 62%,rgba(255,118,118,.24) 62.5%,transparent 64%),linear-gradient(42deg,transparent 0 24%,rgba(255,164,164,.16) 24.5%,transparent 26%),linear-gradient(180deg,#e44747 0%,#bd2727 43%,#941818 58%,#c52c2c 100%)!important;border-color:#ff7b7b!important;border-top-color:#ffc0c0!important;border-bottom-color:#691010!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.24),inset 0 -5px 0 rgba(78,5,5,.34),0 0 0 1px rgba(255,92,92,.30),0 0 15px rgba(255,58,58,.38),0 7px 0 rgba(107,14,14,.72),0 12px 19px rgba(24,5,5,.34)!important}.rol-cliente .accion-voz-principal .boton-accion-icono{font-size:46px!important}.rol-cliente .accion-voz-principal .boton-accion-etiqueta{font-size:18px!important;font-weight:950!important}.rol-cliente .accion-voz-principal .boton-accion-redonda:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.26),inset 0 -5px 0 rgba(78,5,5,.32),0 0 0 1px rgba(255,120,120,.40),0 0 19px rgba(255,66,66,.48),0 8px 0 rgba(107,14,14,.74),0 13px 21px rgba(24,5,5,.36)!important}
.rol-cliente .nav-cliente a,.rol-cliente .tienda-cliente-cta,.rol-cliente .accion-pedido-cliente,.rol-cliente .flecha-tiendas,.rol-cliente .categoria-chip:not(.activa){background-image:linear-gradient(132deg,transparent 0 72%,rgba(43,188,255,.30) 72.4%,rgba(111,216,255,.11) 73.1%,transparent 74%),linear-gradient(42deg,transparent 0 17%,rgba(41,184,250,.18) 17.4%,transparent 18.2%),linear-gradient(112deg,transparent 0 42%,rgba(54,196,255,.13) 42.4%,transparent 43.2%),linear-gradient(62deg,transparent 0 83%,rgba(66,202,255,.12) 83.4%,transparent 84.1%),linear-gradient(180deg,#596773 0%,#75838e 42%,#697783 58%,#7b8993 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -4px 0 rgba(7,14,19,.28),0 0 0 1px rgba(40,184,248,.23),0 0 12px rgba(29,171,238,.30),0 7px 0 rgba(17,83,112,.64),0 12px 19px rgba(4,20,30,.32)!important}
@media(max-width:600px){.rol-cliente .buscador-tienda-voz-wrap{grid-template-columns:minmax(0,1fr) 88px;gap:8px;margin-left:8px;margin-right:8px}.rol-cliente .acciones-pedido-cliente{grid-template-columns:1fr 1fr!important}.rol-cliente .accion-pedido-cliente{min-height:100px!important}.rol-cliente .accion-voz-principal{grid-column:1/-1!important;min-height:124px!important}}

/* Panel de medios compacto: voz, cámara y galería en una sola línea.
   El micrófono conserva más presencia, pero sin desperdiciar una fila completa. */
.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{grid-template-columns:1.18fr 1fr 1fr!important;gap:8px!important;align-items:stretch!important}
.rol-cliente .panel-medios-compacto .accion-voz-principal{grid-column:1!important;grid-row:1!important;min-height:96px!important}
.rol-cliente .panel-medios-compacto .accion-camara{grid-column:2!important;grid-row:1!important}
.rol-cliente .panel-medios-compacto .accion-galeria{grid-column:3!important;grid-row:1!important}
.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-redonda{height:66px!important;min-width:72px!important}
.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-icono{font-size:36px!important}
.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-etiqueta{font-size:14px!important}
.rol-cliente .panel-medios-compacto [id^="vozEstado-"]{display:block!important;min-height:30px!important;margin:7px 2px 3px!important;padding:8px 10px!important;border-radius:11px!important;background:rgba(7,30,43,.88)!important;border:1px solid rgba(64,194,255,.42)!important;color:#f4fbff!important;font-size:14px!important;font-weight:800!important;line-height:1.38!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 12px rgba(35,179,241,.15)!important}
@media(max-width:430px){.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{grid-template-columns:1.15fr 1fr 1fr!important;gap:5px!important}.rol-cliente .panel-medios-compacto .accion-pedido-cliente{padding:5px!important;min-height:90px!important}.rol-cliente .panel-medios-compacto .boton-accion-redonda{width:58px!important;height:58px!important}.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-redonda{width:64px!important;height:64px!important}.rol-cliente .panel-medios-compacto .boton-accion-etiqueta{font-size:10.5px!important}.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-etiqueta{font-size:11.5px!important}}


/* ===== CORRECCION RESPONSIVA: MICROFONO / CAMARA / GALERIA SIN SOLAPES ===== */
.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{
  display:grid!important;
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:7px!important;row-gap:7px!important;
  width:100%!important;max-width:100%!important;
  padding:9px!important;overflow:hidden!important;
}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente{
  grid-row:1!important;min-width:0!important;width:100%!important;max-width:100%!important;
  padding:6px!important;margin:0!important;overflow:hidden!important;position:relative!important;
  transform:none!important;
}
.rol-cliente .panel-medios-compacto .accion-voz-principal{grid-column:1!important;z-index:1!important}
.rol-cliente .panel-medios-compacto .accion-camara{grid-column:2!important;z-index:1!important}
.rol-cliente .panel-medios-compacto .accion-galeria{grid-column:3!important;z-index:1!important}
.rol-cliente .panel-medios-compacto .boton-accion-redonda,
.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-redonda{
  width:100%!important;max-width:100%!important;min-width:0!important;height:64px!important;
  box-sizing:border-box!important;margin:0!important;position:relative!important;left:auto!important;right:auto!important;
}
.rol-cliente .panel-medios-compacto .boton-accion-etiqueta,
.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-etiqueta{
  width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  margin:7px 0 1px!important;font-size:11.5px!important;line-height:1.12!important;
  overflow-wrap:anywhere!important;word-break:normal!important;
}
.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-icono{font-size:37px!important}
@media(max-width:430px){
 .rol-cliente .panel-medios-compacto .acciones-pedido-cliente{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr)!important;gap:5px!important;padding:7px!important}
 .rol-cliente .panel-medios-compacto .accion-pedido-cliente{padding:4px!important;min-height:92px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-redonda,.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-redonda{width:100%!important;height:60px!important}
 .rol-cliente .panel-medios-compacto .boton-accion-etiqueta,.rol-cliente .panel-medios-compacto .accion-voz-principal .boton-accion-etiqueta{font-size:10.5px!important}
}

/* ===== PRESENCIA TECNOLOGICA: RAYOS AZULES + LUZ INFERIOR REFORZADA =====
   Ajuste fino solicitado: mas presencia, sin convertir la interfaz en neon. */
.rol-cliente .panel-tiendas-unificado,
.rol-cliente .tarjeta-tienda-clic:not(.seleccionada),
.rol-cliente .acciones-pedido-cliente,
.rol-cliente .panel-medios-compacto,
.rol-cliente .login-cliente-premium{
  background-image:
    linear-gradient(128deg,transparent 0 12%,rgba(39,184,250,.11) 12.35%,rgba(112,220,255,.045) 13.05%,transparent 13.7%),
    linear-gradient(52deg,transparent 0 27%,rgba(45,190,255,.13) 27.35%,rgba(118,222,255,.045) 28.05%,transparent 28.75%),
    linear-gradient(137deg,transparent 0 46%,rgba(39,184,250,.12) 46.35%,rgba(117,221,255,.05) 47.0%,transparent 47.8%),
    linear-gradient(43deg,transparent 0 63%,rgba(43,190,255,.10) 63.35%,rgba(112,218,255,.04) 64.0%,transparent 64.8%),
    linear-gradient(126deg,transparent 0 79%,rgba(47,194,255,.12) 79.35%,rgba(119,222,255,.045) 80.05%,transparent 80.8%),
    linear-gradient(145deg,#69757e 0%,#58646d 25%,#4a555e 50%,#606c75 73%,#515d66 100%)!important;
}
/* La entrada recibe los rayos desde antes de iniciar sesion. */
.rol-cliente .login-cliente-premium{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -4px 0 rgba(0,0,0,.48),0 0 0 1px rgba(47,190,252,.28),0 0 20px rgba(32,176,241,.31),0 19px 46px rgba(0,0,0,.38)!important;
}
/* Controles: mas rayos en la cara y una linea luminosa azul mas presente debajo. */
.rol-cliente .nav-cliente a,
.rol-cliente .tienda-cliente-cta,
.rol-cliente .boton-accion-redonda,
.rol-cliente .accion-pedido-cliente,
.rol-cliente .flecha-tiendas,
.rol-cliente .categoria-chip:not(.activa),
.rol-cliente .btn-cliente-entrar,
.rol-cliente .btn-cliente-crear{
  background-image:
    linear-gradient(130deg,transparent 0 13%,rgba(44,191,255,.17) 13.4%,transparent 14.2%),
    linear-gradient(48deg,transparent 0 29%,rgba(53,198,255,.16) 29.4%,transparent 30.25%),
    linear-gradient(133deg,transparent 0 49%,rgba(45,193,255,.19) 49.4%,rgba(115,220,255,.07) 50.05%,transparent 50.8%),
    linear-gradient(43deg,transparent 0 68%,rgba(54,200,255,.15) 68.4%,transparent 69.25%),
    linear-gradient(126deg,transparent 0 84%,rgba(48,195,255,.17) 84.4%,transparent 85.2%),
    linear-gradient(180deg,#596773 0%,#75838e 42%,#697783 58%,#7b8993 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -4px 0 rgba(7,14,19,.29),
    0 0 0 1px rgba(43,191,252,.27),
    0 0 14px rgba(30,178,243,.34),
    0 8px 0 rgba(18,105,143,.76),
    0 11px 10px rgba(27,172,236,.20),
    0 14px 21px rgba(4,20,30,.34)!important;
}
.rol-cliente .nav-cliente a:hover,
.rol-cliente .tienda-cliente-cta:hover,
.rol-cliente .boton-accion-redonda:hover,
.rol-cliente .flecha-tiendas:hover,
.rol-cliente .btn-cliente-entrar:hover,
.rol-cliente .btn-cliente-crear:hover{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.19),inset 0 -4px 0 rgba(7,14,19,.26),
    0 0 0 1px rgba(63,205,255,.34),0 0 18px rgba(35,188,250,.40),
    0 9px 0 rgba(20,119,160,.82),0 12px 12px rgba(31,181,246,.24),0 16px 23px rgba(4,20,30,.35)!important;
}
/* El microfono rojo conserva su identidad: rayos rojizos, pero con halo tecnologico azul inferior. */
.rol-cliente .accion-voz-principal .boton-accion-redonda,
.rol-cliente .btn-micro-tienda{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -5px 0 rgba(78,5,5,.35),0 0 0 1px rgba(255,102,102,.34),0 0 17px rgba(255,62,62,.40),0 8px 0 rgba(18,108,147,.78),0 12px 12px rgba(31,180,245,.22),0 15px 22px rgba(24,5,5,.36)!important;
}
@media(prefers-reduced-motion:reduce){.rol-cliente .login-cliente-premium,.rol-cliente .panel-tiendas-unificado{animation:none!important}}

/* ===== CLIENTE: BLOQUE SUPERIOR UNIFICADO + BUSCADOR EN UNA SOLA PIEZA ===== */
.rol-cliente .buscador-tienda-voz-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 88px!important;gap:0!important;align-items:stretch!important;margin:10px 12px 7px!important;padding:0!important;min-height:52px!important;overflow:hidden!important;border-radius:16px!important;background:#fff!important;border:2px solid rgba(52,195,255,.78)!important;box-shadow:inset 0 2px 5px rgba(15,43,60,.10),0 0 0 1px rgba(34,173,235,.18),0 0 13px rgba(30,174,239,.25)!important}
.rol-cliente .buscador-tienda-voz-wrap .buscador-tiendas-cliente{min-width:0!important;height:100%!important;min-height:50px!important;margin:0!important;padding:0 14px!important;border:0!important;border-radius:0!important;outline:0!important;background:#fff!important;color:#1d2b34!important;box-shadow:none!important;font-size:15px!important}
.rol-cliente .buscador-tienda-voz-wrap .buscador-tiendas-cliente:focus{box-shadow:inset 0 0 0 2px rgba(43,190,250,.18)!important}
.rol-cliente .buscador-tienda-voz-wrap .btn-micro-tienda{width:88px!important;min-width:88px!important;min-height:50px!important;height:100%!important;margin:0!important;border:0!important;border-left:2px solid rgba(111,18,18,.72)!important;border-radius:0!important;outline:0!important;transform:none!important;box-shadow:inset 2px 0 0 rgba(255,255,255,.10),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 0 rgba(77,5,5,.30)!important}
.rol-cliente .buscador-tienda-voz-wrap .btn-micro-tienda:active,.rol-cliente .buscador-tienda-voz-wrap .btn-micro-tienda.escuchando{transform:none!important}
@media(max-width:700px){
 .rol-cliente .header-cliente{padding-bottom:0!important}
 .rol-cliente .nav-cliente{margin:10px -8px 0!important;padding:30px 10px 13px!important;gap:8px!important;border:2px solid #536773!important;border-bottom:0!important;border-radius:20px 20px 0 0!important;background-image:linear-gradient(128deg,transparent 0 18%,rgba(43,190,255,.12) 18.4%,transparent 19.2%),linear-gradient(48deg,transparent 0 63%,rgba(44,191,255,.11) 63.4%,transparent 64.2%),linear-gradient(145deg,#69757e 0%,#58646d 28%,#4a555e 53%,#606c75 76%,#515d66 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(45,188,250,.20),0 0 16px rgba(31,175,239,.24)!important}
 .rol-cliente .nav-cliente a[href="/cliente/creditos"]{grid-column:1!important;grid-row:1!important}
 .rol-cliente .nav-cliente a[href="/cliente/tiendas"]{grid-column:2!important;grid-row:1!important}
 .rol-cliente .nav-cliente .nav-perfil{grid-column:1!important;grid-row:2!important}
 .rol-cliente .nav-cliente .nav-secundario{grid-column:2!important;grid-row:2!important}
 .rol-cliente .nav-cliente .nav-pedidos{grid-column:1/-1!important;grid-row:3!important}
 .rol-cliente .nav-cliente .nav-comprar{grid-column:1/-1!important;grid-row:4!important}
 .rol-cliente main{padding-top:0!important}
 .rol-cliente .panel-tiendas-unificado:first-child{margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
 .rol-cliente .buscador-tienda-voz-wrap{grid-template-columns:minmax(0,1fr) 76px!important;margin:9px 8px 7px!important;min-height:50px!important}
 .rol-cliente .buscador-tienda-voz-wrap .btn-micro-tienda{width:76px!important;min-width:76px!important}
}

/* ===== CLIENTE: NAVEGACION COMPACTA FINAL =====
   Comprar ya no se duplica en la cabecera: la propia pantalla /cliente es la compra.
   Mis pedidos queda como tecla compacta, no como franja de ancho completo. */
.rol-cliente .nav-cliente .nav-pedidos{
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:10px 14px!important;
  font-size:14px!important;
  line-height:1.15!important;
  justify-self:start!important;
}
@media(max-width:700px){
  .rol-cliente .nav-cliente .nav-pedidos{
    grid-column:1!important;
    grid-row:3!important;
    width:100%!important;
    min-height:44px!important;
    padding:9px 8px!important;
    font-size:14px!important;
    font-weight:850!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}




/* AHORRO MAS VERDE GLOBAL 20260924 */
button,.btn,.boton,.button,input[type="button"],input[type="submit"],a.btn,a.boton,
.accion,.nav-btn,.tab-btn,.role-btn,.menu-btn,.media-btn,.camera-btn,.galeria-btn,
.micro-btn,.mic-btn{
background:linear-gradient(180deg,#39ef64 0%,#0daf38 48%,#067527 100%)!important;
color:#fff!important;border:1px solid #73ff94!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(0,70,20,.38),0 4px 8px rgba(0,55,18,.30)!important;
text-shadow:0 1px 1px rgba(0,0,0,.45)!important}
button:active,.btn:active,.boton:active,.button:active,input[type="button"]:active,input[type="submit"]:active,
a.btn:active,a.boton:active,.accion:active,.nav-btn:active,.tab-btn:active,.role-btn:active,.menu-btn:active,
.media-btn:active,.camera-btn:active,.galeria-btn:active,.micro-btn:active,.mic-btn:active{
transform:translateY(2px)!important;
box-shadow:inset 0 4px 9px rgba(0,65,18,.55),0 1px 2px rgba(0,0,0,.22)!important}



/* AHORRO MAS CONTRASTE PEDIDOS Y VOZ 20260924 */
.resumen-voz-acumulado{
 background:#f8fafc!important;color:#20332a!important;border:2px solid #d7eee0!important;
 border-radius:18px!important;padding:14px!important;box-shadow:0 5px 14px rgba(0,55,20,.22)!important}
.resumen-voz-titulo{color:#173f2a!important;font-weight:900!important;margin-bottom:10px!important}
.resumen-voz-fila{
 display:grid!important;grid-template-columns:auto 46px 1fr!important;align-items:center!important;
 gap:10px!important;background:#fff!important;color:#20332a!important;border:1px solid #d8e5dc!important;
 border-radius:13px!important;padding:10px!important;margin:8px 0!important}
.resumen-voz-cantidad{display:flex!important;align-items:center!important;gap:9px!important;white-space:nowrap!important}
.aroban-cantidad-btn{
 width:46px!important;height:46px!important;min-width:46px!important;padding:0!important;border-radius:12px!important;
 font-size:26px!important;line-height:46px!important;text-align:center!important}
.aroban-cantidad-num{display:inline-block!important;min-width:28px!important;text-align:center!important;font-size:22px!important;color:#17251d!important}
.resumen-voz-quitar{width:46px!important;height:46px!important;min-width:46px!important;padding:0!important}
.resumen-voz-info,.resumen-voz-info *{color:#20332a!important}
.resumen-voz-ayuda{color:#365247!important;line-height:1.35!important;margin:10px 0!important}
.aroban-cantidad-continuar{display:block!important;width:100%!important;margin-top:10px!important}



/* AHORRO MAS VOZ FILA MOVIL 20260924 */
.resumen-voz-fila{
 display:grid!important;
 grid-template-columns:1fr auto!important;
 grid-template-areas:"info info" "cantidad quitar"!important;
 gap:10px 8px!important;
 align-items:center!important;
 width:100%!important;max-width:100%!important;box-sizing:border-box!important;
 overflow:hidden!important;
}
.resumen-voz-info{
 grid-area:info!important;min-width:0!important;width:100%!important;
 overflow-wrap:anywhere!important;word-break:normal!important;
 color:#20332a!important;font-size:18px!important;line-height:1.25!important;
}
.resumen-voz-cantidad{
 grid-area:cantidad!important;display:grid!important;
 grid-template-columns:48px 34px 48px!important;gap:8px!important;
 align-items:center!important;justify-content:start!important;min-width:0!important;
}
.resumen-voz-quitar{grid-area:quitar!important;justify-self:end!important}
.aroban-cantidad-btn,.resumen-voz-quitar{
 width:48px!important;height:48px!important;min-width:48px!important;
 max-width:48px!important;padding:0!important;border-radius:12px!important;
}
.aroban-cantidad-num{
 width:34px!important;min-width:34px!important;text-align:center!important;
 font-size:22px!important;color:#17251d!important;
}
@media(max-width:520px){
 .resumen-voz-acumulado{padding:12px!important}
 .resumen-voz-fila{padding:10px!important}
 .resumen-voz-info{font-size:17px!important}
}



/* AHORRO MAS VOZ TARJETA FINAL 20260924 */
.resumen-voz-fila{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 width:100%!important;max-width:100%!important;box-sizing:border-box!important;
 overflow:hidden!important;padding:12px!important;gap:10px!important}
.resumen-voz-info{
 order:1!important;display:block!important;position:static!important;float:none!important;
 width:100%!important;max-width:100%!important;min-width:0!important;
 margin:0!important;padding:0!important;box-sizing:border-box!important;
 overflow:hidden!important;white-space:normal!important}
.resumen-voz-producto{
 display:block!important;width:100%!important;max-width:100%!important;
 color:#173f2a!important;font-size:18px!important;font-weight:900!important;
 line-height:1.2!important;overflow-wrap:anywhere!important;white-space:normal!important}
.resumen-voz-tienda{
 display:block!important;width:100%!important;max-width:100%!important;
 color:#496157!important;font-size:14px!important;font-weight:700!important;
 margin-top:4px!important;overflow-wrap:anywhere!important;white-space:normal!important}
.resumen-voz-cantidad{
 order:2!important;display:grid!important;grid-template-columns:48px 34px 48px!important;
 gap:10px!important;align-items:center!important;justify-content:start!important;
 width:auto!important;max-width:100%!important;margin:0!important}
.resumen-voz-quitar{
 order:3!important;position:absolute!important;right:12px!important;bottom:12px!important;
 width:48px!important;height:48px!important;min-width:48px!important}
.resumen-voz-fila{position:relative!important;padding-bottom:70px!important}

/* botones multimedia: mismos verdes metalicos que Comprar */
.acciones-media-cabecera{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;gap:8px!important;align-items:stretch!important;width:100%!important}
/* OFERTA CATALOGO VISIBLE 20260924 */
.precio-oferta-wrap{display:block!important;margin:5px 0 7px!important}
.precio-oferta-wrap .oferta-etiqueta{font-size:15px!important;font-weight:900!important;color:#b64b00!important;margin-bottom:3px!important}
.precio-oferta-wrap .precio-anterior-producto{display:block!important;color:#626b66!important;font-size:15px!important;font-weight:800!important}
.precio-oferta-wrap .precio-anterior-producto span{text-decoration:line-through!important;text-decoration-thickness:2px!important;text-decoration-color:#c62828!important}
.precio-oferta-wrap .precio-producto-principal{display:block!important;color:#0867b2!important;font-size:31px!important;font-weight:1000!important;line-height:1.05!important}
.precio-oferta-wrap .ahorro-producto{display:block!important;color:#08772d!important;font-size:15px!important;font-weight:900!important;margin-top:4px!important}



/* OFERTA AHORA LABEL 20260924 */
.precio-oferta-wrap .ahora-oferta{font-size:15px!important;font-weight:900!important;color:#245a3a!important;vertical-align:middle!important}



/* OFERTA INTEGRIDAD RAIZ 20260924 */
.oferta-destacada .precio-anterior-producto{display:block!important}
.oferta-destacada .ahorro-producto{display:block!important}



/* PAPELERA ROJA EN BOTON VERDE 20260924 */
.resumen-voz-quitar .icono-papelera-rojo{
 color:#e00000!important;
 font-size:24px!important;
 line-height:1!important;
 text-shadow:0 1px 1px rgba(255,255,255,.30)!important;
}



/* TODAS LAS PAPELERAS ROJAS - SOLO COLOR */
.icono-papelera-rojo{
 color:#e00000!important;
 -webkit-text-fill-color:#e00000!important;
}



/* PAPELERA SVG ROJA REAL 20260924 */
svg.icono-papelera-rojo{
 width:1em!important;
 height:1em!important;
 display:inline-block!important;
 vertical-align:-0.12em!important;
 color:#e00000!important;
 fill:#e00000!important;
}



/* FACHADA VERDE UNIFORME CLIENTE 20260924 */
/* Mis pedidos / Mi perfil: misma posición, centrados y sin fondo gris */
.rol-cliente .acciones-cliente,
.rol-cliente .cliente-acciones,
.rol-cliente .acciones-principales,
.rol-cliente .barra-acciones-cliente,
.rol-cliente .media-cabecera{
 background:transparent!important;
 background-color:transparent!important;
 border-color:transparent!important;
}
.rol-cliente .acciones-cliente,
.rol-cliente .cliente-acciones,
.rol-cliente .acciones-principales,
.rol-cliente .barra-acciones-cliente{
 justify-content:center!important;
 margin-left:auto!important;
 margin-right:auto!important;
}

/* Contenedor exterior del micrófono principal: quitar negro/azul y continuar la fachada verde */
.rol-cliente .panel-microfono-principal,
.rol-cliente .microfono-principal-panel,
.rol-cliente .aroban-voz-panel,
.rol-cliente .panel-aroban-voz,
.rol-cliente .micro-panel{
 background:linear-gradient(135deg,#087d27 0%,#19bf3d 48%,#07822a 100%)!important;
 background-color:#0a922e!important;
 border-color:rgba(0,90,30,.45)!important;
}


/* ===== AJUSTE COHERENTE FINAL 20-09-2026: CLIENTE + ADMIN ===== */
.rol-cliente .nav-cliente{position:relative!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:min(520px,100%)!important;overflow:visible!important;padding-top:8px!important}
.rol-cliente .nav-cliente .nav-pedidos,.rol-cliente .nav-cliente .nav-perfil{grid-column:auto!important;grid-row:auto!important;min-height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:11px 12px!important;font-size:16px!important}
.rol-cliente .nav-cliente .nav-salir{position:absolute!important;right:0!important;top:-31px!important;z-index:30!important;width:auto!important;min-height:30px!important;padding:5px 10px!important;font-size:12px!important;line-height:18px!important;opacity:.78!important;transform:none!important;overflow:visible!important}
.rol-cliente .nav-cliente .nav-salir:hover{opacity:1!important;transform:none!important}.rol-cliente .nav-cliente .nav-salir:active{transform:translateY(1px)!important}
.rol-cliente .perfil-opciones-internas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:4px 0 18px;padding:10px;border-radius:15px;background:linear-gradient(145deg,#75838e,#66737d);border:1px solid #72838f;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 13px rgba(0,0,0,.18)}
.rol-cliente .perfil-opciones-internas .btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;background:linear-gradient(180deg,#87959f,#74818b 48%,#313a42 52%,#4b5862)!important;border:1px solid #8da0ad!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 3px 0 #222c33,0 6px 10px rgba(0,0,0,.20)!important}
@media(max-width:520px){.rol-cliente .nav-cliente{grid-template-columns:1fr 1fr!important;padding-top:10px!important}.rol-cliente .nav-cliente .nav-pedidos,.rol-cliente .nav-cliente .nav-perfil{font-size:15px!important;min-height:55px!important}.rol-cliente .nav-cliente .nav-salir{top:-29px!important;right:2px!important}.rol-cliente .perfil-opciones-internas{grid-template-columns:1fr!important}.rol-cliente .perfil-opciones-internas .btn{min-height:46px!important}}
.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;padding:9px!important;align-items:stretch!important;overflow:visible!important}
.rol-cliente .panel-medios-compacto .accion-pedido-cliente,.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child{grid-column:auto!important;min-width:0!important;min-height:112px!important;padding:7px 5px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;overflow:visible!important}
.rol-cliente .panel-medios-compacto .boton-accion-redonda,.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-redonda{width:100%!important;height:62px!important;min-height:62px!important;margin:0!important;border-radius:15px!important;flex:0 0 62px!important}
.rol-cliente .panel-medios-compacto .boton-accion-icono,.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-icono{font-size:31px!important;line-height:1!important}
.rol-cliente .panel-medios-compacto .boton-accion-etiqueta,.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-etiqueta{font-size:12px!important;line-height:1.12!important;margin:7px 0 0!important;min-height:29px!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;text-align:center!important;white-space:normal!important;overflow:visible!important}
@media(max-width:380px){.rol-cliente .panel-medios-compacto .acciones-pedido-cliente{gap:6px!important;padding:7px!important}.rol-cliente .panel-medios-compacto .accion-pedido-cliente,.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child{padding:6px 3px!important;min-height:108px!important}.rol-cliente .panel-medios-compacto .boton-accion-etiqueta,.rol-cliente .panel-medios-compacto .accion-pedido-cliente:first-child .boton-accion-etiqueta{font-size:11px!important}}
.admin-menu-metal{padding:10px!important;border-radius:16px!important;background:linear-gradient(145deg,#75838e,#66737d)!important;border:1px solid #718390!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 16px rgba(10,25,35,.18)!important}
.admin-menu-metal .btn,.admin-menu-metal .btn.light,.admin-menu-metal .btn.orange,.admin-menu-metal .btn.purple,.admin-menu-metal .btn.gray,.admin-menu-metal .btn.red{background:var(--am-metal-verde)!important;color:#fff!important;border:1px solid #075f16!important;border-top-color:#8cf398!important;border-bottom-color:#03480d!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important;border-radius:10px!important}
.admin-menu-metal .btn:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}.admin-menu-metal .btn:active{transform:translateY(2px)!important;box-shadow:inset 0 4px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.18)!important}
.admin-dashboard-metal .role{background:linear-gradient(145deg,#7c8992 0%,#6e7b85 35%,#68757f 58%,#77848d 100%)!important;border:1px solid #72838f!important;border-top-color:#aab9c3!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(10,25,35,.18)!important}
.admin-dashboard-metal .role h3,.admin-dashboard-metal .role p{color:#fff!important}.admin-dashboard-metal .role .btn,.admin-dashboard-metal .role .btn.orange,.admin-dashboard-metal .role .btn.purple{background:var(--am-metal-verde)!important;color:#fff!important;border:1px solid #075f16!important;border-top-color:#8cf398!important;border-bottom-color:#03480d!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important}

/* ===== CLIENTE: CABECERA COMPACTA SIN ESPACIO DESPERDICIADO =====
   La navegacion principal tiene solo dos acciones. Ambas comparten SIEMPRE
   la misma fila y el mismo ancho, también en teléfono. Estas reglas van al
   final del CSS para neutralizar la antigua jerarquía móvil que hacía que
   Mis pedidos ocupara una fila completa. */
.rol-cliente .nav-cliente{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  gap:9px!important;
  padding-top:19px!important;
  align-items:stretch!important;
}
.rol-cliente .nav-cliente .nav-pedidos,
.rol-cliente .nav-cliente .nav-perfil{
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  min-height:54px!important;
  margin:0!important;
  padding:10px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1.12!important;
}
.rol-cliente .nav-cliente .nav-pedidos{grid-column:1!important;order:0!important}
.rol-cliente .nav-cliente .nav-perfil{grid-column:2!important;order:0!important}
.rol-cliente .nav-cliente .nav-salir{
  position:absolute!important;
  right:1px!important;
  top:-8px!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:4px 8px!important;
  font-size:10px!important;
  line-height:1.1!important;
  z-index:5!important;
}
/* Perfil: las tres opciones secundarias aprovechan una sola fila cuando caben. */
.rol-cliente .perfil-cliente-panel{max-width:760px!important}.rol-cliente .titulo-perfil-cliente{color:#0878c9!important;-webkit-text-fill-color:#0878c9!important;text-shadow:none!important}
.rol-cliente .perfil-opciones-internas{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin:4px 0 16px!important;
}
.rol-cliente .perfil-opciones-internas .btn{
  width:100%!important;margin:0!important;min-width:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:46px!important;padding:8px 6px!important;text-align:center!important;
}
@media(max-width:700px){
  .rol-cliente .nav-cliente{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;padding-top:18px!important;
  }
  .rol-cliente .nav-cliente .nav-pedidos,
  .rol-cliente .nav-cliente .nav-perfil{
    grid-row:1!important;min-height:52px!important;font-size:15px!important;padding:8px 5px!important;
  }
  .rol-cliente .nav-cliente .nav-pedidos{grid-column:1!important}
  .rol-cliente .nav-cliente .nav-perfil{grid-column:2!important}
  .rol-cliente .nav-cliente .nav-salir{top:-7px!important;right:0!important}
  .rol-cliente .perfil-opciones-internas{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .rol-cliente .perfil-opciones-internas .btn{font-size:12px!important;padding:7px 3px!important;min-height:44px!important}
}
@media(max-width:390px){
  .rol-cliente .nav-cliente .nav-pedidos,
  .rol-cliente .nav-cliente .nav-perfil{font-size:14px!important}
  .rol-cliente .perfil-opciones-internas{grid-template-columns:1fr 1fr!important}
  .rol-cliente .perfil-opciones-internas .btn:last-child{grid-column:1/-1!important}
}


/* ===== CLIENTE: catálogo compacto — voz dentro del buscador + cámara/galería en cabecera ===== */
.rol-cliente .buscador-producto-voz-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 92px!important;gap:0!important;align-items:stretch!important;margin-top:10px!important;border:2px solid #8d9aa2!important;border-radius:18px!important;overflow:hidden!important;background:#fff!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.08),0 5px 14px rgba(10,35,48,.10)!important}
.rol-cliente .buscador-producto-voz-wrap #buscar_producto_cliente{width:100%!important;min-width:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:14px 13px!important;font-size:17px!important;background:#fff!important}
.rol-cliente .btn-micro-producto{border:0!important;border-left:2px solid rgba(10,75,105,.48)!important;border-radius:0!important;margin:0!important;padding:5px 7px!important;min-width:0!important;background:linear-gradient(180deg,#ef4040 0%,#cf1f27 58%,#8e1118 100%)!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;font-weight:950!important;text-shadow:0 1px 2px #0009!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -4px 0 rgba(70,0,0,.28)!important;cursor:pointer!important}
.rol-cliente .btn-micro-producto span{font-size:27px!important;line-height:1!important}.rol-cliente .btn-micro-producto b{font-size:12px!important;line-height:1.05!important;margin-top:2px!important}
.rol-cliente .cabecera-catalogo-tienda{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important;margin:5px 0 13px!important;padding:12px!important;border:1px solid rgba(21,89,119,.20)!important;border-radius:18px!important;background:linear-gradient(145deg,#f8fbfc,#eef4f6)!important;box-shadow:0 5px 15px rgba(9,36,49,.08)!important}
.rol-cliente .identidad-catalogo-tienda{min-width:0!important}.rol-cliente .identidad-catalogo-tienda h2{margin:0 0 7px!important;font-size:clamp(20px,5.6vw,30px)!important;line-height:1.05!important}.rol-cliente .identidad-catalogo-tienda img{max-height:58px!important;max-width:105px!important;margin:3px 0 4px!important}
.rol-cliente .medios-tienda-integrados{min-width:88px!important;max-width:96px!important}.rol-cliente .acciones-media-cabecera{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;gap:7px!important}.rol-cliente .media-cabecera-btn{min-width:0!important;height:70px!important;padding:6px 4px!important;border:1px solid rgba(84,207,255,.72)!important;border-radius:15px!important;background:linear-gradient(180deg,#39ef64 0%,#0daf38 48%,#067527 100%)!important;color:#fff!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.17),inset 0 -4px 0 rgba(3,15,22,.34),0 0 0 2px rgba(25,171,235,.16),0 5px 10px rgba(5,31,44,.23)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.rol-cliente .media-cabecera-btn span{font-size:27px!important;line-height:1!important}.rol-cliente .media-cabecera-btn b{font-size:10.5px!important;line-height:1.05!important;margin-top:5px!important;white-space:nowrap!important}
.rol-cliente .boton-voz-integrado-oculto{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}.rol-cliente .estado-media-integrado{grid-column:1/-1!important;margin:5px 0 0!important;text-align:right!important;font-size:11px!important;line-height:1.2!important}.rol-cliente .miniaturas-media-tienda{text-align:right!important;margin-top:5px!important}
@media(max-width:420px){.rol-cliente .buscador-producto-voz-wrap{grid-template-columns:minmax(0,1fr) 78px!important}.rol-cliente .cabecera-catalogo-tienda{grid-template-columns:minmax(0,1fr) 88px!important;padding:10px!important;gap:8px!important}.rol-cliente .medios-tienda-integrados{min-width:88px!important;max-width:88px!important}.rol-cliente .media-cabecera-btn{height:58px!important}.rol-cliente .media-cabecera-btn span{font-size:24px!important}.rol-cliente .media-cabecera-btn b{font-size:9.5px!important}.rol-cliente .identidad-catalogo-tienda h2{font-size:21px!important}}


body.rol-repartidor .rep-cabina .rep-acciones-rapidas{display:none!important}
body.rol-repartidor .rep-toggle-disponibilidad{margin-top:12px!important}
body.rol-repartidor .rep-toggle-disponibilidad .btn{min-height:58px!important;width:100%!important;font-size:19px!important;font-weight:950!important}
body.rol-repartidor .nav-repartidor .nav-salir-repartidor{order:-1!important;min-height:30px!important;height:30px!important;padding:3px 8px!important;font-size:11px!important;opacity:.62!important;flex:0 0 auto!important;margin-right:auto!important}
body.rol-repartidor .nav-repartidor>a:not(.nav-salir-repartidor){min-height:50px!important;font-size:16px!important}

/* ===== AJUSTE FINAL CLIENTE: navegación y micrófono de compra ===== */
.rol-cliente .nav-cliente{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-auto-flow:column!important;grid-template-rows:54px!important;column-gap:8px!important;row-gap:0!important;width:100%!important;max-width:none!important;padding:14px 8px 10px!important;margin-top:8px!important;position:relative!important;overflow:visible!important}
.rol-cliente .nav-cliente>.nav-pedidos,.rol-cliente .nav-cliente>.nav-perfil{position:relative!important;float:none!important;display:flex!important;grid-row:1!important;width:100%!important;max-width:none!important;min-width:0!important;height:54px!important;min-height:54px!important;margin:0!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}
.rol-cliente .nav-cliente>.nav-pedidos{grid-column:1!important}.rol-cliente .nav-cliente>.nav-perfil{grid-column:2!important}
.rol-cliente .nav-cliente>.nav-salir{position:absolute!important;top:-15px!important;right:5px!important;z-index:60!important;padding:4px 9px!important;font-size:10px!important;line-height:15px!important;height:auto!important;min-height:0!important;opacity:.86!important}
.rol-cliente .btn-micro-producto{position:relative!important;overflow:hidden!important;isolation:isolate!important}
.rol-cliente .btn-micro-producto.micro-escuchando,.rol-cliente .btn-micro-producto.micro-analizando{animation:microCompraPulso .72s ease-in-out infinite alternate!important}
.rol-cliente .btn-micro-producto.micro-escuchando{background:linear-gradient(180deg,#ff4d4d,#cf1f27 58%,#861016)!important}
.rol-cliente .btn-micro-producto.micro-analizando{background:linear-gradient(180deg,#23a9e6,#147eb7 58%,#0b527a)!important}
.rol-cliente .btn-micro-producto.micro-error{filter:saturate(.72)!important}
.rol-cliente .btn-micro-producto.micro-escuchando:after,.rol-cliente .btn-micro-producto.micro-analizando:after{content:"";position:absolute;inset:-35%;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.48) 0,rgba(255,255,255,0) 62%);animation:microCompraLuz .72s linear infinite!important}
@keyframes microCompraPulso{from{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.22),0 0 7px rgba(32,193,255,.38)!important;filter:brightness(.92)}to{box-shadow:inset 0 2px 0 rgba(255,255,255,.42),0 0 0 2px rgba(89,216,255,.50),0 0 20px rgba(32,193,255,.88)!important;filter:brightness(1.18)}}
@keyframes microCompraLuz{0%{transform:translateX(-35%) scale(.8);opacity:.35}100%{transform:translateX(35%) scale(1.15);opacity:.9}}
@media(max-width:520px){.rol-cliente .nav-cliente{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:52px!important;padding:13px 6px 9px!important}.rol-cliente .nav-cliente>.nav-pedidos,.rol-cliente .nav-cliente>.nav-perfil{height:52px!important;min-height:52px!important;font-size:14px!important;padding:8px 4px!important}.rol-cliente .nav-cliente>.nav-salir{top:-16px!important;right:4px!important}.rol-cliente .buscador-producto-voz-wrap{grid-template-columns:minmax(0,1fr) 84px!important}.rol-cliente .buscador-producto-voz-wrap #buscar_producto_cliente{font-size:15px!important;padding:13px 10px!important}.rol-cliente .btn-micro-producto b{font-size:11px!important}}
.rol-cliente .datos-tienda-catalogo{display:flex!important;flex-direction:column!important;gap:5px!important;margin:5px 0 8px!important;font-size:13px!important;line-height:1.25!important;color:#34454f!important}.rol-cliente .dato-tienda-catalogo{display:block!important;overflow-wrap:anywhere!important}
@media(max-width:520px){.rol-cliente .nav-cliente>.nav-salir{top:-30px!important;right:4px!important}.rol-cliente .datos-tienda-catalogo{font-size:12px!important}}

/* === Cliente: cabecera de compra compacta, logo + voz/cámara/galería === */
.rol-cliente .cabecera-medios-nueva{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;align-items:center!important;padding:13px!important;background:linear-gradient(145deg,#12344a,#18445f 58%,#102d40)!important;border:1px solid #18384a!important;border-radius:22px!important;box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 -4px 0 rgba(0,183,255,.13),0 0 0 1px rgba(0,183,255,.16)!important}
.rol-cliente .identidad-logo-solo{display:none!important}.rol-cliente .identidad-logo-solo h2,.rol-cliente .datos-tienda-catalogo{display:none!important}.rol-cliente .logo-catalogo-solo{width:74px!important;height:74px!important;max-width:74px!important;max-height:74px!important;object-fit:contain!important;background:#fff!important;border-radius:50%!important;padding:7px!important;margin:0!important;box-shadow:0 0 0 2px rgba(64,205,255,.55),0 0 18px rgba(0,174,255,.26)!important}
.rol-cliente .medios-tienda-integrados{min-width:0!important}.rol-cliente .acciones-media-cabecera{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;gap:9px!important}.rol-cliente .media-cabecera-btn{position:relative!important;min-width:0!important;min-height:82px!important;aspect-ratio:1.18/1!important;border-radius:18px!important;border:1px solid #2dc8ff!important;background:linear-gradient(180deg,#39ef64 0%,#0daf38 48%,#067527 100%)!important;color:#fff!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -5px 0 rgba(0,0,0,.38),0 5px 0 #526f80,0 7px 15px rgba(0,0,0,.42),0 0 11px rgba(0,190,255,.38)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:7px 4px!important;overflow:hidden!important}.rol-cliente .media-cabecera-btn span{font-size:48px!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}.rol-cliente .media-cabecera-btn b{font-size:0!important;line-height:0!important;margin:0!important;width:1px!important;height:1px!important;overflow:hidden!important;position:absolute!important;clip:rect(0,0,0,0)!important}.rol-cliente .media-cabecera-btn:active{transform:translateY(4px)!important;box-shadow:inset 0 3px 7px rgba(0,0,0,.5),0 1px 0 #526f80,0 0 14px rgba(0,190,255,.5)!important}
@keyframes vozAtencionAzul{0%,100%{box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -5px 0 rgba(0,0,0,.38),0 5px 0 #526f80,0 0 8px rgba(0,190,255,.3)}50%{box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -5px 0 rgba(0,0,0,.38),0 5px 0 #526f80,0 0 11px #00bfff,0 0 25px rgba(0,191,255,.9)}}
@keyframes vozEstadoFuerte{0%,100%{filter:brightness(.82);transform:translateY(0) scale(1)}50%{filter:brightness(1.32);transform:translateY(-1px) scale(1.025)}}
.rol-cliente .media-voz-atencion{animation:vozAtencionAzul 1.65s ease-in-out infinite!important}.rol-cliente .media-voz-atencion.voz-escuchando,.rol-cliente .media-voz-atencion.grabando{animation:vozEstadoFuerte .62s ease-in-out infinite!important;border-color:#67e6ff!important}.rol-cliente .media-voz-atencion.voz-analizando{animation:vozEstadoFuerte .8s ease-in-out infinite!important;border-color:#2dc8ff!important}.rol-cliente .media-voz-atencion.voz-error{border-color:#ff6b6b!important}
.rol-cliente .aroban-resultado-voz{grid-column:1/-1!important;margin-top:10px!important;padding:10px 12px!important;border-radius:14px!important;background:linear-gradient(145deg,#12344a,#102735)!important;border:1px solid #2dc8ff!important;color:#eefaff!important;box-shadow:inset 0 -3px 0 rgba(0,190,255,.12),0 0 13px rgba(0,190,255,.18)!important}.rol-cliente .aroban-resultado-voz[hidden]{display:none!important}.rol-cliente .aroban-resultado-titulo{font-weight:950!important;color:#5edcff!important;margin-bottom:3px!important}.rol-cliente .aroban-resultado-voz p{margin:0!important;font-size:13px!important;line-height:1.3!important;color:#f5fbff!important}.rol-cliente .aroban-resultado-voz.escuchando,.rol-cliente .aroban-resultado-voz.analizando{animation:vozAtencionAzul 1s ease-in-out infinite!important}.rol-cliente .aroban-resultado-voz.exito{border-color:#42d88a!important}.rol-cliente .aroban-resultado-voz.error{border-color:#ff7b7b!important}
.rol-cliente .buscador-producto-solo{display:block!important}.rol-cliente .buscador-producto-solo #buscar_producto_cliente{width:100%!important;border-radius:18px!important;padding:15px 16px!important}
@media(max-width:520px){.rol-cliente .cabecera-medios-nueva{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:10px 8px!important;border-radius:18px!important}.rol-cliente .logo-catalogo-solo{width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important;padding:5px!important}.rol-cliente .acciones-media-cabecera{gap:6px!important}.rol-cliente .media-cabecera-btn{min-height:70px!important;border-radius:15px!important;padding:5px 2px!important}.rol-cliente .media-cabecera-btn span{font-size:38px!important}.rol-cliente .media-cabecera-btn b{font-size:0!important}}
/* Corrección definitiva: la regla antigua dejaba max-width:96px en el contenedor de medios. */
.rol-cliente .cabecera-medios-nueva .medios-tienda-integrados{width:100%!important;min-width:0!important;max-width:none!important}
.rol-cliente .cabecera-medios-nueva .acciones-media-cabecera{width:100%!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important}
.rol-cliente .cabecera-medios-nueva .media-cabecera-btn{width:min(200px,100%)!important;max-width:none!important;aspect-ratio:auto!important;height:82px!important;margin:0 auto!important}
@media(max-width:380px){.rol-cliente .cabecera-medios-nueva{grid-template-columns:minmax(0,1fr)!important}.rol-cliente .cabecera-medios-nueva .acciones-media-cabecera{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}.rol-cliente .cabecera-medios-nueva .media-cabecera-btn b{font-size:9px!important}}


/* ===== LIMPIEZA VISUAL GLOBAL AHORRO MAS — PUNTO CERO =====
   Capa final de contraste y coherencia. No altera lógica ni rutas. */
:root{
 --azul:#245f88;--azul-2:#2b7eae;--verde:#157347;--rojo:#b42318;--naranja:#a85b00;
 --fondo:#f3f8fb;--superficie:#ffffff;--superficie-2:#f8fbfd;--texto:#263944;
 --texto-2:#425b68;--borde:#b8c8d1;--foco:#1386bd;--sombra:0 5px 16px rgba(14,42,58,.10)
}
body{background:var(--fondo)!important;color:var(--texto)!important;line-height:1.45}
main{color:var(--texto)}
a{color:#0b6492}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:3px solid #38bdf8!important;outline-offset:2px!important}
.panel,.card,.role,.stat,.pedido-card,.table-wrap,.hero{background:var(--superficie)!important;color:var(--texto)!important;border-color:var(--borde)!important}
.panel h1,.panel h2,.panel h3,.card h3,.role h3,.stat b,.pedido-card-num,.hero h2{color:var(--azul)!important}
.hero p,.role p,.small,.footer,.puntos,.empty{color:var(--texto-2)!important}
label{color:#263f4c!important}
input,select,textarea{background:#fff!important;color:#263944!important;border-color:#9fb2bd!important;box-shadow:none}
input::placeholder,textarea::placeholder{color:#647985!important;opacity:1}
input:disabled,select:disabled,textarea:disabled{background:#e8eef2!important;color:#536a76!important}
.table th{background:#e4edf2!important;color:#173f5a!important;border-bottom:2px solid #9eb4c0!important}.table td{color:#213945!important}.table tr:hover{background:#f1f6f8!important}
.notice{background:#fff6d8!important;border-color:#d9b64a!important;color:#604600!important}.success{background:#e8f6ed!important;border-color:#6eb98a!important;color:#124b2d!important}.danger{background:#fdeceb!important;border-color:#d78b84!important;color:#7c2019!important}
.badge{background:#e8eef2!important;color:#294552!important;border:1px solid #c1cfd6}
.precio{color:#08783a!important}.estado.ok{color:#126b3b!important}.estado.off{color:#a92820!important}.total{color:#a92820!important}
.btn,.nav a{border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 5px rgba(13,43,59,.16)}
.btn{background:#2b7eae!important;color:#fff!important}.btn.green{background:#157347!important;color:#fff!important}.btn.red{background:#b42318!important;color:#fff!important}.btn.orange{background:#a85b00!important;color:#fff!important}.btn.purple{background:#6f3a85!important;color:#fff!important}.btn.gray{background:#536975!important;color:#fff!important}.btn.light{background:#edf3f6!important;color:#173f5a!important;border-color:#aebfc8!important}
.btn:hover,.nav a:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(56,189,248,.28),0 0 14px rgba(56,189,248,.24),0 3px 8px rgba(13,43,59,.18)}.btn:active,.nav a:active{transform:translateY(1px);box-shadow:inset 0 3px 6px rgba(0,0,0,.22)!important}
/* Luz azul controlada: presencia sin sacrificar contraste. */
header,.header-cliente,.cabecera-medios-nueva{box-shadow:0 8px 24px rgba(20,91,132,.22),0 0 0 1px rgba(72,196,244,.22),0 0 24px rgba(45,177,231,.18)!important}
.nav a,.btn{transition:filter .16s ease,transform .12s ease,box-shadow .16s ease}
.rol-admin .panel:focus-within,.rol-repartidor .panel:focus-within,.rol-cliente .panel:focus-within{box-shadow:0 0 0 2px rgba(56,189,248,.26),0 0 18px rgba(56,189,248,.16),var(--sombra)!important}
/* Administración: una sola lectura visual, sin tarjetas claras con texto blanco. */
.rol-admin,.rol-repartidor{color:var(--texto)!important}.rol-admin main,.rol-repartidor main{color:var(--texto)!important}
.rol-admin .panel,.rol-admin .stat,.rol-admin .card,.rol-admin .table-wrap,.rol-repartidor .panel,.rol-repartidor .stat,.rol-repartidor .card{background:#fff!important;color:#263944!important;border:1px solid #b8c8d1!important;box-shadow:var(--sombra)!important}
.rol-admin .panel p,.rol-admin .panel span,.rol-admin .stat span,.rol-admin .small,.rol-repartidor .panel p,.rol-repartidor .small{color:#425b68}
/* Cliente: conservar la identidad metálica, pero evitar texto lavado. */
.rol-cliente{color:#263944!important}.rol-cliente .panel,.rol-cliente .card{color:#263944!important}.rol-cliente .panel p,.rol-cliente .card p,.rol-cliente .small{color:#425b68}
.rol-cliente .header-cliente .sub{color:#eef8ff!important}.rol-cliente .ubicacion-cliente-chip{color:#314e5e!important;border-color:#b9ccd6!important}
/* Modal oscuro: todo texto auxiliar debe seguir siendo legible. */
.checkout-modal-metal,.checkout-voz-metal{color:#eef8fc!important}.checkout-modal-metal p,.checkout-modal-metal label,.checkout-modal-metal .small,.checkout-voz-metal p,.checkout-voz-metal label{color:#c9dbe4!important}.checkout-modal-metal input::placeholder,.checkout-modal-metal textarea::placeholder{color:#9eb5c1!important}
/* Evitar opacidades que vuelven ilegible contenido importante. */
.panel [style*="opacity:.5"],.panel [style*="opacity: .5"],.card [style*="opacity:.5"]{opacity:.78!important}
@media(max-width:700px){main{padding-left:14px!important;padding-right:14px!important}.panel{padding:15px!important}.table th,.table td{padding:9px!important}}


/* Entrada asistida Arobán: encontrar tienda por lo que el cliente necesita */
.rol-cliente .aroban-inicio-compra{margin:10px 12px 8px;padding:10px;border:1px solid rgba(54,205,255,.58);border-radius:18px;background:linear-gradient(180deg,#0d1b25,#071119);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(31,187,245,.16)}

.rol-cliente .estado-aroban-inicio{min-height:20px;padding:9px 4px 2px;text-align:center;color:#fff;font-weight:800;font-size:13px}.rol-cliente .resultados-aroban-tiendas{display:grid;gap:8px;margin-top:7px}.rol-cliente .aroban-resultado-titulo{color:#74ddff;font-weight:900;text-align:center}
.rol-cliente .aroban-opcion-tienda{width:100%;padding:11px 12px;border:1px solid #48cfff;border-radius:14px;background:#f8fdff;color:#102a38;text-align:left;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.16)}.rol-cliente .aroban-opcion-tienda b,.rol-cliente .aroban-opcion-tienda small,.rol-cliente .aroban-opcion-tienda span{display:block}.rol-cliente .aroban-opcion-tienda b{font-size:16px}.rol-cliente .aroban-opcion-tienda small{margin:3px 0;font-weight:800}.rol-cliente .aroban-opcion-tienda span{font-size:11px;color:#365b6d}
@media(max-width:600px){.rol-cliente .aroban-inicio-compra{margin-left:8px;margin-right:8px}}
\n/* CABINA DEL REPARTIDOR — controles grandes, ordenados y utilizables con una mano/guantes */
body.rol-repartidor .rep-cabina{padding:14px!important;margin-bottom:12px!important}
body.rol-repartidor .rep-cabina-top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.rol-repartidor .rep-cabina h2{margin:0 0 3px!important}
body.rol-repartidor .rep-nombre{font-size:19px!important}
body.rol-repartidor .rep-estado-trabajo{font-size:17px!important;font-weight:950!important;padding:10px 12px;border-radius:12px;background:#eef5f1!important;color:#153b25!important;border:2px solid #91b7a0!important}
body.rol-repartidor .rep-acciones-rapidas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 8px}
body.rol-repartidor .rep-acciones-rapidas .btn,body.rol-repartidor .rep-toggle-disponibilidad .btn{width:100%!important;box-sizing:border-box!important;min-height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:18px!important;font-weight:950!important}
body.rol-repartidor .rep-accion-principal{border-width:3px!important}
body.rol-repartidor .rep-seccion-prioritaria,body.rol-repartidor .rep-seccion-disponibles{scroll-margin-top:80px;margin:12px 0 16px}
body.rol-repartidor .rep-seccion-prioritaria>h2,body.rol-repartidor .rep-seccion-disponibles>h2{margin:0 0 8px!important;font-size:23px!important}
body.rol-repartidor .rep-ayuda-calle{margin:0 0 8px!important;padding:8px 10px;border-radius:10px;background:#173f2a!important;color:#fff!important;font-weight:800!important}
html body.rol-repartidor .lista-pedidos .pedido-card a.btn-grande.rep-nav.rep-nav{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;background:linear-gradient(#2d9cdb,#1b6fa8)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:2px solid #7cc4ee}
body.rol-repartidor .rep-mas{margin-top:12px}
body.rol-repartidor .rep-mas>summary{cursor:pointer;list-style:none;min-height:48px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#1b4d6b!important;-webkit-text-fill-color:#1b4d6b!important}
body.rol-repartidor .rep-mas>summary::-webkit-details-marker{display:none}
body.rol-repartidor .rep-rep-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
body.rol-repartidor .rep-rep-tabs .btn{margin:0!important;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px!important}
body.rol-repartidor .rep-total{background:#14532d!important;border-radius:14px;padding:14px;margin:10px 0 12px;text-align:center;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.rol-repartidor .panel .rep-total span,html body.rol-repartidor .panel .rep-total small{display:block;color:#d9f7e4!important;-webkit-text-fill-color:#d9f7e4!important;font-size:16px}
html body.rol-repartidor .panel .rep-total b{display:block;font-size:36px;line-height:1.2;color:#fff!important;-webkit-text-fill-color:#fff!important}
body.rol-repartidor .rep-ent{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f2f6f8!important;border-radius:12px;padding:12px;margin-bottom:8px}
body.rol-repartidor .rep-ent-izq{display:grid;gap:2px;min-width:0}
body.rol-repartidor .rep-ent-izq b,body.rol-repartidor .rep-ent-izq span{color:#101828!important;-webkit-text-fill-color:#101828!important;overflow-wrap:anywhere}
body.rol-repartidor .rep-ent-izq span{font-size:14px;opacity:.85}
body.rol-repartidor .rep-ent-der{font-size:20px;font-weight:900;color:#166534!important;-webkit-text-fill-color:#166534!important;white-space:nowrap}
body.rol-repartidor .rep-pantalla-btn{display:block;width:100%;box-sizing:border-box;margin:10px 0 0!important;min-height:48px;font-size:15px!important;text-align:center}
@keyframes puntoAlerta{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(1.35)}}
.punto-alerta{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;flex:none;animation:puntoAlerta 1s ease-in-out infinite}
.punto-alerta.rojo{background:#e11d1d;box-shadow:0 0 0 3px rgba(225,29,29,.3)}.punto-alerta.ambar{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.3)}
.alerta-servicio{display:flex;align-items:flex-start;margin:6px 0;padding:6px 8px;border-radius:10px;font-weight:800;font-size:14px;line-height:1.3}
.alerta-servicio.rojo{background:#fde8e8!important;color:#8a1010!important;-webkit-text-fill-color:#8a1010!important}.alerta-servicio.ambar{background:#fff4d6!important;color:#7a4a00!important;-webkit-text-fill-color:#7a4a00!important}
@media (prefers-reduced-motion:reduce){.punto-alerta{animation:none}}
body.rol-repartidor .rep-hoy{display:block;min-height:48px;line-height:32px;margin:8px 0 12px;padding:8px 12px;border-radius:12px;background:#14532d!important;border:1px solid #3ddc84;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:18px;text-decoration:none;text-align:center}
body.rol-repartidor .rep-hoy b{color:#fff!important;-webkit-text-fill-color:#fff!important}
body.rol-repartidor .rep-fondo-linea{padding:8px 12px!important;margin:8px 0!important;font-size:15px!important;line-height:1.3!important}
body.rol-repartidor .rep-gps-desplegable{padding:0!important;overflow:hidden;margin:10px 0 16px!important}
body.rol-repartidor .rep-gps-desplegable>summary{cursor:pointer;list-style:none;min-height:56px;display:flex;align-items:center;padding:0 14px;font-size:19px!important;font-weight:950!important;color:#10251a!important;background:#f3f7f5!important}
body.rol-repartidor .rep-gps-desplegable>summary::-webkit-details-marker{display:none}
body.rol-repartidor .rep-gps-desplegable>.rep-gps-panel{margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important}
body.rol-repartidor .pedido-card-acciones{display:grid!important;gap:8px!important;margin-top:10px!important}
body.rol-repartidor .pedido-card-acciones form,body.rol-repartidor .pedido-card-acciones .btn,body.rol-repartidor .pedido-card-acciones button{width:100%!important;box-sizing:border-box!important}
body.rol-repartidor .pedido-card-acciones button,body.rol-repartidor .pedido-card-acciones .btn{min-height:58px!important;font-size:18px!important;font-weight:950!important}
body.rol-repartidor .nav-repartidor{gap:5px!important}
body.rol-repartidor .nav-repartidor a{min-height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-weight:950!important}
@media(max-width:520px){body.rol-repartidor .rep-acciones-rapidas{grid-template-columns:1fr 1fr}body.rol-repartidor .rep-cabina-top{display:block}body.rol-repartidor .rep-estado-trabajo{margin-top:8px}body.rol-repartidor .nav-repartidor a{font-size:14px!important;padding:8px 6px!important}}



/* Repartidor: flujo de dos pasos pensado para uso en moto / guantes */
.rol-repartidor .rep-step-panel,.rol-repartidor .rep-entrega-rapida{background:linear-gradient(145deg,#343c42,#242b30)!important;color:#fff!important;border:2px solid #269ee8!important;border-radius:14px;padding:14px!important}.rol-repartidor .rep-step-panel h2,.rol-repartidor .rep-step-panel p,.rol-repartidor .rep-entrega-rapida h3,.rol-repartidor .rep-entrega-rapida p{color:#fff!important}.rep-step-kicker{font-weight:1000;color:#62c6ff;letter-spacing:.7px;margin-bottom:3px}.rep-pickup-store{background:#17232b;color:#fff;border:1px solid #45606f;border-radius:10px;padding:12px;margin:9px 0}.rep-pickup-store b,.rep-pickup-store div{color:#fff!important}.rep-pickup-store .btn{display:block;margin-top:8px;text-align:center;min-height:48px}.rol-repartidor .rep-action-primary{min-height:68px!important;font-size:20px!important;font-weight:1000!important;display:flex!important;align-items:center;justify-content:center}.rol-repartidor .rep-entrega-rapida{margin:12px 0}.rol-repartidor .rep-entrega-rapida .codigo-grande input{min-height:62px;font-size:30px!important}
.rep-gps-panel{background:linear-gradient(145deg,#343c42,#242b30)!important;color:#fff!important;border:1px solid #269ee8!important;box-shadow:0 0 0 1px rgba(38,158,232,.25),0 8px 24px rgba(10,45,68,.24)!important}.rep-gps-panel h3,.rep-gps-panel p,.rep-gps-panel .small{color:#fff!important}.rep-gps-estado{display:inline-block;padding:7px 11px;border-radius:9px;background:#153f5a;border:1px solid #43b6ff;color:#fff;font-weight:1000;font-size:16px}.rep-dist-list{margin-top:12px}.rep-dist-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 11px;margin:6px 0;border-radius:9px;background:#18242c;border:1px solid #45606f;color:#fff}.rep-dist-row b,.rep-dist-row span{color:#fff!important}.rep-gps-panel .btn{margin:5px 6px 5px 0;font-weight:900}.rol-repartidor .danger,.rol-repartidor .notice{color:#fff!important}.rol-repartidor .danger *,.rol-repartidor .notice *{color:inherit!important}

/* ===== COMPRA POR VOZ: llamada visual permanente + estados inequívocos ===== */
.rol-cliente .media-voz-atencion{
  background:linear-gradient(180deg,#f04444 0%,#c81f28 55%,#7e0d14 100%)!important;
  border:2px solid #ff6767!important;
  color:#fff!important;
  font-weight:1000!important;
  animation:vozComprarLlamada 1.15s ease-in-out infinite!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.rol-cliente .media-voz-atencion b{font-size:13px!important;font-weight:1000!important;letter-spacing:.2px!important}
.rol-cliente .media-voz-atencion::after{
  content:""!important;position:absolute!important;left:12%!important;right:12%!important;bottom:-5px!important;height:4px!important;
  border-radius:999px!important;background:#24cfff!important;box-shadow:0 0 8px #24cfff,0 0 18px #24cfff,0 0 28px rgba(36,207,255,.9)!important;
  opacity:.45;animation:vozRayoInferior 1.15s ease-in-out infinite!important;pointer-events:none!important;
}
.rol-cliente .media-voz-atencion.voz-escuchando,.rol-cliente .media-voz-atencion.grabando{
  animation:vozComprarEscuchando .48s ease-in-out infinite alternate!important;border-color:#fff!important;
}
.rol-cliente .media-voz-atencion.voz-analizando{
  background:linear-gradient(180deg,#159dd9,#086da4 58%,#06446b)!important;
  animation:vozComprarAnalizando .62s ease-in-out infinite alternate!important;border-color:#74e5ff!important;
}
@keyframes vozComprarLlamada{0%,100%{filter:brightness(.86);box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -5px 0 rgba(0,0,0,.38),0 5px 0 #310408,0 0 8px rgba(255,46,62,.50),0 0 10px rgba(0,198,255,.28)!important}50%{filter:brightness(1.18);box-shadow:inset 0 3px 0 rgba(255,255,255,.34),inset 0 -5px 0 rgba(0,0,0,.34),0 5px 0 #310408,0 0 18px rgba(255,46,62,.95),0 0 26px rgba(0,198,255,.82)!important}}
@keyframes vozRayoInferior{0%,100%{opacity:.30;transform:scaleX(.62)}50%{opacity:1;transform:scaleX(1)}}
@keyframes vozComprarEscuchando{from{filter:brightness(.82) saturate(1.15);transform:translateY(0) scale(.985);box-shadow:0 0 10px #ff3146,0 0 14px #19cfff!important}to{filter:brightness(1.42) saturate(1.35);transform:translateY(-1px) scale(1.035);box-shadow:0 0 25px #ff3146,0 0 34px #19cfff!important}}
@keyframes vozComprarAnalizando{from{filter:brightness(.84);box-shadow:0 0 9px #25cfff!important}to{filter:brightness(1.38);box-shadow:0 0 30px #25cfff!important}}

/* ===== AROBÁN: GUIA PASO A PASO ===== */
@keyframes arobanPasoRespira{0%,100%{filter:brightness(1) drop-shadow(0 0 2px rgba(38,181,255,.45));opacity:.94}50%{filter:brightness(1.18) drop-shadow(0 0 11px rgba(72,213,255,.95)) drop-shadow(0 0 18px rgba(0,224,201,.62));opacity:1}}
@keyframes arobanPasoHalo{0%,100%{opacity:.28;transform:scale(.985)}50%{opacity:1;transform:scale(1.025)}}
.aroban-paso-siguiente{position:relative!important;z-index:4!important;outline:3px solid rgba(72,211,255,.90)!important;outline-offset:4px!important;animation:arobanPasoRespira 4.2s ease-in-out infinite!important}
/* Halo separado del box-shadow del botón. Muchos controles metálicos de Ahorro Más
   usan box-shadow !important; animar ese mismo atributo quedaba visualmente anulado. */
.aroban-paso-siguiente:not(input):not(textarea):not(select)::after{content:''!important;position:absolute!important;inset:-7px!important;border:2px solid rgba(82,225,255,.78)!important;border-radius:inherit!important;pointer-events:none!important;z-index:-1!important;box-shadow:0 0 10px rgba(52,194,255,.72),0 0 24px rgba(0,224,201,.48)!important;animation:arobanPasoHalo 4.2s ease-in-out infinite!important}
.checkout-direccion.aroban-paso-siguiente{border-color:#3bc9ff!important;background:#f4fcff!important}
.rol-cliente #buscar_tienda_cliente_carrusel.aroban-paso-siguiente{border-color:#36c8ff!important;outline-color:#55ddff!important}
@media(prefers-reduced-motion:reduce){.aroban-paso-siguiente{animation:arobanPasoRespira 6.5s ease-in-out infinite!important}.aroban-paso-siguiente:not(input):not(textarea):not(select)::after{animation:arobanPasoHalo 6.5s ease-in-out infinite!important}}
/* La conversación visual de voz respira más despacio: escucha -> procesa -> responde. */
.rol-cliente .panel-medios-compacto.aroban-voz-activa{animation:arobanPanelRobotFuerte 3.8s ease-in-out infinite!important}
.rol-cliente .panel-medios-compacto.aroban-voz-activa::before{animation:arobanBarridoRobot 7.2s linear infinite!important;opacity:.72!important}
.rol-cliente .panel-medios-compacto.aroban-voz-activa::after{animation:arobanDestelloRobot 5.4s ease-in-out infinite!important;opacity:.68!important}
.rol-cliente .panel-medios-compacto.aroban-voz-activa .mensaje-medios-principal,.rol-cliente .panel-medios-compacto.aroban-voz-activa [id^="vozEstado-"]{animation:arobanTextoRobot 3.8s ease-in-out infinite!important}

/* ===== CONTRASTE UNIFICADO DE ESTADOS =====
   Las cajas semánticas no usan fondos claros con texto forzado a blanco.
   Esto también neutraliza estilos inline antiguos que podían producir texto ilegible. */
.danger{
  background:linear-gradient(145deg,#3b2528,#241b1e)!important;
  color:#fff!important;
  border:2px solid #ff6b6b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,82,82,.12),0 7px 20px rgba(0,0,0,.22)!important;
}
.danger h1,.danger h2,.danger h3,.danger h4,.danger p,.danger b,.danger strong,.danger span,.danger li,.danger label,.danger .small{color:#fff!important}
.notice{
  background:linear-gradient(145deg,#383225,#25231d)!important;
  color:#fff!important;
  border:2px solid #d9a928!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 18px rgba(0,0,0,.18)!important;
}
.notice h1,.notice h2,.notice h3,.notice h4,.notice p,.notice b,.notice strong,.notice span,.notice li,.notice label,.notice .small{color:#fff!important}
.success{
  background:linear-gradient(145deg,#20372f,#182721)!important;
  color:#fff!important;
  border:2px solid #35bd7b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 18px rgba(0,0,0,.18)!important;
}
.success h1,.success h2,.success h3,.success h4,.success p,.success b,.success strong,.success span,.success li,.success label,.success .small{color:#fff!important}
/* Formularios dentro de avisos conservan campos claros y legibles. */
.danger input,.danger select,.danger textarea,.notice input,.notice select,.notice textarea,.success input,.success select,.success textarea{background:#fff!important;color:#111!important;border-color:#8aa0ad!important}
/* La corrección de entrega es una incidencia activa: contraste alto y lectura inmediata. */
.rol-repartidor .correccion-entrega-pendiente{background:linear-gradient(145deg,#30292a,#1e2023)!important;border:2px solid #ff7777!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,100,100,.16),0 0 18px rgba(255,92,92,.18),0 8px 24px rgba(0,0,0,.28)!important}
.rol-repartidor .correccion-entrega-pendiente h3{color:#ffb3b3!important}.rol-repartidor .correccion-entrega-pendiente p{color:#fff!important}

/* Arobán: presencia universal por rol */
.aroban-fab{position:fixed;right:18px;bottom:18px;z-index:9000;border:1px solid #48bfff;border-radius:999px;min-width:92px;height:58px;padding:0 16px;background:linear-gradient(145deg,#26323a,#10161a);color:#fff;font-weight:950;font-size:21px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(50,190,255,.20),0 0 18px rgba(40,180,255,.42),0 7px 0 #0b4f72,0 12px 22px rgba(0,0,0,.35);cursor:pointer}.aroban-fab span{font-size:13px;margin-left:5px}.aroban-chat{position:fixed;right:16px;bottom:88px;z-index:9001;width:min(390px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));background:#151b1f;border:1px solid #4cc1ff;border-radius:18px;overflow:hidden;box-shadow:0 0 28px rgba(35,178,247,.34),0 22px 50px rgba(0,0,0,.48);color:#fff}.aroban-chat[hidden]{display:none!important}.aroban-chat-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;background:linear-gradient(135deg,#26343e,#112431);border-bottom:1px solid #298fc8}.aroban-chat-head b{color:#fff;font-size:18px}.aroban-chat-head small{display:block;color:#a9dfff;margin-top:2px}.aroban-chat-head button{border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}.aroban-mensajes{height:calc(100% - 154px);overflow:auto;padding:12px;background:linear-gradient(145deg,#20272c,#101416)}.aroban-msg{max-width:86%;padding:10px 12px;border-radius:13px;margin:8px 0;line-height:1.38;white-space:pre-wrap}.aroban-bot{background:#203a4b;border:1px solid #2f9ed7;color:#fff}.aroban-yo{margin-left:auto;background:#3d464d;border:1px solid #697983;color:#fff}.aroban-estado{height:22px;padding:2px 12px;color:#79d1ff;font-size:12px}.aroban-compose{display:grid;grid-template-columns:1fr 48px 70px;gap:7px;padding:9px;background:#222b31;border-top:1px solid #3a505e}.aroban-compose textarea{resize:none;border-radius:10px;border:1px solid #657986;background:#fff;color:#111;padding:9px;font:inherit}.aroban-mic,.aroban-send{border-radius:10px;border:1px solid #4dbfff;color:#fff;font-weight:900;cursor:pointer}.aroban-mic{background:linear-gradient(#df4141,#a71818);font-size:22px;border-color:#ff8585}.aroban-send{background:linear-gradient(#258fd0,#12689a);font-size:12px}@media(max-width:600px){.aroban-fab{right:12px;bottom:12px;height:54px}.aroban-chat{right:8px;bottom:76px;width:calc(100vw - 16px);height:min(560px,calc(100vh - 92px))}}

.barra-avance{position:relative;height:14px;margin:8px 0;border-radius:8px;background:#e3e9ef;overflow:hidden}
.barra-avance-lleno{height:100%;border-radius:8px;background:linear-gradient(90deg,#36a56b,#2f8f5a);transition:width .6s ease}
.barra-avance.vivo .barra-avance-lleno{animation:avancePulso 1.6s ease-in-out infinite}
.barra-avance-pct{position:absolute;right:8px;top:0;line-height:14px;font-size:11px;font-weight:800;color:#12301f;mix-blend-mode:normal}
@keyframes avancePulso{0%,100%{opacity:1}50%{opacity:.55}}
#modal-valoracion{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
#modal-valoracion .caja{background:#fff;color:#1c2b36;border-radius:16px;padding:18px 16px;width:100%;max-width:380px;box-shadow:0 10px 30px #0006;text-align:center}
#modal-valoracion h3{margin:0 0 8px;font-size:20px}
.estrellas button,.estrella-valorar{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;text-shadow:none!important;min-height:0!important;min-width:0!important;width:auto!important;cursor:pointer;color:#c5ccd3!important;-webkit-text-fill-color:#c5ccd3!important;padding:0 3px!important}
#modal-valoracion .estrellas button{font-size:38px!important}
.estrella-valorar{font-size:28px!important}
.estrellas button.on.c1,.estrella-valorar.on.c1{color:#e74c3c!important;-webkit-text-fill-color:#e74c3c!important}
.estrellas button.on.c2,.estrella-valorar.on.c2{color:#f07d2e!important;-webkit-text-fill-color:#f07d2e!important}
.estrellas button.on.c3,.estrella-valorar.on.c3{color:#f2b01e!important;-webkit-text-fill-color:#f2b01e!important}
.estrellas button.on.c4,.estrella-valorar.on.c4{color:#8cc63f!important;-webkit-text-fill-color:#8cc63f!important}
.estrellas button.on.c5,.estrella-valorar.on.c5{color:#2fa84f!important;-webkit-text-fill-color:#2fa84f!important}
#modal-valoracion input[type=text]{width:100%;margin:8px 0;box-sizing:border-box}
#modal-valoracion .fila{display:flex;gap:8px;margin-top:6px}
#modal-valoracion .fila button{flex:1}

.rol-admin .table-wrap{background:linear-gradient(145deg,#111a20,#18242c 48%,#0d151a)!important;border:1px solid rgba(66,204,255,.72)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(44,188,247,.18),0 0 18px rgba(34,181,244,.30),0 10px 25px rgba(0,0,0,.26)!important}
.rol-admin .table{background:transparent!important}.rol-admin .table th{background:linear-gradient(180deg,#25343e,#16232b)!important;color:#f4fbff!important;border-bottom:1px solid #39bde9!important}.rol-admin .table td{background:rgba(246,250,252,.96);color:#152d3d;border-bottom:1px solid #b7cbd7}.rol-admin .table tr:hover td{background:#edf9ff!important}
.rol-admin .table tr.pedido-productos-cargados td{background:linear-gradient(180deg,#2eaa63 0%,#23884e 56%,#176b3b 100%)!important;color:#fff!important;border-top:2px solid #63d891!important;border-bottom:2px solid #145d35!important;text-shadow:0 1px 1px rgba(0,0,0,.28)!important}.rol-admin .table tr.pedido-productos-cargados td:first-child{border-left:8px solid #41c977!important;border-radius:14px 0 0 14px!important}.rol-admin .table tr.pedido-productos-cargados td:last-child{border-right:2px solid #145d35!important;border-radius:0 14px 14px 0!important}.rol-admin .table tr.pedido-productos-cargados td b,.rol-admin .table tr.pedido-productos-cargados td strong{color:#fff!important}.rol-admin .table tr.pedido-productos-cargados:hover td{background:linear-gradient(180deg,#36b86e 0%,#289456 56%,#1a7441 100%)!important;color:#fff!important}
.rol-empacador .panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#26343d,#17242c 55%,#202f38)!important;border:1px solid rgba(68,198,255,.72)!important;color:#f5fbff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(48,190,252,.18),0 0 15px rgba(34,181,244,.30),0 8px 20px rgba(0,0,0,.24)!important}.rol-empacador .panel h2,.rol-empacador .panel h3,.rol-empacador .panel h4{color:#fff!important}.rol-empacador .panel .small{color:#d7e8f2!important}

:root{
 --am-green:#139b24;--am-green-hi:#39d34a;--am-green-lo:#087619;--am-green-deep:#045c12;
 --am-steel:#aeb4b8;--am-steel-hi:#d4d8da;--am-steel-lo:#858d92;--am-steel-edge:#4d565c;
 --am-text:#f8fcf9;--am-ink:#101719;--am-muted:#e6eee8;
}
html,body{min-height:100%;background:#087619!important}
body,body.rol-cliente,body.rol-repartidor,body.rol-empacador,body.rol-admin{
 margin:0!important;color:var(--am-text)!important;
 background-image:linear-gradient(100deg,#087619 0%,#20b432 28%,#0b861d 52%,#35c947 72%,#087619 100%)!important;
 background-attachment:fixed!important
}
body>header,.header-cliente,.header-repartidor,.header-empacador,.header-admin{
 background-image:linear-gradient(180deg,#36cb47,#0b861d 54%,#076d17)!important;
 border-bottom:1px solid #064e10!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 5px 14px rgba(0,45,8,.28)!important
}
body>main,.rol-cliente main,.rol-repartidor main,.rol-empacador main,.rol-admin main{background:transparent!important;color:var(--am-text)!important}
.footer{background:#087619!important;color:#f2fff4!important;border-top:1px solid #065f14!important}

/* Superficie oficial: verde metal cepillado. */
.panel,.card,.box,.login-box,.form-box,.admin-dashboard-metal,.admin-menu-metal,.pedido-card,.pedido-detalle,.resumen,.confirmacion,.modal-content,.factura,
.rol-cliente .panel-tiendas-unificado,.rol-cliente .acciones-pedido-cliente,.rol-cliente .cabecera-medios-nueva,.rol-cliente .checkout-modal-metal,.rol-cliente .checkout-voz-metal,
.rol-repartidor .rep-step-panel,.rol-repartidor .rep-entrega-rapida,.rol-repartidor .rep-gps-panel,.rol-empacador .panel,.rol-admin .table-wrap{
 background-image:linear-gradient(100deg,#087619 0%,#29bd3a 26%,#0c8a1e 51%,#32c744 73%,#087619 100%)!important;
 background-color:#0b8b1e!important;border:1px solid #086b18!important;border-top-color:#49d658!important;border-bottom-color:#045a11!important;color:#fff!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -2px 0 rgba(0,63,12,.30),0 8px 18px rgba(0,50,10,.22)!important
}
.panel h1,.panel h2,.panel h3,.panel h4,.card h1,.card h2,.card h3,.box h1,.box h2,.box h3,.pedido-card h2,.pedido-card h3,.admin-dashboard-metal h1,.admin-dashboard-metal h2,.admin-dashboard-metal h3{color:#fff!important;text-shadow:0 1px 2px rgba(0,45,8,.52)!important}
.small,.muted,.sub,label{color:#eef8f0!important} strong,b{color:#fff!important}

/* Todas las teclas: verde metálico uniforme, con relieve y efecto hundido. */
.btn,button,.nav a,.admin-menu-metal .btn,.rol-cliente .nav-cliente a,.rol-cliente .tienda-cliente-cta,.rol-cliente .flecha-tiendas,.territorio-ver{
 box-sizing:border-box;background:var(--am-metal-verde)!important;color:#fff!important;
 border:1px solid #075f16!important;border-top-color:#8cf398!important;border-bottom-color:#03480d!important;border-radius:10px!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important;
 text-shadow:0 1px 2px rgba(0,38,7,.65)!important;transition:transform .10s ease,box-shadow .10s ease,filter .10s ease!important
}
.btn:hover,button:hover,.nav a:hover,.admin-menu-metal .btn:hover,.rol-cliente .nav-cliente a:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}
.btn:active,button:active,.nav a:active,.admin-menu-metal .btn:active,.rol-cliente .nav-cliente a:active,
.btn.am-activa,.nav a.am-activa,.admin-menu-metal .btn.am-activa,.rol-cliente .nav-cliente a.am-activa,.seleccionada.btn,.activa.btn{
 transform:translateY(4px)!important;filter:brightness(.88)!important;border-top-color:#075f16!important;border-bottom-color:#8cf398!important;
 box-shadow:inset 0 7px 12px rgba(0,48,9,.58),inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 #044b0f!important
}
.btn.green,.btn.orange,.btn.red,.btn.purple,.btn.gray,.btn.light,.admin-menu-metal .btn.green,.admin-menu-metal .btn.orange,.admin-menu-metal .btn.red,.admin-menu-metal .btn.purple,.admin-menu-metal .btn.gray,.admin-menu-metal .btn.light{background:var(--am-metal-verde)!important;color:#fff!important}

/* Micrófonos: tecla principal gris. Los estados funcionales siguen visibles. */
.rol-cliente .btn-micro-tienda,.rol-cliente .btn-micro-producto,.rol-cliente .media-voz-atencion,.rol-repartidor [id^="btnVozRep-"]{
 background:var(--am-metal-verde)!important;color:#fff!important;border-color:#075f16!important;text-shadow:0 1px 2px rgba(0,38,7,.65)!important
}
.rol-cliente .btn-micro-tienda.escuchando,.rol-cliente .btn-micro-producto.micro-escuchando,.rol-cliente .media-voz-atencion.grabando,.rol-repartidor [id^="btnVozRep-"].grabando{
 transform:translateY(3px)!important;border-color:#ff4b4b!important;box-shadow:inset 0 5px 9px rgba(45,45,45,.42),0 0 0 2px rgba(255,54,54,.52),0 0 14px rgba(255,35,35,.52)!important
}
.rol-cliente .btn-micro-producto.micro-analizando{border-color:#42bdf0!important;box-shadow:inset 0 4px 8px rgba(45,55,60,.35),0 0 0 2px rgba(52,183,235,.48)!important}

/* Campos blancos: descanso visual y contraste. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{background:#fafbfb!important;color:#203129!important;border:1px solid #68766d!important;box-shadow:inset 0 2px 4px rgba(25,55,32,.14)!important}
input::placeholder,textarea::placeholder{color:#6a7d70!important;opacity:1!important}input:focus,select:focus,textarea:focus{outline:3px solid rgba(43,185,62,.25)!important;border-color:#147c25!important}

/* Tablas/listados: verde metal; encabezado gris metal para lectura. */
table,.table{background:#087619!important;color:#fff!important;border-color:#42c653!important}.table th,table th{background:linear-gradient(180deg,#d0d4d6,#a9afb3 58%,#8d959a)!important;color:#101719!important;border-color:#626c72!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important}.table td,table td{background:linear-gradient(100deg,#087619,#159b27 45%,#087619)!important;color:#fff!important;border-color:#42b94f!important}.table tr:nth-child(even) td,table tr:nth-child(even) td{background:linear-gradient(100deg,#076b16,#108522 48%,#076b16)!important}.table tr:hover td,table tr:hover td{background:#1ca630!important}

/* Cliente/tiendas/checkout: solo color; no se altera grid, orden ni orientación. */
.rol-cliente .tarjeta-tienda-clic:not(.seleccionada),.rol-cliente .checkout-direccion-metal:not(.seleccionada){background:linear-gradient(100deg,#087619,#22ad34 48%,#087619)!important;color:#fff!important;border-color:#42c653!important}.rol-cliente .tarjeta-tienda-clic.seleccionada,.rol-cliente .checkout-direccion-metal.seleccionada{background:linear-gradient(100deg,#076b16,#139728 48%,#076b16)!important;border:2px solid #d5dadc!important;box-shadow:inset 0 5px 10px rgba(0,55,10,.38)!important;transform:translateY(3px)!important}
.rol-cliente .buscador-tienda-voz-wrap,.rol-cliente .buscador-producto-voz-wrap{background:#0b8b1e!important;border-color:#43c754!important}

@media(max-width:700px){body,body.rol-cliente,body.rol-repartidor,body.rol-empacador,body.rol-admin{background:#0b8b1e!important}.btn,button,.nav a{min-height:48px}}

/* LEGIBILIDAD Ahorro Más — contraste uniforme sin cambiar estructura ni funciones. */
.table tr:hover td,table tr:hover td{background:#075f15!important;color:#fff!important}
.table tr:hover td *,table tr:hover td *{color:#fff!important}
.rol-admin .table tr:hover td,.rol-repartidor .table tr:hover td{background:#075f15!important;color:#fff!important}
.rol-cliente .mis-pedidos-cliente .table tr:hover td{background:#075f15!important;color:#fff!important}

/* Texto sobre superficies verdes: blanco limpio y tamaños legibles. */
.rol-cliente .panel>p,.rol-cliente .panel>small,.rol-cliente .cabecera-mis-pedidos p,
.rol-repartidor .panel>p,.rol-admin .panel>p{color:#f4fff5!important;font-size:16px!important;line-height:1.45!important}
.rol-cliente .cabecera-mis-pedidos h2,.rol-cliente .panel>h2,.rol-repartidor .panel>h2,.rol-admin .panel>h2{color:#fff!important;line-height:1.2!important}
.rol-cliente .mis-pedidos-cliente .table td{font-size:17px!important;line-height:1.35!important}
.rol-admin .table td,.rol-repartidor .table td{font-size:16px!important;line-height:1.35!important}

/* Buscador: el texto explicativo no se pierde sobre el verde. */
.rol-cliente .buscador-contexto{color:#fff!important}.rol-cliente .buscador-contexto b{color:#fff!important;font-size:20px!important}.rol-cliente .buscador-contexto small{color:#eaffed!important;font-size:14px!important;line-height:1.35!important}

/* Resultados de voz: las tarjetas blancas conservan texto oscuro y claro. */
.rol-cliente .aroban-opcion-tienda,.rol-cliente .aroban-opcion-tienda *{color:#17272d!important;text-shadow:none!important}
.rol-cliente .aroban-opcion-tienda b{font-size:18px!important}.rol-cliente .aroban-opcion-tienda span{color:#36545d!important;font-size:14px!important}
.rol-cliente .aroban-opcion-tienda button{font-size:16px!important;color:#101719!important}

/* Enlaces y ayudas sobre verde con contraste suficiente. */
.rol-cliente .panel a:not(.btn){color:#eaffed!important;text-decoration:underline!important;text-decoration-thickness:2px!important}

@media(max-width:700px){
 .rol-cliente .panel>p,.rol-cliente .panel>small,.rol-cliente .cabecera-mis-pedidos p{font-size:17px!important}
 .rol-cliente .mis-pedidos-cliente .table td{font-size:18px!important}
 .rol-cliente .buscador-contexto b{font-size:21px!important}
 .rol-cliente .buscador-contexto small{font-size:15px!important}
}

/* ===== RONDA DE LEGIBILIDAD TOTAL + TIENDAS VERTICALES =====
   Presentación y orientación visual del selector de tiendas. No altera datos ni lógica comercial. */
/* Paneles por rol: elimina el antiguo panel blanco que hacía desaparecer títulos/labels claros. */
body.rol-admin .panel,body.rol-admin .stat,body.rol-admin .card,
body.rol-repartidor .panel,body.rol-repartidor .stat,body.rol-repartidor .card,
body.rol-empacador .panel,body.rol-empacador .stat,body.rol-empacador .card,
body.rol-cliente .panel{
 background-image:linear-gradient(100deg,#087619 0%,#29bd3a 27%,#0d8d20 52%,#31c543 74%,#087619 100%)!important;
 background-color:#0b8b1e!important;color:#fff!important;border:1px solid #086b18!important;border-top-color:#49d658!important;border-bottom-color:#045a11!important;
}
body.rol-admin .panel h1,body.rol-admin .panel h2,body.rol-admin .panel h3,body.rol-admin .panel h4,
body.rol-repartidor .panel h1,body.rol-repartidor .panel h2,body.rol-repartidor .panel h3,
body.rol-empacador .panel h1,body.rol-empacador .panel h2,body.rol-empacador .panel h3,
body.rol-cliente .panel h1,body.rol-cliente .panel h2,body.rol-cliente .panel h3{color:#fff!important;text-shadow:0 1px 2px rgba(0,45,8,.62)!important}
body.rol-admin .panel label,body.rol-admin .panel p,body.rol-admin .panel .small,body.rol-admin .panel .muted,
body.rol-repartidor .panel label,body.rol-repartidor .panel p,body.rol-repartidor .panel .small,
body.rol-empacador .panel label,body.rol-empacador .panel p,body.rol-empacador .panel .small,
body.rol-cliente .panel label,body.rol-cliente .panel p,body.rol-cliente .panel .small{color:#f5fff6!important;text-shadow:none!important;font-size:16px!important;line-height:1.42!important}
body.rol-admin .panel label,body.rol-repartidor .panel label,body.rol-empacador .panel label,body.rol-cliente .panel label{font-weight:850!important}
body.rol-admin .panel input,body.rol-admin .panel select,body.rol-admin .panel textarea,
body.rol-repartidor .panel input,body.rol-repartidor .panel select,body.rol-repartidor .panel textarea,
body.rol-empacador .panel input,body.rol-empacador .panel select,body.rol-empacador .panel textarea,
body.rol-cliente .panel input,body.rol-cliente .panel select,body.rol-cliente .panel textarea{color:#16251c!important;background:#fbfcfb!important;font-size:17px!important}

/* Tablas: ninguna fila pierde texto con hover, selección o alternancia. */
body.rol-admin .table td,body.rol-admin table td,body.rol-repartidor .table td,body.rol-repartidor table td,
body.rol-empacador .table td,body.rol-empacador table td,body.rol-cliente .table td,body.rol-cliente table td{color:#fff!important;font-size:16px!important;line-height:1.38!important}
body.rol-admin .table tr:hover td,body.rol-admin table tr:hover td,body.rol-repartidor .table tr:hover td,body.rol-repartidor table tr:hover td,
body.rol-empacador .table tr:hover td,body.rol-empacador table tr:hover td,body.rol-cliente .table tr:hover td,body.rol-cliente table tr:hover td{background:#075f15!important;color:#fff!important}
body.rol-admin .table tr:hover td *,body.rol-repartidor .table tr:hover td *,body.rol-empacador .table tr:hover td *,body.rol-cliente .table tr:hover td *{color:#fff!important}

/* Ayudas y encabezados globales más claros. */
body.rol-admin main>h1,body.rol-admin main>h2,body.rol-admin main>h3,body.rol-repartidor main>h1,body.rol-repartidor main>h2,body.rol-empacador main>h1,body.rol-empacador main>h2,body.rol-cliente main>h1,body.rol-cliente main>h2{color:#fff!important;text-shadow:0 1px 2px rgba(0,45,8,.58)!important}
body.rol-admin main>.small,body.rol-admin main>p,body.rol-repartidor main>.small,body.rol-repartidor main>p,body.rol-empacador main>.small,body.rol-empacador main>p,body.rol-cliente main>.small,body.rol-cliente main>p{color:#f5fff6!important}

/* Selector de tiendas del cliente: una sola columna y desplazamiento ARRIBA/ABAJO. */
body.rol-cliente .carrusel-tiendas-wrap{padding:8px 12px 18px!important}
body.rol-cliente #carrusel_tiendas_cliente,body.rol-cliente .carrusel-tiendas-cliente{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;
 overflow-x:hidden!important;overflow-y:auto!important;scroll-behavior:smooth!important;scroll-snap-type:y proximity!important;
 padding:8px 10px!important;width:100%!important;max-width:560px!important;margin:0 auto!important;
}
body.rol-cliente #carrusel_tiendas_cliente .tarjeta-tienda-clic,body.rol-cliente .carrusel-tiendas-cliente .tarjeta-tienda-clic{
 flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:none!important;scroll-snap-align:start!important;box-sizing:border-box!important;
}
/* Flechas verticales: arriba y abajo, centradas. */
body.rol-cliente .flecha-tiendas{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:58px!important;height:48px!important;line-height:42px!important}
body.rol-cliente .flecha-tiendas:hover{transform:translateX(-50%) translateY(-1px)!important}
body.rol-cliente .flecha-tiendas-izq{top:0!important;bottom:auto!important}
body.rol-cliente .flecha-tiendas-der{top:auto!important;bottom:0!important}

/* Logo de tienda: protagonista, grande y adaptable. */
body.rol-cliente .logo-tienda-cliente{width:clamp(118px,34vw,190px)!important;height:clamp(118px,34vw,190px)!important;border-radius:24px!important;margin:10px auto 14px!important}
body.rol-cliente .logo-tienda-cliente img{width:100%!important;height:100%!important;object-fit:contain!important;padding:8px!important}
body.rol-cliente .logo-tienda-cliente-fallback{font-size:64px!important}
body.rol-cliente .tienda-cliente-nombre{font-size:22px!important;line-height:1.18!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,45,8,.55)!important}
body.rol-cliente .tienda-cliente-distancia,body.rol-cliente .tienda-cliente-estado{font-size:16px!important}

@media(max-width:700px){
 body.rol-admin .panel label,body.rol-admin .panel p,body.rol-admin .panel .small,body.rol-repartidor .panel label,body.rol-repartidor .panel p,body.rol-empacador .panel label,body.rol-empacador .panel p,body.rol-cliente .panel label,body.rol-cliente .panel p{font-size:17px!important}
 body.rol-admin .table td,body.rol-repartidor .table td,body.rol-empacador .table td,body.rol-cliente .table td{font-size:17px!important}
 body.rol-cliente #carrusel_tiendas_cliente,body.rol-cliente .carrusel-tiendas-cliente{max-width:100%!important;padding:10px 8px!important}
 body.rol-cliente .logo-tienda-cliente{width:min(46vw,180px)!important;height:min(46vw,180px)!important}
 body.rol-cliente .tienda-cliente-nombre{font-size:23px!important}
}


/* Sensación física uniforme de tecla: relieve, recorrido corto y estado hundido. */
button,.btn,a.btn,.nav a,.nav-cliente a,.tab-tienda,input[type="button"],input[type="submit"],input[type="reset"],[role="button"]{
 transform-origin:center!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 transition:transform .075s ease,box-shadow .075s ease,filter .075s ease!important;
}
button:active,.btn:active,a.btn:active,.nav a:active,.nav-cliente a:active,.tab-tienda:active,
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active,[role="button"]:active,.am-presionando{
 transform:translateY(4px) scale(.995)!important;filter:brightness(.89)!important;
 box-shadow:inset 0 8px 13px rgba(0,45,8,.62),inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 #044b0f!important;
}
.am-activa,.tab-tienda.activo,[aria-pressed="true"],[data-am-toggle="true"].am-activa{
 transform:translateY(4px)!important;filter:brightness(.88)!important;
 box-shadow:inset 0 8px 13px rgba(0,45,8,.62),inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 #044b0f!important;
}
@media(prefers-reduced-motion:reduce){button,.btn,a.btn,.nav a,.nav-cliente a,.tab-tienda,[role="button"]{transition:none!important}}
/* El carrito de tienda conserva su tratamiento de icono, no de tecla. */
button.tienda-cliente-cta.tienda-carrito-icono.am-presionando{transform:scale(.94)!important;box-shadow:none!important;filter:none!important}
/* Controles de selección que no son <button>: misma sensación física sin alterar su lógica. */
.tipo-servicio-tecla.am-presionando span{transform:translateY(4px)!important;filter:brightness(.88)!important;box-shadow:inset 0 7px 12px rgba(0,48,9,.58),inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 #044b0f!important}
.tarjeta-tienda-clic.am-presionando:not(.seleccionada),.checkout-direccion.am-presionando:not(.seleccionada){transform:translateY(3px)!important;filter:brightness(.90)!important;box-shadow:inset 0 7px 12px rgba(0,48,9,.45),0 1px 0 rgba(4,75,16,.75)!important}

/* Catálogo: cada producto vive en una tarjeta blanca de alto contraste. */
.rol-cliente .catalogo .card{background:#fff!important;background-image:none!important;border:1px solid #d7dee1!important;color:#172126!important;box-shadow:0 5px 12px rgba(0,55,12,.20)!important;overflow:hidden!important}
.rol-cliente .catalogo .card .foto{background:#f7f8f9!important;color:#60727b!important;border-bottom:1px solid #e1e5e7!important}
.rol-cliente .catalogo .card .body{background:#fff!important;background-image:none!important;color:#172126!important}
.rol-cliente .catalogo .card h3,.rol-cliente .catalogo .card .body h3{color:#172126!important;text-shadow:none!important;font-size:19px!important;font-weight:950!important;line-height:1.18!important}
.rol-cliente .catalogo .precio,.rol-cliente .catalogo .precio-producto-principal{color:#12659a!important;text-shadow:none!important;font-size:31px!important;font-weight:950!important}
.rol-cliente .catalogo .estado{color:#26383f!important;text-shadow:none!important;font-size:14px!important}
.rol-cliente .catalogo .estado.ok{color:#18713b!important}.rol-cliente .catalogo .estado.off{color:#a32626!important}
.rol-cliente .catalogo .puntos{color:#475b65!important;text-shadow:none!important;font-size:13px!important;font-weight:800!important}
.rol-cliente .catalogo .ahorro-producto{background:#fff1e8!important;color:#9a3216!important;text-shadow:none!important}
.rol-cliente .catalogo .subtotal-producto{background:#eef6fb!important;color:#164f72!important;border-color:#c7dce9!important;text-shadow:none!important}
.rol-cliente .catalogo .en-carrito-producto{background:#edf9f2!important;color:#145f3c!important;text-shadow:none!important}
/* Cantidades dentro de producto: números oscuros y claros sobre blanco. */
.rol-cliente .catalogo .qty,.rol-cliente .catalogo .qty .num{color:#172126!important;text-shadow:none!important;font-weight:950!important}
/* Carrito: total azul, claramente separado del verde de fondo. */
.rol-cliente .cart .total{color:#075f9b!important;text-shadow:0 1px 0 rgba(255,255,255,.28)!important;font-size:28px!important;font-weight:950!important;letter-spacing:.2px!important}
.rol-cliente .cart .cart-item,.rol-cliente .cart .cart-item b,.rol-cliente .cart .cart-item span{color:#fff!important}
/* Botón del carrito de cada tienda: queda solo el icono, sin tecla gris grande. */
.rol-cliente .tienda-carrito-icono{width:58px!important;height:52px!important;min-width:58px!important;min-height:52px!important;margin:10px auto 0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;background-image:none!important;box-shadow:none!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important}
.rol-cliente .tienda-carrito-icono:hover,.rol-cliente .tienda-carrito-icono:active{background:rgba(255,255,255,.12)!important;box-shadow:none!important;transform:none!important}
.rol-cliente .tienda-carrito-glyph{font-size:36px!important;line-height:1!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.30))}
/* Micrófono principal: gris metálico real y legible; rojo al grabar, azul al analizar. */
.rol-cliente .media-voz-atencion,.rol-cliente .btn-micro-producto,.rol-cliente .btn-micro-tienda{background:linear-gradient(180deg,#e1e4e5 0%,#c2c7ca 42%,#929ba0 60%,#b4babd 100%)!important;color:#101719!important;border:1px solid #596268!important;border-top-color:#f4f5f5!important;border-bottom-color:#414a50!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.80),inset 0 -3px 0 rgba(55,64,69,.28),0 4px 0 #596268,0 7px 10px rgba(0,45,9,.24)!important;text-shadow:0 1px 0 #fff!important}
.rol-cliente .media-voz-atencion.grabando,.rol-cliente .btn-micro-producto.micro-escuchando,.rol-cliente .btn-micro-tienda.escuchando{border-color:#ff4545!important;box-shadow:inset 0 5px 9px rgba(45,45,45,.38),0 0 0 2px rgba(255,55,55,.58),0 0 16px rgba(255,35,35,.58)!important;transform:translateY(3px)!important}
.rol-cliente .btn-micro-producto.micro-analizando{border-color:#38aee3!important;box-shadow:inset 0 4px 8px rgba(45,55,60,.30),0 0 0 2px rgba(52,183,235,.52),0 0 13px rgba(52,183,235,.34)!important}
/* Buscador sustituye al encabezado de bienvenida eliminado. */
.rol-cliente .buscador-tienda-voz-wrap{margin-top:10px!important}
@media(max-width:520px){.rol-cliente .catalogo .card h3,.rol-cliente .catalogo .card .body h3{font-size:18px!important}.rol-cliente .catalogo .precio,.rol-cliente .catalogo .precio-producto-principal{font-size:29px!important}.rol-cliente .cart .total{font-size:27px!important}}

/* Barra superior del navegador/PWA integrada con la fachada. */
html{background:#087619!important}

/* Tres controles principales: verde metálico, relieve real y estado hundido. */
body.rol-cliente .nav-cliente .nav-pedidos,
body.rol-cliente .nav-cliente .nav-perfil,
body.rol-cliente .media-voz-atencion,
body.rol-cliente .btn-micro-producto,
body.rol-cliente .btn-micro-tienda{
 background:linear-gradient(180deg,#42dc54 0%,#18aa2d 38%,#087b1a 58%,#119626 100%)!important;
 color:#fff!important;border:1px solid #075f16!important;border-top-color:#78ed85!important;border-bottom-color:#034a0d!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -4px 0 rgba(0,61,12,.42),0 4px 0 #055a13,0 7px 12px rgba(0,42,8,.30)!important;
 text-shadow:0 2px 2px rgba(0,45,8,.55)!important;
}
body.rol-cliente .nav-cliente .nav-pedidos.am-activa,
body.rol-cliente .nav-cliente .nav-perfil.am-activa,
body.rol-cliente .media-voz-atencion:active,
body.rol-cliente .btn-micro-producto:active,
body.rol-cliente .btn-micro-tienda:active{
 transform:translateY(4px)!important;filter:brightness(.91)!important;
 box-shadow:inset 0 6px 11px rgba(0,52,10,.52),inset 0 1px 0 rgba(255,255,255,.15),0 1px 0 #044b0f!important;
}
@keyframes amMicroVerdePulso{0%,100%{filter:brightness(1);box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -4px 0 rgba(0,61,12,.42),0 4px 0 #055a13,0 0 4px rgba(70,255,100,.22)!important}50%{filter:brightness(1.14);box-shadow:inset 0 2px 0 rgba(255,255,255,.40),inset 0 -4px 0 rgba(0,61,12,.38),0 4px 0 #055a13,0 0 17px rgba(77,255,105,.72)!important}}
body.rol-cliente .media-voz-atencion,body.rol-cliente .btn-micro-producto{animation:amMicroVerdePulso 1.35s ease-in-out infinite!important}
/* Estados funcionales del micrófono siguen mandando visualmente. */
body.rol-cliente .media-voz-atencion.grabando,body.rol-cliente .media-voz-atencion.voz-escuchando,
body.rol-cliente .btn-micro-producto.micro-escuchando,body.rol-cliente .btn-micro-tienda.escuchando{
 animation:vozEstadoFuerte .62s ease-in-out infinite!important;border-color:#ff4848!important;
 box-shadow:inset 0 6px 11px rgba(70,0,0,.42),0 0 0 2px rgba(255,64,64,.60),0 0 18px rgba(255,38,38,.68)!important;transform:translateY(3px)!important;
}
body.rol-cliente .media-voz-atencion.voz-analizando,body.rol-cliente .btn-micro-producto.micro-analizando{
 animation:vozEstadoFuerte .8s ease-in-out infinite!important;border-color:#4ac5ff!important;box-shadow:inset 0 5px 9px rgba(0,55,82,.32),0 0 0 2px rgba(74,197,255,.55),0 0 17px rgba(74,197,255,.50)!important;
}

/* Tarjeta de TIENDA completamente blanca; la fachada verde queda alrededor. */
body.rol-cliente .tarjeta-tienda-clic{
 background:#fff!important;background-image:none!important;color:#172126!important;border:2px solid #d8e2dc!important;
 box-shadow:0 7px 16px rgba(0,55,12,.24)!important;
}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-nombre{color:#16251c!important;text-shadow:none!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-distancia{color:#263b30!important;text-shadow:none!important}
body.rol-cliente .tarjeta-tienda-clic .logo-tienda-cliente{background:#fff!important}

/* En cada tienda queda SOLO el glifo del carrito: sin tecla, placa ni fondo gris. */
body.rol-cliente .tienda-carrito-icono{
 width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;padding:5px!important;margin:8px auto 2px!important;
 border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;transform:none!important;
}
body.rol-cliente .tienda-carrito-icono:hover,body.rol-cliente .tienda-carrito-icono:active{background:transparent!important;box-shadow:none!important;transform:scale(1.08)!important}
body.rol-cliente .tienda-carrito-glyph{font-size:43px!important;line-height:1!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.24))}

/* Producto: TODA la tarjeta blanca, no solo la foto. */
body.rol-cliente .seccion-tienda-cliente .catalogo>.card,
body.rol-cliente .seccion-tienda-cliente .catalogo .card[data-nombre-producto]{
 background:#fff!important;background-image:none!important;color:#15221a!important;border:1px solid #d5dfd9!important;box-shadow:0 6px 14px rgba(0,54,11,.22)!important;
}
body.rol-cliente .seccion-tienda-cliente .catalogo .card .foto,
body.rol-cliente .seccion-tienda-cliente .catalogo .card .body{background:#fff!important;background-image:none!important;color:#15221a!important}
body.rol-cliente .seccion-tienda-cliente .catalogo .card h3{color:#142119!important;text-shadow:none!important}
body.rol-cliente .seccion-tienda-cliente .catalogo .precio,
body.rol-cliente .seccion-tienda-cliente .catalogo .precio-producto-principal{color:#075fbd!important;text-shadow:none!important;font-weight:1000!important}
body.rol-cliente .seccion-tienda-cliente .catalogo .estado{color:#176a34!important;text-shadow:none!important}
body.rol-cliente .seccion-tienda-cliente .catalogo .puntos{color:#3d5548!important;text-shadow:none!important}
body.rol-cliente .seccion-tienda-cliente .catalogo .qty,body.rol-cliente .seccion-tienda-cliente .catalogo .qty .num{color:#101719!important;text-shadow:none!important}
/* +/- grandes y táctiles. */
body.rol-cliente .catalogo .qty button,body.rol-cliente .catalogo .qty .btn,
body.rol-cliente .aroban-resultado-voz button[onclick*="Cantidad"],body.rol-cliente .aroban-resultado-voz .qty button{
 min-width:58px!important;min-height:58px!important;font-size:30px!important;font-weight:1000!important;padding:8px 14px!important;
}
body.rol-cliente .catalogo .qty .num,body.rol-cliente .aroban-resultado-voz .qty .num{font-size:25px!important;min-width:38px!important;text-align:center!important}

/* Total final del carrito azul fuerte y legible. */
body.rol-cliente .cart .total{color:#075fbd!important;text-shadow:none!important;font-size:30px!important;font-weight:1000!important}

/* Los filtros de categorías siguen existiendo internamente, pero no se muestran. */
body.rol-cliente #categorias_producto_cliente,body.rol-cliente .categorias-producto-cliente{display:none!important}

@media(max-width:560px){
 body.rol-cliente .tienda-carrito-glyph{font-size:40px!important}
 body.rol-cliente .catalogo .qty button,body.rol-cliente .catalogo .qty .btn{min-width:56px!important;min-height:56px!important;font-size:29px!important}
 body.rol-cliente .cart .total{font-size:29px!important}
}

/* Tiendas: tarjeta blanca real, incluyendo seleccionada. */
body.rol-cliente .tarjeta-tienda-clic,
body.rol-cliente .tarjeta-tienda-clic:not(.seleccionada),
body.rol-cliente .tarjeta-tienda-clic.seleccionada{
 background:#ffffff!important;background-image:none!important;color:#172126!important;
 border:2px solid #d7e2da!important;box-shadow:0 7px 16px rgba(0,55,12,.22)!important;
}
body.rol-cliente .tarjeta-tienda-clic.seleccionada{border-color:#15952a!important;box-shadow:inset 0 0 0 2px rgba(21,149,42,.12),0 7px 16px rgba(0,55,12,.22)!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-nombre{color:#14231a!important;text-shadow:none!important;font-weight:950!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-distancia{color:#33493b!important;text-shadow:none!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-estado.ok{color:#087b2b!important;text-shadow:none!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-estado.off{color:#b42318!important;text-shadow:none!important}
body.rol-cliente .tarjeta-tienda-clic{padding-left:5px!important;padding-right:5px!important}
body.rol-cliente .tarjeta-tienda-clic .logo-tienda-cliente{background:#fff!important;width:100%!important;height:190px!important;max-width:none!important;margin:0 0 8px!important;border-radius:16px 16px 12px 12px!important;overflow:hidden!important}
body.rol-cliente .tarjeta-tienda-clic .logo-tienda-cliente img{width:100%!important;height:100%!important;object-fit:contain!important;padding:4px!important}
/* La tecla de tienda desaparece visualmente: queda únicamente el icono funcional. */
body.rol-cliente button.tienda-cliente-cta.tienda-carrito-icono{
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:50px!important;height:48px!important;min-width:0!important;min-height:0!important;max-width:50px!important;
 padding:0!important;margin:7px auto 0!important;border:0!important;border-radius:0!important;
 background:transparent!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;
 color:#101719!important;transform:none!important;filter:none!important;
}
body.rol-cliente button.tienda-cliente-cta.tienda-carrito-icono:hover,
body.rol-cliente button.tienda-cliente-cta.tienda-carrito-icono:active{background:transparent!important;background-image:none!important;box-shadow:none!important;transform:scale(1.08)!important}
body.rol-cliente .tienda-carrito-glyph{font-size:40px!important;line-height:1!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
body.rol-cliente .tienda-carrito-cantidad{position:absolute!important;margin:-28px 0 0 30px!important;background:#087b1a!important;color:#fff!important;border-radius:999px!important;min-width:20px!important;padding:2px 5px!important;font-size:12px!important}

/* Catálogo: toda la tarjeta del producto blanca, sin depender del contenedor padre. */
body.rol-cliente .catalogo .card,
body.rol-cliente .catalogo article.card,
body.rol-cliente article.card[data-nombre-producto]{
 background:#fff!important;background-image:none!important;color:#15221a!important;border:1px solid #d5dfd9!important;
 box-shadow:0 6px 14px rgba(0,54,11,.20)!important;
}
body.rol-cliente .catalogo .card .foto,body.rol-cliente .catalogo .card .body,
body.rol-cliente article.card[data-nombre-producto] .foto,body.rol-cliente article.card[data-nombre-producto] .body{background:#fff!important;background-image:none!important;color:#15221a!important}
body.rol-cliente article.card[data-nombre-producto] h3{color:#142119!important;text-shadow:none!important;font-size:19px!important}
body.rol-cliente article.card[data-nombre-producto] .precio-producto-principal{color:#075fbd!important;text-shadow:none!important;font-size:30px!important;font-weight:950!important}
body.rol-cliente article.card[data-nombre-producto] .puntos{color:#405649!important;text-shadow:none!important}
body.rol-cliente article.card[data-nombre-producto] .small{color:#6b4a00!important;text-shadow:none!important}
body.rol-cliente article.card[data-nombre-producto] .qty .num{color:#101719!important;text-shadow:none!important;font-size:25px!important;font-weight:950!important}
body.rol-cliente article.card[data-nombre-producto] .qty button{min-width:58px!important;min-height:58px!important;width:58px!important;height:58px!important;font-size:31px!important;padding:0!important;border-radius:12px!important}
body.rol-cliente article.card[data-nombre-producto] .subtotal-producto{background:#eef6fb!important;color:#075fbd!important;border-color:#bfd8e8!important;text-shadow:none!important;font-size:15px!important}
body.rol-cliente article.card[data-nombre-producto] .subtotal-producto b{color:#075fbd!important;font-size:20px!important;text-shadow:none!important}
body.rol-cliente article.card[data-nombre-producto] .en-carrito-producto{background:#edf9f2!important;color:#145f3c!important;text-shadow:none!important}

/* Total general del carrito en azul. */
body.rol-cliente .cart .total,body.rol-cliente [class*="cart"] .total{color:#075fbd!important;text-shadow:none!important;font-size:30px!important;font-weight:950!important}

/* Micrófono + Mis pedidos + Mi perfil: verde metálico real. */
body.rol-cliente .nav-cliente .nav-pedidos,body.rol-cliente .nav-cliente .nav-perfil,
body.rol-cliente .btn-micro-producto,body.rol-cliente .btn-micro-tienda,body.rol-cliente .media-voz-atencion{
 background:linear-gradient(180deg,#48df5a 0%,#19ad2e 40%,#087a19 60%,#119727 100%)!important;background-image:linear-gradient(180deg,#48df5a 0%,#19ad2e 40%,#087a19 60%,#119727 100%)!important;
 color:#fff!important;border-color:#075f16!important;border-top-color:#78ed85!important;border-bottom-color:#034a0d!important;text-shadow:0 1px 2px rgba(0,45,8,.55)!important;
}
@keyframes amMicroIntermitenteReal{0%,100%{filter:brightness(.94)}50%{filter:brightness(1.22)}}
body.rol-cliente .btn-micro-producto,body.rol-cliente .media-voz-atencion{animation:amMicroIntermitenteReal 1.25s ease-in-out infinite!important}
/* Estados de voz siguen siendo funcionalmente distinguibles. */
body.rol-cliente .btn-micro-producto.micro-escuchando,body.rol-cliente .btn-micro-tienda.escuchando,body.rol-cliente .media-voz-atencion.grabando{border-color:#ff4b4b!important;box-shadow:inset 0 5px 9px rgba(55,0,0,.38),0 0 0 2px rgba(255,65,65,.60),0 0 16px rgba(255,35,35,.62)!important;transform:translateY(3px)!important}
body.rol-cliente .btn-micro-producto.micro-analizando{border-color:#45c3ff!important;box-shadow:inset 0 4px 8px rgba(0,55,82,.30),0 0 0 2px rgba(69,195,255,.56),0 0 15px rgba(69,195,255,.46)!important}

/* Categorías: ocultas solo visualmente. */
body.rol-cliente #categorias_producto_cliente,body.rol-cliente .categorias-producto-cliente{display:none!important}
/* ...salvo en una tienda con muchos productos (más de 25): ahí se ven, en filas (sin deslizar de lado). */
body.rol-cliente #categorias_producto_cliente.categorias-visibles{display:flex!important;flex-wrap:wrap;overflow-x:visible;margin-right:0}

/* Tecla metálica verde común: Cliente, Repartidor, Empacador y Administración. */
body.rol-cliente .btn, body.rol-repartidor .btn, body.rol-empacador .btn, body.rol-admin .btn,
body.rol-cliente button, body.rol-repartidor button, body.rol-empacador button, body.rol-admin button,
body.rol-cliente .nav a, body.rol-repartidor .nav a, body.rol-empacador .nav a, body.rol-admin .nav a,
body.rol-cliente .nav-cliente a,
body.rol-cliente input[type=submit], body.rol-repartidor input[type=submit], body.rol-empacador input[type=submit], body.rol-admin input[type=submit]{
 background:var(--am-metal-verde)!important;
 background-image:var(--am-metal-verde)!important;
 color:#fff!important;border:1px solid #075f16!important;border-top-color:#8cf398!important;border-bottom-color:#03480d!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important;
 text-shadow:0 1px 2px rgba(0,38,7,.62)!important;
}
body.rol-cliente .btn:active, body.rol-repartidor .btn:active, body.rol-empacador .btn:active, body.rol-admin .btn:active,
body.rol-cliente button:active, body.rol-repartidor button:active, body.rol-empacador button:active, body.rol-admin button:active,
body.rol-cliente .nav a:active, body.rol-repartidor .nav a:active, body.rol-empacador .nav a:active, body.rol-admin .nav a:active,
body.rol-cliente .nav a.am-activa, body.rol-repartidor .nav a.am-activa, body.rol-empacador .nav a.am-activa, body.rol-admin .nav a.am-activa{
 transform:translateY(4px)!important;filter:brightness(.90)!important;
 box-shadow:inset 0 6px 11px rgba(0,48,9,.55),inset 0 1px 0 rgba(255,255,255,.16),0 1px 0 #044b0f!important;
}
/* El micrófono principal queda verde e intermitente en reposo. */
@keyframes amMicroPrincipalVerde{0%,100%{filter:brightness(.94);box-shadow:inset 0 2px 0 rgba(255,255,255,.36),inset 0 -4px 0 rgba(0,58,11,.40),0 4px 0 #055a13,0 0 5px rgba(72,255,103,.25)!important}50%{filter:brightness(1.18);box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -4px 0 rgba(0,58,11,.35),0 4px 0 #055a13,0 0 19px rgba(72,255,103,.82)!important}}
body.rol-cliente .btn-micro-producto,body.rol-cliente .btn-micro-tienda,body.rol-cliente .media-voz-atencion{animation:amMicroPrincipalVerde 1.25s ease-in-out infinite!important}
/* Grabando y analizando conservan sus avisos de estado. */
body.rol-cliente .btn-micro-producto.micro-escuchando,body.rol-cliente .btn-micro-tienda.escuchando,body.rol-cliente .media-voz-atencion.grabando{animation:vozEstadoFuerte .62s ease-in-out infinite!important;border-color:#ff4b4b!important;box-shadow:inset 0 5px 9px rgba(55,0,0,.38),0 0 0 2px rgba(255,65,65,.60),0 0 16px rgba(255,35,35,.62)!important}
body.rol-cliente .btn-micro-producto.micro-analizando{animation:microCompraPulso .72s ease-in-out infinite alternate!important;border-color:#45c3ff!important;box-shadow:inset 0 4px 8px rgba(0,55,82,.30),0 0 0 2px rgba(69,195,255,.56),0 0 15px rgba(69,195,255,.46)!important}
/* Catálogo: solamente menos / cantidad / más. Las teclas +/- también son verdes. */
body.rol-cliente article.card[data-nombre-producto] .qty button.minus,
body.rol-cliente article.card[data-nombre-producto] .qty button.plus{background:linear-gradient(180deg,#4ce05d,#18aa2d 43%,#087719 63%,#119326)!important;color:#fff!important;border-color:#08751a!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,57,11,.34),0 3px 0 #075b15!important}
body.rol-cliente article.card[data-nombre-producto] .qty button:active{transform:translateY(3px)!important;box-shadow:inset 0 5px 8px rgba(0,50,10,.48)!important}
/* Tarjetas de tienda: contraste fuerte y limpio sobre blanco. */
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-nombre{color:#142119!important;-webkit-text-fill-color:#142119!important;text-shadow:none!important;filter:none!important;opacity:1!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-distancia{color:#33493b!important;-webkit-text-fill-color:#33493b!important;text-shadow:none!important;opacity:1!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-cliente-estado{font-weight:950!important;text-shadow:none!important;opacity:1!important}
/* El carrito de la tarjeta de tienda sigue siendo SOLO icono; no recupera la tecla global. */
body.rol-cliente button.tienda-cliente-cta.tienda-carrito-icono{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;color:#087b2b!important;text-shadow:none!important;width:54px!important;height:54px!important;padding:0!important}
body.rol-cliente button.tienda-cliente-cta.tienda-carrito-icono:active{background:transparent!important;box-shadow:none!important;transform:scale(.94)!important;filter:none!important}
body.rol-cliente .tienda-carrito-glyph{font-size:42px!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.20))}
/* Arobán deja de ser gris para respetar la fachada global. */
body .aroban-fab,body [id*=aroban][class*=btn],body [class*=aroban][class*=btn]{background:linear-gradient(180deg,#48df5a,#19ad2e 42%,#087a19 62%,#119727)!important;color:#fff!important;border-color:#075f16!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,58,11,.38),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.28)!important}
/* Oferta: antes tachado + precio actual azul + ahorro visible. */
body.rol-cliente .oferta-destacada{background:#fff8dd!important;border:2px solid #f1c232!important;box-shadow:none!important}
body.rol-cliente .oferta-destacada .oferta-etiqueta{background:#e32323!important;color:#fff!important}
body.rol-cliente .oferta-destacada .precio-anterior-producto{color:#4d4d4d!important;font-weight:900!important}
body.rol-cliente .oferta-destacada .precio-anterior-producto span{color:#333!important;text-decoration:line-through!important;text-decoration-thickness:2px!important}
body.rol-cliente .oferta-destacada .precio-producto-principal{color:#075fbd!important;font-size:31px!important}
body.rol-cliente .oferta-destacada .ahorro-producto,body.rol-cliente .oferta-destacada .ahorro-total-producto{background:#ffd83d!important;color:#2b2600!important;border:1px solid #d5a900!important;font-weight:950!important}

/* TODA tecla visible de la aplicación usa el mismo verde metálico. */
button,.btn,a.btn,.nav a,.nav-cliente a,.admin-menu-metal .btn,.tab-tienda,
input[type="button"],input[type="submit"],input[type="reset"],
[role="button"],.btn-grande,.territorio-ver,.flecha-tiendas,
.aroban-fab,.aroban-opcion-tienda button{
 background:#119727!important;
 background-image:var(--am-metal-verde)!important;
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 border:1px solid #075f16!important;
 border-top-color:#8cf398!important;
 border-bottom-color:#03480d!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important;
 text-shadow:0 1px 2px rgba(0,38,7,.65)!important;
}
button:hover,.btn:hover,a.btn:hover,.nav a:hover,.nav-cliente a:hover,.tab-tienda:hover,
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,[role="button"]:hover{
 filter:brightness(1.08)!important;transform:translateY(-1px)!important;
}
button:active,.btn:active,a.btn:active,.nav a:active,.nav-cliente a:active,.tab-tienda:active,
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active,[role="button"]:active,
.am-activa,.tab-tienda.activo{
 transform:translateY(4px)!important;filter:brightness(.88)!important;
 box-shadow:inset 0 7px 12px rgba(0,48,9,.58),inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 #044b0f!important;
}
/* Micrófono principal: verde metálico e intermitente mientras espera. */
@keyframes amMicroVerdeDefinitivo{0%,100%{filter:brightness(.92);box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 0 4px rgba(64,255,96,.25)!important}50%{filter:brightness(1.22);box-shadow:inset 0 2px 0 rgba(255,255,255,.44),inset 0 -4px 0 rgba(0,58,11,.35),0 4px 0 #055a13,0 0 22px rgba(64,255,96,.92)!important}}
.btn-micro-producto,.btn-micro-tienda,.media-voz-atencion,[id^="btnVozRep-"]{background-image:linear-gradient(180deg,#55e565,#1bb432 38%,#087a19 62%,#119727)!important;color:#fff!important;animation:amMicroVerdeDefinitivo 1.2s ease-in-out infinite!important}
/* Estados funcionales del micrófono siguen diferenciándose. */
.btn-micro-producto.micro-escuchando,.btn-micro-tienda.escuchando,.media-voz-atencion.grabando,[id^="btnVozRep-"].grabando{animation:vozEstadoFuerte .62s ease-in-out infinite!important;border-color:#ff4b4b!important}
.btn-micro-producto.micro-analizando{animation:microCompraPulso .72s ease-in-out infinite alternate!important;border-color:#45c3ff!important}
/* Única excepción: carrito de la tarjeta de tienda = icono solo, sin tecla. */
button.tienda-cliente-cta.tienda-carrito-icono{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;color:#087b2b!important;-webkit-text-fill-color:#087b2b!important;text-shadow:none!important;transform:none!important;filter:none!important}
button.tienda-cliente-cta.tienda-carrito-icono:active{background:transparent!important;background-image:none!important;box-shadow:none!important;transform:scale(.94)!important}
/* Catálogo: no tecla Agregar; control visual solamente - / cantidad / +. */
article.card[data-nombre-producto] .qty button{background-image:linear-gradient(180deg,#55e565,#1bb432 38%,#087a19 62%,#119727)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Oferta legible: precio anterior, precio actual y ahorro. */
article.card[data-nombre-producto] .oferta-destacada{background:#fff8dd!important;border:2px solid #f1c232!important}
article.card[data-nombre-producto] .oferta-etiqueta{background:#e32323!important;color:#fff!important}
article.card[data-nombre-producto] .precio-anterior-producto,article.card[data-nombre-producto] .precio-anterior-producto span{color:#343434!important;-webkit-text-fill-color:#343434!important;font-weight:900!important}
article.card[data-nombre-producto] .precio-anterior-producto span{text-decoration:line-through!important;text-decoration-thickness:2px!important}
article.card[data-nombre-producto] .precio-producto-principal{color:#075fbd!important;-webkit-text-fill-color:#075fbd!important}
article.card[data-nombre-producto] .ahorro-producto,article.card[data-nombre-producto] .ahorro-total-producto{background:#ffd83d!important;color:#2b2600!important;-webkit-text-fill-color:#2b2600!important;border:1px solid #d5a900!important;font-weight:950!important}
/* Contraste de las tiendas blancas. */
.tarjeta-tienda-clic .tienda-cliente-nombre{color:#142119!important;-webkit-text-fill-color:#142119!important;text-shadow:none!important}
.tarjeta-tienda-clic .tienda-cliente-distancia{color:#33493b!important;-webkit-text-fill-color:#33493b!important;text-shadow:none!important}


/* AJUSTE EXACTO NAV Y AROBAN INICIO 20260924 */

/* Panel real que contiene Mis pedidos / Mi perfil.
   Mantiene los botones donde están, pero centra el conjunto y elimina el gris. */
body.rol-cliente .nav-cliente{
 width:calc(100% - 32px)!important;
 max-width:520px!important;
 margin-left:auto!important;
 margin-right:auto!important;
 padding-left:8px!important;
 padding-right:8px!important;
 box-sizing:border-box!important;
 background:#0b8b1e!important;
 background-image:linear-gradient(100deg,#087619 0%,#29bd3a 26%,#0c8a1e 51%,#32c744 73%,#087619 100%)!important;
 border-color:#086b18!important;
}

/* Panel REAL que estaba negro debajo/alrededor de DIME QUÉ NECESITAS. */
body.rol-cliente .aroban-inicio-compra{
 background:#0b8b1e!important;
 background-image:linear-gradient(100deg,#087619 0%,#29bd3a 26%,#0c8a1e 51%,#32c744 73%,#087619 100%)!important;
 border-color:#086b18!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px rgba(0,54,11,.20)!important;
}

/* El texto inferior continúa legible sobre el nuevo verde. */
body.rol-cliente .aroban-inicio-compra .estado-aroban-inicio{
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 text-shadow:0 1px 2px rgba(0,45,8,.55)!important;
}


.servicio-almacen-card,.servicio-solicitud,.servicio-repartidor{box-sizing:border-box}
.servicio-repartidor{box-shadow:0 0 0 2px rgba(0,168,232,.18),0 8px 20px rgba(0,0,0,.16)!important}

/* CORRECCIÓN TOTAL ADMINISTRACIÓN SERVICIOS */
.servicio-admin-resumen .stat b,.servicio-admin-resumen .stat span,
.tab-contenido-tienda .stat b,.tab-contenido-tienda .stat span{color:#fff!important;-webkit-text-fill-color:#fff!important}
.servicio-vacio{color:#fff!important;background:rgba(0,0,0,.20)!important;border:1px solid rgba(255,255,255,.28)!important}
.servicio-accesos{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.servicio-accesos span{display:inline-block;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.22);color:#fff;font-weight:700}

/* ACCESO CLIENTE — ALMACENES DE SERVICIOS */
.cliente-servicios-principal{border:3px solid #075f19!important;margin-bottom:16px!important}
.cliente-servicios-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cliente-servicios-principal h2{margin:0 0 6px;color:#fff!important;-webkit-text-fill-color:#fff!important}
.servicio-cliente-inicio-card{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;margin:10px 0;border:1px solid rgba(255,255,255,.35);border-radius:14px;background:rgba(0,0,0,.18);color:#fff}
.servicio-cliente-inicio-card b{font-size:18px;color:#fff!important}
.servicio-cliente-vacio{color:#fff!important;background:rgba(0,0,0,.18)!important}

/* CLIENTE: TRES ACCESOS COMPACTOS EN UNA SOLA FILA */
body.rol-cliente .nav-cliente{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:54px!important;
  max-width:720px!important;
}
body.rol-cliente .nav-cliente .nav-pedidos{grid-column:1!important;grid-row:1!important}
body.rol-cliente .nav-cliente .nav-servicio{grid-column:2!important;grid-row:1!important}
body.rol-cliente .nav-cliente .nav-perfil{grid-column:3!important;grid-row:1!important}
body.rol-cliente .nav-cliente .nav-pedidos,
body.rol-cliente .nav-cliente .nav-servicio,
body.rol-cliente .nav-cliente .nav-perfil{
 width:100%!important;min-width:0!important;min-height:54px!important;margin:0!important;
 padding:8px 5px!important;display:flex!important;align-items:center!important;justify-content:center!important;
 text-align:center!important;font-size:15px!important;font-weight:900!important;line-height:1.1!important;
}
@media(max-width:520px){
 body.rol-cliente .nav-cliente{width:calc(100% - 16px)!important;gap:6px!important;padding-left:4px!important;padding-right:4px!important}
 body.rol-cliente .nav-cliente .nav-pedidos,
 body.rol-cliente .nav-cliente .nav-servicio,
 body.rol-cliente .nav-cliente .nav-perfil{font-size:12px!important;padding:7px 3px!important}
}

/* TARJETAS DE ALMACENES CLIENTE — BLANCAS Y COMPACTAS */
body.rol-cliente .servicio-almacenes-cabecera,
body.rol-cliente .servicio-almacen-card{
 background:#fff!important;background-image:none!important;color:#172126!important;
 border:2px solid #d7e2da!important;box-shadow:0 7px 16px rgba(0,55,12,.18)!important;
 text-shadow:none!important;
}
body.rol-cliente .servicio-almacenes-cabecera{
 padding:14px 18px!important;margin-bottom:12px!important;
}
body.rol-cliente .servicio-almacenes-cabecera h2{
 margin:0 0 6px!important;font-size:25px!important;line-height:1.08!important;
 color:#142119!important;-webkit-text-fill-color:#142119!important;text-shadow:none!important;
}
body.rol-cliente .servicio-almacenes-cabecera p{
 margin:4px 0 10px!important;font-size:16px!important;line-height:1.3!important;
 color:#33493b!important;-webkit-text-fill-color:#33493b!important;text-shadow:none!important;
}
body.rol-cliente .servicio-almacen-card{padding:16px 18px!important;margin-bottom:12px!important}
body.rol-cliente .servicio-almacen-card h3{
 margin:0 0 8px!important;color:#142119!important;-webkit-text-fill-color:#142119!important;text-shadow:none!important;
}
body.rol-cliente .servicio-almacen-card p,
body.rol-cliente .servicio-almacen-card .small{
 color:#33493b!important;-webkit-text-fill-color:#33493b!important;text-shadow:none!important;
}
body.rol-cliente .servicio-almacen-card p{margin:6px 0!important;line-height:1.35!important}
/* Las tarjetas de almacenes de productos continúan blancas con sus selectores reales. */
body.rol-cliente .tarjeta-tienda-clic,
body.rol-cliente .tarjeta-tienda-clic:not(.seleccionada),
body.rol-cliente .tarjeta-tienda-clic.seleccionada{
 background:#fff!important;background-image:none!important;color:#172126!important;
}
@media(max-width:560px){
 body.rol-cliente .servicio-almacenes-cabecera{padding:12px 14px!important}
 body.rol-cliente .servicio-almacenes-cabecera h2{font-size:22px!important}
 body.rol-cliente .servicio-almacen-card{padding:14px!important}
}
/* Ronda 9: un almacén con vehículo fijo (moto/auto/carga) muestra UN solo
   botón grande en vez de dos -- menos pasos para el cliente. */
.servicio-seccion-titulo{margin:18px 0 10px;font-size:18px}
.servicio-boton-unico{display:flex!important;flex-direction:column;align-items:center;gap:4px;padding:16px 10px!important;width:100%}
.servicio-boton-unico .svc-icono-grande{font-size:46px;line-height:1}

/* CORRECCIÓN VISUAL LOCALIZADA — SERVICIO Y REGISTRO CONDUCTOR */
body.rol-cliente .servicio-solicitud{
 background:#fff!important;
 background-image:none!important;
 color:#17202a!important;
 border:2px solid #d7e2da!important;
 box-shadow:0 8px 22px rgba(0,0,0,.14)!important;
}
body.rol-cliente .servicio-solicitud h2,
body.rol-cliente .servicio-solicitud h3,
body.rol-cliente .servicio-solicitud p,
body.rol-cliente .servicio-solicitud label,
body.rol-cliente .servicio-solicitud b,
body.rol-cliente .servicio-solicitud .small,
body.rol-cliente .servicio-solicitud span{
 color:#17202a!important;
 -webkit-text-fill-color:#17202a!important;
 text-shadow:none!important;
}
/* Las teclas verdes de PERSONA / PAQUETE / vehículo y el aviso de vehículo fijo llevan letra BLANCA (la regla de arriba las ponía negras) */
body.rol-cliente .servicio-solicitud .tipo-servicio-tecla span,
body.rol-cliente .servicio-solicitud .tipo-servicio-tecla b,
body.rol-cliente .servicio-solicitud .servicio-vehiculo-fijo b,
body.rol-cliente .servicio-solicitud .servicio-vehiculo-fijo p,
body.rol-cliente .servicio-solicitud .servicio-vehiculo-fijo a{
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 text-shadow:0 1px 2px rgba(0,38,7,.65)!important;
}
body.rol-cliente .servicio-solicitud input,
body.rol-cliente .servicio-solicitud textarea{
 background:#fff!important;color:#17202a!important;
 -webkit-text-fill-color:#17202a!important;
 border:1px solid #718078!important;
}
body.rol-cliente .servicio-solicitud input::placeholder,
body.rol-cliente .servicio-solicitud textarea::placeholder{color:#66736c!important;opacity:1!important}
body.rol-cliente .servicio-solicitud #mapaServicio{
 background:#eef3f0!important;border:2px solid #159447!important;
}
body.rol-cliente .servicio-solicitud .panel{
 background:#f7faf8!important;background-image:none!important;
 color:#17202a!important;border:1px solid #cbd8d0!important;
}
body.rol-cliente .servicio-solicitud .btn{color:#fff!important;-webkit-text-fill-color:#fff!important}
body.rol-cliente .servicio-solicitud #precioVista{font-weight:900!important;color:#075f19!important;-webkit-text-fill-color:#075f19!important}

/* El panel blanco de verificación del conductor conserva su estructura;
   solo se fuerza contraste legible dentro de ese panel. */
.registro-repartidor-verificacion,
.registro-repartidor-verificacion *{text-shadow:none!important}
.registro-repartidor-verificacion{
 background:#f8fafc!important;background-image:none!important;color:#17202a!important;
 border:2px solid #159447!important;
}
.registro-repartidor-verificacion h3,
.registro-repartidor-verificacion label,
.registro-repartidor-verificacion p,
.registro-repartidor-verificacion .small{
 color:#17202a!important;-webkit-text-fill-color:#17202a!important;
}
.registro-repartidor-verificacion input{
 background:#fff!important;color:#17202a!important;-webkit-text-fill-color:#17202a!important;
}

/* FACHADA ACORDADA: micrófono principal redondo, misma función y mismo JS */
body.rol-cliente .aroban-inicio-compra{
 background:transparent!important;border:0!important;box-shadow:none!important;
 padding:6px 0 2px!important;margin:8px auto 6px!important;text-align:center!important;
}

body.rol-cliente .estado-aroban-inicio{color:#17202a!important;min-height:18px!important;padding:5px 4px 0!important}

/* MI SERVICIO: tarjetas blancas y lectura directa */
body.rol-cliente .servicio-detalle-cliente,
body.rol-cliente .servicio-info-servicio,
body.rol-cliente .servicio-info-conductor,
body.rol-cliente .servicio-seguimiento-vivo,
body.rol-cliente .servicio-codigo-recogida,
body.rol-cliente .servicio-estado-final{
 background:#fff!important;background-image:none!important;color:#17202a!important;
 border:1px solid #d7e2da!important;border-radius:16px!important;
 box-shadow:0 5px 14px rgba(0,0,0,.12)!important;
 padding:16px!important;margin:12px 0!important;text-shadow:none!important;
}
body.rol-cliente .servicio-detalle-cliente h2,
body.rol-cliente .servicio-detalle-cliente h3,
body.rol-cliente .servicio-detalle-cliente p,
body.rol-cliente .servicio-detalle-cliente b,
body.rol-cliente .servicio-detalle-cliente strong,
body.rol-cliente .servicio-detalle-cliente span{
 color:#17202a!important;-webkit-text-fill-color:#17202a!important;text-shadow:none!important;
}
body.rol-cliente .servicio-conductor-fila{display:flex!important;align-items:center!important;gap:14px!important}
body.rol-cliente .servicio-foto-conductor{
 width:78px!important;height:78px!important;min-width:78px!important;object-fit:cover!important;
 border-radius:50%!important;border:3px solid #159447!important;background:#eef5f0!important;
}
body.rol-cliente .servicio-foto-vacia{display:flex!important;align-items:center!important;justify-content:center!important;font-size:36px!important}
body.rol-cliente .servicio-codigo-recogida span{font-size:30px!important;letter-spacing:6px!important;font-weight:900!important;color:#075f19!important;-webkit-text-fill-color:#075f19!important}


/* SOLO FACHADA — tarjetas del cliente: Perfil, Mis pedidos y Mi servicio */
body.rol-cliente .perfil-cliente-panel,
body.rol-cliente .perfil-cliente-panel .panel,
body.rol-cliente .pedido-cliente-card,
body.rol-cliente .pedido-detalle-cliente,
body.rol-cliente .mis-servicios-cliente .panel,
body.rol-cliente .servicio-detalle-cliente,
body.rol-cliente .servicio-detalle-cliente .panel,
body.rol-cliente .servicio-info-servicio,
body.rol-cliente .servicio-info-conductor,
body.rol-cliente .servicio-seguimiento-vivo,
body.rol-cliente .servicio-codigo-recogida,
body.rol-cliente .servicio-estado-final{
 background:#fff!important;background-image:none!important;color:#17202a!important;
 border-color:#d7e2da!important;text-shadow:none!important;
}
body.rol-cliente .perfil-cliente-panel *,
body.rol-cliente .pedido-cliente-card *,
body.rol-cliente .pedido-detalle-cliente *,
body.rol-cliente .mis-servicios-cliente .panel *,
body.rol-cliente .servicio-detalle-cliente *{
 text-shadow:none!important;
}

body.rol-cliente .mis-pedidos-cliente .panel,
body.rol-cliente .mis-pedidos-cliente .table-wrap,
body.rol-cliente .mis-pedidos-cliente table,
body.rol-cliente .mis-pedidos-cliente td{
 background:#fff!important;background-image:none!important;color:#17202a!important;text-shadow:none!important;
}
body.rol-cliente .mis-pedidos-cliente th{background:#eef3f0!important;color:#17202a!important;text-shadow:none!important}
body.rol-cliente .mis-pedidos-cliente .panel *,
body.rol-cliente .mis-pedidos-cliente td *{text-shadow:none!important}


/* Carrito blanco — solo apariencia */
body.rol-cliente .cart,
body.rol-cliente .carrito,
body.rol-cliente .carrito-panel,
body.rol-cliente #carrito,
body.rol-cliente #carrito_panel,
body.rol-cliente #carrito_cliente,
body.rol-cliente [class*="carrito-"]{
 background-color:#fff!important;color:#17202a!important;text-shadow:none!important;
}
body.rol-cliente .cart *,
body.rol-cliente .carrito *,
body.rol-cliente .carrito-panel *,
body.rol-cliente #carrito *,
body.rol-cliente [class*="carrito-"] *{text-shadow:none!important}

/* Mis pedidos: bandeja y tarjetas blancas */
body.rol-cliente .mis-pedidos-cliente,
body.rol-cliente .mis-pedidos-cliente .panel,
body.rol-cliente .mis-pedidos-cliente .table-wrap,
body.rol-cliente .mis-pedidos-cliente table,
body.rol-cliente .mis-pedidos-cliente td{
 background:#fff!important;background-image:none!important;color:#17202a!important;
}

/* Acceso a servicios de repartidor/admin: botón, no bandeja */
.acceso-servicios-simple{display:flex!important;justify-content:flex-start!important;margin:10px 0!important;padding:0!important;background:transparent!important;border:0!important}
.btn-servicios-simple{width:auto!important;min-width:170px!important;margin:0!important}
.admin-menu-metal a[href="/admin?seccion=servicios"]{width:auto!important}

/* SOLO FACHADA CLIENTE — blanco real en pedido y carrito */
body.rol-cliente .pedido-cliente-activo,
body.rol-cliente .cabecera-mis-pedidos,
body.rol-cliente .mis-pedidos-cliente>.panel,
body.rol-cliente .mis-pedidos-cliente .panel,
body.rol-cliente .carrito,
body.rol-cliente .carrito-panel,
body.rol-cliente .cart,
body.rol-cliente #carrito,
body.rol-cliente #carrito_panel,
body.rol-cliente #carrito_cliente{
 background:#fff!important;background-image:none!important;color:#17202a!important;
 border-color:#d7e2da!important;text-shadow:none!important;
}

/* Información de confianza del conductor — pedido del cliente */
body.rol-cliente .pedido-info-conductor{
 background:#fff!important;background-image:none!important;color:#17202a!important;
 border:2px solid #d7e2da!important;border-radius:16px!important;padding:13px!important;margin:12px 0!important;
 box-shadow:0 4px 12px rgba(0,0,0,.10)!important;text-shadow:none!important;
}
body.rol-cliente .pedido-conductor-fila{display:flex!important;align-items:center!important;gap:13px!important}
body.rol-cliente .pedido-foto-conductor{
 width:76px!important;height:76px!important;min-width:76px!important;border-radius:50%!important;
 object-fit:cover!important;border:3px solid #159447!important;background:#eef5f0!important;
}
body.rol-cliente .pedido-foto-conductor-vacia{display:flex!important;align-items:center!important;justify-content:center!important;font-size:34px!important}
body.rol-cliente .pedido-conductor-nombre{font-size:18px!important}

/* Micrófono: una sola pieza circular; elimina cualquier placa/cuadrado exterior */
body.rol-cliente .aroban-inicio-compra,
body.rol-cliente .aroban-inicio-compra:hover,
body.rol-cliente .aroban-inicio-compra:active{
 background:transparent!important;background-image:none!important;border:0!important;
 outline:0!important;box-shadow:none!important;border-radius:0!important;
}



body.rol-cliente #aroban_inicio_compra{
 background:transparent!important;background-image:none!important;border:0!important;
 box-shadow:none!important;outline:0!important;
}

/* TARJETAS DEL REPARTIDOR — BLANCAS, CLARAS Y CON LETRA MAYOR */
body.rol-repartidor .pedido-card,
body.rol-repartidor .pedido-card.pendiente,
body.rol-repartidor .pedido-card.espera,
body.rol-repartidor .pedido-card.camino,
body.rol-repartidor .servicio-repartidor{
 background:#fff!important;background-image:none!important;
 color:#17202a!important;
 border-color:#b9d8c2!important;
 text-shadow:none!important;
}
body.rol-repartidor .pedido-card *,
body.rol-repartidor .servicio-repartidor *{
 text-shadow:none!important;
}
body.rol-repartidor .pedido-card{
 font-size:17px!important;line-height:1.45!important;
}
body.rol-repartidor .pedido-card-num{font-size:24px!important;color:#10251a!important}
body.rol-repartidor .pedido-card-total{font-size:22px!important;color:#075f19!important}
body.rol-repartidor .pedido-card-info,
body.rol-repartidor .pedido-card-info .small{
 font-size:16px!important;line-height:1.45!important;color:#24372c!important;
}
body.rol-repartidor .servicio-repartidor{
 font-size:17px!important;line-height:1.5!important;
}
body.rol-repartidor .servicio-repartidor>div:first-child{
 font-size:23px!important;color:#10251a!important;
}
body.rol-repartidor .servicio-repartidor p,
body.rol-repartidor .servicio-repartidor label{
 font-size:17px!important;color:#24372c!important;
}

/* SERVICIO NUEVO DISPONIBLE — AVISO INTERMITENTE COMO LOS PEDIDOS */
@keyframes servicioNuevoRepartidorPulso{
  0%,100%{box-shadow:0 0 0 2px rgba(0,168,232,.22),0 7px 18px rgba(0,0,0,.12)}
  50%{box-shadow:0 0 0 4px rgba(0,168,232,.78),0 0 28px rgba(0,168,232,.72)}
}
body.rol-repartidor .servicio-repartidor.servicio-nuevo-intermitente{
 animation:servicioNuevoRepartidorPulso .82s ease-in-out infinite!important;
}
@media(prefers-reduced-motion:reduce){
 body.rol-repartidor .servicio-repartidor.servicio-nuevo-intermitente{
  animation:none!important;box-shadow:0 0 0 4px rgba(0,168,232,.58)!important;
 }
}

/* REPARTIDOR: servicios blancos, legibles; botones de navegación equivalentes */
body.rol-repartidor .servicio-repartidor{
 background:#fff!important;background-image:none!important;color:#17202a!important;
 font-size:18px!important;line-height:1.5!important;text-shadow:none!important;
}
body.rol-repartidor .servicio-repartidor p,
body.rol-repartidor .servicio-repartidor div,
body.rol-repartidor .servicio-repartidor span,
body.rol-repartidor .servicio-repartidor b,
body.rol-repartidor .servicio-repartidor strong,
body.rol-repartidor .servicio-repartidor label{
 color:#17202a!important;-webkit-text-fill-color:#17202a!important;text-shadow:none!important;
}
body.rol-repartidor .servicio-repartidor .badge{
 background:#edf4f7!important;color:#17344a!important;-webkit-text-fill-color:#17344a!important;
}
body.rol-repartidor .servicio-repartidor .btn,
body.rol-repartidor .servicio-repartidor button{
 color:#fff!important;-webkit-text-fill-color:#fff!important;
}
body.rol-repartidor a[href="/repartidor/servicios"],
body.rol-repartidor a[href="/repartidor/pedidos"]{
 width:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
}

/* CORRECCIONES DE LAS CAPTURAS — presentación, sin alterar radio ni catálogo */
body.rol-cliente .empty{
 color:#24372c!important;-webkit-text-fill-color:#24372c!important;text-shadow:none!important;
 font-size:16px!important;font-weight:700!important;
}
body.rol-cliente .carrito h2,
body.rol-cliente .carrito h3,
body.rol-cliente .cart h2,
body.rol-cliente .cart h3,
body.rol-cliente #carrito h2,
body.rol-cliente #carrito h3,
body.rol-cliente #carrito_cliente h2,
body.rol-cliente #carrito_cliente h3{
 color:#17202a!important;-webkit-text-fill-color:#17202a!important;text-shadow:none!important;
}
/* Mis pedidos y Mis servicios: misma categoría visual de botón del repartidor */
body.rol-repartidor .nav-repartidor a[href="/repartidor"],
body.rol-repartidor .nav-repartidor a[href="/repartidor/servicios"]{
 min-width:150px!important;
}
/* El repartidor trabaja siempre localizado: no se ofrece modo sin GPS. */
body.rol-repartidor button[onclick*="rep_gps_sin"][onclick*="'1'"]{display:none!important}

/* CLIENTE SIN TIENDAS DE PRODUCTO: mostrar únicamente el micrófono principal. */
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto{
 background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;
 padding:10px 0 4px!important;margin:8px auto 10px!important;min-height:0!important;
}
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto .buscador-tienda-voz-wrap,
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto #estadoVozTienda,
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto .carrusel-tiendas-wrap,
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto #acciones_tienda_activa_mount{display:none!important}
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto .aroban-inicio-compra{
 width:110px!important;max-width:110px!important;margin:0 auto!important;padding:4px 0!important;
 background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;
}
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto #estadoArobanInicio{
 position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
}
body.rol-cliente .panel-tiendas-unificado.sin-tiendas-producto #resultadosArobanTiendas:not(:empty){
 position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
 width:min(92vw,680px)!important;max-height:78vh!important;overflow:auto!important;z-index:9998!important;
 background:#fff!important;color:#17202a!important;border:2px solid #159447!important;border-radius:18px!important;
 padding:14px!important;box-shadow:0 16px 44px rgba(0,0,0,.28)!important;
}

/* Resultado del micrófono principal: no se oculta por estados visuales heredados. */
body.rol-cliente #resultadosArobanTiendas:not(:empty){
 display:block!important;visibility:visible!important;opacity:1!important;
}

/* AJUSTES LOCALIZADOS SOLICITADOS — sin alterar lógica comercial. */
body.rol-cliente .perfil-opciones-internas{
 background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:0!important;
}
body.rol-cliente .perfil-opciones-internas .btn{
 background:#119727!important;background-image:var(--am-metal-verde)!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid #075f16!important;border-top-color:#8cf398!important;border-bottom-color:#03480d!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important;
}
body.rol-cliente .perfil-puntos-panel,
body.rol-cliente .mis-tiendas-panel,
body.rol-cliente .mi-clave-panel,
body.rol-cliente .mis-pedidos-panel,
body.rol-cliente .mis-pedidos-cliente .panel,
body.rol-cliente .pedido-detalle-cliente,
body.rol-cliente #area-refrescable > .panel{
 background:#fff!important;background-image:none!important;color:#17202a!important;border-color:#d7e2da!important;text-shadow:none!important;
}
body.rol-cliente .perfil-puntos-panel *,body.rol-cliente .mis-tiendas-panel *,body.rol-cliente .mi-clave-panel *,
body.rol-cliente .mis-pedidos-panel *,body.rol-cliente .mis-pedidos-cliente .panel *{text-shadow:none!important}

/* ================================================================
   FACHADA CANÓNICA AHORRO MÁS — UNA SOLA CAPA DE CONTRASTE
   No duplica fondos correctivos. Define legibilidad por función.
   ================================================================ */
:root{
 --am-negro:#17202a;--am-gris:#45545c;--am-azul:#075b9c;
 --am-precio:#0667ad;--am-total:#b42318;--am-verde:#079629;
 --am-borde:#d7e1e6;--am-blanco:#fff;
}
body{color:var(--am-negro)}
.panel,.card{color:var(--am-negro)}
.panel h1,.panel h2,.panel h3,.panel h4,.card h1,.card h2,.card h3{color:var(--am-azul);text-shadow:none}
input,select,textarea{color:var(--am-negro);background:#fff}
input::placeholder,textarea::placeholder{color:#65757d;opacity:1}

/* Avisos: nunca texto oscuro sobre fondo oscuro. */
.notice,.warning,.danger,.success,.info{
 font-weight:750;text-shadow:none!important;
}
.notice,.warning{background:#fff8df!important;color:#5b4300!important;-webkit-text-fill-color:#5b4300!important}
.danger{background:#fff0f0!important;color:#8b1e1e!important;-webkit-text-fill-color:#8b1e1e!important}
.success{background:#edf9f0!important;color:#176b35!important;-webkit-text-fill-color:#176b35!important}
.info{background:#eef7ff!important;color:#075b9c!important;-webkit-text-fill-color:#075b9c!important}

/* Acceso y registro cliente/repartidor: tarjeta blanca y mensajes legibles. */
body.rol-cliente .login-card,body.rol-cliente .register-card,
body.rol-repartidor .login-card,body.rol-repartidor .register-card,
body.rol-cliente form.panel,body.rol-repartidor form.panel{
 background:#fff!important;color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;
}
body.rol-cliente label,body.rol-repartidor label,
body.rol-cliente .panel small,body.rol-repartidor .panel small,
body.rol-cliente .panel p,body.rol-repartidor .panel p{
 color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;text-shadow:none!important;
}

/* Cliente: catálogo, carrito y checkout. */
body.rol-cliente .buscador-productos-panel,
body.rol-cliente .buscador-productos-panel p,
body.rol-cliente .buscador-productos-panel label,
body.rol-cliente .buscador-catalogo-cliente,
body.rol-cliente .buscador-catalogo-cliente .buscador-contexto,
body.rol-cliente .buscador-catalogo-cliente .buscador-contexto b,
body.rol-cliente .buscador-catalogo-cliente .buscador-contexto small,
body.rol-cliente #estadoArobanInicio,
body.rol-cliente .estado-aroban-inicio{
 color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;text-shadow:none!important;
}
body.rol-cliente .producto-nombre,body.rol-cliente .nombre-producto,
body.rol-cliente .product-name,body.rol-cliente .prod-nombre,
body.rol-cliente .cart .cart-item,body.rol-cliente .cart .cart-item b,
body.rol-cliente .cart .cart-item .num{
 color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;text-shadow:none!important;
}
body.rol-cliente [class*="precio"]:not(button):not(.btn),
body.rol-cliente [class*="subtotal"]:not(button):not(.btn),
body.rol-cliente .cart .cart-item>div[style*="text-align:center"]{
 color:var(--am-precio)!important;-webkit-text-fill-color:var(--am-precio)!important;font-weight:850!important;text-shadow:none!important;
}
body.rol-cliente .total-final,body.rol-cliente .gran-total,
body.rol-cliente .pedido-total,body.rol-cliente .carrito-total,
body.rol-cliente .total-carrito,body.rol-cliente .total-pagar{
 color:var(--am-total)!important;-webkit-text-fill-color:var(--am-total)!important;font-weight:900!important;
}
body.rol-cliente .checkout-voz-metal{
 background:#fff!important;border:2px solid var(--am-borde)!important;
 box-shadow:0 10px 24px rgba(17,32,42,.14)!important;
}
body.rol-cliente .checkout-voz-resumen{color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;text-shadow:none!important}
body.rol-cliente .checkout-voz-pregunta,body.rol-cliente .checkout-voz-revisar{color:var(--am-azul)!important;-webkit-text-fill-color:var(--am-azul)!important;text-shadow:none!important}

/* Administración completa + reportes standalone:
   encabezado/teclas verdes, superficies blancas, letra grande. */
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador){
 font-size:19px!important;line-height:1.45!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .header{
 background:linear-gradient(180deg,#28dc50 0%,#079629 56%,#06751f 100%)!important;
 border-bottom:3px solid #045d18!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .header,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .header *{
 color:#fff!important;-webkit-text-fill-color:#fff!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .card,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .stat,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .pedido-card,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .table-wrap{
 background:#fff!important;color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;
 border-color:var(--am-borde)!important;text-shadow:none!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) h1{font-size:30px!important}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) h2{font-size:27px!important}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) h3{font-size:23px!important}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel h1,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel h2,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel h3,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .stat b{
 color:var(--am-azul)!important;-webkit-text-fill-color:var(--am-azul)!important;font-weight:900!important;text-shadow:none!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel p,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel label,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .panel li,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .small{
 color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;font-size:18px!important;text-shadow:none!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) table,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .table{background:#fff!important;color:var(--am-negro)!important;font-size:18px!important}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) table th,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .table th{
 background:#eaf3f8!important;color:var(--am-azul)!important;-webkit-text-fill-color:var(--am-azul)!important;
 font-size:19px!important;font-weight:900!important;padding:14px 12px!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) table td,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .table td{
 background:#fff!important;color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;
 font-size:18px!important;padding:13px 12px!important;text-shadow:none!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) input,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) select,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) textarea{
 background:#fff!important;color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;
 font-size:18px!important;min-height:44px!important;border-color:#aebdc5!important;
}
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) button,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .btn,
body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .nav a{
 background:linear-gradient(180deg,#2ee957 0%,#079629 58%,#056f1d 100%)!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#55f477!important;
 border-bottom-color:#045d18!important;font-size:18px!important;font-weight:850!important;
 text-shadow:0 1px 1px rgba(0,0,0,.45)!important;
}

/* Centro de reportes: buscador para 50–100 conductores. */
.reporte-buscador{max-width:680px;margin:10px 0 18px}
.reporte-buscador input{width:100%;font-size:19px!important;padding:13px!important}
.reporte-conductor-item{display:block;margin:8px 0}

/* Administración móvil: orden táctil sin cambiar funciones. */
.admin-menu-metal,.actions,.servicio-accesos{gap:9px!important;align-items:stretch!important}
.admin-menu-metal .btn,.actions>.btn,.actions>form>.btn{min-height:48px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1.15!important}
.gps-permiso-admin,.gps-ubicacion-form{margin:10px 0!important}
.gps-permiso-admin .btn,.gps-ubicacion-form .btn{margin-top:8px!important}
@media(max-width:700px){
 body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador){font-size:17px!important}
 body:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) .wrap{padding-left:10px!important;padding-right:10px!important}
 .admin-menu-metal{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;padding:8px!important;box-sizing:border-box!important}
 .admin-menu-metal .btn{width:100%!important;min-width:0!important;margin:0!important;padding:10px 7px!important;font-size:15px!important;white-space:normal!important}
 .servicio-accesos{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .servicio-accesos span{margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;text-align:center!important;padding:8px!important;box-sizing:border-box!important}
 .tab-botones-tienda,.tabs-tienda,.tabs-admin{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .tab-botones-tienda .btn,.tabs-tienda .btn,.tabs-admin .btn{width:100%!important;min-width:0!important;margin:0!important;white-space:normal!important}
 .gps-almacen-panel .btn{width:100%!important;min-width:0!important;white-space:normal!important}
 .stats,.form-grid{grid-template-columns:1fr!important}
}
@media(max-width:390px){.admin-menu-metal,.servicio-accesos,.tab-botones-tienda,.tabs-tienda,.tabs-admin{grid-template-columns:1fr!important}}
@media(max-width:700px){.admin-menu-metal.menu-dueno .btn:last-child:nth-child(odd){grid-column:1/-1!important}}

/* ================================================================
   TARJETAS DEL REPARTIDOR/CONDUCTOR — pedido explícito: TODAS las
   tarjetas blancas, letra bien clara y legible (sin letra blanca
   sobre fondo claro). El encabezado de cada tarjeta y los botones se
   quedan en verde, como estaban. Incluye el panel de "mi ubicación y
   distancia a las tiendas" (GPS en vivo) y el de pasos de entrega
   rápida, que antes quedaban verdes o en filas negras por un ajuste
   de estilo anterior — ya sin excepciones, "todas" según se pidió.
   Solo se deja aparte el aviso de "pedido con carga pendiente", que
   es una alerta que debe seguir destacando distinto a propósito.
   ================================================================ */
.rol-repartidor .panel:not(.pedido-carga-pendiente),
.rol-repartidor .rep-gps-panel,.rol-repartidor .rep-step-panel,.rol-repartidor .rep-entrega-rapida{
 background:#fff!important;background-image:none!important;color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;
 border:1px solid var(--am-borde)!important;text-shadow:none!important;
}
.rol-repartidor .panel:not(.pedido-carga-pendiente) h2,.rol-repartidor .panel:not(.pedido-carga-pendiente) h3,
.rol-repartidor .rep-gps-panel h3,.rol-repartidor .rep-step-panel h2,.rol-repartidor .rep-entrega-rapida h3{
 color:var(--am-verde)!important;-webkit-text-fill-color:var(--am-verde)!important;text-shadow:none!important;
}
.rol-repartidor .panel:not(.pedido-carga-pendiente) p,.rol-repartidor .panel:not(.pedido-carga-pendiente) label,
.rol-repartidor .panel:not(.pedido-carga-pendiente) li,.rol-repartidor .panel:not(.pedido-carga-pendiente) b,
.rol-repartidor .panel:not(.pedido-carga-pendiente) strong,.rol-repartidor .panel:not(.pedido-carga-pendiente) .small,
.rol-repartidor .rep-gps-panel p,.rol-repartidor .rep-gps-panel .small,
.rol-repartidor .rep-step-panel p,.rol-repartidor .rep-entrega-rapida p{
 color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important;text-shadow:none!important;
}
.rol-repartidor .rep-dist-row{
 background:#f3f7f5!important;color:var(--am-negro)!important;border:1px solid var(--am-borde)!important;
}
.rol-repartidor .rep-dist-row b,.rol-repartidor .rep-dist-row span{color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important}
.rol-repartidor .rep-pickup-store{background:#f3f7f5!important;color:var(--am-negro)!important;border:1px solid var(--am-borde)!important}
.rol-repartidor .rep-pickup-store b,.rol-repartidor .rep-pickup-store div{color:var(--am-negro)!important;-webkit-text-fill-color:var(--am-negro)!important}

/* ================================================================
   ADMINISTRACIÓN DE PEDIDOS — corrección de fallos reportados:
   1) La tecla "MARCAR LISTA MI PARTE" (y en general cualquier botón
      dentro de las acciones de un pedido en Administración) se salía
      de la pantalla en celulares cuando el texto era largo (nombre de
      tienda largo, varias tiendas). Ahora el botón siempre ocupa el
      ancho disponible y el texto se acomoda dentro, nunca se corta ni
      se sale de la página.
   ================================================================ */
.rol-admin form[action="/admin/pedido/marcar_listo"]{max-width:100%}
.rol-admin form[action="/admin/pedido/marcar_listo"] button,
.rol-admin .actions form button,.rol-admin .actions>.btn,.rol-admin .actions>a.btn{
 max-width:100%;white-space:normal!important;text-align:center;
}
.rol-admin form[action="/admin/pedido/marcar_listo"] button{width:100%;display:block;line-height:1.35;padding:12px 14px}
@media(max-width:760px){
 .rol-admin .actions{flex-direction:column;align-items:stretch}
 .rol-admin .actions>*{width:100%}
 .rol-admin .actions form{display:block!important;width:100%}
 .rol-admin .actions select{max-width:100%}
}
/* La tabla de pedidos es más ancha que la pantalla en un celular (por
   diseño, para que quepan todas las columnas) y eso hacía que la
   columna de Acciones (asignar, marcar listo, cancelar...) quedara
   "tapada" muy a la derecha -- solo se veía deslizando la tabla, y no
   era obvio que había que deslizar. Esto es CSS por rol (.rol-admin),
   no por usuario: se aplica exactamente igual sin importar qué
   administrador haya iniciado sesión -- no existe ninguna regla que
   distinga a un administrador de otro. Ahora esa columna se queda
   pegada (sticky) al borde derecho de lo que se ve, con ancho fijo
   suficiente para que el texto de cada botón quepa en una o dos
   líneas COMPLETAS -- nunca partiendo una palabra a la mitad (antes
   "DETALLE" se cortaba en "DETA" / "LLE", ilegible). */
.rol-admin .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rol-admin .table th:last-child,.rol-admin .table td:last-child{
 position:sticky;right:0;z-index:2;min-width:168px;width:168px;
 box-shadow:-8px 0 10px -6px rgba(0,0,0,.45);
}
.rol-admin .table td:last-child .actions{gap:8px}
.rol-admin .table td:last-child .btn,.rol-admin .table td:last-child button{font-size:13.5px!important;padding:9px 10px!important;line-height:1.25!important}
.rol-admin .table td:last-child select{font-size:13px;padding:8px}
/* Lista de conductores: los botones de «Cercanía código» y de «Acciones» van uno debajo del otro,
   todos del mismo ancho y alineados (antes quedaban de lado, cortados y tapados por la columna fija). */
.rol-admin .tabla-repartidores{min-width:1040px}
.rol-admin .tabla-repartidores th:last-child,.rol-admin .tabla-repartidores td:last-child{min-width:200px;width:200px}
.rol-admin .tabla-repartidores td{vertical-align:middle}
.rol-admin .tabla-repartidores th:nth-last-child(2),.rol-admin .tabla-repartidores td:nth-last-child(2){min-width:190px;width:190px}
.rol-admin .tabla-repartidores td:nth-child(4) form,.rol-admin .tabla-repartidores td:nth-child(5) form{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;margin:0!important;width:170px}
.rol-admin .tabla-repartidores td:nth-child(4) select,.rol-admin .tabla-repartidores td:nth-child(5) select{width:100%!important;max-width:170px}
.rol-admin .tabla-repartidores td:nth-child(4) .btn,.rol-admin .tabla-repartidores td:nth-child(5) .btn{width:100%!important;min-width:0!important;padding:9px 8px!important;font-size:13px!important}
.rol-admin .tabla-repartidores td:last-child form,.rol-admin .tabla-repartidores td:nth-last-child(2) form{display:block!important;margin:0 0 7px!important;width:100%}
.rol-admin .tabla-repartidores td:last-child br,.rol-admin .tabla-repartidores td:nth-last-child(2) br{display:none}
.rol-admin .tabla-repartidores td:last-child .btn,.rol-admin .tabla-repartidores td:last-child button,
.rol-admin .tabla-repartidores td:nth-last-child(2) .btn,.rol-admin .tabla-repartidores td:nth-last-child(2) button{
 display:block!important;width:100%!important;min-width:0!important;box-sizing:border-box;margin:0!important;
 font-size:13px!important;padding:9px 8px!important;line-height:1.25!important;text-align:center;white-space:normal}
.rol-admin .tabla-repartidores td:nth-last-child(2) .small{display:block;margin-bottom:6px}

/* ================================================================
   PUNTO DE ESTADO DEL PEDIDO (Administración) — pedido explícito:
   mientras el pedido sigue activo debe "respirar" (parpadear) para
   que se note de un vistazo que todavía necesita atención; una vez
   entregado, el punto se queda fijo, sin parpadear, porque ya no hace
   falta llamar la atención sobre él.
   ================================================================ */
.estado-celda{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.estado-texto{display:inline-block;font-size:15px;font-weight:950;letter-spacing:.35px;padding:5px 10px;border-radius:9px;border:1px solid currentColor;line-height:1.1;text-transform:uppercase}
.estado-texto-espera{color:#137a32;background:#eaf8ee}.estado-texto-camino{color:#9a6100;background:#fff4d6}.estado-texto-atrasado{color:#9a6100;background:#ffe6a3;font-size:16px}.estado-texto-muy-atrasado{color:#fff;background:#c0392b;border-color:#8f241b;font-size:16px}.estado-texto-entregado{color:#137a32;background:#eaf8ee}.estado-texto-cancelado{color:#a1261d;background:#fdecea}
.estado-texto-intermitente{animation:estadoTextoParpadeo 1.15s ease-in-out infinite}@keyframes estadoTextoParpadeo{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){.estado-texto-intermitente{animation:none!important}}
/* El anillo de "respiración" crece hacia AFUERA del punto sin invadir
   ni el texto ni el aviso de tardanza que puede ir justo al lado o
   debajo -- por eso .estado-celda los pone en su propia línea. */
@keyframes estadoPuntoParpadeoVerde{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,153,84,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(34,153,84,0)}}
@keyframes estadoPuntoParpadeoAmbar{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(214,137,16,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(214,137,16,0)}}
@media(prefers-reduced-motion:reduce){.estado-punto-espera,.estado-punto-camino{animation:none!important}}

/* ================================================================
   TABLAS DEL REPARTIDOR — sin franjas verdes. La "FACHADA OFICIAL"
   pinta de verde las filas pares de CUALQUIER tabla (.table
   tr:nth-child(even) td) y eso nunca se anuló para el rol repartidor,
   así que sus reportes (ej. "Mi reporte") quedaban con filas
   alternando blanco/verde. Se fuerza aquí blanco/gris claro con texto
   oscuro legible, igual que el resto de sus tarjetas.
   ================================================================ */
body.rol-repartidor .table,body.rol-repartidor table{background:#fff!important}
body.rol-repartidor .table th,body.rol-repartidor table th{background:#dce8f0!important;color:#123d62!important}
body.rol-repartidor .table td,body.rol-repartidor table td,
body.rol-repartidor .table tr:nth-child(even) td,body.rol-repartidor table tr:nth-child(even) td{
 background:#f8fbfd!important;color:#1b2b33!important;text-shadow:none!important
}
body.rol-repartidor .table tr:hover td,body.rol-repartidor table tr:hover td{background:#eaf5fb!important;color:#1b2b33!important}
body.rol-repartidor .table tr:hover td *,body.rol-repartidor table tr:hover td *{color:#1b2b33!important}

/* ================================================================
   CONTRASTE EN LA SESIÓN DE REPARTIDOR — los avisos genéricos
   (.notice/.danger/.success) forzaban el texto en blanco pero
   conservaban su fondo claro original (amarillo/rosa pálido), lo que
   dejaba el texto casi invisible. Se les da un fondo oscuro acorde al
   tema del repartidor, manteniendo el color de cada tipo de aviso.
   IMPORTANTE: además de "color" hay que fijar "-webkit-text-fill-color"
   explícitamente. Más arriba en este mismo archivo hay una regla
   genérica ".danger{-webkit-text-fill-color:#8b1e1e}" (pensada para
   fondo claro) que en Chrome/Android GANA sobre "color" aunque el
   fondo aquí sea oscuro -- eso dejaba el texto casi invisible (rojo
   oscuro sobre rojo oscuro). Por eso cada regla de aquí en adelante
   fija las dos propiedades.
   ================================================================ */
body.rol-repartidor .notice{background:#4a3c12!important;border-color:#d9b64a!important;color:#fff3d6!important;-webkit-text-fill-color:#fff3d6!important}
body.rol-repartidor .danger{background:#5a1f1f!important;border-color:#d78b84!important;color:#ffecec!important;-webkit-text-fill-color:#ffecec!important}
body.rol-repartidor .success{background:#1c4a2e!important;border-color:#6eb98a!important;color:#eafff1!important;-webkit-text-fill-color:#eafff1!important}
body.rol-repartidor .notice *,body.rol-repartidor .danger *,body.rol-repartidor .success *{color:inherit!important;-webkit-text-fill-color:inherit!important}
/* El mismo problema existe en el cuadro de error de la pantalla de
   inicio de sesión del repartidor (todavía sin sesión, por eso no
   lleva la clase rol-repartidor). */
.login-repartidor-unificado .danger{-webkit-text-fill-color:#fff!important}
.login-repartidor-unificado .danger *{color:inherit!important;-webkit-text-fill-color:inherit!important}

/* Badge "MI UBICACIÓN" -> ahora es un bloque grande tipo botón, no un
   texto pequeño difícil de identificar. Cada estado tiene su propio
   color, igual que los demás indicadores de estado de la app. */
.rep-gps-estado{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:16px 14px!important;border-radius:12px!important;font-size:19px!important;font-weight:1000!important;text-align:center;border-width:2px!important;margin-bottom:4px}
.rep-gps-estado.gps-ok{background:#1c5c34!important;border-color:#3ddc84!important;color:#eafff1!important;-webkit-text-fill-color:#eafff1!important}
.rep-gps-estado.gps-sin{background:#5a1f1f!important;border-color:#ff6b6b!important;color:#ffecec!important;-webkit-text-fill-color:#ffecec!important}
.rep-gps-estado.gps-omitida{background:#5a4416!important;border-color:#f5b942!important;color:#fff6e0!important;-webkit-text-fill-color:#fff6e0!important}

/* ================================================================
   "PRODUCTOS" / "RESUMEN DE PAGO" invisibles en el detalle del
   pedido del cliente (y pantallas parecidas): el encabezado h1/h2/h3
   dentro de .panel se fuerza en blanco pensando en el fondo verde de
   la marca, pero estos paneles en particular tienen su fondo forzado
   en blanco -- texto blanco sobre fondo blanco. Se oscurece el
   encabezado solo donde el panel es blanco.
   ================================================================ */
body.rol-cliente .perfil-puntos-panel h1,body.rol-cliente .perfil-puntos-panel h2,body.rol-cliente .perfil-puntos-panel h3,
body.rol-cliente .mis-tiendas-panel h1,body.rol-cliente .mis-tiendas-panel h2,body.rol-cliente .mis-tiendas-panel h3,
body.rol-cliente .mi-clave-panel h1,body.rol-cliente .mi-clave-panel h2,body.rol-cliente .mi-clave-panel h3,
body.rol-cliente .mis-pedidos-panel h1,body.rol-cliente .mis-pedidos-panel h2,body.rol-cliente .mis-pedidos-panel h3,
body.rol-cliente .mis-pedidos-cliente .panel h1,body.rol-cliente .mis-pedidos-cliente .panel h2,body.rol-cliente .mis-pedidos-cliente .panel h3,
body.rol-cliente .pedido-detalle-cliente h1,body.rol-cliente .pedido-detalle-cliente h2,body.rol-cliente .pedido-detalle-cliente h3,
body.rol-cliente #area-refrescable>.panel h1,body.rol-cliente #area-refrescable>.panel h2,body.rol-cliente #area-refrescable>.panel h3{
 color:#17202a!important;-webkit-text-fill-color:#17202a!important;text-shadow:none!important
}
/* El mismo problema afecta el texto normal (p/label/.small/b) dentro
   de esos mismos paneles blancos -- por ejemplo "Cantidad: 7" casi
   invisible en el detalle de un pedido. Aquí hace falta además una
   clase repetida (.panel.perfil-puntos-panel) para ganarle en
   especificidad a la regla ".panel .small{color:casi blanco}" de más
   arriba, que si no, seguiría ganando por tener más clases. */
body.rol-cliente .panel.perfil-puntos-panel p,body.rol-cliente .panel.perfil-puntos-panel label,body.rol-cliente .panel.perfil-puntos-panel .small,body.rol-cliente .panel.perfil-puntos-panel b,
body.rol-cliente .panel.mis-tiendas-panel p,body.rol-cliente .panel.mis-tiendas-panel label,body.rol-cliente .panel.mis-tiendas-panel .small,body.rol-cliente .panel.mis-tiendas-panel b,
body.rol-cliente .panel.mi-clave-panel p,body.rol-cliente .panel.mi-clave-panel label,body.rol-cliente .panel.mi-clave-panel .small,body.rol-cliente .panel.mi-clave-panel b,
body.rol-cliente .panel.mis-pedidos-panel p,body.rol-cliente .panel.mis-pedidos-panel label,body.rol-cliente .panel.mis-pedidos-panel .small,body.rol-cliente .panel.mis-pedidos-panel b,
body.rol-cliente .mis-pedidos-cliente .panel p,body.rol-cliente .mis-pedidos-cliente .panel label,body.rol-cliente .mis-pedidos-cliente .panel .small,body.rol-cliente .mis-pedidos-cliente .panel b,
body.rol-cliente .panel.pedido-detalle-cliente p,body.rol-cliente .panel.pedido-detalle-cliente label,body.rol-cliente .panel.pedido-detalle-cliente .small,body.rol-cliente .panel.pedido-detalle-cliente b,
body.rol-cliente #area-refrescable>.panel p,body.rol-cliente #area-refrescable>.panel label,body.rol-cliente #area-refrescable>.panel .small,body.rol-cliente #area-refrescable>.panel b{
 color:#17202a!important;-webkit-text-fill-color:#17202a!important;text-shadow:none!important
}

body.rol-repartidor .rep-menu-operativo .btn,
body.rol-repartidor .rep-menu-operativo a.btn,
body.rol-repartidor .rep-menu-operativo button.btn{
 background:#119727!important;
 background-image:var(--am-metal-verde)!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;
 border:1px solid #075f16!important;
 border-top-color:#8cf398!important;
 border-bottom-color:#03480d!important;
 border-radius:10px!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30)!important;
 text-shadow:0 1px 2px rgba(0,38,7,.65)!important;
 filter:none!important;
 opacity:1!important;
}
body.rol-repartidor .rep-menu-operativo .btn:hover,
body.rol-repartidor .rep-menu-operativo .btn:focus-visible{
 filter:brightness(1.06)!important;
}
body.rol-repartidor .rep-menu-operativo .btn:active{
 transform:translateY(4px)!important;
 filter:none!important;
 box-shadow:inset 0 6px 11px rgba(0,48,9,.55),inset 0 1px 0 rgba(255,255,255,.16),0 1px 0 #044b0f!important;
}

/* CLIENTE — Mis pedidos en el mismo formato vertical de Mis servicios. */
body.rol-cliente .mis-pedidos-cliente{max-width:760px!important;margin:0 auto!important;overflow-x:hidden!important}
body.rol-cliente .pedidos-historial-vertical{display:flex!important;flex-direction:column!important;gap:14px!important;width:100%!important}
body.rol-cliente .pedido-cliente-historial{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important;margin:0!important;padding:16px!important;border-radius:16px!important;background:#fff!important;color:#17202a!important}
body.rol-cliente .pedido-historial-cabecera{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important;font-size:17px!important}
body.rol-cliente .pedido-historial-fecha{font-size:13px!important;color:#5d6875!important;margin:5px 0 10px!important}
body.rol-cliente .pedido-historial-productos{line-height:1.45!important;margin:8px 0!important;overflow-wrap:anywhere!important}
body.rol-cliente .pedido-historial-resumen{display:flex!important;justify-content:space-between!important;gap:10px!important;padding:10px 0!important;border-top:1px solid #e1e8e3!important;border-bottom:1px solid #e1e8e3!important}
body.rol-cliente .pedido-historial-codigo{margin:10px 0!important;padding:10px 12px!important;border:1px solid #86b992!important;border-radius:12px!important;background:#f4fbf5!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
body.rol-cliente .pedido-historial-codigo strong{font-size:24px!important;letter-spacing:5px!important;color:#075f19!important;background:#fff!important;padding:2px 7px!important;border-radius:7px!important}
body.rol-cliente .pedido-historial-acciones{display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:12px!important;width:100%!important}
body.rol-cliente .pedido-historial-acciones>*{max-width:100%!important;box-sizing:border-box!important}
body.rol-cliente .pedido-cliente-activo{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important}
body.rol-cliente .pedido-cliente-activo .btn{max-width:100%!important;box-sizing:border-box!important}
@media(max-width:600px){body.rol-cliente .mis-pedidos-cliente{width:100%!important}body.rol-cliente .pedido-cliente-historial,body.rol-cliente .pedido-cliente-activo{padding:14px!important}}

/* CLIENTE: lema blanco + una sola tecla contextual */
.rol-cliente .header-cliente .lema-barrio{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;font-family:'Poppins',Arial,sans-serif!important;font-size:clamp(13px,3.4vw,17px)!important;line-height:1.25!important;font-weight:700!important;letter-spacing:.15px!important;margin-top:4px!important;text-shadow:0 2px 4px rgba(0,45,13,.46)!important}
.rol-cliente .nav-cliente-contextual .nav-contextual{position:absolute!important;right:5px!important;top:-30px!important;z-index:90!important;width:auto!important;min-width:0!important;min-height:0!important;padding:5px 10px!important;margin:0!important;font-size:11px!important;line-height:1.15!important;font-weight:750!important;border-radius:9px!important;color:rgba(255,255,255,.88)!important;-webkit-text-fill-color:rgba(255,255,255,.88)!important;background:rgba(0,74,20,.42)!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(0,0,0,.18)!important;text-shadow:0 1px 1px rgba(0,0,0,.45)!important}
.rol-cliente .nav-cliente-contextual .nav-contextual.es-inicio{width:38px!important;height:34px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:20px!important}
.rol-cliente .nav-cliente-contextual .nav-contextual:before{display:none!important}
@media(max-width:520px){.rol-cliente .header-cliente .lema-barrio{font-size:13px!important;margin-top:2px!important}.rol-cliente .nav-cliente-contextual{padding-top:9px!important}.rol-cliente .nav-cliente-contextual .nav-contextual{top:-27px!important;right:2px!important}}

/* ===== TELÉFONO: TODA LA INFORMACIÓN EN VERTICAL, SIN DESPLAZAR LA PANTALLA HACIA LOS LADOS ===== */
@media(max-width:820px){
 html,body{max-width:100%!important;overflow-x:hidden!important}
 main,.panel,.two,.form-grid{max-width:100%!important;box-sizing:border-box!important}
 img,video,canvas{max-width:100%!important;height:auto}
 .table-wrap{overflow:visible!important;box-shadow:none!important;background:transparent!important;border:0!important}
 table.table.am-vertical,table.table.am-vertical tbody{display:block!important;width:100%!important;min-width:0!important;background:transparent!important}
 table.table.am-vertical tr{display:block!important;width:100%!important;box-sizing:border-box!important;margin:0 0 14px!important;padding:6px 12px!important;border:2px solid rgba(66,204,255,.65)!important;border-radius:14px!important;background:rgba(0,0,0,.18)!important}
 table.table.am-vertical tr.am-fila-encabezado{display:none!important}
 table.table.am-vertical td{display:block!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;padding:8px 0!important;text-align:left!important;word-break:break-word;overflow-wrap:anywhere;background:transparent!important}
 table.table.am-vertical td:last-child{border-bottom:0!important}
 table.table.am-vertical td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:12px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;opacity:.78;margin-bottom:2px}
 table.table.am-vertical td .btn,table.table.am-vertical td button,table.table.am-vertical td select,table.table.am-vertical td input{max-width:100%!important;box-sizing:border-box!important}
 table.table.am-vertical td form{display:block!important;margin:4px 0!important}
 table.table.am-vertical td.am-no-basico{display:none!important}
 body .am-volver-pequeno{margin:0!important}
 html body.rol-admin:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) main>h2,html body.rol-admin:not(.rol-cliente):not(.rol-repartidor):not(.rol-empacador) main>div>h2:first-child{font-size:20px!important;line-height:1.2!important;margin:6px 0 10px!important}
 main>form[action="/admin"]>input[name=q]{flex:1 1 100%!important;min-width:0!important}
 main>form[action="/admin"]{gap:8px!important}
 main>form[action="/admin"]>button.btn,main>form[action="/admin"]>a.btn{flex:1 1 0!important;width:auto!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:0 8px!important;font-size:15px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;white-space:nowrap}
 .rol-cliente table.table.am-vertical tr,.rol-repartidor table.table.am-vertical tr{background:rgba(255,255,255,.08)!important}
 /* Tarjetas de pedidos y servicios: lo importante arriba y aprovechando el ancho */
 table.table.am-vertical[data-tarjeta] tr{display:flex!important;flex-wrap:wrap!important;gap:0 10px!important;padding:0 12px 10px!important;overflow:hidden}
 table.table.am-vertical[data-tarjeta] td{flex:1 1 100%!important;width:auto!important;min-width:0!important}
 table.table.am-vertical[data-tarjeta] td:first-child{flex:1 1 100%!important;margin:0 -12px 6px!important;padding:0!important;border:0!important;width:calc(100% + 24px)!important;max-width:none!important}
 table.table.am-vertical[data-tarjeta] td:first-child::before{display:none!important}
 table.table.am-vertical[data-tarjeta] tr.am-fila-encabezado{display:none!important}
 table.table.am-vertical[data-tarjeta] td[data-label="Cliente"]{flex:1 1 48%!important;order:1}
 table.table.am-vertical[data-tarjeta] td[data-label="Estado"]{flex:0 1 auto!important;order:2;white-space:nowrap}
 table.table.am-vertical[data-tarjeta] td[data-label="Estado"] .estado-texto{white-space:nowrap!important}
 table.table.am-vertical[data-tarjeta] td[data-label="Dirección"],table.table.am-vertical[data-tarjeta] td[data-label="Trayecto"]{order:3}
 table.table.am-vertical[data-tarjeta] td[data-label="Total"]{order:4}
 table.table.am-vertical[data-tarjeta] td[data-label="Envío"]{order:5}
 table.table.am-vertical[data-tarjeta] td[data-label="Total"],table.table.am-vertical[data-tarjeta] td[data-label="Envío"]{flex:1 1 40%!important}
 table.table.am-vertical[data-tarjeta] td[data-label="Acciones"]{flex:1 1 100%!important;border-bottom:0!important;order:9}
 table.table.am-vertical[data-tarjeta] td[data-label="Acciones"]::before{display:none!important}
 table.table.am-vertical[data-tarjeta] td .actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important}
 table.table.am-vertical[data-tarjeta] td .actions>*{flex:1 1 calc(50% - 8px)!important;margin:0!important;min-width:0!important}
 table.table.am-vertical[data-tarjeta] td .actions .btn,table.table.am-vertical[data-tarjeta] td .actions button{width:100%!important;min-height:46px!important;font-size:14px!important;padding:8px 6px!important;line-height:1.15!important}
 /* Pedidos/servicios ya cerrados: quietos y compactos (no son la prioridad) */
 table.table.am-vertical[data-tarjeta] tr.am-cerrado{opacity:.68;padding-bottom:6px!important;margin-bottom:8px!important}
 table.table.am-vertical[data-tarjeta] tr.am-cerrado td[data-label="Dirección"],table.table.am-vertical[data-tarjeta] tr.am-cerrado td[data-label="Trayecto"],table.table.am-vertical[data-tarjeta] tr.am-cerrado td[data-label="Total"],table.table.am-vertical[data-tarjeta] tr.am-cerrado td[data-label="Envío"]{display:none!important}
 table.table.am-vertical[data-tarjeta] tr.am-cerrado td:first-child .am-cab-pedido{background:linear-gradient(180deg,#8196a6,#5d7384)!important;font-size:16px!important;padding:9px 12px!important}
 table.table.am-vertical[data-tarjeta] tr.am-cerrado td[data-label="Acciones"] .btn{min-height:38px!important}
}
/* Encabezado del pedido/servicio como tecla azul (abre el detalle) */
.am-cab-pedido{color:#145b92;font-weight:900;text-decoration:none}
@media(max-width:820px){
 .am-cab-pedido{display:block!important;box-sizing:border-box!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,30,60,.55)!important;font-size:19px!important;line-height:1.2!important;padding:12px 14px!important;border-radius:12px 12px 0 0!important;background:linear-gradient(180deg,#2f8fd8,#145b92)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;word-break:break-word}
}
/* Pedidos activos: resalte parpadeante; los cerrados quedan atenuados */
tr.am-prioridad{animation:amPrioridadLatido 1.5s ease-in-out infinite}
@keyframes amPrioridadLatido{0%,100%{box-shadow:0 0 0 0 rgba(31,150,230,0)}50%{box-shadow:0 0 14px 3px rgba(31,150,230,.75)}}
tr.am-cerrado{opacity:.9}
/* Pedido o servicio ATRASADO (alerta): la fila late en rojo y el rótulo lleva su punto, siempre visibles en la lista */
tr.am-alerta{outline:3px solid rgba(225,29,29,.9);outline-offset:-3px;animation:amAlertaLatido 1.2s ease-in-out infinite!important}
@keyframes amAlertaLatido{0%,100%{outline-color:rgba(225,29,29,.25);box-shadow:0 0 0 0 rgba(225,29,29,0)}50%{outline-color:rgba(225,29,29,1);box-shadow:0 0 14px 2px rgba(225,29,29,.6)}}
html body .estado-texto.estado-texto-muy-atrasado{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .estado-texto.estado-texto-atrasado{color:#7a4a00!important;-webkit-text-fill-color:#7a4a00!important}
.estado-texto .punto-alerta{width:11px;height:11px;margin:0 6px 0 0;vertical-align:-1px}
.estado-texto-muy-atrasado .punto-alerta{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
@media(prefers-reduced-motion:reduce){tr.am-alerta{animation:none!important}}
html body main .volver-unificado.volver-unificado{display:none!important}
html body.rol-cliente .nav-cliente>.nav-salir,html body.rol-repartidor .nav-repartidor .nav-salir-repartidor{font-size:14px!important;font-weight:700!important;min-height:36px!important;height:auto!important;line-height:20px!important;padding:7px 16px!important;opacity:1!important;border-radius:10px!important}
html body.rol-cliente .nav-cliente>.nav-salir{top:-34px!important;right:6px!important;min-height:32px!important;padding:5px 14px!important}
html body.rol-repartidor .nav-repartidor-solo-salir .nav-salir-repartidor{top:-14px!important;right:6px!important;height:auto!important;min-height:36px!important;opacity:1!important}

/* Escritorio: la columna Dirección no se estira (evita celdas altísimas y scroll lateral) */
@media(min-width:821px){
 table.table[data-tarjeta][data-basico*="Dirección"] td:nth-child(7){max-width:210px;min-width:130px;white-space:normal;word-break:break-word;font-size:.88em}
 table.table[data-tarjeta][data-basico*="Dirección"] th,table.table[data-tarjeta][data-basico*="Dirección"] td{padding-left:6px;padding-right:6px}
}
@media(prefers-reduced-motion:reduce){tr.am-prioridad{animation:none!important;box-shadow:0 0 10px 2px rgba(31,150,230,.6)}}

/* ===================================================================
   CAJA TÁCTIL — capa final de presentación (solo visual).
   Mantiene el verde metálico en teclas y barra; superficie de trabajo clara,
   texto oscuro (contraste AA), rojo para lo destructivo, todo en vertical.
   =================================================================== */
:root{
  --ct-tecla:var(--am-metal-verde);
  --ct-tecla-roja:linear-gradient(180deg,#e0504f 0%,#bd2423 48%,#8a1212 100%);
  --ct-tecla-borde:#075f16;--ct-roja-borde:#6e0c0c;
  --ct-fondo:#e9f0ea;--ct-papel:#ffffff;--ct-tinta:#12261a;--ct-tinta2:#3a4d41;--ct-linea:#c3d0c7;
  --ct-sombra-tecla:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,58,11,.42),0 4px 0 #055a13,0 7px 11px rgba(0,42,8,.30);
}
/* Teclas: texto blanco con sombra oscura, tamaño táctil */
html body .btn,html body button.btn,html body a.btn{background:var(--ct-tecla)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,30,8,.6)!important;border:1px solid var(--ct-tecla-borde)!important;box-shadow:var(--ct-sombra-tecla)!important;min-height:46px}
html body .btn.red:not(#ct):not(#ct2),html body button.btn.red:not(#ct):not(#ct2),html body a.btn.red:not(#ct):not(#ct2){background:var(--ct-tecla-roja)!important;border-color:var(--ct-roja-borde)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(70,0,0,.4),0 4px 0 #5a0a0a,0 7px 10px rgba(60,0,0,.3)!important}
html body .btn:focus-visible,html body button:focus-visible,html body a:focus-visible,html body input:focus-visible,html body select:focus-visible{outline:3px solid #ffbf1f!important;outline-offset:2px!important}

/* Cabecera compacta de una sola línea (todos los roles) */
html body>header{padding:8px 12px 7px!important;min-height:0!important;background:linear-gradient(180deg,#2fa84f 0%,#12803a 50%,#0a5f25 100%)!important;border-bottom:3px solid #064a1b!important}
html body>header h1{font-size:clamp(17px,5.4vw,24px)!important;line-height:1.15!important;white-space:nowrap!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,30,8,.55)!important}
html body>header h1 img,html body>header h1 .logo,html body>header h1 .logo-negocio{width:34px!important;height:34px!important;max-width:34px!important;border-radius:9px!important}
html body>header .sub{font-size:12px!important;margin-top:2px!important;color:#eaffee!important;opacity:1!important}

/* ADMINISTRADOR: superficie de trabajo clara dentro del marco verde */
html body.rol-admin{background:#0b6a22!important}
html body.rol-admin main{background:var(--ct-fondo)!important;color:var(--ct-tinta)!important;border-radius:16px!important;margin:10px 8px 18px!important;padding:12px!important;box-sizing:border-box!important;box-shadow:inset 0 0 0 1px var(--ct-linea),0 4px 14px rgba(0,30,8,.25)!important;max-width:none!important;width:auto!important}
html body.rol-admin main :is(h1,h2,h3,h4,p,label,li,.small,legend,span:not(.badge):not(.estado-texto)){color:var(--ct-tinta)!important;-webkit-text-fill-color:var(--ct-tinta)!important;text-shadow:none!important}
html body.rol-admin main :is(.btn,button.btn,a.btn) :is(span,b,i){color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.rol-admin main :is(.btn,button){color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.rol-admin main :is(p,li,td,.small,.danger,.success) a:not(.btn):not(.am-cab-pedido){color:#0a5f9c!important;-webkit-text-fill-color:#0a5f9c!important;font-weight:700}
html body.rol-admin main a.am-cab-pedido:not(#ct):not(#ct2){color:#0a4f80!important;-webkit-text-fill-color:#0a4f80!important;text-shadow:none!important}
@media(max-width:820px){html body.rol-admin main a.am-cab-pedido:not(#ct):not(#ct2){color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,30,60,.6)!important}}
html body.rol-admin main h2{font-size:20px!important;line-height:1.2!important;margin:4px 0 10px!important}
html body.rol-admin main :is(.panel,.card,.box,.form-box,.pedido-card,.resumen){background:var(--ct-papel)!important;color:var(--ct-tinta)!important;border:1px solid var(--ct-linea)!important;border-radius:14px!important;box-shadow:0 2px 6px rgba(20,50,30,.12)!important}
html body.rol-admin main :is(input,select,textarea){background:#fff!important;color:var(--ct-tinta)!important;-webkit-text-fill-color:var(--ct-tinta)!important;border:2px solid #7e9686!important;border-radius:10px!important;min-height:44px;box-sizing:border-box}
html body.rol-admin main .success{background:#dff5e3!important;border:2px solid #2a9a49!important;color:#0c3d1a!important}
html body.rol-admin main .danger{background:#fde8e8!important;border:2px solid #c53030!important;color:#7a1010!important}
html body.rol-admin main .danger *{color:#7a1010!important;-webkit-text-fill-color:#7a1010!important}
html body.rol-admin main .notice,html body.rol-admin main .warning,html body.rol-admin main .aviso{background:#fff4d6!important;border:2px solid #d99a00!important;color:#4a3300!important}
html body.rol-admin main .notice *,html body.rol-admin main .warning *,html body.rol-admin main .aviso *{color:#4a3300!important;-webkit-text-fill-color:#4a3300!important}


/* EMPACADOR: misma superficie clara */
html body.rol-empacador{background:#0b6a22!important}
html body.rol-empacador main{background:var(--ct-fondo)!important;color:var(--ct-tinta)!important;border-radius:16px!important;margin:10px 8px 18px!important;padding:12px!important;box-sizing:border-box!important;box-shadow:inset 0 0 0 1px var(--ct-linea),0 4px 14px rgba(0,30,8,.25)!important;max-width:none!important;width:auto!important}
html body.rol-empacador main :is(h1,h2,h3,h4,p,label,li,.small,legend,span:not(.badge):not(.estado-texto)){color:var(--ct-tinta)!important;-webkit-text-fill-color:var(--ct-tinta)!important;text-shadow:none!important}
html body.rol-empacador main :is(.btn,button.btn,a.btn) :is(span,b,i){color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.rol-empacador main :is(.btn,button){color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.rol-empacador main :is(p,li,td,.small,.danger,.success) a:not(.btn):not(.am-cab-pedido){color:#0a5f9c!important;-webkit-text-fill-color:#0a5f9c!important;font-weight:700}
html body.rol-empacador main a.am-cab-pedido:not(#ct):not(#ct2){color:#0a4f80!important;-webkit-text-fill-color:#0a4f80!important;text-shadow:none!important}
@media(max-width:820px){html body.rol-empacador main a.am-cab-pedido:not(#ct):not(#ct2){color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,30,60,.6)!important}}
html body.rol-empacador main h2{font-size:20px!important;line-height:1.2!important;margin:4px 0 10px!important}
html body.rol-empacador main :is(.panel,.card,.box,.form-box,.pedido-card,.resumen){background:var(--ct-papel)!important;color:var(--ct-tinta)!important;border:1px solid var(--ct-linea)!important;border-radius:14px!important;box-shadow:0 2px 6px rgba(20,50,30,.12)!important}
html body.rol-empacador main :is(input,select,textarea){background:#fff!important;color:var(--ct-tinta)!important;-webkit-text-fill-color:var(--ct-tinta)!important;border:2px solid #7e9686!important;border-radius:10px!important;min-height:44px;box-sizing:border-box}
html body.rol-empacador main .success{background:#dff5e3!important;border:2px solid #2a9a49!important;color:#0c3d1a!important}
html body.rol-empacador main .danger{background:#fde8e8!important;border:2px solid #c53030!important;color:#7a1010!important}
html body.rol-empacador main .danger *{color:#7a1010!important;-webkit-text-fill-color:#7a1010!important}
html body.rol-empacador main .notice,html body.rol-empacador main .warning,html body.rol-empacador main .aviso{background:#fff4d6!important;border:2px solid #d99a00!important;color:#4a3300!important}
html body.rol-empacador main .notice *,html body.rol-empacador main .warning *,html body.rol-empacador main .aviso *{color:#4a3300!important;-webkit-text-fill-color:#4a3300!important}
html body a.btn[href="/logout"]:not(#ct):not(#ct2),html body.rol-empacador a.btn[href="/logout"]:not(#ct):not(#ct2){background:var(--ct-tecla-roja)!important;border-color:var(--ct-roja-borde)!important}
/* MENÚ PRINCIPAL: cuadrícula de teclas grandes con icono */
html body .admin-menu-metal{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:8px!important;margin:0 0 12px!important;background:#143d22!important;border:1px solid #0a2a15!important;border-radius:16px!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)!important;box-sizing:border-box!important;width:100%!important}
html body .admin-menu-metal .btn{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-height:108px!important;width:100%!important;margin:0!important;padding:10px 6px!important;font-size:16px!important;font-weight:800!important;line-height:1.15!important;text-align:center!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;letter-spacing:0!important;border-radius:14px!important}
html body .admin-menu-metal .btn::before{display:block!important;font-size:42px!important;line-height:1!important;text-shadow:none!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));content:"▣"}
html body .admin-menu-metal a[href="/admin"]::before{content:"🏠"}
html body .admin-menu-metal a[href$="seccion=pedidos"]::before{content:"📋"}
html body .admin-menu-metal a[href$="seccion=servicios"]::before{content:"🚚"}
html body .admin-menu-metal a[href$="seccion=productos"]::before{content:"📦"}
html body .admin-menu-metal a[href$="seccion=almacenes"]::before{content:"🏬"}
html body .admin-menu-metal a[href$="seccion=clientes"]::before{content:"👥"}
html body .admin-menu-metal a[href$="seccion=creditos"]::before{content:"💳"}
html body .admin-menu-metal a[href$="seccion=repartidores"]::before{content:"🛵"}
html body .admin-menu-metal a[href$="seccion=fondos"]::before{content:"💰"}
html body .admin-menu-metal a[href$="seccion=reportes"]::before{content:"📊"}
html body .admin-menu-metal a[href$="seccion=salud"]::before{content:"🩺"}
html body .admin-menu-metal a[href$="seccion=configuracion"]::before{content:"⚙️"}
html body .admin-menu-metal a[href$="seccion=administradores"]::before{content:"🛡️"}
html body .admin-menu-metal a[href*="seccion=mostrador"]::before{content:"🧾"}
html body .admin-menu-metal a[href*="seccion=horario"]::before{content:"📅"}
html body .admin-menu-metal a[href*="seccion=productos"]::before{content:"📦"}
html body .admin-menu-metal a[href="/admin/fondo"]::before{content:"💰"}
html body .admin-menu-metal a[href="/admin/clave"]::before{content:"🔑"}
html body .admin-menu-metal a[href="/logout"]::before{content:"⏻"}
html body .admin-menu-metal a[href="/logout"]{grid-column:span 1}
@media(min-width:620px){html body .admin-menu-metal{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* Tecla de regreso: barra ancha, no tecla de cuadrícula */
html body .am-volver-pequeno{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:50px!important;font-size:16px!important}

/* Resumen (4 datos) en 2 columnas y tarjetas de acceso sin gris pizarra */
html body.rol-admin .stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin:0 0 12px!important}
html body.rol-admin .stat{background:#fff!important;color:var(--ct-tinta2)!important;border:1px solid var(--ct-linea)!important;border-left:6px solid #16883a!important;border-radius:12px!important;padding:10px 12px!important;margin:0!important;font-size:14px!important;font-weight:700!important;box-shadow:0 2px 5px rgba(20,50,30,.1)!important}
html body.rol-admin .stat b{display:block!important;font-size:28px!important;line-height:1.1!important;color:#075b9c!important;-webkit-text-fill-color:#075b9c!important}
html body.rol-admin .admin-dashboard-metal{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html body.rol-admin .roles{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
html body.rol-admin .role{background:#fff!important;border:1px solid var(--ct-linea)!important;border-left:6px solid #16883a!important;border-radius:14px!important;padding:12px!important;text-align:left!important;box-shadow:0 2px 6px rgba(20,50,30,.1)!important}
html body.rol-admin .role h3{font-size:18px!important;margin:0 0 4px!important;text-align:left!important}
html body.rol-admin .role p{font-size:14px!important;margin:0 0 10px!important;min-height:0!important;color:var(--ct-tinta2)!important;-webkit-text-fill-color:var(--ct-tinta2)!important}
html body.rol-admin .role .btn{display:flex!important;width:100%!important;justify-content:center!important;margin:0!important}

/* Tablas del administrador convertidas a tarjetas verticales claras (sin marco doble) */
@media(max-width:820px){
 html body.rol-admin .table-wrap{border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;overflow:visible!important}
 html body.rol-admin table.table.am-vertical tr{background:#fff!important;border:1px solid var(--ct-linea)!important;border-left:6px solid #16883a!important;border-radius:14px!important;box-shadow:0 2px 6px rgba(20,50,30,.12)!important}
 html body.rol-admin table.table.am-vertical td{background:transparent!important;color:var(--ct-tinta)!important;-webkit-text-fill-color:var(--ct-tinta)!important;border-bottom:1px solid #e1e9e3!important}
 html body.rol-admin table.table.am-vertical td::before{color:var(--ct-tinta2)!important;opacity:1!important}
 html body.rol-admin table.table.am-vertical td .btn{width:100%!important;margin:4px 0!important}
 html body.rol-admin table.table.am-vertical td .btn,html body.rol-admin table.table.am-vertical td button{color:#fff!important;-webkit-text-fill-color:#fff!important}
 html body.rol-admin table.table.am-vertical td form[style*="inline"]{display:block!important}
}

/* Pestañas de la tienda: teclas verde metálico alineadas en cuadrícula, sin deslizar hacia los lados */
html body .tabs-tiendas,html body .tab-botones-tienda{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;overflow:visible!important;flex-wrap:wrap!important;padding:4px 0 14px!important;margin:0 0 6px!important;align-items:stretch!important}
html body .tab-tienda:not(#ct):not(#ct2){display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;width:100%!important;min-height:58px!important;margin:0!important;padding:8px 6px!important;white-space:normal!important;flex:none!important;border-radius:14px!important;font-size:15px!important;font-weight:800!important;line-height:1.15!important;background:var(--ct-tecla)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid var(--ct-tecla-borde)!important;text-shadow:0 1px 2px rgba(0,30,8,.6)!important;box-shadow:var(--ct-sombra-tecla)!important;box-sizing:border-box!important}
html body .tabs-tiendas>.tab-tienda:last-child:nth-child(odd){grid-column:1/-1!important}
html body .tab-tienda.activo:not(#ct):not(#ct2){box-shadow:inset 0 0 0 3px #ffbf1f,inset 0 6px 10px rgba(0,0,0,.45)!important;filter:brightness(.95)!important;transform:translateY(2px)!important}
/* Guardar + Cerrar/Abrir ahora: una al lado de la otra, tamaño decente */
html body .barra-acciones-tienda{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:12px 0 4px!important;align-items:stretch!important}
html body .barra-acciones-tienda>form{display:block!important;flex:1 1 calc(50% - 5px)!important;margin:0!important;min-width:0!important}
html body .barra-acciones-tienda>.btn{flex:1 1 calc(50% - 5px)!important;min-width:0!important}
html body .barra-acciones-tienda .btn:not(#ct):not(#ct2){width:100%!important;min-height:52px!important;margin:0!important;padding:8px 4px!important;font-size:12.5px!important;letter-spacing:0!important;line-height:1.15!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;overflow-wrap:normal!important}
html body>header{position:relative!important}
html body>header .salir-mini{position:absolute!important;right:6px!important;bottom:6px!important;display:inline-block!important;min-height:0!important;width:auto!important;padding:2px 6px!important;font-size:10px!important;font-weight:700!important;line-height:1.2!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;background:rgba(0,40,10,.45)!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:8px!important;text-shadow:none!important;box-shadow:none!important;z-index:6}
html body>header .salir-mini:hover{background:#b02222!important}
html body.rol-admin>header .salir-mini{font-size:14px!important;min-height:36px!important;padding:7px 16px!important;line-height:20px!important;border-radius:10px!important;bottom:8px!important;right:8px!important}
html body.rol-admin>header .salir-mini.salir-es-volver:hover{background:rgba(0,40,10,.7)!important}
html body.rol-admin>header .sub{font-size:10.5px!important;white-space:nowrap!important;padding:0 72px 0 0!important;margin-top:1px!important}
/* Venta en mostrador: lector de código arriba */
html body .mostrador-lector{background:#eef6f0;border:2px solid #16883a;border-radius:14px;padding:12px;margin:0 0 12px}
html body table.table.mostrador-tabla td.mostrador-nombre.mostrador-nombre{font-size:23px!important;font-weight:900!important;line-height:1.2!important;letter-spacing:.2px}
html body table.table.mostrador-tabla td.mostrador-nombre.mostrador-nombre::before{display:none!important;content:none!important}
html body .mostrador-botones{display:flex;gap:8px;align-items:stretch;margin:6px 0}
html body .mostrador-botones .btn{flex:1 1 0;width:auto!important;min-width:0!important;margin:0!important}
html body .mostrador-lector-fila{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
html body .mostrador-lector-fila input{flex:1 1 100%;min-width:0;min-height:50px;font-size:17px}
html body .mostrador-lector-fila .btn{flex:1 1 100%;min-height:52px;padding:8px 14px}
html body .flash{border-radius:12px;padding:12px 14px;margin:0 0 12px;font-size:16px;font-weight:700;border:2px solid}
html body .flash-ok{background:#e8f7ec;border-color:#0d7a2c;color:#0c4a1b!important}
html body .flash-mal{background:#fdeaea;border-color:#c43b3b;color:#8a1212!important}
html body .flash b,html body .flash .flash-grande{color:inherit!important;-webkit-text-fill-color:currentColor!important}
html body .flash .flash-grande{font-size:24px;font-weight:900;margin-top:6px}
html body .clientes-sug{border:2px solid #0d7a2c;border-radius:12px;background:#fff;overflow:hidden;margin:0 0 4px}
html body .cliente-sug{display:block;width:100%;box-sizing:border-box;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid #ddd;background:#fff;font-size:16px;cursor:pointer;color:#12331a!important;-webkit-text-fill-color:#12331a!important}
html body .cliente-sug:last-child{border-bottom:0}
html body .cliente-sug:active{background:#e6f5ea}
html body .cuentas-cobrar summary.cuenta-fila{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 12px;margin:8px 0;border:2px solid #0d7a2c;border-radius:12px;background:#f1faf3;font-size:17px;cursor:pointer;color:#12331a}
html body .cuentas-cobrar summary.cuenta-fila::-webkit-details-marker{display:none}
html body .cuentas-cobrar summary.cuenta-fila::after{content:"▾";font-size:28px;line-height:1;margin-left:4px}
html body .cuentas-cobrar details[open]>summary.cuenta-fila::after{content:"▴"}
html body .cuentas-cobrar .cuenta-debe{margin-left:auto;text-align:right;color:#a31515}
@keyframes fiadoParpadeo{0%,100%{opacity:1}50%{opacity:.35}}
html body .fiado-vencido{display:inline-block;background:#c1121f!important;background-image:none!important;color:#fff!important;font-weight:900;padding:2px 8px;border-radius:8px;animation:fiadoParpadeo 1.2s ease-in-out infinite}
html body .fiado-vencido-btn,html body .btn.fiado-vencido-btn.fiado-vencido-btn.fiado-vencido-btn{background:#c1121f!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;color:#fff!important;border-color:#8f0d17!important;font-weight:900;animation:fiadoParpadeo 1.2s ease-in-out infinite}
html body .cuentas-cobrar details.vencida>summary.cuenta-fila{border-color:#c1121f!important;background:#fff0f0!important}
@media (prefers-reduced-motion:reduce){html body .fiado-vencido,html body .fiado-vencido-btn,html body .btn.fiado-vencido-btn.fiado-vencido-btn.fiado-vencido-btn{animation:none}}
html body .mostrador-aviso{min-height:22px;margin:8px 0 0;font-weight:800;font-size:15px}
html body .mostrador-aviso.ok{color:#0c5a1f!important}
html body .mostrador-aviso.mal{color:#a31515!important}
html body .mostrador-resumen ul{margin:8px 0 4px;padding-left:20px}
/* Las barras pegadas abajo (Guardar de Cargar producto, Cobro del mostrador) no se pegaban: el «overflow-x:hidden» de html y body los vuelve
   contenedores de scroll y «sticky» deja de funcionar. En las pantallas que tienen esas barras se usa «clip», que sigue sin permitir
   desplazamiento lateral pero no crea contenedor de scroll. (Navegadores sin :has() conservan el comportamiento de siempre.) */
html:has(.tab-barra,.mostrador-cobro),html:has(.tab-barra,.mostrador-cobro) body{overflow-x:clip!important;overflow-y:visible!important}
/* Venta en mostrador: la lista completa de productos queda recogida; se vende escaneando, buscando o dictando. */
html body .mostrador-todos{margin:12px 0 4px}
html body .mostrador-todos>summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;padding:10px 40px 10px 14px;position:relative;border:2px dashed #8fae98;border-radius:14px;font-weight:800;font-size:17px;background:#f3faf5}
html body .mostrador-todos>summary::-webkit-details-marker{display:none}
html body .mostrador-todos>summary:after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px}
html body .mostrador-todos[open]>summary{margin-bottom:10px}html body .mostrador-todos[open]>summary:after{content:"▴"}
/* Cobro de la venta en mostrador: queda pegado abajo para que el total, el pago y la devuelta estén siempre a la vista. */
html body .mostrador-cobro{position:sticky;bottom:0;z-index:20;background:#fff;border-top:4px solid #17802f;box-shadow:0 -6px 16px rgba(0,0,0,.18);padding:10px 12px 12px;margin:14px -4px -4px;border-radius:14px 14px 0 0}
html body .mostrador-cobro .cobro-total{font-size:20px;font-weight:900;display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;color:#101828!important;-webkit-text-fill-color:#101828!important}
html body .mostrador-cobro .cobro-total b{font-size:30px;color:#075b9c!important;-webkit-text-fill-color:#075b9c!important}
html body .mostrador-cobro .cobro-fila{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 4px}
html body .mostrador-cobro .cobro-fila .cobro-efectivo{display:block}
html body .mostrador-cobro select,html body .mostrador-cobro input{width:100%;box-sizing:border-box;min-height:50px;font-size:18px;margin:0}
html body .mostrador-cobro .cobro-fila.sin-efectivo{grid-template-columns:1fr}
html body .mostrador-cobro .cobro-devuelta{min-height:0;font-size:22px;font-weight:900;margin:0 0 4px}html body .mostrador-cobro .cobro-devuelta:empty{display:none}
html body .mostrador-cobro .cobro-devuelta.ok{color:#0c5a1f!important;-webkit-text-fill-color:#0c5a1f!important}
html body .mostrador-cobro .cobro-devuelta.mal{color:#a31515!important;-webkit-text-fill-color:#a31515!important}
html body .mostrador-cobro>button{width:100%;min-height:58px;font-size:21px;margin:0}
html body .mostrador-botones .btn{color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:28px;font-weight:900;min-height:52px}
html body .mostrador-total{font-size:20px;font-weight:900;color:#075b9c}
html body tr.mostrador-fila-leida td{background:#fff3b0!important}
/* Venta en mostrador: bandeja bajo el buscador (lo que lleva el cliente y las coincidencias). El resumen de texto del lector queda oculto: la bandeja lo reemplaza. */
html body .mostrador-bandeja{background:#fff;border:2px solid #16883a;border-radius:14px;padding:10px;margin:0 0 12px}
html body .mostrador-bandeja-titulo{font-weight:900;font-size:16px;margin:0 0 8px;color:#0c5a1f}
html body .mostrador-tarjeta{border:1px solid #cfe3d4;border-radius:12px;padding:10px;margin:0 0 8px;background:#f8fcf9}
html body .mostrador-tarjeta.sugerida{background:#fffbe6;border-color:#f0d66b}
html body .mostrador-tarjeta.recien{background:#fff3b0}
html body .mostrador-tarjeta-nombre{font-size:21px;font-weight:900;line-height:1.2}
html body .mostrador-tarjeta-sub{font-weight:800;color:#075b9c;min-height:18px}
html body .mostrador-tarjeta .mostrador-botones input.bm-cant{flex:0 0 84px;width:84px;min-width:0;text-align:center;font-size:22px;font-weight:900;margin:0}
html body .mostrador-lector .mostrador-resumen{display:none}
/* Aviso «desliza la tabla»: ya no se desliza nada */
html body .am-aviso-desliza,html body .desliza-tabla,html body .table-hint{display:none!important}

/* MICRÓFONO PRINCIPAL DEL CLIENTE: una sola pieza, micrófono realista con tres estados (normal / grabando / leyendo).
   Es solo apariencia: la grabación y la búsqueda siguen en buscarProductoEnTiendasPorVoz(), que pone las clases
   «grabando» y «procesando» sobre #btnArobanNecesito. La cuenta de 30 s del anillo (micpCuenta) debe coincidir con
   MIC_PRINCIPAL_MAX_MS del script. */
.mic-principal{position:relative;display:block;box-sizing:border-box;width:112px;height:112px;margin:16px auto 14px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;overflow:visible}
/* Las reglas generales de TODOS los botones (verde metálico, borde, sombra, hundimiento al tocar) llevan !important:
   aquí se anulan solo para este botón, que dibuja su propio cuerpo. */
html body button.mic-principal,html body button.mic-principal:hover,html body button.mic-principal:focus,html body button.mic-principal:active{background:none!important;background-image:none!important;border:0!important;border-radius:50%!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;transform:none!important;color:inherit!important;min-height:0!important;min-width:0!important;transition:none!important}
.mic-principal-disco{position:absolute;inset:0;border-radius:50%;display:block;transition:transform .12s ease;background:radial-gradient(circle at 35% 28%,#82b0e0 0%,#4a80b8 55%,#2e5f93 100%);box-shadow:0 8px 18px rgba(10,35,64,.35),inset 0 2px 4px rgba(255,255,255,.28),inset 0 -6px 10px rgba(0,0,0,.35),0 0 0 0 rgba(59,142,224,0);animation:micpRespira 2.6s ease-in-out infinite}
.mic-principal-dibujo{position:absolute;left:50%;top:50%;width:60px;height:82px;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));pointer-events:none}
.mic-principal-anillo{position:absolute;left:-9px;top:-9px;width:calc(100% + 18px);height:calc(100% + 18px);pointer-events:none;overflow:visible}
.mic-principal-anillo circle,.mic-principal-anillo rect{fill:none;stroke-linecap:round}
.mp-pista{stroke:rgba(23,50,77,.12);stroke-width:4}
.mp-cuenta{stroke:#ff8a8a;stroke-width:5;stroke-dasharray:440;stroke-dashoffset:0;opacity:0}
.mp-giro{stroke:#3b8ee0;stroke-width:5;stroke-dasharray:110 330;opacity:0;transform-box:view-box;transform-origin:75px 75px}
.mic-principal-pulso{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0}
.mic-principal:active .mic-principal-disco{transform:scale(.97)}
.mic-principal:focus-visible{outline:3px solid #8cc8ff;outline-offset:8px}
.mic-principal.grabando .mic-principal-disco{animation:none;background:radial-gradient(circle at 35% 28%,#d85a5a 0%,#a42020 55%,#5e0d0d 100%);box-shadow:0 8px 18px rgba(120,10,10,.45),inset 0 2px 4px rgba(255,255,255,.3),inset 0 -6px 10px rgba(0,0,0,.4)}
.mic-principal.grabando .mp-cuenta{opacity:1;animation:micpCuenta 30s linear forwards}
.mic-principal.grabando .mic-principal-pulso{border:3px solid rgba(235,60,60,.55);animation:micpPulso 1.3s ease-out infinite}
.mic-principal.procesando .mic-principal-disco{animation:none;background:radial-gradient(circle at 35% 28%,#8cb8e6 0%,#5088bf 55%,#2e5f93 100%)}
.mic-principal.procesando .mic-principal-dibujo{opacity:.82}
.mic-principal.procesando .mp-giro{opacity:1;animation:micpGiro .9s linear infinite}
@keyframes micpRespira{0%,100%{box-shadow:0 8px 18px rgba(10,35,64,.35),inset 0 2px 4px rgba(255,255,255,.28),inset 0 -6px 10px rgba(0,0,0,.35),0 0 0 0 rgba(59,142,224,0)}50%{box-shadow:0 8px 18px rgba(10,35,64,.35),inset 0 2px 4px rgba(255,255,255,.28),inset 0 -6px 10px rgba(0,0,0,.35),0 0 20px 4px rgba(59,142,224,.5)}}
@keyframes micpCuenta{from{stroke-dashoffset:0}to{stroke-dashoffset:440}}
@keyframes micpGiro{to{transform:rotate(360deg)}}
@keyframes micpPulso{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.34);opacity:0}}
@media (prefers-reduced-motion:reduce){.mic-principal-disco,.mic-principal.grabando .mic-principal-pulso,.mic-principal.procesando .mp-giro{animation:none!important}.mic-principal.grabando .mp-cuenta{animation-duration:30s}}


body.rol-cliente .cabecera-medios-nueva{background:transparent!important;border:0!important;box-shadow:none!important;padding:2px 0!important}
/* Micrófono de cada tienda: el MISMO botón verde metálico del buscador de tiendas, dentro del buscador de productos, a la derecha. */
body.rol-cliente .buscador-producto-voz-wrap.buscador-producto-solo{display:flex!important;align-items:stretch!important;gap:0!important;border:2px solid #8d9aa2!important;border-radius:18px!important;overflow:hidden!important;background:#fff!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.08),0 5px 14px rgba(10,35,48,.10)!important;padding:0!important}
body.rol-cliente .buscador-producto-solo #buscar_producto_cliente{flex:1 1 auto!important;width:auto!important;min-width:0!important;border:0!important;box-shadow:none!important;background:#fff!important;border-radius:0!important;margin:0!important;padding:14px 13px!important}
body.rol-cliente .buscador-producto-solo .acciones-tienda-activa-mount{flex:0 0 92px;width:92px;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
body.rol-cliente .buscador-producto-solo .panel-medios-tienda.panel-medios-compacto,body.rol-cliente .buscador-producto-solo .acciones-media-cabecera{display:block!important;height:100%!important;width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
body.rol-cliente .buscador-producto-solo .btn-micro-producto{width:100%!important;height:100%!important;min-height:50px!important}
@media(max-width:420px){body.rol-cliente .buscador-producto-solo .acciones-tienda-activa-mount{flex-basis:78px;width:78px}}

/* Tiendas del cliente: estrella de favorita en cada tarjeta y 'Ver más tiendas'. Son <span role="switch"> a propósito
   (no role="button") para no heredar las reglas globales de botón verde. */
body.rol-cliente .tienda-favorita-fila{display:flex;justify-content:center;margin:12px 0 4px}
body.rol-cliente .tarjeta-tienda-clic .tienda-estrella{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;box-sizing:border-box;border-radius:999px;font-size:17px;font-weight:800;line-height:1.1;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .15s ease;background:#fff!important;background-image:none!important;color:#5b6b78!important;border:2px dashed #a9b7c2!important;text-shadow:none!important;box-shadow:none!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-estrella.encendida{background:#ffd54a!important;color:#4a3400!important;border:2px solid #d79a00!important;box-shadow:0 2px 8px rgba(215,154,0,.45)!important}
body.rol-cliente .tarjeta-tienda-clic .tienda-estrella:active{transform:scale(.88)}
body.rol-cliente .tienda-estrella:focus-visible,body.rol-cliente .mas-tiendas-boton:focus-visible{outline:3px solid #8cc8ff;outline-offset:2px}
html body.rol-cliente .mas-tiendas-cliente{max-width:560px;margin:4px auto 10px;padding:0 10px;box-sizing:border-box}
html body.rol-cliente .mas-tiendas-boton{display:block;text-align:center;padding:13px 14px;border-radius:14px;background:#f4f8fb!important;background-image:none!important;color:#1b4a6b!important;border:1px solid #b6c9d7!important;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.14)!important;text-shadow:none!important;user-select:none;-webkit-tap-highlight-color:transparent}
body.rol-cliente .mas-tiendas-lista[hidden]{display:none!important}
body.rol-cliente .mas-tiendas-lista{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:12px}
body.rol-cliente .mas-tiendas-lista .tarjeta-tienda-clic{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important}
/* Carrito: los importes de Subtotal y Costo de envío salían en blanco sobre el fondo blanco del panel (la regla global strong,b{color:#fff}). */
.panel.cart div[style*="space-between"]>b{color:#173b2d!important}
/* Explicaciones de las pantallas: solo una línea pequeña; el texto se abre al tocarla (no estorba lo importante). */
html body details.ayuda-pleg{margin:2px 0 10px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html body details.ayuda-pleg>summary{display:inline-block!important;list-style:none!important;cursor:pointer;font-size:14px!important;font-weight:700!important;color:#075b9c!important;-webkit-text-fill-color:#075b9c!important;background:#e8f1f8!important;border:1px solid #bcd3e6!important;border-radius:999px!important;padding:4px 12px!important;margin:0!important}
html body details.ayuda-pleg>summary::-webkit-details-marker{display:none!important}
html body details.ayuda-pleg>summary::marker{content:""!important}
html body details.ayuda-pleg[open]>summary{background:#d7e8f5!important}
html body details.ayuda-pleg>.ayuda-cont{margin-top:8px!important;padding:8px 12px!important;background:#f4f8fb!important;border-left:4px solid #bcd3e6!important;border-radius:8px!important}
html body details.ayuda-pleg>.ayuda-cont p,html body details.ayuda-pleg>.ayuda-cont div{margin:4px 0!important}