@import url("../base/variables.css");
/* styles.css */
body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    background-color: #000;
}
/*      Cabezera     */

.header {
    display: flex;
    align-items: center;
    background-color: #000;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 10000;
    gap: 8px;
    overflow: visible;
}

@media screen and (min-width: 480px) {
    .header {
        padding: 8px 14px;
        gap: 12px;
    }
}

@media screen and (min-width: 766px) {
    .header {
        padding: 6px 16px;
        gap: 16px;
    }
}

.textCenter {
    margin: 0px 0px;
    color: whitesmoke;
    text-align: center;
}

.textLeft {
    margin: 0;
    color: whitesmoke;
    text-align: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.menu-button {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Medía 26x28 — el icono y nada más. Abre el menú lateral, así que fallarlo
       obliga a apuntar dos veces en la barra más estrecha de la app. */
    min-width: var(--tap-min, 44px);
    min-height: var(--tap-min, 44px);
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}

@media screen and (min-width: 766px) {
    .menu-button {
        display: none;
    }
}

.logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo img {
    height: 28px;
    margin-left: 4px;
}

@media screen and (min-width: 480px) {
    .logo img {
        height: 30px;
        margin-left: 8px;
    }
}

@media screen and (min-width: 766px) {
    .logo img {
        height: 28px;
        margin-left: 0;
    }
}

/* Home Link */
.home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min, 44px);
    min-height: var(--tap-min, 44px);
    margin-left: 4px;
    -webkit-tap-highlight-color: transparent;
}

.home-link svg {
    fill: var(--text-white);
    width: 32px;
    height: 32px;
}

@media screen and (min-width: 480px) {
    .home-link svg {
        width: 32px;
        height: 32px;
    }
}

/* Nav Links */
.nav-links {
    display: none;
    flex-shrink: 0;
}

@media screen and (min-width: 766px) {
    .nav-links {
        display: block;
    }
}

.nav-links ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    display: flex;
    align-items: center;
    color: var(--text-white);
    text-decoration: none;
    padding: 4px 0;
    position: relative;
}

.nav-links .icons svg {
    fill: var(--text-white);
    height: 22px;
    width: 22px;
}

.nav-links .name-tag {
    display: none;
    margin-left: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media screen and (min-width: 900px) {
    .nav-links .name-tag {
        display: inline;
    }
}

.nav-links a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    border-radius: 2px;
    transition: width 0.2s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.hidden-p {
    display: none;
}

@media screen and (min-width: 1024px) {
    .hidden-p {
        display: block;
    }
}

/* Search Container */
.search-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 6px;
    min-width: 0;
    max-width: 400px;
    z-index: 1;
}

@media screen and (min-width: 766px) {
    .search-container {
        max-width: 300px;
    }
}

@media screen and (min-width: 1024px) {
    .search-container {
        max-width: 350px;
    }
}

.search-input {
    background: transparent;
    border: none;
    color: #111;
    padding: 2px 6px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    outline: none;
    min-width: 0;
    caret-color: #f50511;
}

@media screen and (min-width: 480px) {
    .search-input {
        padding: 8px 10px;
        font-size: 17px;
    }
}

.search-input::placeholder {
    color: #555;
    transition: opacity 0.2s;
}

.search-input:focus::placeholder {
    opacity: 0.4;
}

@keyframes caretPulse {
    0%, 100% { caret-color: #f50511; }
    50%       { caret-color: transparent; }
}

.search-input:focus {
    animation: caretPulse 0.75s step-end infinite;
}

.search-button {
    background: transparent;
    border: none;
    color: #1d1c1c;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 14px;
    flex-shrink: 0;
    /* La lupa medía 30x28 dentro de la píldora de búsqueda. La píldora tiene
       más alto que eso, así que estirar el botón a todo su alto no la agranda:
       el icono se queda centrado y deja de haber franja muerta encima y
       debajo. Es también el botón que LIMPIA la búsqueda (.fa-times). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: var(--tap-min-compact, 40px);
    -webkit-tap-highlight-color: transparent;
}

.search-button .fa-times {
    color: #f50511;
}

/* Wrapper del perfil — flex item a la derecha del header */
#profile-section {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-self: flex-end;
    z-index: 1000;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* Reserva de ancho solo mientras ProfileSection.render() no terminó —
   evita que el buscador (flex-grow:1) salte al aparecer el avatar/menú */
#profile-section:not(.pb-ready) {
    min-width: 40px;
}

#profile-section.pb-ready {
    opacity: 1;
}

/* Profile: ocupa el alto total de #profile-section para anclar el dropdown */
.profile {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    margin: 0;
    cursor: pointer;
    z-index: 1000 !important;
    background: transparent;
    overflow: visible;
    height: 40px;
    width: auto !important;
    top: auto !important;
    right: auto !important;
    border: none !important;
    border-radius: 0 !important;
    animation: none !important;
}

@media screen and (min-width: 480px) {
    .profile {
        height: 44px;
    }
}

/* Anular el hover problemático del header.css */
.profile:hover {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    animation: none !important;
}

.profile .avatar,
.profile .img-user {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}

@media screen and (min-width: 480px) {
    .profile .avatar,
    .profile .img-user {
        width: 32px !important;
        height: 32px !important;
    }
}

@media screen and (min-width: 766px) {
    .profile .avatar,
    .profile .img-user {
        width: 30px !important;
        height: 30px !important;
    }
}

.profile-selected {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.profile-selected .avatar,
.profile-selected .img-user {
    margin: 4px 8px;
}

.profile:hover .profile-selected {
    border-bottom: none !important;
}

.profile-selected .name-user {
    display: none;
    color: #fff;
    font-size: 14px;
}

@media screen and (min-width: 766px) {
    .profile-selected .name-user {
        display: inline;
    }
}

.profile:hover .name-user {
    display: inline;
}

.profile-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    max-width: calc(100vw - 20px);
    background: var(--bg-dark-gray);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 6px 10px 10px 6px;
    z-index: 1000 !important;
    margin: 0 !important;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Perfil guest - menu por hover */
.profile:not(.ai-theme-claude):not(.ai-theme-grok):not(.ai-theme-gold):not(.ai-theme-dark):hover .profile-nav {
    display: block;
}

/* Perfil guest - asegurar posicionamiento correcto */
.profile:not(.ai-theme-claude):not(.ai-theme-grok):not(.ai-theme-gold):not(.ai-theme-dark) {
    position: relative;
    z-index: 100;
}

.profile-nav-profiles p {
    color: #fff;
    margin-left: 5px;
    font-size: 14px;
}

.profile-nav-profiles li {
    list-style: none;
    display: flex;
    align-items: center;
}

.register-btn {
    background-color: var(--primary-red);
    color: #fff;
    padding: 6px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.login-section {
    font-size: 16px;
    color: var(--text-gray-light);
    margin-bottom: 10px;
}

.login-section a {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-gold);
    text-decoration: none;
}

.login-section a:hover {
    text-decoration: underline;
}

.category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    border-radius: 8px;
    width: 200px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-top: 5px;
}

.category-dropdown.show {
    display: block;
}

.category-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.2s;
}

.category-item:hover {
    background-color: #f50511;
}

.category-item i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    color: #fff;
}


.user-menu-button {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}

/* Encabezado de contenido (Título categoría + Toggle) */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px; /* Alineado*/
    margin-top: 4px; /* Reducido para acercar al location indicator */
    margin-bottom: 2px;
}

/* Ajuste de Footer para coincidir con Index */
.footer .list-icons {
    margin: 0 !important;
    padding: 0 !important;
}

/* Container de grupos - reducir margen superior */
.container {
    margin-top: 0;
    padding-top: 4px;
}

/* Los dos selectores (grupo y categoría) llevan `width:100%` del componente
   compartido `cmpSelect.css`, así que crecían sin techo: medido, la píldora
   pasaba de 358px a 390 de viewport a **1408px** a 1440, con el texto centrado
   y el resto vacío. Al lado, la barra de búsqueda se queda en 350 y el
   indicador de ubicación en 258, de modo que los tres elementos de la misma
   franja no guardaban ninguna proporción entre sí.

   Acotados y centrados dejan de dominar la pantalla y quedan en relación con
   la rejilla de resultados que va justo debajo. Se limita el contenedor, no el
   selector, para que ambos sigan compartiendo exactamente el mismo ancho. */
@media screen and (min-width: 768px) {
    .container:has(> .custom-dropdown) {
        max-width: 720px;
        margin-inline: auto;
        /* El resplandor que trae `.container` de `cmpSelect.css` estaba pensado
           para una franja de ancho completo, donde solo se percibe como una
           línea tenue arriba y abajo. Acotado pasa a dibujar los cuatro lados y
           aparece un marco que nadie diseñó, además pegado a los selectores por
           arriba. */
        box-shadow: none;
    }
}

/* Location Indicator en buscador - alineado con header */
#location-container {
    padding: 6px 6px 4px 6px;
    margin: 8px 0 4px 0;
    text-align: left;
    min-height: 24px;
}

@media screen and (min-width: 360px) {
    #location-container {
        padding: 6px 8px 4px 8px;
    }
}

@media screen and (min-width: 480px) {
    #location-container {
        padding: 6px 14px 4px 14px;
    }
}

@media screen and (min-width: 766px) {
    #location-container {
        padding: 6px 12px 4px 12px;
    }
}

/* ── Top 10 Boost Section ─────────────────────────────────────── */
#top10-section {
    margin-bottom: 4px;
}

.top10-header {
    padding: 4px 8px 2px 8px;
    color: #f50511;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.top10-header i {
    margin-right: 4px;
}

.top10-divider {
    height: 1px;
    background: linear-gradient(to right, rgba(245, 5, 17, 0.4), transparent);
    margin: 6px 8px 6px 8px;
}

/* ── Filter Bar ─────────────────────────────────────────────────
   Posición: debajo del header, encima del selector de grupos.
   Estado inactivo: chips atenuados (sin selección).
   Estado abierto: panel se expande en su lugar (inline, no popup).
   Estado activo: chip con borde/texto rojo intenso.
──────────────────────────────────────────────────────────────── */
.filter-bar {
    background: #000;
    padding: 8px 12px 0;
    width: 100%;
    box-sizing: border-box;
}

.filter-chips-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Chip — inactivo (default) */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #666;
    border-radius: 20px;
    color: #aaa;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    padding: 5px 14px;
    /* Medía 28px de alto. Los dos chips viven solos en su fila, así que subir
       al mínimo compacto no aprieta nada: solo deja de fallar el toque. */
    min-height: var(--tap-min-compact, 40px);
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    letter-spacing: 0.01em;
}

.filter-chip:hover {
    border-color: #999;
    color: #ddd;
    background: rgba(255, 255, 255, 0.08);
}

/* Chip — panel abierto (esperando selección) */
.filter-chip.open {
    border-color: rgba(245, 5, 17, 0.45);
    color: #bbb;
    background: rgba(245, 5, 17, 0.04);
}

/* Chip — filtro activo (rango seleccionado) */
.filter-chip.active {
    border-color: #f50511;
    color: #f50511;
    background: rgba(245, 5, 17, 0.12);
    font-weight: 600;
    box-shadow: 0 0 8px rgba(245, 5, 17, 0.2);
}

.filter-chip.active:hover {
    background: rgba(245, 5, 17, 0.18);
    box-shadow: 0 0 12px rgba(245, 5, 17, 0.3);
}

/* Separador y valor — ocultos hasta que el chip esté activo */
.filter-chip-sep,
.filter-chip-value {
    display: none;
}

.filter-chip.active .filter-chip-sep {
    display: inline;
    margin: 0 1px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

.filter-chip.active .filter-chip-label {
    font-weight: 600;
    color: #fff;
}

.filter-chip.active .filter-chip-value {
    display: inline;
    font-weight: 700;
    color: #f50511;
}

/* Flecha — rota cuando el panel está abierto */
.filter-chip-arrow {
    font-size: 10px;
    display: inline-block;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.filter-chip.open .filter-chip-arrow,
.filter-chip.active .filter-chip-arrow {
    opacity: 1;
}

.filter-chip.open .filter-chip-arrow {
    transform: rotate(180deg);
}

/* Botón limpiar — mismo diseño que los chips inactivos */
.filter-clear[hidden] { display: none !important; }

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #666;
    border-radius: 20px;
    color: #aaa;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    padding: 5px 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    outline: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.filter-clear:hover {
    border-color: #f50511;
    color: #f50511;
    background: rgba(245, 5, 17, 0.08);
}

.filter-clear i {
    color: #f50511;
    font-size: 15px;
}

/* Ambos filtros activos: solo icono, más notorio, sin texto "Limpiar" */
.filter-clear.icon-only {
    gap: 0;
    padding: 6px;
    width: 32px;
    height: 32px;
    justify-content: center;
    border-color: rgba(245, 5, 17, 0.5);
    background: rgba(245, 5, 17, 0.1);
}

.filter-clear.icon-only i {
    font-size: 18px;
}

.filter-clear.icon-only .filter-clear-label {
    display: none;
}

/* Panel de opciones — colapso con max-height */
.filter-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.filter-panel.open {
    max-height: 100px;
    opacity: 1;
    pointer-events: auto;
}

/* Fila de opciones horizontales */
.filter-opts-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px 8px;
}

/* Animación de entrada para las opciones */
@keyframes optAppear {
    from { opacity: 0; transform: translateY(-6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.filter-panel.open .filter-opt {
    animation: optAppear 0.2s ease forwards;
}

.filter-panel.open .filter-opt:nth-child(1) { animation-delay: 0.00s; }
.filter-panel.open .filter-opt:nth-child(2) { animation-delay: 0.05s; }
.filter-panel.open .filter-opt:nth-child(3) { animation-delay: 0.10s; }
.filter-panel.open .filter-opt:nth-child(4) { animation-delay: 0.15s; }

/* Opción de rango — inactiva */
.filter-opt {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: #ccc;
    font-family: var(--font-primary);
    font-size: 12px;
    padding: 5px 14px;
    /* 27px de alto en una fila que envuelve: los rangos quedaban tan juntos en
       vertical que era fácil elegir el de al lado. El `gap: 8px` de
       `.filter-opts-row` mantiene la separación al crecer. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min-compact, 40px);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.filter-opt:hover {
    border-color: rgba(245, 5, 17, 0.6);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 6px rgba(245, 5, 17, 0.2);
}

/* Opción seleccionada */
.filter-opt.selected {
    border-color: #f50511;
    color: #fff;
    background: rgba(245, 5, 17, 0.18);
    font-weight: 600;
    box-shadow: 0 0 8px rgba(245, 5, 17, 0.3);
}

/* Fin del archivo */
/* Encabezado... */
.toggle-button {
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 9px;
    padding: 1px 1px;
    cursor: pointer;

    transition: background-color 0.3s;
    /* Medía 30x33: es el botón que cambia la densidad de la rejilla, y en móvil
       comparte fila con la barra de búsqueda. El icono se queda igual; lo que
       crece es el hueco alrededor. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min-compact, 40px);
    min-height: var(--tap-min-compact, 40px);
    -webkit-tap-highlight-color: transparent;
}

.toggle-button:hover {
    background-color: #f1e9e9;
}

.toggle-button .bar {
    fill: #000000;
}

.grid-container {
    display: grid;
    gap: 10px 1px; /* Vertical: 10px, Horizontal: 1px (Mínimo absoluto) */
    padding: 8px 1px; /* Padding reducido en extremos horizontales */
    width: 100%;
    box-sizing: border-box;
}

.grid-item {
    display: block;
    width: 100%;
}

.grid-item .enlace {
    display: block;
    text-decoration: none;
}

/* Estilos de tarjeta consistentes con film.css */
/* Estilos de tarjeta consistentes con film.css */
.grid-item .card {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    border-radius: 8px; /* Aumentado a 8px (más redondeado) */
    border: 2px solid transparent;
    padding: 0;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.2s ease-out;
    background-color: var(--bg-black);
    display: flex !important;
    flex-direction: column;
    box-shadow: rgb(0 0 0) 0px 16px 10px -10px;
    overflow: hidden;
}

/* Efecto hover de Disney+ */
.grid-item .card:hover {
    overflow: visible;
    z-index: 100;
    transform: scale(1.05);
    box-shadow: rgb(0 0 0 / 90%) 0px 30px 20px -10px;
}

/* Borde blanco al hacer hover */
.grid-item .card::before {
    border-radius: 8px; /* Aumentado a 8px */
    border: 2px solid rgba(255, 255, 255, 0);
    inset: 0px;
    content: "";
    position: absolute;
    transition: border 300ms ease-out 0s;
    z-index: 10;
    pointer-events: none;
}

.grid-item .card:hover::before {
    border: 2px solid var(--card-border-hover);
}

/* Imagen de la tarjeta */
.grid-item .card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 8px; /* Aumentado a 8px */
    border-top-right-radius: 8px; /* Aumentado a 8px */
}

/* Contenedor de detalles (debajo de la imagen) - ESPECÍFICO PARA GRID */
.grid-container .grid-item .food-card,
.grid-item .food-card {
    padding: 3px 4px 6px 4px !important; /* Reducido padding vertical */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 15%, #000 100%) !important;
    border-bottom-left-radius: 8px; /* Aumentado a 8px */
    border-bottom-right-radius: 8px; /* Aumentado a 8px */
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important; /* Pequeño gap entre filas */
    min-height: 45px !important; /* Reducido de 50px */
    max-height: 50px !important; /* Reducido de 60px */
    height: auto !important;
    overflow: hidden !important; /* Evita que el contenido desborde */
    box-sizing: border-box !important;
}

.grid-container .grid-item .row-card,
.grid-item .row-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 20px !important; /* Reducido de 22px */
    max-height: 22px !important; /* Altura máxima para cada fila */
    overflow: hidden !important; /* Evita desbordamiento vertical */
    box-sizing: border-box !important;
}

.grid-container .grid-item .nick-title,
.grid-item .nick-title,
.nick-title {
    display: block !important; /* Importante para que el ellipsis funcione en flex child en algunos browsers */
    flex: 1 !important;        /* Ocupa todo el espacio sobrante */
    min-width: 0 !important;   /* Crucial: permite que el elemento se encoja por debajo de su contenido */
    max-width: 100% !important; /* Asegura no desbordar */
    
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-white) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: capitalize !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

.grid-container .grid-item .age-info,
.grid-item .age-info {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important; /* Reducido de 3px */
    flex-shrink: 0 !important; /* No se encoge */
    white-space: nowrap !important; /* Evita saltos de línea */
}

.grid-container .grid-item .age-number,
.grid-item .age-number {
    font-size: 12px !important; /* Reducido de 13px */
    color: var(--text-white) !important;
    font-weight: 400 !important;
}

.grid-container .grid-item .age-label,
.grid-item .age-label {
    font-size: 11px !important; /* Reducido de 13px */
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
}

/* Estrellas de rating */
.grid-container .grid-item .rating-inline,
.grid-item .rating-inline {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important; /* Reducido de 4px */
    font-size: 11px !important; /* Reducido de 12px */
    color: var(--text-white) !important;
    flex-shrink: 0 !important; /* No se encoge */
    white-space: nowrap !important; /* Evita saltos de línea */
}

.grid-container .grid-item .rating-number,
.grid-item .rating-number {
    font-size: 11px !important; /* Reducido de 12px */
    color: var(--text-white) !important;
    font-weight: 400 !important;
}

.grid-container .grid-item .star-item-card,
.grid-item .star-item-card {
    position: relative !important;
    display: inline-block !important;
    width: 11px !important; /* Reducido de 12px */
    height: 11px !important; /* Reducido de 12px */
    font-size: 11px !important; /* Reducido de 12px */
    transform: translateY(-1px) !important; /* Ajustado de -2px */
    flex-shrink: 0 !important; /* No se encoge */
}

.grid-container .grid-item .star-empty-card,
.grid-item .star-empty-card {
    color: var(--text-muted) !important;
}

.grid-container .grid-item .star-fill-card,
.grid-item .star-fill-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    /* width: 0% !important;  <-- ELIMINADO: Deja que JS controle el ancho */
    z-index: 2 !important;
}

.grid-container .grid-item .star-fill-card i,
.grid-item .star-fill-card i {
    width: 11px !important; /* Ajustado de 12px */
    color: var(--accent-gold) !important;
    text-shadow: 0 0 3px rgba(255, 188, 17, 0.3) !important;
    display: block !important;
}

/* Estado (punto verde/rojo) */
.grid-container .grid-item .status-dot,
.grid-item .status-dot {
    font-size: 24px !important; /* Aumentado de 18px a 24px para mayor visibilidad */
    line-height: 1 !important;
    flex-shrink: 0 !important; /* No se encoge - IMPORTANTE para mantener visible */
    margin-left: 2px !important; /* Reducido de 4px */
}

.grid-item .status-active {
    color: var(--status-active);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.grid-item .status-inactive {
    color: var(--status-inactive);
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

.red-icon {
    color: #f50505; /* Color rojo */
}

.margin-left{
    margin-left: 3px;
}

.margin-right{
    margin-right: 3px;
}

@media (max-width: 599px) {
    .toggle-button {
        display: block;
    }
}

@media (min-width: 600px) {
    .toggle-button {
        display: none;
    }

    .grid-item .info {
        font-size: 16px;
    }
}

@media (min-width: 900px) {
    .toggle-button {
        display: none;
    }

    .grid-item .info {
        font-size: 16px;
    }
}

/* ── Columnas de la rejilla ──────────────────────────────────────────────
   El botón de la barra alterna entre dos densidades. Antes las dos eran
   literalmente 2 y 3 columnas EN CUALQUIER ancho, así que en un monitor de
   1440px cada tarjeta se pintaba a 480x720: tres retratos gigantes por fila
   y tres resultados por pantalla. El botón que las alterna además se oculta a
   partir de 900px, con lo que en escritorio no había forma de compactarlas.

   Lo que el botón elige es la DENSIDAD (más aire / más resultados), no un
   número de columnas, así que ese número escala con el ancho disponible y la
   diferencia entre los dos modos se mantiene en una columna.

   ⚠️ Los cortes y el número de columnas están replicados en `PbImg.SIZES.grid2`
   y `.grid3` (`js/utils/imageUrl.js`), que es lo que le dice al navegador qué
   derivado descargar. Cambiar uno sin el otro no da ningún error: solo hace
   que se descarguen imágenes del tamaño equivocado — de más, o borrosas. */
.grid-container.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-container.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    .grid-container.two-columns  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-container.three-columns { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1100px) {
    .grid-container.two-columns  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-container.three-columns { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (min-width: 1500px) {
    .grid-container.two-columns  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-container.three-columns { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* El hueco horizontal es de 1px para exprimir el ancho del móvil, donde cada
   píxel de la tarjeta cuenta. En pantallas grandes esa misma rejilla se lee
   como una sábana de fotos pegadas; con sitio de sobra, el aire vuelve. */
@media (min-width: 768px) {
    .grid-container {
        gap: 14px 10px;
        padding: 10px 14px;
    }
}
/* Estilos responsive para las letras - Sincronizados con film.css */
@media (min-width: 300px) {
    .grid-item .nick,
    .grid-item .edad {
        font-size: 0.8rem;
    }
    .grid-item .disponible {
        font-size: 0.7rem;
    }
}

@media (min-width: 392px) {
    .grid-item .nick,
    .grid-item .edad {
        font-size: 0.8rem;
    }
    .grid-item .disponible {
        font-size: 0.7rem;
    }
}

@media (min-width: 482px) {
    .grid-item .nick,
    .grid-item .edad {
        font-size: 1rem;
    }
    .grid-item .disponible {
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) {
    .grid-item .nick,
    .grid-item .edad {
        font-size: 1.2rem;
    }
    .grid-item .disponible {
        font-size: 1rem;
    }
}

/* Profile-nav responsive para móvil */
@media screen and (max-width: 480px) {
    .profile-nav {
        right: 0;
        left: auto;
        width: 260px;
        max-width: calc(100vw - 20px);
    }
    
    .profile-nav-profiles p {
        font-size: 13px;
    }
    
    .register-btn {
        font-size: 14px;
        padding: 8px 20px;
    }
    
    .login-section {
        font-size: 14px;
    }
    
    .profile {
        height: 36px;
    }
}

/* ── Separadores de grupo geográfico en resultados de búsqueda ── */

.search-location-group {
    grid-column: 1 / -1;
    margin: 12px 0 4px;
    cursor: default;
    pointer-events: none;
}

.search-location-group .location-part {
    cursor: default;
}

.search-location-group__count {
    font-size: 11px;
    color: #888;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 4px;
    flex-shrink: 0;
}
/* ── Esqueletos de reserva del scroll infinito ────────────────────────────
   Al llegar una página nueva, el grid crece y empuja a #loader-trigger hacia
   abajo. Como el usuario acaba de desplazarse hasta el fondo, ese spinner está
   a la vista y su salto SÍ cuenta como layout shift: medido con scroll real y
   10.283 perfiles, ~0.079 por página, 0.7796 acumulado en 10 páginas.

   Se reserva el hueco ANTES de pedir los datos, con tantos esqueletos como
   tarjetas vengan (`Math.min(PAGE_SIZE, total - renderizadas)`), y se
   sustituyen al llegar. Mismo criterio que `.carousel-pending` en el home:
   el espacio existe antes que el contenido, así nada se mueve.

   La altura debe coincidir EXACTA con la de una tarjeta real, así que replica
   sus dos piezas: la imagen con `aspect-ratio: 2/3` y la ficha inferior. */
.grid-item.is-skeleton .card {
    background-color: var(--bg-black);
    border-radius: 8px;
    overflow: hidden;
}

.grid-item.is-skeleton .sk-img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;          /* idéntico a `.grid-item .card img` */
    background: #141414;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Latido suave para que se lea como "cargando" y no como una tarjeta rota.
   Bajo prefers-reduced-motion se queda quieto — el hueco ya cumple su función. */
@media (prefers-reduced-motion: no-preference) {
    .grid-item.is-skeleton .sk-img {
        animation: sk-pulse 1.4s ease-in-out infinite;
    }
}

@keyframes sk-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ── El loader como sentinel sin cuerpo ───────────────────────────────────
   #loader-trigger va DESPUÉS del grid, así que cualquier tarjeta nueva lo
   desplaza hacia abajo. Con desplazamiento normal eso ya no importa (los
   esqueletos reservan el hueco antes de que llegue nada), pero con un flick
   rápido el usuario aterriza en el fondo ANTES de que la reserva exista: el
   loader está en pantalla cuando se inserta y su salto sí cuenta — medido,
   CLS 0.3969.

   Mientras quedan resultados el loader no necesita cuerpo: quien indica que
   algo viene son los propios esqueletos, que ya laten. Sin altura ni contenido
   no hay área que desplazar, y como sentinel del IntersectionObserver funciona
   igual (se observa su posición, no su tamaño).

   Al terminar el listado se le retira la clase y recupera su caja para el
   mensaje de cierre o el estado vacío, que sí tienen que verse. */
/* La caja del loader se define aquí y NO en línea desde el JS: un estilo inline
   gana a la clase, y con `padding:20px` puesto en el elemento el sentinel seguía
   ocupando 40px por más que se le diera altura 0. */
#loader-trigger {
    text-align: center;
    padding: 20px;
    min-height: 50px;
}

#loader-trigger.is-sentinel {
    min-height: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* ── Cierre del listado ───────────────────────────────────────────────────
   Reemplaza al "No hay más resultados" en texto plano. Sin una señal clara, un
   listado agotado se confunde con una página que no termina de llegar —
   justamente el estado que los esqueletos representan un segundo antes.

   Nace ya en pantalla (el usuario acaba de llegar al fondo), así que la entrada
   se lanza al insertarse, sin esperar a ningún observer. Todo el movimiento es
   `transform`/`opacity`: no produce layout shift, que es lo que este bloque de
   CSS lleva midiendo desde arriba. */
.search-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 2px;
}

/* Línea que se abre desde el centro: el gesto de "hasta aquí". */
.search-end__rule {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-end__rule::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(245, 5, 17, 0.1) 15%,
        rgba(245, 5, 17, 0.55) 50%,
        rgba(245, 5, 17, 0.1) 85%,
        transparent 100%
    );
    transform: scaleX(0);
    animation: send-rule 0.5s ease-out forwards;
}

.search-end__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #f22, #a80000);
    box-shadow: 0 0 10px rgba(245, 5, 17, 0.5);
    opacity: 0;
    transform: scale(0.3);
    animation: send-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.22s forwards;
}

.search-end__ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(245, 5, 17, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: send-ripple 2.6s ease-out 0.6s infinite;
}

.search-end__text {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
    opacity: 0;
    transform: translateY(6px);
    animation: send-rise 0.4s ease-out 0.34s forwards;
}

.search-end__sub {
    margin: 0;
    font-size: 11px;
    color: #666;
    opacity: 0;
    transform: translateY(6px);
    animation: send-rise 0.4s ease-out 0.44s forwards;
}

@keyframes send-rule  { to { transform: scaleX(1); } }
@keyframes send-pop   { to { opacity: 1; transform: scale(1); } }
@keyframes send-rise  { to { opacity: 1; transform: translateY(0); } }
@keyframes send-ripple {
    0%   { opacity: 0.7; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(2.4); }
    100% { opacity: 0;   transform: scale(2.4); }
}

/* Sin movimiento el cierre tiene que seguir leyéndose: se muestra completo. */
@media (prefers-reduced-motion: reduce) {
    .search-end__ripple { display: none; }
    .search-end__rule::before,
    .search-end__dot,
    .search-end__text,
    .search-end__sub {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}