/* ==========================================================================
   Ficha de publicación
   ========================================================================== */
:root {
    --wa-verde: #25D366;
    --wa-verde-oscuro: #128C7E;
    --ficha-borde: #E4DCF5;
    --ficha-texto-suave: #5B4B7A;
    --ficha-barra-alto: 68px;
}

.ficha {
    /* Lugar para la barra fija de contacto en celulares */
    padding-bottom: calc(var(--ficha-barra-alto) + 1rem) !important;
}
@media (min-width: 992px) {
    .ficha { padding-bottom: 2rem !important; }
}

.ficha-migas {
    font-size: .8rem;
    color: var(--ficha-texto-suave);
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.ficha-migas a { color: inherit; text-decoration: none; }
.ficha-migas a:hover { color: #1E0B4B; text-decoration: underline; }
.ficha-migas i { font-size: .6rem; margin: 0 .35rem; opacity: .6; }

/* ---------- Galería ---------- */
.galeria {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #F1F5F9;
}
.galeria-pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    aspect-ratio: 4 / 3;
}
.galeria-pista::-webkit-scrollbar { display: none; }
.galeria-foto {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}
.galeria-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.galeria-vacia {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #94A3B8;
    font-size: 3rem;
}
.galeria-vacia span { font-size: .9rem; }
.galeria-contador,
.galeria-destacada {
    position: absolute;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
}
.galeria-contador {
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, .7);
    color: #fff;
}
.galeria-destacada {
    top: .6rem;
    left: .6rem;
    background: #C4F25A;
    color: #1E0B4B;
}
.galeria-ampliar,
.galeria-flecha {
    position: absolute;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #1E0B4B;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.galeria-ampliar { display: flex; top: .6rem; right: .6rem; }
.galeria-flecha { top: 50%; transform: translateY(-50%); }
.galeria-anterior { left: .6rem; }
.galeria-siguiente { right: .6rem; }
.galeria-flecha:disabled { opacity: .35; }

.galeria-miniaturas {
    gap: .5rem;
    margin-top: .6rem;
    overflow-x: auto;
}
.galeria-miniaturas button {
    flex: 0 0 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #F1F5F9;
    opacity: .7;
}
.galeria-miniaturas button.activa { border-color: #1E0B4B; opacity: 1; }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Panel de datos ---------- */
@media (min-width: 992px) {
    .ficha-panel {
        position: sticky;
        top: 1rem;
        border: 1px solid var(--ficha-borde);
        border-radius: 14px;
        padding: 1.25rem;
    }
}
.ficha-titulo {
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: #1E0B4B;
}
.ficha-precio {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E0B4B;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.ficha-precio-consultar { font-size: 1.15rem; font-weight: 600; color: var(--ficha-texto-suave); }
.ficha-etiqueta {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #ECFDF5;
    color: #047857;
    border-radius: 6px;
    padding: .2rem .45rem;
}
.ficha-datos {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .92rem;
}
.ficha-datos li { padding: .2rem 0; }
.ficha-datos i { width: 1.25rem; text-align: center; color: var(--ficha-texto-suave); margin-right: .25rem; }

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--wa-verde);
    color: #fff !important;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 12px;
    padding: .85rem 1rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .35);
    transition: background .15s, transform .1s;
}
.btn-whatsapp i { font-size: 1.4rem; }
.btn-whatsapp:hover { background: var(--wa-verde-oscuro); }
.btn-whatsapp:active { transform: scale(.98); }

/* Botón de contacto en compu (en celulares está en la barra fija) */
.btn-whatsapp.ficha-contacto { margin-bottom: 1rem; }

.ficha-acciones { gap: .5rem; margin-bottom: 1rem; }
.ficha-acciones .btn { font-weight: 600; }

.ficha-vendedor {
    display: flex;
    gap: .75rem;
    align-items: center;
    border-top: 1px solid var(--ficha-borde);
    padding-top: 1rem;
}
.ficha-vendedor-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #1E0B4B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}
.min-w-0 { min-width: 0; }

/* Link a la página del vendedor (/vecino/{id}) */
.ficha-vendedor-nombre { color: inherit; text-decoration: none; }
.ficha-vendedor-nombre:hover { color: var(--vo-violeta); text-decoration: underline; }
.ficha-vendedor-mas {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
    color: var(--vo-violeta);
    font-weight: 600;
    text-decoration: none;
}
.ficha-vendedor-mas:hover { text-decoration: underline; }
.ficha-vendedor-mas i { font-size: .7em; }

/* ---------- Página del vendedor ---------- */
.vendedor-cabecera {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 14px;
    background: var(--vo-lavanda);
    border: 1px solid var(--vo-borde);
}
.vendedor-avatar {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
}
.vendedor-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--vo-texto-suave);
}
.vendedor-datos i { margin-right: .2rem; }
.vendedor-aviso-duenio {
    padding: .6rem .85rem;
    border-radius: 10px;
    background: var(--vo-lavanda-2);
    color: var(--vo-noche);
}
.vendedor-aviso-duenio a { font-weight: 600; margin-left: .25rem; }
@media (max-width: 575.98px) {
    .vendedor-avatar { flex-basis: 56px; width: 56px; height: 56px; font-size: 1.4rem; }
}

/* ---------- Secciones ---------- */
.ficha-seccion { margin-top: 2rem; }
.ficha-seccion h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.ficha-descripcion {
    font-size: .98rem;
    line-height: 1.6;
    color: #334155;
    overflow-wrap: anywhere;
}
.ficha-consejos {
    margin-top: 1.5rem;
    background: #F8FAFC;
    border: 1px solid var(--ficha-borde);
    border-radius: 12px;
    padding: .75rem 1rem;
    font-size: .9rem;
}
.ficha-consejos summary { cursor: pointer; font-weight: 600; }
.ficha-consejos ul { margin: .5rem 0 0; padding-left: 1.2rem; color: #475569; }

/* ---------- Barra fija de contacto (celulares) ---------- */
/* En la ficha, la barra de contacto reemplaza a la navegación inferior */
body.con-ficha-barra .mobile-bottom-nav,
body:has(.ficha-barra) .mobile-bottom-nav {
    display: none;
}
.ficha-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--ficha-barra-alto) + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1029;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    background: #fff;
    border-top: 1px solid var(--ficha-borde);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
}
.ficha-barra .btn-whatsapp {
    padding: .7rem .5rem;
    font-size: .95rem;
    white-space: nowrap;
    min-width: 0;
}
.ficha-barra-icono {
    flex: 0 0 48px;
    height: 48px;
    border: 1px solid var(--ficha-borde);
    border-radius: 12px;
    background: #fff;
    color: #1E0B4B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
}

/* ---------- Favoritos ---------- */
.btn-favorito.activo i,
.btn-fav-flotante.activo i { color: #E11D48; }
.btn-favorito i { transition: transform .2s; }
.btn-favorito.latido i { transform: scale(1.35); }
.btn-fav-flotante {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .95);
    color: #1E0B4B;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    text-decoration: none;
}
.ficha-barra .btn-fav-flotante { position: static; box-shadow: none; }

/* ---------- Tarjetas (similares, favoritos) ---------- */
.tarjeta-pub {
    border: 1px solid var(--ficha-borde);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .15s;
}
.tarjeta-pub:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.tarjeta-pub-foto {
    aspect-ratio: 1 / 1;
    background: #F3EEFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A78BFA;
    font-size: 2rem;
}
.tarjeta-pub-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-pub-precio { font-weight: 700; color: #1E0B4B; font-size: 1rem; }
.tarjeta-pub-titulo {
    color: #334155;
    font-size: .85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tarjeta-pub-zona { color: var(--ficha-texto-suave); font-size: .75rem; margin-top: .2rem; }

/* ---------- Visor a pantalla completa ---------- */
.visor {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
}
.visor::backdrop { background: #000; }
.visor-pista {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.visor-pista::-webkit-scrollbar { display: none; }
.visor-pista figure {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.visor-pista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-cerrar {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.3rem;
}

/* ---------- Hoja de compartir ---------- */
.hoja-compartir {
    width: min(100vw, 460px);
    max-width: 100vw;
    border: 0;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.hoja-compartir::backdrop { background: rgba(15, 23, 42, .5); }
@media (max-width: 575.98px) {
    .hoja-compartir {
        margin: auto 0 0;
        width: 100vw;
        border-radius: 16px 16px 0 0;
    }
}
.hoja-compartir-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.hoja-opcion {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .75rem .5rem;
    border: 0;
    border-radius: 10px;
    background: none;
    text-align: left;
    color: #1E0B4B;
    text-decoration: none;
}
.hoja-opcion:hover { background: #F1F5F9; }
.hoja-opcion i { font-size: 1.5rem; width: 2rem; text-align: center; color: #475569; }
.hoja-opcion span { display: flex; flex-direction: column; }
.hoja-opcion small { color: var(--ficha-texto-suave); }
.hoja-opcion-whatsapp i { color: var(--wa-verde); }
.hoja-vista-previa { margin-top: .5rem; }
.hoja-vista-previa pre {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .8rem;
    background: #DCF8C6;
    border-radius: 10px;
    padding: .6rem .75rem;
    margin: .25rem 0 0;
}

/* ---------- Aviso flotante ---------- */
.aviso-flotante {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ficha-barra-alto) + 1rem);
    transform: translate(-50%, 20px);
    background: #1E0B4B;
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 1100;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 992px) {
    .aviso-flotante { bottom: 2rem; }
}

/* Pantallas muy angostas: "Consultar" a secas (el ícono ya dice WhatsApp) */
@media (max-width: 374px) {
    .solo-ancho { display: none; }
}

/* ==========================================================================
   Inicio
   ========================================================================== */
.home-hero {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 16px;
    background: #FAF7FF;
}
.home-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .4rem; color: #1E0B4B; }
.home-hero p { color: #475569; margin: 0 0 1rem; }
@media (min-width: 768px) {
    .home-hero { padding: 2.5rem 1rem; }
    .home-hero h1 { font-size: 2.1rem; }
}
.home-buscador {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    padding: .35rem .35rem .35rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.home-buscador i { color: #94A3B8; }
.home-buscador input { flex: 1; border: 0; outline: 0; min-width: 0; font-size: 1rem; }
.home-buscador .btn { border-radius: 999px; }
.home-publicar {
    display: inline-block;
    margin-top: .9rem;
    font-weight: 600;
    color: #1E0B4B;
}
.home-seccion { margin-top: 1.75rem; }
.home-seccion-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.home-seccion-cabecera h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.home-carrusel {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}
.home-carrusel-item {
    flex: 0 0 46%;
    scroll-snap-align: start;
}
@media (min-width: 768px) { .home-carrusel-item { flex-basis: 30%; } }
@media (min-width: 992px) { .home-carrusel-item { flex-basis: 23%; } }
.home-categorias {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}
.home-categorias a {
    flex: 0 0 auto;
    border: 1px solid var(--ficha-borde);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .88rem;
    color: #1E0B4B;
    text-decoration: none;
    background: #fff;
}
.home-categorias a:hover { background: #F1F5F9; }
.busqueda-categorias a.activa {
    background: var(--vo-noche);
    border-color: var(--vo-noche);
    color: #fff;
}
.busqueda-categorias a.activa .text-muted { color: var(--vo-texto-claro) !important; }
.busqueda-sugerencia { font-size: 1.05rem; }
.busqueda-sugerencia a { font-weight: 700; color: var(--vo-violeta); }
.home-anuncio {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px dashed #94A3B8;
    border-radius: 12px;
    background: #F8FAFC;
}
.home-anuncio div { display: flex; flex-direction: column; }
.home-anuncio span { font-size: .88rem; color: #475569; }
.home-anuncio-vendedor { border-style: solid; border-color: #E4DCF5; background: #FAF7FF; }
.tarjeta-pub-foto { position: relative; }
.tarjeta-pub-destacada {
    position: absolute;
    top: .4rem;
    left: .4rem;
    background: #C4F25A;
    color: #1E0B4B;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .15rem .5rem;
}

.home-titulo { font-size: 1.2rem; font-weight: 700; margin: 0; }
@media (min-width: 768px) { .home-titulo { font-size: 1.4rem; } }
.home > .home-seccion-cabecera { margin-bottom: 1rem; }
/* En el inicio las categorías van en varias líneas (no se deslizan) */
.home-categorias-envolver { flex-wrap: wrap; overflow: visible; }
/* Cucarda de destacada más visible */
.tarjeta-pub-destacada { box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }

/* ==========================================================================
   Índice de categorías
   ========================================================================== */
.categoria-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #1E0B4B;
    line-height: 1.25;
    margin: 0;
}
.categoria-hijas {
    list-style: none;
    margin: .4rem 0 0;
    padding: .4rem .5rem .6rem;
    border-top: 1px solid var(--ficha-borde, #E2E8F0);
}
.categoria-hijas li {
    padding: .1rem 0;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.categoria-hijas a { color: #334155; text-decoration: none; }
.categoria-hijas a:hover { text-decoration: underline; }
.categoria-hijas span { color: #94A3B8; font-size: .75rem; }
.categoria-mas { font-weight: 600; color: #1E0B4B !important; }

/* Evento al que va la publicación (tarjeta y ficha; ver EventsTable) */
.tarjeta-pub-evento {
    position: absolute;
    left: .4rem;
    right: .4rem;
    bottom: .4rem;
    z-index: 1;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: var(--vo-noche, #1E0B4B);
    color: #FFFFFF;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.tarjeta-pub-evento i { color: var(--vo-lima, #C4F25A); }