/* =========================================================
   Restaurante — rediseño de la vista pública
   Todo el contenido de este archivo está deliberadamente
   anidado bajo .negocio-personalizado para no afectar
   ninguna otra página del sitio (home, checkout, admin).
   ========================================================= */

.negocio-personalizado {
    --uki-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --uki-bg: #fafafa;
    --uki-ink: #1c1c1e;
    --uki-ink-soft: #6b6b70;
    --uki-line: rgba(28, 28, 30, 0.08);
    font-family: var(--uki-font);
    color: var(--uki-ink);
    background-color: var(--uki-bg);
}

.negocio-personalizado h4,
.negocio-personalizado h5,
.negocio-personalizado h6 {
    font-family: var(--uki-font);
    letter-spacing: -0.01em;
}

/* ---------- Header / portada ---------- */

.rd-header {
    position: relative;
}

.rd-cover {
    width: 100%;
    height: clamp(140px, 26vw, 260px);
    object-fit: cover;
    display: block;
    background-color: #ececec;
}

.rd-cover-placeholder {
    width: 100%;
    height: clamp(90px, 14vw, 130px);
    background: linear-gradient(135deg, #f1f1f3, #e7e7ea);
}

.rd-header-bar {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.rd-avatar-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: -42px;
    padding-bottom: 14px;
}

.rd-avatar {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    object-fit: contain;
    box-sizing: border-box;
    padding: 6px;
    border: 3px solid #fff;
    background: #fff;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.rd-title-block {
    padding-bottom: 6px;
    min-width: 0;
}

.rd-glass {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px -10px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
}

.rd-avatar-link {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.rd-avatar-link:hover {
    transform: translateY(-2px) scale(1.03);
}

.rd-back-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px -10px rgba(0, 0, 0, 0.25);
    color: var(--uki-ink);
    font-size: 14px;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.rd-back-btn:hover {
    transform: translateX(-2px);
    color: var(--uki-ink);
}

.rd-back-btn:active {
    transform: translateX(-2px) scale(0.92);
}

.rd-title-block h5 {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--uki-ink-soft);
}

.rd-meta-line .rating-block {
    color: #1c1c1e;
}

.rd-unavailable-pill {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fdeceb;
    color: #b3271d;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- Tags de envío / datos ---------- */

.rd-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 14px 0 0 0;
}

.rd-tags li {
    list-style: none;
}

.rd-tags .etiqueta-destacada,
.rd-tags li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--uki-line);
    font-size: 12.5px;
    color: var(--uki-ink);
}

/* ---------- Navegación de categorías (pills) ---------- */

.rd-sticky-bar {
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--uki-line);
    box-shadow: 0 4px 16px -12px rgba(0, 0, 0, 0.15);
}

#menu-categorias {
    display: flex;
    gap: 8px;
    list-style: none;
}

#menu-categorias .nav-item {
    flex-shrink: 0;
}

#menu-categorias .linkCategoria {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--uki-line);
    color: var(--uki-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, color 0.2s ease;
}

#menu-categorias .linkCategoria:hover {
    color: var(--color-terciario, var(--uki-ink));
    border-color: var(--color-terciario, rgba(28, 28, 30, 0.18));
    transform: translateY(-1px);
}

#menu-categorias .linkCategoria:active {
    transform: scale(0.97);
}

/* ---------- Layout principal (menú + mapa sticky) ---------- */

.rd-body {
    max-width: 1300px;
    margin: 0 auto;
}

.rd-body-with-map {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}

.rd-map-col {
    position: sticky;
    top: calc(var(--nav-h, 60px) + 16px);
}

@media (max-width: 900px) {
    .rd-body-with-map {
        grid-template-columns: 1fr;
    }

    .rd-map-col {
        position: static;
    }
}

/* ---------- Secciones de categoría ---------- */

#restaurantecategorias {
    padding: 8px 20px 40px;
    min-width: 0;
}

.titulo-categoria {
    border-radius: 16px;
    overflow: hidden;
}

#restaurantecategorias > .row > h4 {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left !important;
    margin: 28px 0 14px 0;
    padding: 8px 14px 8px 10px;
    border-radius: 10px;
    border-bottom: 1px solid var(--uki-line);
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, border-color 0.35s ease;
}

/* ---------- Tarjeta de platillo ---------- */
/* Se reutilizan las clases existentes (food-item, food-item-wrap,
   figure-wrap, btnAgregarPlatillo, price, old_price) para no romper
   el plugin de lazy-load (foodpicky.js) ni el flujo de carrito.
   El grid de tarjetas usa CSS Grid en vez del float-grid de Bootstrap 3
   (.row > .col-lg-4 con float:left), que entra en conflicto con la
   tarjeta vertical nueva. */

.negocio-personalizado #restaurantecategorias .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
}

@media (min-width: 600px) {
    .negocio-personalizado #restaurantecategorias .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .negocio-personalizado #restaurantecategorias .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.negocio-personalizado #restaurantecategorias .row > h4,
.negocio-personalizado #restaurantecategorias .row > .titulo-categoria {
    grid-column: 1 / -1;
}

/* Las tarjetas viven dentro de ".rd-platillos-scroller" (necesario para el
   slider horizontal en móvil, ver sección Mobile más abajo), pero en
   desktop ese wrapper no debe alterar el grid: "display:contents" lo hace
   invisible para el layout, como si las tarjetas siguieran siendo hijas
   directas de ".row" y participaran del mismo grid de columnas. */
.negocio-personalizado .rd-platillos-scroller {
    display: contents;
}

/* El grid ya decide el ancho de cada columna; se anulan los anchos
   porcentuales de Bootstrap 3 (col-12/col-md-6/col-lg-4), que dentro
   de un contenedor grid se calculan contra el track (ya angosto) en
   vez del ancho completo de la fila, encogiendo la tarjeta. */
.negocio-personalizado #restaurantecategorias .row > .rd-platillos-scroller > .food-item {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
}

.negocio-personalizado .rd-platillo-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.negocio-personalizado .food-item-wrap:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-terciario, #ee072c) 35%, transparent);
}

.negocio-personalizado .rd-platillo-link:hover {
    color: inherit;
}

.negocio-personalizado .food-item {
    height: 100%;
}

.negocio-personalizado .food-item-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--uki-line);
    overflow: hidden;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.negocio-personalizado .food-item-wrap:hover {
    transform: translateY(-15px);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.2);
}

.negocio-personalizado .figure-wrap.bg-image {
    border-radius: 0;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.negocio-personalizado .figure-wrap.bg-image:after {
    display: none;
}

.negocio-personalizado .food-item-wrap:hover .figure-wrap.bg-image {
    transform: scale(1.05);
}

/* Estado "no disponible": imagen atenuada + listón, sin afectar el resto de la tarjeta */
.negocio-personalizado .food-item-wrap.rd-no-disponible .figure-wrap.bg-image {
    filter: grayscale(0.85) brightness(0.92);
}

.negocio-personalizado .rd-no-disponible-ribbon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(28, 28, 30, 0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* Reveal escalonado al cargar la página */
.negocio-personalizado .food-item {
    opacity: 0;
    animation: rdFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--index, 0) * 60ms);
}

@keyframes rdFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.negocio-personalizado .content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.negocio-personalizado .uki_platillo_titulo {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.25;
    /* food_style.css le pone white-space:nowrap + ellipsis (pensado para
       una sola línea); el nombre del platillo debe verse siempre completo,
       así que se anula y se deja saltar de línea si no entra. Importante:
       NO se usa "-webkit-line-clamp" aquí — eso recorta visualmente según
       cuántas líneas entran en pantalla (que varía por dispositivo/ancho),
       no según la cantidad de caracteres, y terminaba ocultando texto que
       ya estaba pensado para verse completo. El min-height solo reserva
       el espacio de 2 líneas para que la línea que separa el precio quede
       alineada en el caso común (1 o 2 líneas); si el nombre llega a
       ocupar más, la tarjeta crece en vez de cortar el texto. */
    white-space: normal;
    min-height: 40px;
}

.negocio-personalizado .uki_platillo_titulo {
    color: var(--uki-ink);
}

/* El recorte real de la descripción ya se hizo en el servidor (120
   caracteres, ver food/components/platillo.blade.php y promoVirtualDish)
   — aquí NO se usa "-webkit-line-clamp" porque eso recortaría por
   cantidad de líneas (que varía según el ancho de cada dispositivo), no
   por caracteres, y podía esconder parte del texto ya truncado. El
   min-height solo reserva el espacio de 2 líneas para alinear la línea
   que separa el precio en el caso común. */
.negocio-personalizado .product-name {
    font-size: 13.5px;
    color: var(--uki-ink-soft);
    line-height: 1.5;
    white-space: normal;
    margin-bottom: 10px;
    min-height: 40px;
}

/* Se renderizan dos versiones de la descripción (completa y recortada a
   120 caracteres con "...") y se elige cuál mostrar por CSS según el
   ancho de pantalla — el recorte por caracteres es exacto en servidor
   (Str::limit), algo que no se puede lograr solo con CSS (line-clamp
   corta por líneas, no por cantidad de caracteres). */
.negocio-personalizado .rd-desc-mobile {
    display: none;
}

.negocio-personalizado .product-name.rd-desc-full {
    height: auto;
}

.negocio-personalizado .rd-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.negocio-personalizado .rd-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f4f4f5;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--uki-ink-soft);
}

.negocio-personalizado .rd-meta-tag i {
    color: var(--color-terciario);
    font-size: 11px;
}

.negocio-personalizado .rd-meta-tag-promo {
    background: color-mix(in srgb, var(--color-terciario, #ee072c) 12%, #fff);
    color: var(--color-terciario);
}

.negocio-personalizado .rd-meta-tag-promo i {
    color: var(--color-terciario);
}

.negocio-personalizado .price-btn-block {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    /* min-height (no height fijo: eso recortaba la etiqueta "Ahorras $X"
       cuando no entraba exacto). Con promoción este bloque muestra además
       el precio anterior tachado y esa etiqueta, lo que lo hace más alto
       que el de un platillo sin promoción — por eso el mínimo es generoso,
       para que ambos casos casi siempre midan lo mismo (y el divisor
       quede alineado), pero sin nunca esconder contenido si llegara a
       necesitar un poco más de espacio. */
    min-height: 80px;
    padding: 12px 64px 12px 16px;
    border-top: 1px solid var(--uki-line);
}

.negocio-personalizado .rd-precio-block {
    min-width: 0;
    overflow: hidden;
}

.negocio-personalizado .rd-precio-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.negocio-personalizado .rd-precio-icon {
    color: var(--color-secundario);
    font-size: 12px;
}

.negocio-personalizado .price {
    font-weight: 700;
    font-size: 17px;
}

.negocio-personalizado .old_price {
    color: var(--uki-ink-soft);
    font-size: 12.5px;
    text-decoration: line-through;
}

.negocio-personalizado .rd-ahorra {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #1f8a4c;
}

.negocio-personalizado .rd-no-disponible-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uki-ink-soft);
}

.negocio-personalizado .btnAgregarPlatillo {
    position: absolute !important;
    bottom: 16px;
    right: 16px;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.negocio-personalizado .btnAgregarPlatillo:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primario, #ee072c) 18%, transparent);
}

.negocio-personalizado .btnAgregarPlatillo:active {
    transform: scale(0.9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #ee072c) 28%, transparent);
}

.negocio-personalizado .distance {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-secundario, #ee072c);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    animation: rdPulse 2.2s ease-in-out infinite;
}

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

/* ---------- Móvil: anular estilos viejos de food_style.css ----------
   Esas reglas (@media max-width:768px) se hicieron para el grid flotante
   de Bootstrap 3 y nunca se actualizaron para esta tarjeta; siguen
   aplicando porque apuntan a otra propiedad (background-color, márgenes
   fijos en px, tamaños !important) que esta hoja no llegaba a pisar. */
@media (max-width: 768px) {
    .negocio-personalizado #restaurantecategorias {
        background-color: transparent;
    }

    .negocio-personalizado #restaurantecategorias h4 {
        color: var(--uki-ink);
    }

    .negocio-personalizado .food-item-wrap {
        height: 100%;
        margin: 0 !important;
    }

    .negocio-personalizado .figure-wrap.bg-image {
        height: auto;
        min-height: 0;
    }

    .negocio-personalizado .price-btn-block {
        bottom: auto;
        width: 100%;
    }

    .negocio-personalizado .price {
        font-size: 17px !important;
    }

    .negocio-personalizado .btnAgregarPlatillo {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
    }
}

/* ---------- Estado vacío ---------- */

.rd-empty-state {
    max-width: 1100px;
    margin: 40px auto;
    padding: 48px 20px;
    text-align: center;
    color: var(--uki-ink-soft);
}

.rd-empty-state h6 {
    color: var(--uki-ink);
    font-weight: 700;
    margin-bottom: 6px;
}

/* ---------- Banner compacto de promoción (página de detalle) ---------- */
/* En su propia página, la promoción no necesita la card completa de producto
   (ya estás "adentro" de ella) — solo un resumen breve y bajo en altura;
   lo relevante a mostrar son los platillos que aplican, debajo. */

.negocio-personalizado .rd-promo-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--uki-line);
    border-radius: 18px;
}

.negocio-personalizado .rd-promo-banner-img {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.negocio-personalizado .rd-promo-banner-content {
    min-width: 0;
}

.negocio-personalizado .rd-promo-banner-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 6px 0 4px 0;
    line-height: 1.25;
}

.negocio-personalizado .rd-promo-banner-desc {
    font-size: 13.5px;
    color: var(--uki-ink-soft);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 599px) {
    .negocio-personalizado .rd-promo-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ---------- Mapa ---------- */

.rd-map-panel {
    padding: 8px 20px 40px;
}

@media (max-width: 900px) {
    .rd-map-panel {
        padding-top: 0;
    }
}

.rd-map-panel h6 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 28px 0 14px 0;
    padding: 8px 0;
    line-height: 1.4;
}

.rd-map-panel #map-negocio {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--uki-line);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .rd-avatar {
        width: 68px;
        height: 68px;
        border-radius: 16px;
    }

    .rd-avatar-row {
        margin-top: -34px;
    }

    #menu-categorias {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* En desktop las tarjetas se acomodan en columnas, así que tiene sentido
       que el reveal sea hacia arriba (rdFadeInUp). En móvil son una sola
       columna apilada verticalmente, y ese mismo movimiento vertical se ve
       redundante con el scroll del usuario — un slide horizontal se nota
       más y se distingue mejor del scroll. */
    .negocio-personalizado .food-item {
        animation-name: rdFadeInSlide;
    }

    /* Descripción recortada a 200 caracteres solo en móvil (tarjetas más
       angostas en el slider de dos columnas); en desktop se ve completa. */
    .negocio-personalizado .rd-desc-full {
        display: none;
    }
    .negocio-personalizado .rd-desc-mobile {
        display: block;
    }

    /* Slider horizontal de platillos por categoría: en vez de la grilla de
       una columna, cada categoría muestra sus platillos en una fila que se
       desliza horizontalmente (swipe), no hacia abajo. ".row" deja de ser
       el grid de tarjetas (eso ahora lo hace ".rd-platillos-scroller", un
       div nuevo y separado que envuelve solo las tarjetas, no el título) —
       así el título de la categoría queda fijo arriba y no se desliza junto
       con las tarjetas. */
    .negocio-personalizado #restaurantecategorias .row {
        display: block;
        gap: 0;
    }
    .negocio-personalizado #restaurantecategorias .row > h4,
    .negocio-personalizado #restaurantecategorias .row > .titulo-categoria {
        grid-column: auto;
    }
    .negocio-personalizado .rd-platillos-scroller {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin: 0 -20px;
        padding: 4px 20px 8px;
    }
    /* Dos tarjetas visibles de entrada (el gap de 14px se reparte entre
       ambas: la mitad de 14px es 7px). "height: auto" (en vez del 100%
       pensado para el grid de desktop, donde sí hay una fila con alto
       definido) es lo que deja que "align-items: stretch" del scroller
       empareje la altura de todas las tarjetas con la más alta. */
    .negocio-personalizado #restaurantecategorias .row > .rd-platillos-scroller > .food-item {
        width: calc(50% - 7px) !important;
        max-width: calc(50% - 7px) !important;
        flex: 0 0 calc(50% - 7px) !important;
        height: auto !important;
        scroll-snap-align: start;
    }
    /* Si la categoría tiene un solo platillo, que ocupe todo el ancho en
       vez de quedar a la mitad con espacio vacío al lado. */
    .negocio-personalizado #restaurantecategorias .row > .rd-platillos-scroller > .food-item:only-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@keyframes rdFadeInSlide {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}