/* ======================================================
   CONOCER – CSS ESPECÍFICO
   COMPATIBLE CON FEED (DARK + GLASS)
====================================================== */

/* ======================================================
   TOKENS LOCALES (layout)
   - Ajustados para iOS (safe-area)
   - Permiten alinear foto, acciones, info y pill-nav sin “líneas”
====================================================== */
:root{
    /* Pill-nav (viene de stylo-v2, pero lo declaramos aquí para cálculo) */
    --pill-bottom: calc(16px + env(safe-area-inset-bottom));
    --pill-height: 68px;

    /* Aire entre la foto y el menú inferior */
    --photo-gap-above-pill: 10px;

    /* Acciones (3 botones) */
    --actions-gap-above-pill: 14px;
    --actions-bottom: calc(var(--pill-bottom) + var(--pill-height) + var(--actions-gap-above-pill));
    /* 58 botón + 9 gap + ~29 etiqueta = ~96 */
    --actions-block-h: 96px;

    /* Info (nombre/edad/localidad) por encima de los botones
       Ajuste: bajar ~30% (más cerca de los botones) */
    --info-gap-above-actions: 10px;
    --info-bottom: calc(var(--actions-bottom) + var(--actions-block-h) - 28px + var(--info-gap-above-actions));

    /* Header (padding + botón 54px + padding) */
    --header-h: calc(22px + 54px + 10px + env(safe-area-inset-top));
}

/* ======================================================
   BODY (NO TOCAR FONDO DEL FEED)
====================================================== */
body {
    background: transparent;
    color: #ffffff;
    overflow: hidden;
    user-select: none;
}

/* Asegura que la cabecera quede siempre por encima del card */
.conocer .header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;

    /* Respeta notch / status bar */
    padding-top: calc(22px + env(safe-area-inset-top));
}

/* ======================================================
   CONTENEDOR PRINCIPAL
====================================================== */
.discover-wrapper {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    /* La foto debe terminar JUSTO por encima del menú inferior (pill-nav) */
    bottom: calc(var(--pill-bottom) + var(--pill-height) + var(--photo-gap-above-pill));

    width: 100%;
    overflow: hidden;
}

/* ======================================================
   TARJETA TIPO STORY / TINDER
====================================================== */
.discover-card {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    /* Foto a pantalla completa (sin bordes, sin “líneas” ni filtros) */
    /* 4 puntas redondeadas */
    border-radius: 26px;
    overflow: hidden;

    background: transparent;
    box-shadow: none;

    touch-action: none;
}

/* Imagen */
.discover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    user-select: none;
    -webkit-user-drag: none;
    /* Siempre visible: en móvil el fade-in puede parecer que no carga la foto */
    opacity: 1;
    transition: none;
}

/* is-loaded se mantiene por compatibilidad con JS antiguo */
.discover-card img.is-loaded{ opacity: 1; }

/* Botón "más" (⋯) – opciones usuario */
.card-more{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;

    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 0;

    display: grid;
    place-items: center;

    font-size: 22px;
    line-height: 1;
    color: rgba(255,255,255,0.95);

    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);

    box-shadow:
        0 14px 32px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.10);

    cursor: pointer;
}

.card-more:active{
    transform: translateY(1px) scale(0.98);
}

/* ======================================================
   INFO USUARIO (OVERLAY OSCURO)
====================================================== */
.card-info {
    position: absolute;
    /* Justo encima del bloque de botones */
    bottom: var(--info-bottom);
    width: 100%;
    padding: 18px;

    /* Sin degradados/filtros: la foto queda natural */
    background: none;
    text-shadow: 0 2px 16px rgba(0,0,0,0.65);
}

.card-info{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.card-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.card-title-left{
    display:flex;
    align-items:baseline;
    gap:6px;
    min-width: 0;
}

.card-name{
    font-size:18px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 100%;
}

.card-age{
    font-size:18px;
    font-weight:600;
    color:rgba(255,255,255,0.95);
    line-height:1.1;
}

/* (card-comma eliminado: ahora la coma va pegada a la edad para evitar espacios raros) */

.card-loc{
    font-size:13px;
    color:rgba(255,255,255,0.88);
    line-height:1.15;
}

/* Insignia (mismo tamaño que cuenta.php) */
.friend-verify{
    width:28px;
    height:28px;
    border-radius:999px;
    object-fit:cover;
    flex:0 0 auto;
}

/* Insignia inline al lado de la edad */
.friend-verify.inline{
    width:22px;
    height:22px;
    margin-left:8px;
    transform: translateY(1px);
}

/* Estado online */
.online-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;

    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;

    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.online-pill::before{
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(152, 255, 190, 0.95); /* pastel green */
    box-shadow: 0 0 0 3px rgba(152, 255, 190, 0.18);
}

/* En móvil ya no hace falta hack por media query: se calcula por variables */

/* ======================================================
   ACCIONES – 3 BOTONES SOBRE PILL MENU
====================================================== */
.discover-actions {
    position: fixed;
    bottom: var(--actions-bottom); /* por encima del menú + iOS safe-area */
    left: 0;
    right: 0;

    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 22px;

    z-index: 400;
}

.action-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 9px;
}

.action-label{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.92);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

/* BOTÓN BASE */
.discover-actions button {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;

    font-size: 22px;
    font-weight: 700;

    color: #ffffff;
    cursor: pointer;

    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 10px 26px rgba(0,0,0,0.45);

    transition: transform 0.15s ease, background 0.2s ease;
}

.discover-actions button:active {
    transform: scale(0.9);
}

/* 🤠 LIKE AMIGO */
.btn-like-friend {
    background: rgba(77, 208, 255, 0.85);
}

/* ❤️ MATCH */
.btn-like-match {
    background: rgba(255, 59, 48, 0.9);
}

/* ❌ PASAR */
.btn-discard {
    background: rgba(180, 180, 180, 0.45);
}

/* ======================================================
   OVERLAY LIKE / MATCH / NOPE (PREPARADO)
====================================================== */
.discover-card::before {
    content: attr(data-like);
    position: absolute;
    top: 24px;
    left: 24px;

    font-size: 28px;
    font-weight: 700;

    color: #ffffff;
    opacity: 0;
    pointer-events: none;
}

/* ======================================================
   UX – BLOQUEOS (MÓVIL)
====================================================== */
html, body {
    touch-action: manipulation;
}

/* ======================================================
   FEEDBACK VISUAL – AMIGO / MATCH / PASAR (PASTEL PRO)
   - Colores pastel modernos
   - Icono = mismo que los botones
====================================================== */
.discover-feedback{
    position: fixed;
    inset: 0;
    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.discover-feedback.show{ opacity: 1; }

.discover-feedback .bubble{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 16px;
    border-radius: 18px;

    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.92);

    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);

    box-shadow:
        0 18px 52px rgba(0,0,0,0.46),
        inset 0 0 0 1px rgba(255,255,255,0.12);

    transform: scale(0.92);
    animation: feedbackPop 0.22s cubic-bezier(.2,.9,.2,1) forwards;
}

.discover-feedback .bubble .ico{
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
}

.discover-feedback .bubble .ico{
    font-size: 18px;
    line-height: 1;
}
.discover-feedback .bubble .ico svg{
    width: 22px;
    height: 22px;
}

.discover-feedback .bubble svg{
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(255,255,255,0.92);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Heart icon in the action button is filled */
.discover-feedback.match .bubble svg{
    fill: rgba(255,255,255,0.92);
    stroke: none;
}

@keyframes feedbackPop{
    to { transform: scale(1); }
}

/* Pastel tints (no gradients agresivos) */
.discover-feedback.amigo .bubble{
    background: rgba(164, 240, 214, 0.18); /* mint pastel */
    box-shadow:
        0 18px 52px rgba(0,0,0,0.46),
        0 10px 28px rgba(164, 240, 214, 0.18),
        inset 0 0 0 1px rgba(255,255,255,0.14);
}

.discover-feedback.match .bubble{
    background: rgba(255, 185, 224, 0.18); /* pink pastel */
    box-shadow:
        0 18px 52px rgba(0,0,0,0.46),
        0 10px 28px rgba(255, 185, 224, 0.16),
        inset 0 0 0 1px rgba(255,255,255,0.14);
}

.discover-feedback.pasar .bubble{
    background: rgba(196, 206, 255, 0.16); /* periwinkle pastel */
    box-shadow:
        0 18px 52px rgba(0,0,0,0.46),
        0 10px 28px rgba(196, 206, 255, 0.14),
        inset 0 0 0 1px rgba(255,255,255,0.13);
}

/* =====================================================
   UNDO (DESHACER) – barra flotante
===================================================== */
.undo-bar{
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 12;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;

    background: rgba(12,12,14,0.70);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    box-shadow:
        0 14px 34px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
    transition: opacity .24s ease, transform .24s ease;
}

.undo-bar.show{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.undo-bar .undo-text{
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.96);
    white-space: nowrap;
}

.undo-bar .undo-btn{
    border: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 14px;
    font-weight: 800;
    color: rgba(15,15,18,0.95);
    background: rgba(255,255,255,0.96);
    transition: transform .18s ease, opacity .18s ease;
}

.undo-bar .undo-btn:active{ transform: translateY(1px) scale(0.98); }

/* =====================================================
   SHEET (BLOQUEAR / REPORTAR)
===================================================== */
.sheet-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 920;
}

.sheet-overlay.show{
    opacity: 1;
    pointer-events: auto;
}

.sheet{
    position: fixed;
    left: 0;
    right: 0;
    bottom: -120%;
    z-index: 921;

    padding: 14px 16px 22px;
    border-radius: 26px 26px 0 0;

    background: rgba(18,18,22,0.92);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);

    box-shadow: 0 -18px 60px rgba(0,0,0,0.55);
    transition: bottom .42s cubic-bezier(.2,.85,.2,1);
}

.sheet.show{ bottom: 0; }

.sheet-handle{
    width: 44px;
    height: 5px;
    border-radius: 999px;
    margin: 0 auto 10px;
    background: rgba(255,255,255,0.18);
}

.sheet-title{
    margin: 6px 4px 0;
    font-size: 16px;
    font-weight: 750;
    color: rgba(255,255,255,0.94);
}

.sheet-sub{
    margin: 6px 4px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.74);
}

.sheet-actions{
    display: grid;
    gap: 10px;
}

.sheet-btn{
    width: 100%;
    border: 0;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 18px;
    font-weight: 720;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    transition: transform .18s ease;
}

.sheet-btn:active{ transform: translateY(1px) scale(0.98); }

.sheet-btn.primary{
    color: rgba(15,15,18,0.92);
    background: rgba(255,255,255,0.92);
}

.sheet-btn.danger{
    background: rgba(255, 170, 190, 0.16);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 10px 28px rgba(255, 170, 190, 0.10);
}

.sheet-btn.ghost{
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.82);
}

.report-form select,
.report-form textarea{
    width: 100%;
    margin-top: 8px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 0;
    outline: none;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.report-label{
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    margin: 10px 4px;
}


/* ======================================================
   ESTADO VACÍO – SIN MÁS PERSONAS
====================================================== */
.discover-empty {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.discover-empty.show {
    display: flex;
}

.empty-card {
    padding: 28px 26px;
    border-radius: 22px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    box-shadow: 0 16px 45px rgba(0,0,0,0.45);
}

.empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.empty-card p {
    font-size: 15px;
    line-height: 1.4;
    color: rgba(18,18,20,0.88);
}

.empty-icon {
    margin-bottom: 14px;
    color: rgba(18,18,20,0.82);

    display: flex;
    justify-content: center;
}

/* ======================================================
   FRIENDS LOGO – APPLE-LIKE PULSE (EMPTY STATE)
   - Sin fondo, sin cuadrado, solo logo
====================================================== */
.friends-logo-pulse{
    width: 46px;
    height: 46px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;

    /* Sombra neutra (sin naranja) */
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
    will-change: transform, filter, opacity;

    animation: friendsApplePulse 2.2s cubic-bezier(.22,1,.36,1) infinite;
    transform-origin: 50% 55%;
}

@keyframes friendsApplePulse{
    0%   { transform: scale(1);     opacity: 0.95; }
    14%  { transform: scale(1.10);  opacity: 1; }
    26%  { transform: scale(0.985); opacity: 1; }
    44%  { transform: scale(1.03);  opacity: 1; }
    68%  { transform: scale(1);     opacity: 0.96; }
    100% { transform: scale(1);     opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce){
    .friends-logo-pulse{ animation: none; }
}

.glass-icon {
    filter:
        drop-shadow(0 0 12px rgba(255,255,255,0.25))
        drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}

/* ======================================================
   MATCH SHEET – GLASS BOTTOM SHEET
====================================================== */
.match-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 900;
}

.match-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.match-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    background: rgba(20,20,24,0.92);
    backdrop-filter: blur(24px);
    border-radius: 26px 26px 0 0;
    padding: 28px 22px 34px;
    text-align: center;
    color: #fff;
    z-index: 901;
    transition: bottom .45s cubic-bezier(.2,.8,.2,1);
}

.match-sheet.show {
    bottom: 0;
}

.match-handle {
    width: 42px;
    height: 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    margin: 0 auto 16px;
}

.match-sheet h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.match-sheet p {
    font-size: 14px;
    opacity: .9;
    margin-bottom: 26px;
}

.match-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.match-actions button {
    height: 46px;
    border-radius: 14px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: #ff5a12;
    color: #fff;
}

.btn-secondary {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* Verificado (igual que en cuenta.php) */
.friend-verify{
    /* cuenta.php usa 28x28 (.badge-icon) */
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-left: 6px;
    margin-top: 0;
    pointer-events: none;
    user-select: none;
}

/* =====================================================
   USER SHEET (Opciones / Reportar)
===================================================== */
.sheet-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,17,21,0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 940;
}
.sheet-overlay.show{ opacity: 1; pointer-events: auto; }
.sheet{
    position: fixed;
    left: 0;
    right: 0;
    bottom: -120%;
    padding: 16px 16px calc(22px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow: 0 -18px 50px rgba(15,17,21,0.18);
    transition: bottom .42s cubic-bezier(.2,.85,.2,1);
    z-index: 941;
    color:#0f1115;
}
.sheet.show{ bottom: 0; }
.sheet-handle{ width: 46px; height: 5px; border-radius:999px; background: rgba(15,17,21,0.14); margin: 2px auto 14px; }
.discover-sheet-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.sheet-title{ margin:0; font-size:20px; line-height:1.1; color:#0f1115; letter-spacing:-0.02em; }
.sheet-sub{ margin:6px 0 0; color:#5f6673; font-size:13px; line-height:1.4; }
.discover-sheet-close{ width:36px; height:36px; border:0; border-radius:12px; background:#f3f5f7; color:#111; font-size:24px; line-height:1; cursor:pointer; flex:0 0 auto; }
.discover-sheet-profile{ display:flex; align-items:center; gap:12px; padding:12px; background:#f8f9fb; border:1px solid rgba(15,17,21,0.07); border-radius:20px; margin-bottom:14px; }
.discover-sheet-profile img{ width:56px; height:56px; border-radius:18px; object-fit:cover; background:#e9edf1; }
.discover-sheet-profile-copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.discover-sheet-profile-copy strong{ font-size:16px; color:#0f1115; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discover-sheet-profile-copy span{ font-size:13px; color:#68707d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discover-sheet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.discover-action-card{ border:1px solid rgba(15,17,21,0.08); background:#fff; border-radius:20px; padding:14px 12px; min-height:110px; text-align:left; display:flex; flex-direction:column; gap:12px; cursor:pointer; box-shadow: 0 10px 24px rgba(15,17,21,0.06); }
.discover-action-card.danger{ background:#fff5f5; border-color:rgba(194,56,56,0.16); }
.discover-action-icon{ width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:#f3f5f7; font-size:18px; }
.discover-action-card.danger .discover-action-icon{ background:#ffe3e3; }
.discover-action-copy{ display:flex; flex-direction:column; gap:4px; }
.discover-action-copy strong{ font-size:14px; color:#0f1115; }
.discover-action-copy small{ font-size:12px; line-height:1.35; color:#68707d; }
.discover-sheet-note{ margin-top:12px; padding:14px; border-radius:18px; background:#0f1115; color:#fff; }
.discover-sheet-note strong{ display:block; font-size:14px; margin-bottom:6px; }
.discover-sheet-note p{ margin:0; font-size:12px; line-height:1.45; color:rgba(255,255,255,0.78); }

.discover-sheet-top--centered{ position:relative; align-items:flex-start; justify-content:flex-start; text-align:left; min-height:40px; padding-right:48px; }
.discover-sheet-heading{ width:100%; max-width:none; margin:0; }
.discover-sheet-top--centered .discover-sheet-close{ position:absolute; right:0; top:0; }
.discover-sheet-top--centered .sheet-title,
.discover-sheet-top--centered .sheet-sub{ text-align:left; }
.discover-safety-panel{ margin-top:12px; padding:14px; border-radius:20px; background:#f8f9fb; border:1px solid rgba(15,17,21,0.07); }
.discover-safety-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.discover-safety-head strong{ font-size:14px; color:#0f1115; }
.discover-safety-head span{ font-size:12px; color:#68707d; }
.discover-safety-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.discover-chip{ border:1px solid rgba(15,17,21,0.10); background:#fff; color:#111; border-radius:999px; padding:9px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.discover-safety-actions{ display:flex; gap:8px; margin-top:12px; }
.discover-inline-btn{ flex:1; min-height:42px; border:0; border-radius:14px; background:#111; color:#fff; font-size:13px; font-weight:800; cursor:pointer; }
.discover-inline-btn.ghost{ background:#fff; color:#111; border:1px solid rgba(15,17,21,0.10); }
.discover-tips-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.discover-tip-item{ padding:12px 14px; border-radius:18px; background:#f8f9fb; border:1px solid rgba(15,17,21,0.07); display:flex; flex-direction:column; gap:4px; }
.discover-tip-item strong{ font-size:14px; color:#0f1115; }
.discover-tip-item span{ font-size:12px; line-height:1.45; color:#68707d; }
@media (max-width:420px){
  .discover-sheet-heading{ max-width:none; }
  .discover-safety-actions{ flex-direction:column; }
}
.sheet-actions{ display:flex; flex-direction:column; gap:10px; }
.sheet-btn{ border:0; cursor:pointer; min-height:48px; border-radius:16px; font-weight:800; font-size:14px; background:#111; color:#fff; box-shadow:0 12px 24px rgba(15,17,21,0.16); transition: transform .18s ease, opacity .18s ease; }
.sheet-btn:active{ transform: translateY(1px) scale(0.99); }
.sheet-btn.primary{ background:#111; color:#fff; }
.sheet-btn.danger{ background:#b3261e; color:#fff; }
.sheet-btn.ghost{ background:#fff; color:#111; border:1px solid rgba(15,17,21,0.10); box-shadow:none; }
.report-form select,
.report-form textarea{ width:100%; margin-top:8px; background:#f8f9fb; border:1px solid rgba(15,17,21,0.08); border-radius:16px; padding:12px 12px; color:#111; outline:none; }
.report-label{ display:block; font-size:13px; color:#111; margin-bottom:12px; font-weight:700; }
.report-actions{ margin-top:10px; }
@media (max-width: 420px){
  .discover-action-card{ min-height:102px; padding:12px 10px; border-radius:18px; }
  .discover-action-copy strong{ font-size:13px; }
  .discover-action-copy small{ font-size:11px; }
}
/* =====================================================
   HEADER IDÉNTICO A CUENTA
====================================================== */
.brand-mark,
.brand-mark-text{
  font-family: ui-rounded, "SF Pro Rounded", "Nunito Sans", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.header{
  padding-inline:16px !important;
}

.header-top{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center;
  gap:14px;
  min-height:64px !important;
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  justify-self:start;
}

.brand-mark-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:14px;
  flex:0 0 auto;
  display:block;
}

.brand-mark-text{
  font-size:24px;
  font-weight:400;
  letter-spacing:-0.03em;
  color:#000 !important;
  line-height:1;
}

.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
}

.header-actions .action-btn,
.header-actions .action-btn svg,
.header-actions .action-btn path{
  color:#000 !important;
  stroke:#000 !important;
  fill:none !important;
}

.header-actions .notify .notif-dot{
  background:#ff2d55 !important;
}

@media (max-width:640px){
  .header{
    padding-inline:12px !important;
  }

  .header-top{
    gap:10px;
    min-height:62px !important;
  }

  .brand-mark{
    gap:10px;
  }

  .brand-mark-logo{
    width:40px;
    height:40px;
  }

  .brand-mark-text{
    font-size:18px;
  }
}


/* ======================================================
   DISCOVER SHEETS – HEADER ALIGNMENT FIX
====================================================== */
.discover-sheet-top{
    position: relative;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    min-height: 40px;
    padding-right: 48px;
}

.discover-sheet-top > div,
.discover-sheet-top .discover-sheet-heading{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.discover-sheet-top .sheet-title,
.discover-sheet-top .sheet-sub{
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.discover-sheet-top .sheet-title{
    margin-top: 0;
}

.discover-sheet-top .sheet-sub{
    margin-bottom: 0;
}

.discover-sheet-close{
    position: absolute;
    top: 0;
    right: 0;
}

.discover-sheet-top--centered{
    text-align: left;
    justify-content: flex-start;
}

/* ======================================================
   CONOCER – ESCRITORIO CONTENIDO
   - Móvil se mantiene exactamente igual
   - En web la experiencia no se estira a pantalla completa
====================================================== */
@media (min-width: 1024px){
  .discover-wrapper{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 72px));
    max-width: 440px;
  }

  .discover-card{
    border-radius: 30px;
    box-shadow: 0 22px 60px rgba(15,17,21,0.16);
  }

  .card-info{
    padding: 20px;
  }

  .discover-actions{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 72px));
    max-width: 440px;
  }

  .discover-empty{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 72px));
    max-width: 440px;
  }

  .undo-bar{
    top: 16px;
  }

}