/* =====================================================================
   DOMICILIOS — identidad visual
   Paleta tomada del logo: azul noche, dorado, rojo-naranja y crema.
   Tipografía: Baloo 2 (display, redondeada y rotunda, como el rótulo
   del logo) + Inter (texto, muy legible en pantallas pequeñas).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --azul-noche: #0d2559;
    --azul-medio: #143a86;
    --dorado: #f2b53c;
    --rojo: #e8432f;
    --crema: #f7ecd3;
    --verde-ok: #2fa66a;
    --violeta: #7c5cff;
    --turquesa: #1aa3ad;
    --texto-oscuro: #1a1a2b;
    --sombra: 0 10px 30px rgba(13,37,89,.15);
    --radio: 16px;

    /* Tintes derivados del logo, para reemplazar grises genéricos
       y que cada superficie neutra siga sintiéndose "de la marca" */
    --crema-fondo: #fbf5e7;      /* fondo general de la página */
    --dorado-suave: #fdf1da;     /* superficies cálidas (placeholders, hover) */
    --azul-suave: #eaeff8;       /* superficies frías (bordes, fondos sutiles) */
    --borde-suave: #ece2c8;      /* bordes de tarjetas, con tinte cálido */
    --gris-texto: #6b6456;       /* texto secundario, con tinte cálido en vez de gris puro */
    --gris-texto-claro: #8f8975;

    /* Fondo de las tarjetas donde aparece el nombre del negocio
       (.card-negocio) y el nombre de cada producto (.card-producto).
       Los temas de celebración del mes (assets/temas.css) sobreescriben
       esta variable junto con las de arriba. */
    --fondo-tarjeta: #eaf1ff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
/* El long-press sobre imágenes no debe abrir el menú nativo del navegador
   (guardar imagen, abrir en pestaña nueva, etc.): se siente a navegador,
   no a app. El bloqueo real del contextmenu se hace en JS (footer.php)
   porque CSS solo no puede evitarlo; aquí solo evitamos el arrastre. */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;}
html{
    /* Evita el "bounce" gomoso del navegador y el zoom accidental: se siente más a app */
    overscroll-behavior-y:none;
    -webkit-text-size-adjust:100%;
}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--crema-fondo);
    color:var(--texto-oscuro);
    line-height:1.5;
    overscroll-behavior-y:contain;
    min-height:100dvh;
    animation:app-entrada .28s ease both;
}
@keyframes app-entrada{
    from{opacity:0;}
    to{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
    body{animation:none;}
}
h1,h2,h3,h4,.brand,.btn,.chip,.step-label{
    font-family:'Baloo 2', system-ui, sans-serif;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;touch-action:manipulation;}

/* ---------- Feedback táctil tipo app nativa ----------
   Los :hover no existen en móvil; lo que hace sentir "nativo" es el
   :active inmediato (se hunde/oscurece al tocar), no una animación lenta. */
a, button, .btn, .card-negocio, .card-producto, .panel-menu a, .bottom-tabs a{
    -webkit-user-select:none;user-select:none;
    transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(.95);}
.card-negocio:active, .card-producto:active{transform:scale(.97);}
.panel-menu a:active, .bottom-tabs a:active{transform:scale(.93);opacity:.75;}

.container{max-width:1100px;margin:0 auto;padding:0 18px;}

/* ---------- Topbar ---------- */
.topbar{
    background:linear-gradient(135deg,var(--azul-noche),var(--azul-medio));
    color:var(--crema);
    position:sticky;top:0;z-index:50;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 6px 18px rgba(13,37,89,.18);
    padding-top:env(safe-area-inset-top);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
}
.topbar-inner{display:flex;align-items:center;gap:10px;padding:10px 18px;max-width:1200px;margin:0 auto;min-height:52px;}
.brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;color:var(--crema);flex-shrink:0;}
.brand img{height:36px;width:36px;border-radius:11px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.25);}
.brand small{display:block;font-family:'Inter';font-weight:500;font-size:.6rem;color:var(--dorado);letter-spacing:.03em;}
.topbar nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.topbar nav a, .topbar nav .btn-ghost{
    color:var(--crema);font-weight:600;font-size:.92rem;padding:8px 12px;border-radius:10px;
}
.topbar nav a:hover{background:rgba(255,255,255,.1);}
.topbar nav a:active{background:rgba(255,255,255,.16);}
.badge-rol{
    background:var(--dorado);color:var(--azul-noche);font-weight:700;
    padding:4px 10px;border-radius:20px;font-size:.72rem;
}

/* ---------- Botón hamburguesa + iconos de la topbar ---------- */
.btn-icono{
    display:inline-flex;align-items:center;justify-content:center;position:relative;
    width:38px;height:38px;border-radius:11px;border:none;background:transparent;color:var(--crema);
    flex-shrink:0;
}
.btn-icono:hover{background:rgba(255,255,255,.1);}
.btn-icono:active{background:rgba(255,255,255,.18);}
.icono-badge{
    position:absolute;top:2px;right:2px;background:var(--rojo);color:#fff;font-size:.62rem;font-weight:800;
    min-width:16px;height:16px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    padding:0 3px;border:1.5px solid var(--azul-noche);
}
.topbar-iconos{display:flex;align-items:center;gap:2px;margin-left:auto;}
@media(min-width:761px){ .topbar-iconos{margin-left:18px;} .topbar nav{margin-left:10px;} }

/* ---------- Pastilla de ubicación ("Enviar a Ciudad") ---------- */
.ubicacion-pill{
    display:flex;align-items:center;gap:7px;color:var(--crema);font-size:.82rem;
    padding:6px 4px;flex-shrink:1;min-width:0;
}
.ubicacion-pill svg{flex-shrink:0;color:var(--dorado);}
.ubicacion-pill span{display:flex;flex-direction:column;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85;}
.ubicacion-pill strong{color:#fff;font-weight:700;font-size:.86rem;}

/* En móvil, el bottom-tabs / panel-menu ya hacen de navegación principal,
   así que la topbar se reduce a lo esencial: hamburguesa + marca + iconos. */
@media (max-width:760px){
    .topbar-inner{padding:8px 10px;min-height:46px;gap:6px;}
    .brand{font-size:1.02rem;}
    .brand img{height:30px;width:30px;}
    .brand small{display:none;}
    .topbar nav a:not(.nav-esencial){display:none;}
    .badge-rol{display:none;}
    .ubicacion-pill{display:none;}
}
@media (min-width:761px){
    #btn-menu{display:none;}
}

/* ---------- Menú lateral (drawer) ---------- */
.drawer-fondo{
    position:fixed;inset:0;background:rgba(13,37,89,.55);z-index:98;opacity:0;transition:opacity .25s ease;
}
.drawer-fondo.visible{opacity:1;}
.drawer{
    position:fixed;top:0;bottom:0;left:0;width:min(300px,84vw);z-index:99;
    background:var(--crema-fondo);box-shadow:8px 0 30px rgba(13,37,89,.25);
    transform:translateX(-100%);transition:transform .28s ease;
    display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.abierto{transform:translateX(0);}
.drawer-cabeza{
    display:flex;align-items:center;gap:12px;padding:18px 16px;
    background:linear-gradient(135deg,var(--azul-noche),var(--azul-medio));color:#fff;
}
.drawer-cabeza img{height:38px;width:38px;border-radius:11px;object-fit:cover;}
.drawer-cabeza div{flex:1;line-height:1.3;}
.drawer-cabeza strong{display:block;font-family:'Baloo 2';font-size:1rem;}
.drawer-cabeza small{color:var(--dorado);font-size:.7rem;}
.drawer-cabeza .btn-icono{color:#fff;}
.drawer-links{display:flex;flex-direction:column;padding:10px;gap:2px;}
.drawer-links a{
    padding:13px 14px;border-radius:12px;font-weight:600;font-size:.95rem;color:var(--azul-noche);
}
.drawer-links a:hover, .drawer-links a:active{background:var(--azul-suave);}

/* ---------- Botones ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--rojo);color:#fff;border:none;padding:11px 20px;
    border-radius:12px;font-weight:700;font-size:.95rem;
    transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 6px 16px rgba(232,67,47,.35);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(232,67,47,.4);}
.btn-dorado{background:var(--dorado);color:var(--azul-noche);box-shadow:0 6px 16px rgba(242,181,60,.4);}
.btn-azul{background:var(--azul-medio);color:#fff;box-shadow:0 6px 16px rgba(20,58,134,.4);}
.btn-outline{background:transparent;border:2px solid var(--azul-medio);color:var(--azul-medio);box-shadow:none;}
.btn-ghost{background:transparent;border:none;color:inherit;box-shadow:none;}
.btn-sm{padding:7px 14px;font-size:.82rem;border-radius:9px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* ---------- Hero ---------- */
.hero{
    background:radial-gradient(circle at 20% 20%, rgba(242,181,60,.18), transparent 55%),
               linear-gradient(135deg,var(--azul-noche),var(--azul-medio));
    color:var(--crema);padding:28px 0 34px;
    border-radius:0 0 28px 28px;
    box-shadow:0 10px 24px rgba(13,37,89,.18);
}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.hero-texto{flex:1;min-width:0;}
.hero h1{
    font-size:2.2rem;margin:0 0 2px;color:#fff;letter-spacing:-.02em;line-height:1;
}
.hero-slogan{margin:2px 0 10px;color:var(--dorado);font-family:'Baloo 2';font-weight:700;font-size:1.15rem;line-height:1.2;}
.hero-sub{margin:0 0 8px;color:var(--crema);opacity:.9;max-width:480px;font-size:.88rem;}
.hero-logo{flex-shrink:0;}
.hero-logo img{height:96px;width:96px;border-radius:22px;object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.3);}
@media(min-width:761px){
    .hero{padding:44px 0 50px;}
    .hero h1{font-size:3rem;}
    .hero-slogan{font-size:1.5rem;}
    .hero-sub{font-size:1rem;}
    .hero-logo img{height:140px;width:140px;border-radius:30px;}
}
@media(max-width:560px){
    .hero-logo img{height:72px;width:72px;border-radius:18px;}
}
.recargo-pill{
    display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
    padding:8px 16px;border-radius:30px;font-size:.85rem;margin-top:10px;color:var(--dorado);font-weight:700;
}

/* ---------- Buscador del hero ---------- */
.buscador{
    display:flex;align-items:center;gap:10px;background:var(--fondo-tarjeta);border-radius:16px;
    padding:6px 6px 6px 18px;margin-top:18px;box-shadow:0 12px 28px rgba(13,37,89,.28);
    max-width:640px;
}
.buscador svg{color:var(--gris-texto-claro);flex-shrink:0;}
.buscador input{
    flex:1;border:none;background:transparent;padding:12px 4px;font-size:.95rem;
    color:var(--texto-oscuro);min-width:0;
}
.buscador input:focus{outline:none;box-shadow:none;}
.buscador .btn{flex-shrink:0;border-radius:12px;}
@media(max-width:480px){
    .buscador{padding:5px 5px 5px 14px;}
    .buscador .btn{padding:11px 16px;font-size:.85rem;}
}

/* ---------- Secciones (vitrinas de negocios, NO categorías) ---------- */
.seccion-titulo{
    display:flex;align-items:baseline;gap:10px;margin:36px 0 16px;
}
.seccion-titulo h2{font-size:1.4rem;color:var(--azul-noche);margin:0;}
.seccion-titulo .linea{flex:1;height:3px;background:linear-gradient(90deg,var(--dorado),transparent);border-radius:3px;}

/* Encabezado simple, tipo "Explora por categorías  ›  Ver todas" */
.seccion-cabeza{display:flex;align-items:center;justify-content:space-between;margin:30px 0 14px;}
.seccion-cabeza h2{font-size:1.25rem;color:var(--azul-noche);margin:0;}

/* ---------- Categorías (scroll horizontal de iconos) ---------- */
.categorias-scroll{
    display:flex;gap:14px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.categorias-scroll::-webkit-scrollbar{display:none;}
.categoria-item{
    flex-shrink:0;width:78px;display:flex;flex-direction:column;align-items:center;gap:7px;
    text-align:center;scroll-snap-align:start;
}
.categoria-icono{
    width:60px;height:60px;border-radius:18px;background:var(--azul-suave);
    display:flex;align-items:center;justify-content:center;font-size:1.7rem;
    box-shadow:0 4px 10px rgba(13,37,89,.08);border:1px solid var(--borde-suave);
}
.categoria-item span:last-child{font-size:.74rem;font-weight:600;color:var(--azul-noche);line-height:1.2;}
.categoria-item:active .categoria-icono{transform:scale(.93);background:var(--dorado-suave);}

/* ---------- Carrusel de negocios populares ---------- */
.carrusel-wrap{position:relative;}
.carrusel-negocios{
    display:flex;gap:16px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carrusel-negocios::-webkit-scrollbar{display:none;}
.carrusel-negocios .card-negocio{flex:0 0 210px;scroll-snap-align:start;}
.carrusel-flecha{
    position:absolute;right:-6px;top:40%;transform:translateY(-50%);
    width:38px;height:38px;border-radius:50%;background:var(--fondo-tarjeta);border:1px solid var(--borde-suave);
    color:var(--azul-noche);display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(13,37,89,.18);
}
.carrusel-flecha:active{transform:translateY(-50%) scale(.9);}
@media(max-width:760px){ .carrusel-flecha{display:none;} }

.grid-negocios{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.card-negocio{
    background:var(--fondo-tarjeta);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
    transition:transform .18s ease, border-color .18s ease;border:1px solid var(--borde-suave);
}
.card-negocio:hover{transform:translateY(-4px);border-color:var(--dorado);}
.card-negocio .imagen{position:relative;height:120px;background:linear-gradient(135deg,var(--azul-medio),var(--azul-noche));display:flex;align-items:center;justify-content:center;}
.card-negocio .imagen img{width:100%;height:100%;object-fit:cover;}
.card-negocio .info{padding:14px 14px 14px 20px;}
.card-negocio h4{margin:0 0 2px;font-size:1.02rem;color:var(--azul-noche);}
.card-negocio .desc{margin:0;font-size:.83rem;color:var(--gris-texto);}

/* Badge "Abierto" (esquina superior izq.) */
.badge-abierto{
    position:absolute;top:8px;left:8px;z-index:1;background:var(--verde-ok);color:#fff;
    font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.badge-cerrado{background:#a3221b;}
.card-negocio.negocio-cerrado{opacity:.62;}
.card-negocio.negocio-cerrado .imagen{filter:grayscale(.5);}

/* Logo circular superpuesto entre la imagen y la info, tipo apps de domicilios */
.logo-mini{
    position:absolute;left:14px;bottom:-18px;z-index:2;width:38px;height:38px;border-radius:50%;
    background:#fff;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2);
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;overflow:hidden;
}
.logo-mini img{width:100%;height:100%;object-fit:cover;}
.card-negocio .categoria{font-size:.76rem;color:var(--gris-texto-claro);margin:1px 0 8px;}
.card-negocio .fila-precio{font-size:.78rem;color:var(--gris-texto);}
.card-negocio .fila-precio strong{color:var(--azul-noche);}

/* Sección dedicada a negocios con fila (D1, Éxito, Dollar City, etc.), que
   cobran un recargo de domicilio distinto al general de la app. */
.seccion-titulo.seccion-fila .linea{background:linear-gradient(90deg,#e8541e,transparent);}
.seccion-fila-nota{margin:-10px 0 16px;color:#8a5a00;background:#fff6df;border:1px solid #f0dfa8;padding:8px 12px;border-radius:8px;font-size:.85rem;display:inline-block;}
.badge-recargo{
    position:absolute;top:8px;right:8px;z-index:1;background:#e8541e;color:#fff;
    font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ---------- Productos ---------- */
.grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.card-producto{background:var(--fondo-tarjeta);border-radius:14px;overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--borde-suave);display:flex;flex-direction:column;transition:border-color .18s ease;}
.card-producto:hover{border-color:var(--dorado);}
.card-producto .imagen{height:130px;background:var(--dorado-suave);}
.card-producto .imagen img{width:100%;height:100%;object-fit:cover;}
.card-producto .info{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-producto h4{margin:0;font-size:.98rem;}
.card-producto .desc{font-size:.8rem;color:var(--gris-texto-claro);flex:1;}
.card-producto .precio{font-weight:800;color:var(--rojo);font-size:1.05rem;}

/* ---------- Chips / estado ---------- */
.chip{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:700;}
.chip-pendiente{background:#fde9c8;color:#8a5a00;}
.chip-aceptado{background:#dbe6ff;color:#1d3fa0;}
.chip-preparando{background:#ffe4d1;color:#a13d00;}
.chip-listo{background:#fff3b0;color:#7a5b00;}
.chip-en_camino{background:#d6f0ff;color:#02628f;}
.chip-entregado{background:#d8f5e3;color:#177a45;}
.chip-cancelado{background:#fbdada;color:#a3221b;}
.chip-pago-pendiente{background:#ece5ff;color:#5433c4;}
.chip-pago-aprobado{background:#d8f5e3;color:#177a45;}
.chip-pago-rechazado{background:#fbdada;color:#a3221b;}

/* ---------- Formularios ---------- */
.form-card{background:var(--fondo-tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);padding:28px;max-width:440px;margin:40px auto;}
.form-card h2{margin-top:0;color:var(--azul-noche);}
label{display:block;font-weight:600;font-size:.85rem;margin:14px 0 6px;color:var(--azul-noche);}
input,select,textarea{
    width:100%;padding:12px 13px;border-radius:12px;border:1.5px solid var(--borde-suave);
    font-family:inherit;font-size:16px;background:var(--crema-fondo);
    -webkit-appearance:none;appearance:none;transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dorado);box-shadow:0 0 0 3px rgba(242,181,60,.25);}
input:active,select:active,textarea:active{background:#fff;}
.error-msg{background:#fbdada;color:#a3221b;padding:10px 14px;border-radius:10px;font-size:.85rem;margin-bottom:12px;}
.ok-msg{background:#d8f5e3;color:#177a45;padding:10px 14px;border-radius:10px;font-size:.85rem;margin-bottom:12px;}

/* ---------- Layout de panel (admin / negocio / domiciliario) ---------- */
/* Barra superior de secciones: cada sección tiene su propio color (mismo
   significado = mismo color en toda la app, ver mapa de colores más abajo).
   Si no caben todos los botones en una fila, pasan solos a una segunda
   fila (flex-wrap) — así queda organizado sin importar cuántas secciones
   se agreguen más adelante. */
.panel{display:flex;flex-direction:column;min-height:calc(100vh - 66px);}
.panel-menu{
    position:fixed;left:0;right:0;bottom:0;z-index:9070;width:auto;
    display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:stretch;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:rgba(13,37,89,.96);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 -2px 16px rgba(13,37,89,.25);
    border-top:1px solid rgba(255,255,255,.08);
    overflow-x:visible;
    gap:0;
    /* Fuerza su propia capa (aceleración por hardware): evita que en
       Safari/iOS y algunos navegadores móviles la barra fija no se pinte
       hasta el primer scroll. */
    -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    will-change:transform;
}
.panel-menu a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:6px 2px;white-space:nowrap;border:none;border-radius:12px;
    font-size:.64rem;font-weight:700;color:rgba(247,236,211,.65);min-width:0;
    background:transparent;
}
.panel-menu a .tab-icon{font-size:1.28rem;line-height:1;}
.panel-menu a .tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.panel-menu a:hover,.panel-menu a.activo{background:rgba(255,255,255,.08);color:var(--color-sec, var(--dorado));box-shadow:none;}
/* Espacio reservado para que el contenido del panel nunca quede detrás
   de la barra fija, sea cual sea su alto real (el JS de footer.php lo
   mide igual que hace con --alto-bottom-tabs de clientes). */
.panel-content{flex:1;padding:26px 26px calc(84px + env(safe-area-inset-bottom));max-width:960px;}

/* Mapa de colores por sección: el mismo concepto (resumen, personas,
   negocio/pedidos, historial/organización, ajustes/ubicación) conserva
   siempre el mismo color, se vea en el rol que se vea. */
.panel-menu a[data-sec="resumen"],
.panel-menu a[data-sec="entregas"]{--color-sec:var(--azul-noche);--color-sec-suave:var(--azul-suave);}
.panel-menu a[data-sec="usuarios"],
.panel-menu a[data-sec="productos"]{--color-sec:#b8860b;--color-sec-suave:var(--dorado-suave);}
.panel-menu a[data-sec="negocios"],
.panel-menu a[data-sec="pedidos"]{--color-sec:var(--rojo);--color-sec-suave:#fbdada;}
.panel-menu a[data-sec="secciones"],
.panel-menu a[data-sec="historial"]{--color-sec:var(--verde-ok);--color-sec-suave:#d8f5e3;}
.panel-menu a[data-sec="ajustes"],
.panel-menu a[data-sec="ubicacion"]{--color-sec:var(--violeta);--color-sec-suave:#ece5ff;}
.panel-menu a[data-sec="comprobantes"]{--color-sec:var(--turquesa);--color-sec-suave:#d9f2f3;}
.panel-menu a[data-sec="estados"]{--color-sec:var(--dorado);--color-sec-suave:var(--dorado-suave);}

.stat-card{background:var(--fondo-tarjeta);border-radius:14px;box-shadow:var(--sombra);padding:18px;text-align:center;border:1px solid var(--borde-suave);}
.stat-card .num{font-size:1.8rem;font-weight:800;color:var(--azul-noche);}
.stat-card .lbl{font-size:.8rem;color:var(--gris-texto);}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px;}

table{width:100%;border-collapse:collapse;background:var(--fondo-tarjeta);border-radius:14px;overflow:hidden;box-shadow:var(--sombra);}
th,td{padding:11px 14px;text-align:left;font-size:.87rem;border-bottom:1px solid var(--borde-suave);}
th{background:var(--azul-noche);color:var(--crema);font-weight:600;}
tr:last-child td{border-bottom:none;}

.card-pedido{background:var(--fondo-tarjeta);border-radius:14px;box-shadow:var(--sombra);padding:16px 18px;margin-bottom:14px;border:1px solid var(--borde-suave);}
.card-pedido .top-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.card-pedido .items{font-size:.85rem;color:var(--gris-texto);margin:8px 0;}
.card-pedido .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

/* ---------- Signature element: barra de progreso con mensajero ---------- */
.tracker{margin:26px 0 10px;position:relative;}
.tracker-track{position:relative;height:6px;background:var(--azul-suave);border-radius:6px;margin:0 18px;}
.tracker-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--dorado),var(--rojo));border-radius:6px;transition:width .6s ease;}
.tracker-runner{
    position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .6s ease;
    font-size:1.5rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
.tracker-steps{display:flex;justify-content:space-between;margin-top:14px;}
.step-label{flex:1;text-align:center;font-size:.72rem;font-weight:700;color:var(--gris-texto-claro);}
.step-label.activo{color:var(--rojo);}
.step-label.completo{color:var(--verde-ok);}

/* ---------- Carrito ---------- */
.carrito-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--borde-suave);}
.carrito-item img{width:56px;height:56px;object-fit:cover;border-radius:10px;}
.carrito-item .info{flex:1;}
.carrito-total{display:flex;justify-content:space-between;padding:8px 0;font-size:.95rem;}
.carrito-total.final{font-weight:800;font-size:1.15rem;color:var(--azul-noche);border-top:2px solid var(--borde-suave);margin-top:6px;padding-top:12px;}

.footer-simple{text-align:center;padding:30px 0;color:var(--gris-texto-claro);font-size:.82rem;}

.vacio{text-align:center;padding:50px 20px;color:var(--gris-texto-claro);}
.vacio .icono{font-size:2.6rem;margin-bottom:10px;}

/* Panel de negocio: gestión de estados (banner rotativo de la portada) */
.grid-estados-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:14px;}
.card-estado-panel{background:var(--fondo-tarjeta);border-radius:14px;box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;}
.card-estado-panel .preview{aspect-ratio:1/1;background:var(--azul-noche);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.card-estado-panel .preview img{width:100%;height:100%;object-fit:cover;}
.card-estado-panel .preview .txt{color:#fff;font-size:.72rem;font-weight:700;text-align:center;padding:10px;font-family:'Baloo 2',sans-serif;}
.card-estado-panel .acciones{display:flex;flex-wrap:wrap;gap:6px;padding:8px;justify-content:center;}
.card-estado-panel .acciones .btn-sm{padding:5px 9px;font-size:.7rem;}

/* Portada: banner rotativo "estados" de negocios, entre el buscador y las categorías */
.estados-wrap{overflow:hidden;margin:14px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.estados-marquee{display:flex;width:max-content;animation-name:estados-desfile;animation-timing-function:linear;animation-iteration-count:infinite;}
.estados-marquee:hover{animation-play-state:paused;}
.estados-track{display:flex;gap:14px;padding:5px 7px;}
@keyframes estados-desfile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.estado-item{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;}
.estado-marco{width:88px;height:88px;border-radius:20px;padding:3px;background:linear-gradient(135deg,var(--dorado),var(--rojo));position:relative;overflow:hidden;box-shadow:var(--sombra);flex-shrink:0;}
.estado-frame{position:absolute;inset:3px;border-radius:17px;overflow:hidden;background:var(--azul-noche);opacity:0;transition:opacity .6s ease;display:flex;align-items:center;justify-content:center;}
.estado-frame.activa{opacity:1;}
.estado-frame img{width:100%;height:100%;object-fit:cover;}
.estado-frame .estado-texto{color:#fff;font-size:.66rem;font-weight:700;padding:6px;line-height:1.15;font-family:'Baloo 2',sans-serif;}
.estado-nombre-mini{font-size:.7rem;color:var(--azul-noche);font-weight:600;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px;justify-content:center;}
.estado-nombre-mini img{width:14px;height:14px;border-radius:50%;object-fit:cover;flex-shrink:0;}
@media(max-width:600px){.estado-item{flex:0 0 76px;}.estado-marco{width:76px;height:76px;}.estado-nombre-mini{max-width:76px;}}

/* ---------- Tarjetas de pedidos (sincronización) ---------- */
.pedido-card{background:var(--fondo-tarjeta);border-radius:14px;box-shadow:var(--sombra);padding:16px 18px;margin-bottom:14px;border:1px solid var(--borde-suave);}
.chip-categoria{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:8px;}
.chip-categoria .punto-color{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.pedido-cabeza{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:800;color:var(--azul-noche);}
.pedido-linea{font-size:.87rem;color:var(--gris-texto);margin-bottom:4px;}
.pedido-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

.reloj-recogida{
    display:flex;align-items:center;gap:10px;margin:8px 0 10px;
    background:var(--dorado-suave);border:1.5px solid var(--dorado);border-radius:12px;
    padding:9px 12px;flex-wrap:wrap;
}
.reloj-recogida-icono{font-size:1.3rem;line-height:1;flex-shrink:0;}
.reloj-recogida-texto{display:flex;flex-direction:column;flex:1;min-width:120px;}
.reloj-recogida-tiempo{font-size:1.15rem;color:var(--azul-noche);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.reloj-recogida-sub{font-size:.72rem;color:var(--gris-texto);}
.reloj-recogida-btn{margin-left:auto;}
.reloj-recogida.vencido{
    background:#fdecea;border-color:var(--rojo);animation:reloj-recogida-parpadeo 1s ease-in-out infinite;
}
.reloj-recogida.vencido .reloj-recogida-tiempo{color:var(--rojo);}
.reloj-recogida.recogido{background:#e9f7ee;border-color:#3fa85c;animation:none;}
.reloj-recogida.recogido .reloj-recogida-tiempo{color:#2f7a45;}
@keyframes reloj-recogida-parpadeo{
    0%,100%{box-shadow:0 0 0 0 rgba(232,67,47,.35);}
    50%{box-shadow:0 0 0 6px rgba(232,67,47,0);}
}

.flotante-carrito{
    position:fixed;right:18px;z-index:65;
    bottom:calc(20px + env(safe-area-inset-bottom));
}
.flotante-carrito .btn{
    width:60px;height:60px;padding:0;border-radius:50%;font-size:1.4rem;
    box-shadow:0 8px 22px rgba(232,67,47,.45);position:relative;
}
.flotante-carrito .fab-badge{
    position:absolute;top:-4px;right:-4px;background:var(--dorado);color:var(--azul-noche);
    font-size:.68rem;font-weight:800;min-width:20px;height:20px;border-radius:20px;
    display:flex;align-items:center;justify-content:center;padding:0 4px;
    box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid #fff;
}
body.tiene-bottom-tabs .flotante-carrito{
    /* Encima de la bottom-tabs, no encima del contenido */
    bottom:calc(var(--alto-bottom-tabs) + 12px + env(safe-area-inset-bottom));
}

/* ---------- Bottom tabs: navegación principal para invitados/clientes ----------
   Estilo tomado de la app de referencia: barra blanca, siempre fija y visible,
   con el ícono/etiqueta activo en naranja. --alto-bottom-tabs la mide el JS del
   footer en tiempo real (footer.php) para que, sea cual sea su alto real (2
   líneas en pantallas angostas, notch, etc.), el contenido NUNCA quede detrás. */
:root{
    --naranja-tabs:#ff7a1a;
    --alto-bottom-tabs:64px; /* valor de respaldo; el JS lo sobreescribe con el real */
}
.bottom-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:9999;
    display:flex;justify-content:space-around;align-items:stretch;
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    background:var(--fondo-tarjeta);
    box-shadow:0 -2px 18px rgba(13,37,89,.12);
    border-top:1px solid var(--borde-suave);
    /* Fuerza su propia capa (aceleración por hardware): en Safari/iOS y
       algunos navegadores móviles, un elemento position:fixed a veces no
       se pinta en su sitio hasta que el usuario hace scroll (queda "flotando"
       al final del documento hasta el primer scroll). translate3d(0,0,0)
       evita ese bug sin cambiar nada visualmente. */
    -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    will-change:transform;
}
.bottom-tabs a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:4px 2px;border-radius:12px;font-size:.66rem;font-weight:700;
    color:#8f8975;position:relative;min-width:0;
}
.bottom-tabs a .tab-icon{display:flex;line-height:1;}
.bottom-tabs a .tab-icon svg{display:block;}
.bottom-tabs a .tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bottom-tabs a.activo{color:var(--naranja-tabs);}
.bottom-tabs a .tab-badge{
    position:absolute;top:0;right:20%;background:var(--rojo);color:#fff;font-size:.6rem;font-weight:800;
    min-width:16px;height:16px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    padding:0 3px;border:1.5px solid #fff;
}

/* Botón de carrito: el único que sobresale por encima del resto de la
   barra (estilo "FAB" central), para que sea el más fácil de encontrar
   con el pulgar y quede claramente distinguido del resto de pestañas. */
.bottom-tabs a.tab-carrito{overflow:visible;}
.bottom-tabs a.tab-carrito .tab-icon{
    width:50px;height:50px;margin-top:-24px;border-radius:50%;
    background:var(--naranja-tabs);color:#fff;position:relative;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(255,122,26,.5), 0 0 0 4px var(--fondo-tarjeta);
    transition:transform .15s ease;
}
.bottom-tabs a.tab-carrito .tab-icon svg{width:23px;height:23px;}
.bottom-tabs a.tab-carrito:active .tab-icon{transform:scale(.92);}
.bottom-tabs a.tab-carrito .tab-label{color:#8f8975;font-weight:800;}
.bottom-tabs a.tab-carrito.activo .tab-icon{background:var(--azul-noche);}
.bottom-tabs a.tab-carrito.activo .tab-label{color:var(--naranja-tabs);}
.bottom-tabs a.tab-carrito .tab-badge{top:-28px;right:16%;}
/* Siempre visible: se muestra en cualquier tamaño de pantalla donde aplique
   (no se oculta al hacer scroll ni se esconde en desktop). */
/* Reserva de espacio real para que ningún contenido quede detrás de la barra:
   esto es el límite inferior del contenido. */
body.tiene-bottom-tabs{padding-bottom:calc(var(--alto-bottom-tabs) + env(safe-area-inset-bottom));}
main{display:block;}

/* ---------- Aviso "Toca atrás de nuevo para salir" ----------
   Solo aparece cuando la app corre instalada/empaquetada (modo standalone)
   y el usuario presiona el botón/gesto de atrás estando en el inicio, para
   evitar que se cierre la app por accidente. Ver script en footer.php. */
.toast-salir{
    position:fixed;left:50%;bottom:calc(var(--alto-bottom-tabs, 64px) + 16px + env(safe-area-inset-bottom));
    transform:translateX(-50%) translateY(12px);
    background:var(--azul-noche);color:#fff;font-size:.86rem;font-weight:600;
    padding:10px 18px;border-radius:999px;box-shadow:var(--sombra);
    z-index:10000;opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    white-space:nowrap;
}
.toast-salir.visible{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Sincronización en vivo ---------- */
@keyframes syncFlash{
    0%{box-shadow:0 0 0 0 rgba(242,181,60,.6);}
    100%{box-shadow:0 0 0 14px rgba(242,181,60,0);}
}
.sync-flash{animation:syncFlash .9s ease-out;border-radius:14px;}
.punto-en-vivo{
    display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--verde-ok);font-weight:700;
}
.punto-en-vivo::before{
    content:'';width:8px;height:8px;border-radius:50%;background:var(--verde-ok);
    box-shadow:0 0 0 0 rgba(47,166,106,.6);animation:pulso 1.6s infinite;
}
@keyframes pulso{
    0%{box-shadow:0 0 0 0 rgba(47,166,106,.6);}
    70%{box-shadow:0 0 0 8px rgba(47,166,106,0);}
    100%{box-shadow:0 0 0 0 rgba(47,166,106,0);}
}

/* ---------- Tablas de admin ---------- */
.tabla-wrap{overflow-x:auto;}
.estado-toggle{display:inline-flex;gap:6px;}
.badge-estado{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;}
.badge-activo{background:#d8f5e3;color:#177a45;}
.badge-pendiente{background:#fde9c8;color:#8a5a00;}
.badge-bloqueado{background:#fbdada;color:#a3221b;}

/* ---------- Home: secciones vacías / negocios sin resultados ---------- */
.recargo-pill strong{color:#fff;}

/* ---------- PWA: banner de instalación ---------- */
.pwa-instalar{
    position:fixed;left:16px;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));z-index:999;
    background:linear-gradient(135deg,var(--azul-noche),var(--azul-medio));
    color:var(--crema);border-radius:var(--radio);box-shadow:var(--sombra);
    padding:14px 16px;display:flex;align-items:center;gap:14px;
    max-width:520px;margin:0 auto;
}
.pwa-instalar[hidden]{display:none !important;}
.pwa-instalar span{flex:1;font-size:.88rem;line-height:1.35;}
.pwa-instalar-botones{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.pwa-instalar-botones button{border:none;cursor:pointer;border-radius:10px;font-weight:700;}
#pwa-instalar-btn{
    background:var(--dorado);color:var(--azul-noche);padding:9px 16px;font-size:.85rem;
    box-shadow:0 6px 16px rgba(242,181,60,.4);
}
#pwa-instalar-cerrar{
    background:transparent;color:var(--crema);opacity:.75;font-size:1rem;padding:4px 8px;
}
@media (max-width:480px){
    .pwa-instalar{flex-direction:column;align-items:stretch;text-align:center;}
    .pwa-instalar-botones{justify-content:center;}
}
@media (max-width:760px){
    /* Sube los banners para que no queden tapados por la barra de pestañas inferior */
    .pwa-instalar{bottom:calc(78px + env(safe-area-inset-bottom));}
}

/* ---------- Banner de confianza (Rápidos / Seguros / Confiables) ---------- */
.banner-confianza{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    background:linear-gradient(135deg,var(--azul-noche),var(--azul-medio));
    border-radius:var(--radio);box-shadow:var(--sombra);margin:36px 0;overflow:hidden;
}
.banner-item{
    display:flex;align-items:center;gap:12px;padding:20px 16px;
    border-left:1px solid rgba(255,255,255,.12);
}
.banner-item:first-child{border-left:none;}
.banner-icono{
    flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--dorado);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.banner-item strong{display:block;color:#fff;font-family:'Baloo 2';font-size:.95rem;margin-bottom:2px;}
.banner-item p{margin:0;color:var(--crema);opacity:.85;font-size:.78rem;line-height:1.3;}
@media(max-width:760px){
    .banner-confianza{grid-template-columns:1fr;}
    .banner-item{border-left:none;border-top:1px solid rgba(255,255,255,.12);}
    .banner-item:first-child{border-top:none;}
}

/* ---------- Mapas (ubicación exacta y seguimiento en vivo) ---------- */
.mapa-caja{
    width:100%;height:260px;border-radius:14px;overflow:hidden;
    box-shadow:var(--sombra);border:1px solid var(--borde-suave);background:var(--azul-suave);
}
.mapa-selector-wrap{margin:12px 0 18px;}
.mapa-ayuda{font-size:.78rem;color:var(--gris-texto-claro);margin:6px 0 0;}
.mapa-seguimiento{height:220px;margin-top:10px;}
.mapa-caja-grande{height:460px;}
@media(max-width:760px){.mapa-caja-grande{height:340px;}}
.mapa-leyenda{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 16px;font-size:.82rem;color:var(--gris-texto);}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:6px;}
.mapa-estado-domiciliario{
    font-size:.82rem;color:var(--azul-medio);font-weight:600;margin-top:8px;
}
.mapa-emoji-icono{font-size:1.4rem;text-align:center;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
.leaflet-container{font-family:'Inter',sans-serif;}

/* ---------- Burbuja flotante de pedidos (estilo "chat head") ---------- */
/* Botón arrastrable, presente en cualquier página del rol logueado, que
   mantiene visible el número de pedidos/entregas en curso y permite
   revisarlos en un panel emergente sin perder la página donde se está
   navegando (igual que el burbujeo de mensajes de Messenger). */
.pd-burbuja-wrap{position:fixed;z-index:900;touch-action:none;}
.pd-burbuja-wrap[hidden]{display:none;}
.pd-burbuja{
    width:58px;height:58px;padding:0;border-radius:50%;border:none;cursor:grab;
    background:var(--color-burbuja, var(--azul-noche));color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1.5rem;
    box-shadow:0 8px 22px rgba(13,37,89,.35);position:relative;
    transition:box-shadow .15s ease;overflow:hidden;
}
.pd-burbuja img{width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;-webkit-user-drag:none;}
.pd-burbuja:active{cursor:grabbing;}
.pd-burbuja-wrap.arrastrando .pd-burbuja{box-shadow:0 12px 30px rgba(13,37,89,.5);}
.pd-burbuja .fab-badge{
    position:absolute;top:-4px;right:-4px;background:var(--dorado);color:var(--azul-noche);
    font-size:.68rem;font-weight:800;min-width:20px;height:20px;border-radius:20px;
    display:flex;align-items:center;justify-content:center;padding:0 4px;
    box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid #fff;pointer-events:none;
}
.pd-burbuja .fab-badge[hidden]{display:none;}
.pd-burbuja.pd-pulso{animation:pd-pulso .55s ease 2;}
@keyframes pd-pulso{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.18);}
}

.pd-panel{
    position:absolute;bottom:70px;right:0;width:min(320px, calc(100vw - 32px));
    background:var(--fondo-tarjeta);border-radius:16px;box-shadow:var(--sombra);
    border:1px solid var(--borde-suave);overflow:hidden;
    display:flex;flex-direction:column;max-height:min(420px, 60vh);
}
.pd-panel[hidden]{display:none;}
.pd-panel-cabeza{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:12px 14px;background:var(--color-burbuja, var(--azul-noche));color:#fff;flex-shrink:0;
}
.pd-panel-cabeza strong{font-size:.9rem;}
.pd-panel-cerrar{
    background:rgba(255,255,255,.15);border:none;color:#fff;
    width:26px;height:26px;border-radius:50%;font-size:.85rem;cursor:pointer;flex-shrink:0;
}
.pd-panel-cuerpo{padding:12px 14px;overflow-y:auto;flex:1;}
.pd-panel-cuerpo .pedido-card{margin-bottom:10px;box-shadow:none;border:1px solid var(--borde-suave);padding:12px 14px;}
.pd-panel-cuerpo .pedido-card:last-child{margin-bottom:0;}
.pd-panel-cuerpo .vacio{padding:24px 10px;}
/* Encabezados de sección dentro del cuerpo de la burbuja (p.ej. "En curso" /
   "Disponibles para aceptar" en la burbuja del domiciliario), cuando un solo
   widget combina más de una lista de pedidos. */
.pd-panel-seccion{
    font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
    color:var(--gris-texto);margin:14px 0 8px;
}
.pd-panel-seccion:first-child{margin-top:0;}
.pd-panel-pie{padding:10px 14px;border-top:1px solid var(--borde-suave);text-align:center;flex-shrink:0;}
.pd-panel-pie a{font-size:.83rem;font-weight:700;color:var(--color-burbuja, var(--azul-noche));}

/* Accesos rápidos de "Hacer encargo" / "Domicilio directo" dentro del panel
   de la burbuja (solo roles cliente/negocio, ver configBurbujaPara). Van
   entre el cuerpo (lista de pedidos) y el pie ("Ver todo"), fijos, para que
   siempre queden a mano sin importar cuántos pedidos haya en la lista. */
.pd-panel-acciones{
    display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--borde-suave);flex-shrink:0;
}
.pd-panel-acciones a,
.pd-panel-acciones button{
    flex:1;text-align:center;font-size:.76rem;font-weight:700;line-height:1.2;
    padding:9px 6px;border-radius:10px;text-decoration:none;
    background:var(--color-burbuja, var(--azul-noche));color:#fff;
    border:none;font-family:inherit;cursor:pointer;
}
.pd-panel-acciones a.pd-accion-secundaria,
.pd-panel-acciones button.pd-accion-secundaria{
    background:#fff;color:var(--color-burbuja, var(--azul-noche));
    border:1px solid var(--color-burbuja, var(--azul-noche));
}
.pd-panel-acciones button:disabled{opacity:.6;cursor:default;}