/* Design system del mundo market, tercera hoja: la carta (lista de platos, hoja del plato y
   hoja de reseñas). Partida de market.css por el tope de 30KB por .css; sus clases cuentan
   como declaradas igual que las de market.css. La carga solo la pantalla que abre la carta. */

/* Asa de la hoja: dice "esto se puede bajar" sin escribirlo. */
.ui-mk-sheet-grip {
    margin: 0.5rem auto 0;
    height: 0.3125rem;
    width: 2.5rem;
    border-radius: 9999px;
    background-color: #E4E4E7;
}

.dark .ui-mk-sheet-grip {
    background-color: #3F3F46;
}

/* ============================================================
   Pestañas de categoría con tinta deslizante
   ============================================================ */
.ui-mk-cattabs {
    position: relative;
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.ui-mk-cattabs::-webkit-scrollbar {
    display: none;
}

.ui-mk-cattab {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #71717A;
    white-space: nowrap;
    transition: color 200ms;
}

.dark .ui-mk-cattab {
    color: #A1A1AA;
}

.ui-mk-cattab.is-active {
    color: #18181B;
}

.dark .ui-mk-cattab.is-active {
    color: #FFFFFF;
}

.ui-mk-cattabs-ink {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.1875rem;
    width: 0;
    border-radius: 9999px;
    background-color: #F26722;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   Fila de plato (estilo "Fila")
   ============================================================
   Cada plato es una tarjeta con borde y sombra suave, igual que el destacado, separada de
   la siguiente por aire en vez de una línea. */
.ui-mk-dish {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.875rem;
    width: 100%;
    margin-top: 0.75rem;
    border-radius: 1.25rem;
    border: 1px solid #E4E4E7;
    background-color: #FFFFFF;
    padding: 0.875rem;
    text-align: left;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
    transition: transform 150ms;
}

.dark .ui-mk-dish {
    border-color: #33333A;
    background-color: #1C1C1F;
}

.ui-mk-dish:active {
    transform: scale(0.985);
}

.ui-mk-dish-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: #18181B;
}

.dark .ui-mk-dish-name {
    color: #FFFFFF;
}

.ui-mk-dish-desc {
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: #71717A;
}

.dark .ui-mk-dish-desc {
    color: #A1A1AA;
}

.ui-mk-dish-price {
    font-size: 0.875rem;
    font-weight: 500;
    color: #18181B;
}

.dark .ui-mk-dish-price {
    color: #FFFFFF;
}

.ui-mk-dish-media {
    position: relative;
    width: 6.5rem;
    height: 6.5rem;
}

.ui-mk-dish-media img {
    height: 100%;
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    background-color: #F4F4F5;
}

.dark .ui-mk-dish-media img {
    background-color: #26262A;
}

/* Sin foto el botón queda solo, centrado en la columna derecha. */
.ui-mk-dish-media.is-plain {
    display: flex;
    height: auto;
    width: auto;
    align-self: center;
}

/* Agregar: botón redondo flotando sobre la esquina de la foto. Con el plato ya en el pedido
   se vuelve naranja y muestra cuántos van. */
.ui-mk-dish-add {
    display: inline-flex;
    height: 2.8125rem;
    min-width: 2.8125rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid #E4E4E7;
    background-color: #FFFFFF;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #F26722;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25);
    transition: background-color 200ms, color 200ms, border-color 200ms;
}

.ui-mk-dish-media:not(.is-plain) .ui-mk-dish-add {
    position: absolute;
    right: -0.375rem;
    bottom: -0.375rem;
}

.dark .ui-mk-dish-add {
    border-color: #33333A;
    background-color: #26262A;
}

.ui-mk-dish-add.is-in-cart,
.dark .ui-mk-dish-add.is-in-cart {
    border-color: #F26722;
    background-color: #F26722;
    color: #FFFFFF;
}

/* ============================================================
   Plato destacado (estilo "Destacado")
   ============================================================
   Una sola tarjeta: la foto va pegada arriba, sin esquinas redondeadas abajo, y el plato
   debajo dentro de la misma caja. Así no se lee como una foto flotando aparte. Borde y
   sombra son los mismos de la fila: toda la carta son tarjetas iguales. */
.ui-mk-dish-feature {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    text-align: left;
}

.ui-mk-dish-feature-card {
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid #E4E4E7;
    background-color: #FFFFFF;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
    transition: transform 150ms;
}

.dark .ui-mk-dish-feature-card {
    border-color: #33333A;
    background-color: #1C1C1F;
}

.ui-mk-dish-feature:active .ui-mk-dish-feature-card {
    transform: scale(0.99);
}

/* Las fotos de producto son siempre cuadradas: el destacado las muestra enteras, sin recorte. */
.ui-mk-dish-feature-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #F4F4F5;
}

.ui-mk-dish-feature-media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

.ui-mk-dish-feature:active .ui-mk-dish-feature-media img {
    transform: scale(1.04);
}

.ui-mk-dish-feature-tag {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
}

/* ============================================================
   Recomendados para hoy
   ============================================================
   Encabeza la pestaña Todo: una caja cálida con un aura de luz en la esquina, que se
   distingue de las tarjetas blancas de la carta sin gritar. Adentro, una tira de platos que
   se desliza y encaja uno por uno. */
.ui-mk-recs {
    position: relative;
    isolation: isolate;
    /* clip y no hidden: una caja hidden igual se desplaza al enfocar una tarjeta y el
       título se corre de lado; clip recorta el aura sin dejarse mover. */
    overflow: clip;
    margin-top: 1rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(242, 103, 34, 0.18);
    background-color: #FFF7F2;
    padding-block: 1rem 0.75rem;
    animation: ui-mk-recs-in 520ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

.dark .ui-mk-recs {
    border-color: rgba(242, 103, 34, 0.24);
    background-color: #231B17;
}

/* El aura: luz ambiental naranja detrás del título, nunca opaca. */
.ui-mk-recs::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -6rem;
    right: -5rem;
    height: 14rem;
    width: 14rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(242, 103, 34, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

@keyframes ui-mk-recs-in {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* La llama es el único sólido naranja de la caja; titila suave para decir "hoy". */
.ui-mk-recs-flame {
    background-color: #F26722;
    color: #FFFFFF;
    box-shadow: 0 10px 22px -10px rgba(242, 103, 34, 0.75);
}

.ui-mk-recs-flame i {
    transform-origin: 50% 90%;
    animation: ui-mk-flicker 2.6s ease-in-out infinite;
}

@keyframes ui-mk-flicker {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.08, 0.94) rotate(-3deg); }
    60% { transform: scale(0.95, 1.07) rotate(2deg); }
}

/* Recomendados en lista: la misma fila en la carta y en el chat. Con foto, miniatura a la
   izquierda; sin foto no se guarda lugar y el texto toma todo el ancho. */
.ui-mk-recs-card {
    margin-inline: 1rem;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid #F1E4DC;
    background-color: #FFFFFF;
}

.dark .ui-mk-recs-card {
    border-color: #33333A;
    background-color: #1C1C1F;
}

.ui-mk-rec-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms;
}

.ui-mk-rec-row + .ui-mk-rec-row,
.ui-mk-recs-extra > .ui-mk-rec-row:first-child {
    border-top: 1px solid #F4F4F5;
}

.dark .ui-mk-rec-row + .ui-mk-rec-row,
.dark .ui-mk-recs-extra > .ui-mk-rec-row:first-child {
    border-top-color: #26262A;
}

.ui-mk-rec-row:active {
    background-color: #FAFAFA;
}

.dark .ui-mk-rec-row:active {
    background-color: #232327;
}

.ui-mk-rec-row.is-entering {
    animation: ui-mk-recs-in 480ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

.ui-mk-rec-thumb {
    height: 3.5rem;
    width: 3.5rem;
    flex-shrink: 0;
    border-radius: 0.875rem;
    object-fit: cover;
    background-color: #F4F4F5;
}

.dark .ui-mk-rec-thumb {
    background-color: #26262A;
}

.ui-mk-rec-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: #F26722;
}

.dark .ui-mk-rec-price {
    color: #F7A87F;
}

@media (prefers-reduced-motion: reduce) {
    .ui-mk-recs,
    .ui-mk-rec-row.is-entering,
    .ui-mk-recs-flame i {
        animation: none;
    }
}

/* ============================================================
   Estrellas: cinco siempre, con la cantidad al frente
   ============================================================ */
.ui-mk-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #71717A;
}

.dark .ui-mk-stars {
    color: #A1A1AA;
}

.ui-mk-stars-row {
    display: inline-flex;
    gap: 0.0625rem;
    font-size: 0.625rem;
    color: #F59E0B;
}

.ui-mk-stars-row .fa-regular {
    color: #D4D4D8;
}

.dark .ui-mk-stars-row .fa-regular {
    color: #52525B;
}

/* ============================================================
   Barra del pedido
   ============================================================ */
.ui-mk-cartbar {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border-radius: 1rem;
    background-color: #F26722;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    color: #FFFFFF;
    min-height: 3.25rem;
    box-shadow: 0 12px 28px -10px rgba(242, 103, 34, 0.6);
}

.ui-mk-cartbar-count {
    display: inline-flex;
    height: 1.75rem;
    min-width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.22);
    padding-inline: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.ui-mk-cartbar-total {
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.16);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Rebote al sumar un plato: la única animación "de celebración" de la carta. */
@keyframes ui-mk-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.14); }
    70% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.is-bumping {
    animation: ui-mk-bump 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ui-mk-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.is-shaking {
    animation: ui-mk-shake 380ms ease-in-out;
}

/* ============================================================
   Hoja del plato
   ============================================================ */
/* Foto del plato siempre cuadrada y entera, como se sube: sin tope de alto que la recorte. */
.ui-mk-pd-hero {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    background-color: #F4F4F5;
}

.dark .ui-mk-pd-hero {
    background-color: #26262A;
}

.ui-mk-pd-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ui-mk-pd-track::-webkit-scrollbar {
    display: none;
}

.ui-mk-pd-track img {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    object-fit: cover;
    transform: translateY(var(--pd-parallax, 0));
}

.ui-mk-pd-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    display: flex;
    gap: 0.375rem;
    transform: translateX(-50%);
}

.ui-mk-pd-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.55);
    transition: width 250ms, background-color 250ms;
}

.ui-mk-pd-dot.is-active {
    width: 1.125rem;
    background-color: #FFFFFF;
}

/* El cuerpo sube un poco sobre la foto: la hoja se siente como una tarjeta encima del plato. */
.ui-mk-pd-body {
    position: relative;
    margin-top: -1rem;
    border-radius: 1.25rem 1.25rem 0 0;
    background-color: #FFFFFF;
}

.dark .ui-mk-pd-body {
    background-color: #1C1C1F;
}

/* Botones de vidrio sobre la foto. */
.ui-mk-glass {
    background-color: rgba(255, 255, 255, 0.8);
    color: #18181B;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.3);
}

.dark .ui-mk-glass {
    background-color: rgba(28, 28, 31, 0.72);
    color: #FFFFFF;
}

.ui-mk-glass.is-liked {
    color: #E11D48;
}

/* Barra que aparece al bajar: el nombre del plato queda a la vista cuando la foto se va. */
.ui-mk-pd-topbar {
    position: absolute;
    /* Capa propia: sin ella el fondo (z-index -1) cae detrás del contenido que scrollea. */
    z-index: 10;
    inset-inline: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    pointer-events: none;
}

.ui-mk-pd-topbar > * {
    pointer-events: auto;
}

.ui-mk-pd-topbar-fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-bottom: 1px solid #E4E4E7;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 200ms;
}

.dark .ui-mk-pd-topbar-fill {
    border-bottom-color: #33333A;
    background-color: rgba(28, 28, 31, 0.92);
}

.ui-mk-pd-topbar-title {
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 700;
    color: #18181B;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity 200ms, transform 200ms;
}

.dark .ui-mk-pd-topbar-title {
    color: #FFFFFF;
}

.ui-mk-pd-topbar.is-scrolled .ui-mk-pd-topbar-fill,
.ui-mk-pd-topbar.is-scrolled .ui-mk-pd-topbar-title {
    opacity: 1;
    transform: none;
}

/* ============================================================
   Grupos de opciones
   ============================================================ */
.ui-mk-group {
    scroll-margin-top: 4rem;
    border-top: 0.5rem solid #F4F4F5;
    padding-block: 1.25rem;
}

.dark .ui-mk-group {
    border-top-color: #121214;
}

.ui-mk-group-head {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
}

/* Indicador de elegido: círculo (elige uno) o cuadrado (elige varios). */
.ui-mk-check {
    display: inline-flex;
    height: 1.375rem;
    width: 1.375rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.4375rem;
    border: 2px solid #D4D4D8;
    font-size: 0.625rem;
    color: transparent;
    transition: background-color 150ms, border-color 150ms, color 150ms;
}

.ui-mk-check.is-radio {
    border-radius: 9999px;
}

.dark .ui-mk-check {
    border-color: #52525B;
}

.is-active > .ui-mk-check,
.dark .is-active > .ui-mk-check {
    border-color: #F26722;
    background-color: #F26722;
    color: #FFFFFF;
}

/* Fila de opción sin caja: los grupos son listas limpias, no tarjetas apiladas. */
.ui-mk-pick {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.625rem;
    text-align: left;
    font-size: 0.875rem;
    color: #3F3F46;
}

.dark .ui-mk-pick {
    color: #E4E4E7;
}

.ui-mk-pick + .ui-mk-pick {
    border-top: 1px solid #F4F4F5;
}

.dark .ui-mk-pick + .ui-mk-pick {
    border-top-color: #26262A;
}

.ui-mk-pick-extra {
    font-size: 0.75rem;
    color: #71717A;
}

.dark .ui-mk-pick-extra {
    color: #A1A1AA;
}

/* ============================================================
   Control segmentado (para comer acá / para llevar)
   ============================================================ */
.ui-mk-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    border-radius: 0.875rem;
    background-color: #F4F4F5;
    padding: 0.25rem;
}

.dark .ui-mk-segment {
    background-color: #26262A;
}

.ui-mk-segment-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #71717A;
    transition: background-color 200ms, color 200ms;
}

.dark .ui-mk-segment-item {
    color: #A1A1AA;
}

.ui-mk-segment-item.is-active {
    background-color: #FFFFFF;
    color: #18181B;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.dark .ui-mk-segment-item.is-active {
    background-color: #3F3F46;
    color: #FFFFFF;
}

/* ============================================================
   Reseñas
   ============================================================ */
.ui-mk-bars {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.ui-mk-bar {
    display: grid;
    grid-template-columns: 0.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: #71717A;
}

.ui-mk-bar-track {
    height: 0.375rem;
    overflow: hidden;
    border-radius: 9999px;
    background-color: #F4F4F5;
}

.dark .ui-mk-bar-track {
    background-color: #26262A;
}

.ui-mk-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: #F59E0B;
    transform-origin: left;
    animation: ui-mk-grow 700ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ui-mk-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.ui-mk-review + .ui-mk-review {
    border-top: 1px solid #F4F4F5;
}

.dark .ui-mk-review + .ui-mk-review {
    border-top-color: #26262A;
}

/* ============================================================
   Fila social: me gusta a la izquierda, estrellas y vistas a la derecha
   ============================================================ */
.ui-mk-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* El área táctil mide 45px, pero la fila no debe separar tanto el precio del borde. */
    margin-block: -0.375rem;
}

.ui-mk-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #71717A;
    transition: color 150ms, transform 150ms;
}

.dark .ui-mk-social-btn {
    color: #A1A1AA;
}

.ui-mk-social-btn > i {
    font-size: 1.125rem; /* ui-size:decor */
}

.ui-mk-social-btn .ui-mk-stars-row {
    font-size: 0.75rem;
}

.ui-mk-social-btn:active {
    transform: scale(0.92);
}

.ui-mk-social-btn.is-liked,
.dark .ui-mk-social-btn.is-liked {
    color: #E11D48;
}

/* ============================================================
   Grupos: opciones apagadas y flecha de abrir/cerrar
   ============================================================ */
.ui-mk-pick.is-disabled {
    opacity: 0.4;
}

.ui-mk-group-chevron {
    font-size: 0.75rem;
    color: #A1A1AA;
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

.ui-mk-group-chevron.is-open {
    transform: rotate(180deg);
}

/* Vistas: dato pasivo, no se toca. Va con el ícono del mismo tamaño que el número para que
   no compita con el corazón ni con las estrellas. */
.ui-mk-social-views {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #A1A1AA;
}

.dark .ui-mk-social-views {
    color: #71717A;
}

/* ============================================================
   Flechas del carrusel: solo con mouse (en el teléfono se desliza con el dedo)
   ============================================================ */
.ui-mk-pd-nav {
    position: absolute;
    top: 50%;
    display: none;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 200ms;
}

.ui-mk-pd-nav-prev {
    left: 0.75rem;
}

.ui-mk-pd-nav-next {
    right: 0.75rem;
}

@media (hover: hover) and (pointer: fine) {
    .ui-mk-pd-nav {
        display: inline-flex;
    }

    .ui-mk-pd-hero:hover .ui-mk-pd-nav {
        opacity: 1;
    }
}

.ui-mk-pd-dot {
    cursor: pointer;
}

/* Respuesta del restaurante debajo de una reseña: sangrada y con fondo suave, para que se
   lea como contestación y no como otra reseña. */
.ui-mk-review-reply {
    margin-top: 0.75rem;
    border-radius: 0.875rem;
    background-color: #FAFAFA;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid #FAC9AE;
}

.dark .ui-mk-review-reply {
    background-color: #26262A;
    border-left-color: rgba(242, 103, 34, 0.4);
}

/* Plato sin foto: una franja baja con el ícono, en vez de un cuadrado vacío. */
.ui-mk-pd-hero.is-plain {
    display: flex;
    aspect-ratio: auto;
    height: 10rem;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Bienvenida del chat
   ============================================================
   La ficha del lugar con que arranca un chat. Va sobre `ui-mk-ticket`, el mismo ticket que
   después abre el pedido: el chat cambia de ticket, no de idioma. */
.ui-mk-welcome {
    width: min(24rem, 100%);
}

.ui-mk-welcome-cover {
    height: 8.5rem;
    overflow: hidden;
    background-color: #F4F4F5;
}

.dark .ui-mk-welcome-cover {
    background-color: #26262A;
}

.ui-mk-welcome-cover img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.ui-mk-welcome-logo {
    height: 3.5rem;
    width: 3.5rem;
    flex-shrink: 0;
    border-radius: 1.125rem;
    object-fit: cover;
}

/* Con portada, el logo se monta sobre su borde con un aro del color de la tarjeta. */
.ui-mk-welcome-logo.is-lifted {
    margin-top: -1.75rem;
    border: 3px solid #FFFFFF;
    background-color: #FFFFFF;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}

.dark .ui-mk-welcome-logo.is-lifted {
    border-color: #1C1C1F;
    background-color: #1C1C1F;
}

/* Pase de orden: abre cada pedido en el hilo. Una cabecera con un velo tibio del color del
   mundo lo separa de la ficha del lugar sin gritar: el protagonista es el código. */
.ui-mk-pass {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 32px -18px rgba(242, 103, 34, 0.4);
}

.ui-mk-pass-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #FCE3D4;
    background: linear-gradient(160deg, #FEF4EE 0%, #FFFFFF 85%);
}

.dark .ui-mk-pass-hero {
    border-bottom-color: rgba(242, 103, 34, 0.15);
    background: linear-gradient(160deg, rgba(242, 103, 34, 0.12) 0%, rgba(242, 103, 34, 0) 85%);
}

/* Trama de puntos apenas visible en la esquina: textura sin ruido. */
.ui-mk-pass-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(242, 103, 34, 0.14) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%);
    mask-image: linear-gradient(to left, #000 0%, transparent 60%);
}

.ui-mk-pass-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    background-color: rgba(242, 103, 34, 0.1);
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    color: #AD3F0C;
}

.dark .ui-mk-pass-badge {
    background-color: rgba(242, 103, 34, 0.18);
    color: #F7A87F;
}

.ui-mk-pass-dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background-color: #F26722;
}

.ui-mk-pass-clock {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #71717A;
}

.dark .ui-mk-pass-clock {
    color: #A1A1AA;
}

/* Cada cifra del código en su casilla con la raya de un tablero de aeropuerto. */
.ui-mk-pass-code {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.ui-mk-pass-char {
    position: relative;
    display: flex;
    height: 2.5rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #FAC9AE;
    background: linear-gradient(180deg, #FFFFFF 0%, #FEF4EE 100%);
    box-shadow: 0 2px 0 #FAC9AE;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #AD3F0C;
}

.ui-mk-pass-char::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background-color: rgba(173, 63, 12, 0.12);
}

.dark .ui-mk-pass-char {
    border-color: rgba(242, 103, 34, 0.3);
    background: linear-gradient(180deg, #2A2A2E 0%, #222225 100%);
    box-shadow: 0 2px 0 rgba(242, 103, 34, 0.25);
    color: #F7A87F;
}

.dark .ui-mk-pass-char::after {
    background-color: rgba(0, 0, 0, 0.35);
}

.ui-mk-pass-sep {
    height: 0.1875rem;
    width: 0.5rem;
    border-radius: 9999px;
    background-color: #FAC9AE;
}

.dark .ui-mk-pass-sep {
    background-color: rgba(242, 103, 34, 0.4);
}

.ui-mk-pass-share {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #F26722;
    color: #FFFFFF;
    font-size: 0.875rem;
    box-shadow: 0 6px 14px -6px rgba(242, 103, 34, 0.7);
}

/* Recomendados como mensaje del lugar: filas de lista que caben en cualquier teléfono. */
.ui-mk-welcome-picks {
    position: relative;
    isolation: isolate;
}

/* Luz ambiental naranja detrás del encabezado, nunca opaca. */
.ui-mk-welcome-picks::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4rem;
    left: -3rem;
    height: 9rem;
    width: 9rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(242, 103, 34, 0.16) 0%, transparent 70%);
    pointer-events: none;
}

.ui-mk-welcome-feature {
    cursor: pointer;
}

.ui-mk-welcome-feature > img {
    display: block;
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
}

/* Vencidos quedan como recuerdo: se ven, apagados y sin precio, pero ya no se tocan. */
.ui-mk-welcome-picks.is-expired .ui-mk-rec-row,
.ui-mk-welcome-picks.is-expired .ui-mk-welcome-feature {
    cursor: default;
}

.ui-mk-welcome-picks.is-expired img {
    filter: grayscale(1);
}