/* Plus Jakarta Sans: fuente elegante y muy legible, auto-alojada (sin
   depender de Google Fonts) — se usa en todo el catálogo y en el panel de
   administración, para que todo el sitio se sienta parte de un mismo
   diseño cuidado. Licencia SIL Open Font License 1.1. */
@font-face {
    font-family: 'Jakarta';
    src: url('../fonts/jakarta-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Jakarta';
    src: url('../fonts/jakarta-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Jakarta';
    src: url('../fonts/jakarta-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Jakarta';
    src: url('../fonts/jakarta-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Jakarta';
    src: url('../fonts/jakarta-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-marca: #198754;      /* verde WhatsApp/éxito, ya usado en los botones "COMPRAR" */
    --color-marca-oscuro: #14532d;
    --color-precio-vivo: #0a9d54; /* verde más vivo que el de los botones, reservado para precios: debe resaltar y llamar la atención */
    --color-acento: #ffc107;     /* el amarillo que ya usaban los botones de categorías */
    --color-naranja: #fd7e14;    /* botón de acceso al panel */
    --color-naranja-oscuro: #c9600a;
    --color-texto: #212529;
    --color-texto-suave: #6c757d;
    --color-fondo: #f8f9fa;
    --radio-tarjeta: 14px;
    --sombra-suave: 0 2px 10px rgba(0, 0, 0, .06);
    --sombra-media: 0 6px 18px rgba(0, 0, 0, .10);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Jakarta', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Todo elemento interactivo con un tamaño mínimo cómodo para el dedo */
.btn, .form-control, .form-select, .nav-link, .page-link {
    min-height: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .2px;
}

.btn svg {
    flex-shrink: 0;
}

.btn.dropdown-toggle {
    gap: 0;
}

.btn-success {
    background-color: var(--color-marca);
    border-color: var(--color-marca);
}

.btn-success:hover, .btn-success:active {
    background-color: var(--color-marca-oscuro);
    border-color: var(--color-marca-oscuro);
}

/* Botón del engrane (acceso al panel) en el encabezado del catálogo. */
#btnAccesoPanel {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
    color: #fff;
}

#btnAccesoPanel:hover, #btnAccesoPanel:active {
    background-color: var(--color-naranja-oscuro);
    border-color: var(--color-naranja-oscuro);
    color: #fff;
}

/* Portada (cabecera) de la tienda: una banda ancha detrás del logo,
   inspirada en las portadas tipo "foto de portada + foto de perfil" de
   redes sociales. La imagen de fondo (la propia de la tienda, o si no subió
   ninguna, images/portada-defecto.jpg) se define en línea desde index.php,
   para respetar la URL base del sitio; background-color es solo un
   respaldo mientras la imagen carga. */
.portada-tienda {
    height: 130px;
    background-color: #111827;
    background-size: cover;
    background-position: center;
}

@media (min-width: 768px) {
    .portada-tienda {
        height: 200px;
    }
}

/* Logo del sitio: círculo blanco que se superpone al borde inferior de la
   portada (igual que una foto de perfil sobre una foto de portada). El
   tamaño recomendado al subirlo sigue siendo 500x500px; object-fit: cover
   recorta cualquier proporción distinta para que siempre se vea redondo. */
.logo-sitio {
    display: block;
    box-sizing: border-box;
    width: 130px;
    height: 130px;
    object-fit: cover;
    margin: -65px auto 0;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

@media (min-width: 768px) {
    .logo-sitio {
        width: 170px;
        height: 170px;
        margin-top: -85px;
        border-width: 5px;
    }
}

.logo-sitio {
    animation: logoEntrada 1s cubic-bezier(.22, 1, .36, 1) both,
               logoRespiracion 6s ease-in-out 1s infinite;
}

@keyframes logoEntrada {
    from { opacity: 0; transform: scale(.9) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes logoRespiracion {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}

header .navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Un poco de aire extra arriba, además del safe-area del notch,
       para que el badge del carrito nunca quede pegado al borde
       superior de la ventana (que lo recortaría). */
    padding-top: calc(env(safe-area-inset-top) + 4px);
}

header .navbar-brand strong {
    font-size: 1.15rem;
}

.badge-carrito {
    position: absolute;
    top: -6px;
    right: -6px;
}

.card {
    border: none;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:active {
    transform: scale(0.98);
}

@media (hover: hover) {
    .card:hover {
        box-shadow: var(--sombra-media);
        transform: translateY(-4px);
    }
}

/* Aparición en cascada de las tarjetas de producto al entrar en pantalla.
   El JS (js/animaciones.js) agrega la clase "visible" cuando cada tarjeta
   entra al viewport; el retraso por columna (nth-child) crea el efecto de
   cascada. Sin JavaScript, o si el navegador prefiere menos movimiento,
   las tarjetas se muestran normales sin animación. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal:nth-child(4n+1) { transition-delay: 0s; }
.reveal:nth-child(4n+2) { transition-delay: .08s; }
.reveal:nth-child(4n+3) { transition-delay: .16s; }
.reveal:nth-child(4n+4) { transition-delay: .24s; }

.card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #eee;
}

/* Producto sin stock: la foto se ve apagada y un sello diagonal avisa
   "Agotado" de un vistazo, sin tener que leer el badge de texto. */
.tarjeta-agotada {
    position: relative;
    overflow: hidden;
}

.tarjeta-agotada .card-img-top {
    filter: grayscale(60%);
    opacity: .55;
}

.sello-agotado {
    position: absolute;
    top: 14px;
    left: -32px;
    width: 140px;
    transform: rotate(-40deg);
    background: rgba(33, 37, 41, .85);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    padding: .25rem 0;
    pointer-events: none;
}

/* Botón "agregar rápido" de la tarjeta: feedback breve al tocarlo, sin
   tener que salir del catálogo para saber si funcionó. */
.btn-agregar-rapido {
    transition: transform .15s ease;
}

.btn-agregar-rapido.agregado {
    background-color: var(--color-marca-oscuro, #146c43);
    border-color: var(--color-marca-oscuro, #146c43);
    transform: scale(1.08);
}

/* Franja de fondo alterna para las filas de "Productos destacados" por
   categoría en el INDEX: las filas pares (2ª, 4ª...) llevan un fondo suave
   en el color de marca, para diferenciarlas visualmente de las impares. */
.fila-categoria-destacada {
    background: linear-gradient(135deg, rgba(25, 135, 84, .08), rgba(255, 193, 7, .10));
    border-radius: var(--radio-tarjeta);
    padding-left: .75rem;
    padding-right: .75rem;
}

.card-title {
    font-size: .95rem;
    min-height: 2.4em;
}

.card-body h4 .badge {
    font-size: 1rem;
    font-weight: 700;
}

.boton-whatsapp-flotante {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-marca);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-media);
    z-index: 1040;
    transition: transform .15s ease;
}

.boton-whatsapp-flotante:hover,
.boton-whatsapp-flotante:active {
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

/* Anillo pulsante detrás del botón, para llamar la atención sin ser invasivo. */
.boton-whatsapp-flotante::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--color-marca);
    z-index: -1;
}

.boton-whatsapp-flotante::after {
    animation: pulsoWhatsapp 2.5s ease-out infinite;
}

@keyframes pulsoWhatsapp {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.8); }
}

.form-label {
    font-weight: 600;
    font-size: .9rem;
}

.form-control, .form-select {
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-marca);
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .15);
}

/* Barra de búsqueda de productos (portada/categoría): una sola sombra
   envolviendo tanto el cuadro de texto como el botón, para que se vean
   como una sola pieza en vez de que solo el cuadro de texto tenga sombra. */
.buscador-productos {
    box-shadow: var(--sombra-suave);
    border-radius: 10px;
    transition: box-shadow .2s ease;
}

.buscador-productos:focus-within {
    box-shadow: var(--sombra-media);
}

.buscador-productos .form-control,
.buscador-productos .btn {
    box-shadow: none;
}

.table-responsive-stack {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    table.table-sm td, table.table-sm th {
        white-space: nowrap;
    }
}

.badge {
    font-weight: 600;
    padding: .45em .7em;
}

footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.sombra-suave { box-shadow: var(--sombra-suave); }

/* Botones de redes sociales del footer: un pequeño "salto" al pasar el
   mouse, para que no se vean estáticos. */
.redes-sociales .btn {
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

@media (hover: hover) {
    .redes-sociales .btn:hover {
        transform: translateY(-3px) scale(1.08);
    }
}

.redes-sociales .btn:active {
    transform: scale(.95);
}

/* Footer de cada tienda (catálogo público): un tinte muy sutil para
   separarlo del contenido, y un separador suave antes de la línea de
   copyright/crédito. */
.pie-tienda {
    background: var(--color-fondo);
}

.pie-tienda-nombre {
    color: var(--color-texto);
}

.pie-tienda-credito {
    display: inline-block;
    color: var(--color-texto-suave);
    font-weight: 600;
    font-size: .82rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .045);
    transition: background .15s ease, color .15s ease;
}

.pie-tienda-credito:hover {
    background: rgba(2, 176, 58, .12);
    color: var(--color-marca-oscuro, #01851d);
}

.pie-tienda-separador {
    border-color: rgba(0, 0, 0, .08);
    opacity: 1;
}

/* Cuando la tienda tiene el botón flotante de WhatsApp activo, se reserva
   espacio a la derecha en la línea de créditos para que ese botón (fijo,
   siempre en la esquina inferior derecha) no tape el "Powered by". */
.pie-tienda-creditos {
    padding-right: 0;
}

@media (min-width: 576px) {
    .pie-tienda-creditos {
        padding-right: 68px;
    }
}

/* Paginación del catálogo (index/categoría): píldoras redondeadas, con el
   verde de marca en la página activa, en vez del cuadrado gris de Bootstrap
   por defecto. */
.pagination {
    gap: .35rem;
    flex-wrap: wrap;
}

.pagination .page-link {
    border: none;
    border-radius: 50px;
    min-width: 2.4rem;
    padding-inline: .9rem;
    color: var(--color-texto);
    background-color: #fff;
    box-shadow: var(--sombra-suave);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

@media (hover: hover) {
    .pagination .page-link:hover {
        color: var(--color-marca-oscuro);
        background-color: #fff;
        box-shadow: var(--sombra-media);
        transform: translateY(-2px);
    }
}

.pagination .page-item.active .page-link {
    background-color: var(--color-marca);
    color: #fff;
    box-shadow: var(--sombra-media);
}

.pagination .page-item.disabled .page-link {
    box-shadow: none;
    opacity: .45;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25);
}

/* Recordatorio del carrito: cada 5 segundos (ver js/animaciones.js), mientras
   haya al menos 1 producto pendiente, el ícono se menea y aparece un anillo
   que se expande, para avisar al cliente sin ser invasivo. */
#btnCarritoHeader.recordatorio-carrito {
    animation: anilloRecordatorioCarrito .7s ease-out;
}
#btnCarritoHeader.recordatorio-carrito svg {
    animation: meneoRecordatorioCarrito .7s ease-in-out;
    transform-origin: 50% 15%;
}

@keyframes meneoRecordatorioCarrito {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-14deg); }
    30%      { transform: rotate(12deg); }
    45%      { transform: rotate(-8deg); }
    60%      { transform: rotate(6deg); }
    75%      { transform: rotate(-3deg); }
    90%      { transform: rotate(2deg); }
}

@keyframes anilloRecordatorioCarrito {
    0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, .6); }
    100% { box-shadow: 0 0 0 14px rgba(255, 193, 7, 0); }
}

/* Evita que los inputs de tipo number en iOS muestren flechas raras */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Tarjetas de resumen en REPORTES (admin): un color distinto por período,
   usando las mismas variables de marca definidas arriba (sin colores nuevos).
   "Esta semana" usa el ámbar de fondo con el ícono en el color de texto del
   sitio en vez de en amarillo puro, por el mismo motivo por el que en
   pedidos.php el badge "Atendido" es bg-warning + text-dark: el amarillo
   puro no tiene suficiente contraste como color de ícono/texto. */
.tarjeta-resumen {
    border-left: 4px solid transparent;
}
.tarjeta-resumen.periodo-hoy    { border-left-color: var(--color-naranja); }
.tarjeta-resumen.periodo-semana { border-left-color: var(--color-acento); }
.tarjeta-resumen.periodo-mes    { border-left-color: var(--color-marca); }

.icono-resumen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
}
.icono-resumen.periodo-hoy    { background: rgba(253, 126, 20, .15); color: var(--color-naranja); }
.icono-resumen.periodo-semana { background: rgba(255, 193, 7, .22);  color: var(--color-texto); }
.icono-resumen.periodo-mes    { background: rgba(25, 135, 84, .15);  color: var(--color-marca); }

/* Tarjetas de resumen del panel del súper-admin (tiendas totales,
   activas, vencidas, suspendidas). Mismo lenguaje visual que
   .tarjeta-resumen/.icono-resumen de arriba, pero con colores por
   estado en vez de por período — se resuelven con las clases de
   Bootstrap 5.3 bg-*-subtle/text-* directamente en el HTML. */
.tarjeta-resumen-super {
    background: #fff;
    border-radius: .5rem;
    box-shadow: var(--sombra-suave, 0 1px 3px rgba(0,0,0,.08));
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
}

.icono-resumen-super {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Menú principal del panel del admin (Pedidos, Avisos, Productos...). Por
   defecto un btn-group-vertical solo mide lo que ocupa su texto (quedaba
   angosto, ~160px); esto lo lleva a un ancho fijo más generoso (~240px,
   50% más), y en celular se adapta al ancho disponible sin desbordarse. */
.menu-panel {
    width: 240px;
    max-width: 100%;
}

/* ---------- Tienda vencida (prueba o plan): bloqueo tipo modal ---------- */
/* El contenido real de la tienda (nav, botón flotante de WhatsApp, pie de
   página) se sigue mostrando de fondo para que se note que es SU tienda,
   pero difuminado y sin poder tocarse: mientras no elija un plan, nada de
   eso debe poder usarse. */
body.fondo-bloqueado > header,
body.fondo-bloqueado > main,
body.fondo-bloqueado > footer,
body.fondo-bloqueado > .boton-whatsapp-flotante {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

body.fondo-bloqueado {
    overflow: hidden;
    height: 100vh;
}

.overlay-vencida {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .75);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    overflow-y: auto;
}

.tarjeta-vencida {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 880px;
    padding: 2rem 1.25rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
}

@media (min-width: 576px) {
    .tarjeta-vencida {
        padding: 2.5rem;
    }
}

.logo-vencida {
    display: block;
    height: 34px;
    width: auto;
    margin: 0 auto 1.5rem;
}

/* Tarjeta de un plan de pago — se usa tanto en la pantalla normal de
   Planes (tienda activa) como en la de tienda vencida, para que ambas se
   vean con la misma calidad. La del plan destacado (favorito) lleva
   borde de color, sombra y la insignia "Más elegido". */
.tarjeta-plan {
    border: 2px solid #e9ecef;
    border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    background: #fff;
}

@media (hover: hover) {
    .tarjeta-plan:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-media);
    }
}

.tarjeta-plan.destacado {
    border-color: var(--color-marca);
    box-shadow: var(--sombra-media);
    position: relative;
}

.tarjeta-plan.destacado::before {
    content: "⭐ Más elegido";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-marca);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .25rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(2, 176, 58, .35);
}

/* Precio de un plan: verde vivo y grande, para que sea lo primero que
   salte a la vista en cada tarjeta — es lo que el dueño va a comparar. */
.precio-plan {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-precio-vivo);
    margin: .15rem 0 .4rem;
    line-height: 1;
}

/* Precio anterior (tachado), opcional — solo aparece si el súper-admin le
   puso uno mayor al precio actual desde /superadmin/precios. */
.precio-anterior-tachado {
    text-decoration: line-through;
    color: var(--color-texto-suave);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: -.2rem;
}

.franja-soporte {
    background: var(--color-fondo);
    border-radius: 14px;
    padding: .9rem 1.1rem;
}

/* Oferta de regalo en la pantalla de tienda vencida: a propósito NO se ve
   como una cuarta tarjeta más, sino como algo aparte que el dueño se
   "ganó" — degradado dorado, insignia y borde punteado en vez del blanco
   con borde recto de los planes normales. */
.tarjeta-oferta-regalo {
    background: linear-gradient(135deg, #fff8e6, #fff1cc);
    border: 2px dashed #e0a800;
    border-radius: 14px;
}

.badge-regalo {
    display: inline-block;
    background: #fd7e14;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 999px;
}

.tarjeta-estado-pedidos {
    transition: background-color .15s ease;
}

.tarjeta-estado-pedidos:hover {
    background-color: var(--color-fondo);
}

/* Enlaces de "Resumen de tu tienda" en el panel: color normal como
   cualquier texto, y solo se ponen verdes al pasar el mouse, para que se
   sientan clicables sin gritarlo todo el tiempo. */
.enlace-resumen-panel {
    color: inherit;
    transition: color .15s ease;
}

.enlace-resumen-panel:hover {
    color: var(--color-marca);
}

/* Tarjetas para elegir la plantilla del catálogo (Ajustes) */
.tarjeta-plantilla {
    display: flex;
    border: 2px solid #e9ecef;
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.tarjeta-plantilla:hover {
    border-color: #adb5bd;
}

.tarjeta-plantilla.seleccionada {
    border-color: var(--color-marca);
    background-color: rgba(2, 176, 58, .06);
}

/* El círculo de selección, dentro de una tarjeta flexible, se veía
   comprimido/ovalado: el flexbox le encogía el ancho sin tocar el alto.
   Se le fija un tamaño explícito y se le impide encogerse. */
.tarjeta-plantilla input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    flex-grow: 0;
}

/* Ubicación y horario en el pie de página del catálogo */
.pie-tienda-ubicacion {
    font-size: .85rem;
    color: var(--color-texto-suave);
}

.circulo-estado-negocio {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.circulo-abierto {
    background-color: var(--color-marca);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .15);
}

.circulo-cerrado {
    background-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .15);
}

/* ---------- Panel del dueño: rediseño del menú principal ---------- */
.tarjeta-stat-panel {
    display: block;
    background: #fff;
    border-radius: .75rem;
    box-shadow: var(--sombra-suave);
    padding: .85rem .5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tarjeta-stat-panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
    color: inherit;
}

.titulo-grupo-menu {
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-texto-suave);
    margin-bottom: .6rem;
    padding-left: .1rem;
}

.tarjeta-menu-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #fff;
    border-radius: .75rem;
    box-shadow: var(--sombra-suave);
    padding: 1rem .5rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-texto);
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tarjeta-menu-panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
    color: var(--color-texto);
}

.icono-menu-panel {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-menu-panel {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: #dc3545;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 999px;
    padding: 0 4px;
}

/* ---------- Panel del dueño: encabezado con degradado + secciones ---------- */
.hero-panel-dueno {
    background: linear-gradient(135deg, var(--color-marca) 0%, #0d6b3f 60%, var(--color-marca-oscuro) 100%);
    border-radius: 24px;
    padding: 2.75rem 1.5rem 3.75rem;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
    box-shadow: 0 12px 30px -10px rgba(20, 83, 45, .45);
}

.hero-panel-dueno h1 {
    color: #fff;
    position: relative;
    z-index: 1;
}

.hero-panel-dueno p {
    position: relative;
    z-index: 1;
}

.hero-panel-decoracion {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.hero-panel-decoracion-1 {
    width: 220px;
    height: 220px;
    top: -100px;
    right: -70px;
}

.hero-panel-decoracion-2 {
    width: 140px;
    height: 140px;
    bottom: -80px;
    left: -40px;
    background: rgba(255, 255, 255, .06);
}

.stats-flotantes-panel {
    margin-top: -3rem;
    position: relative;
    z-index: 2;
}

.stats-flotantes-panel .tarjeta-stat-panel {
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .18);
}

.seccion-panel-dueno {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--sombra-suave);
    padding: 1.35rem 1.25rem;
    margin-bottom: 1.25rem;
    border-top: 3px solid transparent;
}

.seccion-panel-actividad {
    border-top-color: #fd7e14;
}

.seccion-panel-catalogo {
    border-top-color: #0d6efd;
}

.seccion-panel-tienda {
    border-top-color: #6c757d;
}

.titulo-seccion-panel {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 1rem;
    color: var(--color-texto);
}

.icono-titulo-seccion {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.seccion-panel-dueno .tarjeta-menu-panel {
    box-shadow: none;
    border: 1px solid #eef0f2;
}

.seccion-panel-dueno .tarjeta-menu-panel:hover {
    box-shadow: var(--sombra-suave);
    border-color: transparent;
}

.navbar-panel-admin {
    background: linear-gradient(90deg, var(--color-marca-oscuro) 0%, #0d6b3f 100%);
}

/* Secciones de la pagina de Ajustes, mismo lenguaje visual que el panel */
.seccion-ajustes-whatsapp { border-top-color: var(--color-marca); }
.seccion-ajustes-redes { border-top-color: #d6336c; }
.seccion-ajustes-plantilla { border-top-color: #0d6efd; }
.seccion-ajustes-horario { border-top-color: #0dcaf0; }
.seccion-ajustes-pedidos { border-top-color: #ffc107; }

/* Pastilla que muestra la plantilla activa en el panel, entre el resumen y Actividad */
.pastilla-plantilla-activa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-size: .85rem;
    color: var(--color-texto);
    text-decoration: none;
    box-shadow: var(--sombra-suave);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pastilla-plantilla-activa:hover {
    border-color: var(--color-marca);
    box-shadow: var(--sombra-media);
    color: var(--color-texto);
}

/* Texto del mensaje de pedido en la portada: 4pt (~4px) mas chico que el
   tamano "lead" que tenia antes, para que no compita tanto con el titulo
   y la descripcion de arriba. */
.texto-mensaje-pedido {
    font-size: 1rem;
}

/* Aviso amigable cuando el catalogo todavia no tiene productos: invita al
   dueno a entrar a su panel, sin ser intrusivo para un cliente que llegue
   a una tienda nueva sin querer. */
.alerta-catalogo-vacio {
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 18px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.icono-catalogo-vacio {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .75rem;
}

/* ===== Mejoras de UX en formularios (en todo el sitio) ===== */

/* Botón de envío mientras el formulario procesa (evita doble clic). */
.btn-cargando {
    cursor: wait !important;
}

/* Transición suave al marcar un campo como inválido, para que el borde
   rojo no aparezca "de golpe" sino con un pequeño respiro visual. */
.form-control,
.form-select {
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Foco más visible y consistente con el color de marca en todos los
   campos del sitio (panel, catálogo, checkout, registro). */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-marca, #198754);
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .15);
}

/* ===== Mejoras de UX del catálogo: vista rápida, carrito lateral,
   zoom de fotos y sugerencias de búsqueda ===== */

/* La foto de cada tarjeta de producto ahora es un botón (abre la vista
   rápida): se le quita toda apariencia de botón para que se vea igual
   que antes, solo con un ligero indicio de que se puede tocar. */
.btn-vista-rapida-imagen {
    display: block;
    cursor: zoom-in;
    background: none;
}

.btn-vista-rapida-imagen img {
    transition: opacity .15s ease;
}

.btn-vista-rapida-imagen:hover img,
.btn-vista-rapida-imagen:focus img {
    opacity: .92;
}

/* Fotos con zoom (vista rápida y página de producto): el cursor avisa
   que se pueden tocar para verlas más grandes. */
.zoom-foto {
    cursor: zoom-in;
}

/* Filas del carrito lateral. */
.linea-carrito-drawer {
    border-bottom: 1px solid #f1f1f1;
}

.linea-carrito-drawer:last-child {
    border-bottom: none;
}

.linea-drawer-foto {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
}

/* Miniaturas de las sugerencias del buscador. */
#listaSugerenciasBusqueda img {
    border-radius: 6px;
}

.object-fit-cover {
    object-fit: cover;
}

/* Visor de fotos a pantalla completa (zoom). Oculto por defecto; se
   activa agregando la clase "activo" desde JS. */
#visorZoomFoto {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

#visorZoomFoto.activo {
    opacity: 1;
    visibility: visible;
}

#visorZoomFoto img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    touch-action: pinch-zoom;
}

#btnCerrarZoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2001;
}