/* ==========================================================================
   HOJA DE ESTILOS "NOIR & GOLD" - DE SEO VIP EXCLUSIVE
   ========================================================================== */

/* Variables de Color e Identidad */
:root {
    --noir-deep: #000000;
    --noir-elevated: #080808;
    --noir-card: #0d0d0d;
    --gold-bright: #ffebad;
    --gold-standard: #d4af37;
    --gold-dark: #b38728;
    --gold-matte: #997825;
    --gold-glow: rgba(212, 175, 55, 0.25);
    --gold-subtle: rgba(184, 134, 11, 0.08);
    --silver-standard: #e0e0e0;
    --silver-dark: #8c8c8c;
    --silver-glow: rgba(255, 255, 255, 0.1);
    --font-serif: 'Playfair Display', 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
}

/* ==========================================================================
   MURO DE VERIFICACIÓN DE EDAD (18+)
   ========================================================================== */
.age-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.97);
    padding: 20px;
}

.age-gate-box {
    max-width: 420px;
    width: 100%;
    background: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}

.age-gate-logo {
    max-height: 56px;
    width: auto;
    margin-bottom: 18px;
}

.age-gate-title {
    font-family: var(--font-serif);
    color: var(--gold-bright);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.age-gate-text {
    color: var(--silver-standard);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.age-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.btn-age-accept {
    background-color: var(--gold-standard);
    color: #000;
    border: none;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-age-accept:hover {
        background-color: var(--gold-bright);
        box-shadow: 0 0 15px var(--gold-glow);
    }

.btn-age-exit {
    color: var(--silver-dark);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .btn-age-exit:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.35);
    }

.age-gate-legal {
    font-size: 0.7rem;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

    .age-gate-legal a {
        color: var(--gold-dark);
        text-decoration: underline;
    }

body.age-gate-lock {
    overflow: hidden;
    height: 100vh;
}

.logo-container {
    display: flex;
    justify-content: flex-start; /* Fuerza la posición a la izquierda */
    align-items: center;
    max-width: 300px; /* Controla el espacio total que puede ocupar el logo */
}

.logo-img {
    height: auto; /* Mantiene la proporción */
    max-height: 92px; /* Logo bien visible en el header (agrandado a pedido) */
    width: auto;
    max-width: 100%;
    object-fit: contain; /* Evita que la imagen se deforme o se corte */
}

@media (max-width: 575.98px) {
    .logo-container {
        max-width: 200px;
    }

    .logo-img {
        max-height: 64px;
    }
}

/* Reset y Estilos Globales */
* {
    box-sizing: border-box;
}

html {
}

html {
    /* A pedido: el panel de Admin se veía desbordado en celular. La causa
       real no era el ancho del panel en sí (ya se achica bien), sino que
       algunos elementos puntuales (como las filas de "Registrar pago" en
       Espacios Publicitarios, con varios campos de ancho fijo uno al lado
       del otro) podían ser más anchos que la pantalla y estirar TODA la
       página hacia el costado, sin que nada lo estuviera conteniendo. Esto
       corta cualquier desborde horizontal accidental de raíz.
       Bug propio arreglado: esto estaba puesto en "body" antes, lo cual
       rompía "position: sticky" en TODO el sitio (por eso la barra lateral
       del perfil dejó de quedarse fija al hacer scroll) — un elemento con
       overflow-x distinto de "visible" corta la posibilidad de que sus
       descendientes usen sticky. Puesto en "html" en vez de "body" logra
       la misma protección sin ese efecto secundario. */
    overflow-x: hidden;
}

body {
    background-color: var(--noir-deep) !important;
    color: #ffffff !important;
    font-family: var(--font-sans);
    letter-spacing: 0.3px;
    margin: 0;
    padding: 0;
    width: 100%;
}

img {
    max-width: 100%;
}

/* Tipografías e Identidad Visual */
.logo-text {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2rem;
    color: var(--gold-standard) !important;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

    .logo-text:hover {
        color: var(--gold-bright) !important;
        text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    }

/* Header */
header.navbar {
    background-color: var(--noir-deep);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Botón hamburguesa (solo visible en móvil) */
.navbar-toggler-gold {
    background: transparent;
    border: 1px solid var(--gold-dark);
    color: var(--gold-standard);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1.3rem;
    line-height: 1;
}

    .navbar-toggler-gold:hover {
        background-color: var(--gold-glow);
    }

/* Menú desplegable móvil (JS propio, no depende del collapse de Bootstrap) */
.mobile-nav-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--noir-elevated);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.7);
    z-index: 1050;
    padding: 16px 20px 22px;
}

    .mobile-nav-panel.open {
        display: flex;
    }

    .mobile-nav-panel .nav-link-noir,
    .mobile-nav-panel .btn-gold-vip {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }

    .mobile-nav-panel .btn-gold-vip {
        margin-top: 8px;
    }

@media (max-width: 991.98px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

    .btn-filter-header:hover {
        background-color: var(--gold-standard);
        color: #000;
        box-shadow: 0 0 10px var(--gold-glow);
    }

/* Hero Section (Fondo de ciudad súper oscuro) */
.hero-section {
    position: relative;
    background: url('../images/hero-background.jpg') no-repeat center center;
    background-size: cover;
    /* Usamos vh (viewport height) para que sea proporcional a la pantalla */
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reducimos el valor final de 0.98 a 0.75 */
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
}

@media (max-width: 767.98px) {
    .hero-section {
        min-height: 28vh;
    }
}

/* Fondo alternado sutil entre secciones (Cambio: romper la sensación de
   "6 secciones idénticas" seguidas — un leve cambio de tono ayuda a que el
   ojo distinga dónde termina una sección y empieza la siguiente, sin tener
   que rediseñar toda la estructura de la página). Full-bleed (ocupa todo el
   ancho de la pantalla) aunque el contenido adentro siga en su .container. */
.seccion-alterna {
    position: relative;
}

    .seccion-alterna::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 100%;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(212, 175, 55, 0.035) 0%, rgba(212, 175, 55, 0.015) 50%, transparent 100%);
        border-top: 1px solid rgba(212, 175, 55, 0.08);
        border-bottom: 1px solid rgba(212, 175, 55, 0.08);
        z-index: 0;
        pointer-events: none;
    }

    .seccion-alterna > * {
        position: relative;
        z-index: 1;
    }

.hero-content {
    position: relative;
    z-index: 2;
    /* Un pequeño ajuste de padding para centrar mejor el contenido */
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-titulo-left {
    color: #ffffff;
    font-family: 'Cormorant SC', var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 4.2vw, 2.7rem);
    letter-spacing: 1px;
    line-height: 1.25;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 255, 255, 0.15);
    margin-bottom: 0;
    max-width: 620px;
    opacity: 0;
    animation: heroEntrada 0.9s ease-out 0.15s forwards;
}

.hero-titulo-acento {
    background: linear-gradient(135deg, #fff6d0 0%, #f0d27a 30%, #d4af37 55%, #b8860b 80%, #8a6508 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brilloTitulo 4s ease-in-out infinite;
}

@keyframes brilloTitulo {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

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

/* "EXCLUSIVIDAD Y PRESTIGIO" a la izquierda del hero, con el mismo
   degradado dorado metálico del logo (no un dorado plano). */
.hero-eyebrow-left {
    background: linear-gradient(135deg, #fff6d0 0%, #f0d27a 30%, #d4af37 55%, #b8860b 80%, #8a6508 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold-bright);
    font-family: 'Manrope', var(--font-sans);
    font-weight: 700;
    font-size: clamp(0.95rem, 2.6vw, 1.3rem);
    letter-spacing: 5px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 18px rgba(212, 175, 55, 0.3));
    margin-bottom: 0;
    max-width: 480px;
    opacity: 0;
    animation: heroEntrada 0.9s ease-out 0.4s forwards;
}

@media (max-width: 767.98px) {
    .hero-titulo-left, .hero-eyebrow-left {
        max-width: 100%;
    }
}

.hero-titulo {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
}

/* Ajustes de tipografía para que todo sea más compacto y armónico */
.hero-tag {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--gold-standard);
    font-weight: 600;
    text-transform: uppercase;
}
/* Caja de Búsqueda Modular */
.search-box-container {
    background-color: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    max-width: 760px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

@media (max-width: 575.98px) {
    .search-box-container {
        padding: 0.85rem !important;
        border-radius: 10px;
    }
}

.select-custom, .input-custom {
    background-color: var(--noir-deep) !important;
    border: 1px solid #1a1a1a !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
    border-radius: 8px !important;
}

    .select-custom:focus, .input-custom:focus {
        border-color: var(--gold-standard) !important;
        box-shadow: 0 0 8px var(--gold-glow) !important;
    }

.input-group-text {
    border: none !important;
}

/* ================================================================
   Buscador del home, rediseñado (Cambio: se veía "feo y ancho" con el
   input-group viejo que duplicaba el ícono del select elegante). Ahora
   es un flex simple, compacto, sin envoltorios de más.
   ================================================================ */
.search-form-elegante {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
}

.search-form-campo {
    min-width: 0; /* evita que un <select> largo empuje el grid */
}

.search-form-campo-texto {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--noir-elevated) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;
    padding: 0 12px;
    min-width: 0;
    transition: all 0.25s ease;
}

    .search-form-campo-texto:focus-within {
        border-color: var(--gold-standard);
        box-shadow: 0 0 10px var(--gold-glow);
    }

    .search-form-campo-texto i {
        color: var(--gold-standard);
        font-size: 0.85rem;
    }

.search-form-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 10px 8px;
    font-size: 0.86rem;
    font-family: var(--font-sans);
}

    .search-form-input::placeholder {
        color: var(--silver-dark);
    }

/* Pantallas medianas: ciudad y categoría lado a lado, texto abajo ocupando
   todo el ancho, botón abajo de todo — así nunca queda un campo "cortado". */
@media (min-width: 560px) {
    .search-form-elegante {
        grid-template-columns: 1fr 1fr;
    }

    .search-form-campo-texto {
        grid-column: 1 / -1;
    }

    .btn-search-gold {
        grid-column: 1 / -1;
    }
}

/* Pantallas grandes: los 4 elementos en una sola fila. */
@media (min-width: 860px) {
    .search-form-elegante {
        grid-template-columns: 1fr 1fr 1.4fr auto;
    }

    .search-form-campo-texto {
        grid-column: auto;
    }

    .btn-search-gold {
        grid-column: auto;
    }
}

.btn-search-gold {
    background-color: var(--gold-standard) !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    padding: 10px 26px;
    white-space: nowrap;
}

    .btn-search-gold:hover {
        background-color: var(--gold-bright) !important;
        box-shadow: 0 0 15px var(--gold-glow);
        transform: translateY(-2px);
    }

/* Quick Pills */
.pill-tag {
    background-color: var(--noir-deep);
    border: 1px solid #1c1c1c;
    color: var(--silver-standard);
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .pill-tag:hover {
        border-color: var(--gold-matte);
        color: var(--gold-standard);
    }

    .pill-tag.active {
        background-color: var(--gold-standard) !important;
        border-color: var(--gold-standard) !important;
        color: #000000 !important;
        font-weight: 600;
    }

/* Divisores de Sección */
.section-divider-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

    .section-divider-title h2 {
        font-family: var(--font-serif);
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 2px;
        color: var(--gold-standard);
        margin-bottom: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.titulo-icono-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

    .section-divider-title .line {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-matte), transparent);
        flex-grow: 1;
        max-width: 120px;
    }

.section-subtitle {
    font-size: 0.8rem;
    color: var(--silver-dark);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Categorías Circulares */
.circle-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    box-shadow: 0 0 20px rgba(184, 134, 11, 0.35);
    overflow: hidden;
    transition: all 0.4s ease;
}

    .circle-wrapper:hover {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    }

.circle-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.circle-overlay-icon {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--noir-elevated);
    border: 1px solid var(--gold-standard);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-standard);
    font-size: 0.95rem;
}

.circle-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-top: 10px;
    margin-bottom: 3px;
}

@media (max-width: 400px) {
    .circle-wrapper {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 575.98px) {
    section.py-5 {
        padding-top: 2.2rem !important;
        padding-bottom: 2.2rem !important;
    }

    .section-divider-title h2 {
        font-size: 1.3rem;
    }

    .section-divider-title .line {
        max-width: 50px;
    }
}

.circle-count {
    font-size: 0.75rem;
    color: var(--silver-dark);
}

/* --- DESTACADOS: fila de círculos pequeños tipo "stories" --- */
.destacados-row {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 6px 4px 16px 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

    .destacados-row::-webkit-scrollbar {
        height: 5px;
    }

    .destacados-row::-webkit-scrollbar-thumb {
        background: var(--gold-matte);
        border-radius: 10px;
    }

.destacado-item {
    flex: 0 0 auto;
    width: 104px;
    text-align: center;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

/* Ancho fijo para cada negocio de "Espacios Publicitarios" (a pedido: se
   veían muy separados con las columnas de Bootstrap, que en pantallas
   anchas dejaban mucho aire vacío alrededor del círculo). Con ancho fijo
   quedan agrupados y solo pasan a la siguiente fila cuando no entran más. */
.espacio-item {
    width: 118px;
}

.circle-wrapper-sm {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    padding: 2px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    box-shadow: 0 0 12px rgba(184, 134, 11, 0.3);
    transition: all 0.3s ease;
}

    .circle-wrapper-sm:hover {
        transform: scale(1.06);
        box-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
    }

    .circle-wrapper-sm .circle-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid var(--noir-deep);
    }

.circle-overlay-icon-sm {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--noir-elevated);
    border: 1px solid var(--gold-standard);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-standard);
    font-size: 0.68rem;
}

.destacado-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-bright);
    margin-top: 8px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Destacados agrandado (a pedido): más grande que circle-wrapper-sm (usado
   en Espacios Publicitarios, que ahora es más chico), pero sin llegar al
   tamaño del circle-wrapper original. */
.circle-wrapper-destacado {
    position: relative;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    padding: 3px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    box-shadow: 0 0 16px rgba(184, 134, 11, 0.35);
    transition: all 0.35s ease;
}

    .circle-wrapper-destacado:hover {
        transform: scale(1.06);
        box-shadow: 0 0 22px rgba(212, 175, 55, 0.6);
    }

    .circle-wrapper-destacado .circle-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        border-radius: 50%;
        border: 2px solid var(--noir-deep);
    }

.circle-overlay-icon-destacado {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--noir-elevated);
    border: 1px solid var(--gold-standard);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-standard);
    font-size: 0.85rem;
    z-index: 2;
}

    .circle-overlay-icon-destacado img {
        width: 78%;
        height: 78%;
        object-fit: contain;
    }

.destacado-item-lg {
    width: 130px;
}

    .destacado-item-lg .destacado-name {
        font-size: 0.88rem;
    }

@media (max-width: 400px) {
    .circle-wrapper-destacado {
        width: 96px;
        height: 96px;
    }

    .destacado-item-lg {
        width: 106px;
    }
}

@media (min-width: 768px) {
    .destacados-row {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

/* ==========================================================================
   GRID DE TARJETAS (VIP, GOLD, SILVER, MASAJISTA, ÚLTIMAS)
   Control exacto de cuántas tarjetas caen por fila en cada breakpoint
   (en vez de dejarlo a un cálculo de minmax/auto-fill, que es impredecible
   cuando se van a ir agregando anuncios automáticamente). La jerarquía
   VIP > GOLD > SILVER/MASAJISTA > ÚLTIMAS se logra con MENOS columnas
   para VIP (tarjetas más anchas) y MÁS columnas para las categorías
   inferiores (tarjetas más angostas), en todos los tamaños de pantalla.
   ========================================================================== */
.grid-anuncios {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}

/* Grilla ÚNICA para VIP/Gold/Silver/Masajista/Últimas Agregadas (a pedido:
   mismo tamaño de tarjeta en todas, ~4 por fila en el celular). Antes cada
   plan tenía su propia cantidad de columnas (grid-vip, grid-gold, etc.),
   lo que las hacía ver de tamaños distintos; ahora todas usan esta misma. */
.grid-uniforme { --cols: 3; gap: 8px; }

@media (min-width: 480px) {
    .grid-uniforme { --cols: 4; }
}

@media (min-width: 768px) {
    .grid-anuncios { gap: 12px; }
    .grid-uniforme { --cols: 5; }
}

@media (min-width: 992px) {
    .grid-uniforme { --cols: 6; }
}

@media (min-width: 1200px) {
    .grid-uniforme { --cols: 7; }
}

@media (min-width: 1400px) {
    .grid-uniforme { --cols: 8; }
}

/* "Otros anuncios" en el perfil (a pedido): responsive como el home, pero
   con MENOS columnas en cada punto de quiebre (el contenedor es más angosto
   por la barra lateral) — así el tamaño de tarjeta queda proporcional en
   cualquier tamaño de pantalla, no solo en una medida fija. */
.grid-relacionados {
    --cols: 2;
}

@media (min-width: 480px) {
    .grid-relacionados { --cols: 3; }
}

@media (min-width: 768px) {
    .grid-relacionados { --cols: 3; }
}

@media (min-width: 992px) {
    .grid-relacionados { --cols: 4; }
}

@media (min-width: 1400px) {
    .grid-relacionados { --cols: 5; }
}

/* Compatibilidad: alias antiguos apuntan a la grilla uniforme, por si algún
   caché de vista vieja todavía pide grid-vip/gold/silver/masajista/mini. */
.grid-vip, .grid-gold, .grid-silver, .grid-masajista, .grid-mini {
    --cols: 3;
}

@media (min-width: 480px) {
    .grid-vip, .grid-gold, .grid-silver, .grid-masajista, .grid-mini { --cols: 4; }
}

@media (min-width: 768px) {
    .grid-vip, .grid-gold, .grid-silver, .grid-masajista, .grid-mini { --cols: 5; }
}

@media (min-width: 992px) {
    .grid-vip, .grid-gold, .grid-silver, .grid-masajista, .grid-mini { --cols: 6; }
}

@media (min-width: 1200px) {
    .grid-vip, .grid-gold, .grid-silver, .grid-masajista, .grid-mini { --cols: 7; }
}

@media (min-width: 1400px) {
    .grid-vip, .grid-gold, .grid-silver, .grid-masajista, .grid-mini { --cols: 8; }
}

/* Tarjetas (VIP, GOLD, SILVER) */
.card-anuncio {
    background-color: var(--noir-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 2 / 3;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Portada fija de la tarjeta (a pedido: sin visor/carrusel — una sola
   foto o video por tarjeta, la primera de la galería del anuncio). La
   galería completa con varias fotos se sigue viendo en el perfil. */
.card-media-fija {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-media {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}

/* Efecto al pasar el mouse: zoom leve en la foto + el borde brilla más
   fuerte (cada plan ya tiene su color de borde propio, ver .card-vip,
   .card-gold, .card-silver, .card-masajista más abajo). */
.card-anuncio {
    transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.card-anuncio:hover .card-media {
    transform: scale(1.08);
}

.card-anuncio:hover {
    transform: translateY(-3px);
}

/* Overlay & Gradientes */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.95) 88%, #000000 100%);
    display: flex;
    align-items: flex-end;
    padding: 15px;
    z-index: 2;
}

.card-info {
    width: 100%;
}

.model-name {
    font-family: 'Poppins', var(--font-sans);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffffff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Insignia de verificado: ícono simple en verde (a pedido), al lado del nombre. */
.badge-verificado-inline {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    font-size: 0.85em;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}

.model-meta {
    font-size: 0.78rem;
    color: var(--silver-standard);
    margin-bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .model-meta .city {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .model-meta .city i {
        font-size: 0.75rem;
    }

    .model-meta .separator {
        display: none;
    }

    .model-meta .age {
        color: var(--gold-standard);
        font-size: 0.72rem;
    }

.separator {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}

/* Elementos exclusivos de la tarjeta Gold/VIP */
.border-dark-glow {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

    .card-footer-row .action-link {
        color: var(--gold-standard);
        text-decoration: none;
        font-weight: 500;
    }

/* Cintillo de plan en la esquina superior izquierda: ahora es un círculo
   chico con fondo oscuro semitransparente (para que se vea sobre cualquier
   foto) que contiene el ícono real que mandaste (corona/diamante/escudo con
   relieve dorado) o, para Masajista, el ícono de Bootstrap de respaldo. */
.plan-ribbon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 40px;
    height: 40px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.plan-ribbon-img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.plan-ribbon i {
    color: #8fd1c7;
    font-size: 1.1rem;
}

/* Estilos por plan: a pedido, TODAS las tarjetas usan el mismo borde/estilo
   ("modelo de la tarjeta Gold") — lo único que diferencia un plan de otro es
   el ícono del cintillo (ver .plan-ribbon arriba), no el borde ni el brillo. */
.card-vip, .card-gold, .card-silver, .card-masajista {
    border: 1px solid rgba(212, 175, 55, 0.3);
}

    .card-vip:hover, .card-gold:hover, .card-silver:hover, .card-masajista:hover {
        border-color: var(--gold-standard);
        box-shadow: 0 0 15px var(--gold-glow);
    }

    .card-vip .model-name {
        color: var(--gold-bright);
    }

/* Badge "NUEVO" para Últimas Agregadas */
.badge-nuevo {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(5px);
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 55, 0.4);
    z-index: 3;
}

/* Tarjetas compactas (Silver / Masajista / Últimas agregadas) */
.card-compact .card-overlay {
    padding: 10px;
}

.card-compact .model-name {
    font-size: 1rem;
}

.card-compact .model-meta {
    font-size: 0.72rem;
}

.card-compact .plan-badge {
    font-size: 0.65rem;
    padding: 3px 8px;
    top: 10px;
    left: 10px;
}

/* Variantes de tamaño de tarjeta (independientes del wrapper/grid).
   A pedido: TODAS las secciones de ranking (VIP, Gold, Silver, Masajista,
   Últimas Agregadas) ahora comparten el MISMO tamaño de tarjeta — antes
   había un escalón por plan (sm/xs/mini) que las hacía ver desparejas.
   La diferencia entre planes queda solo en el ícono del badge y en el
   borde/glow de cada uno (dorado más marcado para VIP), no en el tamaño. */
.card-size-uniforme .model-name {
    font-size: 0.78rem;
    letter-spacing: 0.2px;
}

.card-size-uniforme .model-meta {
    font-size: 0.68rem;
}

.card-size-uniforme .card-footer-row {
    font-size: 0.68rem;
}

.card-size-uniforme .plan-ribbon {
    width: 34px;
    height: 34px;
    top: 6px;
    left: 6px;
}

.card-size-uniforme .plan-ribbon i {
    font-size: 0.9rem;
}

.card-size-uniforme .card-overlay {
    padding: 10px;
}

/* "lg": la única variante más grande, reservada para usos especiales
   (no se usa en el grid de anuncios ranking, que ahora es uniforme). */
.card-size-lg .model-name {
    font-size: 1.2rem;
}

.card-size-lg .model-meta {
    font-size: 0.8rem;
}

/* Footer & Legal styling */
.footer-vip {
    background-color: var(--noir-deep);
    position: relative;
    border-top: none;
}

    .footer-vip::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 92%;
        max-width: 1100px;
        height: 2px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, var(--gold-standard) 20%, var(--gold-bright) 50%, var(--gold-standard) 80%, transparent);
        box-shadow: 0 0 10px var(--gold-glow);
    }

.footer-desc {
    font-family: 'Poppins', var(--font-sans);
    color: var(--silver-dark);
    font-size: 0.85rem;
    max-width: 500px;
    line-height: 1.6;
}

.social-icons .social-link {
    color: var(--silver-dark);
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

    .social-icons .social-link:hover {
        color: var(--gold-standard);
        transform: scale(1.1);
    }

.footer-section-title {
    font-family: var(--font-serif);
    color: var(--gold-standard);
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-family: 'Poppins', var(--font-sans);
    color: var(--silver-dark);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

    .footer-links a:hover {
        color: var(--gold-standard);
    }

/* Caja de Aviso Legal del Footer: borde dorado bien notorio (a pedido —
   antes era casi invisible, rgba 0.1) + un leve brillo, para que destaque
   como corresponde a un aviso legal importante. */
.legal-disclaimer-box {
    font-family: 'Poppins', var(--font-sans);
    background-color: rgba(212, 175, 55, 0.05);
    border: 1.5px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.15), inset 0 0 20px rgba(212, 175, 55, 0.04);
    border-radius: 10px;
    max-width: 800px;
    font-size: 0.8rem;
    color: #9a9a9a;
    line-height: 1.7;
}

    .legal-disclaimer-box .highlight {
        color: var(--gold-bright);
        font-weight: 700;
    }

    .legal-disclaimer-box a {
        color: var(--gold-standard);
        text-decoration: none;
    }

.copyright {
    font-family: 'Poppins', var(--font-sans);
    font-size: 0.75rem;
    color: #555555;
    letter-spacing: 0.5px;
}

/* --- Añade esto al final de tu site.css --- */

/* Estilos para los nuevos botones de navegación */
.nav-link-noir {
    color: var(--silver-standard);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

    .nav-link-noir:hover {
        color: var(--gold-standard);
    }

.nav-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.btn-gold-vip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-standard) 55%, var(--gold-dark) 100%);
    color: #1a1200;
    padding: 9px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.4px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25);
}

    .btn-gold-vip i {
        font-size: 1rem;
    }

    .btn-gold-vip:hover {
        background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-bright) 55%, var(--gold-standard) 100%);
        color: #1a1200;
        box-shadow: 0 0 20px var(--gold-glow);
        transform: translateY(-2px);
    }

/* ==========================================================================
   Link que envuelve cada tarjeta en la home (para que sea clickeable)
   ========================================================================== */
.card-anuncio-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* ==========================================================================
   PÁGINA DE PERFIL (una sola plantilla para VIP/Gold/Silver/Masajista)
   ========================================================================== */
.perfil-breadcrumb {
    font-size: 0.85rem;
    color: var(--silver-dark);
}

    .perfil-breadcrumb a {
        color: var(--silver-standard);
        text-decoration: none;
    }

        .perfil-breadcrumb a:hover {
            color: var(--gold-standard);
        }

    .perfil-breadcrumb .separator {
        margin: 0 6px;
        color: #444;
    }

    .perfil-breadcrumb .actual {
        color: var(--gold-standard);
    }

.btn-perfil-accion {
    background-color: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--silver-standard);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

    .btn-perfil-accion:hover {
        border-color: var(--gold-standard);
        color: var(--gold-bright);
        background-color: var(--gold-subtle);
    }

    .btn-perfil-accion.btn-icon-only {
        padding: 8px 12px;
    }

    .btn-perfil-accion.ya-dio-like {
        color: var(--gold-bright);
        border-color: var(--gold-standard);
    }

/* Foto circular de perfil, con anillo de color según el plan */
.perfil-avatar-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 4px solid var(--silver-glow);
}

.perfil-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}

.ring-vip { border-color: var(--gold-standard); box-shadow: 0 0 20px var(--gold-glow); }
.ring-gold { border-color: rgba(212, 175, 55, 0.6); }
.ring-silver { border-color: rgba(255, 255, 255, 0.25); }
.ring-masajista { border-color: #4fb0a5; }

.btn-contacto {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-llamar {
    background-color: var(--gold-standard);
    color: #000;
    flex: 1.4;
}

    .btn-llamar:hover {
        background-color: var(--gold-bright);
        color: #000;
    }

    .btn-inbox:hover {
        border-color: var(--gold-standard);
        color: var(--gold-bright);
    }

.btn-whatsapp {
    background-color: #25d366;
    color: #fff;
    flex: 0 0 44px;
    font-size: 1.1rem;
}

    .btn-whatsapp:hover {
        background-color: #1ebe57;
    }

.perfil-nombre {
    font-family: var(--font-serif);
    font-weight: 700;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 6px;
}

.perfil-telefono {
    color: #4ade80;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

    .perfil-stats-line .dot {
        margin: 0 8px;
        color: #444;
    }

    .perfil-stats-line strong {
        color: #fff;
    }

    .perfil-stats-line .bi-heart-fill {
        color: #e0245e;
    }

.perfil-descripcion {
    color: rgba(224, 224, 224, 0.72);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 720px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

.perfil-seccion-titulo {
    color: var(--silver-dark);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.perfil-seccion-titulo-grande {
    font-family: var(--font-serif);
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

/* A pedido: título dorado, para usar junto con perfil-seccion-titulo-grande
   solo en los títulos puntuales que se pidieron ("¿Cómo contrato un plan?",
   "Preguntas frecuentes", "Guías") — no se tocó la clase base porque se usa
   en blanco en muchos otros lugares del sitio. */
.titulo-dorado {
    color: var(--gold-standard) !important;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-block;
    background-color: var(--gold-matte);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
}

.chip-outline {
    background-color: transparent;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--silver-standard);
}

/* Visor de galería (fotos y video) del perfil */
.galeria-visor-principal {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--noir-card);
}

    .galeria-visor-slide.active {
        opacity: 1;
        visibility: visible;
    }

    .galeria-visor-slide img,
    .galeria-visor-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .galeria-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .galeria-thumb.active {
        border-color: var(--gold-standard);
    }

/* Comentarios */
.comentarios-count {
    color: var(--silver-dark);
    font-weight: 400;
    font-size: 1rem;
}

.comentario-form .comentario-input {
    background-color: var(--noir-card);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 8px;
}

    .comentario-form .comentario-input::placeholder {
        color: var(--silver-dark);
    }

    .comentario-form .comentario-input:focus {
        background-color: var(--noir-card);
        border-color: var(--gold-standard);
        color: #fff;
        box-shadow: 0 0 0 0.2rem var(--gold-glow);
    }

    .btn-comentario-enviar:hover {
        background-color: var(--gold-bright);
    }

.comentarios-vacio {
    color: var(--silver-dark);
    font-size: 0.9rem;
    font-style: italic;
}

.comentario-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--gold-matte);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.comentario-cabecera {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 2px;
}

.comentario-fecha {
    color: var(--silver-dark);
    font-size: 0.72rem;
}

@media (max-width: 767.98px) {
    .perfil-avatar-wrapper {
        width: 170px;
        height: 170px;
    }

    .perfil-actions-bar {
        justify-content: center;
    }

    .perfil-nombre {
        font-size: 1.6rem;
        text-align: center;
    }

    .perfil-telefono,
    .perfil-stats-line,
    .plan-badge-perfil {
        text-align: center;
        display: block;
    }
}

/* ==========================================================================
   PÁGINAS DE CUENTA (Login / Registro Cliente / Registro Anunciante)
   ========================================================================== */
.auth-page {
    max-width: 900px;
}

.auth-card {
    background-color: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 440px;
}

.auth-card-lg {
    max-width: 680px;
}

.auth-title {
    font-family: var(--font-serif);
    color: var(--gold-bright);
    font-weight: 700;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 6px;
}

.auth-subtitle {
    color: var(--silver-dark);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 24px;
}

.auth-label {
    color: var(--silver-standard);
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.auth-input {
    background-color: var(--noir-elevated);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 8px;
}

    .auth-input:focus {
        background-color: var(--noir-elevated);
        border-color: var(--gold-standard);
        color: #fff;
        box-shadow: 0 0 0 0.2rem var(--gold-glow);
    }

/* Saca las flechitas de subir/bajar de los campos numéricos (edad, estatura,
   peso, etc. en el panel de la anunciante) — a pedido: quedan más limpios y
   evitan que alguien las toque sin querer y cambie el valor. Se puede seguir
   escribiendo el número normal con el teclado, no se pierde funcionalidad. */
.auth-input[type="number"]::-webkit-outer-spin-button,
.auth-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auth-input[type="number"] {
    -moz-appearance: textfield;
}

.auth-error {
    color: #ff6b6b;
    font-size: 0.85rem;
}

    .auth-error ul {
        margin: 0;
        padding-left: 18px;
    }

.auth-field-error {
    color: #ff6b6b;
    font-size: 0.78rem;
}

.btn-auth-submit {
    background-color: var(--gold-standard);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .btn-auth-submit:hover {
        background-color: var(--gold-bright);
        color: #000;
    }

/* Link chico dentro del formulario (ej: "¿Olvidaste tu contraseña?" junto a
   "Recordarme" en Login) — mismo tono dorado que .auth-links pero sin negrita
   ni el layout centrado, para que quepa en línea con otro elemento. */
.auth-link-chico {
    color: var(--gold-standard);
    font-size: 0.8rem;
    text-decoration: none;
}

    .auth-link-chico:hover {
        color: var(--gold-bright);
        text-decoration: underline;
    }

.auth-links {
    text-align: center;
    font-size: 0.85rem;
    color: var(--silver-dark);
}

    .auth-links a {
        color: var(--gold-standard);
        text-decoration: none;
        font-weight: 600;
    }

        .auth-links a:hover {
            color: var(--gold-bright);
        }

    .auth-links .auth-links-sep {
        margin: 0 8px;
        color: #444;
    }

/* ==========================================================================
   PANELES (Anunciante y Admin)
   ========================================================================== */
.panel-titulo {
    font-family: 'Poppins', var(--font-sans);
    color: var(--gold-standard);
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.panel-subtitulo {
    color: var(--silver-dark);
    font-size: 0.88rem;
    margin-bottom: 20px;
}

.panel-alerta {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    margin-bottom: 20px;
}

/* Notificaciones tipo "toast" en el panel de Admin (a pedido): en vez de un
   cartel fijo arriba de la página que a veces queda fuera de vista, flota
   sobre el contenido y desaparece solo. */
.admin-con-sidebar .panel-alerta {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    min-width: 260px;
    max-width: 380px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    background: var(--noir-card);
    animation: toastEntrada 0.25s ease;
}

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

.admin-con-sidebar .panel-alerta.toast-saliendo {
    animation: toastSalida 0.3s ease forwards;
}

@keyframes toastSalida {
    to { transform: translateX(30px); opacity: 0; }
}

.panel-alerta-ok {
    background-color: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

.panel-alerta-error {
    background-color: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

.panel-estado-plan {
    background-color: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
    color: var(--silver-standard);
    font-size: 0.9rem;
}

.panel-plan-nombre strong {
    color: var(--gold-bright);
}

.panel-plan-sep {
    margin: 0 10px;
    color: #444;
}

.panel-estado-activo {
    color: #4ade80;
    font-weight: 600;
}

.panel-estado-inactivo {
    color: #ff6b6b;
    font-weight: 600;
}

.panel-estado-pendiente {
    color: var(--gold-standard);
    font-weight: 600;
}

.panel-aviso-whatsapp {
    background-color: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.35);
    color: #d5f5e3;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
}

.panel-seccion {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(212, 175, 55, 0.02);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .panel-seccion:hover {
        border-color: rgba(212, 175, 55, 0.55);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 18px rgba(212, 175, 55, 0.12);
    }

.panel-seccion-titulo {
    font-family: 'Poppins', var(--font-sans);
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .panel-seccion-titulo i {
        color: var(--gold-standard);
        font-size: 1.05rem;
    }

/* Barra de "Estado del plan" en chips (a pedido: antes era texto plano
   separado por puntos "·", menos visual que el resto del panel). */
.panel-estado-plan-moderno {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-estado-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    color: var(--silver-standard);
}

    .panel-estado-chip i {
        color: var(--gold-standard);
        font-size: 0.85rem;
    }

.panel-estado-chip-ok {
    border-color: rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

    .panel-estado-chip-ok i {
        color: #4ade80;
    }

.panel-estado-chip-alerta {
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

    .panel-estado-chip-alerta i {
        color: #ff6b6b;
    }

.panel-upload-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .panel-upload-fila-titulo {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 0.95rem;
    }

        .panel-upload-fila-titulo i {
            color: var(--gold-standard);
        }

    .panel-upload-tip {
        color: var(--silver-dark);
        font-size: 0.8rem;
        font-weight: 400;
    }

    .panel-upload-fila-controles {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .panel-upload-fila-controles .btn-auth-submit {
        flex-shrink: 0;
    }

.panel-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 140px));
    gap: 12px;
}

.panel-media-item {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--noir-elevated);
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: border-color 0.25s ease;
}

    .panel-media-item:hover {
        border-color: rgba(212, 175, 55, 0.6);
    }

    .panel-media-item img,
    .panel-media-item video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

.panel-media-tipo {
    position: absolute;
    top: 6px;
    left: 6px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.panel-media-borrar {
    position: absolute;
    top: 6px;
    right: 6px;
}

    .panel-media-borrar button {
        background: rgba(0, 0, 0, 0.6);
        border: none;
        color: #ff6b6b;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        cursor: pointer;
    }

/* Elegir/mostrar la foto de portada (a pedido: antes se elegía sola,
   automáticamente la primera foto aprobada). */
.panel-media-portada-grupo {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.panel-media-portada-actual {
    flex: 1;
    background: rgba(212, 175, 55, 0.85);
    color: #1a1200;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    padding: 4px 4px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-media-portada-perfil {
    background: rgba(34, 197, 94, 0.85);
    color: #06210f;
}

.panel-media-portada-form {
    flex: 1;
}

    .panel-media-portada-form button {
        width: 100%;
        background: rgba(0, 0, 0, 0.65);
        border: 1px solid rgba(212, 175, 55, 0.5);
        color: var(--gold-standard);
        font-size: 0.6rem;
        font-weight: 600;
        padding: 4px 4px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .panel-media-portada-form button:hover {
            background: rgba(212, 175, 55, 0.15);
            border-color: var(--gold-bright);
            color: var(--gold-bright);
        }

        .panel-media-borrar button:hover {
            background: #ff6b6b;
            color: #fff;
        }

    .panel-comentario-borrar:hover {
        background-color: #ff6b6b;
        color: #fff;
    }

/* Tabla del panel de Admin */
.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--silver-standard);
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

    .admin-tabla th {
        text-align: left;
        color: var(--gold-standard);
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.5px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    }

    .admin-tabla td {
        padding: 12px 12px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.4);
        vertical-align: middle;
    }

    /* Separador fuerte entre CADA NEGOCIO completo (no solo entre filas
       sueltas) — a pedido: con el borde normal de arriba no se notaba lo
       suficiente dónde termina un negocio y empieza el siguiente. */
    .admin-tabla-fila-acciones-grupo td {
        border-bottom: 2px solid rgba(212, 175, 55, 0.6);
        padding-bottom: 18px;
    }

    .admin-tabla a {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

        .admin-tabla a:hover {
            color: var(--gold-bright);
        }

.admin-form-inline {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-select {
    background-color: var(--noir-elevated);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
}

.admin-dias {
    width: 72px;
}

    .admin-dias::-webkit-outer-spin-button,
    .admin-dias::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .admin-dias[type="number"] {
        -moz-appearance: textfield;
    }

.admin-btn {
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    margin: 2px;
}

.admin-btn-activar {
    background-color: var(--gold-standard);
    color: #000;
}

    .admin-btn-activar:hover {
        background-color: var(--gold-bright);
    }

.admin-btn-desactivar {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--silver-standard);
}

.admin-btn-eliminar {
    background-color: transparent;
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

    .admin-btn-eliminar:hover {
        background-color: #ff6b6b;
        color: #fff;
    }

/* ==========================================================================
   ESTADO VACÍO DE LA HOME (antes de activar el primer anuncio)
   ========================================================================== */
.estado-vacio-home {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--noir-card);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 48px 32px;
}

.estado-vacio-icono {
    font-size: 2.4rem;
    color: var(--gold-standard);
    margin-bottom: 16px;
    display: block;
}

.estado-vacio-home h3 {
    font-family: var(--font-serif);
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.estado-vacio-home p {
    color: var(--silver-dark);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 22px;
}

.panel-limite-media {
    color: var(--silver-dark);
    font-size: 0.82rem;
    margin-bottom: 14px;
}

.panel-limite-alcanzado {
    color: #ff6b6b;
}

/* ==========================================================================
   "VER TODAS" Y PAGINADOR (páginas de categoría completa)
   ========================================================================== */
.btn-ver-todas {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

    .btn-ver-todas:hover {
        background-color: var(--gold-subtle);
        border-color: var(--gold-standard);
        color: var(--gold-bright);
    }

.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.paginador-btn {
    background-color: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--silver-standard);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

    .paginador-btn:hover {
        border-color: var(--gold-standard);
        color: var(--gold-bright);
    }

.paginador-info {
    color: var(--silver-dark);
    font-size: 0.85rem;
}

/* ==========================================================================
   FASE 2: Planes y vencimientos — insignias y avisos de vencimiento
   ========================================================================== */
.panel-verificado-si {
    color: #4ade80;
    font-weight: 600;
    font-size: 0.85rem;
}

.panel-verificado-no {
    color: var(--silver-dark);
    font-size: 0.85rem;
}

/* Fila resaltada en la tabla de Admin cuando el anuncio está por vencer */
.fila-por-vencer {
    background-color: rgba(255, 193, 7, 0.06);
}

.fila-lista-activar {
    background-color: rgba(34, 197, 94, 0.06);
}

.admin-badge-listo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.badge-por-vencer {
    display: inline-block;
    margin-left: 6px;
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.admin-btn-verificado {
    background-color: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

.admin-btn-renovar {
    background-color: transparent;
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

    .admin-btn-renovar:hover {
        background-color: #ffc107;
        color: #000;
    }

/* Insignia de "Verificado" visible en el perfil público (Módulo 21, Cambio 120) */
.badge-verificado-perfil {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    margin-left: 8px;
}

/* ==========================================================================
   FASE 3: Moderación — avisos en el panel de la anunciante, historial, y
   el Centro de Moderación del Admin.
   ========================================================================== */
.panel-seccion-nota {
    color: var(--silver-dark);
    font-size: 0.8rem;
    margin-bottom: 16px;
}

.panel-aviso-moderacion {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-aviso-pendiente {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #ffd873;
}

.panel-aviso-rechazado {
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.35);
    color: #ff9b9b;
}

/* Estado de cada foto/video en la galería de la anunciante */
.panel-media-estado {
    display: block;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 0;
}

.panel-media-estado-pendiente {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.panel-media-estado-aprobado {
    background-color: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.panel-media-estado-rechazado {
    background-color: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
}

.panel-media-motivo {
    display: block;
    font-size: 0.65rem;
    color: #ff9b9b;
    text-align: center;
    padding: 2px 4px 4px;
}

/* Historial de revisiones (panel de la anunciante) */
.historial-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Centro de Moderación (Admin) */
.moderacion-contador {
    color: var(--silver-dark);
    font-weight: 400;
    font-size: 1rem;
}

.moderacion-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    gap: 16px;
}

.moderacion-media-item {
    position: relative;
    background: linear-gradient(180deg, var(--noir-elevated) 0%, var(--noir-deep) 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

    .moderacion-media-item:hover {
        border-color: rgba(212, 175, 55, 0.6);
        box-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
    }

    .moderacion-media-item img,
    .moderacion-media-item video {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

.moderacion-media-info {
    padding: 8px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .moderacion-media-info a {
        color: #fff;
        font-family: 'Poppins', var(--font-sans);
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
    }

        .moderacion-media-info a:hover {
            color: var(--gold-bright);
        }

.moderacion-fecha {
    color: var(--silver-dark);
    font-size: 0.7rem;
}

.moderacion-acciones {
    display: flex;
    gap: 6px;
    padding: 10px;
    flex-wrap: wrap;
}

.moderacion-form-rechazo {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 160px;
}

.moderacion-input-motivo {
    flex: 1;
    min-width: 90px;
}

.moderacion-edicion-item {
    background: linear-gradient(180deg, var(--noir-elevated) 0%, var(--noir-deep) 100%);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 16px;
    margin-bottom: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

    .moderacion-edicion-item:hover {
        border-color: rgba(212, 175, 55, 0.55);
        box-shadow: 0 0 14px rgba(212, 175, 55, 0.1);
    }

.moderacion-edicion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

    .moderacion-edicion-cabecera a {
        color: #fff;
        font-family: 'Poppins', var(--font-sans);
        font-weight: 700;
        text-decoration: none;
        font-size: 1rem;
    }

        .moderacion-edicion-cabecera a:hover {
            color: var(--gold-bright);
        }

    .moderacion-diff-tabla th {
        text-align: left;
        color: var(--gold-standard);
        font-size: 0.7rem;
        text-transform: uppercase;
        padding: 6px 10px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    }

    .moderacion-diff-tabla td {
        padding: 6px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        vertical-align: top;
    }

    .moderacion-diff-tabla td:first-child {
        color: var(--silver-dark);
        font-weight: 600;
        white-space: nowrap;
    }

    .moderacion-diff-tabla td:last-child {
        color: #4ade80;
    }

/* ==========================================================================
   FASE 4: Verificación de identidad
   ========================================================================== */
.panel-aviso-aprobado {
    background-color: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #86efac;
}

.btn-ver-documento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--noir-elevated);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--gold-standard);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .btn-ver-documento:hover {
        border-color: var(--gold-standard);
        color: var(--gold-bright);
        background-color: var(--gold-subtle);
    }

/* Chips seleccionables (tags) del panel de edición de perfil */
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--noir-elevated);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--silver-standard);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

    .tag-chip input[type="checkbox"] {
        accent-color: var(--gold-standard);
        margin: 0;
    }

    .tag-chip:hover {
        border-color: rgba(212, 175, 55, 0.4);
    }

.tag-chip-activo {
    background-color: var(--gold-matte);
    border-color: var(--gold-standard);
    color: #fff;
}

/* ==========================================================================
   FASE 5: Galería con pestañas, lightbox + zoom, tarjetas de perfil,
   sidebar de contacto sticky, y botón de WhatsApp flotante.
   ========================================================================== */

/* Cabecera de la galería con las pestañas Fotos/Videos */
.galeria-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.galeria-tabs {
    display: flex;
    gap: 8px;
}

.galeria-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--noir-card);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--silver-standard);
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .galeria-tab:hover {
        border-color: rgba(212, 175, 55, 0.4);
    }

    .galeria-tab.active {
        background-color: var(--gold-matte);
        border-color: var(--gold-standard);
        color: #fff;
    }

    .galeria-grupo.active {
        display: block;
    }

/* Contador "3 / 8" sobre la foto grande */
.galeria-contador {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 3;
    pointer-events: none;
}

/* Aviso de "clic para ampliar" (Cambio 30, zoom) */
.galeria-zoom-hint {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.galeria-visor-principal:hover .galeria-zoom-hint {
    opacity: 1;
}

.galeria-visor-principal [data-lightbox-trigger] {
    cursor: zoom-in;
}

/* Flechas del visor principal (fotos) */
.galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    transition: all 0.25s ease;
}

.galeria-visor-principal:hover .galeria-flecha {
    opacity: 1;
}

.galeria-flecha:hover {
    background-color: var(--gold-standard);
    color: #000;
}

/* Grilla de videos (separados de las fotos) */
.galeria-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

    .galeria-video-item video {
        width: 100%;
        max-height: 80vh;
        display: block;
        margin: 0 auto;
        /* A pedido: antes usaba "cover" con proporción fija 16:9, que
           RECORTABA el video para llenar el marco — si el video era
           vertical (lo más común subiendo desde un celular), se perdía
           gran parte de la imagen. Con "contain" se ve el video COMPLETO,
           sin zoom ni recorte, con el propio tamaño/proporción real del
           archivo (con franjas negras arriba/abajo o a los costados si
           no calza exacto con el ancho disponible). */
        object-fit: contain;
        background-color: #000;
    }

/* Lightbox de pantalla completa */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

    .lightbox-overlay.activo {
        opacity: 1;
        visibility: visible;
    }

.lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    border-radius: 4px;
}

    .lightbox-img.zoom-activo {
        transform: scale(1.9);
        cursor: zoom-out;
    }

.lightbox-cerrar {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
}

    .lightbox-cerrar:hover {
        background-color: var(--gold-standard);
        color: #000;
    }

.lightbox-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .lightbox-flecha:hover {
        background-color: var(--gold-standard);
        color: #000;
    }

.lightbox-flecha-izq {
    left: 24px;
}

.lightbox-flecha-der {
    right: 24px;
}

.lightbox-contador {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--silver-standard);
    font-size: 0.85rem;
}

.lightbox-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--silver-dark);
    font-size: 0.75rem;
}

/* Tarjetas de información del perfil (estilo Airbnb: bloques separados,
   con sombra suave y una leve animación al aparecer) */
.info-card {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

    .info-card:hover {
        border-color: rgba(212, 175, 55, 0.5);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(212, 175, 55, 0.1);
        transform: translateY(-2px);
    }

/* Tarjeta de contacto FIJA (sticky) al costado, como el "booking card" de Airbnb */
.contacto-card {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.45);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 175, 55, 0.08);
    position: sticky;
    top: 90px;
}

/* Botón de WhatsApp flotante, visible en toda la página del perfil */
.whatsapp-flotante {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
    z-index: 500;
    text-decoration: none;
    transition: transform 0.2s ease;
}

    .whatsapp-flotante:hover {
        transform: scale(1.08);
        color: #fff;
    }

@media (max-width: 991.98px) {
    .contacto-card {
        position: static;
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .whatsapp-flotante {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        bottom: 16px;
        right: 16px;
    }

    .lightbox-flecha {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .lightbox-flecha-izq { left: 8px; }
    .lightbox-flecha-der { right: 8px; }
}

/* ==========================================================================
   FASE 6: Botón "Mostrar más" (carga dinámica de la home)
   ========================================================================== */
.btn-mostrar-mas {
    background-color: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    padding: 11px 28px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .btn-mostrar-mas:hover:not(:disabled) {
        background-color: var(--gold-subtle);
        border-color: var(--gold-standard);
        color: var(--gold-bright);
    }

    .btn-mostrar-mas:disabled {
        opacity: 0.6;
        cursor: default;
    }

.btn-mostrar-mas-total {
    color: var(--silver-dark);
    font-weight: 400;
    font-size: 0.78rem;
}

/* ==========================================================================
   FASE 7: Paneles completos — sub-nav del Admin, dashboard, notificaciones,
   modal de reporte.
   ========================================================================== */

/* Sub-navegación de las páginas de Admin */
.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

    .admin-subnav-link:hover {
        background-color: var(--gold-subtle);
        color: var(--gold-bright);
    }

    .admin-subnav-link.active {
        background-color: var(--gold-matte);
        color: #fff;
        font-weight: 600;
    }

/* Tarjetas numéricas del Dashboard (y reutilizadas en Estadísticas de la anunciante) */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.dashboard-card {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    transition: all 0.25s ease;
}

    .dashboard-card:hover {
        transform: translateY(-2px);
        border-color: rgba(212, 175, 55, 0.6);
        box-shadow: 0 0 16px rgba(212, 175, 55, 0.15);
    }

.dashboard-card-ok {
    border-color: rgba(74, 222, 128, 0.3);
}

.dashboard-numero {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.dashboard-etiqueta {
    color: var(--silver-dark);
    font-size: 0.78rem;
}

/* Formulario compacto de "crear ciudad/categoría" */
.admin-form-crear {
    display: flex;
    gap: 10px;
    max-width: 480px;
}

    .admin-form-crear input {
        flex: 1;
        background-color: var(--noir-elevated);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

/* Badge de notificaciones no leídas junto al título del panel */
.badge-notificaciones {
    display: inline-block;
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 12px;
    vertical-align: middle;
    text-decoration: none;
}

.notificacion-texto {
    color: var(--silver-standard);
    font-size: 0.85rem;
}

/* Botón "Reportar" en la barra de acciones del perfil */
.btn-reportar {
    color: #ff9b9b;
}

    .btn-reportar:hover {
        border-color: #ff6b6b;
        color: #ff6b6b;
        background-color: rgba(255, 107, 107, 0.1);
    }

/* Modal de "Reportar perfil" */
.reporte-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    padding: 20px;
}

    .reporte-modal-overlay.activo {
        opacity: 1;
        visibility: visible;
    }

.reporte-modal-caja {
    position: relative;
    background-color: var(--noir-card);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 16px;
    padding: 28px;
    max-width: 420px;
    width: 100%;
}

/* ==========================================================================
   FASE 9: Blog, Centro de Ayuda y FAQ
   ========================================================================== */
.blog-grid {
    display: grid;
    /* auto-fit (no auto-fill): con auto-fill, cuando la última fila no se
       completa del todo, el grid reserva columnas "fantasma" vacías en vez
       de dejar que las tarjetas existentes se estiren — eso es justo lo que
       dejaba ese hueco vacío a la derecha. auto-fit colapsa esas columnas
       vacías para que las tarjetas ocupen todo el ancho disponible. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.blog-card {
    display: block;
    background-color: var(--noir-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    /* Antes tenía padding acá y la imagen usaba un truco de márgenes
       negativos (calc(100% + 40px) + margin -20px) para "sangrar" hasta el
       borde de la tarjeta — poco confiable entre navegadores y causaba un
       hueco visible en el lado derecho de la imagen. Ahora la imagen es un
       elemento normal de ancho 100%, genuinamente fuera del área con
       padding (que se movió a .blog-card-cuerpo, más abajo). */
    overflow: hidden;
    text-decoration: none;
    transition: all 0.25s ease;
}

    .blog-card:hover {
        border-color: rgba(212, 175, 55, 0.3);
        transform: translateY(-3px);
    }

.blog-card-cuerpo {
    padding: 20px;
}

.blog-card-imagen {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-card-categoria {
    display: inline-block;
    background-color: var(--gold-subtle);
    color: var(--gold-standard);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.blog-card-titulo {
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.blog-card-resumen {
    color: var(--silver-standard);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.blog-card-fecha {
    color: var(--silver-dark);
    font-size: 0.72rem;
}

.blog-detalle-card {
    max-width: 780px;
    margin: 0 auto;
}

.blog-detalle-imagen {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
}

.blog-contenido {
    color: var(--silver-standard);
    font-size: 0.95rem;
    line-height: 1.8;
}

    .blog-contenido p {
        margin-bottom: 16px;
    }

    .blog-contenido img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin: 10px 0;
    }

    .blog-contenido h2, .blog-contenido h3 {
        color: var(--gold-standard);
        font-family: var(--font-serif);
        margin-top: 26px;
        margin-bottom: 12px;
    }

    .blog-contenido blockquote {
        border-left: 3px solid var(--gold-standard);
        padding-left: 16px;
        color: var(--silver-dark);
        font-style: italic;
        margin: 16px 0;
    }

/* Acordeón de preguntas frecuentes */
.faq-acordeon {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background-color: var(--noir-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.faq-pregunta {
    width: 100%;
    background: none;
    border: none;
    color: var(--gold-standard);
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.faq-icono {
    transition: transform 0.25s ease;
    color: var(--gold-standard);
    flex-shrink: 0;
    margin-left: 12px;
}

.faq-pregunta.activo .faq-icono {
    transform: rotate(180deg);
}

.faq-respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 18px;
}

    .faq-respuesta p {
        color: #fff;
        font-size: 0.85rem;
        line-height: 1.6;
        padding-bottom: 16px;
        margin: 0;
    }

.faq-respuesta.activo {
    max-height: 300px;
}

/* ================================================================
   Calificación con estrellas y comentarios en el perfil (Cambio:
   reactivar comentarios + agregar calificación con estrellas).
   ================================================================ */
.perfil-calificar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    text-align: right;
}

.perfil-calificar-promedio {
    color: var(--gold-standard);
    font-size: 0.9rem;
    font-weight: 600;
}

.perfil-calificar-nota {
    color: var(--silver-standard);
    font-size: 0.82rem;
}

.perfil-calificar-estrellas {
    display: flex;
    gap: 4px;
    font-size: 1.3rem;
    color: var(--gold-standard);
    cursor: pointer;
}

.estrella-calificar {
    transition: transform 0.15s ease;
}

    .estrella-calificar:hover {
        transform: scale(1.15);
    }

.perfil-comentario-form .btn-perfil-accion {
    display: inline-block;
}

@media (max-width: 767px) {
    .perfil-calificar {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ================================================================
   Selector de ciudad compacto en el navbar (al lado del logo en
   escritorio, dentro del menú en móvil) — Cambio: ciudad visible
   en todas las páginas, no solo en el home.
   ================================================================ */
.nav-ciudad-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    margin-left: 18px;
    margin-top: 14px;
    color: var(--gold-standard);
    font-family: var(--font-sans);
    transition: all 0.25s ease;
}

    .nav-ciudad-pill:hover {
        background: rgba(212, 175, 55, 0.15);
        box-shadow: 0 0 12px var(--gold-glow);
    }

    .nav-ciudad-pill i {
        font-size: 0.85rem;
    }

.nav-ciudad-select {
    background: transparent;
    border: none;
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    outline: none;
    cursor: pointer;
    max-width: 130px;
}

    .nav-ciudad-select option {
        background: var(--noir-card);
        color: #fff;
    }

@media (max-width: 767.98px) {
    .nav-ciudad-pill {
        margin-left: 0;
        margin-top: 0;
        width: 100%;
        justify-content: center;
    }

    .nav-ciudad-select {
        max-width: none;
        width: 100%;
        text-align: center;
    }
}

/* ================================================================
   Página informativa "Anúnciate" (Cuenta/Anunciate.cshtml)
   ================================================================ */
.plan-info-icono {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    color: #1a1200;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.condiciones-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 640px;
    margin: 0 auto;
}

    .condiciones-lista li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--silver-standard);
        font-size: 0.9rem;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

        .condiciones-lista li i {
            color: var(--gold-standard);
            margin-top: 2px;
            flex-shrink: 0;
        }

.btn-gold-vip-lg {
    font-size: 1.05rem;
    padding: 14px 34px;
}

/* ================================================================
   DROPDOWN ELEGANTE — reemplazo visual de los <select> nativos en el
   buscador (Cambio: comboboxes más lindos/llamativos). El <select>
   original queda detrás, invisible pero funcional (manda su valor con
   el formulario igual que siempre); lo que se ve es este trigger +
   panel personalizados.
   ================================================================ */
.select-elegante-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.select-elegante-nativo {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.select-elegante-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, var(--noir-elevated) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Variante "simple" (a pedido, navegador): la cajita cerrada vuelve a verse
   como el diseño viejo (transparente, sin fondo propio — el .nav-ciudad-pill
   que la envuelve ya pone el fondo/borde) — pero la lista que se abre sigue
   usando el mismo diseño elegante y con color que el buscador. */
.select-elegante-trigger-simple {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--gold-bright) !important;
    font-size: 0.82rem !important;
    font-weight: 600;
}

    .select-elegante-trigger span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .select-elegante-trigger i {
        color: var(--gold-standard);
    }

    .select-elegante-trigger:hover {
        border-color: var(--gold-standard);
        box-shadow: 0 0 10px var(--gold-glow);
    }

.select-elegante-flecha {
    transition: transform 0.25s ease;
    font-size: 0.8rem;
}

.select-elegante-wrap.abierto .select-elegante-trigger {
    border-color: var(--gold-bright);
    box-shadow: 0 0 14px var(--gold-glow);
}

.select-elegante-wrap.abierto .select-elegante-flecha {
    transform: rotate(180deg);
}

.select-elegante-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 190px;
    z-index: 50;
    background: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px var(--gold-glow);
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    animation: selectEleganteAparece 0.18s ease;
}

.select-elegante-wrap.abierto .select-elegante-panel {
    display: block;
}

@keyframes selectEleganteAparece {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.select-elegante-item {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--silver-standard);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .select-elegante-item:hover {
        background: rgba(212, 175, 55, 0.12);
        color: var(--gold-bright);
    }

    .select-elegante-item.active {
        background: rgba(212, 175, 55, 0.18);
        color: var(--gold-bright);
        font-weight: 600;
    }

.select-elegante-panel::-webkit-scrollbar {
    width: 6px;
}

.select-elegante-panel::-webkit-scrollbar-thumb {
    background: var(--gold-matte);
    border-radius: 10px;
}

/* ================================================================
   Páginas legales (Términos, Privacidad, Cookies, Aviso Legal,
   Protección de Datos) — Controllers/LegalController.cs
   ================================================================ */
.legal-content {
    max-width: 820px;
    margin: 0 auto;
    color: var(--silver-standard);
    font-family: 'Poppins', var(--font-sans);
    line-height: 1.8;
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 44px 48px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

@media (max-width: 575.98px) {
    .legal-content {
        padding: 26px 20px;
    }
}

    .legal-content h2 {
        font-family: var(--font-serif);
        color: var(--gold-standard);
        font-size: 1.35rem;
        font-weight: 700;
        margin-top: 38px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        scroll-margin-top: 100px;
    }

        /* Numeración con badge circular dorado (a pedido) — el número de la
           sección (ej. "3.") se separa del título y se pone en un círculo. */
        .legal-content h2::before {
            content: attr(data-numero);
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.12);
            border: 1px solid rgba(212, 175, 55, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Poppins', var(--font-sans);
            font-size: 0.85rem;
            font-weight: 700;
        }

    .legal-content h2:first-child {
        margin-top: 0;
    }

    .legal-content h3 {
        font-family: 'Poppins', var(--font-sans);
        color: #fff;
        font-size: 1.02rem;
        font-weight: 700;
        margin-top: 22px;
        margin-bottom: 10px;
    }

    .legal-content p {
        font-size: 0.92rem;
        margin-bottom: 14px;
    }

    .legal-content ul {
        margin-bottom: 14px;
        padding-left: 20px;
    }

    .legal-content li {
        font-size: 0.92rem;
        margin-bottom: 8px;
    }

    .legal-content strong {
        color: #ffffff;
    }

    .legal-content a {
        color: var(--gold-standard);
    }

/* Índice + botón de imprimir, generados solos por JS (a pedido) */
.legal-indice {
    max-width: 820px;
    margin: 0 auto 24px auto;
    background: rgba(212, 175, 55, 0.05);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 18px 22px;
}

    .legal-indice h4 {
        font-family: 'Poppins', var(--font-sans);
        color: var(--gold-standard);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .legal-indice ol {
        columns: 2;
        padding-left: 18px;
        margin: 0;
    }

@media (max-width: 575.98px) {
    .legal-indice ol {
        columns: 1;
    }
}

    .legal-indice li {
        font-size: 0.82rem;
        margin-bottom: 6px;
    }

    .legal-indice a {
        color: var(--silver-standard);
        text-decoration: none;
    }

        .legal-indice a:hover {
            color: var(--gold-bright);
        }

.legal-imprimir-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0 auto 20px auto;
    display: flex;
    max-width: 820px;
}

    .legal-imprimir-btn:hover {
        background: rgba(212, 175, 55, 0.2);
    }

@media print {
    .navbar, .footer-vip, .legal-imprimir-btn, .legal-aviso-borrador {
        display: none !important;
    }

    /* En Pagos, la columna de acciones (Guardar/Eliminar) no tiene ningún
       sentido en un documento impreso. */
    .no-imprimir {
        display: none !important;
    }

    /* El sitio es de tema oscuro (fondo negro, letra blanca/dorada). Antes,
       al imprimir, solo se cambiaba el fondo a blanco pero el texto se
       quedaba blanco también — texto casi invisible sobre fondo blanco, que
       es justo lo que se veía "desordenado"/disperso. Esto fuerza texto
       negro en todo, y le da a las tablas del Admin una apariencia de
       planilla (tipo Excel): líneas negras prolijas, sin fondos oscuros ni
       degradados, y los campos editables (inputs) se ven como texto plano
       en vez de cajas de formulario. */
    body, .admin-con-sidebar, .panel-page, .panel-titulo, .panel-subtitulo,
    .admin-tabla, .admin-tabla th, .admin-tabla td, .panel-seccion {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .admin-tabla {
        border-collapse: collapse !important;
        width: 100% !important;
        display: table !important; /* por si el ajuste de celular seguía activo */
        white-space: normal !important;
    }

        .admin-tabla th, .admin-tabla td {
            border: 1px solid #999 !important;
            padding: 6px 8px !important;
            color: #000 !important;
            display: table-cell !important; /* revierte el diseño "tarjeta apilada" de celular */
            text-align: left !important;
        }

            .admin-tabla td::before {
                content: none !important; /* saca las etiquetas de celular (NOMBRE:, FECHA:, etc.) */
            }

        .admin-tabla th {
            background: #eee !important;
            font-weight: 700 !important;
        }

    /* Inputs/selects editables (ej: el campo Monto) se ven como texto
       plano, sin bordes ni fondo de formulario. */
    .admin-tabla input, .admin-tabla select, .admin-tabla .admin-select,
    .admin-tabla .input-group-text {
        border: none !important;
        background: none !important;
        color: #000 !important;
        padding: 0 !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* "Badges"/chips con fondo de color (ej: "🏢 Espacio Publicitario") se
       ven como texto simple, sin el fondo dorado/verde que no imprime bien. */
    .admin-tabla .admin-btn {
        background: none !important;
        color: #000 !important;
        border: none !important;
        padding: 0 !important;
    }

    body {
        background: #fff !important;
    }

    .legal-content, .legal-indice {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border-color: #ccc !important;
    }

        .legal-content h2, .legal-content h3, .legal-content strong {
            color: #000 !important;
        }
}

.legal-fecha {
    color: var(--silver-dark);
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 40px;
}

.legal-aviso-borrador {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 0.85rem;
    color: var(--silver-standard);
    margin-bottom: 30px;
}

/* ================================================================
   Panel de la anunciante — rediseño moderno (Cambio: estadísticas,
   bloqueo hasta verificar, notificaciones y comentarios más modernos;
   fuente Poppins en vez del serif que se sentía "anticuado").
   ================================================================ */

/* Estadísticas */
.stats-grid-moderno {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.stat-card-moderno {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 14px;
    padding: 18px;
    transition: all 0.25s ease;
}

    .stat-card-moderno:hover {
        border-color: rgba(212, 175, 55, 0.6);
        box-shadow: 0 0 16px rgba(212, 175, 55, 0.15);
        transform: translateY(-2px);
    }

.stat-card-icono {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    color: #1a1200;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.stat-card-numero {
    display: block;
    font-family: 'Poppins', var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.stat-card-etiqueta {
    display: block;
    font-size: 0.75rem;
    color: var(--silver-dark);
    margin-top: 2px;
}

/* Aviso y bloqueo de secciones hasta verificar identidad + plan activo */
.panel-bloqueo-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--gold-bright);
}

.panel-seccion-bloqueada {
    text-align: center;
    padding: 40px 24px;
}

.panel-bloqueo-contenido {
    max-width: 420px;
    margin: 0 auto;
}

.panel-bloqueo-icono {
    font-size: 2.4rem;
    color: rgba(212, 175, 55, 0.5);
    margin-bottom: 14px;
    display: block;
}

/* Notificaciones modernas */
.notificaciones-lista-moderna {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notificacion-item-moderno {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    padding: 14px 16px;
}

    .notificacion-item-moderno i {
        color: var(--gold-standard);
        font-size: 1rem;
        margin-top: 2px;
    }

.notificacion-texto-moderno {
    font-size: 0.88rem;
    color: #fff;
}

.notificacion-fecha-moderna {
    font-size: 0.72rem;
    color: var(--silver-dark);
}

/* Comentarios modernos, tipo tarjeta con avatar */
.comentarios-lista-moderna {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comentario-card-moderno {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
}

.comentario-avatar-moderno {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    color: #1a1200;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', var(--font-sans);
    font-weight: 700;
    font-size: 1.1rem;
}

.comentario-cuerpo-moderno {
    flex: 1;
    font-family: 'Poppins', var(--font-sans);
    font-size: 0.88rem;
    color: rgba(224, 224, 224, 0.75);
}

.comentario-cabecera-moderna {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

    .comentario-cabecera-moderna strong {
        font-family: 'Poppins', var(--font-sans);
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.9rem;
    }

.comentario-fecha-moderna {
    font-size: 0.72rem;
    color: var(--silver-dark);
}

.comentario-anuncio-link {
    font-size: 0.72rem;
    color: var(--gold-standard);
    text-decoration: none;
}

    .comentario-anuncio-link:hover {
        color: var(--gold-bright);
        text-decoration: underline;
    }

.comentario-borrar-moderno {
    flex-shrink: 0;
}

    .comentario-borrar-moderno button {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: var(--silver-dark);
        border-radius: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

        .comentario-borrar-moderno button:hover {
            border-color: #ef4444;
            color: #ef4444;
        }

/* ================================================================
   Modal de confirmación propio (reemplaza el confirm() del navegador)
   ================================================================ */
.confirmar-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    padding: 20px;
}

    .confirmar-modal-overlay.activo {
        opacity: 1;
        visibility: visible;
    }

.confirmar-modal-caja {
    background-color: var(--noir-card);
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.15);
    border-radius: 16px;
    padding: 30px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.confirmar-modal-icono {
    font-size: 2rem;
    color: #ef4444;
    margin-bottom: 14px;
    display: block;
}

.confirmar-modal-mensaje {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 22px;
}

.confirmar-modal-botones {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirmar-modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirmar-modal-btn-no {
    background: rgba(255, 255, 255, 0.08);
    color: var(--silver-standard);
}

    .confirmar-modal-btn-no:hover {
        background: rgba(255, 255, 255, 0.15);
    }

.confirmar-modal-btn-si {
    background: #ef4444;
    color: #fff;
}

    .confirmar-modal-btn-si:hover {
        background: #dc2626;
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
    }

/* ================================================================
   PERFIL — rediseño moderno: columna izquierda fija (foto + datos +
   contacto) y columna derecha scrolleable (datos, sobre mí, fotos,
   comentarios). A pedido, estilo tipo "app de anuncios" profesional.
   ================================================================ */
.perfil-page-moderna {
    max-width: 1400px;
}

.perfil-layout-moderno {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

@media (max-width: 991.98px) {
    .perfil-layout-moderno {
        flex-direction: column;
    }
}

.perfil-sidebar-moderna {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
}

@media (max-width: 991.98px) {
    .perfil-sidebar-moderna {
        width: 100%;
        position: static;
    }
}

.perfil-sidebar-card {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 175, 55, 0.08);
}

.perfil-sidebar-card .perfil-avatar-wrapper {
    width: 150px;
    height: 150px;
    margin-bottom: 16px;
}

.perfil-avatar-plan-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--noir-deep);
    border: 1.5px solid var(--gold-standard);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .perfil-avatar-plan-badge img {
        width: 68%;
        height: 68%;
        object-fit: contain;
    }

.perfil-nombre-moderno {
    font-family: 'Poppins', var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.perfil-verificado-moderno {
    color: #22c55e;
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}

.perfil-subtitulo-moderno {
    color: var(--silver-dark);
    font-size: 0.82rem;
    margin: 4px 0 14px 0;
}

.perfil-badges-moderno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge-disponible {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dot-verde {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    box-shadow: 0 0 6px #22c55e;
}

.badge-no-disponible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--silver-dark);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
}

.badge-genero-moderno {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-standard);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.perfil-acciones-moderno {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.d-contents {
    display: contents;
}

.btn-accion-moderno {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--silver-standard);
    border-radius: 10px;
    padding: 9px 8px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .btn-accion-moderno:hover {
        border-color: var(--gold-standard);
        color: var(--gold-bright);
    }

    .btn-accion-moderno.ya-dio-like {
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.4);
    }

.btn-accion-reportar {
    flex: 0 0 auto;
    width: 40px;
}

    .btn-accion-reportar:hover {
        border-color: #ef4444;
        color: #ef4444;
    }

.perfil-calificar-moderno {
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.perfil-calificar-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.btn-calificar-enviar {
    background: var(--gold-standard);
    color: #1a1200;
    border: none;
    padding: 6px 18px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

    .btn-calificar-enviar:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.perfil-sidebar-divisor {
    border: none;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    margin: 4px 0 16px 0;
}

.perfil-contacto-label {
    text-align: center;
    color: var(--silver-dark);
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.perfil-telefono-moderno {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Poppins', var(--font-sans);
    margin-bottom: 14px;
}

.perfil-contacto-botones-moderno {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-contacto-moderno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.25s ease;
    flex: 1;
    min-width: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

    .btn-contacto-moderno:hover {
        transform: translateY(-2px);
    }

    .btn-contacto-moderno i {
        font-size: 1.05rem;
    }

.btn-telegram-moderno {
    background: linear-gradient(135deg, #229ED9, #34b3f1);
    color: #fff;
}

    .btn-telegram-moderno:hover {
        box-shadow: 0 4px 18px rgba(34, 158, 217, 0.5);
    }

.btn-whatsapp-moderno {
    background: linear-gradient(135deg, #1fb855, #25D366);
    color: #06210f;
}

    .btn-whatsapp-moderno:hover {
        box-shadow: 0 4px 18px rgba(37, 211, 102, 0.55);
        color: #06210f;
    }

.btn-llamar-moderno {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--gold-bright);
}

    .btn-llamar-moderno:hover {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.1));
        color: var(--gold-bright);
        box-shadow: 0 4px 18px rgba(212, 175, 55, 0.3);
    }

/* Columna derecha (scrolleable) */
.perfil-contenido-moderno {
    flex: 1;
    min-width: 0;
}

.perfil-datos-grid-moderno {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.perfil-dato-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.03) 60%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.25s ease;
}

    .perfil-dato-box:hover {
        border-color: rgba(212, 175, 55, 0.55);
        transform: translateY(-2px);
    }

.perfil-dato-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: var(--silver-dark);
}

.perfil-dato-valor {
    display: block;
    font-family: 'Poppins', var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.info-card-moderno {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .info-card-moderno:hover {
        border-color: rgba(212, 175, 55, 0.45);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 18px rgba(212, 175, 55, 0.1);
    }

.perfil-seccion-titulo-moderno {
    font-family: 'Poppins', var(--font-sans);
    color: var(--gold-standard);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .perfil-seccion-titulo-moderno i {
        font-size: 0.9rem;
    }

.perfil-contador-fotos {
    color: var(--silver-dark);
    font-weight: 400;
    letter-spacing: 0;
}

/* Grilla de fotos */
.perfil-fotos-grid {
    display: grid;
    /* A pedido: antes usaba minmax(130px, 1fr) — con "1fr" el tamaño de cada
       tarjeta dependía de CUÁNTAS fotos tuviera la anunciante (menos fotos =
       tarjetas más grandes, más fotos = tarjetas más chicas), así que un
       perfil Silver (máx. 6 fotos) se veía con tarjetas gigantes comparado
       con uno VIP (máx. 15 fotos) — no era una diferencia de diseño a
       propósito, era un efecto secundario del grid. Con un tamaño fijo,
       todas las tarjetas miden igual sin importar cuántas fotos haya.
       auto-fill (no auto-fit) mantiene el tamaño fijo aunque sobre espacio
       en la última fila. justify-content:start (no center) para que las
       fotos llenen la fila desde la izquierda usando todo el ancho
       disponible, en vez de agruparse en el medio dejando espacio vacío a
       los costados. */
    grid-template-columns: repeat(auto-fill, 150px);
    justify-content: start;
    gap: 12px;
}

.perfil-foto-item {
    position: relative;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(212, 175, 55, 0.25);
    transition: all 0.3s ease;
}

.perfil-foto-video-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 2;
}

    .perfil-foto-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transition: transform 0.4s ease;
    }

    .perfil-foto-item:hover {
        border-color: var(--gold-standard);
        box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
    }

        .perfil-foto-item:hover img {
            transform: scale(1.08);
        }

/* Caja de "otros servicios/adicionales" (a pedido: se perdía entre los tags,
   ahora tiene su propio recuadro con etiqueta bien visible). */
.panel-otros-box {
    background: rgba(212, 175, 55, 0.05);
    border: 1px dashed rgba(212, 175, 55, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
}

.panel-otros-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold-standard);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ID de anunciante visible en el panel (a pedido) */
.panel-id-usuaria {
    color: var(--silver-dark);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

    .panel-id-usuaria strong {
        color: var(--gold-standard);
        font-family: 'Poppins', var(--font-sans);
        font-size: 1.15rem;
        letter-spacing: 0.5px;
    }

/* ================================================================
   Editor de pixelado/difuminado (reutilizable)
   ================================================================ */
.editor-imagen-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    padding: 16px;
}

    .editor-imagen-overlay.activo {
        opacity: 1;
        visibility: visible;
    }

.editor-imagen-caja {
    background-color: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 16px;
    padding: 20px;
    max-width: 720px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.editor-imagen-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.editor-imagen-lienzo-wrap {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    max-height: 60vh;
}

#editorImagenCanvas {
    max-width: 100%;
    max-height: 60vh;
    display: block;
    cursor: crosshair;
    touch-action: none;
}

.editor-imagen-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.editor-imagen-efectos {
    display: flex;
    gap: 8px;
}

.editor-imagen-botones {
    display: flex;
    gap: 8px;
}

/* Botón para abrir el editor antes de subir (panel de la anunciante) */
.btn-editar-antes-subir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-editar-antes-subir:hover {
        background: rgba(212, 175, 55, 0.2);
    }

/* Botón "Editar cara" chico, sobre cada miniatura pendiente en moderación */
.btn-editar-foto-moderacion {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--gold-standard);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 3;
}

    .btn-editar-foto-moderacion:hover {
        background: rgba(212, 175, 55, 0.2);
    }

/* Pedir que difuminen el rostro (panel de la anunciante) */
.panel-media-pedir-difuminado-form {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
}

    .panel-media-pedir-difuminado-form button {
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(239, 68, 68, 0.5);
        color: #f87171;
        font-size: 0.62rem;
        font-weight: 600;
        padding: 4px 6px;
        border-radius: 6px;
        cursor: pointer;
    }

        .panel-media-pedir-difuminado-form button:hover {
            background: rgba(239, 68, 68, 0.15);
        }

.panel-media-difuminado-pedido {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 6px;
    border-radius: 6px;
}

/* Misma etiqueta, versión para moderación del Admin */
.moderacion-difuminado-pedido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

/* ================================================================
   Protección liviana contra descarga casual de fotos/videos (a pedido).
   Importante: esto NO es una protección real ni a prueba de todo — se
   puede saltear con herramientas de desarrollador o una captura de
   pantalla (imposible de bloquear desde un sitio web). Es solo un freno
   para el "clic derecho > guardar imagen" y el "mantener presionado" del
   celular. La protección de verdad es el sello de agua incrustado en el
   archivo. Se aplica solo al contenido de fotos/videos, no a toda la
   página (para no romper la selección de texto normal en descripciones,
   comentarios, etc.).
   ================================================================ */
.card-media,
.circle-img,
.perfil-avatar-img,
.perfil-foto-item img,
.perfil-foto-item video,
.lightbox-img,
.panel-media-item img,
.panel-media-item video,
.moderacion-media-item img,
.moderacion-media-item video {
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* evita el menú de "guardar imagen" al mantener presionado en iPhone */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}

/* Refuerzo de tamaño para <video> específicamente (a diferencia de <img>,
   el navegador no siempre lo ajusta solo con las mismas reglas — a veces
   se queda con su tamaño nativo y se ve "más grande" o cortado). Se fuerza
   explícito acá para las tarjetas, Destacados, y el visor del perfil. */
video.card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

video.circle-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#lightboxVideo {
    width: auto;
    height: auto;
    max-width: 90vw !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    display: block;
}
.panel-media-seleccion-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#formEliminarVarias {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.panel-media-checkbox {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .panel-media-checkbox input {
        width: 16px;
        height: 16px;
        accent-color: var(--gold-standard);
        cursor: pointer;
    }

/* ================================================================
   Dashboard del Admin — rediseño con tarjeta de ingresos, gráficos y
   listas (a pedido: "espectacular", manteniendo negro/dorado del sitio).
   ================================================================ */
.dash-fila-superior {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 16px;
}

@media (max-width: 767.98px) {
    .dash-fila-superior {
        grid-template-columns: 1fr;
    }
}

.dash-ingreso-card {
    background: linear-gradient(135deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.1);
}

.dash-ingreso-label {
    color: var(--gold-standard);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-ingreso-numero {
    font-family: 'Poppins', var(--font-sans);
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin: 6px 0;
}

.dash-ingreso-link {
    color: var(--silver-dark);
    font-size: 0.8rem;
    text-decoration: none;
}

    .dash-ingreso-link:hover {
        color: var(--gold-standard);
    }

.dash-kpis-alerta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 575.98px) {
    .dash-kpis-alerta {
        grid-template-columns: 1fr;
    }
}

.dash-kpi-mini {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

    .dash-kpi-mini:hover {
        border-color: var(--gold-standard);
        transform: translateY(-2px);
    }

.dash-kpi-mini-numero {
    font-family: 'Poppins', var(--font-sans);
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
}

.dash-kpi-mini-etiqueta {
    font-size: 0.75rem;
    color: var(--silver-dark);
    margin-top: 2px;
}

.dash-kpi-alerta {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, var(--noir-deep) 100%);
}

    .dash-kpi-alerta .dash-kpi-mini-numero {
        color: #f87171;
    }

.dash-fila-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 900px) {
    .dash-fila-media {
        grid-template-columns: 1fr;
    }
}

.dash-grafico-wrap {
    max-width: 320px;
    margin: 0 auto;
}

.dash-lista-vencer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-vencer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

    .dash-vencer-item:hover {
        border-color: var(--gold-standard);
        color: var(--gold-bright);
    }

.dash-vencer-fecha {
    color: var(--gold-standard);
    font-size: 0.78rem;
    font-weight: 600;
}

.dash-anunciantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px;
}

.dash-anunciante-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    gap: 4px;
}

    .dash-anunciante-item img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center top;
        border: 2px solid rgba(212, 175, 55, 0.4);
        transition: border-color 0.2s ease;
    }

    .dash-anunciante-item:hover img {
        border-color: var(--gold-standard);
    }

.dash-anunciante-nombre {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
}

.dash-anunciante-ciudad {
    color: var(--silver-dark);
    font-size: 0.7rem;
}

/* ================================================================
   PANEL DE ADMIN — rediseño con barra lateral fija (a pedido, estilo
   panel de configuración tipo Windows), fuente moderna en todo el panel,
   y recuadros más compactos.
   ================================================================ */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: linear-gradient(180deg, var(--noir-deep) 0%, #000 100%);
    border-right: 1px solid rgba(212, 175, 55, 0.2);
    overflow-y: auto;
    z-index: 500;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-standard) transparent;
}

    .admin-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .admin-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .admin-sidebar::-webkit-scrollbar-thumb {
        background-color: var(--gold-standard);
        border-radius: 10px;
    }

.admin-sidebar-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    margin-bottom: 8px;
}

.admin-sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1200;
    font-size: 1rem;
    flex-shrink: 0;
}

    .admin-sidebar-marca span:not(.admin-sidebar-avatar) {
        color: var(--gold-standard);
        font-family: 'Poppins', var(--font-sans);
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

.admin-sidebar-separador {
    border: none;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    margin: 8px 4px;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    gap: 2px;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--silver-standard);
    text-decoration: none;
    font-family: 'Poppins', var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.18s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

    .admin-sidebar-link i {
        font-size: 0.95rem;
        width: 18px;
        text-align: center;
        color: var(--silver-dark);
        transition: color 0.18s ease;
    }

    .admin-sidebar-link:hover {
        background: rgba(212, 175, 55, 0.08);
        color: #fff;
    }

    .admin-sidebar-link.active {
        background: rgba(212, 175, 55, 0.14);
        color: var(--gold-bright);
    }

        .admin-sidebar-link.active i {
            color: var(--gold-standard);
        }

.admin-sidebar-badge {
    margin-left: auto;
    background: var(--gold-standard);
    color: #1a1200;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

.admin-sidebar-badge-alerta {
    background: #ef4444;
    color: #fff;
}

.admin-sidebar-logout-form {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar-logout {
    color: #f87171;
}

    .admin-sidebar-logout i {
        color: #f87171;
    }

.admin-sidebar-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 600;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* El contenido de cada página de Admin se corre a la derecha para dejarle
   el espacio a la barra lateral, y usa Poppins en todo (antes tenía la
   fuente por defecto del sitio, que se sentía "anticuada" acá). */
.admin-con-sidebar {
    margin-left: 250px;
    width: calc(100% - 250px);
    max-width: none !important;
    font-family: 'Poppins', var(--font-sans);
    padding-top: 24px !important;
    box-sizing: border-box;
    overflow-x: hidden;
}

    .admin-con-sidebar * {
        font-family: 'Poppins', var(--font-sans);
    }

@media (max-width: 991.98px) {
    .admin-sidebar {
        left: -260px;
        transition: left 0.25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,0.6);
    }

        .admin-sidebar.admin-sidebar-abierta {
            left: 0;
        }

    .admin-sidebar-toggle {
        display: flex;
    }

    .admin-con-sidebar {
        margin-left: 0;
        width: 100%;
        padding-top: 64px !important;
    }
}

/* Recuadros más compactos en todo el panel de Admin (a pedido: "los
   recuadros están demasiado grandes"). */
.admin-con-sidebar .dashboard-card {
    padding: 8px 6px;
}

.admin-con-sidebar .dashboard-numero {
    font-size: 1rem;
}

.admin-con-sidebar .dashboard-etiqueta {
    font-size: 0.6rem;
}

.admin-con-sidebar .panel-seccion {
    padding: 12px;
}

.admin-con-sidebar .panel-titulo {
    font-size: 2rem;
    color: var(--gold-bright);
    text-align: center;
    letter-spacing: 0.5px;
}

.admin-con-sidebar .panel-subtitulo {
    text-align: center;
}

.admin-con-sidebar .panel-seccion-titulo {
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.admin-con-sidebar .dashboard-grid {
    gap: 8px;
}

.admin-con-sidebar .dash-ingreso-numero {
    font-size: 1.7rem;
}

.admin-con-sidebar .dash-ingreso-card {
    padding: 14px;
}

.admin-con-sidebar .dash-kpi-mini {
    padding: 10px;
}

.admin-con-sidebar .dash-kpi-mini-numero {
    font-size: 1.3rem;
}

.admin-con-sidebar .admin-tabla {
    font-size: 0.8rem;
}

    .admin-con-sidebar .admin-tabla th,
    .admin-con-sidebar .admin-tabla td {
        padding: 8px 10px;
    }

/* ================================================================
   Interruptores (toggle switches), estilo "Configuración de Windows",
   para reemplazar los botones de activar/desactivar del Admin.
   ================================================================ */
.admin-toggle-form {
    display: inline-flex;
}

.admin-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    cursor: pointer;
}

    .admin-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.admin-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

    .admin-toggle-slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        background-color: #fff;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }

.admin-toggle input:checked + .admin-toggle-slider {
    background-color: var(--gold-standard);
}

    .admin-toggle input:checked + .admin-toggle-slider::before {
        transform: translateX(18px);
    }

/* ================================================================
   Anunciantes (Admin) — tarjetas apiladas en vez de tabla ancha, para
   que no se pierda info al no entrar todo en una sola fila.
   ================================================================ */
.admin-anunciante-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-anunciante-card {
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
}

.admin-anunciante-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-anunciante-nombre-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-anunciante-nombre {
    font-family: 'Poppins', var(--font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gold-standard);
    text-decoration: none;
}

    .admin-anunciante-nombre:hover {
        color: var(--gold-bright);
    }

.admin-anunciante-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-anunciante-separador {
    border: none;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    margin: 10px 0;
}

.admin-anunciante-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

    .admin-anunciante-fila:last-child {
        margin-bottom: 0;
    }

.admin-anunciante-etiqueta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--silver-dark);
    min-width: 140px;
}

.admin-anunciante-fila-peligro {
    padding-top: 8px;
    border-top: 1px dashed rgba(239, 68, 68, 0.2);
}

.admin-pagos-filtro-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.admin-paginador-link {
    color: var(--gold-standard);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

    .admin-paginador-link:hover {
        color: var(--gold-bright);
    }

.admin-paginador-actual {
    color: var(--silver-dark);
    font-size: 0.8rem;
}

.admin-buscador-barra {
    margin-bottom: 16px;
}

    .admin-buscador-barra form {
        display: flex;
        gap: 8px;
        max-width: 340px;
    }

.admin-badge-bloqueado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ef4444;
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Tarjetas de Espacios Publicitarios más compactas (a pedido: eran muy
   grandes para nombre + foto + botón). La foto va full-bleed, fuera del
   área con padding (mismo criterio que se usó para arreglar el hueco de las
   tarjetas del blog) — antes el padding de la tarjeta dejaba un margen
   visible alrededor de la foto en vez de que ocupara todo el ancho. */
.espacio-card-compacta {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.espacio-card-imagen {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.espacio-card-cuerpo {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.espacio-card-titulo {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gold-standard);
    margin-bottom: 4px;
}

.espacio-card-descripcion {
    font-size: 0.78rem;
    margin-bottom: 0;
}

.espacio-categoria-titulo {
    font-size: 1.15rem !important;
    color: var(--gold-bright) !important;
}

.admin-blog-miniatura {
    width: 70px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Botón de subir archivo rediseñado (a pedido), en todo el sitio — reemplaza
   el control nativo feo del navegador por uno acorde al estilo dorado. */
.archivo-elegante-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--noir-elevated);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 6px;
}

.archivo-elegante-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.archivo-elegante-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    color: #1a1200;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .archivo-elegante-boton:hover {
        filter: brightness(1.1);
    }

.archivo-elegante-texto {
    font-size: 0.78rem;
    color: var(--silver-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

    .archivo-elegante-texto.archivo-elegido {
        color: #4ade80;
        font-weight: 600;
    }

/* Honeypot anti-spam: escondido para personas reales (con CSS, no
   display:none, que algunos bots ya saben ignorar), pero un bot que rellena
   el HTML automático sí lo completa, delatándose. */
.campo-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Buscador global del panel de Admin (a pedido). */
.admin-busqueda-global-wrap {
    position: relative;
    padding: 0 14px 12px 14px;
}

.admin-busqueda-global-input {
    width: 100%;
    background: var(--noir-elevated);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    padding: 7px 10px;
    color: #fff;
    font-size: 0.78rem;
    font-family: 'Poppins', var(--font-sans);
}

    .admin-busqueda-global-input:focus {
        outline: none;
        border-color: var(--gold-standard);
    }

.admin-busqueda-global-resultados {
    display: none;
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% - 6px);
    z-index: 600;
    background: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

    .admin-busqueda-global-resultados.activo {
        display: block;
    }

.admin-busqueda-global-grupo {
    padding: 6px 10px 2px 10px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold-standard);
    font-weight: 700;
}

.admin-busqueda-global-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.78rem;
    color: var(--silver-standard);
    text-decoration: none;
}

    .admin-busqueda-global-item:hover {
        background: rgba(212, 175, 55, 0.08);
        color: #fff;
    }

    .admin-busqueda-global-item i {
        color: var(--gold-standard);
        flex-shrink: 0;
    }

.admin-busqueda-global-vacio {
    padding: 10px;
    font-size: 0.78rem;
    color: var(--silver-dark);
}

/* Banner de aviso de cookies (a pedido). */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    background: var(--noir-deep);
    border-top: 1px solid rgba(212, 175, 55, 0.4);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
}

.cookie-banner-texto {
    color: var(--silver-standard);
    font-size: 0.82rem;
    margin: 0;
    max-width: 700px;
}

    .cookie-banner-texto a {
        color: var(--gold-standard);
    }

.btn-cookie-aceptar {
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    color: #1a1200;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
}

.cookie-banner-acciones {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn-cookie-rechazar {
    background: none;
    color: var(--silver-standard);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .btn-cookie-rechazar:hover {
        border-color: rgba(255, 255, 255, 0.5);
        color: #fff;
    }

.dash-plan-lista {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--silver-standard);
}

    .dash-plan-lista strong {
        color: var(--gold-standard);
    }

/* Mejoras visuales en Login/Registro (a pedido). */
.auth-logo {
    display: block;
    height: 42px;
    margin: 0 auto 16px auto;
}

.auth-input-icono {
    position: relative;
    display: flex;
    align-items: center;
}

    .auth-input-icono i:first-child {
        position: absolute;
        left: 12px;
        color: var(--gold-standard);
        font-size: 0.9rem;
        pointer-events: none;
    }

    .auth-input-icono .auth-input {
        padding-left: 36px;
        padding-right: 36px;
    }

.auth-toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 2;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--silver-dark);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-toggle-password:hover {
        color: var(--gold-standard);
    }

/* ==========================================================================
   PÁGINA "ANÚNCIATE" (rediseño) — planes en tarjetas comparables, con VIP
   destacada como la opción principal. Sin precios fijos a propósito: el
   cobro sigue siendo 100% manual por WhatsApp (igual que en Pagos del
   Admin), así que cada tarjeta cotiza en vez de mostrar un monto.
   ========================================================================== */
.anunciate-hero {
    background:
        radial-gradient(ellipse at top, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--noir-deep) 0%, var(--noir-card) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.anunciate-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-standard);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.anunciate-hero-titulo {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    color: #fff;
    margin-bottom: 16px;
}

    .anunciate-hero-titulo span {
        color: var(--gold-standard);
        font-style: italic;
    }

.anunciate-hero-subtitulo {
    color: var(--silver-standard);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto 28px auto;
    line-height: 1.6;
}

.planes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .planes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .planes-grid {
        grid-template-columns: 1fr;
    }
}

.plan-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--noir-card) 0%, var(--noir-deep) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 28px 22px 22px 22px;
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    .plan-card:hover {
        transform: translateY(-4px);
        border-color: rgba(212, 175, 55, 0.5);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    }

/* La tarjeta VIP es la "firma" visual de la página: más alta, borde doble
   grosor con brillo dorado, para que el ojo aterrice ahí primero — es el
   plan que el sitio quiere vender más. */
.plan-card--destacado {
    border: 1.5px solid var(--gold-standard);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15), 0 12px 32px rgba(212, 175, 55, 0.12);
    transform: scale(1.03);
}

    .plan-card--destacado:hover {
        transform: scale(1.03) translateY(-4px);
    }

@media (max-width: 992px) {
    .plan-card--destacado {
        transform: none;
    }

        .plan-card--destacado:hover {
            transform: translateY(-4px);
        }
}

.plan-card-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
    color: #1a1200;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.35);
}

.plan-card-header {
    text-align: center;
    margin-bottom: 18px;
}

.plan-card-icono {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

    .plan-card-icono--silver {
        background: linear-gradient(135deg, #6b6b6b, var(--silver-standard));
        color: #1a1a1a;
    }

    .plan-card-icono--masajista {
        background: linear-gradient(135deg, #7a5c99, #c9a9e0);
        color: #1a0d26;
    }

    .plan-card-icono--gold {
        background: linear-gradient(135deg, var(--gold-dark), var(--gold-standard));
        color: #1a1200;
    }

    .plan-card-icono--vip {
        background: linear-gradient(135deg, var(--gold-matte), var(--gold-bright));
        color: #1a1200;
        box-shadow: 0 0 16px rgba(212, 175, 55, 0.4);
    }

.plan-card-nombre {
    font-family: var(--font-serif);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.plan-card-tagline {
    color: var(--silver-dark);
    font-size: 0.82rem;
    margin: 0;
}

.plan-card-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 22px 0;
    flex-grow: 1;
}

    .plan-card-lista li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        color: var(--silver-standard);
        font-size: 0.86rem;
        padding: 7px 0;
    }

        .plan-card-lista li i {
            color: var(--gold-standard);
            margin-top: 2px;
            flex-shrink: 0;
            font-size: 0.85rem;
        }

.plan-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--gold-standard);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 10px;
    padding: 11px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .plan-card-cta:hover {
        background-color: var(--gold-standard);
        color: #1a1200;
    }

.plan-card-cta--destacado {
    background: linear-gradient(135deg, var(--gold-matte), var(--gold-standard));
    color: #1a1200;
    border: none;
}

    .plan-card-cta--destacado:hover {
        background: linear-gradient(135deg, var(--gold-standard), var(--gold-bright));
        color: #1a1200;
    }

/* Banner del adicional "Destacado" */
.destacado-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(90deg, var(--gold-subtle) 0%, transparent 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 14px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

.destacado-banner-icono {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.destacado-banner-texto {
    flex: 1;
    min-width: 220px;
}

    .destacado-banner-texto h5 {
        color: #fff;
        font-family: var(--font-serif);
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

        .destacado-banner-texto h5 span {
            color: var(--silver-dark);
            font-size: 0.78rem;
            font-weight: 400;
            font-family: var(--font-sans);
        }

    .destacado-banner-texto p {
        color: var(--silver-standard);
        font-size: 0.86rem;
        margin: 0;
    }

/* Condiciones de publicación en 2 columnas en desktop, para que no quede una
   lista larguísima de un solo carril. */
.condiciones-lista--dos-columnas {
    max-width: 900px;
}

@media (min-width: 768px) {
    .condiciones-lista--dos-columnas {
        column-count: 2;
        column-gap: 32px;
    }

        .condiciones-lista--dos-columnas li {
            break-inside: avoid;
        }
}

/* Sección "¿Tienes un negocio?" al final de Anúnciate — las 5 categorías de
   Espacios Publicitarios, como chips/íconos, sin mezclarse con las tarjetas
   de plan de arriba (que son para anunciantes, no para negocios). */
.espacios-categorias {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.espacios-categoria-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 110px;
    color: var(--silver-standard);
    font-size: 0.8rem;
    text-align: center;
}

.espacios-categoria-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--noir-card);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.espacios-categoria-item:hover .espacios-categoria-icono {
    border-color: var(--gold-standard);
    transform: translateY(-3px);
}

/* Feed de "Actividad reciente" del Dashboard del Admin */
.dash-actividad-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-actividad-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

    .dash-actividad-item:last-child {
        border-bottom: none;
    }

.dash-actividad-icono {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.dash-actividad-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .dash-actividad-texto span:first-child {
        color: #fff;
        font-size: 0.87rem;
    }

.dash-actividad-detalle {
    color: var(--silver-dark);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-actividad-fecha {
    color: var(--silver-dark);
    font-size: 0.76rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Centro de notificaciones (página propia del panel de la anunciante) */
.notif-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--noir-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
}

.notif-item--no-leida {
    border-color: rgba(212, 175, 55, 0.4);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.06), transparent);
}

.notif-item-icono {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-standard);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-item-texto {
    flex: 1;
    min-width: 0;
}

    .notif-item-texto p {
        color: #fff;
        margin: 0 0 4px 0;
        font-size: 0.9rem;
    }

.notif-item-fecha {
    color: var(--silver-dark);
    font-size: 0.76rem;
}

.notif-item-marcar {
    background: none;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .notif-item-marcar:hover {
        background-color: var(--gold-standard);
        color: #1a1200;
    }

/* Campanita del navbar (todas las páginas) */
.navbar-campana {
    position: relative;
    color: var(--silver-standard);
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

    .navbar-campana:hover {
        color: var(--gold-standard);
    }

.navbar-campana-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #d64545;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Buscador avanzado (Views/Home/Buscar.cshtml) */
.btn-filtros-avanzados-toggle {
    background: none;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold-standard);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-filtros-avanzados-toggle:hover {
        background-color: var(--gold-standard);
        color: #1a1200;
    }

.filtros-avanzados-fila {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.filtros-avanzados-checks {
    padding-bottom: 4px;
}

.filtro-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--silver-standard);
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--noir-elevated);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 7px 14px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .filtro-check i {
        color: var(--silver-dark);
    }

    .filtro-check:has(input:checked) {
        border-color: var(--gold-standard);
        color: var(--gold-standard);
    }

        .filtro-check:has(input:checked) i {
            color: var(--gold-standard);
        }

    .filtro-check input {
        display: none;
    }

/* ==========================================================================
   PANEL DE ADMIN EN CELULAR (a pedido) — antes no había NINGÚN ajuste
   específico para pantallas chicas acá. El overflow-x:hidden del body
   evita que la página entera se corra hacia el costado, pero sin esto,
   varios elementos (tablas con texto que no se corta, campos con ancho fijo
   en píxeles, filas de formulario que no se acomodan) quedaban recortados
   e ILEGIBLES en vez de mostrarse bien — se veía "raro" en vez de roto,
   pero la información dejaba de estar disponible igual. Esto los hace
   envolver y apilarse en columna, para que todo se pueda leer completo.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Tablas: que el texto envuelva en vez de forzar una sola línea gigante
       que obliga a la tabla a ser más ancha que la pantalla. */
    .admin-tabla {
        white-space: normal;
    }

        .admin-tabla th, .admin-tabla td {
            padding: 8px 6px;
            font-size: 0.78rem;
        }

    /* Cualquier campo de formulario del Admin con un ancho fijo puesto en
       píxeles (así se armaron varias filas, como los formularios de pago de
       Espacios Publicitarios) — en celular pasa a ocupar el ancho
       disponible en vez de mantener ese tamaño fijo, que es lo que forzaba
       el desborde. */
    .admin-con-sidebar input[style*="width"],
    .admin-con-sidebar select[style*="width"],
    .admin-con-sidebar .input-group[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Filas de formulario en línea (pago de Espacios, edición de Ciudades/
       Categorías, etc.) — que se apilen en columna en vez de intentar caber
       todas en una sola fila horizontal. */
    .admin-con-sidebar form.d-inline-flex,
    .admin-con-sidebar .d-inline-flex {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
    }

        .admin-con-sidebar form.d-inline-flex > *,
        .admin-con-sidebar .d-inline-flex > * {
            width: 100%;
        }

    /* El sidebar del Admin no debe quedar más angosto de lo necesario ni
       empujar contenido — se confirma que el contenido principal ocupe todo
       el ancho disponible debajo de él en la vista apilada de celular. */
    .admin-con-sidebar {
        padding: 0 10px;
    }

        .admin-con-sidebar .panel-seccion {
            padding: 14px 10px;
        }

    /* Botones de acción (Guardar/Eliminar/Registrar pago, etc.) — que se
       vean de ancho completo y apilados, no achicados tratando de caber
       varios en una fila que no entra. */
    .admin-con-sidebar .admin-btn {
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }
}

/* ==========================================================================
   TABLAS DEL ADMIN EN CELULAR — de columnas lado a lado a tarjetas apiladas
   (a pedido: las columnas no entran en una pantalla de celular sin importar
   cuánto envuelva el texto, así que en vez de eso cada FILA se convierte en
   su propia tarjeta, con el nombre de cada dato al lado de su valor). Se usa
   la clase específica de cada tabla (admin-tabla-auditoria, etc.) para
   poner la etiqueta correcta en cada columna vía nth-child — si el ORDEN de
   las columnas de alguna tabla cambia en el futuro, hay que actualizar el
   nth-child correspondiente acá también.
   ========================================================================== */
@media (max-width: 767.98px) {
    .admin-tabla thead {
        display: none;
    }

    .admin-tabla, .admin-tabla tbody, .admin-tabla tr {
        display: block;
        width: 100%;
    }

    .admin-tabla tr {
        margin-bottom: 12px;
        border: 1px solid rgba(212, 175, 55, 0.25);
        border-radius: 10px;
        padding: 4px 10px;
        background: var(--noir-card);
    }

    .admin-tabla td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: right;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

        .admin-tabla td:last-child {
            border-bottom: none;
        }

        .admin-tabla td input, .admin-tabla td select {
            text-align: right;
        }

        /* La etiqueta ("Nombre:", "Fecha:", etc.) — dorada, a la izquierda,
           antes del valor real de la celda. */
        .admin-tabla td::before {
            content: attr(data-th);
            color: var(--gold-standard);
            font-weight: 600;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            flex-shrink: 0;
            text-align: left;
        }

    /* Filas que son solo una franja de acciones ocupando toda la fila
       (colspan) — ya se apilan gracias al fix anterior de d-inline-flex; acá
       solo se les saca el borde punteado para que no se vean como una
       celda de dato más. */
    .admin-tabla td[colspan] {
        display: block;
        text-align: left;
    }

        .admin-tabla td[colspan]::before {
            content: none;
        }

    /* --- Etiquetas por tabla, según el orden real de sus columnas --- */
    .admin-tabla-auditoria td:nth-of-type(1)::before { content: "Fecha"; }
    .admin-tabla-auditoria td:nth-of-type(2)::before { content: "Admin"; }
    .admin-tabla-auditoria td:nth-of-type(3)::before { content: "Acción"; }
    .admin-tabla-auditoria td:nth-of-type(4)::before { content: "Detalle"; }

    .admin-tabla-blog td:nth-of-type(1)::before { content: "Portada"; }
    .admin-tabla-blog td:nth-of-type(2)::before { content: "Título"; }
    .admin-tabla-blog td:nth-of-type(3)::before { content: "Categoría"; }
    .admin-tabla-blog td:nth-of-type(4)::before { content: "Fecha"; }
    .admin-tabla-blog td:nth-of-type(5)::before { content: "Estado"; }

    .admin-tabla-categorias td:nth-of-type(1)::before { content: "Nombre"; }
    .admin-tabla-categorias td:nth-of-type(2)::before { content: "Slug"; }
    .admin-tabla-categorias td:nth-of-type(3)::before { content: "Estado"; }

    .admin-tabla-ciudades td:nth-of-type(1)::before { content: "Nombre"; }
    .admin-tabla-ciudades td:nth-of-type(2)::before { content: "URL"; }
    .admin-tabla-ciudades td:nth-of-type(3)::before { content: "Estado"; }

    .admin-tabla-espacios td:nth-of-type(1)::before { content: "Nombre"; }
    .admin-tabla-espacios td:nth-of-type(2)::before { content: "Teléfono"; }
    .admin-tabla-espacios td:nth-of-type(3)::before { content: "Ciudad"; }
    .admin-tabla-espacios td:nth-of-type(4)::before { content: "Vence"; }
    .admin-tabla-espacios td:nth-of-type(5)::before { content: "Estado"; }

    .admin-tabla-dashboard td:nth-of-type(1)::before { content: "Anuncio"; }
    .admin-tabla-dashboard td:nth-of-type(2)::before { content: "Plan"; }
    .admin-tabla-dashboard td:nth-of-type(3)::before { content: "Monto"; }
    .admin-tabla-dashboard td:nth-of-type(4)::before { content: "Fecha"; }

    .admin-tabla-faq td:nth-of-type(1)::before { content: "Orden"; }
    .admin-tabla-faq td:nth-of-type(2)::before { content: "Pregunta"; }
    .admin-tabla-faq td:nth-of-type(3)::before { content: "Respuesta"; }
    .admin-tabla-faq td:nth-of-type(4)::before { content: "Estado"; }

    .admin-tabla-pagos td:nth-of-type(1)::before { content: "Anuncio"; }
    .admin-tabla-pagos td:nth-of-type(2)::before { content: "Plan"; }
    .admin-tabla-pagos td:nth-of-type(3)::before { content: "Días"; }
    .admin-tabla-pagos td:nth-of-type(4)::before { content: "Monto"; }
    .admin-tabla-pagos td:nth-of-type(5)::before { content: "Fecha"; }

    .admin-tabla-planes td:nth-of-type(1)::before { content: "Plan"; }
    .admin-tabla-planes td:nth-of-type(2)::before { content: "Fotos máx."; }
    .admin-tabla-planes td:nth-of-type(3)::before { content: "Videos máx."; }

    .admin-tabla-usuarios td:nth-of-type(1)::before { content: "Nombre"; }
    .admin-tabla-usuarios td:nth-of-type(2)::before { content: "Correo"; }
    .admin-tabla-usuarios td:nth-of-type(3)::before { content: "Rol"; }
    .admin-tabla-usuarios td:nth-of-type(4)::before { content: "Registrado"; }
    .admin-tabla-usuarios td:nth-of-type(5)::before { content: "Anuncio"; }
}

/* (Se sacó .archivo-elegir-btn/.archivo-elegir-input/.archivo-elegir-nombre:
   ya existía un sistema global para esto en site.js -> mejorarArchivo(),
   solo hacía falta arreglar el texto fijo "Elegir foto" ahí — ver
   data-etiqueta más abajo, en la sección "archivo-elegante".) */

/* ==========================================================================
   PANEL DE LA ANUNCIANTE EN CELULAR (a pedido) — mismo criterio que ya se
   aplicó al panel de Admin: sin esto, algunos elementos (la fila del botón
   "Elegir foto/video" + nombre de archivo + botón de subir, todos en una
   sola línea) podían terminar más anchos que la pantalla, forzando que se
   viera desbordado o con algo (como una foto de la galería) recortado de
   forma rara en vez de mostrarse bien.
   ========================================================================== */
@media (max-width: 575.98px) {
    .archivo-elegante-boton {
        width: 100%;
        justify-content: center;
    }

    .archivo-elegante-texto {
        width: 100%;
        text-align: center;
    }

    .panel-upload-fila-controles .btn-auth-submit {
        width: 100%;
    }

    /* Galería de fotos/videos del panel: tarjetas un poco más chicas para
       que entren cómodas 2-3 por fila en vez de forzar el ancho. */
    .panel-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }

    /* Fila de datos (edad, peso, altura, medidas) — que se acomoden de a 2
       por fila en vez de 3 apretadas, para que los números no queden cortados. */
    .panel-page .col-4.col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ==========================================================================
   PERFIL PÚBLICO EN CELULAR (a pedido: embellecer, más ordenado, buena
   visualización) — refuerzo puntual sobre lo que ya existía, para pantallas
   muy angostas donde 3 botones en fila o el grid de datos podían apretarse.
   ========================================================================== */
@media (max-width: 400px) {
    .perfil-acciones-moderno {
        flex-wrap: wrap;
    }

    .perfil-datos-grid-moderno {
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
    }
}