@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root {
    /* --- Paleta oscura (login, splash, celebración de match) --- */
    --bg-oscuro-principal: #11131A;
    --bg-oscuro-secundario: #1A1E27;
    --gris-oscuro: #2C313B;

    /* --- Paleta clara (interior de la app) --- */
    --bg-claro-principal: #FFFFFF;
    --bg-claro-secundario: #F5F6F8;
    --borde-claro: #DADDE3;

    /* --- Neutros compartidos --- */
    --gris-medio: #8A8F99;
    --blanco: #FFFFFF;
    --texto-oscuro: #11131A;

    /* --- Color de marca (degradado) --- */
    --gradiente-inicio: #FF5FA2;
    --gradiente-fin: #8C63FF;
    --color-hover: #A476FF;
    --color-pressed: #E84F96;
    --color-success: #46D483;
    --color-error: #FF5B6A;

    /* --- Bordes --- */
    --radio-card: 22px;
    --radio-boton: 18px;
    --radio-input: 16px;
    --radio-foto-perfil: 20px;

    /* --- Sombra suave --- */
    --sombra-suave: 0 8px 20px rgba(0,0,0,.22);

    /* --- Espaciado (múltiplos de 8px) --- */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: #E8E9ED;
    color: var(--texto-oscuro);
    -webkit-tap-highlight-color: transparent;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.oculta {
    display: none !important;
}

.oculto {
    display: none !important;
}

/* --- Pantallas de tema oscuro (login, match) --- */
.pantalla-oscura {
    background: var(--bg-oscuro-principal);
    color: var(--blanco);
    min-height: 100vh;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3);
    box-shadow: 0 0 60px rgba(0,0,0,.15);
}

.overlay-match {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
}

.logo-texto {
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -2%;
    text-align: center;
    margin-bottom: var(--space-1);
}

.logo-imagen {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto 12px;
}

.logo-imagen-chica {
    width: 80px;
    margin-bottom: 8px;
}

.logo-imagen-grande {
    width: 60%;
    margin: 0 auto 16px;
}

.corazon-match {
    display: block;
    width: 90px;
    height: auto;
    margin: 0 auto 12px;
    animation: apareceConRebote 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mate-festejo-hielo {
    display: block;
    width: 90px;
    height: auto;
    margin: 0 auto 12px;
}

.logo-header-matexx {
    display: flex;
    align-items: center;
    gap: 5px;
}

.icono-header-matexx {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.boton-logo-como-funciona {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.seccion-como-funciona h3 {
    margin: 24px 0 8px;
    font-size: 15px;
}

.seccion-como-funciona h3:first-child {
    margin-top: 8px;
}

.lista-como-funciona {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-como-funciona li {
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-claro-secundario);
    font-size: 14px;
}

.icono-explicacion {
    display: inline-block;
    width: 24px;
    text-align: center;
    font-weight: 900;
    margin-right: 4px;
}

.texto-como-funciona {
    font-size: 14px;
    color: var(--gris-medio);
    line-height: 1.5;
}

.texto-header-matexx {
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-texto-chico {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -2%;
}

.logo-texto-chico .acento {
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.distancia-tarjeta {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 2px;
}

.logo-texto .acento {
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitulo-login {
    text-align: center;
    color: var(--gris-medio);
    font-size: 14px;
    margin-bottom: var(--space-4);
}

/* --- Checkbox de aceptación de Términos y Condiciones (registro, tema oscuro) --- */
.fila-checkbox-terminos {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--gris-medio);
    font-size: 13px;
    line-height: 1.4;
    margin: 4px 0 var(--space-2);
    cursor: pointer;
}

.fila-checkbox-terminos input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: var(--gradiente-fin);
    cursor: pointer;
}

.link-legal {
    color: var(--blanco);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.link-legal:hover {
    color: var(--gradiente-fin);
}

/* --- Verificación de perfil: cámara en vivo + óvalo guía --- */
.contenedor-camara-verificacion {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3 / 4;
    margin: 0 auto 12px;
    border-radius: var(--radio-card);
    overflow: hidden;
    background: #000;
}

.contenedor-camara-verificacion video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* efecto espejo, más natural para el usuario */
}

.ovalo-guia-verificacion {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ovalo-guia-verificacion ellipse,
.ovalo-guia-verificacion line,
.ovalo-guia-verificacion path {
    fill: none;
    stroke: var(--blanco);
    stroke-width: 4;
    stroke-dasharray: 10 8;
    opacity: 0.85;
}

/* --- Promo de planes debajo de "Guardar cambios" (pantalla de Perfil) --- */
.promo-premium-perfil {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radio-card);
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    text-align: center;
    cursor: pointer;
    animation: brilloPromoPremium 2.4s ease-in-out infinite;
}

@keyframes brilloPromoPremium {
    0%, 100% { box-shadow: 0 0 0 rgba(140, 99, 255, 0); }
    50% { box-shadow: 0 0 22px rgba(140, 99, 255, 0.55); }
}

.promo-premium-titulo {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 6px;
}

.promo-premium-texto {
    font-size: 13px;
    opacity: 0.92;
    margin-bottom: 10px;
}

.promo-premium-cta {
    font-weight: 700;
    font-size: 13px;
    text-decoration: underline;
}

/* --- Inputs --- */
.input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radio-input);
    border: 1px solid var(--gris-oscuro);
    background: var(--bg-oscuro-secundario);
    color: var(--blanco);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    margin-bottom: var(--space-2);
}

.input::placeholder {
    color: var(--gris-medio);
}

.campo-password {
    position: relative;
}

.fila-fecha-nacimiento {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-2);
}

.select-fecha {
    margin-bottom: 0; /* el margen ya lo pone la fila que lo contiene */
}

.campo-password .input {
    padding-right: 46px; /* deja lugar al ojito, para que no tape el texto */
}

.boton-ver-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(calc(-50% - var(--space-2) / 2));
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gris-medio);
    display: flex;
}

.boton-ver-password svg {
    width: 20px;
    height: 20px;
}

.pantalla-clara .input {
    background: var(--bg-claro-secundario);
    border: 1px solid var(--borde-claro);
    color: var(--texto-oscuro);
}

/* --- Botones --- */
.btn-primario {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: var(--radio-boton);
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: var(--space-2);
    transition: filter 0.15s, transform 0.1s;
}

.btn-primario:hover {
    filter: brightness(1.05);
}

/* Variante para acciones puntuales (aplicar filtros, guardar cambios) que
   queremos que se distingan del degradé rosa/violeta general de la marca */
.btn-primario-lila {
    background: #4A2A82;
}

.btn-primario-lila:hover {
    filter: brightness(1.15);
}

.btn-primario:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}

.btn-primario.btn-sin-cambios,
.btn-primario:disabled {
    background: var(--bg-claro-secundario);
    color: var(--gris-medio);
    cursor: not-allowed;
    filter: none;
}

.btn-primario.btn-sin-cambios:active,
.btn-primario:disabled:active {
    transform: none;
}

.btn-secundario {
    width: 100%;
    height: 56px;
    border-radius: var(--radio-boton);
    background: transparent;
    border: 1px solid #404552;
    color: var(--blanco);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: var(--space-2);
}

.pantalla-clara .btn-secundario {
    border: 1px solid var(--borde-claro);
    color: var(--texto-oscuro);
}

.btn-secundario:hover {
    background: rgba(0,0,0,.04);
}

.pantalla-oscura .btn-secundario:hover {
    background: rgba(255,255,255,.08);
}

/* --- App shell (interior claro) --- */
.pantalla-clara {
    background: var(--bg-claro-principal);
    min-height: 100vh;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 60px rgba(0,0,0,.1);
}

.contenido-vista {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* deja espacio para la nav inferior fija */
}

/* --- Navegación inferior --- */
.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg-claro-principal);
    border-top: 1px solid var(--borde-claro);
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: #737A88;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    transition: transform 0.1s;
    position: relative;
}

.badge-notificacion {
    position: absolute;
    top: -2px;
    right: 18px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-error);
    border: 2px solid var(--bg-claro-principal);
}

.nav-item:active {
    transform: scale(0.95);
}

.nav-item.activo {
    color: var(--gradiente-fin);
}

.nav-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* --- Cards --- */
.card {
    background: var(--bg-claro-principal);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
}

/* --- Barra superior de cada sección --- */
.barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--bg-claro-secundario);
}

.barra-superior h1 {
    font-size: 22px;
    font-weight: 800;
}

.icono-boton {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texto-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 24px;
    font-weight: 700;
}

/* --- Avisos con estilo propio (reemplazan alert()) --- */
.contenedor-avisos {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 90%;
    max-width: 420px;
    pointer-events: none;
}

.aviso {
    padding: 14px 18px;
    border-radius: var(--radio-boton);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--blanco);
    box-shadow: var(--sombra-suave);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.25s, transform 0.25s;
    text-align: center;
}

.aviso.visible {
    opacity: 1;
    transform: translateY(0);
}

.aviso-error { background: var(--color-error); }
.aviso-exito { background: var(--color-success); }
.aviso-info { background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin)); }

/* --- Modal de confirmación --- */
.overlay-confirmacion {
    position: fixed;
    inset: 0;
    background: rgba(17,19,26,.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.modal-confirmacion {
    background: var(--bg-claro-principal);
    border-radius: var(--radio-card);
    padding: var(--space-3);
    max-width: 340px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--sombra-suave);
}

/* --- Contenido de documentos legales (Términos/Privacidad/Comercial), convertido de Markdown --- */
.contenido-legal-md {
    font-size: 13px;
    line-height: 1.5;
    color: var(--texto-oscuro);
    text-align: left;
}

.contenido-legal-md h1 {
    font-size: 16px;
    font-weight: 800;
    margin: 16px 0 8px;
}

.contenido-legal-md h2 {
    font-size: 14px;
    font-weight: 800;
    margin: 14px 0 6px;
}

.contenido-legal-md h1:first-child,
.contenido-legal-md h2:first-child {
    margin-top: 0;
}

.contenido-legal-md p {
    margin-bottom: 10px;
    color: var(--texto-oscuro) !important;
    font-size: 13px !important;
}

.contenido-legal-md ul,
.contenido-legal-md ol {
    margin: 0 0 10px 18px;
}

.contenido-legal-md li {
    margin-bottom: 4px;
}

.contenido-legal-md strong {
    font-weight: 800;
}

.contenido-legal-md hr {
    border: none;
    border-top: 1px solid var(--bg-claro-secundario);
    margin: 12px 0;
}

.modal-confirmacion p {
    font-size: 15px;
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.overlay-notificacion-admin {
    position: fixed;
    inset: 0;
    background: rgba(17,19,26,.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.tarjeta-notificacion-admin {
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    border-radius: var(--radio-card);
    padding: 28px var(--space-3) var(--space-3);
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra-suave);
}

.logo-notificacion-admin {
    width: 56px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
}

.texto-notificacion-admin {
    color: var(--blanco);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.tarjeta-notificacion-admin .btn-secundario {
    border-color: rgba(255,255,255,.4);
    color: var(--blanco);
}

.tarjeta-notificacion-admin .btn-secundario:hover {
    background: rgba(255,255,255,.1);
}

.overlay-servidor-caido {
    position: fixed;
    inset: 0;
    background: rgba(17,19,26,.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.tarjeta-servidor-caido {
    background: var(--bg-claro-principal);
    border-radius: var(--radio-card);
    padding: 28px var(--space-3) var(--space-3);
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra-suave);
}

.icono-servidor-caido {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.7;
}

.titulo-servidor-caido {
    font-weight: 800;
    font-size: 17px;
    margin-bottom: 8px;
    color: var(--texto-oscuro);
}

.texto-servidor-caido {
    color: var(--gris-medio);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

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

.botones-confirmacion .btn-primario,
.botones-confirmacion .btn-secundario {
    flex: 1;
    width: auto;
    margin-bottom: 0;
    height: 46px;
    font-size: 14px;
    padding: 0 8px;
}

/* --- Modal de ubicación manual con mapa (Leaflet + OpenStreetMap) --- */
.modal-mapa-ubicacion {
    background: var(--bg-claro-principal);
    border-radius: var(--radio-card);
    padding: var(--space-3);
    max-width: 420px;
    width: 100%;
    box-shadow: var(--sombra-suave);
}

.fila-buscar-mapa {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.fila-buscar-mapa .input {
    margin-bottom: 0;
    flex: 1;
}

.fila-buscar-mapa .btn-secundario {
    width: auto;
    padding: 0 16px;
    height: 48px;
    margin-bottom: 0;
    white-space: nowrap;
    color: var(--texto-oscuro);
    border: 1px solid var(--borde-claro);
    background: var(--bg-claro-principal);
}

.contenedor-mapa {
    width: 100%;
    height: 280px;
    border-radius: var(--radio-input);
    overflow: hidden;
    border: 1px solid var(--borde-claro);
}

.botones-confirmacion .btn-secundario {
    color: var(--texto-oscuro);
    border: 1px solid var(--borde-claro);
    background: var(--bg-claro-principal);
}

/* --- Pantalla Perfil --- */
.texto-ayuda-onboarding {
    padding: 0 var(--space-3) var(--space-2);
    color: var(--gris-medio);
    font-size: 14px;
}

/* --- Bloque de marca "No somos una app más" (login, Configuración, Planes) --- */
.bloque-marca {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 16px;
    margin: 4px var(--space-2) 20px;
    border-radius: var(--radio-card);
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
}

.bloque-marca-verde {
    background: linear-gradient(135deg, #1FA85C, #56D68A);
}

.bloque-marca-titulo {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.bloque-marca-subtitulo {
    font-size: 13px;
    opacity: 0.95;
    margin-bottom: 4px;
}

.bloque-marca-origen {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 600;
}

.contador-referidos {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--gradiente-fin);
    background: var(--bg-claro-secundario);
    padding: 10px;
    border-radius: var(--radio-input);
    margin-bottom: 16px;
}

/* Brillo que recorre la tarjeta cada tanto — sutil, no parpadea todo el
   tiempo (la pausa larga entre pasadas es a propósito) */
.bloque-marca::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    animation: brilloBloqueMarca 4.5s ease-in-out infinite;
}

@keyframes brilloBloqueMarca {
    0% { left: -60%; }
    35% { left: 130%; }
    100% { left: 130%; }
}


/* --- Preguntas frecuentes --- */
.seccion-faq {
    padding-top: 4px;
}

.titulo-seccion-faq {
    font-size: 14px;
    font-weight: 800;
    margin: var(--space-4) 0 var(--space-2);
    padding: 12px 16px;
    border-radius: var(--radio-input);
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
}

.titulo-seccion-faq:first-child {
    margin-top: 0;
}

.item-faq {
    background: var(--bg-claro-secundario);
    border-radius: var(--radio-input);
    margin-bottom: 8px;
    overflow: hidden;
}

.item-faq summary {
    padding: 14px 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-faq summary::-webkit-details-marker {
    display: none;
}

.item-faq summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 400;
    color: var(--gris-medio);
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.item-faq[open] summary::after {
    transform: rotate(45deg);
}

.respuesta-faq {
    padding: 0 16px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gris-medio);
}

.lista-recomendaciones-faq {
    margin: 8px 0 0;
    padding-left: 18px;
}

.lista-recomendaciones-faq li {
    margin-bottom: 8px;
}

.seccion-perfil {
    padding: 0 var(--space-3) var(--space-3);
}

.seccion-perfil h2 {
    font-size: 15px;
    font-weight: 700;
    margin: var(--space-2) 0 var(--space-1);
}

.seccion-perfil textarea.input {
    resize: vertical;
    font-family: 'Montserrat', sans-serif;
}

.etiqueta-campo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gris-medio);
    display: block;
    margin: var(--space-4) 0 4px;
    text-transform: uppercase;
}

.textarea-bio {
    min-height: 130px;
    margin-bottom: 4px;
}

.contador-caracteres {
    text-align: right;
    font-size: 12px;
    color: var(--gris-medio);
    margin-bottom: var(--space-2);
}

.contador-caracteres.limite-cerca {
    color: var(--color-error);
    font-weight: 700;
}

/* --- Selector de tarjetas (tipo de conexión) --- */
.selector-tarjetas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-2);
}

.tarjeta-opcion {
    padding: 12px 14px;
    border-radius: var(--radio-input);
    border: 1px solid var(--borde-claro);
    background: var(--bg-claro-principal);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.tarjeta-opcion-titulo {
    font-weight: 700;
    font-size: 14px;
}

.tarjeta-opcion-desc {
    font-size: 12px;
    color: var(--gris-medio);
    margin-top: 2px;
}

.tarjeta-opcion.seleccionada {
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-claro-principal), var(--bg-claro-principal)) padding-box,
                linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin)) border-box;
}

.tarjeta-opcion.seleccionada .tarjeta-opcion-desc {
    color: var(--texto-oscuro);
}

.fila-ubicacion {
    margin-bottom: var(--space-2);
}

/* --- Campo marcado como faltante/inválido tras un intento de guardar --- */
.campo-error {
    border: 2px solid var(--color-error) !important;
    border-radius: var(--radio-input);
}

/* Contenedores tipo grid (intereses/idiomas) no tienen borde propio normalmente */
#gridIntereses.campo-error,
#gridIdiomas.campo-error {
    padding: 8px;
}

.campo-bloqueado-premium {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radio-input);
    border: 1px dashed #D9B8A8;
    background: #FFF7ED;
    color: #9A6B3F;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    margin-top: 8px;
}

.badge-full-chico {
    display: inline-block;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
}

.metricas-bloqueadas {
    padding: 14px 16px;
    border-radius: var(--radio-input);
    border: 1px dashed #D9B8A8;
    background: #FFF7ED;
    color: #9A6B3F;
    font-size: 13px;
    cursor: pointer;
}

.metricas-desbloqueadas {
    padding: 16px;
    border-radius: var(--radio-input);
    background: var(--bg-claro-secundario);
}

.metricas-titulo {
    font-weight: 800;
    font-size: 17px;
    margin-bottom: 6px;
}

.metricas-leyenda {
    font-size: 12px;
    color: var(--gris-medio);
    margin-top: 10px;
    font-style: italic;
}

.tarjeta-tasa-respuesta {
    margin: 8px 16px 4px;
    padding: 12px 16px;
    border-radius: var(--radio-input);
    background: var(--bg-claro-secundario);
}

.tasa-respuesta-numero {
    font-weight: 800;
    font-size: 15px;
}

.tasa-respuesta-leyenda {
    font-size: 12px;
    color: var(--gris-medio);
    margin-top: 4px;
}

.tarjeta-metricas-conexion {
    background: var(--bg-claro-secundario);
    border-radius: var(--radio-input);
    overflow: hidden;
}

.fila-metrica-conexion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--bg-claro-principal);
}

.fila-metrica-conexion:last-child {
    border-bottom: none;
}

.valor-metrica-conexion {
    font-weight: 700;
}

.fila-metrica-bloqueada {
    cursor: pointer;
    color: #9A6B3F;
}

.fila-metrica-bloqueada .valor-metrica-conexion {
    color: #9A6B3F;
}

.insignia-verificado {
    font-size: 0.7em;
    vertical-align: middle;
}

/* --- Grid de fotos --- */
.grid-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: var(--space-2);
}

.miniatura-foto {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-claro-secundario);
}

.miniatura-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.etiqueta-principal {
    position: absolute;
    top: 4px;
    left: 4px;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}

.controles-foto {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    background: rgba(0,0,0,.5);
    padding: 2px 4px;
}

.controles-foto button {
    background: none;
    border: none;
    color: var(--blanco);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
}

.controles-foto button:disabled {
    opacity: 0.3;
    cursor: default;
}

.miniatura-agregar {
    aspect-ratio: 3/4;
    border: 2px dashed var(--borde-claro);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--gris-medio);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.miniatura-agregar:active {
    border-color: var(--gradiente-fin);
    background: var(--bg-claro-secundario);
}

.miniatura-agregar svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
}

.miniatura-agregar span {
    font-size: 11px;
    font-weight: 600;
}

/* --- Intereses (chips) --- */
.grid-intereses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-2);
}

.bloque-tematica-interes {
    margin-bottom: var(--space-2);
}

.bloque-tematica-interes h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.contador-tematica {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.chip-interes {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--borde-claro);
    background: var(--bg-claro-principal);
    color: var(--texto-oscuro);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.chip-interes.seleccionado {
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    border-color: transparent;
}

/* --- Fila del zodíaco con interruptor --- */
.fila-zodiaco {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-claro-secundario);
    border-radius: var(--radio-input);
    font-size: 14px;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

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

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--gris-medio);
    border-radius: 24px;
    transition: 0.2s;
}

.switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--blanco);
    border-radius: 50%;
    transition: 0.2s;
}

.switch-toggle input:checked + .switch-slider {
    background: var(--gradiente-fin);
}

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

/* --- Configuración --- */
.lista-configuracion {
    padding: var(--space-2) 0;
}

.item-configuracion {
    padding: 16px var(--space-3);
    border-bottom: 1px solid var(--bg-claro-secundario);
    font-size: 15px;
    cursor: pointer;
}

.item-peligro {
    color: var(--color-error);
    font-weight: 600;
}

.item-con-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: default;
}

.item-plan-actual {
    padding: 16px var(--space-3) !important;
}

.etiqueta-plan-actual {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--gris-medio);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fila-plan-actual {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nombre-plan-actual {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.link-cambiar-plan {
    font-size: 13px;
    font-weight: 700;
    color: var(--gradiente-fin);
}

/* --- Fila de info en Configuración (no clickeable, ej: email) --- */
.item-info-cuenta {
    cursor: default;
}

.texto-email-cuenta {
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-oscuro);
}

/* --- Candado de campos no editables (Nombre/Fecha de nacimiento/Sexo, email) --- */
.candado-campo {
    font-size: 13px;
    opacity: 0.6;
}

.campo-solo-lectura {
    background: var(--bg-claro-secundario);
    color: var(--gris-medio);
    cursor: default;
}

/* --- Link de "¿Olvidaste tu contraseña?" en el login (tema oscuro) --- */
.link-olvide-password {
    color: var(--gris-medio);
    font-size: 13px;
    text-align: center;
    margin: -8px 0 16px;
    cursor: pointer;
    text-decoration: underline;
}

.link-olvide-password:hover {
    color: var(--blanco);
}

/* --- Tabla comparativa de planes --- */
.tabla-planes-wrapper {
    overflow-x: auto;
    border-radius: var(--radio-input);
    border: 1px solid var(--borde-claro);
}

.tabla-planes {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-planes th, .tabla-planes td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid var(--borde-claro);
    white-space: nowrap;
}

.tabla-planes thead th {
    background: var(--bg-claro-secundario);
    font-weight: 800;
}

.etiqueta-fila-plan {
    text-align: left !important;
    font-weight: 600;
}

.tabla-planes .columna-plan-actual {
    background: linear-gradient(rgba(255,95,162,.08), rgba(140,99,255,.08));
    font-weight: 700;
}

/* --- Lista vertical de planes (todos visibles con scroll) --- */
.seccion-plan-vertical {
    border-top: 8px solid var(--bg-claro-secundario);
    padding-top: 20px;
}

.seccion-plan-vertical:first-child {
    border-top: none;
    padding-top: 0;
}

h2.titulo-plan-individual {
    font-size: 108px !important;
    font-weight: 800;
    text-align: center;
    line-height: 1;
}

/* Brillo animado en el título de los planes pagos, para que no se sientan
   "fríos" al lado del nombre pelado */
.titulo-plan-animado {
    background: linear-gradient(90deg, var(--gradiente-inicio), var(--gradiente-fin), var(--gradiente-inicio));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brilloTituloPlan 3s linear infinite;
}

@keyframes brilloTituloPlan {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Mensajes persuasivos entre planes */
.mensaje-persuasivo {
    margin: 20px var(--space-3);
    padding: 14px 16px;
    border-radius: var(--radio-input);
    background: linear-gradient(135deg, rgba(255,95,162,.12), rgba(140,99,255,.12));
    border: 1px solid rgba(140,99,255,.25);
    font-size: 13px;
    line-height: 1.5;
    color: var(--texto-oscuro);
}

.mensaje-persuasivo-full {
    background: linear-gradient(135deg, rgba(140,99,255,.16), rgba(255,95,162,.16));
    border-color: rgba(255,95,162,.3);
}

.chip-tu-plan {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: var(--color-success);
    color: var(--blanco);
    padding: 3px 8px;
    border-radius: 12px;
    vertical-align: middle;
    margin-left: 4px;
}

.lista-plan-individual {
    margin-top: 16px;
}

.fila-plan-individual {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-claro-secundario);
    font-size: 14px;
}

.etiqueta-fila-plan-individual {
    color: var(--gris-medio);
    display: block;
}

.descripcion-fila-plan {
    display: block;
    font-size: 11px;
    color: var(--gris-medio);
    opacity: 0.75;
    font-weight: 400;
    margin-top: 2px;
}

.encabezado-grupo-plan {
    font-size: 12px;
    font-weight: 800;
    color: var(--texto-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--bg-claro-secundario);
}

.valor-fila-plan-individual {
    font-weight: 700;
}

.grid-periodos-plan {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.btn-periodo-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--radio-input);
    border: 1px solid var(--borde-claro);
    background: var(--bg-claro-principal);
    cursor: pointer;
}

.btn-periodo-plan:active {
    background: var(--bg-claro-secundario);
}

.periodo-nombre {
    font-weight: 700;
    font-size: 14px;
}

.periodo-precio-semana {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.periodo-precio-semana small {
    font-size: 11px;
    font-weight: 600;
    color: var(--gris-medio);
    -webkit-text-fill-color: var(--gris-medio);
}

.periodo-precio-total {
    font-size: 11px;
    color: var(--gris-medio);
}

.chip-ahorro {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-success);
    margin-top: 2px;
}

/* --- Pantalla Explorar: tarjeta de swipe --- */
/* Cuando Explorar está activo, ocupa exactamente el alto disponible, sin
   scroll — la tarjeta de foto se estira o achica sola según lo que sobre
   después del header y la fila de botones, en vez de un cálculo fijo en
   px que varía de celular en celular. */
.pantalla-explorar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: 80px; /* espacio para que la fila de botones fija no tape el final del detalle */
}

.contenido-vista:has(.pantalla-explorar) {
    overflow-y: auto;
}

.contenedor-tarjeta {
    position: relative;
    height: 65vh; /* valor de respaldo — ajustarAlturaTarjetaExplorar() lo corrige con precisión al cargar */
    flex-shrink: 0;
    margin: 8px 0 0;
}

.tarjeta-perfil {
    position: absolute;
    inset: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--gris-medio);
    box-shadow: var(--sombra-suave);
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.barra-fotos {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 3;
}

.segmento-foto {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.35);
}

.segmento-foto.activo {
    background: rgba(255,255,255,.95);
}

.zona-tap {
    position: absolute;
    top: 0;
    bottom: 90px;
    width: 40%;
    z-index: 2;
}

.zona-tap-izq { left: 0; }
.zona-tap-der { right: 0; }

.foto-tarjeta {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--gris-oscuro);
}

.spinner-carga-foto {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,.25);
    border-top-color: var(--blanco);
    border-radius: 50%;
    animation: girarSpinnerFoto 0.8s linear infinite;
    z-index: 2;
}

.spinner-carga-foto.oculto {
    display: none;
}

@keyframes girarSpinnerFoto {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Complemento visual del gesto de tocar — no reemplazan el toque en
   cualquier parte de la foto, solo lo hacen más evidente para quien no
   se dé cuenta solo. Sutiles a propósito, no deben competir con la foto. */
.flecha-foto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.flecha-izquierda { left: 10px; }
.flecha-derecha { right: 10px; }

.mensaje-sin-perfiles {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 0 24px;
}

.mensaje-sin-perfiles-titulo {
    color: #8A8F99;
    font-weight: 600;
    font-size: 15px;
}

.mensaje-sin-perfiles-subtitulo {
    color: #8A8F99;
    font-size: 13px;
    opacity: 0.8;
}

.sello-decision {
    position: absolute;
    top: 40px;
    padding: 8px 16px;
    border: 4px solid;
    border-radius: 12px;
    font-weight: 800;
    font-size: 28px;
    z-index: 4;
    opacity: 0;
    text-transform: uppercase;
    pointer-events: none;
}

.sello-like { left: 20px; color: var(--color-success); border-color: var(--color-success); transform: rotate(-15deg); }
.sello-dislike { right: 20px; color: var(--color-error); border-color: var(--color-error); transform: rotate(15deg); }

.etiqueta-que-pretende {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blanco);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.etiqueta-solo_amistad { background: #6C7A89; }
.etiqueta-conocer_gente { background: #27AE60; }
.etiqueta-noche_cita { background: #8E44AD; }
.etiqueta-relacion_seria { background: #E63946; }
.etiqueta-casual { background: #E67E22; }
.etiqueta-abierto_todo { background: #16A2B8; }

.detalle-perfil-explorar {
    padding: var(--space-3);
    color: var(--texto-oscuro);
}

.detalle-perfil-explorar .bio-detalle {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: var(--space-2);
}

.detalle-perfil-explorar h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: var(--space-2) 0 8px;
}

.detalle-perfil-explorar h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 22px 0 8px;
}

.banner-completar-perfil {
    background: var(--bg-claro-secundario);
    color: var(--gris-medio);
    font-size: 12px;
    text-align: center;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: var(--space-2);
}

.texto-sin-datos-categoria {
    font-size: 13px;
    color: var(--gris-medio);
    font-style: italic;
    margin: 0 0 8px;
}

.separador-seccion-intimidad {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed var(--borde-claro);
}

.separador-seccion-intimidad h3 {
    margin-bottom: 4px;
}

.bio-destacada {
    background: linear-gradient(135deg, rgba(255,31,158,0.06), rgba(94,0,255,0.06));
    border-radius: var(--radio-card);
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.5;
    font-style: italic;
}

.lo-que-busca-destacado {
    border-left: 3px solid var(--gradiente-fin);
    background: var(--bg-claro-secundario);
    padding: 10px 14px;
    border-radius: 0 12px 12px 0;
    font-weight: 600;
}

.info-tarjeta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: var(--space-2);
    background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.55) 45%, transparent 100%);
    color: var(--blanco);
}

.info-tarjeta h2 { font-size: 20px; font-weight: 700; }

.nombre-tarjeta-grande {
    font-size: 26px !important;
    font-weight: 800 !important;
}

.resumen-coincidencias {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    opacity: 0.95;
}

.btn-ver-mas-explorar {
    position: absolute;
    right: 14px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.25);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
}

.btn-ver-mas-explorar svg {
    width: 20px;
    height: 20px;
}

.btn-denunciar-explorar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.35);
    color: var(--blanco);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.insignia-ya-te-dio-like {
    position: absolute;
    top: 52px;
    left: 16px;
    z-index: 2;
    display: inline-block;
    background: #1B7A43;
    color: var(--blanco);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* --- Pantalla "Personas que ya te dieron like" --- */
.tarjeta-quien-te-dio-like {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--space-3);
    border-bottom: 1px solid var(--bg-claro-secundario);
}

.foto-quien-te-dio-like {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.info-quien-te-dio-like {
    flex: 1;
    min-width: 0;
}

.nombre-quien-te-dio-like {
    font-weight: 700;
    font-size: 15px;
}

.mini-insignia-coincidencia {
    font-size: 12px;
}

.bio-quien-te-dio-like {
    font-size: 13px;
    color: var(--gris-medio);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.distancia-quien-te-dio-like {
    font-size: 12px;
    color: var(--gris-medio);
}

.botones-quien-te-dio-like {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-decidir-mini {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-x-mini {
    background: var(--bg-claro-secundario);
    color: var(--color-error);
}

.btn-like-mini {
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
}

.bio-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s;
    font-size: 14px;
    color: #DADDE3;
}

.bio-panel.expandido {
    max-height: 150px;
    margin-top: 8px;
}

.fila-botones-swipe {
    position: fixed;
    bottom: 64px;
    left: 0; right: 0;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: 8px var(--space-2);
    background: var(--bg-claro-principal);
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}

.btn-swipe {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--bg-claro-principal);
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.1s;
}

.btn-swipe svg {
    width: 22px;
    height: 22px;
}

.btn-swipe:active { transform: scale(0.9); }

.btn-deshacer { color: #F4B640; }
.btn-x { background: #E63946; color: #fff; width: 60px; height: 60px; }
.btn-x svg { width: 24px; height: 24px; }
.btn-like { background: #2FA84F; color: #fff; width: 60px; height: 60px; font-size: 28px; }
.btn-super { color: #49D7F2; }
.btn-despues { font-size: 16px; color: #8A8F99; }

.icono-boton-mate {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* --- Pantalla Likes: teaser premium --- */
.seccion-likes { padding: var(--space-2); }

.tarjeta-teaser {
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    border-radius: var(--radio-card);
    padding: var(--space-3);
    text-align: center;
    color: var(--blanco);
}

.teaser-numero { font-size: 32px; font-weight: 800; margin-bottom: 4px; }

.tarjeta-teaser .btn-primario {
    background: var(--blanco);
    color: var(--gradiente-fin);
    margin-top: var(--space-2);
    margin-bottom: 0;
    height: 44px;
}

/* --- Grid de tarjetas grandes en Likes (conexiones sin iniciar) --- */
.grid-conexiones-nuevas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 var(--space-3) var(--space-3);
}

.tarjeta-conexion-nueva {
    border-radius: var(--radio-card);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    cursor: pointer;
    background: var(--bg-claro-secundario);
}

.foto-conexion-nueva {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.tarjeta-conexion-nueva p {
    padding: 8px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

/* --- Contador de 48hs --- */
.tarjeta-conexion-nueva {
    position: relative;
}

.badge-contador-tarjeta {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.55);
    color: var(--blanco);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 2;
}

.badge-contador-tarjeta.urgente {
    background: var(--color-error);
}

.badge-contador-ficha {
    display: table;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-claro-secundario);
    color: var(--texto-oscuro);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    margin-top: 8px;
    cursor: pointer;
}

.badge-contador-ficha.urgente {
    background: var(--color-error);
    color: var(--blanco);
}

/* --- Tarjeta de match vencido ("TE DORMISTE") --- */
.tarjeta-conexion-vencida {
    position: relative;
    border-radius: var(--radio-card);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    cursor: pointer;
    background: var(--bg-claro-secundario);
}

.tarjeta-conexion-vencida .foto-conexion-nueva {
    filter: grayscale(85%) brightness(0.6);
}

.tarjeta-conexion-vencida p {
    padding: 8px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

.capa-vencida {
    position: absolute;
    top: 0; left: 0; right: 0;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
}

.texto-te-dormiste {
    background: var(--color-error);
    color: var(--blanco);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 20px;
    transform: rotate(-8deg);
}

/* --- Tarjeta de Superlike recibido ("TE DIO SUPERLIKE") --- */
.capa-superlike-recibido {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0));
}

.texto-superlike-recibido {
    background: linear-gradient(135deg, #FFC93C, #FF9F1C);
    color: var(--texto-oscuro);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 20px;
    text-align: center;
}

/* --- Botones de la ficha de invitación a Superlike (Rechazar / Hacer match) --- */
.barra-botones-superlike {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.barra-botones-superlike .btn-rechazar-superlike {
    width: 56px;
    height: 56px;
    font-size: 20px;
    flex-shrink: 0;
}

.barra-botones-superlike .btn-hacer-match {
    flex: 1;
    margin-bottom: 0;
}

/* --- Header del chat con foto + nombre + edad --- */
.barra-chat-header {
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-claro-principal);
}

.info-header-chat {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.info-header-chat span {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.barra-chat-header .icono-boton {
    flex-shrink: 0;
    font-size: 24px;
    padding: 6px 10px;
}

.foto-header-chat {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gris-medio);
    flex-shrink: 0;
}

/* --- Menú de acciones (⋮) --- */
.modal-menu-acciones {
    background: var(--bg-claro-principal);
    border-radius: var(--radio-card);
    padding: var(--space-2);
    max-width: 320px;
    width: 100%;
    box-shadow: var(--sombra-suave);
}

.titulo-menu-acciones {
    font-size: 13px;
    color: var(--gris-medio);
    padding: 8px 12px;
    font-weight: 700;
}

.item-menu-acciones {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 12px;
    border: none;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-oscuro);
    cursor: pointer;
    border-radius: var(--radio-input);
}

.item-menu-acciones:active {
    background: var(--bg-claro-secundario);
}

.item-menu-acciones.peligro {
    color: var(--color-error);
}

.item-menu-acciones.cancelar-menu {
    color: var(--gris-medio);
    border-top: 1px solid var(--borde-claro);
    margin-top: 4px;
}

/* --- Modal de "cómo te sentís con esta charla" --- */
.modal-conexion {
    background: var(--bg-claro-principal);
    border-radius: var(--radio-card);
    padding: var(--space-3);
    max-width: 340px;
    width: 100%;
    box-shadow: var(--sombra-suave);
}

.titulo-modal-conexion {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 8px;
}

.texto-modal-conexion {
    font-size: 13px;
    color: var(--gris-medio);
    line-height: 1.4;
    margin-bottom: var(--space-2);
}

.opcion-conexion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: var(--radio-input);
    border: 1px solid var(--borde-claro);
    background: var(--bg-claro-principal);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.opcion-conexion:active {
    background: var(--bg-claro-secundario);
}

.opcion-conexion-sutil {
    border: none;
    background: none;
    text-align: center;
    font-size: 13px;
    color: var(--gris-medio);
    padding: 8px;
}

/* --- Mensaje de sistema en el chat --- */
.mensaje-sistema {
    align-self: center;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 10px 16px;
    border-radius: 16px;
    max-width: 85%;
    margin: 8px 0;
}

.incentivo-primer-mensaje {
    align-self: center;
    background: linear-gradient(135deg, #1FA85C, #56D68A);
    color: var(--blanco);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 12px 18px;
    border-radius: 16px;
    max-width: 85%;
    margin: 16px 0;
}

/* --- Animaciones de la pantalla de match --- */
#vista-match {
    overflow: hidden;
}

.anim-titulo-match {
    animation: apareceConRebote 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.anim-subtitulo-match {
    animation: apareceDesdeAbajo 0.5s ease-out 0.15s both;
}

.anim-boton-match:nth-of-type(1) {
    animation: apareceDesdeAbajo 0.5s ease-out 0.28s both;
}

.anim-boton-match:nth-of-type(2) {
    animation: apareceDesdeAbajo 0.5s ease-out 0.38s both;
}

@keyframes apareceConRebote {
    0% { opacity: 0; transform: scale(0.4); }
    60% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes apareceDesdeAbajo {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

.capa-destellos {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.destello {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: destelloDisparo 0.9s ease-out both;
}

@keyframes destelloDisparo {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(0deg);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1.1) rotate(180deg);
    }
}

/* --- Carrusel de fotos de la ficha (tap para cambiar, como en Explorar) --- */
.carrusel-fotos-ficha {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--gris-medio);
    overflow: hidden;
}

.carrusel-fotos-ficha .foto-tarjeta {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carrusel-fotos-ficha .barra-fotos {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 3;
}

.carrusel-fotos-ficha .zona-tap {
    bottom: 0;
}

.fila-chips-vitals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.chip-vital {
    background: var(--bg-claro-secundario);
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

/* --- Lista de conexiones (compartida por Likes y Chat) --- */
.item-conexion {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--bg-claro-secundario);
}

.item-conexion:active { background: var(--bg-claro-secundario); }

.racha-chat {
    font-size: 12px;
    font-weight: 700;
    color: var(--gris-medio);
}

.item-conexion-matexx {
    background: linear-gradient(135deg, rgba(255,31,158,0.06), rgba(94,0,255,0.06));
}

.foto-conexion-matexx {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #FFE0F0, #DCEEFF);
    border: none;
}

.foto-header-chat-matexx {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, #FFE0F0, #DCEEFF);
    border-radius: 50%;
}

.burbuja-matexx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-boton-notificacion-chat {
    margin-top: 8px;
    padding: 8px 16px;
    font-size: 13px;
}

.hora-burbuja {
    font-size: 11px;
    color: var(--gris-medio);
    margin-top: 6px;
    align-self: flex-end;
}

.foto-conexion {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gris-medio);
    flex-shrink: 0;
}

.info-conexion { flex: 1; min-width: 0; }
.info-conexion strong { display: block; font-size: 15px; }
.info-conexion p {
    font-size: 13px;
    color: var(--gris-medio);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.punto-no-leido {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gradiente-fin);
    flex-shrink: 0;
}

/* --- Chat --- */
.mensajes-chat {
    padding: var(--space-2);
    padding-bottom: 90px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60vh;
}

.burbuja-mensaje {
    max-width: 75%;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    word-wrap: break-word;
}

.burbuja-mia {
    align-self: flex-end;
    margin-left: auto;
    background: linear-gradient(135deg, #FFE0F0, #DCEEFF);
    color: var(--texto-oscuro);
    border-bottom-right-radius: 4px;
}

.marca-leido {
    display: block;
    text-align: right;
    font-size: 12px;
    letter-spacing: -2px;
    color: rgba(0, 0, 0, 0.35);
    margin-top: 2px;
}

.marca-leido.leido {
    color: #1E88E5;
}

.burbuja-otro {
    align-self: flex-start;
    margin-right: auto;
    background: var(--bg-claro-secundario);
    color: var(--texto-oscuro);
    border-bottom-left-radius: 4px;
}

.burbuja-escribiendo {
    padding: 14px 18px;
}

.puntos-escribiendo {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.puntos-escribiendo span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gris-medio);
    opacity: 0.5;
    animation: rebotePuntoEscribiendo 1.2s infinite ease-in-out;
}

.puntos-escribiendo span:nth-child(1) { animation-delay: 0s; }
.puntos-escribiendo span:nth-child(2) { animation-delay: 0.2s; }
.puntos-escribiendo span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rebotePuntoEscribiendo {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.burbuja-mensaje {
    cursor: pointer;
    position: relative;
}

.cita-mensaje {
    font-size: 12px;
    opacity: 0.75;
    border-left: 3px solid currentColor;
    padding-left: 8px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.reaccion-burbuja {
    position: absolute;
    bottom: -8px;
    right: 6px;
    background: var(--bg-claro-principal);
    border-radius: 999px;
    font-size: 12px;
    padding: 2px 6px;
    box-shadow: var(--sombra-suave);
    white-space: nowrap;
}

.burbuja-mia .reaccion-burbuja {
    right: auto;
    left: 6px;
}

.barra-respondiendo {
    position: fixed;
    bottom: 78px;
    left: 0; right: 0;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-claro-secundario);
    border-top: 1px solid var(--borde-claro);
    font-size: 13px;
}

.texto-respondiendo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gris-medio);
}

.input-chat {
    position: fixed;
    bottom: 64px;
    left: 0; right: 0;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-claro-principal);
    border-top: 1px solid var(--borde-claro);
}

.input-chat .input { margin-bottom: 0; flex: 1; }

.imagen-chat {
    display: block;
    max-width: 220px;
    max-height: 280px;
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 4px;
}

.overlay-zoom-imagen-chat {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.overlay-zoom-imagen-chat img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.btn-opciones-imagen-zoom {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: var(--blanco);
    font-size: 22px;
    cursor: pointer;
    z-index: 1101;
}

.textarea-chat {
    resize: none;
    overflow-y: hidden;
    line-height: 1.4;
    max-height: 110px;
    font-family: inherit;
}

.btn-enviar-chat {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--gradiente-inicio), var(--gradiente-fin));
    color: var(--blanco);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}