/* Ajustes propios sobre la plantilla Nazox.
   --marca se define en <head> con el color configurado por cada restaurante. */
/* La plantilla usa el mismo gris para el fondo y los bordes; estas variables dan superficies y bordes visibles */
:root { --superficie: #fff; --borde: #dfe4ea; }
[data-bs-theme="dark"] { --superficie: var(--bs-secondary-bg); --borde: rgba(255, 255, 255, .12); }
:root { --marca: #e8590c; --marca-suave: color-mix(in srgb, var(--marca) 14%, transparent); --marca-oscura: color-mix(in srgb, var(--marca) 82%, #000); }

/* Color de marca aplicado a los componentes principales */
.btn-primary {
    --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca-oscura); --bs-btn-hover-border-color: var(--marca-oscura);
    --bs-btn-active-bg: var(--marca-oscura); --bs-btn-active-border-color: var(--marca-oscura);
    --bs-btn-disabled-bg: var(--marca); --bs-btn-disabled-border-color: var(--marca);
}
.btn-outline-primary {
    --bs-btn-color: var(--marca); --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca); --bs-btn-hover-border-color: var(--marca);
    --bs-btn-active-bg: var(--marca); --bs-btn-active-border-color: var(--marca);
}
.text-primary { color: var(--marca) !important; }
.bg-primary { background-color: var(--marca) !important; }
.bg-primary-subtle, .badge-soft-primary { background-color: var(--marca-suave) !important; color: var(--marca) !important; }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }
.form-control:focus, .form-select:focus { border-color: var(--marca); box-shadow: 0 0 0 .2rem var(--marca-suave); }
#sidebar-menu ul li a.mm-active, #sidebar-menu ul li a:hover, #sidebar-menu ul li.mm-active > a { color: #fff !important; }
#sidebar-menu ul li a.mm-active i, #sidebar-menu ul li.mm-active > a i { color: var(--marca) !important; }

.min-w-0 { min-width: 0; }
.marca-texto { color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; }
.logo-dark.marca-texto { color: #252b3b; }
.titulo-movil { max-width: 46vw; font-size: 15px; }

.avatar-inicial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--marca-suave); color: var(--marca); font-weight: 700; flex-shrink: 0;
}

/* Logo: imagen del restaurante o icono por defecto */
.logo-img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; vertical-align: middle; background: #fff; }
.logo-icono { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--marca); color: #fff; font-size: 19px; vertical-align: middle; }
.logo-lg .logo-img, .logo-lg .logo-icono { margin-right: 6px; }
.login-logo-img { width: 84px; height: 84px; object-fit: contain; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.login-logo-icono { width: 84px; height: 84px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--marca); color: #fff; font-size: 42px; box-shadow: 0 10px 28px color-mix(in srgb, var(--marca) 45%, transparent); }

.tarjeta-kpi { transition: transform .15s ease, box-shadow .15s ease; }
.tarjeta-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }

/* Listas tipo tarjeta */
.lista-movil { display: flex; flex-direction: column; gap: 8px; }
.item-movil { display: block; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
a.item-movil:active { background: var(--bs-tertiary-bg); }

/* Banda de modo soporte (superusuario dentro de un restaurante) */
.banda-soporte {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1005; background: #1f2937; color: #fff;
    display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); font-size: 13px; box-shadow: 0 -4px 16px rgba(0, 0, 0, .2);
}
.banda-soporte i { color: #fbbf24; }
body.con-soporte .main-content { padding-bottom: 46px; }

/* Pasos de configuración (inicio) */
.paso { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: inherit; background: var(--superficie); }
a.paso:hover { border-color: var(--marca); }
.paso-icono { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.paso.hecho .paso-icono { background: rgba(28, 187, 140, .15); color: #12936d; }
.paso.pendiente .paso-icono { background: var(--marca-suave); color: var(--marca); }

/* Configuración */
.vista-logo { width: 120px; height: 120px; border-radius: 20px; border: 1px dashed var(--borde); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.vista-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.campo-copiar { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.secreto-guardado { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ayuda-pasos { padding-left: 18px; margin-bottom: 0; }
.ayuda-pasos li { margin-bottom: 6px; }
.muestra-recibo { background: #fff; color: #111; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; border-radius: 6px; padding: 14px; max-width: 280px; margin: 0 auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); white-space: pre-wrap; }

.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }

@media (max-width: 767.98px) {
    .page-content { padding-left: 0; padding-right: 0; }
    .card-body { padding: 14px; }
    .barra-acciones { position: sticky; bottom: 0; background: var(--bs-body-bg); padding: 10px 0; z-index: 5; }
    .barra-acciones .btn { flex: 1; }
}

[data-bs-theme="dark"] .logo-dark.marca-texto { color: #fff; }
[data-bs-theme="dark"] .item-movil, [data-bs-theme="dark"] .paso { background: var(--bs-secondary-bg); }

/* ===== Celular y tablet: aspecto de app ===== */
.nav-movil, .fondo-menu, .logo-movil { display: none; }

@media (max-width: 991.98px) {
    #page-topbar { padding-top: env(safe-area-inset-top); }
    .navbar-header { height: 60px; padding: 0 8px 0 12px; }
    .navbar-brand-box, #vertical-menu-btn { display: none !important; }
    .logo-movil { display: inline-flex; margin-right: 8px; line-height: 1; }
    .titulo-movil { max-width: 55vw; font-size: 17px; }
    .page-content { padding-top: calc(60px + env(safe-area-inset-top) + 14px) !important; padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
    .footer { display: none; }

    .vertical-menu { top: calc(60px + env(safe-area-inset-top)); bottom: 0; padding-bottom: calc(70px + env(safe-area-inset-bottom)); box-shadow: 4px 0 24px rgba(0,0,0,.25); }
    .fondo-menu { position: fixed; inset: 0; background: rgba(15, 18, 30, .45); z-index: 1000; }
    body.sidebar-enable .fondo-menu { display: block; }

    .nav-movil {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1003;
        display: flex; justify-content: space-around; align-items: flex-end;
        background: #fff; border-top: 1px solid var(--borde);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    }
    .nav-movil-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        background: none; border: 0; padding: 4px 0; color: var(--bs-secondary-color); font-size: 11px; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-movil-item i { font-size: 23px; line-height: 1; }
    .nav-movil-item.activo { color: var(--marca); font-weight: 600; }
    .page-title-box { padding-bottom: 12px; }
    .page-title-box h4 { font-size: 16px; text-transform: none; }
    .barra-acciones { bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
    body.con-soporte .nav-movil { bottom: 40px; }
}
[data-bs-theme="dark"] .nav-movil { background: var(--bs-secondary-bg); }

/* ===== Login ===== */
.login-escena {
    position: relative; min-height: 100vh; overflow: hidden; color: #fff; display: flex; align-items: flex-end;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--marca) 70%, transparent) 0, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(250, 204, 21, .35) 0, transparent 40%),
        linear-gradient(135deg, #1c1917 0%, #292524 55%, #431407 100%);
}
.login-escena-texto { position: relative; padding: 0 8% 10%; max-width: 640px; }
.login-escena-texto h2 { color: #fff; font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 14px 0 12px; }
.login-escena-texto p { color: #e7e5e4; font-size: 17px; max-width: 460px; }
.login-etiqueta { display: inline-flex; gap: 8px; align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); padding: 6px 14px; border-radius: 30px; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); }
.login-flujo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.login-flujo span { display: inline-flex; gap: 8px; align-items: center; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.login-flujo i { font-size: 20px; color: #fdba74; }
.login-iconos { position: absolute; top: 8%; right: 8%; display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; opacity: .9; }
.login-iconos span { width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fed7aa; }
.login-cabecera-movil { height: 150px; border-radius: 0 0 28px 28px; background: linear-gradient(135deg, #292524, var(--marca)); }
@media (max-width: 1399.98px) { .login-escena-texto h2 { font-size: 36px; } }
@media (max-width: 991.98px) {
    .authentication-page-content { min-height: auto !important; padding-top: 0 !important; display: block !important; }
    .authentication-page-content .login-logo-img, .authentication-page-content .login-logo-icono { margin-top: -48px; border: 4px solid #fff; position: relative; }
}

/* ===== Plataforma (superusuario) ===== */
.plataforma-nav { background: #1c1917; padding: 14px 0; }
.plataforma-nav a { text-decoration: none; }
.plataforma-nav .activo { color: #fff !important; font-weight: 600; }
.chip-estado { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.chip-estado.ok { background: rgba(28, 187, 140, .14); color: #12936d; }

/* ===== Menú ===== */
.asa { cursor: grab; color: var(--bs-secondary-color); }
.border-dashed { border-style: dashed !important; }
.menu-grupos { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 10px; cursor: pointer; user-select: none; }
.menu-grupo:hover { background: var(--bs-tertiary-bg); }
.menu-grupo.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.menu-grupo.inactivo .menu-grupo-nombre { text-decoration: line-through; opacity: .6; }
.menu-grupo-icono { font-size: 20px; line-height: 1; }
.menu-grupo-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) {
    .menu-grupos-card { background: transparent; box-shadow: none; }
    .menu-grupos-card .card-body { padding: 0 !important; }
    .menu-grupos { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
    .menu-grupo { flex-shrink: 0; border: 1px solid var(--borde); background: var(--superficie); border-radius: 30px; padding: 8px 14px; }
    .menu-grupo .badge { display: none; }
}

.platillo-card { overflow: hidden; transition: box-shadow .15s ease; }
.platillo-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.platillo-foto { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--marca-suave), var(--bs-tertiary-bg)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.platillo-foto img { width: 100%; height: 100%; object-fit: cover; }
.platillo-foto > span:not(.platillo-sello) { font-size: 52px; }
.platillo-foto .asa { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .9); border-radius: 8px; padding: 4px 6px; font-size: 16px; }
.platillo-sello { display: none; position: absolute; left: 10px; top: 10px; background: #e3274a; color: #fff; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.platillo-card.agotado .platillo-foto img, .platillo-card.agotado .platillo-foto > span:not(.platillo-sello) { filter: grayscale(1); opacity: .5; }
.platillo-card.agotado .platillo-sello { display: inline-block; }
.platillo-card.oculto { opacity: .6; }
.chip-esp { border: 1px solid var(--borde); background: var(--superficie); color: inherit; border-radius: 20px; font-size: 12px; padding: 2px 10px; }
.chip-esp:not(:disabled):hover { border-color: var(--marca); }
.chip-esp.agotada { text-decoration: line-through; color: #e3274a; border-color: rgba(227, 39, 74, .4); background: rgba(227, 39, 74, .06); }
.agotado-fila { background: rgba(227, 39, 74, .05) !important; }
.agotado-fila input[name="nombre"] { text-decoration: line-through; }
.gu-mirror { opacity: .9; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }

.emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji { border: 0; background: var(--bs-tertiary-bg); border-radius: 8px; width: 38px; height: 38px; font-size: 20px; line-height: 1; }
.emoji:hover { background: var(--marca-suave); }

/* Editor de platillo */
.paso-num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--marca); color: #fff; font-size: 13px; align-items: center; justify-content: center; margin-right: 6px; vertical-align: middle; }
.foto-subir { display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 4 / 3; width: 100%; border: 2px dashed var(--borde); border-radius: 12px; cursor: pointer; overflow: hidden; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.foto-subir:hover { border-color: var(--marca); }
.foto-subir i { font-size: 32px; }
.foto-subir img { width: 100%; height: 100%; object-fit: cover; }
.esp-fila { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; background: var(--superficie); }
.regla { border: 1px solid var(--borde); border-left: 4px solid var(--marca); border-radius: 10px; padding: 12px; background: var(--bs-tertiary-bg); }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--superficie); border-radius: 20px; padding: 4px 10px; font-size: 13px; }
.opcion label { cursor: pointer; }
.opcion.marcada { border-color: var(--marca); background: var(--marca-suave); }
.opcion-precio { width: 70px; height: 24px; padding: 0 6px; font-size: 12px; }
.opcion-nueva { padding: 2px; border-style: dashed; }
.opcion-nueva input { border: 0; background: transparent; width: 150px; height: 26px; }
.vista-sticky { position: sticky; top: 90px; }
.wa-fondo { background: #efeae2; border-radius: 12px; padding: 14px; }
.wa-burbuja { background: #fff; color: #111b21; border-radius: 0 10px 10px 10px; padding: 10px 12px; font-size: 13.5px; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); max-height: 60vh; overflow: auto; }
[data-bs-theme="dark"] .wa-fondo { background: #0b141a; }
[data-bs-theme="dark"] .wa-burbuja { background: #202c33; color: #e9edef; }
.barra-guardar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 0; background: linear-gradient(transparent, var(--bs-body-bg) 30%); }
@media (max-width: 991.98px) {
    .barra-guardar { bottom: calc(64px + env(safe-area-inset-bottom)); }
    .barra-guardar .btn { flex: 1; }
    .vista-sticky { position: static; }
}

/* La plantilla usa overflow:hidden en .main-content, que anula position:sticky.
   "clip" recorta igual pero permite barras y paneles fijos. */
.main-content { overflow: clip; }

/* ===== Mesas ===== */
.chip-zona { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--superficie); color: inherit; border-radius: 20px; padding: 4px 12px; font-size: 13px; }
.chip-zona:hover { border-color: var(--marca); }
.chip-zona-nueva { border-style: dashed; color: var(--bs-secondary-color); }
.chip-zona .punto, .punto-lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.punto-lg { width: 12px; height: 12px; }
.mesa-card { position: relative; transition: box-shadow .15s ease, border-color .15s ease; border: 2px solid transparent; }
.mesa-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.mesa-card.seleccionada { border-color: var(--marca); }
.mesa-card.inactiva { opacity: .55; }
.mesa-sel { position: absolute; top: 10px; left: 10px; width: 1.2em; height: 1.2em; z-index: 2; cursor: pointer; }
.mesa-qr { width: 100%; max-width: 120px; aspect-ratio: 1; margin: 0 auto; display: block; background: #fff; border-radius: 6px; padding: 4px; }
.barra-seleccion {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 1004;
    display: flex; align-items: center; gap: 10px; background: #1f2937; color: #fff; padding: 10px 14px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
@media (max-width: 991.98px) { .barra-seleccion { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ===== Tiempo real ===== */
.campana-badge { position: absolute; top: 12px; right: 4px; font-size: 10px; padding: 3px 5px; }
.nav-movil .campana-badge { top: -6px; right: -12px; }
.punto-conexion { width: 9px; height: 9px; border-radius: 50%; background: #adb5bd; display: inline-block; }
[data-conexion].conectado .punto-conexion { background: #37b24d; box-shadow: 0 0 0 3px rgba(55, 178, 77, .2); }
/* Botón central de la barra móvil (acción principal) */
@media (max-width: 991.98px) {
    .nav-movil-item.central { margin-top: -26px; color: var(--marca); font-weight: 600; }
    .nav-movil-boton { width: 56px; height: 56px; border-radius: 50%; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 45%, transparent); border: 4px solid var(--bs-body-bg); }
    .nav-movil-boton i { font-size: 28px; }
}

/* ===== Tomar pedido ===== */
.tp-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.tp-mesa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 78px; border: 2px solid var(--borde); border-radius: 14px; background: var(--superficie); color: inherit; padding: 8px; }
.tp-mesa:hover, .tp-mesa:focus { border-color: var(--marca); }
.tp-mesa-nombre { font-weight: 800; font-size: 17px; }
.tp-mesa-estado { font-size: 12px; color: #12936d; }
.tp-mesa.ocupada { border-color: color-mix(in srgb, var(--marca) 45%, transparent); background: var(--marca-suave); }
.tp-mesa.ocupada .tp-mesa-estado { color: var(--marca); font-weight: 600; }
.tp-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tp-grupos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; scrollbar-width: none; position: sticky; top: 70px; z-index: 4; background: var(--bs-body-bg); }
@media (max-width: 991.98px) { .tp-grupos { top: calc(60px + env(safe-area-inset-top)); } }
.tp-grupo { flex-shrink: 0; border: 1px solid var(--borde); background: var(--superficie); color: inherit; border-radius: 30px; padding: 7px 14px; font-weight: 500; }
.tp-grupo.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.tp-platillo { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--borde); background: var(--superficie); color: inherit; border-radius: 14px; padding: 8px; position: relative; }
.tp-platillo:not(:disabled):hover { border-color: var(--marca); }
.tp-platillo.agotado { opacity: .5; }
.tp-platillo-foto { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--marca-suave); }
.tp-platillo-foto img { width: 100%; height: 100%; object-fit: cover; }
.tp-platillo-info { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.tp-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tp-mas, .tp-en-carrito { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--marca-suave); color: var(--marca); font-size: 18px; }
.tp-en-carrito { background: var(--marca); color: #fff; font-weight: 700; font-size: 14px; }
.tp-carrito-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bs-body-bg) 35%); }
@media (min-width: 992px) { .tp-carrito-barra { left: 250px; } body.vertical-collpsed .tp-carrito-barra { left: 70px; } }
@media (max-width: 991.98px) { .tp-carrito-barra { bottom: calc(64px + env(safe-area-inset-bottom)); } }
.tp-carrito-barra .btn { border-radius: 14px; box-shadow: 0 8px 24px color-mix(in srgb, var(--marca) 40%, transparent); }
.tp { padding-bottom: 90px; }
.tp-seccion { margin-bottom: 18px; border-radius: 12px; transition: box-shadow .2s; }
.tp-seccion.falta { box-shadow: 0 0 0 3px rgba(227, 39, 74, .5); }
.tp-seccion-titulo { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.tp-opcion { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 6px; cursor: pointer; }
.tp-opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.tp-opcion input { width: 1.25em; height: 1.25em; accent-color: var(--marca); flex-shrink: 0; }
.tp-opcion.agotada { opacity: .5; text-decoration: line-through; cursor: not-allowed; }
.tp-opcion:has(input:disabled):not(.agotada) { opacity: .55; }
.tp-cantidad { display: flex; align-items: center; gap: 10px; }
.tp-cantidad span { min-width: 24px; text-align: center; font-weight: 700; font-size: 18px; }
.tp-cantidad-sm span { font-size: 15px; min-width: 18px; }
.tp-linea { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
.tp-nota { color: #b35c00; }
.tp-offcanvas { width: min(420px, 100vw) !important; }

/* ===== Monitor de cocina (KDS) ===== */
body:has(.kds) { background: #101418; }
.kds { --fondo: #101418; --panel: #1a2027; --borde: #2a323c; --texto: #e9edf1; min-height: 100vh; display: flex; flex-direction: column; color: var(--texto); background: var(--fondo); }
.kds-cabecera { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #0b0e11; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.kds-marca { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; }
.kds-estaciones { display: flex; gap: 6px; overflow-x: auto; flex-grow: 1; scrollbar-width: none; }
.kds-chip { flex-shrink: 0; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 30px; padding: 6px 14px; font-weight: 600; }
.kds-chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.kds-acciones { display: flex; align-items: center; gap: 8px; }
.kds-reloj { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.kds-boton { border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 10px; width: 40px; height: 40px; font-size: 20px; }
.kds-conexion { display: inline-flex; padding: 0 4px; }
.kds-aviso-sonido { background: #f59f00; color: #111; text-align: center; padding: 6px; font-weight: 600; }
.kds-columnas { flex-grow: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(300px, 1fr)); gap: 12px; padding: 12px; overflow-x: auto; }
.kds-columna { display: flex; flex-direction: column; min-width: 0; }
.kds-columna-titulo { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-radius: 12px; background: var(--panel); border-top: 4px solid var(--c); margin-bottom: 10px; }
.kds-contador { background: var(--c); color: #fff; border-radius: 20px; padding: 0 10px; font-size: 15px; }
.kds-lista { display: flex; flex-direction: column; gap: 10px; }
.kds-vacio { text-align: center; color: #5c6773; padding: 40px 0; }
.kds-tarjeta { background: var(--panel); border-radius: 14px; border: 1px solid var(--borde); border-left: 8px solid #37b24d; overflow: hidden; }
.kds-tarjeta.amarillo { border-left-color: #f59f00; }
.kds-tarjeta.rojo { border-left-color: #f03e3e; }
.kds-tarjeta.rojo .kds-tiempo { color: #ff6b6b; }
.kds-tarjeta.nueva { animation: kds-latido 1.2s ease-in-out 6; box-shadow: 0 0 0 3px var(--marca); }
@keyframes kds-latido { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--marca) 30%, transparent); } }
.kds-tarjeta-cabecera { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 8px; }
.kds-mesa { font-size: 24px; font-weight: 900; line-height: 1.05; color: #fff; }
.kds-tiempo { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kds-num { font-size: 13px; color: #8a96a3; }
.kds-lineas { list-style: none; margin: 0; padding: 0 14px 6px; }
.kds-lineas li { padding: 8px 0; border-top: 1px dashed var(--borde); }
.kds-linea { display: flex; gap: 10px; font-size: 17px; line-height: 1.25; }
.kds-cant { min-width: 30px; height: 30px; border-radius: 8px; background: #fff; color: #111; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kds-esp { color: #ffd43b; font-weight: 800; }
.kds-guarn { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 40px; }
.kds-guarn span { background: #24303c; border: 1px solid #33414f; border-radius: 6px; padding: 1px 8px; font-size: 14px; }
.kds-nota { margin: 6px 0 0 40px; background: #3b2f00; color: #ffe066; border-radius: 8px; padding: 4px 8px; font-weight: 700; font-size: 14px; }
.kds-nota-general { margin: 0 14px 10px; }
.kds-otras { font-size: 13px; color: #8a96a3; padding: 0 14px 8px; }
.kds-botones { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--borde); }
.kds-siguiente { flex-grow: 1; border: 0; border-radius: 10px; padding: 14px; font-size: 17px; font-weight: 800; color: #fff; background: var(--c); }
.kds-siguiente:active { transform: scale(.98); }
.kds-atras { border: 1px solid var(--borde); background: transparent; color: #8a96a3; border-radius: 10px; width: 52px; font-size: 20px; }
.kds .logo-img, .kds .logo-icono { width: 34px; height: 34px; }
@media (max-width: 767.98px) { .kds-columnas { grid-template-columns: repeat(var(--n), 86vw); } .kds-marca span { display: none; } }

/* ===== Avisos (mesero) ===== */
.chip-zona.activa { background: var(--marca); border-color: var(--marca); color: #fff; }
.aviso { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid #f03e3e; }
.aviso.en-camino { border-left-color: var(--marca); }
.aviso.lista { border-left-color: #37b24d; }
.aviso.nuevo { animation: aviso-latido 1s ease-in-out 5; }
@keyframes aviso-latido { 50% { box-shadow: 0 0 0 5px rgba(240, 62, 62, .25); } }
.aviso-icono { font-size: 30px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--bs-tertiary-bg); flex-shrink: 0; }
.aviso-mesa { font-size: 20px; font-weight: 900; line-height: 1.1; }
.aviso .btn { white-space: nowrap; }
.aviso-vacio { text-align: center; color: var(--bs-secondary-color); padding: 30px 0; border: 1px dashed var(--borde); border-radius: 14px; }
.aviso-vacio i { font-size: 24px; display: block; }
[data-bs-theme="dark"] .aviso { background: var(--bs-secondary-bg); }
.kds-aviso-filtro { background: #1f2a36; color: #c5d0db; text-align: center; padding: 6px; font-size: 14px; border-bottom: 1px solid var(--borde); }
.kds-aviso-filtro button { background: none; border: 0; color: #74c0fc; font-weight: 700; text-decoration: underline; }
.regla-numeros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.regla-numeros label { display: flex; flex-direction: column; font-size: 12px; color: var(--bs-secondary-color); gap: 2px; margin: 0; }
.regla-numeros input[type="number"] { width: 78px; }
.regla-resumen { color: var(--marca); font-weight: 600; }
.opcion-precios { display: inline-flex; gap: 4px; }
.tp-opcion.con-cantidad { border-color: var(--marca); background: var(--marca-suave); }
.chip-nota { border: 1px dashed var(--borde); background: var(--superficie); color: inherit; border-radius: 20px; padding: 4px 12px; font-size: 13px; }
.chip-nota.activa { border-style: solid; border-color: var(--marca); background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.kds-incluido { display: block; font-size: 13px; color: #8ce99a; font-weight: 600; }

/* ===== Cuentas ===== */
.cuenta-card { border-top: 4px solid var(--marca); }
.cuenta-card.pide-cuenta { border-top-color: #f03e3e; animation: aviso-latido 1.4s ease-in-out infinite; }
.cuenta-mesa { font-size: 22px; font-weight: 900; line-height: 1.1; }
.cuenta-total { font-size: 20px; font-weight: 800; color: var(--marca); }
.recibo-linea { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.recibo-linea:last-child { border-bottom: 0; }
.cobro-fila { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 6px; align-items: center; }
.cobro-total { font-size: 34px; font-weight: 900; line-height: 1; }
.propina-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.propina-chips button { border: 1px solid var(--borde); background: var(--superficie); border-radius: 10px; padding: 6px 12px; min-width: 64px; }
.propina-chips button.activa { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 700; }
.estado-pago { border-radius: 10px; padding: 10px 12px; font-weight: 700; }
.estado-pago.falta { background: rgba(240, 62, 62, .1); color: #c92a2a; }
.estado-pago.ok { background: rgba(55, 178, 77, .12); color: #2b8a3e; }
@media (max-width: 575.98px) { .cobro-fila { grid-template-columns: 1fr 1fr; } }
.opcion-precio::placeholder, .cobro-fila input::placeholder { color: #adb5bd; opacity: 1; }

/* ===== Simulador de WhatsApp ===== */
.wa-chat { background: #efeae2; height: 62vh; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; border-radius: 8px 8px 0 0; }
.wa-msg { align-self: flex-start; max-width: 80%; background: #fff; color: #111b21; padding: 7px 10px 18px; border-radius: 0 10px 10px 10px; white-space: pre-wrap; font-size: 14px; position: relative; min-width: 96px; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.wa-msg.yo { align-self: flex-end; background: #d9fdd3; border-radius: 10px 0 10px 10px; }
.wa-hora { position: absolute; right: 8px; bottom: 3px; font-size: 10px; color: #667781; white-space: nowrap; }
.wa-escribiendo { color: #667781; font-style: italic; padding-bottom: 7px; }
.wa-escribir { display: flex; gap: 8px; padding: 10px; background: #f0f2f5; border-radius: 0 0 8px 8px; }
[data-bs-theme="dark"] .wa-chat { background: #0b141a; }
[data-bs-theme="dark"] .wa-msg { background: #202c33; color: #e9edef; }
[data-bs-theme="dark"] .wa-msg.yo { background: #005c4b; }
[data-bs-theme="dark"] .wa-escribir { background: #202c33; }

/* ===== Reportes ===== */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --texto-secundario: #52514e; --rejilla: #e9ecef; }
[data-bs-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --texto-secundario: #c3c2b7; --rejilla: rgba(255, 255, 255, .08); }
.kpi-valor { font-size: 24px; font-weight: 800; line-height: 1.2; margin-top: 2px; }
@media (max-width: 575.98px) { .kpi-valor { font-size: 19px; } }
.kpi-cambio { font-weight: 600; }
.kpi-cambio.sube { color: #2b8a3e; }
.kpi-cambio.baja { color: #c92a2a; }
.kpi-cambio.neutro { color: var(--bs-secondary-color); font-weight: 400; }
.filtro-periodo { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.chip-periodo { flex-shrink: 0; border: 1px solid var(--borde); background: var(--superficie); color: inherit; border-radius: 20px; padding: 5px 12px; font-size: 13px; }
.chip-periodo.activo { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.grafica { min-height: 280px; }
.barra-fila { margin-bottom: 10px; }
.barra-etiqueta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 3px; min-width: 0; }
.barra-pista { height: 8px; background: var(--bs-tertiary-bg); border-radius: 4px; overflow: hidden; }
.barra-pista span { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.barra-partida { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.barra-partida span { display: block; height: 100%; }
.barra-partida span:first-child { border-radius: 6px 0 0 6px; }
.barra-partida span:last-child { border-radius: 0 6px 6px 0; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.estado-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.estado-chip.bien { background: rgba(55, 178, 77, .14); color: #2b8a3e; }
.estado-chip.alerta { background: rgba(245, 159, 0, .16); color: #a35f00; }
.estado-chip.critico { background: rgba(240, 62, 62, .14); color: #c92a2a; }
[data-bs-theme="dark"] .estado-chip.alerta { color: #ffc34d; }
[data-bs-theme="dark"] .kpi-cambio.sube, [data-bs-theme="dark"] .estado-chip.bien { color: #69db7c; }
[data-bs-theme="dark"] .kpi-cambio.baja, [data-bs-theme="dark"] .estado-chip.critico { color: #ff8787; }

/* ===== Barra superior: todos los íconos alineados al mismo nivel ===== */
#page-topbar .navbar-header .d-flex > .header-item,
#page-topbar .navbar-header .d-flex > .dropdown > .header-item { display: inline-flex; align-items: center; justify-content: center; height: 70px; }
#page-topbar .noti-icon i { font-size: 22px; line-height: 1; }
@media (max-width: 991.98px) {
    #page-topbar .navbar-header .d-flex > .header-item,
    #page-topbar .navbar-header .d-flex > .dropdown > .header-item { height: 60px; }
}

/* Celular: margen lateral estándar (las filas de Bootstrap usan -12px y no deben salirse de la pantalla) */
@media (max-width: 767.98px) {
    .page-content > .container-fluid { padding-left: 12px; padding-right: 12px; }
    .page-title-box { padding-top: 4px; }
    .card { border-radius: 12px; }
    .btn-lg { padding: 10px 16px; }
    h4 { font-size: 18px; }
    .table { font-size: 13px; }
}
/* Monitor de cocina en celular: cabecera compacta */
.kds-reloj { white-space: nowrap; }
@media (max-width: 575.98px) {
    .kds-cabecera { gap: 8px; padding: 8px 10px; }
    .kds-reloj { display: none; }
    .kds-boton { width: 36px; height: 36px; font-size: 18px; }
    .kds-chip { padding: 5px 11px; font-size: 13px; }
    .kds-mesa { font-size: 21px; }
    .kds-linea { font-size: 16px; }
    .kds-aviso-sonido { font-size: 13px; }
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--marca); }
.nav-pills .nav-link:not(.active) { color: inherit; }
@media (max-width: 575.98px) { .wa-chat { height: 55vh; } }

/* ===== Apartado de reportes ===== */
.secciones-reporte { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; margin-bottom: 8px; position: sticky; top: 70px; z-index: 4; background: var(--bs-body-bg); }
@media (max-width: 991.98px) { .secciones-reporte { top: calc(60px + env(safe-area-inset-top)); } }
.secciones-reporte .chip-periodo { text-decoration: none; white-space: nowrap; }
.seccion-reporte { scroll-margin-top: 130px; margin-bottom: 28px; }
/* Mapa de calor: un solo tono, de claro (poco) a oscuro (mucho) */
.calor-scroll { overflow-x: auto; }
.calor { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(22px, 1fr)); gap: 2px; min-width: calc(34px + var(--cols) * 24px); }
.calor-hora { font-size: 10px; color: var(--bs-secondary-color); text-align: center; }
.calor-dia { font-size: 11px; color: var(--bs-secondary-color); display: flex; align-items: center; }
.calor-celda { height: 26px; border-radius: 4px; background: color-mix(in srgb, var(--serie-1) var(--i), var(--bs-tertiary-bg)); }
.calor-celda:hover { outline: 2px solid var(--bs-body-color); outline-offset: 1px; }
.leyenda-calor { width: 90px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--serie-1) 12%, var(--bs-tertiary-bg)), var(--serie-1)); display: inline-block; }
.tabla-equipo th { font-size: 12px; font-weight: 600; white-space: nowrap; }
.kpi-valor { white-space: nowrap; }
.kpi-compacto .kpi-valor { font-size: 20px; }
@media (max-width: 575.98px) { .kpi-compacto .kpi-valor { font-size: 17px; } }

/* Paleta categórica completa (orden fijo, validada para daltonismo) y gris para "Otros" */
:root { --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948; --otros: #a8a7a1; }
[data-bs-theme="dark"] { --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767; --otros: #6f6e69; }
.grafica-card .lienzo { min-height: 220px; }
.ver-datos { font-size: 12px; }
.tabla-log { font-size: 13px; }
.tabla-log td { vertical-align: top; }
/* Simulador: botones, listas y fotos como en WhatsApp */
.wa-img { display: block; width: 100%; max-width: 260px; border-radius: 8px; margin-bottom: 6px; }
.wa-botones { align-self: flex-start; display: flex; flex-direction: column; gap: 2px; width: min(80%, 320px); margin-top: -2px; }
.wa-boton { background: #fff; border: 0; border-radius: 8px; color: #027eb5; font-weight: 600; padding: 9px; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-boton:hover { background: #f5f6f6; }
.wa-panel { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: none; align-items: flex-end; border-radius: 8px 8px 0 0; z-index: 5; }
.wa-panel.abierto { display: flex; }
.wa-panel-caja { background: #fff; width: 100%; max-height: 80%; overflow: auto; border-radius: 16px 16px 0 0; padding-bottom: 8px; }
.wa-panel-cabecera { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e9edef; position: sticky; top: 0; background: #fff; }
.wa-seccion { color: #008069; font-size: 13px; font-weight: 600; padding: 10px 16px 4px; }
.wa-fila { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f0f2f5; padding: 10px 16px; color: #111b21; }
.wa-fila:hover { background: #f5f6f6; }
.wa-fila span { color: #667781; font-size: 13px; }
[data-bs-theme="dark"] .wa-boton { background: #202c33; color: #53bdeb; }
[data-bs-theme="dark"] .wa-panel-caja, [data-bs-theme="dark"] .wa-panel-cabecera { background: #111b21; color: #e9edef; }
[data-bs-theme="dark"] .wa-fila { color: #e9edef; border-color: #222d34; }

/* ---------- Menú web del cliente (/pedir): misma pantalla del mesero, sin barra lateral ni navegación ---------- */
.pedir { max-width: 760px; margin: 0 auto; padding: 14px 14px 120px; }
.pedir-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pedir-cabecera img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.pedir-aviso { background: color-mix(in srgb, var(--marca) 10%, var(--bs-body-bg)); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
body.pedir-pagina .tp-carrito-barra { left: 0 !important; bottom: 0 !important; }
body.pedir-pagina .tp-carrito-barra .btn { max-width: 732px; margin: 0 auto; }
.pedir-listo { text-align: center; padding: 48px 16px; }
.pedir-listo .display-4 { margin-bottom: 8px; }
a.wa-boton { display: block; text-align: center; text-decoration: none; }

/* Promociones en la pantalla del mesero y el menú web */
.tp-promos { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.tp-promo { font-size: 11px; font-weight: 600; color: #0f7b4f; background: #e6f6ee; border-radius: 999px; padding: 1px 7px; }
[data-bs-theme="dark"] .tp-promo { color: #6ee7a8; background: rgba(16,185,129,.15); }

/* Opciones en tarjeta (radio) de la configuración */
.opcion-tarjeta { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--borde, #dee2e6); border-radius: 12px; padding: 12px 14px; cursor: pointer; height: 100%; margin: 0; }
.opcion-tarjeta input { margin-top: 4px; accent-color: var(--marca); }
.opcion-tarjeta span { display: flex; flex-direction: column; gap: 2px; }
.opcion-tarjeta small { color: var(--bs-secondary-color); font-size: 12.5px; line-height: 1.35; }
.opcion-tarjeta:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 7%, transparent); }

/* ---------- A domicilio: tablero del negocio ---------- */
.dom-resumen { display: flex; flex-wrap: wrap; gap: 8px; }
.dom-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bs-tertiary-bg); font-size: 13px; font-weight: 500; }
.dom-chip.alerta { background: color-mix(in srgb, #f59f00 18%, transparent); color: #a15c00; }
.dom-col { background: var(--bs-tertiary-bg); border-radius: 14px; padding: 10px; min-height: 120px; }
.dom-col-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 4px 6px 10px; }
.dom-col-titulo b { margin-left: auto; background: var(--bs-body-bg); border-radius: 999px; padding: 0 9px; font-size: 12px; }
.dom-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dom-card { background: var(--bs-body-bg); border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); border-left: 4px solid #1c7ed6; }
.dom-card.recoger { border-left-color: #f59f00; }
.dom-num { font-weight: 700; font-size: 15px; }
.dom-lineas { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.dom-lineas li { padding: 1px 0; }
.dom-foto { width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; }
.dom-vacio, .rep-vacio { text-align: center; color: var(--bs-secondary-color); font-size: 13px; padding: 18px 8px; }

/* ---------- A domicilio: app del repartidor (pensada para celular) ---------- */
.rep-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.rep-gps { border: 0; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; background: var(--bs-tertiary-bg); }
.rep-gps[data-estado="ok"] { background: color-mix(in srgb, #37b24d 18%, transparent); color: #2b8a3e; }
.rep-gps[data-estado="error"] { background: color-mix(in srgb, #f03e3e 15%, transparent); color: #c92a2a; }
.rep-seccion { margin: 18px 2px 8px; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.rep-card { background: var(--bs-body-bg); border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.rep-card.camino { border: 2px solid color-mix(in srgb, var(--marca) 45%, transparent); }
.rep-card.cocina { opacity: .7; }
.rep-num { font-weight: 700; font-size: 16px; }
.rep-monto { font-weight: 800; font-size: 18px; white-space: nowrap; }
.rep-dir { display: flex; gap: 8px; margin-top: 8px; font-size: 14px; }
.rep-dir i { color: var(--marca); font-size: 18px; }
.rep-mapa { height: 220px; border-radius: 12px; margin: 10px 0 4px; z-index: 0; }
.rep-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-btn { flex: 1 1 auto; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 12px; border-radius: 12px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-weight: 600; text-decoration: none; }
.rep-btn.waze { background: #33ccff; color: #08263a; }
.rep-btn i { font-size: 18px; }
.rep-pin { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); border: 2px solid #fff; }
.rep-pin.cliente { background: #e8590c; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.rep-pin.cliente i { transform: rotate(45deg); }
.rep-pin.yo { background: #1c7ed6; }
.rep-foto { display: flex; align-items: center; justify-content: center; min-height: 170px; border: 2px dashed var(--bs-border-color); border-radius: 16px; cursor: pointer; overflow: hidden; text-align: center; }
.rep-foto span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; }
.rep-foto span i { font-size: 40px; color: var(--marca); }
.rep-foto small { color: var(--bs-secondary-color); }
.rep-foto img { width: 100%; max-height: 260px; object-fit: cover; }
.rep-total { display: flex; justify-content: space-between; align-items: center; font-size: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bs-tertiary-bg); }
.rep-total b { font-size: 22px; }
.rep-cambio { font-size: 16px; }
.rep-cambio b { font-size: 20px; color: #2b8a3e; }
@media (max-width: 575.98px) {
    .rep-card .btn-lg { padding: 14px; font-size: 17px; }
}
.giro-caja { border: 1.5px dashed color-mix(in srgb, var(--marca) 40%, transparent); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--marca) 4%, transparent); }
/* Programa de lealtad */
.leal-op { display: inline-flex; border: 1.5px solid var(--borde, #dee2e6); border-radius: 10px; padding: 7px 11px; cursor: pointer; font-size: 13.5px; margin: 0; }
.leal-op input { display: none; }
.leal-op:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, transparent); font-weight: 600; }
.leal-vista { background: var(--bs-tertiary-bg); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.leal-cliente { padding: 8px 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.leal-cliente:last-child { border-bottom: 0; }
/* Menú web del cliente: acciones y pago */
.pedir-acciones { display: flex; gap: 8px; margin: 0 0 12px; }
.pedir-acciones .btn { flex: 1; border-radius: 12px; font-weight: 600; }
.pedir-pago { background: var(--bs-tertiary-bg); border-radius: 12px; padding: 12px; }
.pedir-forma { display: inline-flex; margin: 0; cursor: pointer; }
.pedir-forma input { display: none; }
.pedir-forma span { border: 1.5px solid var(--bs-border-color); border-radius: 10px; padding: 8px 12px; background: var(--bs-body-bg); font-weight: 500; }
.pedir-forma input:checked + span { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, transparent); font-weight: 700; }
/* Reporte de entregas a domicilio */
.rep-filtro { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.rep-filtro input[type=date] { width: auto; }
#mapa-entregas { height: 440px; border-radius: 12px; z-index: 0; }
.rep-pin.entregado { background: #2b8a3e; font-size: 16px; }
.mapa-popup { font-size: 12.5px; width: 220px; }
.mapa-popup img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; }
.rep-galeria img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.rep-sin-foto { height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
@media (max-width: 575.98px) { #mapa-entregas { height: 320px; } }
.rep-buscar { max-width: 320px; }
.rep-tabla tbody tr { cursor: pointer; }
.rep-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.det-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 700; margin-bottom: 8px; }
.det-total { border-top: 1px dashed var(--bs-border-color); padding-top: 6px; margin-top: 4px; font-size: 16px; }
.det-foto { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.det-pasos { list-style: none; padding: 0; margin: 0 0 6px; }
.det-pasos li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--bs-secondary-color); font-size: 13.5px; }
.det-pasos li span { flex: 1; }
.det-pasos li.hecho { color: var(--bs-body-color); }
.det-pasos li.hecho i { color: #2b8a3e; }
.det-mapa { height: 200px; border-radius: 12px; z-index: 0; }
/* Panel de costos de WhatsApp */
.costo-principal { border: 1.5px solid color-mix(in srgb, var(--marca) 35%, transparent); }
.costo-barras { display: flex; align-items: flex-end; gap: 4px; height: 180px; overflow-x: auto; padding-bottom: 2px; }
.costo-dia { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.costo-dia small { font-size: 10px; color: var(--bs-secondary-color); }
.costo-columnas { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.costo-columnas span { width: 45%; min-height: 2px; border-radius: 4px 4px 0 0; }
.costo-columnas .enviados, .costo-punto.enviados { background: var(--marca); }
.costo-columnas .recibidos, .costo-punto.recibidos { background: #25d366; }
.costo-leyenda { display: flex; gap: 14px; color: var(--bs-secondary-color); }
.costo-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.dom-chip.recoger { background: color-mix(in srgb, #2b8a3e 15%, transparent); color: #2b8a3e; }
/* Comprobante de transferencia en el tablero */
.dom-comp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.dom-comp.falta { background: color-mix(in srgb, #f59f00 14%, transparent); color: #a15c00; }
.dom-comp.pendiente { background: color-mix(in srgb, #1c7ed6 12%, transparent); color: #1864ab; display: block; }
.dom-comp.ok { background: color-mix(in srgb, #2b8a3e 14%, transparent); color: #2b8a3e; }
.dom-comp.mal { background: color-mix(in srgb, #f03e3e 12%, transparent); color: #c92a2a; }
.pedir-transferencia { background: var(--bs-body-bg); border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 10px; white-space: pre-line; }

/* ---------- Tablero de domicilio (rediseño) ---------- */
.dom-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.dom-filtro { display: inline-flex; background: var(--bs-tertiary-bg); border-radius: 12px; padding: 4px; gap: 2px; }
.dom-filtro button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--bs-secondary-color); }
.dom-filtro button.activo { background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.dom-avisos { display: flex; flex-wrap: wrap; gap: 8px; }
.dom-chip.revisar { background: color-mix(in srgb, #1c7ed6 14%, transparent); color: #1864ab; }
.dom-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dom-columna { background: var(--bs-tertiary-bg); border-radius: 16px; border-top: 4px solid var(--col); min-width: 0; }
.dom-col-cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; }
.dom-col-icono { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--col) 16%, transparent); color: var(--col); font-size: 17px; }
.dom-col-n { margin-left: auto; min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 999px; background: var(--bs-body-bg); font-weight: 700; font-size: 12.5px; }
.dom-col-cuerpo { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 330px); min-height: 120px; overflow-y: auto; }
.dom-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--bs-secondary-color); font-size: 12.5px; padding: 26px 14px; }
.dom-vacio i { font-size: 28px; opacity: .45; }
.dom-card { background: var(--bs-body-bg); border-radius: 14px; padding: 12px; margin: 0; border: 1px solid var(--bs-border-color-translucent); border-left: 1px solid var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .15s; }
.dom-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.dom-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dom-num { font-weight: 800; font-size: 15px; }
.dom-tipo { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #1c7ed6 12%, transparent); color: #1864ab; }
.dom-tipo.recoger { background: color-mix(in srgb, #f59f00 16%, transparent); color: #a15c00; }
.dom-tiempo { margin-left: auto; font-size: 11.5px; color: var(--bs-secondary-color); white-space: nowrap; }
.dom-tiempo.tarde { color: #c92a2a; font-weight: 700; }
.dom-cliente { display: flex; align-items: center; gap: 10px; }
.dom-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--marca); background: color-mix(in srgb, var(--marca) 14%, transparent); }
.dom-total { margin-left: auto; font-size: 16px; white-space: nowrap; }
.dom-ref { margin: 6px 0 0 46px; }
.dom-productos { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 8px; }
.dom-prod { font-size: 12.5px; background: var(--bs-tertiary-bg); border-radius: 8px; padding: 3px 8px; }
.dom-prod i { color: var(--bs-secondary-color); }
.dom-prod.regalo { background: color-mix(in srgb, #2b8a3e 14%, transparent); }
.dom-datos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--bs-secondary-color); }
.dom-datos i { margin-right: 2px; }
.dom-datos b { color: var(--bs-body-color); }
.dom-nota { font-size: 12.5px; border-radius: 8px; padding: 6px 8px; margin-top: 8px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.dom-nota.ok { background: color-mix(in srgb, #2b8a3e 13%, transparent); color: #2b8a3e; font-weight: 600; }
.dom-nota.alerta { background: color-mix(in srgb, #f59f00 14%, transparent); color: #a15c00; font-weight: 600; }
.dom-acciones { display: flex; gap: 6px; margin-top: 10px; }
.dom-acciones .btn { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.dom-entregado { display: flex; align-items: center; gap: 10px; background: var(--bs-body-bg); border-radius: 12px; padding: 8px; border: 1px solid var(--bs-border-color-translucent); }
.dom-entregado-foto { width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); font-size: 20px; }
.dom-entregado-foto img { width: 100%; height: 100%; object-fit: cover; }
.dom-entregado .small { font-size: 12px; }
.dom-entregado-ir { color: var(--bs-secondary-color); font-size: 20px; }
.dom-mini-alerta { color: #1c7ed6; }
.dom-comp { margin: 8px 0 0; }
.dom-tabs { display: flex; gap: 6px; overflow-x: auto; }
.dom-tabs button { flex: 1 0 auto; border: 0; border-radius: 10px; padding: 8px 10px; background: var(--bs-tertiary-bg); font-weight: 600; font-size: 13px; color: var(--bs-secondary-color); }
.dom-tabs button span { background: var(--bs-body-bg); border-radius: 999px; padding: 0 6px; margin-left: 2px; }
.dom-tabs button.activo { background: var(--marca); color: #fff; }
.dom-tabs button.activo span { color: var(--marca); }
@media (max-width: 1399.98px) { .dom-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dom-col-cuerpo { max-height: none; } }
@media (max-width: 767.98px) {
    .dom-tablero { grid-template-columns: 1fr; }
    .dom-columna { display: none; }
    .dom-columna.activa-movil { display: block; }
    .dom-filtro { width: 100%; }
    .dom-filtro button { flex: 1; padding: 7px 6px; }
}
.dom-card.domicilio { border-left: 3px solid #1c7ed6; }
.dom-card.recoger { border-left: 3px solid #f59f00; }

/* ---------- App del repartidor (rediseño) ---------- */
.rep-app { max-width: 680px; margin: 0 auto; }
.rep-hero { background: linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 70%, #000)); color: #fff; border-radius: 20px; padding: 18px; margin-bottom: 14px; box-shadow: 0 10px 24px color-mix(in srgb, var(--marca) 30%, transparent); }
.rep-hola { font-size: 22px; font-weight: 800; }
.rep-hoy { font-size: 13px; opacity: .9; }
.rep-hero .rep-gps { background: rgba(255, 255, 255, .18); color: #fff; }
.rep-hero .rep-gps[data-estado="ok"] { background: rgba(255, 255, 255, .95); color: #2b8a3e; }
.rep-hero .rep-gps[data-estado="error"] { background: #fff; color: #c92a2a; }
.rep-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.rep-stats div { background: rgba(255, 255, 255, .16); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; }
.rep-stats b { font-size: 20px; line-height: 1.1; }
.rep-stats span { font-size: 11.5px; opacity: .9; }
.rep-tabs { display: flex; gap: 6px; background: var(--bs-tertiary-bg); border-radius: 14px; padding: 4px; margin-bottom: 12px; position: sticky; top: 70px; z-index: 5; }
.rep-tabs button { flex: 1; border: 0; background: transparent; border-radius: 11px; padding: 10px 6px; font-weight: 700; font-size: 13.5px; color: var(--bs-secondary-color); }
.rep-tabs button span { display: inline-block; min-width: 20px; border-radius: 999px; background: var(--bs-body-bg); padding: 0 6px; margin-left: 2px; font-size: 12px; }
.rep-tabs button.activo { background: var(--bs-body-bg); color: var(--marca); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.rep-tabs button.activo span { background: var(--marca); color: #fff; }
.rep-card { border-radius: 18px; padding: 14px; border: 1px solid var(--bs-border-color-translucent); }
.rep-card.camino { border: 2px solid color-mix(in srgb, var(--marca) 45%, transparent); }
.rep-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.rep-estado { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bs-tertiary-bg); }
.rep-estado.camino { background: color-mix(in srgb, #1c7ed6 14%, transparent); color: #1864ab; }
.rep-estado.listo { background: color-mix(in srgb, #2b8a3e 14%, transparent); color: #2b8a3e; }
.rep-estado.cocina { background: color-mix(in srgb, #f59f00 16%, transparent); color: #a15c00; }
.rep-card .rep-dir { margin: 10px 0 0; }
.rep-cobro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; font-size: 13.5px; background: var(--bs-tertiary-bg); border-radius: 12px; padding: 9px 11px; margin: 8px 0 4px; }
.rep-cobro.ok { background: color-mix(in srgb, #2b8a3e 14%, transparent); color: #2b8a3e; font-weight: 700; }
.rep-cobro.aviso { background: color-mix(in srgb, #f59f00 15%, transparent); color: #a15c00; font-weight: 600; }
.rep-cambio-chip { font-size: 12.5px; background: color-mix(in srgb, #2b8a3e 13%, transparent); color: #2b8a3e; border-radius: 999px; padding: 2px 9px; }
.rep-principal { border-radius: 14px; font-weight: 700; }
.rep-vacio-caja { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 40px 20px; background: var(--bs-body-bg); border-radius: 18px; border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); }
.rep-vacio-caja i { font-size: 38px; color: var(--marca); opacity: .6; margin-bottom: 4px; }
.rep-vacio-caja b { color: var(--bs-body-color); font-size: 16px; }
.rep-vacio-caja span { font-size: 13px; max-width: 320px; }
@media (max-width: 575.98px) { .rep-tabs { top: 62px; } .rep-hola { font-size: 20px; } }
.rep-tabs button { white-space: nowrap; }
@media (max-width: 430px) { .rep-tabs button { font-size: 12.5px; padding: 9px 4px; } .rep-tabs button i { display: none; } }
.costo-dia { flex: 0 1 40px; max-width: 48px; }
.costo-columnas span { max-width: 16px; }
.costo-barras { justify-content: flex-start; }
.costo-waba { background: color-mix(in srgb, var(--marca) 6%, transparent); border: 1.5px dashed color-mix(in srgb, var(--marca) 40%, transparent); border-radius: 12px; padding: 14px; }

/* ---------- Menú lateral con secciones desplegables ---------- */
#sidebar-menu ul li a.menu-seccion { font-weight: 600; }
#sidebar-menu .menu-seccion-n { margin-left: auto; margin-right: 18px; font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
#sidebar-menu ul li a.menu-seccion { display: flex; align-items: center; }
#sidebar-menu ul.sub-menu { margin: 2px 10px 6px 18px; padding: 4px 0; border-left: 1px solid rgba(255, 255, 255, .1); }
#sidebar-menu ul.sub-menu li a { padding: 7px 12px 7px 16px !important; font-size: 13.5px; display: flex; align-items: center; gap: 8px; border-radius: 8px; }
#sidebar-menu ul.sub-menu li a i { font-size: 15px; min-width: auto; padding: 0; opacity: .75; }
#sidebar-menu ul.sub-menu li a.active, #sidebar-menu ul.sub-menu li.mm-active > a { background: color-mix(in srgb, var(--marca) 22%, transparent); color: #fff !important; }
#sidebar-menu ul.sub-menu li a.active i { opacity: 1; color: var(--marca); }
body[data-sidebar-size="sm"] #sidebar-menu .menu-seccion-n, .vertical-collpsed #sidebar-menu .menu-seccion-n { display: none; }

/* ---------- Menú web del cliente (estilo app de delivery) ---------- */
body.pedir-pagina { background: var(--bs-body-bg); }
.pedir.mn { max-width: 820px; padding: 0 0 120px; }
.mn-portada { position: relative; margin-bottom: 14px; }
.mn-portada-fondo { height: 130px; background: radial-gradient(120% 140% at 10% 0%, color-mix(in srgb, var(--marca) 85%, #fff) 0%, var(--marca) 45%, color-mix(in srgb, var(--marca) 65%, #000) 100%); border-radius: 0 0 26px 26px; }
.mn-portada-info { position: relative; margin-top: -48px; padding: 0 16px; text-align: center; }
.mn-logo { width: 92px; height: 92px; border-radius: 26px; object-fit: cover; border: 4px solid var(--bs-body-bg); box-shadow: 0 8px 22px rgba(0, 0, 0, .15); background: var(--bs-body-bg); }
.mn-logo-letra { display: inline-flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: var(--marca); }
.mn-nombre { font-size: 24px; font-weight: 800; margin: 8px 0 0; letter-spacing: -.01em; }
.mn-slogan { color: var(--bs-secondary-color); font-size: 14px; }
.mn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.mn-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--bs-tertiary-bg); }
.mn-chip i { color: var(--marca); }
.mn-entrega { display: flex; gap: 10px; align-items: center; margin: 0 14px 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--marca) 8%, var(--bs-body-bg)); border: 1px solid color-mix(in srgb, var(--marca) 20%, transparent); }
.mn-entrega i { font-size: 22px; color: var(--marca); }
.mn-entrega small { display: block; font-size: 11.5px; color: var(--bs-secondary-color); }
.pedir.mn .pedir-acciones, .pedir.mn .pedir-aviso { margin-left: 14px; margin-right: 14px; }
.mn-promos { display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 12px; scroll-snap-type: x mandatory; }
.mn-promo { flex: 0 0 76%; max-width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 60%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 28%, transparent); }
.mn-promo-sello { align-self: flex-start; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .22); padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.mn-promo small { opacity: .9; }
.mn-promo-hasta { font-weight: 700; }
.mn-barra { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); backdrop-filter: blur(10px); padding: 8px 14px 6px; border-bottom: 1px solid var(--bs-border-color-translucent); }
.mn-barra .tp-cabecera { margin: 0 0 8px; }
.mn-buscar { position: relative; flex: 1; }
.mn-buscar i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.mn-buscar input { padding-left: 38px; border-radius: 14px; background: var(--bs-tertiary-bg); border-color: transparent; height: 44px; }
.mn-barra .tp-grupos { margin: 0; padding-bottom: 2px; }
.mn-barra .tp-grupo { border-radius: 999px; font-weight: 600; }
.mn-seccion { padding: 16px 14px 4px; scroll-margin-top: 120px; }
.mn-seccion-titulo { font-size: 19px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.mn-seccion-titulo small { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: 999px; padding: 1px 8px; }
.mn-seccion-desc { color: var(--bs-secondary-color); font-size: 13px; margin: 0 0 8px; }
.mn-lista { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .mn-lista { grid-template-columns: 1fr 1fr; gap: 12px; } .mn-plato { border: 1px solid var(--bs-border-color-translucent) !important; border-radius: 16px !important; padding: 12px !important; } }
.mn-plato { display: flex; gap: 12px; align-items: stretch; width: 100%; text-align: left; background: var(--bs-body-bg); border: 0; border-bottom: 1px solid var(--bs-border-color-translucent); padding: 14px 0; color: inherit; transition: transform .1s; }
.mn-plato:active { transform: scale(.99); }
.mn-plato.agotado { opacity: .5; }
.mn-plato-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mn-plato-nombre { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.mn-plato-desc { font-size: 13px; color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-plato-precio { margin-top: auto; font-size: 15px; }
.mn-plato-precio small { color: var(--bs-secondary-color); font-size: 12px; }
.mn-plato-precio s { color: var(--bs-secondary-color); font-size: 12.5px; margin-left: 4px; }
.mn-plato-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.mn-plato-etiquetas span { font-size: 11px; font-weight: 700; color: #2b8a3e; background: color-mix(in srgb, #2b8a3e 12%, transparent); border-radius: 6px; padding: 1px 6px; }
.mn-plato-foto { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: 16px; overflow: visible; }
.mn-plato-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.mn-plato-icono { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 16px; font-size: 42px; background: color-mix(in srgb, var(--marca) 9%, var(--bs-tertiary-bg)); }
.mn-plato-mas { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg); color: var(--marca); font-size: 20px; font-weight: 800; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.mn-plato.en-carrito .mn-plato-mas { background: var(--marca); color: #fff; font-size: 15px; }
.mn-sin-resultados { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 50px 20px; color: var(--bs-secondary-color); text-align: center; }
.mn-sin-resultados i { font-size: 38px; opacity: .5; }
.mn-sin-resultados b { color: var(--bs-body-color); }
/* Ventana del platillo */
.mp-foto { position: relative; height: 210px; background-size: cover; background-position: center; border-radius: var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius) 0 0; }
.mp-cerrar { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); font-size: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mp-foto:not(.d-none) + .modal-header .btn-close { display: none; }
@media (max-width: 575.98px) { .mp-foto { border-radius: 0; height: 230px; } }
/* Barra del carrito */
body.pedir-pagina .tp-carrito-barra .btn { border-radius: 16px; padding: 14px 18px; font-weight: 700; }

/* ---------- Cuenta: entrega y comprobante ---------- */
.cta-estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--bs-tertiary-bg); }
.cta-estado.entregado { background: color-mix(in srgb, #2b8a3e 14%, transparent); color: #2b8a3e; }
.cta-estado.en_camino { background: color-mix(in srgb, #1c7ed6 14%, transparent); color: #1864ab; }
.cta-estado.listo { background: color-mix(in srgb, #2b8a3e 10%, transparent); color: #2b8a3e; }
.cta-estado.preparando { background: color-mix(in srgb, #f59f00 16%, transparent); color: #a15c00; }
.cta-cliente { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cta-dato { display: flex; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.cta-dato > i { color: var(--marca); font-size: 16px; margin-top: 1px; }
.cta-foto { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--bs-tertiary-bg); height: 190px; }
.cta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.cta-foto:hover img { transform: scale(1.04); }
.cta-foto span, .cta-comp-zoom { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 9px; border-radius: 999px; }
.cta-mapa { height: 190px; border-radius: 14px; z-index: 0; }
.cta-comp-estado { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cta-comp-estado.pendiente { background: color-mix(in srgb, #1c7ed6 14%, transparent); color: #1864ab; }
.cta-comp-estado.ok { background: color-mix(in srgb, #2b8a3e 14%, transparent); color: #2b8a3e; }
.cta-comp-estado.mal { background: color-mix(in srgb, #f03e3e 12%, transparent); color: #c92a2a; }
.cta-comp-vista { position: relative; display: block; width: 100%; border: 1px solid var(--bs-border-color); padding: 0; border-radius: 14px; overflow: hidden; background: var(--bs-tertiary-bg); height: 260px; }
.cta-comp-vista img { width: 100%; height: 100%; object-fit: contain; background: #f1f3f5; }
.cta-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 4px; color: var(--bs-secondary-color); }
.cta-pdf i { font-size: 52px; color: #e03131; }
.cta-pdf b { color: var(--bs-body-color); }
.cta-comp-mini { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid var(--bs-border-color); background: var(--bs-tertiary-bg); font-size: 22px; }
.cta-comp-mini.rechazado { border-color: #f03e3e; }
.cta-comp-mini.verificado { border-color: #2b8a3e; }
.cta-comp-mini img { width: 100%; height: 100%; object-fit: cover; }
.visor-cuerpo { background: #111; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.visor-img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.visor-pdf { width: 100%; height: 78vh; border: 0; background: #fff; }

/* ===== Reportes: encabezado, indicadores y secciones ===== */
.rpt-hero { border: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 9%, var(--bs-card-bg, #fff)) 0%, var(--bs-card-bg, #fff) 60%); }
.rpt-hero-ico { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--marca), var(--marca-oscura)); box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 30%, transparent); }
.rpt-filtros .chip-periodo { padding: 6px 14px; }
.kpi-tile { border: 0; position: relative; overflow: hidden; }
.kpi-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.kpi-tile .card-body { padding: 14px 16px; }
.kpi-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kpi-icono { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: 17px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.kpi-titulo { font-size: 12.5px; color: var(--bs-secondary-color); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kpi-tile .kpi-valor { font-size: 22px; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .kpi-tile .kpi-valor { font-size: 18px; } }
.kpi-pie { font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; border-radius: 6px; padding: 0 5px; }
.kpi-delta.sube { color: #2b8a3e; background: rgba(43, 138, 62, .12); }
.kpi-delta.baja { color: #c92a2a; background: rgba(201, 42, 42, .1); }
.kpi-delta.igual { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .kpi-delta.sube { color: #69db7c; }
[data-bs-theme="dark"] .kpi-delta.baja { color: #ff8787; }
.rpt-sec-tit { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.rpt-sec-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-size: 19px; color: var(--marca); background: var(--marca-suave); }
.grafica-card { border: 0; }
.grafica-titulo { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.grafica-card .ver-datos { color: var(--bs-secondary-color); text-decoration: none; }
.grafica-card .ver-datos:hover { color: var(--marca); }
.rpt-vacio { text-align: center; padding: 34px 16px; border: 1.5px dashed var(--borde); border-radius: 14px; color: var(--bs-secondary-color); background: var(--superficie); }
.rpt-vacio i { font-size: 34px; opacity: .45; display: block; margin-bottom: 6px; }
.rpt-etiqueta { font-size: 12px; padding: 2px 9px; border-radius: 20px; background: var(--bs-tertiary-bg); border: 1px solid var(--borde); }
/* Ranking: número, nombre, monto y barra */
.rk-lista { display: flex; flex-direction: column; gap: 10px; }
.rk { display: flex; gap: 10px; align-items: center; }
.rk-cuerpo { flex: 1; min-width: 0; }
.rk-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 4px; min-width: 0; }
.rk-n { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.rk-n.top { background: var(--marca-suave); color: var(--marca); }
.rk-pista { height: 7px; background: var(--bs-tertiary-bg); border-radius: 4px; overflow: hidden; }
.rk-pista span { display: block; height: 100%; border-radius: 4px; background: var(--serie-1); }
.tabla-ranking td, .tabla-ranking th { padding-top: 7px; padding-bottom: 7px; }
.tabla-ranking th { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); }
.franja-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.rpt-hero .chip-periodo:not(.activo) { color: var(--bs-body-color); }
@media (max-width: 575.98px) { .rpt-hero .card-body { padding: 16px; } .rpt-hero-ico { width: 42px; height: 42px; font-size: 21px; } .rpt-hero .btn-success { width: 100%; } }

/* ===== Domicilio: ver días anteriores ===== */
.dom-fecha { display: inline-flex; align-items: center; gap: 4px; background: var(--bs-tertiary-bg); border-radius: 12px; padding: 4px; margin-left: auto; }
.dom-fecha input[type=date] { border: 0; background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 9px; padding: 6px 10px; font-weight: 600; font-size: 13.5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); color-scheme: light; }
[data-bs-theme="dark"] .dom-fecha input[type=date] { color-scheme: dark; }
.dom-fecha-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--bs-body-color); font-size: 20px; text-decoration: none; }
.dom-fecha-btn:hover { background: var(--bs-body-bg); color: var(--marca); }
.dom-fecha-btn.deshabilitado { opacity: .3; pointer-events: none; }
.dom-fecha-hoy { font-weight: 700; font-size: 13px; color: var(--marca); padding: 0 10px; text-decoration: none; }
.dom-historial-aviso { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent); }
.dom-historial-aviso > i { font-size: 22px; color: var(--marca); }
.text-capitalize-first::first-letter { text-transform: uppercase; }
/* Un día anterior: solo la columna de entregados, a todo el ancho y en cuadrícula */
.dom-tablero.dom-historial { grid-template-columns: 1fr; }
.dom-historial .dom-columna:not([data-columna="entregado"]) { display: none !important; }
.dom-historial .dom-columna[data-columna="entregado"] { display: block !important; }
.dom-historial .dom-col-cuerpo { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; max-height: none; }
@media (max-width: 767.98px) { .dom-fecha { margin-left: 0; width: 100%; justify-content: space-between; } .dom-fecha input[type=date] { flex: 1; } }
.dom-historial .dom-vacio { grid-column: 1 / -1; }
/* Mis entregas: pestaña "Entregados" */
.rep-fecha { display: flex; width: 100%; margin-left: 0; }
.rep-fecha input[type=date] { flex: 1; text-align: center; }
.rep-hist-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.rep-hist-resumen > div { background: var(--bs-tertiary-bg); border-radius: 12px; padding: 10px; text-align: center; }
.rep-hist-resumen b { display: block; font-size: 17px; white-space: nowrap; }
.rep-hist-resumen span { font-size: 11.5px; color: var(--bs-secondary-color); }

/* ===== Menú web: portada de categorías y una categoría a la vez ===== */
.mn-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .mn-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mn-cat { position: relative; border: 0; padding: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--bs-tertiary-bg); text-align: left; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transition: transform .15s ease; }
.mn-cat:active { transform: scale(.97); }
.mn-cat-foto { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 75%, #fff), var(--marca-oscura)); }
.mn-cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.mn-cat-icono { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)); margin-bottom: 26px; }
.mn-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .72) 100%); }
.mn-cat-texto { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; line-height: 1.2; }
.mn-cat-texto b { font-size: 15.5px; font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-cat-texto small { font-size: 12px; opacity: .9; }
.mn-cat-n { position: absolute; top: 8px; right: 8px; z-index: 1; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--marca); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
/* Carrusel de promociones */
.mn-carrusel { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 6px; scroll-snap-type: x mandatory; }
.mn-carrusel::-webkit-scrollbar { display: none; }
.mn-mini { flex: 0 0 140px; scroll-snap-align: start; border: 1px solid var(--bs-border-color-translucent); background: var(--bs-body-bg); border-radius: 16px; padding: 0 0 10px; overflow: hidden; text-align: left; display: flex; flex-direction: column; color: inherit; }
.mn-mini-foto { height: 96px; display: grid; place-items: center; font-size: 36px; background: var(--bs-tertiary-bg); }
.mn-mini-foto img { width: 100%; height: 100%; object-fit: cover; }
.mn-mini-nombre { font-weight: 700; font-size: 13px; padding: 8px 10px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-mini-precio { font-size: 13px; padding: 0 10px; }
.mn-mini-precio b { color: var(--marca); }
.mn-mini-precio s { color: var(--bs-secondary-color); font-size: 11.5px; }
/* Dentro de una categoría */
.mn-volver { background: var(--bs-body-color) !important; color: var(--bs-body-bg) !important; border-color: transparent !important; display: inline-flex; align-items: center; gap: 2px; padding-left: 8px !important; }
.mn-cat-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mn-cat-cabecera-foto { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 75%, #fff), var(--marca-oscura)); }
.mn-cat-cabecera-foto img { width: 100%; height: 100%; object-fit: cover; }
.mn-cat-cabecera-foto .mn-cat-icono { font-size: 28px; margin: 0; }
.mn-categoria-vista { animation: mn-entrar .18s ease-out; }
@keyframes mn-entrar { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mn-siguiente { width: 100%; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--borde); background: transparent; border-radius: 14px; padding: 14px 16px; color: inherit; }
.mn-siguiente span { color: var(--bs-secondary-color); font-size: 13px; }
.mn-siguiente b { flex: 1; text-align: left; }
.mn-siguiente i { color: var(--marca); font-size: 20px; }
.mn-categoria-vista { min-height: calc(100vh - 110px); min-height: calc(100dvh - 110px); }

/* ===== Clientes y lealtad ===== */
.cli-buscar { position: relative; min-width: 220px; }
.cli-buscar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.cli-buscar input { padding-left: 36px; border-radius: 12px; }
.cli-aviso { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent); }
.cli-aviso > i { font-size: 22px; color: var(--marca); }
.cli-tabla tbody tr { cursor: pointer; }
.cli-tabla tbody tr:hover { background: var(--bs-tertiary-bg); }
.cli-tabla th { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.cli-tabla td:first-child { max-width: 280px; }
.cli-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--marca); background: var(--marca-suave); }
.cli-avatar.grande { width: 52px; height: 52px; font-size: 18px; }
.cli-n { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 9px; font-weight: 800; background: var(--bs-tertiary-bg); }
.cli-seg { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; vertical-align: 1px; }
.cli-seg.frecuente { background: rgba(237, 161, 0, .16); color: #a86f00; }
.cli-seg.nuevo { background: rgba(42, 120, 214, .12); color: #2a78d6; }
.cli-seg.recurrente { background: rgba(27, 175, 122, .13); color: #128a5e; }
.cli-seg.inactivo { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .cli-seg.frecuente { color: #ffc94d; }
[data-bs-theme="dark"] .cli-seg.nuevo { color: #74b0f5; }
[data-bs-theme="dark"] .cli-seg.recurrente { color: #4fd6a2; }
.cli-sellos { display: inline-flex; gap: 3px; align-items: center; font-size: 13px; }
.cli-sellos span { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--serie-4); }
.cli-sellos span.lleno { background: var(--serie-4); }
.cli-premio { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--marca); }
.cli-ficha-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 575.98px) { .cli-ficha-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cli-ficha-datos > div { background: var(--bs-tertiary-bg); border-radius: 12px; padding: 10px 12px; }
.cli-ficha-datos span { display: block; font-size: 11.5px; color: var(--bs-secondary-color); }
.cli-ficha-datos b { font-size: 16px; white-space: nowrap; }
.cli-caja { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; height: 100%; }
.cli-pedido { border-bottom: 1px solid var(--borde); padding: 10px 0; }
.cli-pedido:last-child { border-bottom: 0; }
@media (max-width: 767.98px) {
    #filtros { width: 100%; overflow-x: auto; scrollbar-width: none; }
    #filtros button { white-space: nowrap; flex: 0 0 auto; padding: 7px 12px; }
    .cli-tabla td:first-child { max-width: 190px; }
}

/* Configuración: vista previa del mensaje del menú en WhatsApp */
.wa-cta { background: #fff; color: #111b21; border-radius: 0 10px 10px 10px; max-width: 320px; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.wa-cta img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.wa-cta-texto { padding: 8px 10px; font-size: 13.5px; }
.wa-cta-boton { border-top: 1px solid #e9edef; padding: 9px; text-align: center; color: #027eb5; font-weight: 600; font-size: 14px; }
.wa-cta-boton i { margin-right: 4px; }

/* Inventario: chips de estado, existencias en el formulario del producto */
.inv-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.inv-chip.ok { background: rgba(25, 135, 84, .12); color: #146c43; }
.inv-chip.bajo { background: rgba(255, 159, 28, .16); color: #a35a00; }
.inv-chip.agotado { background: rgba(220, 53, 69, .12); color: #b02a37; }
[data-bs-theme="dark"] .inv-chip.ok { color: #6fdc9f; }
[data-bs-theme="dark"] .inv-chip.bajo { color: #ffc067; }
[data-bs-theme="dark"] .inv-chip.agotado { color: #ff8b95; }
.inv-actual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-tertiary-bg); }
.inv-actual b { font-size: 22px; }
.inv-num { max-width: 96px; }
.inv-tabla th { font-size: 12px; color: var(--bs-secondary-color); font-weight: 600; }

/* Pantalla de inventario */
.inv-kpi-filtro { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.inv-kpi-filtro:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.inv-tabs .nav-link { font-weight: 600; }
.inv-cat { width: auto; min-width: 180px; }
.inv-fecha { width: auto; }
.inv-lista td { padding-top: 10px; padding-bottom: 10px; }
.inv-prod { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 420px; }
.inv-foto { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); font-size: 20px; }
.inv-foto img { width: 100%; height: 100%; object-fit: cover; }
.inv-variante { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); margin-left: 4px; }
.inv-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.inv-stock { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inv-stock.bajo { color: #c26a00; }
.inv-stock.agotado { color: #c0313f; }
[data-bs-theme="dark"] .inv-stock.bajo { color: #ffb347; }
[data-bs-theme="dark"] .inv-stock.agotado { color: #ff7b86; }
.inv-barra { display: block; width: 72px; height: 5px; border-radius: 5px; background: var(--bs-border-color); margin: 4px 0 5px auto; overflow: hidden; }
.inv-barra span { display: block; height: 100%; border-radius: 5px; background: #198754; }
.inv-barra.bajo span { background: #ff9f1c; }
.inv-barra.agotado span { background: #dc3545; }
.inv-acciones { display: inline-flex; gap: 6px; align-items: center; }
.inv-oculto { opacity: .6; }
.inv-foco td { background: rgba(var(--bs-primary-rgb), .07); }
.inv-hecho td { animation: invHecho 1.6s ease; }
@keyframes invHecho { 0% { background: rgba(25, 135, 84, .22); } 100% { background: transparent; } }
.inv-cant.mas { color: #198754; }
.inv-cant.menos { color: #c0313f; }
.inv-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inv-tipos label { cursor: pointer; margin: 0; }
.inv-tipos input { position: absolute; opacity: 0; pointer-events: none; }
.inv-tipos span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border: 1.5px solid var(--bs-border-color); border-radius: 12px; height: 100%; }
.inv-tipos span i { font-size: 22px; color: var(--bs-secondary-color); }
.inv-tipos span small { font-size: 11px; color: var(--bs-secondary-color); line-height: 1.2; }
.inv-tipos input:checked + span { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, transparent); }
.inv-tipos input:checked + span i { color: var(--marca); }
.inv-tipos input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.inv-resultado { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: var(--bs-tertiary-bg); }
.inv-resultado > div { display: flex; flex-direction: column; }
.inv-resultado b { font-size: 24px; font-weight: 800; }
.inv-resultado .inv-chip { margin-left: auto; }
.inv-vacio { text-align: center; padding: 40px 16px; max-width: 620px; margin: 0 auto; }
.inv-vacio-icono { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; background: color-mix(in srgb, var(--marca) 12%, transparent); color: var(--marca); margin-bottom: 12px; }
.inv-ajuste { padding: 12px 16px; border: 1px dashed var(--bs-border-color); border-radius: 12px; }
@media (max-width: 575.98px) {
    .inv-cat, .inv-fecha { flex: 1 1 45%; min-width: 0; }
    .inv-prod { gap: 8px; max-width: 200px; }
    .inv-foto { width: 36px; height: 36px; flex-basis: 36px; }
    .inv-stock { font-size: 17px; }
    .inv-barra { width: 52px; }
}

/* Configuración: rubro de la tienda */
.rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rubro { margin: 0; cursor: pointer; }
.rubro input { position: absolute; opacity: 0; pointer-events: none; }
.rubro span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid var(--bs-border-color); border-radius: 10px; font-weight: 600; font-size: 13.5px; background: var(--bs-body-bg); }
.rubro span i { font-style: normal; font-size: 18px; }
.rubro input:checked + span { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, var(--bs-body-bg)); }
.rubro input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.mn-ultimas { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 800; color: #b02a37; background: rgba(220, 53, 69, .1); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.inv-mini { font-variant-numeric: tabular-nums; }
.inv-mini.bajo { color: #c26a00; }
.inv-mini.agotado { color: #c0313f; }
.inv-inicio { border-left: 4px solid #ff9f1c; }
.inv-inicio-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.inv-inicio-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--bs-border-color); border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.inv-inicio-item:hover { background: var(--bs-tertiary-bg); }
@media (max-width: 575.98px) {
    .inv-lista .inv-prod { max-width: 165px; }
    .inv-lista .inv-acciones { flex-direction: column; gap: 4px; }
    .inv-lista td:last-child { padding-left: 4px; padding-right: 0; }
    .inv-lista .inv-chip { font-size: 10.5px; padding: 1px 7px; }
}

/* Categorías (tienda) */
.cat-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.cat-tarjeta.oculta { opacity: .65; }
.cat-asa { cursor: grab; color: var(--bs-secondary-color); font-size: 18px; }
.cat-portada { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 26px; background: color-mix(in srgb, var(--marca) 10%, var(--bs-body-bg)); }
.cat-portada img { width: 100%; height: 100%; object-fit: cover; }
.cat-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.cat-datos a { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: var(--bs-tertiary-bg); color: inherit; text-decoration: none; }
.cat-datos a:hover { background: color-mix(in srgb, var(--marca) 8%, var(--bs-tertiary-bg)); }
.cat-datos b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cat-datos span { font-size: 12px; color: var(--bs-secondary-color); }
.cat-datos a.con-alerta b { color: #c26a00; }
@media (max-width: 575.98px) { .cat-lista { grid-template-columns: 1fr; } }
/* Categorías agrupadas (Hombre / Mujer / Unisex) */
.grupo-bloque { margin-bottom: 28px; }
.grupo-bloque.oculto { opacity: .7; }
.grupo-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--bs-border-color); flex-wrap: wrap; }
.grupo-icono { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: color-mix(in srgb, var(--marca) 12%, var(--bs-body-bg)); }
.grupo-asa { cursor: grab; color: var(--bs-secondary-color); font-size: 18px; }
.grupo-vacio { padding: 18px; border: 1px dashed var(--bs-border-color); border-radius: 12px; color: var(--bs-secondary-color); font-size: 14px; }
.mg-grupo-titulo { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: 12px 10px 4px; }
.mg-grupo-titulo:first-child { padding-top: 4px; }
/* Catálogo web por grupos (Hombre / Mujer / Unisex) */
.mn-grupo + .mn-grupo { margin-top: 18px; }
.mn-grupo-titulo { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin: 4px 0 10px; }
.mn-cat-grupo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--marca); }
/* Configuración: qué empresa contesta el número de WhatsApp */
.numero-dueno { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.numero-dueno i { font-size: 20px; line-height: 1; margin-top: 1px; }
.numero-dueno.mio { background: rgba(25, 135, 84, .1); color: #146c43; }
.numero-dueno.otro { background: rgba(255, 159, 28, .14); color: #8a4b00; }
[data-bs-theme="dark"] .numero-dueno.mio { color: #6fdc9f; }
[data-bs-theme="dark"] .numero-dueno.otro { color: #ffc067; }
/* Configuración: conectar WhatsApp con Facebook (registro integrado) */
.conectar-meta { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .35); flex-wrap: wrap; }
.conectar-meta-ico { width: 48px; height: 48px; border-radius: 12px; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; flex: 0 0 48px; }
.btn-facebook { background: #1877f2; color: #fff; border: 0; font-weight: 600; }
.btn-facebook:hover, .btn-facebook:focus { background: #166fe5; color: #fff; }