/* /Components/AIAssistant/ChatWidget.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Sofi Chat Widget — White & Purple Theme
   ══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root[b-yjxje0vw6a] {
    --sofi-bg: #ffffff;
    --sofi-surface: #f0fdfa;
    --sofi-border: rgba(13, 148, 136, 0.15);
    --sofi-gold: #0d9488;
    --sofi-gold-dim: rgba(13, 148, 136, 0.08);
    --sofi-text: #0f172a;
    --sofi-text-dim: #6b7280;
    --sofi-radius: 16px;
    --sofi-font-title: 'Inter', system-ui, sans-serif;
    --sofi-font-body: 'Inter', system-ui, sans-serif;
}

/* ── Botón flotante ── */
.chat-fab[b-yjxje0vw6a] {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #5eead4);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(13, 148, 136, 0.4);
    z-index: 9999;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-fab:hover[b-yjxje0vw6a] {
    transform: scale(1.08);
    box-shadow: 0 6px 32px rgba(13, 148, 136, 0.6);
}

.chat-fab.hidden[b-yjxje0vw6a] {
    display: none;
}

.fab-icon[b-yjxje0vw6a] {
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.fab-pulse[b-yjxje0vw6a] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #0d9488;
    animation: fabPulse-b-yjxje0vw6a 2.5s ease-out infinite;
    pointer-events: none;
}

@keyframes fabPulse-b-yjxje0vw6a {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ── Panel del chat ── */
.chat-panel[b-yjxje0vw6a] {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 400px;
    height: 650px;
    max-height: calc(100dvh - 56px);
    background: var(--sofi-bg);
    border: 1px solid var(--sofi-border);
    border-radius: var(--sofi-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    box-shadow: 0 16px 64px rgba(13, 148, 136, 0.15), 0 0 0 1px var(--sofi-border);
    animation: slideIn-b-yjxje0vw6a 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    font-family: var(--sofi-font-body);
}

.chat-panel.closing[b-yjxje0vw6a] {
    animation: slideOut-b-yjxje0vw6a 0.25s ease-in forwards;
}

@keyframes slideIn-b-yjxje0vw6a {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideOut-b-yjxje0vw6a {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}

/* ── Header ── */
.chat-header[b-yjxje0vw6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--sofi-surface);
    border-bottom: 1px solid var(--sofi-border);
    flex-shrink: 0;
}

.chat-header-left[b-yjxje0vw6a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar[b-yjxje0vw6a] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #5eead4);
    color: #ffffff;
    font-family: var(--sofi-font-title);
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-header-info[b-yjxje0vw6a] {
    display: flex;
    flex-direction: column;
}

.chat-header-name[b-yjxje0vw6a] {
    color: var(--sofi-text);
    font-family: var(--sofi-font-title);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
}

.chat-header-sub[b-yjxje0vw6a] {
    color: var(--sofi-gold);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chat-header-actions[b-yjxje0vw6a] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-header-btn[b-yjxje0vw6a] {
    background: none;
    border: none;
    color: var(--sofi-text-dim);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.chat-header-btn:hover[b-yjxje0vw6a] {
    background: rgba(13, 148, 136, 0.08);
    color: var(--sofi-text);
}

.chat-fav-btn[b-yjxje0vw6a] {
    color: var(--sofi-gold);
}

.chat-fav-btn:hover[b-yjxje0vw6a] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.header-fav-badge[b-yjxje0vw6a] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fab-fav-badge[b-yjxje0vw6a] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    pointer-events: none;
}

/* ── Área de mensajes ── */
.chat-messages[b-yjxje0vw6a] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    background: #ffffff;
}

.chat-messages[b-yjxje0vw6a]::-webkit-scrollbar {
    width: 4px;
}

.chat-messages[b-yjxje0vw6a]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-yjxje0vw6a]::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.2);
    border-radius: 4px;
}

/* ── Mensajes ── */
.chat-msg[b-yjxje0vw6a] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 85%;
}

.chat-msg.user[b-yjxje0vw6a] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg.bot[b-yjxje0vw6a] {
    align-self: flex-start;
}

.msg-avatar[b-yjxje0vw6a] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #5eead4);
    color: #ffffff;
    font-family: var(--sofi-font-title);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-bubble[b-yjxje0vw6a] {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-msg.user .msg-bubble[b-yjxje0vw6a] {
    background: linear-gradient(135deg, #0d9488, #5eead4);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

.chat-msg.bot .msg-bubble[b-yjxje0vw6a] {
    background: var(--sofi-surface);
    color: var(--sofi-text);
    border: 1px solid var(--sofi-border);
    border-bottom-left-radius: 4px;
}

/* ── Estilos para markdown renderizado dentro de los mensajes del bot ── */
.chat-msg.bot .msg-bubble p[b-yjxje0vw6a] {
    margin: 0 0 8px 0;
}
.chat-msg.bot .msg-bubble p:last-child[b-yjxje0vw6a] {
    margin-bottom: 0;
}
.chat-msg.bot .msg-bubble strong[b-yjxje0vw6a] {
    color: #0f172a;
    font-weight: 700;
}
.chat-msg.bot .msg-bubble em[b-yjxje0vw6a] {
    font-style: italic;
    color: #475569;
}
.chat-msg.bot .msg-bubble ul[b-yjxje0vw6a],
.chat-msg.bot .msg-bubble ol[b-yjxje0vw6a] {
    margin: 6px 0 8px 0;
    padding-left: 20px;
}
.chat-msg.bot .msg-bubble li[b-yjxje0vw6a] {
    margin-bottom: 3px;
    line-height: 1.45;
}
.chat-msg.bot .msg-bubble li[b-yjxje0vw6a]::marker {
    color: #0d9488;
}
.chat-msg.bot .msg-bubble h1[b-yjxje0vw6a],
.chat-msg.bot .msg-bubble h2[b-yjxje0vw6a],
.chat-msg.bot .msg-bubble h3[b-yjxje0vw6a],
.chat-msg.bot .msg-bubble h4[b-yjxje0vw6a] {
    font-size: 15px;
    font-weight: 700;
    margin: 8px 0 4px 0;
    color: #0f172a;
}
.chat-msg.bot .msg-bubble code[b-yjxje0vw6a] {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    color: #0f766e;
}
.chat-msg.bot .msg-bubble table[b-yjxje0vw6a] {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
    width: 100%;
}
.chat-msg.bot .msg-bubble th[b-yjxje0vw6a],
.chat-msg.bot .msg-bubble td[b-yjxje0vw6a] {
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    text-align: left;
}
.chat-msg.bot .msg-bubble th[b-yjxje0vw6a] {
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 600;
}
.chat-msg.bot .msg-bubble a[b-yjxje0vw6a] {
    color: #0d9488;
    text-decoration: underline;
}

/* ── Typing indicator ── */
.typing-bubble[b-yjxje0vw6a] {
    display: flex;
    gap: 5px;
    padding: 12px 18px;
}

.dot[b-yjxje0vw6a] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d9488;
    animation: dotBounce-b-yjxje0vw6a 1.4s ease-in-out infinite;
}

.dot:nth-child(2)[b-yjxje0vw6a] {
    animation-delay: 0.16s;
}

.dot:nth-child(3)[b-yjxje0vw6a] {
    animation-delay: 0.32s;
}

@keyframes dotBounce-b-yjxje0vw6a {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ── Fade in animation ── */
.fade-in[b-yjxje0vw6a] {
    animation: fadeInUp-b-yjxje0vw6a 0.3s ease-out forwards;
}

@keyframes fadeInUp-b-yjxje0vw6a {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Property cards row ── */
.prop-cards-row[b-yjxje0vw6a] {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 4px 8px 36px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.prop-cards-row[b-yjxje0vw6a]::-webkit-scrollbar {
    height: 4px;
}

.prop-cards-row[b-yjxje0vw6a]::-webkit-scrollbar-track {
    background: transparent;
}

.prop-cards-row[b-yjxje0vw6a]::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.2);
    border-radius: 4px;
}

.prop-cards-row[b-yjxje0vw6a] >  .prop-card {
    scroll-snap-align: start;
}

/* ── Quick replies ── */
.quick-replies[b-yjxje0vw6a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 4px 36px;
}

.qr-chip[b-yjxje0vw6a] {
    background: var(--sofi-gold-dim);
    border: 1px solid var(--sofi-border);
    color: var(--sofi-gold);
    font-family: var(--sofi-font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.qr-chip:hover[b-yjxje0vw6a] {
    background: rgba(13, 148, 136, 0.15);
    border-color: #0d9488;
}

/* ── Input area ── */
.chat-input-area[b-yjxje0vw6a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--sofi-surface);
    border-top: 1px solid var(--sofi-border);
    flex-shrink: 0;
}

.chat-input[b-yjxje0vw6a] {
    flex: 1;
    background: var(--sofi-bg);
    border: 1px solid var(--sofi-border);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--sofi-text);
    font-family: var(--sofi-font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.chat-input[b-yjxje0vw6a]::placeholder {
    color: var(--sofi-text-dim);
}

.chat-input:focus[b-yjxje0vw6a] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.chat-input:disabled[b-yjxje0vw6a] {
    opacity: 0.5;
}

.chat-send[b-yjxje0vw6a] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d9488, #5eead4);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
}

.chat-send:hover:not(:disabled)[b-yjxje0vw6a] {
    transform: scale(1.05);
}

.chat-send:disabled[b-yjxje0vw6a] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Embedded mode ── */
.chat-panel.embedded[b-yjxje0vw6a] {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 72px);
    border-radius: 0;
    border: none;
    border-left: 1px solid rgba(13, 148, 136, 0.12);
    box-shadow: none;
    animation: none;
    background: #ffffff;
}

.chat-panel.embedded .chat-header[b-yjxje0vw6a] {
    background: #f0fdfa;
    border-bottom: 1px solid rgba(13, 148, 136, 0.12);
}

.chat-panel.embedded .chat-messages[b-yjxje0vw6a] {
    background: #ffffff;
}

.chat-panel.embedded .chat-input-area[b-yjxje0vw6a] {
    background: #f0fdfa;
    border-top: 1px solid rgba(13, 148, 136, 0.12);
}

.chat-panel.embedded .chat-input[b-yjxje0vw6a] {
    background: #ffffff;
    border-color: rgba(13, 148, 136, 0.2);
    color: #0f172a;
}

.chat-panel.embedded .chat-input[b-yjxje0vw6a]::placeholder {
    color: #9ca3af;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .chat-panel[b-yjxje0vw6a] {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        bottom: 8px;
        right: 8px;
        border-radius: 12px;
    }

    .chat-fab[b-yjxje0vw6a] {
        bottom: 20px;
        right: 20px;
        width: 54px;
        height: 54px;
    }
}
/* /Components/AIAssistant/FavoritesPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   FavoritesPanel — White & Purple Theme
   ══════════════════════════════════════════════════════════ */

.fav-panel[b-m11gii0hkm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

.fav-header[b-m11gii0hkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f0fdfa;
    border-bottom: 1px solid rgba(13, 148, 136, 0.15);
    flex-shrink: 0;
}

.fav-title[b-m11gii0hkm] {
    color: #0f172a;
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

.fav-header-actions[b-m11gii0hkm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fav-compare-btn[b-m11gii0hkm] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 8px;
    color: #0d9488;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.fav-compare-btn:hover[b-m11gii0hkm] {
    background: rgba(13, 148, 136, 0.15);
    border-color: #0d9488;
}

.fav-back[b-m11gii0hkm] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #0d9488;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}

.fav-back:hover[b-m11gii0hkm] {
    background: rgba(13, 148, 136, 0.1);
}

/* ── Lista ── */
.fav-list[b-m11gii0hkm] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fav-list[b-m11gii0hkm]::-webkit-scrollbar {
    width: 4px;
}

.fav-list[b-m11gii0hkm]::-webkit-scrollbar-track {
    background: transparent;
}

.fav-list[b-m11gii0hkm]::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.2);
    border-radius: 4px;
}

/* ── Empty state ── */
.fav-empty[b-m11gii0hkm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
}

.fav-empty-icon[b-m11gii0hkm] {
    color: rgba(13, 148, 136, 0.3);
}

.fav-empty-text[b-m11gii0hkm] {
    color: #0f172a;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.fav-empty-sub[b-m11gii0hkm] {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}

/* ── Favorite item ── */
.fav-item[b-m11gii0hkm] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0fdfa;
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: 12px;
    padding: 10px;
    transition: border-color 0.15s;
}

.fav-item:hover[b-m11gii0hkm] {
    border-color: rgba(13, 148, 136, 0.3);
}

.fav-item-img[b-m11gii0hkm] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.fav-item-info[b-m11gii0hkm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fav-item-title[b-m11gii0hkm] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-item-price[b-m11gii0hkm] {
    color: #0d9488;
    font-size: 14px;
    font-weight: 600;
}

.fav-item-neighborhood[b-m11gii0hkm] {
    color: #6b7280;
    font-size: 12px;
}

.fav-item-remove[b-m11gii0hkm] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.fav-item-remove:hover[b-m11gii0hkm] {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

/* ── Fade in ── */
.fade-in[b-m11gii0hkm] {
    animation: fadeInUp-b-m11gii0hkm 0.3s ease-out forwards;
}

@keyframes fadeInUp-b-m11gii0hkm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/AIAssistant/PropertyCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   PropertyCard — Listo Casas Teal Theme
   Paleta: #0d9488 (teal-600) · #0f766e (teal-700) · #5eead4 (teal-300)
   ══════════════════════════════════════════════════════════ */

.prop-card[b-0dibymd4vj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    width: 280px;
    flex-shrink: 0;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    animation: cardReveal-b-0dibymd4vj 0.4s ease-out both;
    font-family: 'Inter', system-ui, sans-serif;
}

.prop-card:hover[b-0dibymd4vj] {
    border-color: #0d9488;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(13, 148, 136, 0.15);
}

@keyframes cardReveal-b-0dibymd4vj {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Imagen ── */
.prop-img-wrap[b-0dibymd4vj] {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #f0fdfa;
}

.prop-img[b-0dibymd4vj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.prop-card:hover .prop-img[b-0dibymd4vj] {
    transform: scale(1.04);
}

.prop-price-overlay[b-0dibymd4vj] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.8));
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

/* ── Badges ── */
.prop-badge[b-0dibymd4vj] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
}

.badge-nuevo[b-0dibymd4vj] {
    background: linear-gradient(135deg, #0d9488, #0f766e);
}

.badge-exclusivo[b-0dibymd4vj] {
    background: linear-gradient(135deg, #0f766e, #134e4a);
}

.badge-oportunidad[b-0dibymd4vj] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* ── Favorite button ── */
.prop-fav-btn[b-0dibymd4vj] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(226, 232, 240, 0.6);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, color 0.15s;
}

.prop-fav-btn:hover[b-0dibymd4vj] {
    background: #ffffff;
    color: #0d9488;
    transform: scale(1.1);
}

.prop-fav-btn.is-fav[b-0dibymd4vj] {
    color: #e11d48;
    background: #fff1f2;
    border-color: #fecdd3;
}

.prop-fav-btn.is-fav:hover[b-0dibymd4vj] {
    background: #ffe4e6;
}

/* ── Body ── */
.prop-body[b-0dibymd4vj] {
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prop-title[b-0dibymd4vj] {
    color: #0f172a;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Meta info ── */
.prop-meta[b-0dibymd4vj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.prop-meta-item[b-0dibymd4vj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #475569;
}

.prop-meta-item svg[b-0dibymd4vj] {
    color: #0d9488;
}

.prop-neighborhood[b-0dibymd4vj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #0f766e;
    font-weight: 500;
}

.prop-neighborhood svg[b-0dibymd4vj] {
    color: #0d9488;
}

/* ── Botones ── */
.prop-actions[b-0dibymd4vj] {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.prop-btn[b-0dibymd4vj] {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    text-align: center;
}

.prop-btn:hover[b-0dibymd4vj] {
    transform: translateY(-1px);
}

.prop-btn-primary[b-0dibymd4vj] {
    background: #0d9488;
    color: #ffffff;
    border: 1px solid #0d9488;
}

.prop-btn-primary:hover[b-0dibymd4vj] {
    background: #0f766e;
    border-color: #0f766e;
}

.prop-btn-outline[b-0dibymd4vj] {
    background: #ffffff;
    color: #0d9488;
    border: 1px solid #0d9488;
}

.prop-btn-outline:hover[b-0dibymd4vj] {
    background: #f0fdfa;
    border-color: #0f766e;
    color: #0f766e;
}
/* /Components/AIAssistant/PropertyComparator.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   PropertyComparator — White & Purple Theme
   ══════════════════════════════════════════════════════════ */

.comp-panel[b-nsve18oz8r] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

.comp-header[b-nsve18oz8r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f0fdfa;
    border-bottom: 1px solid rgba(13, 148, 136, 0.15);
    flex-shrink: 0;
}

.comp-title[b-nsve18oz8r] {
    color: #0f172a;
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

.comp-back[b-nsve18oz8r] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #0d9488;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}

.comp-back:hover[b-nsve18oz8r] {
    background: rgba(13, 148, 136, 0.1);
}

/* ── Body ── */
.comp-body[b-nsve18oz8r] {
    flex: 1;
    overflow: auto;
    padding: 12px;
}

.comp-body[b-nsve18oz8r]::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.comp-body[b-nsve18oz8r]::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.2);
    border-radius: 4px;
}

/* ── Table ── */
.comp-table[b-nsve18oz8r] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: fit-content;
}

.comp-row[b-nsve18oz8r] {
    display: grid;
    grid-template-columns: 80px repeat(var(--cols, 2), 1fr);
    gap: 0;
    align-items: center;
}

.comp-row-img[b-nsve18oz8r] {
    grid-template-columns: repeat(var(--cols, 2), 1fr);
    margin-bottom: 4px;
}

.comp-row-alt[b-nsve18oz8r] {
    background: #f0fdfa;
    border-radius: 6px;
}

.comp-label[b-nsve18oz8r] {
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px;
}

.comp-cell[b-nsve18oz8r] {
    padding: 10px 8px;
    color: #0f172a;
    font-size: 13px;
    text-align: center;
    border-left: 1px solid rgba(13, 148, 136, 0.08);
}

.comp-cell:first-child[b-nsve18oz8r] {
    border-left: none;
}

.comp-img[b-nsve18oz8r] {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.comp-cell-title[b-nsve18oz8r] {
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 13px;
    color: #0f172a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.comp-cell-price[b-nsve18oz8r] {
    color: #0d9488;
    font-weight: 600;
    font-size: 14px;
}

.comp-cell-gold[b-nsve18oz8r] {
    color: #0d9488;
}

.comp-yes[b-nsve18oz8r] {
    color: #2ecc71;
    font-weight: 500;
}

.comp-no[b-nsve18oz8r] {
    color: #9ca3af;
}
/* /Components/AIAssistant/PropertyDetail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   PropertyDetail — White & Purple Theme
   ══════════════════════════════════════════════════════════ */

.detail-panel[b-qqm9v2xiqp] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

.detail-panel[b-qqm9v2xiqp]::-webkit-scrollbar {
    width: 4px;
}

.detail-panel[b-qqm9v2xiqp]::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.2);
    border-radius: 4px;
}

/* ── Imagen ── */
.detail-img-wrap[b-qqm9v2xiqp] {
    position: relative;
    width: 100%;
    height: 220px;
    flex-shrink: 0;
}

.detail-img[b-qqm9v2xiqp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-img-overlay[b-qqm9v2xiqp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(rgba(0,0,0,0.5), transparent);
}

.detail-top-btn[b-qqm9v2xiqp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}

.detail-top-btn:hover[b-qqm9v2xiqp] {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.detail-top-btn.is-fav[b-qqm9v2xiqp] {
    color: #e74c3c;
}

.detail-badge[b-qqm9v2xiqp] {
    position: absolute;
    bottom: 12px;
    left: 14px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
}

.badge-nuevo[b-qqm9v2xiqp] {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.badge-exclusivo[b-qqm9v2xiqp] {
    background: linear-gradient(135deg, #0d9488, #5eead4);
}

.badge-oportunidad[b-qqm9v2xiqp] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* ── Body ── */
.detail-body[b-qqm9v2xiqp] {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-price[b-qqm9v2xiqp] {
    color: #0f172a;
    font-family: 'Inter', serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
}

.detail-operation[b-qqm9v2xiqp] {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #0d9488;
    background: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.2);
}

.detail-title[b-qqm9v2xiqp] {
    color: #0f172a;
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    line-height: 1.3;
}

.detail-location[b-qqm9v2xiqp] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 13px;
}

.detail-location svg[b-qqm9v2xiqp] {
    color: #0d9488;
    flex-shrink: 0;
}

/* ── Specs chips ── */
.detail-specs[b-qqm9v2xiqp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-chip[b-qqm9v2xiqp] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #f0fdfa;
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
}

.detail-chip svg[b-qqm9v2xiqp] {
    color: #0d9488;
}

/* ── Sections ── */
.detail-section[b-qqm9v2xiqp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-section-title[b-qqm9v2xiqp] {
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
}

.detail-description[b-qqm9v2xiqp] {
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ── Amenities ── */
.detail-amenities[b-qqm9v2xiqp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-amenity-tag[b-qqm9v2xiqp] {
    padding: 5px 12px;
    background: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: 20px;
    color: #0d9488;
    font-size: 12px;
    font-weight: 500;
}

/* ── Schedule button ── */
.detail-schedule-btn[b-qqm9v2xiqp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 4px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d9488, #5eead4);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.detail-schedule-btn:hover[b-qqm9v2xiqp] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}
/* /Components/AIAssistant/ProyectoCard.razor.rz.scp.css */
/* ============================================================
   ProyectoCard — card compacta para resultados de buscar_proyectos
   en el chat de WillyAI. Hermana visual de PropertyCard pero con
   la jerarquía info que importa para proyectos: etapa, avance,
   fecha de entrega, vivienda promovida.
   ============================================================ */

[b-8zarwk1tnh] .proy-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    width: 280px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                border-color 0.18s ease;
    opacity: 0;
    animation: proy-card-in-b-8zarwk1tnh 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Variante "compact" — usada en el grid de /favoritos. Width 100% (en lugar
   de fijo) para que se adapte al grid-template-columns del padre, e imagen
   más alta porque tenemos más ancho para mostrar. */
[b-8zarwk1tnh] .proy-card--compact {
    width: 100%;
    flex-shrink: 1;
}
[b-8zarwk1tnh] .proy-card--compact .proy-img-wrap {
    height: 180px;
}

@keyframes proy-card-in-b-8zarwk1tnh {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

[b-8zarwk1tnh] .proy-card:hover {
    transform: translateY(-3px);
    border-color: #5eead4;
    box-shadow: 0 12px 28px -10px rgba(13, 148, 136, 0.35);
}

/* ── Imagen ── */
[b-8zarwk1tnh] .proy-img-wrap {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #f1f5f9;
}
[b-8zarwk1tnh] .proy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
[b-8zarwk1tnh] .proy-card:hover .proy-img {
    transform: scale(1.05);
}
[b-8zarwk1tnh] .proy-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

[b-8zarwk1tnh] .proy-precio-overlay {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    letter-spacing: 0.01em;
}

/* ── Badges sobre la imagen ── */
[b-8zarwk1tnh] .proy-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
}
[b-8zarwk1tnh] .proy-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
[b-8zarwk1tnh] .proy-badge--vp {
    background: rgba(13, 148, 136, 0.92);
    color: white;
}
[b-8zarwk1tnh] .proy-badge--preventa {
    background: rgba(124, 58, 237, 0.9);
    color: white;
}
[b-8zarwk1tnh] .proy-badge--prox {
    background: rgba(245, 158, 11, 0.92);
    color: white;
}
[b-8zarwk1tnh] .proy-badge--obra {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
}

/* ── Body ── */
[b-8zarwk1tnh] .proy-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

[b-8zarwk1tnh] .proy-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

[b-8zarwk1tnh] .proy-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.2;
}

[b-8zarwk1tnh] .proy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.72rem;
    color: #475569;
    margin-top: 2px;
}
[b-8zarwk1tnh] .proy-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

[b-8zarwk1tnh] .proy-entrega {
    font-size: 0.74rem;
    color: #475569;
    margin-top: 4px;
}
[b-8zarwk1tnh] .proy-entrega-label {
    color: #64748b;
}
[b-8zarwk1tnh] .proy-entrega strong {
    color: #0d9488;
    font-weight: 700;
}
[b-8zarwk1tnh] .proy-scarcity {
    color: #dc2626;
    font-weight: 600;
}

/* ── Actions ── */
[b-8zarwk1tnh] .proy-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
[b-8zarwk1tnh] .proy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
    border: none;
    font-family: inherit;
}
[b-8zarwk1tnh] .proy-btn-primary {
    background: #0d9488;
    color: white;
}
[b-8zarwk1tnh] .proy-btn-primary:hover {
    background: #0f766e;
    transform: translateY(-1px);
}
[b-8zarwk1tnh] .proy-bancos {
    font-size: 0.66rem;
    color: #94a3b8;
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Responsive: en mobile las cards van full-width apiladas */
@media (max-width: 480px) {
    [b-8zarwk1tnh] .proy-card {
        width: 100%;
    }
}
/* /Components/AIAssistant/ScheduleForm.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   ScheduleForm — White & Purple Theme
   ══════════════════════════════════════════════════════════ */

.sched-panel[b-drh5l7w11q] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    background: #ffffff;
}

/* ── Header ── */
.sched-header[b-drh5l7w11q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f0fdfa;
    border-bottom: 1px solid rgba(13, 148, 136, 0.15);
    flex-shrink: 0;
}

.sched-back[b-drh5l7w11q] {
    background: none;
    border: none;
    color: #0d9488;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.sched-back:hover[b-drh5l7w11q] {
    background: rgba(13, 148, 136, 0.1);
}

.sched-title[b-drh5l7w11q] {
    color: #0f172a;
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

/* ── Body ── */
.sched-body[b-drh5l7w11q] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sched-body[b-drh5l7w11q]::-webkit-scrollbar {
    width: 4px;
}

.sched-body[b-drh5l7w11q]::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.2);
    border-radius: 4px;
}

/* ── Propiedad mini ── */
.sched-prop[b-drh5l7w11q] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0fdfa;
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: 12px;
    padding: 10px;
}

.sched-prop-img[b-drh5l7w11q] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.sched-prop-info[b-drh5l7w11q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sched-prop-title[b-drh5l7w11q] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sched-prop-price[b-drh5l7w11q] {
    color: #0d9488;
    font-size: 15px;
    font-weight: 600;
}

/* ── Sections ── */
.sched-section[b-drh5l7w11q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sched-label[b-drh5l7w11q] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ── Day/Time options ── */
.sched-options[b-drh5l7w11q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.sched-option[b-drh5l7w11q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: 10px;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    min-width: 0;
}

.sched-option:hover[b-drh5l7w11q] {
    border-color: rgba(13, 148, 136, 0.4);
    transform: translateY(-1px);
}

.sched-option.selected[b-drh5l7w11q] {
    border-color: #0d9488;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(94, 234, 212, 0.12));
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
}

.sched-option:active:not(:disabled)[b-drh5l7w11q] {
    transform: scale(0.97);
}

.sched-option-main[b-drh5l7w11q] {
    font-size: 14px;
    font-weight: 500;
}

.sched-option-sub[b-drh5l7w11q] {
    font-size: 18px;
    font-weight: 600;
    color: #0d9488;
}

.time-option[b-drh5l7w11q] {
    padding: 11px 12px;
    justify-content: center;
}

.time-option .sched-option-main[b-drh5l7w11q] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.time-option.selected .sched-option-main[b-drh5l7w11q] {
    color: #0d9488;
}

/* ── Inputs ── */
.sched-input[b-drh5l7w11q] {
    background: #ffffff;
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sched-input[b-drh5l7w11q]::placeholder {
    color: #9ca3af;
}

.sched-input:focus[b-drh5l7w11q] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

/* ── Confirm button ── */
.sched-confirm[b-drh5l7w11q] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d9488, #5eead4);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.sched-confirm:hover:not(:disabled)[b-drh5l7w11q] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}

.sched-confirm:disabled[b-drh5l7w11q] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Success screen ── */
.sched-success[b-drh5l7w11q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    gap: 16px;
    background: #ffffff;
}

.sched-check[b-drh5l7w11q] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2ecc71;
    animation: checkPop-b-drh5l7w11q 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes checkPop-b-drh5l7w11q {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.check-path[b-drh5l7w11q] {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck-b-drh5l7w11q 0.5s 0.3s ease-out forwards;
}

@keyframes drawCheck-b-drh5l7w11q {
    to {
        stroke-dashoffset: 0;
    }
}

.sched-error[b-drh5l7w11q] {
    padding: 10px 14px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #e74c3c;
    font-size: 13px;
    font-weight: 500;
}

.sched-success-title[b-drh5l7w11q] {
    color: #0f172a;
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0;
}

.sched-success-sub[b-drh5l7w11q] {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
    text-align: center;
}

/* ── Summary ── */
.sched-summary[b-drh5l7w11q] {
    width: 100%;
    background: #f0fdfa;
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sched-summary-row[b-drh5l7w11q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.sched-summary-label[b-drh5l7w11q] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sched-summary-value[b-drh5l7w11q] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}
/* /Components/AIAssistant/WillyToolsPanel.razor.rz.scp.css */
/* ============================================================
   WILLY TOOLS PANEL
   Panel de herramientas IA debajo del chat en /willy
   Accent: teal #0d9488 / violet #7c3aed (complement IA)
   ============================================================ */

.wt-panel[b-m0ycy27pk5] {
    margin-top: 24px;
    padding: 28px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    font-family: "Sora", sans-serif;
}

.wt-header[b-m0ycy27pk5] { margin-bottom: 20px; }

.wt-eyebrow[b-m0ycy27pk5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(13,148,136,0.1), rgba(124,58,237,0.1));
    color: #0d9488;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    border: 1px solid rgba(13,148,136,0.2);
}

.wt-header h3[b-m0ycy27pk5] {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}

.wt-header p[b-m0ycy27pk5] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    max-width: 540px;
}

/* ── Grid de cards ── */
.wt-grid[b-m0ycy27pk5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.wt-card[b-m0ycy27pk5] {
    position: relative;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 18px 52px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    min-height: 180px;
}

.wt-card[b-m0ycy27pk5]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,148,136,0.05), rgba(124,58,237,0.05));
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.wt-card:hover[b-m0ycy27pk5] {
    border-color: #5eead4;
    box-shadow: 0 10px 30px rgba(13, 148, 136, 0.15);
    transform: translateY(-3px);
}

.wt-card:hover[b-m0ycy27pk5]::before {
    opacity: 1;
}

.wt-card--primary[b-m0ycy27pk5] {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0f766e 100%);
    border-color: transparent;
    color: #fff;
}

.wt-card--primary[b-m0ycy27pk5]::before {
    background: radial-gradient(circle at 20% 0%, rgba(94,234,212,0.18), transparent 50%);
    opacity: 1;
}

.wt-card--primary:hover[b-m0ycy27pk5] {
    box-shadow: 0 18px 40px rgba(13, 148, 136, 0.35);
}

.wt-card--primary .wt-card-cta[b-m0ycy27pk5] { color: #5eead4; }
.wt-card--primary p[b-m0ycy27pk5] { color: rgba(255,255,255,0.75); }
.wt-card--primary h4[b-m0ycy27pk5] { color: #fff; }

.wt-card--soon[b-m0ycy27pk5] { opacity: 0.88; }
.wt-card--soon:hover[b-m0ycy27pk5] { opacity: 1; }
.wt-card--soon .wt-card-cta--soon[b-m0ycy27pk5] { color: var(--color-text-subtle); }

.wt-card-badge[b-m0ycy27pk5] {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    z-index: 2;
}

.wt-card-badge--soon[b-m0ycy27pk5] {
    background: #e2e8f0;
    color: #64748b;
}

.wt-card-icon[b-m0ycy27pk5] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0fdfa, #e6fffa);
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    transition: transform 0.2s;
}

.wt-card--primary .wt-card-icon[b-m0ycy27pk5] {
    background: rgba(255,255,255,0.14);
    color: #5eead4;
    backdrop-filter: blur(10px);
}

.wt-card:hover .wt-card-icon[b-m0ycy27pk5] {
    transform: scale(1.06);
}

.wt-card h4[b-m0ycy27pk5] {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}

.wt-card p[b-m0ycy27pk5] {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    position: relative;
    z-index: 1;
}

.wt-card-cta[b-m0ycy27pk5] {
    position: absolute;
    bottom: 16px;
    left: 18px;
    font-size: 12px;
    font-weight: 700;
    color: #0d9488;
    letter-spacing: 0.02em;
}

/* ── Toast para cards "BETA / PRÓXIMAMENTE" ──
   Aparece debajo del grid cuando el usuario clickea Tours 3D o Pagos.
   Antes esas cards no tenían @onclick y parecían botones muertos —
   ahora confirman que se anotó el interés. */
.wt-toast[b-m0ycy27pk5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0fdfa, #ffffff);
    border: 1.5px solid #99f6e4;
    border-left: 4px solid #0d9488;
    border-radius: 12px;
    color: #0f172a;
    animation: wt-slide-in-b-m0ycy27pk5 0.22s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.wt-toast > svg[b-m0ycy27pk5] {
    flex: 0 0 auto;
    color: #0d9488;
    margin-top: 1px;
}

.wt-toast > div[b-m0ycy27pk5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wt-toast strong[b-m0ycy27pk5] {
    font-size: 14px;
    font-weight: 800;
    color: #0d9488;
}

.wt-toast span[b-m0ycy27pk5] {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.wt-toast-close[b-m0ycy27pk5] {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: none;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}

.wt-toast-close:hover[b-m0ycy27pk5] {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Mini-calculadoras ── */
.wt-mini[b-m0ycy27pk5] {
    margin-top: 24px;
    padding: 22px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    animation: wt-slide-in-b-m0ycy27pk5 0.22s cubic-bezier(0.17, 0.84, 0.44, 1);
}

@keyframes wt-slide-in-b-m0ycy27pk5 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wt-mini-head[b-m0ycy27pk5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.wt-mini-head h4[b-m0ycy27pk5] {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.wt-mini-close[b-m0ycy27pk5] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.wt-mini-close:hover[b-m0ycy27pk5] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.wt-mini-desc[b-m0ycy27pk5] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.55;
}

.wt-mini-fields[b-m0ycy27pk5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.wt-field[b-m0ycy27pk5] { display: flex; flex-direction: column; gap: 5px; }

.wt-field label[b-m0ycy27pk5] {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wt-field input[b-m0ycy27pk5],
.wt-field select[b-m0ycy27pk5],
.wt-input-group select[b-m0ycy27pk5],
.wt-input-group input[b-m0ycy27pk5] {
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wt-field input:focus[b-m0ycy27pk5],
.wt-field select:focus[b-m0ycy27pk5],
.wt-input-group input:focus[b-m0ycy27pk5],
.wt-input-group select:focus[b-m0ycy27pk5] {
    border-color: #0d9488;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.wt-input-group[b-m0ycy27pk5] {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.wt-input-group:focus-within[b-m0ycy27pk5] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.wt-input-group select[b-m0ycy27pk5] {
    border: none;
    border-right: 1.5px solid #e2e8f0;
    border-radius: 0;
    background: #f1f5f9;
    padding: 9px 10px;
    min-width: 70px;
}

.wt-input-group input[b-m0ycy27pk5] {
    border: none;
    border-radius: 0;
    flex: 1;
    background: #fff;
}

/* Results */
.wt-results[b-m0ycy27pk5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #f0fdfa, #ffffff);
    border: 1px solid #99f6e4;
    border-radius: 12px;
    margin-top: 6px;
}

.wt-result[b-m0ycy27pk5] { display: flex; flex-direction: column; gap: 2px; }

.wt-result span[b-m0ycy27pk5] {
    font-size: 10.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wt-result strong[b-m0ycy27pk5] {
    font-size: 17px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.wt-result--highlight strong[b-m0ycy27pk5] {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 20px;
}

.wt-disclaimer[b-m0ycy27pk5] {
    font-size: 11.5px;
    color: var(--color-text-subtle);
    margin: 12px 0 0;
    line-height: 1.55;
}

/* Chips (sugerencias para el chat) */
.wt-chip-row[b-m0ycy27pk5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 10px;
}

.wt-chip[b-m0ycy27pk5] {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
}

.wt-chip:hover[b-m0ycy27pk5] {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(13,148,136,0.25);
}

/* Responsive */
@media (max-width: 768px) {
    .wt-panel[b-m0ycy27pk5] { padding: 20px 16px; }
    .wt-grid[b-m0ycy27pk5] { grid-template-columns: 1fr 1fr; gap: 10px; }
    .wt-card[b-m0ycy27pk5] { padding: 14px 14px 46px; min-height: 160px; }
    .wt-mini-fields[b-m0ycy27pk5] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .wt-grid[b-m0ycy27pk5] { grid-template-columns: 1fr; }
}

/* ── Mini de análisis de barrio (con mapa) ─────────────────────── */
.wt-mini--barrio[b-m0ycy27pk5] { max-width: none; }

.wt-chip--active[b-m0ycy27pk5] {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: white !important;
    border-color: #0d9488 !important;
    box-shadow: 0 4px 12px -4px rgba(13, 148, 136, 0.45);
}

.wt-barrio-loading[b-m0ycy27pk5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-top: 14px;
    background: #f1f5f9;
    border-radius: 10px;
    color: #475569;
    font-size: 13.5px;
}

.wt-spinner[b-m0ycy27pk5] {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(13, 148, 136, 0.2);
    border-top-color: #0d9488;
    animation: wt-spin-b-m0ycy27pk5 0.8s linear infinite;
}

@keyframes wt-spin-b-m0ycy27pk5 { to { transform: rotate(360deg); } }

.wt-barrio-summary[b-m0ycy27pk5] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wt-barrio-kpis[b-m0ycy27pk5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wt-barrio-kpi[b-m0ycy27pk5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    text-align: center;
}

.wt-barrio-kpi__n[b-m0ycy27pk5] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0f766e;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wt-barrio-kpi__l[b-m0ycy27pk5] {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.wt-barrio-fuente[b-m0ycy27pk5] {
    font-size: 11.5px;
    color: var(--color-text-subtle);
    margin: 4px 0 0;
    text-align: center;
    font-style: italic;
}

.wt-barrio-error[b-m0ycy27pk5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    background: #fef2f2;
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #991b1b;
    border-radius: 10px;
    font-size: 13px;
}

@media (max-width: 520px) {
    .wt-barrio-kpis[b-m0ycy27pk5] { grid-template-columns: 1fr 1fr; }
    .wt-barrio-kpi:last-child[b-m0ycy27pk5] { grid-column: span 2; }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* Full-screen split shell */
.auth-shell[b-0gfi5fkq4w] {
    position: fixed;
    inset: 0;
    display: flex;
    overflow: hidden;
    font-family: "Inter", system-ui, sans-serif;
}

/* Back button - hidden, login page has its own */
.auth-back-btn[b-0gfi5fkq4w] {
    display: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ======================================= */
/* LISTO CASAS – NAVBAR                    */
/* ======================================= */

.lc-navbar[b-wdivdizx6l] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-soft);
    font-family: "Inter", system-ui, sans-serif;
}

.lc-navbar-inner[b-wdivdizx6l] {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    gap: 24px;
}

/* ── Logo ── */
.lc-logo[b-wdivdizx6l] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.lc-logo svg[b-wdivdizx6l] { color: var(--color-brand); }
.lc-logo strong[b-wdivdizx6l] { font-weight: 800; }

/* ── Nav links ── */
.lc-nav-links[b-wdivdizx6l] {
    display: flex;
    gap: 8px;
}

.lc-nav-link[b-wdivdizx6l] {
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
}

.lc-nav-link:hover[b-wdivdizx6l] {
    background: #f1f5f9;
    color: var(--color-text);
}

/* "Favoritos" en la navbar — mantiene exactamente el mismo look que los
   otros links para que se sienta parte del set, no un elemento decorativo. */
.lc-nav-link--fav[b-wdivdizx6l] {
    display: inline-flex;
    align-items: center;
}

/* Link con badge "Nuevo" — para destacar la sección de Emprendimientos
   recién lanzada. El badge usa el teal de marca con un pulso sutil para
   atraer la atención sin ser invasivo. Sacar el modificador --new del
   markup ~30 días post-launch. */
.lc-nav-link--new[b-wdivdizx6l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lc-nav-badge[b-wdivdizx6l] {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    animation: lc-nav-badge-pulse-b-wdivdizx6l 2.5s ease-in-out infinite;
}

@keyframes lc-nav-badge-pulse-b-wdivdizx6l {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0); }
}

/* ── Actions ── */
.lc-nav-actions[b-wdivdizx6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lc-btn-sofi[b-wdivdizx6l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brand);
    background: var(--color-brand-bg);
    border: 1px solid var(--color-brand-pale);
    transition: all 0.15s;
}

.lc-btn-sofi:hover[b-wdivdizx6l] {
    background: #ccfbf1;
    color: var(--color-brand-dark);
}

.lc-btn-icon[b-wdivdizx6l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--color-text-subtle);
    transition: all 0.15s;
}

.lc-btn-icon:hover[b-wdivdizx6l] {
    background: #f1f5f9;
    color: var(--color-text);
}

.lc-btn-login[b-wdivdizx6l] {
    padding: 8px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: var(--color-brand);
    transition: all 0.15s;
}

.lc-btn-login:hover[b-wdivdizx6l] {
    background: var(--color-brand-dark);
    color: white;
}

/* ── User menu ── */
.lc-user-menu[b-wdivdizx6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.15s;
}

.lc-user-menu:hover[b-wdivdizx6l] { background: #f1f5f9; }

.lc-user-avatar[b-wdivdizx6l] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.lc-user-name[b-wdivdizx6l] {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

/* ── Main ── */
.lc-main[b-wdivdizx6l] {
    min-height: calc(100vh - 64px);
}

/* ── Error UI ── */
#blazor-error-ui[b-wdivdizx6l] {
    background: #fef2f2;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1);
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: #991b1b;
}

#blazor-error-ui .dismiss[b-wdivdizx6l] {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 8px;
}

/* ── Cookie Banner ── */
.lc-cookie-banner[b-wdivdizx6l] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--color-text);
    color: rgba(255,255,255,0.85);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 0.85rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.lc-cookie-banner p[b-wdivdizx6l] {
    margin: 0;
    line-height: 1.5;
}

.lc-cookie-banner a[b-wdivdizx6l] {
    color: var(--color-brand-light);
    text-decoration: underline;
}

.lc-cookie-accept[b-wdivdizx6l] {
    flex-shrink: 0;
    padding: 8px 24px;
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.lc-cookie-accept:hover[b-wdivdizx6l] {
    background: var(--color-brand-dark);
}

/* WillyAI como link inline en la navbar (desktop) y en el drawer (mobile).
   Se destaca con el teal de marca para que parezca un CTA importante, no un
   link más en la barra. Mantiene mismo padding y altura que los hermanos para
   alinear bien en horizontal (desktop) y en columna (drawer mobile). */
.lc-nav-link--willy[b-wdivdizx6l] {
    color: var(--color-brand) !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.lc-nav-link--willy svg[b-wdivdizx6l] { color: var(--color-brand); flex-shrink: 0; }

/* ── Hamburguesa mobile ──
   Botón visible sólo en mobile (≤768px). En desktop está oculto y la nav
   muestra los links inline como siempre. El SVG dentro cambia entre 3-líneas
   (cerrado) y X (abierto) — toggle hecho en el Razor con @if.

   Estilos low-level: nada de framework, transparente, sólo agarra el color
   del texto para no chocar contra cualquier fondo. */
.lc-hamburger[b-wdivdizx6l] {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-text);
    margin-left: auto;
}
.lc-hamburger:hover[b-wdivdizx6l] { background: #f1f5f9; border-radius: 8px; }
.lc-hamburger svg[b-wdivdizx6l] { display: block; }

/* Backdrop semi-transparente detrás del drawer. Solo se renderiza cuando
   _menuMobileAbierto = true. Cubre toda la pantalla para que tap fuera del
   drawer lo cierre y el usuario sienta que "está atendiendo otra cosa". */
.lc-mobile-backdrop[b-wdivdizx6l] {
    position: fixed;
    inset: 64px 0 0 0; /* debajo del navbar de 64px */
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;
    animation: lc-fade-in-b-wdivdizx6l 0.15s ease-out;
}
@keyframes lc-fade-in-b-wdivdizx6l {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    /* Desktop nav: hidden by default. Visible con clase --open via hamburger. */
    .lc-nav-links[b-wdivdizx6l] { display: none; }

    /* Hamburguesa SOLO visible en mobile. */
    .lc-hamburger[b-wdivdizx6l] { display: inline-flex; align-items: center; }

    .lc-user-name[b-wdivdizx6l] { display: none; }
    .lc-navbar-inner[b-wdivdizx6l] {
        padding: 0 12px;
        position: relative;
        gap: 8px;
    }

    /* En mobile, ocultamos el botón "WillyAI" del topbar para que Ingresar
       no quede cortado por falta de espacio. WillyAI sigue accesible desde
       la home (link /willy) y desde el drawer del hamburger. */
    .lc-btn-sofi[b-wdivdizx6l] { display: none; }

    /* Login button más compacto en mobile. */
    .lc-btn-login[b-wdivdizx6l] {
        padding: 8px 14px;
        font-size: 13px;
    }


    /* Drawer abierto: links apilados verticalmente debajo del navbar.
       Position absolute respecto al .lc-navbar (que es sticky / position relative
       transitivamente del DOM). z-index encima del contenido pero igual al backdrop. */
    .lc-nav-links--open[b-wdivdizx6l] {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 64px; /* alto del navbar */
        left: 0;
        right: 0;
        background: white;
        padding: 12px 16px;
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
        border-top: 1px solid var(--color-border-soft);
        z-index: 100;
        animation: lc-slide-down-b-wdivdizx6l 0.18s ease-out;
    }
    .lc-nav-links--open .lc-nav-link[b-wdivdizx6l] {
        padding: 14px 12px;
        border-radius: 10px;
        font-size: 16px;
        color: var(--color-text);
    }
    .lc-nav-links--open .lc-nav-link:hover[b-wdivdizx6l],
    .lc-nav-links--open .lc-nav-link:active[b-wdivdizx6l] {
        background: #f1f5f9;
    }
}
@keyframes lc-slide-down-b-wdivdizx6l {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Botón "Oficina Virtual" en la topbar pública.
   Pill destacado teal, visible solo para inmobiliarias/agentes/admin. */
.lc-btn-ov[b-wdivdizx6l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-brand);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 180ms ease, transform 120ms ease;
}
.lc-btn-ov:hover[b-wdivdizx6l] { background: var(--color-brand-dark); transform: translateY(-1px); }
.lc-btn-ov svg[b-wdivdizx6l] { flex-shrink: 0; }
@media (max-width: 768px) {
    .lc-btn-ov span[b-wdivdizx6l] { display: none; }
    .lc-btn-ov[b-wdivdizx6l] { padding: 6px; width: 32px; height: 32px; justify-content: center; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-jarhwiqiif] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-jarhwiqiif] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-jarhwiqiif] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-jarhwiqiif] {
    font-size: 1.1rem;
}

.bi[b-jarhwiqiif] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-jarhwiqiif] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-jarhwiqiif] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-jarhwiqiif] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-jarhwiqiif] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-jarhwiqiif] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-jarhwiqiif] {
        padding-bottom: 1rem;
    }

    .nav-item[b-jarhwiqiif]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-jarhwiqiif]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-jarhwiqiif]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-jarhwiqiif] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-jarhwiqiif] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-jarhwiqiif] {
        display: none;
    }

    .nav-scrollable[b-jarhwiqiif] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Mapa/MapaInmuebles.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────
   <MapaInmuebles> — Leaflet + MarkerCluster custom look.

   El JS (mapa-inmuebles.js) inyecta DOM con clases que
   matchean estos selectores. Los estilos NO están scoped
   (Blazor isolation no aplica a HTML inyectado por JS),
   por eso usamos prefijo `li-` para evitar colisiones.
   Importante: estos estilos se cargan desde el componente
   pero con `::deep` no nos sirve — los aplicamos con
   selectores globales abajo dentro de un wrapper.
   ───────────────────────────────────────────────────── */

.li-mapa-shell[b-hvudnuu98r] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05),
                0 12px 32px -16px rgba(15, 23, 42, 0.18);
    border: 1px solid #e8edf3;
}

.li-mapa[b-hvudnuu98r] {
    width: 100%;
    height: 100%;
    min-height: 480px;
}

/* Toggle "buscar mientras me muevo" — flota sobre el mapa */
.li-mapa-toggle[b-hvudnuu98r] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    box-shadow: 0 4px 16px -6px rgba(15, 23, 42, 0.18);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.li-mapa-toggle:hover[b-hvudnuu98r] {
    background: #fff;
    box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.22);
}

.li-mapa-toggle input[b-hvudnuu98r] { display: none; }

.li-mapa-toggle-track[b-hvudnuu98r] {
    position: relative;
    width: 32px;
    height: 18px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.18s;
    flex-shrink: 0;
}

.li-mapa-toggle-knob[b-hvudnuu98r] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    transition: transform 0.18s;
}

.li-mapa-toggle input:checked + .li-mapa-toggle-track[b-hvudnuu98r] {
    background: #0d9488;
}

.li-mapa-toggle input:checked + .li-mapa-toggle-track .li-mapa-toggle-knob[b-hvudnuu98r] {
    transform: translateX(14px);
}

.li-mapa-toggle-label[b-hvudnuu98r] { line-height: 1; }

@media (max-width: 480px) {
    .li-mapa-toggle-label[b-hvudnuu98r] { display: none; }
    .li-mapa-toggle[b-hvudnuu98r] { padding: 8px; }
}
/* /Components/Oficina/Layout/OvNotificationBell.razor.rz.scp.css */
/* Estilos de OvNotificationBell movidos a /wwwroot/oficina/css/notifications.css.
   El popover y backdrop salen del flujo del componente y necesitan estilos globales. */
/* /Components/Oficina/Layout/OvSidebar.razor.rz.scp.css */
/* Estilos de OvSidebar movidos a /wwwroot/oficina/css/sidebar.css.
   El CSS scoped no aplica a los <a> renderizados por <NavLink>, por eso
   el sidebar vive como hoja global. */
/* /Components/Oficina/Layout/OvTopbar.razor.rz.scp.css */
/* Estilos de OvTopbar movidos a /wwwroot/oficina/css/topbar.css. */
/* /Components/Oficina/Pages/EmprendimientoEditor.razor.rz.scp.css */
/* ============================================================
   EMPRENDIMIENTO EDITOR — Oficina Virtual
   Editor con sidebar de secciones + form principal. Inputs estilo
   neutro consistente con el resto de la OV (fondo blanco, borde fino,
   foco teal).
   ============================================================ */

[b-sje7hwxcbg] .ee-page { padding-bottom: 40px; font-family: 'Sora', sans-serif; }

/* ── Hero ── */
[b-sje7hwxcbg] .ee-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    flex-wrap: wrap;
}
[b-sje7hwxcbg] .ee-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 8px;
    font-weight: 500;
}
[b-sje7hwxcbg] .ee-back:hover { color: #0d9488; }

[b-sje7hwxcbg] .ee-hero-left h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}
[b-sje7hwxcbg] .ee-hero-left p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}
[b-sje7hwxcbg] .ee-hero-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

/* ── Botones ── */
[b-sje7hwxcbg] .ee-btn-primary {
    background: #0d9488;
    color: white;
    border: none;
    padding: 11px 22px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
    text-decoration: none;
}
[b-sje7hwxcbg] .ee-btn-primary:hover { background: #0f766e; }
[b-sje7hwxcbg] .ee-btn-primary:active { transform: scale(0.98); }
[b-sje7hwxcbg] .ee-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

[b-sje7hwxcbg] .ee-btn-secondary {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 11px 18px;
    border-radius: 9px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.15s, color 0.15s;
    font-family: inherit;
}
[b-sje7hwxcbg] .ee-btn-secondary:hover { border-color: #0d9488; color: #0d9488; }

[b-sje7hwxcbg] .ee-btn-link {
    background: transparent;
    border: none;
    color: #0d9488;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    padding: 5px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
[b-sje7hwxcbg] .ee-btn-link:hover { background: #f0fdfa; }
[b-sje7hwxcbg] .ee-btn-link--danger { color: #dc2626; }
[b-sje7hwxcbg] .ee-btn-link--danger:hover { background: #fef2f2; }

[b-sje7hwxcbg] .ee-req { color: #dc2626; }

/* ── Barra de progreso ──
   Indica en qué paso está el usuario y cuánto le queda. Va entre el hero y el
   layout principal. Color de fill teal (gradiente sutil) matcheando el design
   system. */
[b-sje7hwxcbg] .ee-progress-wrap {
    margin: 0 28px 18px;
    padding: 16px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
[b-sje7hwxcbg] .ee-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #475569;
}
[b-sje7hwxcbg] .ee-progress-label strong { color: #0f172a; font-weight: 700; }
[b-sje7hwxcbg] .ee-progress-pct {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0d9488;
    letter-spacing: -0.01em;
}
[b-sje7hwxcbg] .ee-progress-bar {
    height: 8px;
    background: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
}
[b-sje7hwxcbg] .ee-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%);
    border-radius: 100px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Alerts ── */
[b-sje7hwxcbg] .ee-alert {
    margin: 0 28px 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[b-sje7hwxcbg] .ee-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
[b-sje7hwxcbg] .ee-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
[b-sje7hwxcbg] .ee-alert--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
[b-sje7hwxcbg] .ee-alert-close { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; }

[b-sje7hwxcbg] .ee-alert-body {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
}

/* CTA dentro del alert — para llevar al usuario a /oficina/suscripcion cuando
   choca con el límite de plan. Visualmente integrado pero diferenciable. */
[b-sje7hwxcbg] .ee-alert-cta {
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid currentColor;
    transition: background 0.15s;
}
[b-sje7hwxcbg] .ee-alert-cta:hover { background: white; }

/* ── Loading & empty ── */
[b-sje7hwxcbg] .ee-loading {
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #64748b;
}
[b-sje7hwxcbg] .ee-spinner {
    width: 28px; height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: ee-spin-b-sje7hwxcbg 0.7s linear infinite;
}
@keyframes ee-spin-b-sje7hwxcbg { to { transform: rotate(360deg); } }

[b-sje7hwxcbg] .ee-empty {
    padding: 40px;
    text-align: center;
    color: #64748b;
    margin: 0 28px;
    background: white;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}

/* ── Layout principal: sidebar + content ── */
[b-sje7hwxcbg] .ee-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    padding: 0 28px;
    align-items: start;
}

/* ── Sidebar de secciones ── */
[b-sje7hwxcbg] .ee-tabs {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 16px;
}
[b-sje7hwxcbg] .ee-tab {
    background: transparent;
    border: none;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.12s, color 0.12s;
}
[b-sje7hwxcbg] .ee-tab:hover { background: #f8fafc; color: #0f172a; }
[b-sje7hwxcbg] .ee-tab--active { background: #f0fdfa; color: #0d9488; font-weight: 600; }

[b-sje7hwxcbg] .ee-tab-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[b-sje7hwxcbg] .ee-tab--active .ee-tab-num {
    background: #0d9488;
    color: white;
}

/* ── Content ── */
[b-sje7hwxcbg] .ee-content {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
}

[b-sje7hwxcbg] .ee-section h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
[b-sje7hwxcbg] .ee-section-desc {
    color: #64748b;
    font-size: 0.88rem;
    margin: 0 0 22px;
    line-height: 1.5;
}
[b-sje7hwxcbg] .ee-section-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
[b-sje7hwxcbg] .ee-section-meta { color: #94a3b8; font-size: 0.82rem; }

/* ── Form rows ── */
[b-sje7hwxcbg] .ee-form-row {
    margin-bottom: 16px;
}
[b-sje7hwxcbg] .ee-form-row label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}
[b-sje7hwxcbg] .ee-form-row small {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 0.76rem;
    line-height: 1.4;
}

[b-sje7hwxcbg] .ee-form-row input,
[b-sje7hwxcbg] .ee-form-row select,
[b-sje7hwxcbg] .ee-form-row textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    color: #0f172a;
    background: white;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
[b-sje7hwxcbg] .ee-form-row input:focus,
[b-sje7hwxcbg] .ee-form-row select:focus,
[b-sje7hwxcbg] .ee-form-row textarea:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}
[b-sje7hwxcbg] .ee-form-row textarea { resize: vertical; line-height: 1.5; }

[b-sje7hwxcbg] .ee-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
[b-sje7hwxcbg] .ee-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

/* ── Bancos / Amenities / Checkboxes ── */
[b-sje7hwxcbg] .ee-bancos-grid,
[b-sje7hwxcbg] .ee-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}

[b-sje7hwxcbg] .ee-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.86rem;
    color: #475569;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
[b-sje7hwxcbg] .ee-checkbox:hover { background: #f8fafc; }
[b-sje7hwxcbg] .ee-checkbox input { cursor: pointer; accent-color: #0d9488; }

[b-sje7hwxcbg] .ee-checkbox-inline {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Preview del plan de pago en el editor ──
   Muestra al desarrollador cómo va a quedar el cronograma del comprador
   sobre una unidad ejemplo. Live update cuando cambian los inputs. */
[b-sje7hwxcbg] .ee-plan-preview {
    margin-top: 22px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 12px;
}
[b-sje7hwxcbg] .ee-plan-preview h3 {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: #0f766e;
    font-weight: 700;
}
[b-sje7hwxcbg] .ee-plan-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(13, 148, 136, 0.12);
    font-size: 0.88rem;
    color: #0f172a;
}
[b-sje7hwxcbg] .ee-plan-preview-item:last-child { border-bottom: none; }
[b-sje7hwxcbg] .ee-plan-preview-item strong { font-weight: 600; }
[b-sje7hwxcbg] .ee-plan-preview-item span { color: #0d9488; font-weight: 600; }
[b-sje7hwxcbg] .ee-plan-preview-item--extra strong { color: #475569; font-weight: 500; }
[b-sje7hwxcbg] .ee-plan-preview-warn {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.85rem;
}

/* ── Toggle (Vivienda Promovida) ── */
[b-sje7hwxcbg] .ee-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    background: #f8fafc;
}
[b-sje7hwxcbg] .ee-toggle-row input { display: none; }
[b-sje7hwxcbg] .ee-toggle-track {
    flex-shrink: 0;
    width: 40px; height: 22px;
    background: #cbd5e1;
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
    margin-top: 2px;
}
[b-sje7hwxcbg] .ee-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[b-sje7hwxcbg] .ee-toggle-row input:checked + .ee-toggle-track { background: #10b981; }
[b-sje7hwxcbg] .ee-toggle-row input:checked + .ee-toggle-track .ee-toggle-thumb { transform: translateX(18px); }
[b-sje7hwxcbg] .ee-toggle-text strong { display: block; font-size: 0.95rem; color: #0f172a; margin-bottom: 4px; }
[b-sje7hwxcbg] .ee-toggle-text small { display: block; font-size: 0.82rem; color: #64748b; line-height: 1.5; }

/* ── Unidades ── */
[b-sje7hwxcbg] .ee-unidad-form {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 18px;
}
[b-sje7hwxcbg] .ee-unidad-form h3 { margin: 0 0 14px; font-size: 1rem; color: #0f172a; }
[b-sje7hwxcbg] .ee-unidad-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

[b-sje7hwxcbg] .ee-unidades-empty {
    padding: 30px 20px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
    font-size: 0.9rem;
}

[b-sje7hwxcbg] .ee-unidades-tabla {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
[b-sje7hwxcbg] .ee-unidades-row {
    display: grid;
    grid-template-columns: 0.7fr 0.6fr 0.6fr 0.6fr 0.6fr 1.2fr 1fr 1fr 0.5fr;
    align-items: center;
    padding: 11px 14px;
    font-size: 0.86rem;
    border-bottom: 1px solid #f1f5f9;
}
[b-sje7hwxcbg] .ee-unidades-row:last-child { border-bottom: none; }
[b-sje7hwxcbg] .ee-unidades-row--head {
    background: #f8fafc;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-sje7hwxcbg] .ee-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
[b-sje7hwxcbg] .ee-pill--green { background: #dcfce7; color: #166534; }
[b-sje7hwxcbg] .ee-pill--amber { background: #fef3c7; color: #854d0e; }
[b-sje7hwxcbg] .ee-pill--gray { background: #f1f5f9; color: #64748b; }

/* ── Footer de navegación entre pasos ──
   Anclado al final de la sección activa (no sticky para no robar real estate
   vertical). Anterior a la izquierda, Siguiente/Crear a la derecha. */
[b-sje7hwxcbg] .ee-section-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e2e8f0;
    gap: 12px;
}

[b-sje7hwxcbg] .ee-section-footer .ee-btn-secondary,
[b-sje7hwxcbg] .ee-section-footer .ee-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    [b-sje7hwxcbg] .ee-layout { grid-template-columns: 1fr; }
    [b-sje7hwxcbg] .ee-tabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }
    [b-sje7hwxcbg] .ee-tab { white-space: nowrap; }
}
@media (max-width: 768px) {
    [b-sje7hwxcbg] .ee-hero { padding: 16px; }
    [b-sje7hwxcbg] .ee-layout { padding: 0 16px; }
    [b-sje7hwxcbg] .ee-content { padding: 18px; }
    [b-sje7hwxcbg] .ee-form-grid-2,
    [b-sje7hwxcbg] .ee-form-grid-3 { grid-template-columns: 1fr; }
    [b-sje7hwxcbg] .ee-unidades-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    [b-sje7hwxcbg] .ee-unidades-row--head { display: none; }
}
/* /Components/Oficina/Pages/EmprendimientosOv.razor.rz.scp.css */
/* ============================================================
   EMPRENDIMIENTOS — Oficina Virtual (listado)
   Hereda paleta y tipografía de la app. Hace match con el
   look de las otras páginas OV (Propiedades, Mensajes).
   ============================================================ */

[b-rs52kzlmon] .emp-ov-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    flex-wrap: wrap;
}
[b-rs52kzlmon] .emp-ov-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}
[b-rs52kzlmon] .emp-ov-sub {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.92rem;
}
[b-rs52kzlmon] .emp-ov-hero-actions {
    display: flex;
    gap: 10px;
}

[b-rs52kzlmon] .emp-ov-btn-primary {
    background: #0d9488;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
    text-decoration: none;
}
[b-rs52kzlmon] .emp-ov-btn-primary:hover { background: #0f766e; }
[b-rs52kzlmon] .emp-ov-btn-primary:active { transform: scale(0.98); }
[b-rs52kzlmon] .emp-ov-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

[b-rs52kzlmon] .emp-ov-btn-secondary {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 10px 18px;
    border-radius: 9px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}
[b-rs52kzlmon] .emp-ov-btn-secondary:hover { border-color: #94a3b8; }

[b-rs52kzlmon] .emp-ov-btn-danger {
    background: #dc2626;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
[b-rs52kzlmon] .emp-ov-btn-danger:hover { background: #b91c1c; }
[b-rs52kzlmon] .emp-ov-btn-danger:disabled { opacity: 0.7; cursor: not-allowed; }

[b-rs52kzlmon] .emp-ov-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    margin: 0 28px 28px;
    overflow: hidden;
}

[b-rs52kzlmon] .emp-ov-alert {
    margin: 0 28px 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[b-rs52kzlmon] .emp-ov-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
[b-rs52kzlmon] .emp-ov-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
[b-rs52kzlmon] .emp-ov-alert--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
[b-rs52kzlmon] .emp-ov-alert-close {
    background: transparent; border: none; color: inherit; cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 0 4px;
}

/* ── Loading & empty ── */
[b-rs52kzlmon] .emp-ov-loading {
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #64748b;
    font-size: 0.92rem;
}
[b-rs52kzlmon] .emp-ov-spinner {
    width: 28px; height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: emp-ov-spin-b-rs52kzlmon 0.7s linear infinite;
}
@keyframes emp-ov-spin-b-rs52kzlmon { to { transform: rotate(360deg); } }

[b-rs52kzlmon] .emp-ov-empty {
    padding: 60px 24px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
[b-rs52kzlmon] .emp-ov-empty h2 {
    margin: 16px 0 8px;
    font-size: 1.15rem;
    color: #0f172a;
}
[b-rs52kzlmon] .emp-ov-empty p {
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 22px;
    font-size: 0.92rem;
}

/* ── Tabla ── */
[b-rs52kzlmon] .emp-ov-table {
    display: flex;
    flex-direction: column;
}
[b-rs52kzlmon] .emp-ov-row {
    display: grid;
    grid-template-columns: 70px 2.4fr 2fr 1fr 1fr 1.4fr 1fr 1.6fr;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}
[b-rs52kzlmon] .emp-ov-row:last-child { border-bottom: none; }
[b-rs52kzlmon] .emp-ov-row:not(.emp-ov-row--head):hover { background: #f8fafc; }
[b-rs52kzlmon] .emp-ov-row--head {
    background: #f8fafc;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-rs52kzlmon] .emp-ov-thumb {
    width: 64px; height: 48px;
    border-radius: 6px;
    background: #f1f5f9 center/cover no-repeat;
}
[b-rs52kzlmon] .emp-ov-proyecto strong {
    display: block;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.95rem;
}
[b-rs52kzlmon] .emp-ov-proyecto span {
    color: #64748b;
    font-size: 0.8rem;
}

[b-rs52kzlmon] .emp-ov-avance {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
[b-rs52kzlmon] .emp-ov-etapa-pill {
    align-self: flex-start;
    background: #f0fdfa;
    color: #0f766e;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}
[b-rs52kzlmon] .emp-ov-avance-bar {
    width: 100%;
    height: 5px;
    background: #e2e8f0;
    border-radius: 100px;
    overflow: hidden;
}
[b-rs52kzlmon] .emp-ov-avance-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%);
}
[b-rs52kzlmon] .emp-ov-avance small { font-size: 0.74rem; color: #64748b; }

[b-rs52kzlmon] .emp-ov-unidades {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
[b-rs52kzlmon] .emp-ov-unidades strong { font-size: 1.05rem; color: #0d9488; font-weight: 700; }
[b-rs52kzlmon] .emp-ov-unidades span { font-size: 0.74rem; color: #64748b; }

[b-rs52kzlmon] .emp-ov-entrega { color: #475569; font-size: 0.9rem; font-weight: 500; }

[b-rs52kzlmon] .emp-ov-precio { display: flex; flex-direction: column; line-height: 1.3; }
[b-rs52kzlmon] .emp-ov-precio strong { color: #0f172a; font-weight: 600; font-size: 0.92rem; }
[b-rs52kzlmon] .emp-ov-precio small { color: #94a3b8; font-size: 0.74rem; }

[b-rs52kzlmon] .emp-ov-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
[b-rs52kzlmon] .emp-ov-pill--green { background: #dcfce7; color: #166534; }
[b-rs52kzlmon] .emp-ov-pill--gray { background: #f1f5f9; color: #64748b; }

[b-rs52kzlmon] .emp-ov-acciones {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
[b-rs52kzlmon] .emp-ov-btn-link {
    background: transparent;
    border: 1px solid transparent;
    color: #0d9488;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    padding: 5px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
[b-rs52kzlmon] .emp-ov-btn-link:hover {
    background: #f0fdfa;
}
[b-rs52kzlmon] .emp-ov-btn-link--danger { color: #dc2626; }
[b-rs52kzlmon] .emp-ov-btn-link--danger:hover { background: #fef2f2; }

/* ── Modal ── */
[b-rs52kzlmon] .emp-ov-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
[b-rs52kzlmon] .emp-ov-modal {
    background: white;
    border-radius: 14px;
    padding: 24px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
[b-rs52kzlmon] .emp-ov-modal h3 { margin: 0 0 12px; font-size: 1.1rem; color: #0f172a; }
[b-rs52kzlmon] .emp-ov-modal p { margin: 0 0 20px; color: #475569; line-height: 1.55; font-size: 0.93rem; }
[b-rs52kzlmon] .emp-ov-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 1200px) {
    [b-rs52kzlmon] .emp-ov-row {
        grid-template-columns: 60px 2fr 1.5fr 1fr 1fr 1fr;
    }
    [b-rs52kzlmon] .emp-ov-row > *:nth-child(7), [b-rs52kzlmon] .emp-ov-row > *:nth-child(8) { display: none; }
    [b-rs52kzlmon] .emp-ov-row--head > *:nth-child(7), [b-rs52kzlmon] .emp-ov-row--head > *:nth-child(8) { display: none; }
}
@media (max-width: 768px) {
    [b-rs52kzlmon] .emp-ov-hero { padding: 16px; }
    [b-rs52kzlmon] .emp-ov-card { margin: 0 16px 16px; }
    [b-rs52kzlmon] .emp-ov-row {
        grid-template-columns: 60px 1fr;
        gap: 8px;
    }
    [b-rs52kzlmon] .emp-ov-row > *:nth-child(n+3) { display: none; }
    [b-rs52kzlmon] .emp-ov-row--head { display: none; }
}
/* /Components/Oficina/Pages/Leads.razor.rz.scp.css */
/* Plan Fase 2.3 — KPIs + heatmap del dashboard de leads.
   Solo estilos nuevos (los del listado básico viven en /oficina/css/mensajes.css). */

.ov-kpi-grid[b-vei2fczhg1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.ov-kpi[b-vei2fczhg1] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.ov-kpi--warn[b-vei2fczhg1] {
    border-color: var(--color-warning);
    background: linear-gradient(180deg, #fffbeb 0%, var(--color-surface) 100%);
}

.ov-kpi-num[b-vei2fczhg1] {
    font-family: "Sora", sans-serif;
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: -0.5px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ov-kpi--warn .ov-kpi-num[b-vei2fczhg1] { color: #b45309; }

.ov-kpi-lbl[b-vei2fczhg1] {
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Heatmap (top inmuebles con más consultas) ── */
.ov-heatmap[b-vei2fczhg1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.ov-heatmap-item[b-vei2fczhg1] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px 14px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    overflow: hidden;
}

.ov-heatmap-titulo[b-vei2fczhg1] {
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    grid-column: 1;
    z-index: 1;
}
.ov-heatmap-titulo:hover[b-vei2fczhg1] { color: var(--color-brand-dark); text-decoration: underline; }

.ov-heatmap-dir[b-vei2fczhg1] {
    grid-column: 1;
    font-size: 0.78rem;
    color: var(--color-text-subtle);
    z-index: 1;
}

.ov-heatmap-cant[b-vei2fczhg1] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-weight: 800;
    color: var(--color-brand-dark);
    z-index: 1;
}

.ov-heatmap-bar[b-vei2fczhg1] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-brand-bg) 0%, transparent 100%);
    z-index: 0;
    transition: width 0.3s ease;
}

/* ── Botón export CSV ── */
.ov-csv-btn[b-vei2fczhg1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-pill);
    font-family: "Sora", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.ov-csv-btn:hover[b-vei2fczhg1] {
    border-color: var(--color-brand);
    color: var(--color-brand-dark);
    background: var(--color-brand-bg);
}
/* /Components/Oficina/Shared/OvBadge.razor.rz.scp.css */
.ov-badge[b-ifhpvakxvd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ov-font);
    font-weight: 600;
    border-radius: var(--ov-radius-pill);
    line-height: 1;
    white-space: nowrap;
}
.ov-badge--sm[b-ifhpvakxvd] { padding: 3px 8px; font-size: 11px; }
.ov-badge--md[b-ifhpvakxvd] { padding: 5px 10px; font-size: 12px; }

.ov-badge__dot[b-ifhpvakxvd] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ov-badge--neutral[b-ifhpvakxvd] { background: var(--ov-ink-100); color: var(--ov-ink-700); }
.ov-badge--success[b-ifhpvakxvd] { background: var(--ov-success-bg); color: #065f46; }
.ov-badge--warn[b-ifhpvakxvd]    { background: var(--ov-warn-bg);    color: #92400e; }
.ov-badge--danger[b-ifhpvakxvd]  { background: var(--ov-danger-bg);  color: #991b1b; }
.ov-badge--info[b-ifhpvakxvd]    { background: var(--ov-info-bg);    color: #1e40af; }
.ov-badge--brand[b-ifhpvakxvd]   { background: var(--ov-brand-50);   color: var(--ov-brand-700); }
/* /Components/Oficina/Shared/OvButton.razor.rz.scp.css */
/* OvButton — ver doc del .razor */
.ov-btn[b-14xc842o6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ov-font);
    font-weight: 600;
    border-radius: var(--ov-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--ov-transition), border-color var(--ov-transition), color var(--ov-transition), transform var(--ov-transition);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}
.ov-btn:disabled[b-14xc842o6k],
.ov-btn[aria-busy="true"][b-14xc842o6k] {
    cursor: not-allowed;
    opacity: 0.6;
}
.ov-btn:not(:disabled):active[b-14xc842o6k] { transform: translateY(1px); }

/* ── Sizes ──────────────────────────────────────────────────────────── */
.ov-btn--sm[b-14xc842o6k] { height: 28px; padding: 0 10px; font-size: 12px; }
.ov-btn--md[b-14xc842o6k] { height: 36px; padding: 0 14px; font-size: 13px; }
.ov-btn--lg[b-14xc842o6k] { height: 44px; padding: 0 20px; font-size: 14px; }
.ov-btn--icon-only.ov-btn--sm[b-14xc842o6k] { width: 28px; padding: 0; }
.ov-btn--icon-only.ov-btn--md[b-14xc842o6k] { width: 36px; padding: 0; }
.ov-btn--icon-only.ov-btn--lg[b-14xc842o6k] { width: 44px; padding: 0; }

.ov-btn--full[b-14xc842o6k] { width: 100%; }

/* ── Variants ───────────────────────────────────────────────────────── */
.ov-btn--primary[b-14xc842o6k] {
    background: var(--ov-brand-600);
    color: white;
}
.ov-btn--primary:not(:disabled):hover[b-14xc842o6k] { background: var(--ov-brand-700); }

.ov-btn--secondary[b-14xc842o6k] {
    background: white;
    color: var(--ov-brand-700);
    border-color: var(--ov-ink-200);
}
.ov-btn--secondary:not(:disabled):hover[b-14xc842o6k] {
    border-color: var(--ov-brand-500);
    background: var(--ov-brand-50);
}

.ov-btn--ghost[b-14xc842o6k] {
    background: transparent;
    color: var(--ov-ink-700);
}
.ov-btn--ghost:not(:disabled):hover[b-14xc842o6k] {
    background: var(--ov-ink-100);
    color: var(--ov-ink-900);
}

.ov-btn--danger[b-14xc842o6k] {
    background: var(--ov-danger);
    color: white;
}
.ov-btn--danger:not(:disabled):hover[b-14xc842o6k] { background: #dc2626; }

/* ── Icons + spinner ────────────────────────────────────────────────── */
.ov-btn__icon[b-14xc842o6k] { display: inline-flex; align-items: center; justify-content: center; }
.ov-btn__icon svg[b-14xc842o6k] { width: 1em; height: 1em; stroke-width: 2; }
.ov-btn__label[b-14xc842o6k] { line-height: 1; }

.ov-btn__spin[b-14xc842o6k] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ovBtnSpin-b-14xc842o6k 0.7s linear infinite;
}
@keyframes ovBtnSpin-b-14xc842o6k { to { transform: rotate(360deg); } }
/* /Components/Oficina/Shared/OvCard.razor.rz.scp.css */
.ov-card[b-iaayq93bmm] {
    background: var(--ov-surface);
    border: 1px solid rgba(216, 225, 234, 0.92);
    border-radius: var(--ov-radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.ov-card--muted[b-iaayq93bmm] { background: var(--ov-ink-50); }

.ov-card__header[b-iaayq93bmm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.ov-card--compact .ov-card__header[b-iaayq93bmm] { padding: 12px 16px; }

.ov-card__header-left[b-iaayq93bmm] { flex: 1; min-width: 0; }
.ov-card__title[b-iaayq93bmm] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ov-ink-900);
    line-height: 1.4;
}
.ov-card__subtitle[b-iaayq93bmm] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ov-ink-500);
    line-height: 1.5;
}
.ov-card__header-right[b-iaayq93bmm] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ov-card__body[b-iaayq93bmm] { padding: 20px; }
.ov-card--compact .ov-card__body[b-iaayq93bmm] { padding: 14px 16px; }

.ov-card__footer[b-iaayq93bmm] {
    padding: 12px 20px;
    border-top: 1px solid var(--ov-ink-100);
    background: var(--ov-surface-muted);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Mobile: reducir padding interno y permitir scroll horizontal del body cuando
   una tabla u otro elemento ancho lo necesite. El border-radius se preserva
   porque el overflow: hidden sigue en .ov-card. */
@media (max-width: 768px) {
    .ov-card__header[b-iaayq93bmm] { padding: 12px 14px; }
    .ov-card__body[b-iaayq93bmm] { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ov-card__footer[b-iaayq93bmm] { padding: 10px 14px; flex-wrap: wrap; }
    .ov-card--compact .ov-card__header[b-iaayq93bmm] { padding: 10px 12px; }
    .ov-card--compact .ov-card__body[b-iaayq93bmm] { padding: 12px; }
}
/* /Components/Oficina/Shared/OvEmptyState.razor.rz.scp.css */
.ov-empty[b-8pr80ulidx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
    color: var(--ov-ink-500);
}
.ov-empty__icon[b-8pr80ulidx] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--ov-brand-50), #ecfeff);
    color: var(--ov-brand-600);
    margin-bottom: 20px;
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.08);
}
.ov-empty__title[b-8pr80ulidx] {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ov-ink-900);
}
.ov-empty__subtitle[b-8pr80ulidx] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    max-width: 420px;
}
.ov-empty__actions[b-8pr80ulidx] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
/* /Components/Oficina/Shared/OvModal.razor.rz.scp.css */
.ov-modal-backdrop[b-a9bedfhfsd] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: var(--ov-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: ovModalFade-b-a9bedfhfsd 160ms ease-out;
}
.ov-modal[b-a9bedfhfsd] {
    background: white;
    border-radius: var(--ov-radius-lg);
    box-shadow: var(--ov-shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: ovModalPop-b-a9bedfhfsd 160ms cubic-bezier(0.3, 0.85, 0.4, 1);
}
.ov-modal__header[b-a9bedfhfsd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ov-ink-100);
}
.ov-modal__title[b-a9bedfhfsd] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ov-ink-900);
}
.ov-modal__close[b-a9bedfhfsd] {
    border: none;
    background: transparent;
    color: var(--ov-ink-500);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ov-transition);
}
.ov-modal__close:hover[b-a9bedfhfsd] { background: var(--ov-ink-100); color: var(--ov-ink-900); }
.ov-modal__body[b-a9bedfhfsd] {
    padding: 20px 22px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ov-ink-700);
}
.ov-modal__footer[b-a9bedfhfsd] {
    padding: 14px 22px;
    border-top: 1px solid var(--ov-ink-100);
    background: var(--ov-ink-50);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@keyframes ovModalFade-b-a9bedfhfsd {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ovModalPop-b-a9bedfhfsd {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/Oficina/Shared/OvSkeleton.razor.rz.scp.css */
.ov-skeleton[b-y3xtv59r1z] {
    display: inline-block;
    background: linear-gradient(90deg,
        var(--ov-ink-100) 0%,
        var(--ov-ink-200) 50%,
        var(--ov-ink-100) 100%);
    background-size: 200% 100%;
    animation: ovSkelShimmer-b-y3xtv59r1z 1.4s ease-in-out infinite;
}
@keyframes ovSkelShimmer-b-y3xtv59r1z {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
/* /Components/Oficina/Shared/OvTable.razor.rz.scp.css */
.ov-table[b-tayl27hz7z] {
    background: white;
    border: 1px solid var(--ov-ink-200);
    border-radius: var(--ov-radius-md);
    overflow: hidden;
    box-shadow: var(--ov-shadow-sm);
}
.ov-table__toolbar[b-tayl27hz7z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ov-ink-100);
    flex-wrap: wrap;
}
.ov-table__scroll[b-tayl27hz7z] { overflow-x: auto; }
.ov-table__el[b-tayl27hz7z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ov-ink-700);
}
.ov-table__head th[b-tayl27hz7z] {
    position: sticky;
    top: 0;
    background: var(--ov-ink-50);
    color: var(--ov-ink-600);
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ov-ink-200);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.ov-table__body td[b-tayl27hz7z] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ov-ink-100);
    vertical-align: middle;
}
.ov-table__body tr:last-child td[b-tayl27hz7z] { border-bottom: none; }
.ov-table__body tr:hover[b-tayl27hz7z] { background: var(--ov-ink-50); }
.ov-table__row-skeleton td[b-tayl27hz7z] { padding: 10px 14px; }
.ov-table__footer[b-tayl27hz7z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--ov-ink-100);
    background: var(--ov-ink-50);
    font-size: 12px;
    color: var(--ov-ink-500);
}
/* /Components/Oficina/Shared/OvTabs.razor.rz.scp.css */
.ov-tabs[b-uekpvt709h] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ov-ink-200);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ov-tabs[b-uekpvt709h]::-webkit-scrollbar { display: none; }
.ov-tabs__tab[b-uekpvt709h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-family: var(--ov-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ov-ink-600);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ov-transition), border-color var(--ov-transition);
    margin-bottom: -1px;
}
.ov-tabs__tab:hover[b-uekpvt709h] { color: var(--ov-ink-900); }
.ov-tabs__tab--active[b-uekpvt709h] {
    color: var(--ov-brand-700);
    border-bottom-color: var(--ov-brand-600);
    font-weight: 600;
}
.ov-tabs__icon[b-uekpvt709h] { display: inline-flex; }
.ov-tabs__icon svg[b-uekpvt709h] { width: 14px; height: 14px; }
.ov-tabs__badge[b-uekpvt709h] {
    background: var(--ov-brand-600);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
/* /Components/Oficina/Shared/OvToast.razor.rz.scp.css */
.ov-toast-host[b-88h6iikiat] {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: var(--ov-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.ov-toast[b-88h6iikiat] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ov-radius-md);
    background: white;
    box-shadow: var(--ov-shadow-md);
    border-left: 4px solid var(--ov-ink-400);
    min-width: 280px;
    max-width: 400px;
    animation: ovToastIn-b-88h6iikiat 180ms ease-out;
}
.ov-toast--success[b-88h6iikiat] { border-left-color: var(--ov-success); }
.ov-toast--error[b-88h6iikiat]   { border-left-color: var(--ov-danger);  }
.ov-toast--warn[b-88h6iikiat]    { border-left-color: var(--ov-warn);    }
.ov-toast--info[b-88h6iikiat]    { border-left-color: var(--ov-info);    }

.ov-toast__icon[b-88h6iikiat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ov-toast--success .ov-toast__icon[b-88h6iikiat] { color: var(--ov-success); }
.ov-toast--error   .ov-toast__icon[b-88h6iikiat] { color: var(--ov-danger);  }
.ov-toast--warn    .ov-toast__icon[b-88h6iikiat] { color: var(--ov-warn);    }
.ov-toast--info    .ov-toast__icon[b-88h6iikiat] { color: var(--ov-info);    }

.ov-toast__content[b-88h6iikiat] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ov-toast__title[b-88h6iikiat] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-ink-900);
}
.ov-toast__msg[b-88h6iikiat] {
    font-size: 13px;
    color: var(--ov-ink-700);
    line-height: 1.4;
}
.ov-toast__close[b-88h6iikiat] {
    background: transparent;
    border: none;
    color: var(--ov-ink-400);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.ov-toast__close:hover[b-88h6iikiat] { color: var(--ov-ink-700); }

@keyframes ovToastIn-b-88h6iikiat {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* /Components/Pages/AlertasInmuebleUnsubscribe.razor.rz.scp.css */
.aiu-wrap[b-24jpc0kfxy] {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 64px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef6f6 100%);
}

.aiu-card[b-24jpc0kfxy] {
    width: 100%;
    max-width: 520px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    padding: 40px 32px;
    text-align: center;
}

.aiu-card h1[b-24jpc0kfxy] {
    margin: 0 0 10px;
    font-family: "Sora", sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.1rem);
    font-weight: 800;
    color: #0f172a;
}

.aiu-card p[b-24jpc0kfxy] {
    margin: 0;
    color: #475569;
    line-height: 1.7;
    font-size: 0.98rem;
}

.aiu-icon[b-24jpc0kfxy] {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aiu-icon--ok[b-24jpc0kfxy] {
    background: #ecfeff;
    color: #0891b2;
}

.aiu-icon--error[b-24jpc0kfxy] {
    background: #fef2f2;
    color: #dc2626;
}

.aiu-icon--loading[b-24jpc0kfxy] {
    border: 4px solid rgba(13, 148, 136, 0.15);
    border-top-color: #0d9488;
    animation: aiu-spin-b-24jpc0kfxy 0.75s linear infinite;
}

.aiu-cta[b-24jpc0kfxy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    min-width: 180px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #0d9488;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.aiu-cta:hover[b-24jpc0kfxy] {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(13, 148, 136, 0.18);
}

.aiu-cta--ghost[b-24jpc0kfxy] {
    background: transparent;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.24);
}

@keyframes aiu-spin-b-24jpc0kfxy {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .aiu-card[b-24jpc0kfxy] {
        padding: 32px 22px;
        border-radius: 20px;
    }
}
/* /Components/Pages/Contacto.razor.rz.scp.css */
.ct-page[b-o1beyfyl1p] {
    min-height: calc(100vh - 64px);
    background: #f8fafc;
    font-family: "Inter", system-ui, sans-serif;
    padding: 48px 20px 80px;
}

.ct-container[b-o1beyfyl1p] {
    max-width: 960px;
    margin: 0 auto;
}

.ct-header[b-o1beyfyl1p] {
    text-align: center;
    margin-bottom: 40px;
}

.ct-header h1[b-o1beyfyl1p] {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}

.ct-header p[b-o1beyfyl1p] {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

.ct-grid[b-o1beyfyl1p] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

/* Form card */
.ct-form-card[b-o1beyfyl1p] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ct-form[b-o1beyfyl1p] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ct-field[b-o1beyfyl1p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-field label[b-o1beyfyl1p] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.ct-field input[b-o1beyfyl1p],
.ct-field select[b-o1beyfyl1p],
.ct-field textarea[b-o1beyfyl1p] {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    color: #0f172a;
    transition: border-color 0.15s;
    background: #fff;
}

.ct-field input:focus[b-o1beyfyl1p],
.ct-field select:focus[b-o1beyfyl1p],
.ct-field textarea:focus[b-o1beyfyl1p] {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
}

.ct-field textarea[b-o1beyfyl1p] {
    resize: vertical;
    min-height: 100px;
}

.ct-error[b-o1beyfyl1p] {
    font-size: 0.85rem;
    color: #dc2626;
    background: #fef2f2;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.ct-btn[b-o1beyfyl1p] {
    padding: 12px 24px;
    background: #0d9488;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.ct-btn:hover:not(:disabled)[b-o1beyfyl1p] { background: #0f766e; }
.ct-btn:disabled[b-o1beyfyl1p] { opacity: 0.6; cursor: not-allowed; }

/* Success */
.ct-success[b-o1beyfyl1p] {
    text-align: center;
    padding: 24px 0;
}

.ct-success h3[b-o1beyfyl1p] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin: 16px 0 8px;
}

.ct-success p[b-o1beyfyl1p] {
    color: #64748b;
    font-size: 0.92rem;
    margin: 0 0 24px;
}

/* Info cards */
.ct-info[b-o1beyfyl1p] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-info-card[b-o1beyfyl1p] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ct-info-icon[b-o1beyfyl1p] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f0fdfa;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.ct-info-card h4[b-o1beyfyl1p] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.ct-info-card p[b-o1beyfyl1p] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.ct-info-card a[b-o1beyfyl1p] {
    color: #0d9488;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .ct-grid[b-o1beyfyl1p] {
        grid-template-columns: 1fr;
    }
    .ct-info[b-o1beyfyl1p] {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ct-info-card[b-o1beyfyl1p] {
        flex: 1 1 calc(50% - 6px);
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .ct-info-card[b-o1beyfyl1p] {
        flex: 1 1 100%;
    }
    .ct-form-card[b-o1beyfyl1p] {
        padding: 20px;
    }
}
/* /Components/Pages/Emprendimientos/EmprendimientoDetalle.razor.rz.scp.css */
/* ============================================================
   EMPRENDIMIENTO — Detalle
   Hereda paleta de la app (teal #0d9488, fuente Sora). Densidad
   de información alta pero sin abrumar — cada sección con su
   propio espacio y jerarquía clara. Sidebar sticky con CTAs
   accesibles desde cualquier scroll.
   ============================================================ */

[b-rxsm6rdvq1] .ed-page {
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Sora', sans-serif;
    color: #0f172a;
}

/* ─────────────  BREADCRUMB  ───────────── */
[b-rxsm6rdvq1] .ed-breadcrumb {
    background: white;
    border-bottom: 1px solid #e2e8f0;
}
[b-rxsm6rdvq1] .ed-breadcrumb-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #64748b;
}
[b-rxsm6rdvq1] .ed-breadcrumb a { color: #64748b; text-decoration: none; }
[b-rxsm6rdvq1] .ed-breadcrumb a:hover { color: #0d9488; }
[b-rxsm6rdvq1] .ed-breadcrumb span:not(:last-child) { color: #cbd5e1; }
[b-rxsm6rdvq1] .ed-breadcrumb span:last-child { color: #0f172a; font-weight: 600; }

/* ─────────────  HERO + GALERÍA  ───────────── */
[b-rxsm6rdvq1] .ed-hero {
    background: white;
    padding: 16px 24px 0;
}
[b-rxsm6rdvq1] .ed-gallery {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    height: 460px;
    border-radius: 16px;
    overflow: hidden;
}
[b-rxsm6rdvq1] .ed-gallery-main {
    border: none;
    background: #f1f5f9 center/cover no-repeat;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s, filter 0.3s;
    padding: 0;
}
[b-rxsm6rdvq1] .ed-gallery-main:hover { filter: brightness(0.95); }
[b-rxsm6rdvq1] .ed-gallery-counter {
    position: absolute;
    bottom: 16px; right: 16px;
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}
[b-rxsm6rdvq1] .ed-gallery-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}
[b-rxsm6rdvq1] .ed-gallery-thumb {
    border: none;
    background: #f1f5f9 center/cover no-repeat;
    cursor: pointer;
    position: relative;
    transition: filter 0.2s;
    padding: 0;
}
[b-rxsm6rdvq1] .ed-gallery-thumb:hover { filter: brightness(0.92); }
[b-rxsm6rdvq1] .ed-gallery-thumb-more {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
}

/* ─────────────  HEADER INFO CLAVE  ───────────── */
[b-rxsm6rdvq1] .ed-header {
    background: white;
    padding: 28px 24px;
}
[b-rxsm6rdvq1] .ed-header-inner {
    max-width: 1400px;
    margin: 0 auto;
}
[b-rxsm6rdvq1] .ed-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
[b-rxsm6rdvq1] .ed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
[b-rxsm6rdvq1] .ed-badge--vp { background: #ecfdf5; color: #065f46; }
[b-rxsm6rdvq1] .ed-badge--preventa { background: #f5f3ff; color: #5b21b6; }
[b-rxsm6rdvq1] .ed-badge--obra { background: #eff6ff; color: #1e40af; }
[b-rxsm6rdvq1] .ed-badge--prox { background: #fff7ed; color: #9a3412; }
[b-rxsm6rdvq1] .ed-badge--listo { background: #ecfeff; color: #155e75; }
[b-rxsm6rdvq1] .ed-badge--scarcity { background: #fef2f2; color: #991b1b; }

[b-rxsm6rdvq1] .ed-header-title {
    margin: 0 0 8px;
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
[b-rxsm6rdvq1] .ed-header-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 16px;
}
[b-rxsm6rdvq1] .ed-header-loc svg { color: #0d9488; flex-shrink: 0; }

[b-rxsm6rdvq1] .ed-header-avance {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    max-width: 640px;
    margin-top: 4px;
}
[b-rxsm6rdvq1] .ed-header-avance-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #475569;
}
[b-rxsm6rdvq1] .ed-header-avance-hdr strong { color: #0f172a; font-size: 1.05rem; }
[b-rxsm6rdvq1] .ed-header-entrega { color: #0d9488; font-weight: 600; }
[b-rxsm6rdvq1] .ed-header-avance-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 100px;
    overflow: hidden;
}
[b-rxsm6rdvq1] .ed-header-avance-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%);
    border-radius: 100px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────  SUB-NAV (NO STICKY)  ─────────────
   Decidimos NO hacer sticky este nav. Cuando estaba sticky tapaba contenido
   al scrollear (los headers de las secciones quedaban detrás de la barra).
   Al ser una página de detalle larga con muchas secciones, vale más la
   simplicidad de scroll natural que el atajo de navegación. Si querés
   volver a habilitarlo: `position: sticky; top: 72px` + scroll-margin-top
   en .ed-section (138px). */
[b-rxsm6rdvq1] .ed-subnav {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}
[b-rxsm6rdvq1] .ed-subnav::-webkit-scrollbar { display: none; }
[b-rxsm6rdvq1] .ed-subnav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 4px;
    white-space: nowrap;
}
[b-rxsm6rdvq1] .ed-subnav a {
    padding: 14px 16px;
    color: #64748b;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
[b-rxsm6rdvq1] .ed-subnav a:hover { color: #0d9488; }
[b-rxsm6rdvq1] .ed-subnav a.active,
[b-rxsm6rdvq1] .ed-subnav a:focus { color: #0d9488; border-bottom-color: #0d9488; }

/* ─────────────  BODY LAYOUT  ───────────── */
[b-rxsm6rdvq1] .ed-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}
[b-rxsm6rdvq1] .ed-content { min-width: 0; }

/* ─────────────  SECCIONES GENÉRICAS  ─────────────
   scroll-margin-top deja espacio cuando el browser scrollea a un anchor para
   que el navbar principal de la app (sticky, 72px) no tape el header. */
[b-rxsm6rdvq1] .ed-section {
    background: white;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 22px;
    border: 1px solid #e2e8f0;
    scroll-margin-top: 88px;
}
[b-rxsm6rdvq1] .ed-section:last-child { margin-bottom: 0; }
[b-rxsm6rdvq1] .ed-section-hdr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 8px;
}
[b-rxsm6rdvq1] .ed-section-hdr h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
[b-rxsm6rdvq1] .ed-section-meta {
    font-size: 0.82rem;
    color: #64748b;
}

/* ─────────────  UNIDADES TABLE  ───────────── */
[b-rxsm6rdvq1] .ed-unidades-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
[b-rxsm6rdvq1] .ed-tab {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
[b-rxsm6rdvq1] .ed-tab:hover { border-color: #0d9488; color: #0d9488; }
[b-rxsm6rdvq1] .ed-tab--active {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}

[b-rxsm6rdvq1] .ed-unidades-table {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
[b-rxsm6rdvq1] .ed-unidades-row {
    display: grid;
    /* Cols: Unidad · Dorm · Baños · m² · m²APPCU · Vista · Piso · Precio · Cuota · Estado · Acciones */
    grid-template-columns: 1.15fr 0.55fr 0.5fr 0.7fr 0.85fr 0.95fr 0.5fr 0.95fr 0.95fr 0.95fr 0.85fr;
    align-items: center;
    padding: 12px 14px;
    font-size: 0.84rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s, box-shadow 0.18s;
    cursor: default;
}
[b-rxsm6rdvq1] .ed-unidades-row:last-child { border-bottom: none; }
[b-rxsm6rdvq1] .ed-unidades-row:not(.ed-unidades-row--head):hover { background: #f8fafc; }
[b-rxsm6rdvq1] .ed-unidades-row--head {
    background: #f8fafc;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-rxsm6rdvq1] .ed-unidades-row--disabled { opacity: 0.55; }

/* Fila clickeable (unidad disponible) — hover y selected con feedback visual */
[b-rxsm6rdvq1] .ed-unidades-row--clickable { cursor: pointer; }
[b-rxsm6rdvq1] .ed-unidades-row--clickable:hover {
    background: #f0fdfa;
}
[b-rxsm6rdvq1] .ed-unidades-row--selected,
[b-rxsm6rdvq1] .ed-unidades-row--selected:hover {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.08), rgba(94, 234, 212, 0.05));
    box-shadow: inset 3px 0 0 #0d9488;
}
[b-rxsm6rdvq1] .ed-unidades-row--selected .ed-unidad-precio strong { color: #0d9488; }

/* Columna m² APPCU — diferenciamos visualmente del m² propio */
[b-rxsm6rdvq1] .ed-unidad-appcu {
    color: #475569;
    font-weight: 500;
}
[b-rxsm6rdvq1] .ed-unidad-appcu-pendiente {
    color: #cbd5e1;
    font-style: italic;
}

[b-rxsm6rdvq1] .ed-unidad-nombre { display: flex; align-items: center; gap: 6px; }
[b-rxsm6rdvq1] .ed-unidad-nombre strong { color: #0f172a; font-weight: 600; }

[b-rxsm6rdvq1] .ed-unidad-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.2);
}

[b-rxsm6rdvq1] .ed-unidad-tag svg { display: block; }

[b-rxsm6rdvq1] .ed-unidad-vista--premium { color: #0d9488; font-weight: 600; }
[b-rxsm6rdvq1] .ed-unidad-vista--good { color: #475569; font-weight: 500; }
[b-rxsm6rdvq1] .ed-unidad-vista--normal { color: #94a3b8; }

[b-rxsm6rdvq1] .ed-unidad-precio strong { color: #0f172a; font-weight: 700; }
[b-rxsm6rdvq1] .ed-unidad-cuota { color: #475569; font-size: 0.78rem; }

[b-rxsm6rdvq1] .ed-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
[b-rxsm6rdvq1] .ed-pill--green { background: #dcfce7; color: #166534; }
[b-rxsm6rdvq1] .ed-pill--amber { background: #fef3c7; color: #854d0e; }
[b-rxsm6rdvq1] .ed-pill--gray { background: #f1f5f9; color: #64748b; }

[b-rxsm6rdvq1] .ed-btn-link {
    background: transparent;
    border: none;
    color: #0d9488;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
[b-rxsm6rdvq1] .ed-btn-link:hover {
    background: rgba(13, 148, 136, 0.08);
    text-decoration: none;
}

/* ── "Ver plan ↓" en cada fila de unidad ──
   Botón consistente entre filas seleccionadas y no seleccionadas. La diferencia
   visual de selección la da el highlight de la fila (no el botón). El botón es
   siempre el mismo affordance: "te lleva al cronograma de pagos abajo". */
[b-rxsm6rdvq1] .ed-btn-ver-plan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(13, 148, 136, 0.35);
    color: #0d9488;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    padding: 5px 10px 5px 11px;
    border-radius: 999px;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
[b-rxsm6rdvq1] .ed-btn-ver-plan:hover {
    background: rgba(13, 148, 136, 0.08);
    border-color: #0d9488;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(13, 148, 136, 0.4);
}
[b-rxsm6rdvq1] .ed-btn-ver-plan:active { transform: translateY(0); }
[b-rxsm6rdvq1] .ed-btn-ver-plan svg {
    flex-shrink: 0;
}
/* La flecha descendente hace una pequeña animación al hover indicando "scroll abajo" */
[b-rxsm6rdvq1] .ed-btn-ver-plan svg:last-child {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[b-rxsm6rdvq1] .ed-btn-ver-plan:hover svg:last-child {
    transform: translateY(2px);
}

/* Estado "ya seleccionada" — sutil cambio de paleta (fondo teal claro + texto
   más sólido) que confirma la selección sin gritar. El check a la izquierda
   es la pista visual principal. */
[b-rxsm6rdvq1] .ed-btn-ver-plan--active {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}
[b-rxsm6rdvq1] .ed-btn-ver-plan--active:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: white;
}

/* ─────────────  AVANCE TIMELINE  ───────────── */
[b-rxsm6rdvq1] .ed-avance-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
[b-rxsm6rdvq1] .ed-avance-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
[b-rxsm6rdvq1] .ed-avance-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}
[b-rxsm6rdvq1] .ed-avance-foto {
    aspect-ratio: 4 / 3;
    background: #cbd5e1 center/cover no-repeat;
}
[b-rxsm6rdvq1] .ed-avance-info {
    padding: 12px 14px;
}
[b-rxsm6rdvq1] .ed-avance-info strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 4px;
}
[b-rxsm6rdvq1] .ed-avance-info span {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

/* ─────────────  UBICACIÓN  ───────────── */
[b-rxsm6rdvq1] .ed-ubicacion {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
[b-rxsm6rdvq1] .ed-ubicacion-mapa {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
[b-rxsm6rdvq1] .ed-ubicacion-cercanos h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}
[b-rxsm6rdvq1] .ed-cercano {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 9px;
    margin-bottom: 6px;
}
[b-rxsm6rdvq1] .ed-cercano-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rxsm6rdvq1] .ed-cercano-icon svg { display: block; }
[b-rxsm6rdvq1] .ed-cercano strong {
    display: block;
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 600;
}
[b-rxsm6rdvq1] .ed-cercano span {
    font-size: 0.75rem;
    color: #64748b;
}

/* ─────────────  CALCULADORA  ───────────── */
[b-rxsm6rdvq1] .ed-calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
}
[b-rxsm6rdvq1] .ed-calc-controls { display: flex; flex-direction: column; gap: 16px; }
[b-rxsm6rdvq1] .ed-calc-control label {
    display: block;
    font-size: 0.82rem;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 500;
}
[b-rxsm6rdvq1] .ed-calc-control label strong { color: #0d9488; font-weight: 700; }
[b-rxsm6rdvq1] .ed-calc-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 0;
    overflow: hidden;
    background: white;
}
[b-rxsm6rdvq1] .ed-calc-input-group:focus-within { border-color: #0d9488; }
[b-rxsm6rdvq1] .ed-calc-prefix,
[b-rxsm6rdvq1] .ed-calc-suffix {
    background: #f8fafc;
    color: #475569;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
}
[b-rxsm6rdvq1] .ed-calc-input-group input {
    flex: 1;
    border: none;
    padding: 10px 12px;
    font-size: 0.95rem;
    color: #0f172a;
    background: transparent;
    outline: none;
    font-family: inherit;
    min-width: 0;
}

[b-rxsm6rdvq1] .ed-slider {
    width: 100%;
    height: 6px;
    border-radius: 100px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
[b-rxsm6rdvq1] .ed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #0d9488;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(13,148,136,0.4);
    transition: transform 0.1s;
}
[b-rxsm6rdvq1] .ed-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
[b-rxsm6rdvq1] .ed-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #0d9488;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(13,148,136,0.4);
}

/* ─────────────  BANCOS — STRIP DE CONFIANZA + SELECTORES  ─────────────
   Los bancos uruguayos tienen identidad visual fuerte (Itaú naranja, BHU
   azul corporativo, Santander rojo). Usamos un mini-logo monograma en círculo
   con el color de marca de cada uno + el nombre. Sin tocar imágenes oficiales
   (evita líos de trademark) pero se ve profesional.

   Ojo: estos colores son aproximaciones de marca — si algún banco se queja
   por uso de tono, los neutralizamos a gris. */
[b-rxsm6rdvq1] .ed-bancos-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
[b-rxsm6rdvq1] .ed-bancos-strip-label {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
    flex-shrink: 0;
}
[b-rxsm6rdvq1] .ed-bancos-strip-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

[b-rxsm6rdvq1] .ed-banco-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 6px 12px 6px 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    transition: border-color 0.15s, transform 0.15s;
}
[b-rxsm6rdvq1] .ed-banco-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06);
}

/* Monograma circular con color de marca por banco — se reusa tanto en la strip
   de confianza como en los botones de la calculadora. */
[b-rxsm6rdvq1] .ed-banco-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

[b-rxsm6rdvq1] .ed-banco-chip--itau .ed-banco-mono,
[b-rxsm6rdvq1] .ed-calc-banco--itau .ed-banco-mono {
    background: linear-gradient(135deg, #ec7000 0%, #d65f00 100%);
}
[b-rxsm6rdvq1] .ed-banco-chip--bhu .ed-banco-mono,
[b-rxsm6rdvq1] .ed-calc-banco--bhu .ed-banco-mono {
    background: linear-gradient(135deg, #005baa 0%, #003e75 100%);
}
[b-rxsm6rdvq1] .ed-banco-chip--santander .ed-banco-mono,
[b-rxsm6rdvq1] .ed-calc-banco--santander .ed-banco-mono {
    background: linear-gradient(135deg, #ec0000 0%, #b80000 100%);
}
[b-rxsm6rdvq1] .ed-banco-chip--scotia .ed-banco-mono,
[b-rxsm6rdvq1] .ed-calc-banco--scotia .ed-banco-mono {
    background: linear-gradient(135deg, #ee0000 0%, #c00000 100%);
}
[b-rxsm6rdvq1] .ed-banco-chip--brou .ed-banco-mono,
[b-rxsm6rdvq1] .ed-calc-banco--brou .ed-banco-mono {
    background: linear-gradient(135deg, #003f88 0%, #002854 100%);
}
[b-rxsm6rdvq1] .ed-banco-chip--hsbc .ed-banco-mono,
[b-rxsm6rdvq1] .ed-calc-banco--hsbc .ed-banco-mono {
    background: linear-gradient(135deg, #db0011 0%, #a80010 100%);
}

[b-rxsm6rdvq1] .ed-banco-nombre {
    color: #0f172a;
}

/* ── Selectores de banco en la calculadora ── */
[b-rxsm6rdvq1] .ed-calc-bancos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
[b-rxsm6rdvq1] .ed-calc-banco {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 7px 14px 7px 7px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
[b-rxsm6rdvq1] .ed-calc-banco:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}
[b-rxsm6rdvq1] .ed-calc-banco--active {
    border-width: 2px;
    padding: 6px 13px 6px 6px; /* compensa el border más grueso */
}
[b-rxsm6rdvq1] .ed-calc-banco--itau.ed-calc-banco--active {
    border-color: #ec7000;
    background: #fff7ed;
}
[b-rxsm6rdvq1] .ed-calc-banco--bhu.ed-calc-banco--active {
    border-color: #005baa;
    background: #eff6ff;
}
[b-rxsm6rdvq1] .ed-calc-banco--santander.ed-calc-banco--active,
[b-rxsm6rdvq1] .ed-calc-banco--scotia.ed-calc-banco--active {
    border-color: #ec0000;
    background: #fef2f2;
}
[b-rxsm6rdvq1] .ed-calc-banco--brou.ed-calc-banco--active {
    border-color: #003f88;
    background: #eff6ff;
}

[b-rxsm6rdvq1] .ed-calc-result {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

/* ── CTA al banco seleccionado (Solicitar préstamo) ──
   Botón pintado con la paleta de marca del banco activo. Toma los mismos
   colores que el monograma chip para mantener consistencia visual y que
   sea evidente a qué banco te lleva. */
[b-rxsm6rdvq1] .ed-calc-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    font-family: inherit;
    background: linear-gradient(135deg, #475569 0%, #334155 100%); /* fallback */
    box-shadow:
        0 6px 18px -8px rgba(15, 23, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                filter 0.2s ease;
    position: relative;
    overflow: hidden;
}
[b-rxsm6rdvq1] .ed-calc-cta::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}
[b-rxsm6rdvq1] .ed-calc-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px -10px rgba(15, 23, 42, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    filter: brightness(1.05);
}
[b-rxsm6rdvq1] .ed-calc-cta:hover::after { left: 130%; }
[b-rxsm6rdvq1] .ed-calc-cta:active { transform: translateY(0); }

/* El monograma del CTA tiene fondo blanco para que el logo del banco se
   vea siempre con su color original aunque el botón esté pintado. */
[b-rxsm6rdvq1] .ed-calc-cta-mono {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 0.78rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[b-rxsm6rdvq1] .ed-calc-cta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
[b-rxsm6rdvq1] .ed-calc-cta-text strong {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
[b-rxsm6rdvq1] .ed-calc-cta-text small {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 2px;
}
[b-rxsm6rdvq1] .ed-calc-cta-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    opacity: 0.95;
}
[b-rxsm6rdvq1] .ed-calc-cta:hover .ed-calc-cta-arrow {
    transform: translate(2px, -2px);
}

/* Colores de marca por banco — en línea con los chips */
[b-rxsm6rdvq1] .ed-calc-cta--itau {
    background: linear-gradient(135deg, #ec7000 0%, #c25800 100%);
}
[b-rxsm6rdvq1] .ed-calc-cta--bhu {
    background: linear-gradient(135deg, #005baa 0%, #003e75 100%);
}
[b-rxsm6rdvq1] .ed-calc-cta--santander {
    background: linear-gradient(135deg, #ec0000 0%, #b80000 100%);
}
[b-rxsm6rdvq1] .ed-calc-cta--scotia {
    background: linear-gradient(135deg, #ee0000 0%, #c00000 100%);
}
[b-rxsm6rdvq1] .ed-calc-cta--brou {
    background: linear-gradient(135deg, #003f88 0%, #002854 100%);
}
[b-rxsm6rdvq1] .ed-calc-cta--hsbc {
    background: linear-gradient(135deg, #db0011 0%, #a80010 100%);
}
[b-rxsm6rdvq1] .ed-calc-result-label {
    font-size: 0.78rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 4px;
}
[b-rxsm6rdvq1] .ed-calc-result-uyu {
    font-size: 1.85rem;
    font-weight: 700;
    color: #0d9488;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
[b-rxsm6rdvq1] .ed-calc-result-usd {
    font-size: 0.92rem;
    color: #64748b;
    margin-top: 4px;
    margin-bottom: 12px;
}
[b-rxsm6rdvq1] .ed-calc-divider {
    height: 1px;
    background: rgba(13,148,136,0.18);
    margin: 4px 0 12px;
}
[b-rxsm6rdvq1] .ed-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.86rem;
    color: #475569;
    padding: 4px 0;
}
[b-rxsm6rdvq1] .ed-calc-row strong { color: #0f172a; font-weight: 600; }
[b-rxsm6rdvq1] .ed-calc-disclaimer {
    margin-top: 12px;
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.45;
}

/* ─────────────  VS ALQUILER (sección aparte)  ─────────────
   Fondo amber suave para diferenciarlo visualmente de la calculadora.
   Mantiene la jerarquía de h2 (.ed-section-hdr) y respeta el grid principal. */
[b-rxsm6rdvq1] .ed-section--vs {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

[b-rxsm6rdvq1] .ed-section--vs .ed-section-hdr h2 { color: #78350f; }
[b-rxsm6rdvq1] .ed-section--vs .ed-section-meta { color: #92400e; }

[b-rxsm6rdvq1] .ed-vs-alquiler-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
    align-items: start;
}
[b-rxsm6rdvq1] .ed-vs-alquiler-input label {
    display: block;
    font-size: 0.85rem;
    color: #78350f;
    margin-bottom: 8px;
    font-weight: 600;
}
[b-rxsm6rdvq1] .ed-vs-alquiler-input .ed-calc-input-group {
    background: white;
    border-color: #fcd34d;
}
[b-rxsm6rdvq1] .ed-vs-alquiler-result p {
    margin: 0 0 8px;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.55;
}
[b-rxsm6rdvq1] .ed-vs-alquiler-win {
    background: #ecfdf5;
    border-radius: 8px;
    padding: 10px 12px;
    color: #065f46 !important;
    border: 1px solid #6ee7b7;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[b-rxsm6rdvq1] .ed-vs-alquiler-win svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: #10b981;
}
[b-rxsm6rdvq1] .ed-text-red { color: #b91c1c !important; }
[b-rxsm6rdvq1] .ed-text-muted { color: #94a3b8 !important; font-style: italic; }

/* ─────────────  VIVIENDA PROMOVIDA  ───────────── */
[b-rxsm6rdvq1] .ed-section--vp {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
}
[b-rxsm6rdvq1] .ed-vp-hdr {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}
[b-rxsm6rdvq1] .ed-vp-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: #10b981;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[b-rxsm6rdvq1] .ed-vp-hdr h2 {
    margin: 0 0 4px;
    color: #065f46;
    font-size: 1.25rem;
    font-weight: 700;
}
[b-rxsm6rdvq1] .ed-vp-hdr p {
    margin: 0;
    color: #047857;
    font-size: 0.9rem;
}
/* 4 cards en una fila en desktop. Padding y tipografía más compactos para
   que entren cómodas dentro del ancho del contenido principal (con sidebar
   sticky restando 360px ya). */
[b-rxsm6rdvq1] .ed-vp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
[b-rxsm6rdvq1] .ed-vp-card {
    background: white;
    border: 1px solid #6ee7b7;
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;
}
[b-rxsm6rdvq1] .ed-vp-card-num {
    font-size: 1.35rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
    line-height: 1.1;
}
[b-rxsm6rdvq1] .ed-vp-card strong {
    display: block;
    font-size: 0.85rem;
    color: #065f46;
    margin-bottom: 4px;
    font-weight: 700;
}
[b-rxsm6rdvq1] .ed-vp-card p {
    margin: 0;
    font-size: 0.76rem;
    color: #047857;
    line-height: 1.4;
}
[b-rxsm6rdvq1] .ed-vp-card p strong { display: inline; color: #065f46; font-weight: 700; font-size: inherit; }

@media (max-width: 1300px) {
    [b-rxsm6rdvq1] .ed-vp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    [b-rxsm6rdvq1] .ed-vp-grid { grid-template-columns: 1fr; }
}
[b-rxsm6rdvq1] .ed-vp-link {
    display: inline-block;
    margin-top: 14px;
    color: #047857;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
[b-rxsm6rdvq1] .ed-vp-link:hover { text-decoration: underline; }

/* ─────────────  CRONOGRAMA  ───────────── */
[b-rxsm6rdvq1] .ed-cronograma {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
[b-rxsm6rdvq1] .ed-cronograma-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Cuando el comprador selecciona una unidad, los números de los importes
   cambian. Esta animación de "pulso" en los items hace evidente que el
   cronograma se está recalculando contra la unidad elegida. */
[b-rxsm6rdvq1] .ed-cronograma-item strong,
[b-rxsm6rdvq1] .ed-cronograma-item span,
[b-rxsm6rdvq1] .ed-cronograma-total strong {
    transition: color 0.4s ease;
}
[b-rxsm6rdvq1] .ed-cronograma--actualizando .ed-cronograma-item {
    animation: ed-cronograma-pulse-b-rxsm6rdvq1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
[b-rxsm6rdvq1] .ed-cronograma--actualizando .ed-cronograma-total {
    animation: ed-cronograma-pulse-total-b-rxsm6rdvq1 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ed-cronograma-pulse-b-rxsm6rdvq1 {
    0%   { background: #f8fafc; border-color: #e2e8f0; }
    35%  { background: #ccfbf1; border-color: #5eead4; transform: translateX(2px); }
    100% { background: #f8fafc; border-color: #e2e8f0; transform: translateX(0); }
}
@keyframes ed-cronograma-pulse-total-b-rxsm6rdvq1 {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
    40%  { transform: scale(1.015); box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.15); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}
[b-rxsm6rdvq1] .ed-cronograma-fase {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #0d9488;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
}
[b-rxsm6rdvq1] .ed-cronograma-item strong {
    display: block;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 2px;
}
[b-rxsm6rdvq1] .ed-cronograma-item span:not(.ed-cronograma-fecha) {
    font-size: 0.84rem;
    color: #475569;
}
[b-rxsm6rdvq1] .ed-cronograma-fecha {
    font-size: 0.82rem;
    color: #0d9488;
    font-weight: 600;
}

/* Ítem extra (gastos de escrituración) — diferenciado visualmente porque NO
   forma parte del precio del inmueble, es un costo aparte. */
[b-rxsm6rdvq1] .ed-cronograma-item--extra {
    background: #fffbeb;
    border-color: #fde68a;
}
[b-rxsm6rdvq1] .ed-cronograma-fase--extra {
    background: #f59e0b;
}

/* Total a pagar al desarrollador — destacado al final del cronograma. */
[b-rxsm6rdvq1] .ed-cronograma-total {
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid rgba(13, 148, 136, 0.25);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
[b-rxsm6rdvq1] .ed-cronograma-total span {
    font-size: 0.92rem;
    color: #475569;
    font-weight: 500;
}
[b-rxsm6rdvq1] .ed-cronograma-total strong {
    font-size: 1.4rem;
    color: #0d9488;
    font-weight: 700;
    letter-spacing: -0.02em;
}

[b-rxsm6rdvq1] .ed-cronograma-notas {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 9px;
    border-left: 3px solid #0d9488;
}
[b-rxsm6rdvq1] .ed-cronograma-notas strong {
    color: #0f172a;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
}
[b-rxsm6rdvq1] .ed-cronograma-notas p {
    margin: 0;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

[b-rxsm6rdvq1] .ed-cronograma-pendiente {
    padding: 24px 20px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ── Selector de moneda en la calculadora ── */
[b-rxsm6rdvq1] .ed-calc-moneda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
[b-rxsm6rdvq1] .ed-calc-moneda-btn {
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
[b-rxsm6rdvq1] .ed-calc-moneda-btn:hover { border-color: #0d9488; }
[b-rxsm6rdvq1] .ed-calc-moneda-btn--active {
    border-color: #0d9488;
    background: #f0fdfa;
}
[b-rxsm6rdvq1] .ed-calc-moneda-btn small {
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 500;
}
[b-rxsm6rdvq1] .ed-calc-moneda-btn--active small { color: #0d9488; }

[b-rxsm6rdvq1] .ed-calc-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

[b-rxsm6rdvq1] .ed-calc-banco-notas {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.4;
    font-style: italic;
}

/* ─────────────  AMENITIES  ───────────── */
[b-rxsm6rdvq1] .ed-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
[b-rxsm6rdvq1] .ed-amenity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.86rem;
    color: #0f172a;
    transition: all 0.15s;
}
[b-rxsm6rdvq1] .ed-amenity:hover { border-color: #0d9488; background: #f0fdfa; }

[b-rxsm6rdvq1] .ed-amenity-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

[b-rxsm6rdvq1] .ed-amenity-icon svg { display: block; }

[b-rxsm6rdvq1] .ed-amenity:hover .ed-amenity-icon {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}

/* ─────────────  DESARROLLADORA  ───────────── */
[b-rxsm6rdvq1] .ed-dev-hdr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
[b-rxsm6rdvq1] .ed-dev-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
}

[b-rxsm6rdvq1] .ed-dev-mono {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}
[b-rxsm6rdvq1] .ed-dev-hdr h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}
[b-rxsm6rdvq1] .ed-dev-hdr p {
    margin: 0;
    color: #64748b;
    font-size: 0.85rem;
}
[b-rxsm6rdvq1] .ed-dev-bio {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 18px;
}
[b-rxsm6rdvq1] .ed-dev-otros-title {
    margin: 18px 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}
[b-rxsm6rdvq1] .ed-dev-otros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
[b-rxsm6rdvq1] .ed-dev-otro {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    background: #cbd5e1 center/cover no-repeat;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}
[b-rxsm6rdvq1] .ed-dev-otro:hover { transform: translateY(-2px); }
[b-rxsm6rdvq1] .ed-dev-otro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%);
}
[b-rxsm6rdvq1] .ed-dev-otro-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 1;
    color: white;
}
[b-rxsm6rdvq1] .ed-dev-otro-info strong { display: block; font-size: 0.92rem; }
[b-rxsm6rdvq1] .ed-dev-otro-info span { font-size: 0.78rem; opacity: 0.9; }

/* ─────────────  FORMULARIO  ───────────── */
[b-rxsm6rdvq1] .ed-contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
}
[b-rxsm6rdvq1] .ed-form-row label {
    display: block;
    font-size: 0.82rem;
    color: #0f172a;
    margin-bottom: 6px;
    font-weight: 600;
}
[b-rxsm6rdvq1] .ed-form-req { color: #dc2626; }
[b-rxsm6rdvq1] .ed-form-opt { color: #94a3b8; font-weight: 400; }
[b-rxsm6rdvq1] .ed-form-row input,
[b-rxsm6rdvq1] .ed-form-row textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    color: #0f172a;
    background: white;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
[b-rxsm6rdvq1] .ed-form-row input:focus,
[b-rxsm6rdvq1] .ed-form-row textarea:focus { border-color: #0d9488; }
[b-rxsm6rdvq1] .ed-form-row textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
[b-rxsm6rdvq1] .ed-form-row small { display: block; margin-top: 4px; font-size: 0.74rem; color: #94a3b8; }
[b-rxsm6rdvq1] .ed-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
[b-rxsm6rdvq1] .ed-form-or { color: #94a3b8; font-size: 0.85rem; }

/* ─────────────  BOTONES  ───────────── */
[b-rxsm6rdvq1] .ed-btn-primary {
    background: #0d9488;
    color: white;
    border: none;
    padding: 11px 18px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    text-decoration: none;
}
[b-rxsm6rdvq1] .ed-btn-primary:hover { background: #0f766e; }
[b-rxsm6rdvq1] .ed-btn-primary:active { transform: scale(0.98); }
[b-rxsm6rdvq1] .ed-btn-lg { padding: 13px 22px; font-size: 0.95rem; }
[b-rxsm6rdvq1] .ed-btn-full { width: 100%; }

[b-rxsm6rdvq1] .ed-btn-wa-lg {
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, transform 0.1s;
}
[b-rxsm6rdvq1] .ed-btn-wa-lg:hover { background: #20b95a; }
[b-rxsm6rdvq1] .ed-btn-wa-lg:active { transform: scale(0.98); }

[b-rxsm6rdvq1] .ed-btn-ghost {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    font-family: inherit;
    width: 100%;
    justify-content: flex-start;
}
[b-rxsm6rdvq1] .ed-btn-ghost:hover { border-color: #0d9488; color: #0d9488; background: #f0fdfa; }
[b-rxsm6rdvq1] .ed-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }

/* Estado "guardado" — fondo y borde brand para confirmar la acción.
   El icono adentro ya viene relleno desde el .razor. */
[b-rxsm6rdvq1] .ed-btn-ghost--active {
    border-color: #0d9488;
    color: #0d9488;
    background: #f0fdfa;
    font-weight: 600;
}
[b-rxsm6rdvq1] .ed-btn-ghost--active:hover {
    border-color: #0f766e;
    background: #ccfbf1;
    color: #0f766e;
}

/* ─────────────  SIDEBAR STICKY  ─────────────
   Se posiciona debajo del navbar principal (72px) + sub-nav (49px) + 16px
   de respiro. Sin esto, al hacer scroll el sidebar quedaba pegado al borde
   superior y se solapaba con la sub-nav sticky. */
[b-rxsm6rdvq1] .ed-sidebar {
    position: sticky;
    top: 138px;
}
[b-rxsm6rdvq1] .ed-sidebar-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(15,23,42,0.05);
}
[b-rxsm6rdvq1] .ed-sidebar-price {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}
[b-rxsm6rdvq1] .ed-sidebar-price span {
    font-size: 0.78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-rxsm6rdvq1] .ed-sidebar-price strong {
    font-size: 1.6rem;
    color: #0d9488;
    font-weight: 700;
    letter-spacing: -0.02em;
}
[b-rxsm6rdvq1] .ed-sidebar-cuota {
    color: #475569;
    font-size: 0.86rem;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}
[b-rxsm6rdvq1] .ed-sidebar-cuota strong { color: #0f172a; font-weight: 600; }

[b-rxsm6rdvq1] .ed-sidebar-card .ed-btn-primary,
[b-rxsm6rdvq1] .ed-sidebar-card .ed-btn-wa-lg { margin-bottom: 8px; }

[b-rxsm6rdvq1] .ed-sidebar-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 14px 0;
}
[b-rxsm6rdvq1] .ed-sidebar-extra {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
[b-rxsm6rdvq1] .ed-sidebar-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    color: #475569;
}
[b-rxsm6rdvq1] .ed-sidebar-trust small { font-size: 0.78rem; line-height: 1.4; }

/* ─────────────  LOADING STATE  ───────────── */
[b-rxsm6rdvq1] .ed-loading {
    background: white;
    max-width: 500px;
    margin: 80px auto;
    text-align: center;
    padding: 50px 30px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #64748b;
    font-size: 0.92rem;
    font-family: 'Sora', sans-serif;
}

[b-rxsm6rdvq1] .ed-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: ed-spinner-rotate-b-rxsm6rdvq1 0.7s linear infinite;
}

@keyframes ed-spinner-rotate-b-rxsm6rdvq1 {
    to { transform: rotate(360deg); }
}

/* ─────────────  NOT FOUND  ───────────── */
[b-rxsm6rdvq1] .ed-not-found {
    background: white;
    max-width: 500px;
    margin: 80px auto;
    text-align: center;
    padding: 50px 30px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}
[b-rxsm6rdvq1] .ed-not-found h2 { color: #0f172a; margin: 0 0 8px; }
[b-rxsm6rdvq1] .ed-not-found p { color: #64748b; margin: 0 0 24px; }
[b-rxsm6rdvq1] .ed-not-found .ed-btn-primary { display: inline-flex; }

/* ─────────────  RESPONSIVE  ───────────── */
@media (max-width: 1100px) {
    [b-rxsm6rdvq1] .ed-body { grid-template-columns: 1fr; }
    [b-rxsm6rdvq1] .ed-sidebar { position: static; order: -1; }
    [b-rxsm6rdvq1] .ed-sidebar-card { display: flex; flex-direction: column; }
}

@media (max-width: 900px) {
    [b-rxsm6rdvq1] .ed-gallery { height: 320px; }
    [b-rxsm6rdvq1] .ed-calc { grid-template-columns: 1fr; }
    [b-rxsm6rdvq1] .ed-ubicacion { grid-template-columns: 1fr; }
    [b-rxsm6rdvq1] .ed-vs-alquiler-body { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
    [b-rxsm6rdvq1] .ed-hero { padding: 12px 16px 0; }
    [b-rxsm6rdvq1] .ed-gallery { grid-template-columns: 1fr; height: 280px; }
    [b-rxsm6rdvq1] .ed-gallery-side { display: none; }
    [b-rxsm6rdvq1] .ed-header { padding: 18px 16px; }
    [b-rxsm6rdvq1] .ed-header-title { font-size: 1.4rem; }
    [b-rxsm6rdvq1] .ed-body { padding: 16px; gap: 16px; }
    [b-rxsm6rdvq1] .ed-section { padding: 18px; }
    [b-rxsm6rdvq1] .ed-unidades-row {
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
        padding: 16px 14px;
    }
    [b-rxsm6rdvq1] .ed-unidades-row--head { display: none; }
    /* Cada celda en mobile = label arriba + valor abajo. El label sale del
       atributo data-label que viene del Razor. Antes el "nth-child(odd)" daba
       el color al label pero los labels estaban en los datos, NO eran labels —
       por eso se veían números crudos. Ahora cada span se anuncia. */
    [b-rxsm6rdvq1] .ed-unidades-row > span {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        font-size: 0.92rem;
        color: #0f172a;
    }
    [b-rxsm6rdvq1] .ed-unidades-row > span[data-label]::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
        line-height: 1.2;
    }
    /* Reset del color gris pálido que tenía nth-child(odd). */
    [b-rxsm6rdvq1] .ed-unidades-row > span:nth-child(odd) { color: #0f172a; font-size: 0.92rem; }
    /* La columna acción ocupa toda la fila para que el botón sea cómodo. */
    [b-rxsm6rdvq1] .ed-unidad-acciones {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    [b-rxsm6rdvq1] .ed-unidad-acciones .ed-btn-ver-plan {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
    }
    /* Estado: el pill no necesita label arriba (es obvio que es estado). Pero
       lo mantenemos para consistencia visual. */
    [b-rxsm6rdvq1] .ed-unidad-precio strong { font-size: 1.05rem; }
    [b-rxsm6rdvq1] .ed-form-actions { flex-direction: column; align-items: stretch; }
    [b-rxsm6rdvq1] .ed-form-or { display: none; }

    /* Cronograma: items con grid 40px 1fr auto. En mobile, el "auto" puede
       quedar muy apretado si los importes son grandes (USD 250.000+).
       Permitimos que el label se acomode debajo si hace falta. */
    [b-rxsm6rdvq1] .ed-cronograma-item {
        grid-template-columns: 36px 1fr auto;
        gap: 10px;
        padding: 12px 14px;
    }
    [b-rxsm6rdvq1] .ed-cronograma-fase {
        width: 28px;
        height: 28px;
        font-size: 0.84rem;
    }
    [b-rxsm6rdvq1] .ed-cronograma-item strong { font-size: 0.92rem; }

    /* Badges del header: en mobile, si la prop tiene 4+ badges, wrap+gap
       reducido para no comer demasiada altura. */
    [b-rxsm6rdvq1] .ed-header-badges { gap: 4px; margin-bottom: 8px; }

    /* Avance bar: el header de "Avance de obra" tiene texto+%
       — si el % es 100, label "Entrega: ago 2026" puede chocar con el
       % en mobile. Apilamos vertical. */
    [b-rxsm6rdvq1] .ed-header-avance-hdr {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Pantallas muy chicas (≤400px): toques finales para iPhone SE / mini. */
@media (max-width: 400px) {
    [b-rxsm6rdvq1] .ed-hero { padding: 8px 12px 0; }
    [b-rxsm6rdvq1] .ed-gallery { height: 220px; }
    [b-rxsm6rdvq1] .ed-header { padding: 14px 12px; }
    [b-rxsm6rdvq1] .ed-header-title { font-size: 1.2rem; }
    [b-rxsm6rdvq1] .ed-body { padding: 12px; }
    [b-rxsm6rdvq1] .ed-section { padding: 14px; }
    [b-rxsm6rdvq1] .ed-cronograma-item {
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
    }
    [b-rxsm6rdvq1] .ed-cronograma-item > :last-child {
        grid-column: 2;
        font-weight: 700;
        color: #0f172a;
    }
}
/* /Components/Pages/Emprendimientos/Emprendimientos.razor.rz.scp.css */
/* ============================================================
   EMPRENDIMIENTOS — Rediseño Premium con Hero Video + Wizard
   - Video full-bleed como hero principal
   - Wizard progresivo de 3 pasos con animaciones suaves
   - Barra de filtros compacta post-búsqueda
   - Cards en layout HORIZONTAL (imagen izq 40%, info derecha)
   - Paleta teal #0d9488, tipografía Sora
   - Animaciones profesionales sin excesos
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-kw0fve7xpq] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

[b-kw0fve7xpq] .emp-page {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    font-family: 'Sora', sans-serif;
    color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════
   HERO — Video full-bleed + Wizard Progresivo
   ═══════════════════════════════════════════════════════════ */

[b-kw0fve7xpq] .emp-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* svh respeta la barra de URL en mobile — fallback a vh */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 60px;
    overflow: hidden;
    transition: min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sutil pulso de luz de fondo — siente vivo el hero */
[b-kw0fve7xpq] .emp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 70%, rgba(13, 148, 136, 0.18), transparent 55%);
    pointer-events: none;
    z-index: 0;
    animation: emp-hero-glow-b-kw0fve7xpq 8s ease-in-out infinite;
}

@keyframes emp-hero-glow-b-kw0fve7xpq {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

[b-kw0fve7xpq] .emp-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

[b-kw0fve7xpq] .emp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.35) 50%,
        rgba(15, 23, 42, 0.78) 100%
    );
    z-index: 0;
}

[b-kw0fve7xpq] .emp-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

[b-kw0fve7xpq] .emp-hero-full {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    animation: emp-hero-enter-b-kw0fve7xpq 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes emp-hero-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-kw0fve7xpq] .emp-hero-title {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
    animation: emp-title-in-b-kw0fve7xpq 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes emp-title-in-b-kw0fve7xpq {
    from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

[b-kw0fve7xpq] .emp-hero-sub {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    opacity: 0.9;
    margin: 0 auto;
    max-width: 580px;
    line-height: 1.55;
    animation: emp-title-in-b-kw0fve7xpq 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ═══════════════════════════════════════════════════════════
   WIZARD PROGRESIVO — centrado perfecto, animaciones premium
   ═══════════════════════════════════════════════════════════ */
[b-kw0fve7xpq] .emp-wizard-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: emp-title-in-b-kw0fve7xpq 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

[b-kw0fve7xpq] .emp-wizard-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

[b-kw0fve7xpq] .emp-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

[b-kw0fve7xpq] .emp-wizard-dot--active {
    width: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #0d9488);
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.7);
}

/* Stage que contiene los pasos. Posición relativa, alto auto.
   Cada step se centra absolutamente dentro al ser el activo. */
[b-kw0fve7xpq] .emp-wizard-stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    min-height: 320px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

[b-kw0fve7xpq] .emp-wizard-step {
    width: 100%;
    display: flex;
    justify-content: center;
}

[b-kw0fve7xpq] .emp-wizard-step--active {
    animation: emp-step-in-b-kw0fve7xpq 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[b-kw0fve7xpq] .emp-wizard-step--hidden {
    display: none;
}

@keyframes emp-step-in-b-kw0fve7xpq {
    0%   { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(4px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

/* La card flota sobre el video con glassmorphism real — translúcida, fuerte
   blur, borde luminoso. El texto adentro es blanco para que destaque sobre
   el video oscuro detrás. */
[b-kw0fve7xpq] .emp-wizard-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-radius: 24px;
    padding: 36px 36px 28px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.55),
        0 12px 32px -12px rgba(13, 148, 136, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Línea de luz teal que recorre el borde superior — más visible sobre glass */
[b-kw0fve7xpq] .emp-wizard-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #5eead4, transparent);
    opacity: 1;
}

[b-kw0fve7xpq] .emp-wizard-card--date {
    max-width: 620px;
}

[b-kw0fve7xpq] .emp-wizard-label {
    font-size: 1.32rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0 0 6px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

[b-kw0fve7xpq] .emp-wizard-sub {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 22px 0;
}

[b-kw0fve7xpq] .emp-wizard-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    margin-top: 18px;
}

[b-kw0fve7xpq] .emp-wizard-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 18px;
    /* Botón con glass propio sutil — translúcido pero más sólido que la card,
       para que destaque como elemento clickeable principal. */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.2s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

[b-kw0fve7xpq] .emp-wizard-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.12) 0%, rgba(94, 234, 212, 0.18) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

[b-kw0fve7xpq] .emp-wizard-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

[b-kw0fve7xpq] .emp-wizard-btn:hover {
    border-color: #0d9488;
    transform: translateY(-4px);
    box-shadow:
        0 0 0 4px rgba(13, 148, 136, 0.15),
        0 18px 38px -14px rgba(13, 148, 136, 0.55);
}

[b-kw0fve7xpq] .emp-wizard-btn:hover::before { opacity: 1; }
[b-kw0fve7xpq] .emp-wizard-btn:hover::after  { left: 130%; }

[b-kw0fve7xpq] .emp-wizard-btn:active {
    transform: translateY(-2px) scale(0.98);
}

[b-kw0fve7xpq] .emp-wizard-btn svg {
    color: #0d9488;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

[b-kw0fve7xpq] .emp-wizard-btn:hover svg {
    transform: scale(1.18) rotate(-3deg);
}

/* ─────────────  STEP 3: SELECTOR DE FECHA  ───────────── */
[b-kw0fve7xpq] .emp-date-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin: 8px 0 22px;
}

[b-kw0fve7xpq] .emp-date-card {
    --i: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    color: #0f172a;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.2s ease,
                box-shadow 0.25s ease,
                background 0.3s ease;
    animation: emp-date-card-in-b-kw0fve7xpq 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i) * 70ms + 0.1s);
}

@keyframes emp-date-card-in-b-kw0fve7xpq {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

[b-kw0fve7xpq] .emp-date-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(94, 234, 212, 0.18));
    color: #0d9488;
    margin-bottom: 6px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}

[b-kw0fve7xpq] .emp-date-card-label {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

[b-kw0fve7xpq] .emp-date-card-hint {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

[b-kw0fve7xpq] .emp-date-card:hover {
    border-color: #0d9488;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
}

[b-kw0fve7xpq] .emp-date-card:hover .emp-date-card-icon {
    transform: scale(1.08) rotate(-4deg);
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.18), rgba(94, 234, 212, 0.28));
}

[b-kw0fve7xpq] .emp-date-card--active {
    border-color: #0d9488;
    background: linear-gradient(160deg, #f0fdfa 0%, #ccfbf1 100%);
    box-shadow:
        0 0 0 3px rgba(13, 148, 136, 0.18),
        0 14px 30px -14px rgba(13, 148, 136, 0.55);
    animation-delay: 0s;
}

[b-kw0fve7xpq] .emp-date-card--active::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d9488;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    animation: emp-check-pop-b-kw0fve7xpq 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes emp-check-pop-b-kw0fve7xpq {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

[b-kw0fve7xpq] .emp-date-card--active .emp-date-card-icon {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: white;
    transform: scale(1.05);
}

[b-kw0fve7xpq] .emp-wizard-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

[b-kw0fve7xpq] .emp-wizard-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    font-family: inherit;
    box-shadow:
        0 8px 22px -8px rgba(13, 148, 136, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                opacity 0.2s ease;
    position: relative;
    overflow: hidden;
}

[b-kw0fve7xpq] .emp-wizard-search-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

[b-kw0fve7xpq] .emp-wizard-search-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 14px 28px -10px rgba(13, 148, 136, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

[b-kw0fve7xpq] .emp-wizard-search-btn:hover::after { left: 130%; }

[b-kw0fve7xpq] .emp-wizard-search-btn:active {
    transform: translateY(0) scale(0.98);
}

[b-kw0fve7xpq] .emp-wizard-search-btn svg {
    transition: transform 0.25s ease;
}

[b-kw0fve7xpq] .emp-wizard-search-btn:hover svg {
    transform: translateX(4px);
}

[b-kw0fve7xpq] .emp-wizard-search-btn--disabled,
[b-kw0fve7xpq] .emp-wizard-search-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

[b-kw0fve7xpq] .emp-wizard-search-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

[b-kw0fve7xpq] .emp-wizard-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: none;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, transform 0.2s ease;
    margin-top: 16px;
}

[b-kw0fve7xpq] .emp-wizard-back:hover {
    color: white;
    transform: translateX(-3px);
}

[b-kw0fve7xpq] .emp-wizard-back svg {
    transition: transform 0.2s ease;
}

[b-kw0fve7xpq] .emp-wizard-back:hover svg {
    transform: translateX(-2px);
}

/* ─────────────  HERO COMPACTO (POST-BÚSQUEDA)  ───────────── */
[b-kw0fve7xpq] .emp-hero--compact {
    min-height: auto;
    padding: 16px 24px;
}

[b-kw0fve7xpq] .emp-hero--compact .emp-hero-content {
    padding: 0;
}

[b-kw0fve7xpq] .emp-hero-compact {
    animation: emp-compact-enter-b-kw0fve7xpq 0.4s ease forwards;
}

@keyframes emp-compact-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-kw0fve7xpq] .emp-hero-compact-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

[b-kw0fve7xpq] .emp-filters-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

[b-kw0fve7xpq] .emp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    animation: emp-chip-enter-b-kw0fve7xpq 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emp-chip-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[b-kw0fve7xpq] .emp-filter-chip-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: opacity 0.2s ease;
    font-weight: 300;
}

[b-kw0fve7xpq] .emp-filter-chip-close:hover {
    opacity: 0.7;
}

[b-kw0fve7xpq] .emp-filter-more-btn {
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

[b-kw0fve7xpq] .emp-filter-more-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ─────────────  TOPBAR STICKY  ───────────── */
[b-kw0fve7xpq] .emp-topbar {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 50;
    animation: emp-topbar-enter-b-kw0fve7xpq 0.4s ease;
}

@keyframes emp-topbar-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-kw0fve7xpq] .emp-topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

[b-kw0fve7xpq] .emp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: #64748b;
}

[b-kw0fve7xpq] .emp-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
}

[b-kw0fve7xpq] .emp-breadcrumb a:hover {
    color: #0d9488;
}

[b-kw0fve7xpq] .emp-breadcrumb span:not(.emp-breadcrumb-count) {
    color: #cbd5e1;
}

[b-kw0fve7xpq] .emp-breadcrumb-count {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid #e2e8f0;
    color: #475569;
}

[b-kw0fve7xpq] .emp-breadcrumb-count strong {
    color: #0f172a;
    font-weight: 700;
    margin-right: 4px;
}

[b-kw0fve7xpq] .emp-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-kw0fve7xpq] .emp-sort select {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-family: inherit;
    color: #0f172a;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

[b-kw0fve7xpq] .emp-sort select:hover,
[b-kw0fve7xpq] .emp-sort select:focus {
    border-color: #0d9488;
}

[b-kw0fve7xpq] .emp-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

[b-kw0fve7xpq] .emp-reset-btn:hover {
    color: #0d9488;
    border-color: #0d9488;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT BODY
   ═══════════════════════════════════════════════════════════ */

[b-kw0fve7xpq] .emp-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

[b-kw0fve7xpq] .emp-body--hero-active {
    display: block;
    padding: 0;
    margin: 0;
    max-width: 100%;
    /* En el estado wizard (sin búsqueda) no se renderiza nada dentro del body —
       el container empty con padding/margin generaba una franja blanca abajo del
       hero. Lo neutralizamos a 0px para que el hero ocupe limpio toda la viewport. */
    height: 0;
    min-height: 0;
}

@media (max-width: 900px) {
    [b-kw0fve7xpq] .emp-body {
        grid-template-columns: 1fr;
    }
}

/* ─────────────  SIDEBAR FILTROS  ───────────── */
[b-kw0fve7xpq] .emp-sidebar {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    animation: emp-sidebar-enter-b-kw0fve7xpq 0.4s ease;
}

@keyframes emp-sidebar-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[b-kw0fve7xpq] .emp-sidebar::-webkit-scrollbar {
    width: 6px;
}

[b-kw0fve7xpq] .emp-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

[b-kw0fve7xpq] .emp-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

[b-kw0fve7xpq] .emp-sidebar-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

[b-kw0fve7xpq] .emp-sidebar-hdr h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

[b-kw0fve7xpq] .emp-clear-btn {
    background: transparent;
    border: none;
    color: #0d9488;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

[b-kw0fve7xpq] .emp-clear-btn:hover {
    text-decoration: underline;
}

[b-kw0fve7xpq] .emp-filter-group {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

[b-kw0fve7xpq] .emp-filter-group:last-child {
    border-bottom: none;
}

[b-kw0fve7xpq] .emp-fg-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-kw0fve7xpq] .emp-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-kw0fve7xpq] .emp-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.81rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

[b-kw0fve7xpq] .emp-chip:hover {
    border-color: #0d9488;
    color: #0d9488;
}

[b-kw0fve7xpq] .emp-chip--active {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}

[b-kw0fve7xpq] .emp-amb-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

[b-kw0fve7xpq] .emp-amb-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

[b-kw0fve7xpq] .emp-amb-btn:hover {
    border-color: #0d9488;
}

[b-kw0fve7xpq] .emp-amb-btn--active {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}

[b-kw0fve7xpq] .emp-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-kw0fve7xpq] .emp-range-field {
    flex: 1;
}

[b-kw0fve7xpq] .emp-range-field label {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 4px;
    font-weight: 500;
}

[b-kw0fve7xpq] .emp-range-field select {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    background: white;
    color: #0f172a;
    font-family: inherit;
    outline: none;
}

[b-kw0fve7xpq] .emp-range-field select:focus {
    border-color: #0d9488;
}

[b-kw0fve7xpq] .emp-range-sep {
    color: #cbd5e1;
    font-weight: 700;
    margin-top: 18px;
}

[b-kw0fve7xpq] .emp-select,
[b-kw0fve7xpq] .emp-text-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.86rem;
    background: white;
    color: #0f172a;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

[b-kw0fve7xpq] .emp-select:focus,
[b-kw0fve7xpq] .emp-text-input:focus {
    border-color: #0d9488;
}

[b-kw0fve7xpq] .emp-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
}

[b-kw0fve7xpq] .emp-toggle input {
    display: none;
}

[b-kw0fve7xpq] .emp-toggle-track {
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    margin-top: 2px;
}

[b-kw0fve7xpq] .emp-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[b-kw0fve7xpq] .emp-toggle input:checked + .emp-toggle-track {
    background: #0d9488;
}

[b-kw0fve7xpq] .emp-toggle input:checked + .emp-toggle-track .emp-toggle-thumb {
    transform: translateX(16px);
}

[b-kw0fve7xpq] .emp-toggle-label {
    flex: 1;
    font-size: 0.85rem;
    color: #0f172a;
    line-height: 1.3;
}

[b-kw0fve7xpq] .emp-toggle-label strong {
    display: block;
    font-weight: 600;
}

[b-kw0fve7xpq] .emp-toggle-label small {
    font-size: 0.75rem;
    color: #94a3b8;
    display: block;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   GRID DE CARDS HORIZONTAL
   ═══════════════════════════════════════════════════════════ */

[b-kw0fve7xpq] .emp-main {
    min-width: 0;
    animation: emp-main-enter-b-kw0fve7xpq 0.4s ease;
}

@keyframes emp-main-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-kw0fve7xpq] .emp-grid-horizontal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─────────────  CARD HORIZONTAL  ───────────── */
[b-kw0fve7xpq] .emp-card-horizontal {
    display: grid;
    grid-template-columns: 40% 1fr;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: emp-card-enter-b-kw0fve7xpq 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes emp-card-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-kw0fve7xpq] .emp-card-horizontal:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(13, 148, 136, 0.15), 0 0 0 1px rgba(13, 148, 136, 0.1);
    border-color: #0d9488;
}

[b-kw0fve7xpq] .emp-card-h-img {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
    overflow: hidden;
    min-height: 280px;
}

[b-kw0fve7xpq] .emp-card-h-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

[b-kw0fve7xpq] .emp-card-h-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0) 0%, rgba(13, 148, 136, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

[b-kw0fve7xpq] .emp-card-horizontal:hover .emp-card-h-img::before {
    opacity: 0.08;
}

[b-kw0fve7xpq] .emp-card-h-img::after {
    z-index: 0;
}

[b-kw0fve7xpq] .emp-card-h-img img,
[b-kw0fve7xpq] .emp-card-horizontal:hover .emp-card-h-img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-kw0fve7xpq] .emp-card-horizontal:hover .emp-card-h-img {
    transform: scale(1.04);
}

[b-kw0fve7xpq] .emp-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

[b-kw0fve7xpq] .emp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    letter-spacing: 0.01em;
    animation: emp-badge-enter-b-kw0fve7xpq 0.4s ease forwards;
}

@keyframes emp-badge-enter-b-kw0fve7xpq {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[b-kw0fve7xpq] .emp-badge--vp {
    background: rgba(16, 185, 129, 0.95);
    color: white;
}

[b-kw0fve7xpq] .emp-badge--preventa {
    background: rgba(124, 58, 237, 0.95);
    color: white;
}

[b-kw0fve7xpq] .emp-badge--prox {
    background: rgba(249, 115, 22, 0.95);
    color: white;
}

[b-kw0fve7xpq] .emp-badge--scarcity {
    background: rgba(220, 38, 38, 0.95);
    color: white;
    margin-left: auto;
}

[b-kw0fve7xpq] .emp-card-logo {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 5px 8px 5px 5px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

[b-kw0fve7xpq] .emp-card-logo-mono {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

[b-kw0fve7xpq] .emp-card-logo-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* ─────────────  BODY HORIZONTAL CARD  ───────────── */
[b-kw0fve7xpq] .emp-card-h-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-kw0fve7xpq] .emp-card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

[b-kw0fve7xpq] .emp-card-loc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #64748b;
}

[b-kw0fve7xpq] .emp-card-loc-sep {
    margin: 0 4px;
    color: #cbd5e1;
}

[b-kw0fve7xpq] .emp-card-h-specs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #475569;
}

[b-kw0fve7xpq] .emp-card-h-specs span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[b-kw0fve7xpq] .emp-card-h-specs svg {
    color: #94a3b8;
    flex-shrink: 0;
}

[b-kw0fve7xpq] .emp-card-h-price {
    display: flex;
    gap: 20px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border-radius: 12px;
    border: 1px solid rgba(13, 148, 136, 0.15);
}

[b-kw0fve7xpq] .emp-price-box,
[b-kw0fve7xpq] .emp-cuota-box {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

[b-kw0fve7xpq] .emp-price-label,
[b-kw0fve7xpq] .emp-cuota-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 3px;
}

[b-kw0fve7xpq] .emp-price-box strong {
    font-size: 1.1rem;
    color: #0d9488;
    font-weight: 700;
}

[b-kw0fve7xpq] .emp-cuota-box strong {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 600;
}

[b-kw0fve7xpq] .emp-card-avance {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 12px;
}

[b-kw0fve7xpq] .emp-card-avance-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    margin-bottom: 7px;
    gap: 8px;
}

[b-kw0fve7xpq] .emp-card-avance-hdr > span:first-child {
    color: #475569;
    font-weight: 600;
}

[b-kw0fve7xpq] .emp-card-entrega {
    color: #0d9488;
    font-weight: 600;
}

[b-kw0fve7xpq] .emp-card-avance-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 100px;
    overflow: hidden;
}

[b-kw0fve7xpq] .emp-card-avance-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%);
    border-radius: 100px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-kw0fve7xpq] .emp-card-financing {
    font-size: 0.76rem;
    color: #475569;
    display: flex;
    gap: 6px;
    align-items: center;
}

[b-kw0fve7xpq] .emp-card-financing-label {
    color: #94a3b8;
    font-weight: 500;
}

[b-kw0fve7xpq] .emp-card-financing-banks {
    font-weight: 600;
    color: #0f172a;
}

[b-kw0fve7xpq] .emp-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

[b-kw0fve7xpq] .emp-btn-primary {
    flex: 1;
    background: #0d9488;
    color: white;
    border: none;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.87rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

[b-kw0fve7xpq] .emp-btn-primary:hover {
    background: #0f766e;
    transform: scale(1.02);
}

[b-kw0fve7xpq] .emp-btn-primary:active {
    transform: scale(0.98);
}

[b-kw0fve7xpq] .emp-btn-wa {
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.87rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

[b-kw0fve7xpq] .emp-btn-wa:hover {
    background: #20b95a;
    transform: scale(1.02);
}

[b-kw0fve7xpq] .emp-btn-wa:active {
    transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════
   ESTADOS (Empty, Loading)
   ═══════════════════════════════════════════════════════════ */

[b-kw0fve7xpq] .emp-empty {
    background: white;
    border-radius: 14px;
    padding: 60px 24px;
    text-align: center;
    border: 1px dashed #e2e8f0;
    animation: emp-main-enter-b-kw0fve7xpq 0.4s ease;
}

[b-kw0fve7xpq] .emp-empty h3 {
    margin: 16px 0 6px;
    color: #0f172a;
    font-size: 1.1rem;
}

[b-kw0fve7xpq] .emp-empty p {
    color: #64748b;
    margin: 0 0 20px;
    font-size: 0.9rem;
}

[b-kw0fve7xpq] .emp-empty .emp-btn-primary {
    display: inline-block;
    flex: none;
    padding: 10px 24px;
}

[b-kw0fve7xpq] .emp-loading {
    background: white;
    border-radius: 14px;
    padding: 60px 24px;
    text-align: center;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #64748b;
    font-size: 0.92rem;
    animation: emp-main-enter-b-kw0fve7xpq 0.4s ease;
}

[b-kw0fve7xpq] .emp-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: emp-spinner-b-kw0fve7xpq 0.8s linear infinite;
}

@keyframes emp-spinner-b-kw0fve7xpq {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    [b-kw0fve7xpq] .emp-hero {
        min-height: 100vh;
    }

    [b-kw0fve7xpq] .emp-hero-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    [b-kw0fve7xpq] .emp-hero-sub {
        font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    }

    [b-kw0fve7xpq] .emp-wizard-card {
        padding: 28px 20px;
    }

    [b-kw0fve7xpq] .emp-wizard-buttons {
        grid-template-columns: 1fr;
    }

    [b-kw0fve7xpq] .emp-hero--compact {
        padding: 12px 16px;
    }

    [b-kw0fve7xpq] .emp-topbar-inner {
        padding: 12px 16px;
    }

    [b-kw0fve7xpq] .emp-body {
        padding: 16px;
        gap: 16px;
    }

    [b-kw0fve7xpq] .emp-sidebar {
        position: static;
        max-height: none;
        top: auto;
    }

    [b-kw0fve7xpq] .emp-card-horizontal {
        grid-template-columns: 1fr;
    }

    [b-kw0fve7xpq] .emp-card-h-img {
        min-height: 200px;
    }

    [b-kw0fve7xpq] .emp-card-h-body {
        padding: 16px;
        gap: 10px;
    }

    [b-kw0fve7xpq] .emp-card-title {
        font-size: 1.05rem;
    }

    [b-kw0fve7xpq] .emp-card-h-specs {
        gap: 12px;
        font-size: 0.75rem;
    }

    [b-kw0fve7xpq] .emp-card-h-price {
        flex-direction: column;
        gap: 8px;
    }

    [b-kw0fve7xpq] .emp-card-actions {
        flex-direction: column;
        gap: 8px;
    }

    [b-kw0fve7xpq] .emp-btn-primary,
    [b-kw0fve7xpq] .emp-btn-wa {
        flex: 1;
        justify-content: center;
    }

    [b-kw0fve7xpq] .emp-wizard-indicator {
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    [b-kw0fve7xpq] .emp-hero-title {
        font-size: clamp(1.75rem, 3vw, 2.5rem);
    }

    [b-kw0fve7xpq] .emp-hero-sub {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }

    [b-kw0fve7xpq] .emp-wizard-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    [b-kw0fve7xpq] .emp-wizard-label {
        font-size: 1.1rem;
    }

    [b-kw0fve7xpq] .emp-wizard-btn {
        padding: 20px 14px;
        font-size: 0.95rem;
    }

    [b-kw0fve7xpq] .emp-date-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    [b-kw0fve7xpq] .emp-date-card {
        padding: 14px 16px;
    }

    [b-kw0fve7xpq] .emp-filters-bar {
        gap: 6px;
    }

    [b-kw0fve7xpq] .emp-filter-chip {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    [b-kw0fve7xpq] .emp-topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    [b-kw0fve7xpq] .emp-body {
        padding: 12px;
    }

    [b-kw0fve7xpq] .emp-card-h-img {
        min-height: 160px;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Mismo diseño que NotFound.razor.css — Blazor aísla los estilos por
   componente, así que si queremos que Error.razor use las clases .nf-*
   necesitamos duplicar las reglas acá. Si cambiás el look de uno, cambialos
   en ambos archivos.
   Alternativa futura: mover a wwwroot/app.css y quitar estos archivos scoped. */

.nf-page[b-675zucnp7s] {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 40px 20px;
    font-family: "Inter", system-ui, sans-serif;
}

.nf-card[b-675zucnp7s] {
    text-align: center;
    max-width: 440px;
}

.nf-icon[b-675zucnp7s] {
    margin-bottom: 24px;
}

.nf-card h1[b-675zucnp7s] {
    font-size: 5rem;
    font-weight: 800;
    color: #0d9488;
    margin: 0;
    line-height: 1;
    letter-spacing: -2px;
}

.nf-card h2[b-675zucnp7s] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 8px 0 12px;
}

.nf-card p[b-675zucnp7s] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 32px;
    line-height: 1.6;
}

.nf-actions[b-675zucnp7s] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.nf-btn-primary[b-675zucnp7s] {
    padding: 12px 28px;
    background: #0d9488;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.nf-btn-primary:hover[b-675zucnp7s] {
    background: #0f766e;
    color: #fff;
}

.nf-btn-secondary[b-675zucnp7s] {
    padding: 12px 28px;
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.nf-btn-secondary:hover[b-675zucnp7s] {
    border-color: #0d9488;
    color: #0d9488;
}

/* RequestId para contactar soporte */
.nf-request-id[b-675zucnp7s] {
    margin-top: 28px !important;
    font-size: 0.78rem !important;
    color: var(--color-text-subtle) !important;
    line-height: 1.5 !important;
}

.nf-request-id code[b-675zucnp7s] {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    user-select: all;
}
/* /Components/Pages/Favoritos.razor.rz.scp.css */
/* ────────────────────────────────────────────────────
   Página /favoritos — versión profesional.
   Paleta: teal var(--color-brand), slate, blanco. Tipografía Sora
   para titulares e Inter para texto, igual que el resto
   del producto.
   ──────────────────────────────────────────────────── */

.favs-page[b-zbw65419ub] {
    background: #f7f9fc;
    min-height: calc(100vh - 64px);
}

.favs-container[b-zbw65419ub] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* ════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════ */
.favs-hero[b-zbw65419ub] {
    position: relative;
    padding: 56px 24px 88px;
    overflow: hidden;
    color: #fff;
    /* Foto de fondo (rambla de Pocitos — la primera del slideshow del home).
       Sin tinte de color: la imagen se muestra natural, con sólo un gradiente
       oscuro neutro (slate) encima para mantener legibilidad del texto blanco.
       Versión tablet (1400px, ~140 KB WebP) — alcanza para este hero acotado. */
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 100%),
        url('/img/hero/hero-1-tablet.jpg') center / cover no-repeat;
}

/* image-set sólo para el background-image (el gradiente queda como capa fija
   arriba). Se separa la propiedad porque image-set no se puede combinar con
   linear-gradient en el shorthand. */
@supports (background-image: image-set(url('') type(''))) {
    .favs-hero[b-zbw65419ub] {
        background-image:
            linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 100%),
            image-set(
                url('/img/hero/hero-1-tablet.webp') type('image/webp') 1x,
                url('/img/hero/hero-1-tablet.jpg') type('image/jpeg') 1x
            );
    }
}

@media (max-width: 700px) {
    .favs-hero[b-zbw65419ub] {
        background:
            linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 100%),
            url('/img/hero/hero-1-mobile.jpg') center / cover no-repeat;
    }
    @supports (background-image: image-set(url('') type(''))) {
        .favs-hero[b-zbw65419ub] {
            background-image:
                linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 100%),
                image-set(
                    url('/img/hero/hero-1-mobile.webp') type('image/webp') 1x,
                    url('/img/hero/hero-1-mobile.jpg') type('image/jpeg') 1x
                );
        }
    }
}

/* Patrón decorativo de círculos suaves para sumarle textura al hero
   sin tapar la foto. Quedan por encima de la foto+overlay. */
.favs-hero-bg[b-zbw65419ub] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 38%),
        radial-gradient(circle at 88% 70%, rgba(255,255,255,0.14) 0, rgba(255,255,255,0) 40%),
        radial-gradient(circle at 60% 10%, rgba(15,23,42,0.14) 0, rgba(15,23,42,0) 30%);
    pointer-events: none;
}

.favs-hero-inner[b-zbw65419ub] {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.favs-hero-text[b-zbw65419ub] { max-width: 620px; }

.favs-eyebrow[b-zbw65419ub] {
    display: inline-block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.14);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 14px;
}

.favs-title[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.favs-sub[b-zbw65419ub] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.55;
    max-width: 560px;
}

/* Stats bar dentro del hero */
.favs-stats[b-zbw65419ub] {
    display: flex;
    align-items: stretch;
    gap: 28px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    padding: 18px 26px;
}

.favs-stat[b-zbw65419ub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 68px;
}

.favs-stat-num[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.favs-stat-label[b-zbw65419ub] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 6px;
}

.favs-stat-divider[b-zbw65419ub] {
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
}

/* ════════════════════════════════════════════════════
   LAYOUT (sidebar + main)
   ════════════════════════════════════════════════════ */
.favs-layout[b-zbw65419ub] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: flex-start;
    /* El layout "monta" sobre el hero para que el sidebar sobresalga. */
    margin-top: -52px;
    position: relative;
    z-index: 2;
}

/* ════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════ */
.favs-side[b-zbw65419ub] {
    position: sticky;
    top: 88px;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 12px 32px -12px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--color-border);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.favs-side-block[b-zbw65419ub] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.favs-side-block + .favs-side-block[b-zbw65419ub] {
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.favs-side-hdr[b-zbw65419ub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
}

.favs-side-label[b-zbw65419ub] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-disabled);
}

.favs-side-add[b-zbw65419ub] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    color: var(--color-text-muted);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.favs-side-add:hover[b-zbw65419ub] {
    background: #ccfbf1;
    color: var(--color-brand);
    transform: scale(1.05);
}

/* Botón base de carpeta (Todas / Sin carpeta / cada carpeta) */
.favs-folder[b-zbw65419ub] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--color-text-muted);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.favs-folder:hover[b-zbw65419ub] {
    background: var(--color-bg);
    color: var(--color-text);
}

.favs-folder--active[b-zbw65419ub],
.favs-folder--active:hover[b-zbw65419ub] {
    background: var(--color-brand-bg);
    color: var(--color-brand);
    border-color: var(--color-brand-pale);
}

.favs-folder--row[b-zbw65419ub] { flex: 1; }

.favs-folder-ico[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    color: inherit;
}

/* Iconos coloreados por tipo para que el sidebar tenga jerarquía visual. */
.favs-folder-ico--all[b-zbw65419ub]    { background: #ecfeff; color: #0e7490; }
.favs-folder-ico--inbox[b-zbw65419ub]  { background: #fef3c7; color: #b45309; }
.favs-folder-ico--folder[b-zbw65419ub] { background: #ddd6fe; color: #6d28d9; }

.favs-folder--active .favs-folder-ico[b-zbw65419ub] { background: #ccfbf1; color: var(--color-brand); }

.favs-folder-name[b-zbw65419ub] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favs-folder-count[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--color-border-soft);
    color: var(--color-text-muted);
    padding: 2px 9px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.favs-folder--active .favs-folder-count[b-zbw65419ub] {
    background: var(--color-brand);
    color: #fff;
}

/* Row con acciones (renombrar/eliminar) reveladas en hover */
.favs-folder-row[b-zbw65419ub] {
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.favs-folder-row--active[b-zbw65419ub] { background: var(--color-brand-bg); }

.favs-folder-row:hover .favs-folder-actions[b-zbw65419ub] { opacity: 1; }

.favs-folder-actions[b-zbw65419ub] {
    display: flex;
    gap: 2px;
    padding-right: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}

.favs-folder-act[b-zbw65419ub] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-disabled);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.favs-folder-act:hover[b-zbw65419ub] { background: var(--color-border-soft); color: var(--color-text); }
.favs-folder-act--del:hover[b-zbw65419ub] { background: #fee2e2; color: #dc2626; }

/* Crear carpeta */
.favs-new[b-zbw65419ub] {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favs-new-input[b-zbw65419ub] {
    padding: 9px 11px;
    border: 1px solid var(--color-divider);
    border-radius: 9px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.86rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.favs-new-input:focus[b-zbw65419ub] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.favs-new-actions[b-zbw65419ub] {
    display: flex;
    gap: 6px;
}

.favs-new-ok[b-zbw65419ub],
.favs-new-cancel[b-zbw65419ub] {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.favs-new-ok[b-zbw65419ub] {
    background: var(--color-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.22);
}

.favs-new-ok:hover[b-zbw65419ub] { background: var(--color-brand-dark); }
.favs-new-ok:active[b-zbw65419ub] { transform: scale(0.98); }
.favs-new-ok:disabled[b-zbw65419ub] {
    background: var(--color-divider);
    cursor: not-allowed;
    box-shadow: none;
}

.favs-new-cancel[b-zbw65419ub] {
    background: #fff;
    border-color: var(--color-border-soft);
    color: var(--color-text-muted);
}

.favs-new-cancel:hover[b-zbw65419ub] { background: #f1f5f9; }

/* Side empty */
.favs-side-empty[b-zbw65419ub] {
    padding: 6px 10px 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.favs-side-empty p[b-zbw65419ub] { margin: 0 0 4px; }
.favs-side-empty-hint[b-zbw65419ub] { color: var(--color-text-disabled); line-height: 1.4; }

/* Botón Vaciar */
.favs-clear[b-zbw65419ub] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.favs-clear:hover[b-zbw65419ub] { background: #fef2f2; border-color: #f87171; }

/* ════════════════════════════════════════════════════
   MAIN
   ════════════════════════════════════════════════════ */
.favs-main[b-zbw65419ub] {
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 12px 32px -16px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--color-border);
    padding: 24px;
    min-width: 0;
    min-height: 600px;
}

/* ─────────────── TABS Inmuebles / Proyectos ─────────────── */
.favs-tabs[b-zbw65419ub] {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}
.favs-tab[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.favs-tab:hover[b-zbw65419ub] {
    border-color: #0d9488;
    color: #0d9488;
    background: #f0fdfa;
}
.favs-tab--active[b-zbw65419ub] {
    background: #0d9488;
    border-color: #0d9488;
    color: white;
}
.favs-tab--active:hover[b-zbw65419ub] {
    background: #0f766e;
    border-color: #0f766e;
    color: white;
}
.favs-tab-count[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}
.favs-tab--active .favs-tab-count[b-zbw65419ub] {
    background: rgba(255, 255, 255, 0.25);
}

/* ─────────────── Grilla de proyectos guardados ─────────────── */
.favs-proy-grid[b-zbw65419ub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.favs-proy-wrap[b-zbw65419ub] {
    position: relative;
}
.favs-proy-remove[b-zbw65419ub] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s, background 0.18s, transform 0.18s;
    backdrop-filter: blur(6px);
}
.favs-proy-wrap:hover .favs-proy-remove[b-zbw65419ub] {
    opacity: 1;
}
.favs-proy-remove:hover[b-zbw65419ub] {
    background: #dc2626;
    transform: scale(1.08);
}

/* Dropdown "Mover a carpeta" debajo de la card de proyecto.
   Aparece solo si hay carpetas creadas — flota fuera de la card. */
.favs-proy-move[b-zbw65419ub] {
    margin-top: 6px;
}
.favs-mover[b-zbw65419ub] {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.78rem;
    color: #475569;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}
.favs-mover:hover[b-zbw65419ub], .favs-mover:focus[b-zbw65419ub] {
    border-color: #0d9488;
    color: #0d9488;
    outline: none;
}

.favs-toolbar[b-zbw65419ub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.favs-toolbar-title[b-zbw65419ub] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.favs-section-title[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.2px;
}

.favs-section-count[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    background: #f1f5f9;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Renombrar inline */
.favs-rename[b-zbw65419ub] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.favs-rename-input[b-zbw65419ub] {
    padding: 7px 10px;
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.85rem;
    color: var(--color-text);
    background: #fff;
    min-width: 200px;
}

.favs-rename-input:focus[b-zbw65419ub] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.favs-rename-ok[b-zbw65419ub],
.favs-rename-cancel[b-zbw65419ub] {
    padding: 7px 12px;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

.favs-rename-ok[b-zbw65419ub] { background: var(--color-brand); color: #fff; }
.favs-rename-ok:hover[b-zbw65419ub] { background: var(--color-brand-dark); }
.favs-rename-cancel[b-zbw65419ub] { background: #fff; border-color: var(--color-border-soft); color: var(--color-text-muted); }
.favs-rename-cancel:hover[b-zbw65419ub] { background: #f1f5f9; }

/* Toolbar tools (search + sort) */
.favs-toolbar-tools[b-zbw65419ub] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.favs-search[b-zbw65419ub] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    padding: 0 10px 0 12px;
    transition: border-color 0.15s, background 0.15s;
}

.favs-search:focus-within[b-zbw65419ub] {
    border-color: var(--color-brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.favs-search svg[b-zbw65419ub] { color: var(--color-text-disabled); flex-shrink: 0; }

.favs-search input[b-zbw65419ub] {
    border: none;
    background: transparent;
    padding: 9px 4px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.86rem;
    color: var(--color-text);
    width: 240px;
    outline: none;
}

.favs-search input[b-zbw65419ub]::placeholder { color: var(--color-text-disabled); }

.favs-sort[b-zbw65419ub] {
    padding: 9px 28px 9px 12px;
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-bg);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.favs-sort:focus[b-zbw65419ub] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* ════════════════════════════════════════════════════
   GRID DE CARDS
   ════════════════════════════════════════════════════ */
.favs-grid[b-zbw65419ub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}

.favs-card[b-zbw65419ub] {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s;
    display: flex;
    flex-direction: column;
}

.favs-card:hover[b-zbw65419ub] {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.18);
    border-color: var(--color-divider);
}

.favs-card-link[b-zbw65419ub] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.favs-card-img-wrap[b-zbw65419ub] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    overflow: hidden;
}

.favs-card-img[b-zbw65419ub] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.favs-card:hover .favs-card-img[b-zbw65419ub] { transform: scale(1.05); }

.favs-card-no-img[b-zbw65419ub] {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.favs-card-overlay[b-zbw65419ub] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 50%, rgba(15,23,42,0.7) 100%);
    pointer-events: none;
}

/* Tags arriba a la izquierda */
.favs-card-tags[b-zbw65419ub] {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 2;
}

.favs-card-tag[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favs-card-tag--op[b-zbw65419ub] {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.66rem;
}

.favs-card-tag--folder[b-zbw65419ub] {
    background: rgba(13, 148, 136, 0.92);
    color: #fff;
}

/* Precio overlay en la imagen, abajo */
.favs-card-price-overlay[b-zbw65419ub] {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;
}

.favs-card-price[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.3px;
}

/* Body */
.favs-card-body[b-zbw65419ub] {
    padding: 14px 16px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.favs-card-title[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.favs-card-loc[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    color: var(--color-text-subtle);
}

.favs-card-loc svg[b-zbw65419ub] { color: var(--color-text-disabled); flex-shrink: 0; }

.favs-card-stats[b-zbw65419ub] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.favs-card-stat[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.favs-card-stat svg[b-zbw65419ub] { color: var(--color-text-disabled); }

/* Toolbar inferior FUERA del <a> para que el click no navegue al detalle */
.favs-card-toolbar[b-zbw65419ub] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

.favs-card-mover[b-zbw65419ub] {
    flex: 1;
    padding: 8px 28px 8px 12px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.favs-card-mover:focus[b-zbw65419ub] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.favs-card-remove[b-zbw65419ub] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #fecaca;
    color: #ef4444;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, color 0.15s;
    flex-shrink: 0;
}

.favs-card-bell[b-zbw65419ub] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.favs-card-bell:hover:not(:disabled)[b-zbw65419ub] {
    background: #eff6ff;
    color: #1d4ed8;
    transform: scale(1.05);
}

.favs-card-bell:disabled[b-zbw65419ub] {
    opacity: 0.7;
    cursor: wait;
}

.favs-card-bell--on[b-zbw65419ub] {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #2563eb;
}

.favs-card-bell-spinner[b-zbw65419ub] {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(37, 99, 235, 0.25);
    border-top-color: currentColor;
    animation: favs-spin-b-zbw65419ub 0.7s linear infinite;
}

.favs-card-remove:hover[b-zbw65419ub] {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.05);
}

@keyframes favs-spin-b-zbw65419ub {
    to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════ */
.favs-empty[b-zbw65419ub] {
    text-align: center;
    padding: 64px 24px 80px;
}

.favs-empty-illu[b-zbw65419ub] {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
}

.favs-empty-circle[b-zbw65419ub] {
    position: absolute;
    border-radius: 50%;
}

.favs-empty-c1[b-zbw65419ub] {
    inset: 0;
    background: radial-gradient(circle, #ccfbf1 0%, var(--color-brand-bg) 70%);
}

.favs-empty-c2[b-zbw65419ub] {
    inset: 16px;
    background: #fff;
    box-shadow: 0 8px 24px -8px rgba(13, 148, 136, 0.35);
}

.favs-empty-illu svg[b-zbw65419ub] {
    position: relative;
    z-index: 1;
}

.favs-empty h3[b-zbw65419ub] {
    font-family: "Sora", sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}

.favs-empty p[b-zbw65419ub] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.95rem;
    color: var(--color-text-subtle);
    margin: 0 auto 24px;
    max-width: 480px;
    line-height: 1.55;
}

.favs-cta[b-zbw65419ub] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.32);
    transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
}

.favs-cta:hover[b-zbw65419ub] {
    background: var(--color-brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.4);
}

.favs-cta--ghost[b-zbw65419ub] {
    background: transparent;
    color: var(--color-brand);
    border: 1.5px solid var(--color-brand-pale);
    box-shadow: none;
}

.favs-cta--ghost:hover[b-zbw65419ub] {
    background: var(--color-brand-bg);
    box-shadow: none;
}

/* ════════════════════════════════════════════════════
   SKELETONS
   ════════════════════════════════════════════════════ */
.favs-skel[b-zbw65419ub] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.favs-skel-img[b-zbw65419ub] {
    aspect-ratio: 4 / 3;
    background: linear-gradient(90deg, #f1f5f9 0%, var(--color-border-soft) 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: favsShimmer-b-zbw65419ub 1.4s linear infinite;
}

.favs-skel-body[b-zbw65419ub] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favs-skel-line[b-zbw65419ub] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 0%, var(--color-border-soft) 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: favsShimmer-b-zbw65419ub 1.4s linear infinite;
}

.favs-skel-w-50[b-zbw65419ub] { width: 50%; }
.favs-skel-w-60[b-zbw65419ub] { width: 60%; }
.favs-skel-w-80[b-zbw65419ub] { width: 80%; }

@keyframes favsShimmer-b-zbw65419ub {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .favs-layout[b-zbw65419ub] { grid-template-columns: 1fr; }
    .favs-side[b-zbw65419ub] {
        position: static;
        order: 2;
    }
    .favs-main[b-zbw65419ub] { order: 1; }
}

@media (max-width: 720px) {
    .favs-hero[b-zbw65419ub] { padding: 40px 20px 80px; }
    .favs-hero-inner[b-zbw65419ub] { gap: 24px; }
    .favs-stats[b-zbw65419ub] {
        width: 100%;
        justify-content: space-around;
        padding: 14px 16px;
    }
    .favs-container[b-zbw65419ub] { padding: 0 16px 60px; }
    .favs-toolbar-tools[b-zbw65419ub] { width: 100%; }
    .favs-search[b-zbw65419ub] { flex: 1; }
    .favs-search input[b-zbw65419ub] { width: 100%; }
    .favs-folder-actions[b-zbw65419ub] { opacity: 1; }
    .favs-main[b-zbw65419ub] { padding: 18px; }
}

@media (max-width: 480px) {
    .favs-grid[b-zbw65419ub] { grid-template-columns: 1fr; }
    .favs-stat-num[b-zbw65419ub] { font-size: 1.5rem; }
    .favs-toolbar-tools[b-zbw65419ub] { flex-direction: column; align-items: stretch; }
    .favs-sort[b-zbw65419ub] { width: 100%; }

    /* En pantallas chicas (~375px iPhone) el toolbar inferior del card tiene
       el select "Mover a carpeta" + botón eliminar lado a lado. Con padding
       interno del card de 14px cada lado, queda muy apretado. Lo apilamos
       en vertical para que el select respire y el remove quede full-width. */
    .favs-card-toolbar[b-zbw65419ub] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .favs-card-remove[b-zbw65419ub] {
        width: 100%;
        height: 36px;
    }

    /* Hero más compacto en pantallas chicas — el original 40px top + 80px
       bottom roba demasiado scroll antes de mostrar el contenido real. */
    .favs-hero[b-zbw65419ub] { padding: 28px 16px 64px; }

    /* Sidebar pegado al main si por algún motivo el usuario tiene viewport
       intermedio (ej. tablet en portrait). Sólo aplica si el media 1024
       no triggereó por algún caso especial. */
    .favs-side[b-zbw65419ub] {
        position: static;
        top: auto;
    }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
/* =========================================================
   FORGOT PASSWORD PAGE
   ========================================================= */
.fp-container[b-auom7wryha] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f8fafc;
    padding: 24px;
    font-family: 'Inter', sans-serif;
}

.fp-card[b-auom7wryha] {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    text-align: center;
}

/* Icon */
.fp-icon-wrap[b-auom7wryha] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    margin-bottom: 24px;
}

.fp-icon[b-auom7wryha] {
    width: 28px;
    height: 28px;
    color: #0d9488;
}

/* Title & description */
.fp-title[b-auom7wryha] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.fp-desc[b-auom7wryha] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 28px 0;
    line-height: 1.6;
}

/* Form */
.fp-form[b-auom7wryha] {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.fp-field[b-auom7wryha] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.fp-label[b-auom7wryha] {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.fp-input[b-auom7wryha] {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.fp-input[b-auom7wryha]::placeholder {
    color: var(--color-text-subtle);
}

.fp-input:focus[b-auom7wryha] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* Alert */
.fp-alert[b-auom7wryha] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: left;
}

.fp-alert svg[b-auom7wryha] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fp-alert--ok[b-auom7wryha] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.fp-alert--err[b-auom7wryha] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Submit button */
.fp-submit[b-auom7wryha] {
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.fp-submit:hover:not(:disabled)[b-auom7wryha] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.45);
    filter: brightness(1.05);
}

.fp-submit:active:not(:disabled)[b-auom7wryha] {
    transform: translateY(0);
}

.fp-submit:disabled[b-auom7wryha] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner */
.fp-spinner[b-auom7wryha] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fp-spin-b-auom7wryha 0.6s linear infinite;
}

@keyframes fp-spin-b-auom7wryha {
    to { transform: rotate(360deg); }
}

/* Back link */
.fp-back-link[b-auom7wryha] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
    transition: color 0.15s;
}

.fp-back-link svg[b-auom7wryha] {
    width: 16px;
    height: 16px;
}

.fp-back-link:hover[b-auom7wryha] {
    color: #0f766e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Responsive */
@media (max-width: 480px) {
    .fp-card[b-auom7wryha] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ========================================= */
/* LISTO CASAS – HOME PAGE (scoped)         */
/* ========================================= */

/* ---------- LAYOUT ---------- */
.container[b-zsgzu6vw5z] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section[b-zsgzu6vw5z] {
    padding: 80px 0;
}

.section-title[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 40px 0;
    letter-spacing: -0.5px;
}

.section-header[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.section-header .section-title[b-zsgzu6vw5z] {
    margin-bottom: 0;
}

.ver-todas[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
    transition: color 0.2s;
}

.ver-todas:hover[b-zsgzu6vw5z] {
    color: var(--color-brand-dark);
}

/* ============================= */
/* HERO FULLSCREEN               */
/* ============================= */

.hero-fullscreen[b-zsgzu6vw5z] {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    font-family: "Inter", system-ui, sans-serif;
}

.hero-slides[b-zsgzu6vw5z] {
    position: absolute;
    /* Buffer arriba/abajo para que el parallax no exponga vacío */
    top: -260px; left: 0; right: 0; bottom: -60px;
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
    .hero-slides[b-zsgzu6vw5z] { transform: none !important; }
}

.hero-slide[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroFade-b-zsgzu6vw5z 21s infinite ease-in-out;
}

/* 3 slides, ~7s visibles cada una */
@keyframes heroFade-b-zsgzu6vw5z {
    0%   { opacity: 0; transform: scale(1); }
    4%   { opacity: 1; }
    30%  { opacity: 1; transform: scale(1.06); }
    36%  { opacity: 0; transform: scale(1.06); }
    100% { opacity: 0; }
}

/* Hero slides con responsive image-set: WebP donde se pueda (30% más liviano)
   y JPEG fallback. Las 3 variantes (mobile/tablet/desktop) se eligen via media
   queries más abajo, así un mobile no se baja la versión 2400px. */
.hs1[b-zsgzu6vw5z] {
    background-image: url('/img/hero/hero-1-desktop.jpg');
    background-image: image-set(
        url('/img/hero/hero-1-desktop.webp') type('image/webp') 1x,
        url('/img/hero/hero-1-desktop.jpg') type('image/jpeg') 1x
    );
    animation-delay: 0s;
}

.hs2[b-zsgzu6vw5z] {
    background-image: url('/img/hero/hero-2-desktop.jpg');
    background-image: image-set(
        url('/img/hero/hero-2-desktop.webp') type('image/webp') 1x,
        url('/img/hero/hero-2-desktop.jpg') type('image/jpeg') 1x
    );
    animation-delay: 7s;
}
/* hero-3 es el faro: el sujeto arranca al ~5% superior de la imagen y abajo
   hay mucho pasto. El contenedor .hero-slides tiene buffer -260/-60 para el
   parallax, así que TODOS los slides quedan corridos 260px arriba del hero,
   recortando justo la cúpula roja del faro.
   Para esta slide específica:
     1) Anclamos al TOP (cúpula visible).
     2) Cancelamos el buffer con top:260px / bottom:60px (override del inset:0
        de .hero-slide para que hs3 ocupe EXACTO el hero, no el contenedor
        extendido).
     3) Anulamos el translate del parallax con un translateY inverso dentro
        del propio @keyframes (combinado con el scale del zoom).
     4) transform-origin top → el zoom se "abre" desde la cúpula hacia abajo
        (no desde el centro), garantizando que el faro siempre quede en frame. */
.hs3[b-zsgzu6vw5z] {
    background-image: url('/img/hero/hero-3-desktop.jpg');
    background-image: image-set(
        url('/img/hero/hero-3-desktop.webp') type('image/webp') 1x,
        url('/img/hero/hero-3-desktop.jpg') type('image/jpeg') 1x
    );
    background-position: center top;
    top: 260px;
    bottom: 60px;
    animation: hs3Fade-b-zsgzu6vw5z 21s infinite ease-in-out;
    animation-delay: 14s;
    transform-origin: center top;
}

@keyframes hs3Fade-b-zsgzu6vw5z {
    /* translateY cancela el parallax-y heredado del padre.
       scale es el zoom propio de la slide (suave, 1 → 1.04). */
    0%   { opacity: 0; transform: translateY(calc(var(--parallax-y, 0px) * -1)) scale(1); }
    4%   { opacity: 1; }
    30%  { opacity: 1; transform: translateY(calc(var(--parallax-y, 0px) * -1)) scale(1.04); }
    36%  { opacity: 0; transform: translateY(calc(var(--parallax-y, 0px) * -1)) scale(1.04); }
    100% { opacity: 0; }
}

/* ── Responsive image-set: tablet (≤1400px) y mobile (≤700px) ──
   Bajamos la resolución descargada a la del viewport real. Un mobile no se
   baja la versión 2400px (∼300 KB) cuando le alcanza con la 800px (∼50 KB). */
@media (max-width: 1400px) {
    .hs1[b-zsgzu6vw5z] {
        background-image: url('/img/hero/hero-1-tablet.jpg');
        background-image: image-set(
            url('/img/hero/hero-1-tablet.webp') type('image/webp') 1x,
            url('/img/hero/hero-1-tablet.jpg') type('image/jpeg') 1x
        );
    }
    .hs2[b-zsgzu6vw5z] {
        background-image: url('/img/hero/hero-2-tablet.jpg');
        background-image: image-set(
            url('/img/hero/hero-2-tablet.webp') type('image/webp') 1x,
            url('/img/hero/hero-2-tablet.jpg') type('image/jpeg') 1x
        );
    }
    .hs3[b-zsgzu6vw5z] {
        background-image: url('/img/hero/hero-3-tablet.jpg');
        background-image: image-set(
            url('/img/hero/hero-3-tablet.webp') type('image/webp') 1x,
            url('/img/hero/hero-3-tablet.jpg') type('image/jpeg') 1x
        );
    }
}

@media (max-width: 700px) {
    .hs1[b-zsgzu6vw5z] {
        background-image: url('/img/hero/hero-1-mobile.jpg');
        background-image: image-set(
            url('/img/hero/hero-1-mobile.webp') type('image/webp') 1x,
            url('/img/hero/hero-1-mobile.jpg') type('image/jpeg') 1x
        );
    }
    .hs2[b-zsgzu6vw5z] {
        background-image: url('/img/hero/hero-2-mobile.jpg');
        background-image: image-set(
            url('/img/hero/hero-2-mobile.webp') type('image/webp') 1x,
            url('/img/hero/hero-2-mobile.jpg') type('image/jpeg') 1x
        );
    }
    .hs3[b-zsgzu6vw5z] {
        background-image: url('/img/hero/hero-3-mobile.jpg');
        background-image: image-set(
            url('/img/hero/hero-3-mobile.webp') type('image/webp') 1x,
            url('/img/hero/hero-3-mobile.jpg') type('image/jpeg') 1x
        );
    }
}

.hero-overlay[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15,23,42,0.35) 0%, rgba(15,23,42,0.75) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-content[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.hero-title[b-zsgzu6vw5z] {
    /* Escala fluida entre 1.8rem (mobile chico) y 3.4rem (desktop) usando 8vw
       como factor de viewport. Reemplaza los breakpoints discretos previos
       (3.4 → 2.6 → 2.0 rem) que generaban "saltos" visibles al redimensionar.
       Plan Fase 1.6 del PLAN-PRODUCCION. */
    font-size: clamp(1.8rem, 8vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.08;
    margin: 0 0 14px 0;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}

.hero-subtitle[b-zsgzu6vw5z] {
    /* Subtítulo: 0.95rem (mobile) → 1.25rem (desktop). */
    font-size: clamp(0.95rem, 2.5vw, 1.25rem);
    font-weight: 400;
    margin: 0 0 36px 0;
    opacity: 0.9;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* ---------- SEARCH BAR ---------- */
.search-bar[b-zsgzu6vw5z] {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
    max-width: 820px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}

.search-toggle[b-zsgzu6vw5z] {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
}

.toggle-btn[b-zsgzu6vw5z] {
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: rgba(255,255,255,0.7);
}

.toggle-btn:hover[b-zsgzu6vw5z] {
    color: #fff;
}

.toggle-active[b-zsgzu6vw5z] {
    background: var(--color-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13,148,136,0.4);
}

/* ---------- SEARCH TEXT INPUT ---------- */
.search-text[b-zsgzu6vw5z] {
    position: relative;
    margin-bottom: 14px;
}

.search-text-icon[b-zsgzu6vw5z] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.5);
    pointer-events: none;
}

.search-text-input[b-zsgzu6vw5z] {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.92rem;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.search-text-input[b-zsgzu6vw5z]::placeholder {
    color: rgba(255,255,255,0.5);
}

.search-text-input:focus[b-zsgzu6vw5z] {
    outline: none;
    border-color: var(--color-brand);
    background: rgba(255,255,255,0.15);
}

.search-fields[b-zsgzu6vw5z] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.search-field[b-zsgzu6vw5z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-field label[b-zsgzu6vw5z] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.7);
    padding-left: 2px;
}

.search-field select[b-zsgzu6vw5z] {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.search-field select:focus[b-zsgzu6vw5z] {
    outline: none;
    border-color: var(--color-brand);
}

.search-field select option[b-zsgzu6vw5z] {
    background: var(--color-text);
    color: #fff;
}

/* Input de texto con datalist para el filtro de Barrio. Lo dejamos
   visualmente IDÉNTICO al .search-field select: misma flecha SVG blanca
   custom, mismo padding-right, mismo color, mismo placeholder. La flecha
   nativa del datalist (que cada browser dibuja distinto) la escondemos
   con ::-webkit-calendar-picker-indicator para que no compita con la
   nuestra. El placeholder lo ponemos al mismo blanco que la opción "Todos"
   de los selects para que el header del campo se lea idéntico cuando no
   hay valor elegido. */
.search-field-input[b-zsgzu6vw5z] {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Hide del indicator nativo de Chromium/WebKit para inputs con list. */
.search-field-input[b-zsgzu6vw5z]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}
/* Firefox no muestra el indicator pero igual aplicamos el mismo trick por si
   acaso, y nos aseguramos de que la flecha custom se vea igual. */
.search-field-input[b-zsgzu6vw5z]::-moz-list-bullet { display: none; }

.search-field-input[b-zsgzu6vw5z]::placeholder {
    /* Igualamos el contraste del "Todos" del select: blanco casi sólido
       en vez del placeholder default semi-transparente. */
    color: #fff;
    opacity: 1;
}

.search-field-input:focus[b-zsgzu6vw5z] {
    outline: none;
    border-color: var(--color-brand);
    background: rgba(255,255,255,0.18);
}

.search-btn[b-zsgzu6vw5z] {
    padding: 10px 32px;
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(13,148,136,0.4);
}

.search-btn:hover[b-zsgzu6vw5z] {
    background: var(--color-brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(13,148,136,0.5);
}

/* ---------- HERO STATS ---------- */
.hero-stats[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
}

.stats-dot[b-zsgzu6vw5z] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
}

/* ============================= */
/* POPULAR SEARCHES              */
/* ============================= */

.popular-section[b-zsgzu6vw5z] {
    background: #fff;
    /* Apretamos el top para que no quede un valle gigante con featured-section
       (ambas son fondo blanco, no necesitan tanto aire entre sí). */
    padding-top: 32px;
}

.popular-grid[b-zsgzu6vw5z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.popular-card[b-zsgzu6vw5z] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/10;
    display: block;
    text-decoration: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}

.popular-card:hover[b-zsgzu6vw5z] {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(13, 148, 136, 0.22);
}

.popular-card img[b-zsgzu6vw5z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.popular-card:hover img[b-zsgzu6vw5z] {
    transform: scale(1.08);
}

.popular-overlay[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.72) 0%, rgba(15,23,42,0.15) 55%, transparent 100%);
    transition: background 0.32s ease, opacity 0.32s ease;
    pointer-events: none;
}

.popular-card:hover .popular-overlay[b-zsgzu6vw5z] {
    background: linear-gradient(
        to top,
        rgba(13, 148, 136, 0.92) 0%,
        rgba(15, 23, 42, 0.78) 55%,
        rgba(15, 23, 42, 0.35) 100%
    );
}

/* Bloque de info que crece desde el bottom al hover */
.popular-info[b-zsgzu6vw5z] {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    color: #fff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none; /* el <a> es el que recibe el click */
}

.popular-label[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    letter-spacing: -0.2px;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.popular-card:hover .popular-label[b-zsgzu6vw5z] { transform: translateY(-2px); }

.popular-desc[b-zsgzu6vw5z] {
    margin: 4px 0 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease 0.04s,
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.04s,
                margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.popular-card:hover .popular-desc[b-zsgzu6vw5z] {
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
}

.popular-cta[b-zsgzu6vw5z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5eead4;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease 0.08s,
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}

.popular-cta svg[b-zsgzu6vw5z] { transition: transform 0.25s ease; }

.popular-card:hover .popular-cta[b-zsgzu6vw5z] {
    opacity: 1;
    transform: translateY(0);
}

.popular-card:hover .popular-cta svg[b-zsgzu6vw5z] { transform: translateX(4px); }

/* Soporte focus accesible (teclado) */
.popular-card:focus-visible[b-zsgzu6vw5z] {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(13, 148, 136, 0.22);
    outline: 2px solid #5eead4;
    outline-offset: 4px;
}

.popular-card:focus-visible .popular-overlay[b-zsgzu6vw5z] {
    background: linear-gradient(
        to top,
        rgba(13, 148, 136, 0.92) 0%,
        rgba(15, 23, 42, 0.78) 55%,
        rgba(15, 23, 42, 0.35) 100%
    );
}

.popular-card:focus-visible .popular-desc[b-zsgzu6vw5z] {
    max-height: 120px; opacity: 1; transform: translateY(0);
}

.popular-card:focus-visible .popular-cta[b-zsgzu6vw5z] {
    opacity: 1; transform: translateY(0);
}

/* ============================= */
/* AGENCIES STRIP (marquee)      */
/* ============================= */
/* Strip horizontal entre el hero y "Búsquedas populares" que muestra
   los logos de las inmobiliarias registradas desplazándose de derecha
   a izquierda sin intervención del usuario. Loop seamless porque el
   track contiene la lista duplicada (agency-track se traduce -50% y
   la segunda mitad queda exactamente donde arrancó la primera). */
.agencies-strip[b-zsgzu6vw5z] {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
    padding: 22px 0;
    overflow: hidden;
}

.agencies-strip-inner[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    gap: 28px;
}

.agencies-label[b-zsgzu6vw5z] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    white-space: nowrap;
}

.agencies-marquee[b-zsgzu6vw5z] {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    /* Fades en los bordes para que las chips no aparezcan/desaparezcan
       de golpe — les da sensación de continuidad. */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.agencies-track[b-zsgzu6vw5z] {
    display: flex;
    gap: 36px;
    width: max-content;
    animation: agencies-scroll-b-zsgzu6vw5z 40s linear infinite;
}

.agencies-marquee:hover .agencies-track[b-zsgzu6vw5z] {
    animation-play-state: paused;
}

/* -50% porque el track contiene la lista DUPLICADA: al moverse un 50%
   justo la segunda mitad queda en la posición que tenía la primera,
   así el loop no se nota. */
@keyframes agencies-scroll-b-zsgzu6vw5z {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.agency-chip[b-zsgzu6vw5z] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 10px;
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 700;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.agency-chip:hover[b-zsgzu6vw5z] {
    border-color: var(--color-brand-light);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.15);
    transform: translateY(-1px);
}

.agency-chip img[b-zsgzu6vw5z] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f5f9;
    flex: 0 0 auto;
}

.agency-fallback[b-zsgzu6vw5z] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand), #14b8a6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.agency-name[b-zsgzu6vw5z] {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .agencies-strip-inner[b-zsgzu6vw5z] { flex-direction: column; align-items: flex-start; gap: 10px; }
    .agencies-marquee[b-zsgzu6vw5z] { width: 100%; }
    .agencies-track[b-zsgzu6vw5z] { gap: 24px; }
    .agency-chip[b-zsgzu6vw5z] { padding: 6px 14px 6px 8px; font-size: 0.8rem; }
    .agency-chip img[b-zsgzu6vw5z], .agency-fallback[b-zsgzu6vw5z] { width: 28px; height: 28px; }
}

/* ============================= */
/* FEATURED PROPERTIES           */
/* ============================= */

.featured-section[b-zsgzu6vw5z] {
    background: #fff;
    /* Antes era 0 porque la sección venía después del diff-section.
       Ahora va justo debajo del agencies-strip (chips compactos), así que
       le devolvemos un padding-top normal pero un poco menor que el default
       para mantener ritmo apretado con el strip de inmobiliarias. */
    padding-top: 56px;
    padding-bottom: 56px;
}

.properties-grid[b-zsgzu6vw5z] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ============================= */
/* CAROUSEL DESTACADAS           */
/* ============================= */
/* Layout: [prev btn][viewport][next btn] sobre el flujo horizontal.
   El track contiene TODAS las cards en una fila; mostramos 4 por vez
   y deslizamos con transform según --page (0, 1, 2...). El gap entre
   páginas se compensa sumando 20px al desplazamiento. */
.carousel[b-zsgzu6vw5z] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.carousel-viewport[b-zsgzu6vw5z] {
    flex: 1 1 auto;
    overflow: hidden;
    /* Le dejamos algo de aire arriba/abajo para que el hover (translateY -4px
       y la sombra) no quede recortado por el overflow:hidden. */
    margin: -8px -2px;
    padding: 8px 2px;
}

.carousel-track[b-zsgzu6vw5z] {
    display: flex;
    gap: 20px;
    /* Se desliza una página a la vez: 100% del viewport + 20px de gap entre cards. */
    transform: translateX(calc(var(--page, 0) * (-100% - 20px)));
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Cada card ocupa exactamente 1/4 del viewport, descontando los 3 gaps interiores. */
.carousel-track > .prop-card[b-zsgzu6vw5z] {
    flex: 0 0 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
}

.carousel-nav[b-zsgzu6vw5z] {
    flex: 0 0 auto;
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border-soft);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.carousel-nav:hover:not(:disabled)[b-zsgzu6vw5z] {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.carousel-nav:disabled[b-zsgzu6vw5z] {
    opacity: 0.35;
    cursor: not-allowed;
}

.carousel-dots[b-zsgzu6vw5z] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.carousel-dot[b-zsgzu6vw5z] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--color-divider);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, width 0.25s;
}

.carousel-dot:hover[b-zsgzu6vw5z] {
    background: var(--color-text-disabled);
}

.carousel-dot--active[b-zsgzu6vw5z] {
    background: var(--color-brand);
    width: 22px;
    border-radius: 4px;
}

/* Responsive: cantidad de cards visibles por viewport.
   Las flechas se siguen viendo y la fórmula del transform sigue
   siendo (-100% - gap) por página. */
@media (max-width: 1100px) {
    .carousel-track > .prop-card[b-zsgzu6vw5z] {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}

@media (max-width: 768px) {
    .carousel-track > .prop-card[b-zsgzu6vw5z] {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
    .carousel-nav[b-zsgzu6vw5z] { width: 36px; height: 36px; }
}

@media (max-width: 520px) {
    .carousel-track > .prop-card[b-zsgzu6vw5z] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.prop-card[b-zsgzu6vw5z] {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s;
    display: block;
}

.prop-card:hover[b-zsgzu6vw5z] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.prop-image-wrap[b-zsgzu6vw5z] {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-bg);
}

.prop-image[b-zsgzu6vw5z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.prop-card:hover .prop-image[b-zsgzu6vw5z] {
    transform: scale(1.04);
}

.badge[b-zsgzu6vw5z] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-featured[b-zsgzu6vw5z] {
    background: var(--color-brand);
    color: #fff;
}

.badge-new[b-zsgzu6vw5z] {
    background: #3b82f6;
    color: #fff;
}

.photo-count[b-zsgzu6vw5z] {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.save-btn[b-zsgzu6vw5z] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-subtle);
}

.save-btn:hover[b-zsgzu6vw5z] {
    background: #fff;
    color: #ef4444;
    transform: scale(1.1);
}

.prop-body[b-zsgzu6vw5z] {
    padding: 14px 16px 18px;
}

.prop-price[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 4px;
}

.prop-detail[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin-bottom: 2px;
}

.prop-location[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--color-text-disabled);
}

/* ---- SKELETON ---- */
.skeleton-card[b-zsgzu6vw5z] {
    pointer-events: none;
}

.skeleton-image[b-zsgzu6vw5z] {
    aspect-ratio: 4/3;
    background: linear-gradient(90deg, var(--color-border-soft) 25%, #f1f5f9 50%, var(--color-border-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-zsgzu6vw5z 1.5s infinite;
    border-radius: 12px 12px 0 0;
}

.skeleton-body[b-zsgzu6vw5z] {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line[b-zsgzu6vw5z] {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-border-soft) 25%, #f1f5f9 50%, var(--color-border-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-zsgzu6vw5z 1.5s infinite;
}

.skeleton-price[b-zsgzu6vw5z] { width: 55%; height: 18px; }
.skeleton-detail[b-zsgzu6vw5z] { width: 75%; }
.skeleton-location[b-zsgzu6vw5z] { width: 50%; }

@keyframes shimmer-b-zsgzu6vw5z {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- EMPTY STATE ---- */
.empty-state[b-zsgzu6vw5z] {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-disabled);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
}

/* ============================= */
/* DIFERENCIAL SECTION           */
/* ============================= */

.diff-section[b-zsgzu6vw5z] {
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* ── Fondo decorativo: blobs teal + grid sutil ───────────────────── */
.diff-bg[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.diff-bg-blob[b-zsgzu6vw5z] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}

.diff-bg-blob--1[b-zsgzu6vw5z] {
    width: 480px; height: 480px;
    top: -160px; right: -120px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.5), transparent 65%);
    animation: diffBlob1-b-zsgzu6vw5z 22s ease-in-out infinite;
}

.diff-bg-blob--2[b-zsgzu6vw5z] {
    width: 380px; height: 380px;
    bottom: -120px; left: -100px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.32), transparent 65%);
    animation: diffBlob2-b-zsgzu6vw5z 28s ease-in-out infinite;
}

@keyframes diffBlob1-b-zsgzu6vw5z {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-40px, 30px); }
}

@keyframes diffBlob2-b-zsgzu6vw5z {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(50px, -25px); }
}

/* Grilla muy sutil para dar textura sin competir con el contenido */
.diff-bg-grid[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(13, 148, 136, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 148, 136, 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 90%);
}

/* Aseguramos que el contenido quede arriba del fondo */
.diff-section .container[b-zsgzu6vw5z] {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .diff-bg-blob[b-zsgzu6vw5z] { animation: none !important; }
}

.diff-layout[b-zsgzu6vw5z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.diff-badge[b-zsgzu6vw5z] {
    display: inline-block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand);
    background: var(--color-brand-bg);
    border: 1px solid var(--color-brand-pale);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.diff-title[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
}

.diff-desc[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--color-text-subtle);
    line-height: 1.7;
    margin: 0 0 16px 0;
}

.diff-desc strong[b-zsgzu6vw5z] {
    color: var(--color-text);
}

.diff-features[b-zsgzu6vw5z] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 28px 0 32px;
}

.diff-feat[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
}

.diff-cta[b-zsgzu6vw5z] {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    border-radius: 12px;
    background: var(--color-brand);
    color: #fff;
    text-decoration: none;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(13,148,136,0.3);
}

.diff-cta:hover[b-zsgzu6vw5z] {
    background: var(--color-brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13,148,136,0.35);
    color: #fff;
}

/* ============================= */
/* COMPARATIVA "ANTES / DESPUÉS" */
/* ============================= */

.diff-visual[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", system-ui, sans-serif;
}

.diff-compare[b-zsgzu6vw5z] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
    width: 100%;
    max-width: 580px;
}

.diff-compare-side[b-zsgzu6vw5z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.diff-compare-label[b-zsgzu6vw5z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.diff-compare-label--brand[b-zsgzu6vw5z] { color: var(--color-brand); }

.diff-compare-dot[b-zsgzu6vw5z] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.diff-compare-dot--brand[b-zsgzu6vw5z] {
    background: var(--color-brand);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18);
    animation: diffPulseDot-b-zsgzu6vw5z 2.4s ease-in-out infinite;
}

@keyframes diffPulseDot-b-zsgzu6vw5z {
    0%, 100% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(13, 148, 136, 0.10); }
}

/* ── Lado "Otros portales": stack desordenado de cards duplicadas ── */
.diff-compare-stack[b-zsgzu6vw5z] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Ligero blur/desenfoque para reforzar la sensación de "ruido" */
    filter: saturate(0.9);
}

.diff-dup-card[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    /* Cada card aparece con un leve offset y rotación dependiendo de --i.
       Le da look "manuscrito / desordenado" sin parecer roto. */
    transform: translateX(calc(var(--i, 0) * 1.6px - 3px))
               rotate(calc((var(--i, 0) - 2) * 0.45deg));
    opacity: 0.85;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
    animation: diffDupFloat-b-zsgzu6vw5z 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.18s);
    will-change: transform;
}

.diff-dup-card:nth-child(odd)[b-zsgzu6vw5z] {
    background: #fafafa;
}

@keyframes diffDupFloat-b-zsgzu6vw5z {
    0%, 100% { transform: translateX(calc(var(--i, 0) * 1.6px - 3px)) rotate(calc((var(--i, 0) - 2) * 0.45deg)); }
    50%      { transform: translateX(calc(var(--i, 0) * 1.6px - 3px + 2px)) rotate(calc((var(--i, 0) - 2) * 0.45deg + 0.3deg)); }
}

/* Al hacer hover sobre el lado "antes" se desordenan más para enfatizar caos */
.diff-compare-side--before:hover .diff-dup-card[b-zsgzu6vw5z] {
    animation-play-state: paused;
}

.diff-compare-side--before:hover .diff-dup-card[b-zsgzu6vw5z] {
    transform: translateX(calc(var(--i, 0) * 4px - 8px))
               rotate(calc((var(--i, 0) - 2) * 1.2deg));
}

.diff-dup-thumb[b-zsgzu6vw5z] {
    width: 38px; height: 38px;
    border-radius: 6px;
    background-image: url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=200&q=70&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    /* Mismo thumb en las 5 cards refuerza visualmente que es el mismo aviso. */
}

.diff-dup-body[b-zsgzu6vw5z] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.diff-dup-title[b-zsgzu6vw5z] {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diff-dup-meta[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.62rem;
}

.diff-dup-agency[b-zsgzu6vw5z] {
    color: var(--color-text-disabled);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diff-dup-price[b-zsgzu6vw5z] {
    color: var(--color-text-subtle);
    font-weight: 700;
    white-space: nowrap;
}

/* "mismo aviso": chip pequeñito a la derecha de cada card duplicada
   que aparece a partir de la 2da. La 1ra no la lleva (la idea es que
   cada card siguiente se "marca" como repetición de la primera). */
.diff-dup-flag[b-zsgzu6vw5z] {
    display: none;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #b45309;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.diff-dup-card:not(:first-child) .diff-dup-flag[b-zsgzu6vw5z] { display: inline-flex; }

/* Caption debajo del stack. Refuerza el mensaje numéricamente. */
.diff-dup-summary[b-zsgzu6vw5z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
}

.diff-dup-summary svg[b-zsgzu6vw5z] { flex-shrink: 0; }

/* ── Flecha central animada ──────────────────────────────────────── */
.diff-compare-arrow[b-zsgzu6vw5z] {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--color-brand);
    padding: 0 2px;
}

.diff-compare-arrow svg[b-zsgzu6vw5z] {
    animation: diffArrowSlide-b-zsgzu6vw5z 2.2s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(13, 148, 136, 0.35));
}

@keyframes diffArrowSlide-b-zsgzu6vw5z {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

.diff-compare-arrow-label[b-zsgzu6vw5z] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-brand);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .diff-compare-arrow svg[b-zsgzu6vw5z],
    .diff-dup-card[b-zsgzu6vw5z],
    .diff-compare-dot--brand[b-zsgzu6vw5z] { animation: none !important; }
}

/* ── Lado "Listo Casas": card unificada limpia ───────────────────── */
.diff-unified-card[b-zsgzu6vw5z] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-brand-pale);
    box-shadow:
        0 18px 42px rgba(13, 148, 136, 0.16),
        0 4px 14px rgba(15, 23, 42, 0.06);
    position: relative;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.diff-compare-side--after:hover .diff-unified-card[b-zsgzu6vw5z] {
    transform: translateY(-4px);
    box-shadow:
        0 26px 60px rgba(13, 148, 136, 0.24),
        0 4px 14px rgba(15, 23, 42, 0.08);
}

.diff-unified-thumb[b-zsgzu6vw5z] {
    position: relative;
    height: 90px;
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.85), rgba(94, 234, 212, 0.55)),
        url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=600&q=80&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

.diff-unified-badge[b-zsgzu6vw5z] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-brand-dark);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.diff-unified-body[b-zsgzu6vw5z] {
    padding: 14px 16px 16px;
}

.diff-unified-title[b-zsgzu6vw5z] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.2px;
    margin-bottom: 2px;
}

.diff-unified-meta[b-zsgzu6vw5z] {
    font-size: 0.72rem;
    color: var(--color-text-disabled);
    margin-bottom: 10px;
}

.diff-unified-prices[b-zsgzu6vw5z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px dashed var(--color-border-soft);
    padding-top: 10px;
}

.diff-unified-price-row[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    transition: background 0.2s;
}

.diff-unified-price-row:not(.diff-unified-price-row--best):hover[b-zsgzu6vw5z] {
    background: var(--color-bg);
}

.diff-unified-price-row--best[b-zsgzu6vw5z] {
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.32);
}

.diff-unified-price-tag[b-zsgzu6vw5z] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
}

.diff-unified-price-agency[b-zsgzu6vw5z] {
    font-weight: 600;
    color: var(--color-text-disabled);
}

.diff-unified-price-row--best .diff-unified-price-agency[b-zsgzu6vw5z] { color: #fff; }

.diff-unified-price-amount[b-zsgzu6vw5z] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.diff-unified-savings[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-brand-bg);
    border: 1px solid var(--color-brand-pale);
    color: var(--color-brand-dark);
    font-size: 0.74rem;
    font-weight: 600;
}

.diff-unified-savings strong[b-zsgzu6vw5z] {
    color: var(--color-brand-dark);
    font-weight: 800;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .diff-compare[b-zsgzu6vw5z] {
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
    }
    .diff-dup-card[b-zsgzu6vw5z] { padding: 6px 8px; }
    .diff-dup-thumb[b-zsgzu6vw5z] { width: 28px; height: 28px; }
}

/* ============================= */
/* SOFI DIFFERENTIAL             */
/* ============================= */

.sofi-section[b-zsgzu6vw5z] {
    background: #fff;
    padding-top: 32px;
}

.sofi-layout[b-zsgzu6vw5z] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 58px;
    align-items: center;
}

.sofi-copy[b-zsgzu6vw5z] {
    max-width: 520px;
}

.sofi-example-list[b-zsgzu6vw5z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}

.sofi-example-pill[b-zsgzu6vw5z] {
    width: fit-content;
    max-width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 650;
}

.sofi-visual[b-zsgzu6vw5z] {
    min-height: 380px;
}

.sofi-visual img[b-zsgzu6vw5z] {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    box-shadow: 0 18px 36px rgba(15,23,42,0.13);
}

.sofi-ai-rail[b-zsgzu6vw5z] {
    width: 100%;
    margin-top: 24px;
}

.sofi-card-rotator[b-zsgzu6vw5z] {
    position: relative;
    min-height: 178px;
    pointer-events: none;
}

.sofi-rotating-card[b-zsgzu6vw5z] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    padding: 20px;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
    animation: sofiCardCycle-b-zsgzu6vw5z 32s infinite;
}

.sofi-rotating-card.card-two[b-zsgzu6vw5z] { animation-delay: 8s; }
.sofi-rotating-card.card-three[b-zsgzu6vw5z] { animation-delay: 16s; }
.sofi-rotating-card.card-four[b-zsgzu6vw5z] { animation-delay: 24s; }

@keyframes sofiCardCycle-b-zsgzu6vw5z {
    0%   { opacity: 0; transform: translateY(14px); }
    4%   { opacity: 1; transform: translateY(0); }
    22%  { opacity: 1; transform: translateY(0); }
    26%  { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-10px); }
}

.sofi-rotating-card span[b-zsgzu6vw5z],
.sofi-rotating-card strong[b-zsgzu6vw5z],
.sofi-rotating-card p[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
}

.sofi-rotating-card span[b-zsgzu6vw5z] {
    display: block;
    color: var(--color-brand);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sofi-rotating-card strong[b-zsgzu6vw5z] {
    display: block;
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.sofi-rotating-card p[b-zsgzu6vw5z] {
    color: var(--color-text-subtle);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* ============================= */
/* STATS BAR                     */
/* ============================= */

.stats-section[b-zsgzu6vw5z] {
    background: var(--color-bg);
    padding: 48px 0;
}

.stats-section .section[b-zsgzu6vw5z] { padding: 0; }

.stats-bar[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.stat-item[b-zsgzu6vw5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-number[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.5px;
}

.stat-label[b-zsgzu6vw5z] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-disabled);
}

.stat-divider[b-zsgzu6vw5z] {
    width: 1px;
    height: 40px;
    background: var(--color-border-soft);
}

/* ============================= */
/* FOOTER                        */
/* ============================= */

.site-footer[b-zsgzu6vw5z] {
    background: var(--color-text);
    color: rgba(255,255,255,0.7);
    padding: 40px 0;
    font-family: "Inter", system-ui, sans-serif;
}

.footer-inner[b-zsgzu6vw5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-brand[b-zsgzu6vw5z] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.footer-links[b-zsgzu6vw5z] {
    display: flex;
    gap: 24px;
}

.footer-links a[b-zsgzu6vw5z] {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.2s;
}

.footer-links a:hover[b-zsgzu6vw5z] {
    color: #fff;
}

.footer-copy[b-zsgzu6vw5z] {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}

/* ============================= */
/* RESPONSIVE                    */
/* ============================= */

@media (max-width: 1200px) {
    .properties-grid[b-zsgzu6vw5z] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .section[b-zsgzu6vw5z] { padding: 60px 0; }
    .section-title[b-zsgzu6vw5z] { font-size: 1.5rem; margin-bottom: 30px; }

    /* hero-title/subtitle ya escalan via clamp() — no hay override discreto. */

    .search-fields[b-zsgzu6vw5z] {
        flex-wrap: wrap;
    }

    .search-field[b-zsgzu6vw5z] {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .search-btn[b-zsgzu6vw5z] {
        flex: 1 1 100%;
    }

    .popular-grid[b-zsgzu6vw5z] {
        grid-template-columns: repeat(2, 1fr);
    }

    .properties-grid[b-zsgzu6vw5z] {
        grid-template-columns: repeat(2, 1fr);
    }

    .diff-layout[b-zsgzu6vw5z] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .diff-title[b-zsgzu6vw5z] { font-size: 1.8rem; }
    /* En tablet ya no escondemos la comparativa: la mostramos abajo del texto.
       Sólo apretamos un poco el ancho y el thumb para que no se desborde. */
    .diff-visual[b-zsgzu6vw5z] { order: 2; }
    .diff-compare[b-zsgzu6vw5z] { max-width: 520px; margin: 0 auto; }
    .diff-bg-blob--1[b-zsgzu6vw5z] { width: 320px; height: 320px; }
    .diff-bg-blob--2[b-zsgzu6vw5z] { width: 260px; height: 260px; }
    .sofi-layout[b-zsgzu6vw5z] {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .stats-bar[b-zsgzu6vw5z] { gap: 24px; flex-wrap: wrap; }
    .stat-number[b-zsgzu6vw5z] { font-size: 1.3rem; }
}

@media (max-width: 640px) {
    .section[b-zsgzu6vw5z] { padding: 48px 0; }
    .section-title[b-zsgzu6vw5z] { font-size: 1.3rem; margin-bottom: 24px; }

    /* hero-title/subtitle ya escalan via clamp() en mobile. Sólo ajustamos
       el margin del subtítulo en pantallas chicas para apretar el layout. */
    .hero-subtitle[b-zsgzu6vw5z] { margin-bottom: 28px; }

    .search-bar[b-zsgzu6vw5z] {
        padding: 16px;
        border-radius: 14px;
    }

    .search-fields[b-zsgzu6vw5z] {
        flex-direction: column;
        gap: 8px;
        /* En mobile, al cambiar a column, align-items: flex-end (heredado del
           base) flippa de eje y empujaba los campos a la derecha. Reset a
           stretch para que cada .search-field ocupe el ancho completo. */
        align-items: stretch;
    }

    .search-field[b-zsgzu6vw5z] {
        flex: 1 1 100%;
        width: 100%;
    }

    .search-btn[b-zsgzu6vw5z] {
        width: 100%;
        padding: 12px;
    }

    .hero-stats[b-zsgzu6vw5z] {
        flex-wrap: wrap;
        justify-content: center;
        font-size: 0.78rem;
        gap: 8px 14px;
        padding: 0 8px;
        line-height: 1.5;
        max-width: 100%;
        /* En mobile la stats-row puede tener 3 items separados con dots — si
           wrappea a 2 líneas, queremos que cada item respire un poco mejor. */
        column-gap: 14px;
    }
    .stats-dot[b-zsgzu6vw5z] {
        /* Reducimos el dot para que no domine visualmente en mobile. */
        width: 3px;
        height: 3px;
    }

    .popular-grid[b-zsgzu6vw5z] {
        grid-template-columns: 1fr;
    }

    .properties-grid[b-zsgzu6vw5z] {
        grid-template-columns: 1fr;
    }

    .diff-title[b-zsgzu6vw5z] { font-size: 1.5rem; }

    /* En mobile la comparativa pasa a stack vertical: arriba "antes",
       en el medio la flecha gira 90°, abajo la card unificada. */
    .diff-compare[b-zsgzu6vw5z] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 14px;
    }
    .diff-compare-arrow[b-zsgzu6vw5z] {
        flex-direction: row;
        gap: 10px;
    }
    .diff-compare-arrow svg[b-zsgzu6vw5z] {
        transform: rotate(90deg);
        animation: diffArrowSlideMobile-b-zsgzu6vw5z 2.2s ease-in-out infinite;
    }
    @keyframes diffArrowSlideMobile-b-zsgzu6vw5z {
        0%, 100% { transform: rotate(90deg) translateX(0); }
        50%      { transform: rotate(90deg) translateX(6px); }
    }

    .sofi-visual[b-zsgzu6vw5z],
    .sofi-visual img[b-zsgzu6vw5z] {
        min-height: 320px;
        height: 320px;
    }
    .sofi-card-rotator[b-zsgzu6vw5z] {
        min-height: 230px;
    }
    .stats-bar[b-zsgzu6vw5z] { gap: 16px; }
    .stat-divider[b-zsgzu6vw5z] { height: 30px; }
    .stat-number[b-zsgzu6vw5z] { font-size: 1.1rem; }

    .section-header[b-zsgzu6vw5z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-inner[b-zsgzu6vw5z] {
        flex-direction: column;
        text-align: center;
    }

    .footer-links[b-zsgzu6vw5z] {
        justify-content: center;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* =========================================================
   LOGIN PAGE — LISTO CASAS TEAL THEME
   ========================================================= */

/* ── BRAND PANEL (left) ── */
.auth-brand[b-t52pga0kcg] {
    position: relative;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Slideshow layers */
.auth-slides[b-t52pga0kcg] {
    position: absolute;
    inset: 0;
}

.auth-slide[b-t52pga0kcg] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: authFade-b-t52pga0kcg 20s infinite;
}

@keyframes authFade-b-t52pga0kcg {
    0%   { opacity: 0; transform: scale(1); }
    5%   { opacity: 1; }
    25%  { opacity: 1; transform: scale(1.06); }
    30%  { opacity: 0; transform: scale(1.06); }
    100% { opacity: 0; }
}

.as1[b-t52pga0kcg] { background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1400&q=80&auto=format&fit=crop'); animation-delay: 0s; }
.as2[b-t52pga0kcg] { background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1400&q=80&auto=format&fit=crop'); animation-delay: 5s; }
.as3[b-t52pga0kcg] { background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1400&q=80&auto=format&fit=crop'); animation-delay: 10s; }
.as4[b-t52pga0kcg] { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1400&q=80&auto=format&fit=crop'); animation-delay: 15s; }

/* Dark overlay */
.auth-overlay[b-t52pga0kcg] {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15,23,42,0.7) 0%, rgba(13,148,136,0.35) 50%, rgba(15,23,42,0.65) 100%);
    z-index: 1;
}

.auth-brand-inner[b-t52pga0kcg] {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 360px;
}

.auth-brand-logo[b-t52pga0kcg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    font-size: 22px;
    color: #fff;
}

.auth-brand-logo svg[b-t52pga0kcg] { color: #5eead4; }
.auth-brand-logo strong[b-t52pga0kcg] { font-weight: 800; }

.auth-brand-title[b-t52pga0kcg] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px 0;
    letter-spacing: -1px;
}

.auth-brand-sub[b-t52pga0kcg] {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin: 0 0 36px 0;
}

.auth-features[b-t52pga0kcg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-features li[b-t52pga0kcg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

.auth-feat-check[b-t52pga0kcg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(94,234,212,0.2);
    color: #5eead4;
    flex-shrink: 0;
}

/* ── FORM PANEL (right) ── */
.auth-form-panel[b-t52pga0kcg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #fff;
    overflow-y: auto;
    font-family: "Inter", system-ui, sans-serif;
}

.auth-form-inner[b-t52pga0kcg] {
    width: 100%;
    max-width: 400px;
}

.auth-form-header[b-t52pga0kcg] {
    margin-bottom: 24px;
}

.auth-form-title[b-t52pga0kcg] {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.auth-form-desc[b-t52pga0kcg] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.auth-link-btn[b-t52pga0kcg] {
    background: none;
    border: none;
    padding: 0;
    color: #0d9488;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}

.auth-link-btn:hover[b-t52pga0kcg] {
    color: #0f766e;
    text-decoration: underline;
}

/* ── Tabs ── */
.auth-tabs[b-t52pga0kcg] {
    display: flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 24px;
    gap: 3px;
}

.auth-tab[b-t52pga0kcg] {
    flex: 1;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab--active[b-t52pga0kcg] {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Google button ── */
.btn-google-login[b-t52pga0kcg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-google-login:hover[b-t52pga0kcg] {
    background: #f8fafc;
    border-color: var(--color-text-subtle);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Divider ── */
.auth-divider[b-t52pga0kcg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--color-text-subtle);
    font-size: 12px;
    font-weight: 500;
}

.auth-divider[b-t52pga0kcg]::before,
.auth-divider[b-t52pga0kcg]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Alert ── */
.auth-alert[b-t52pga0kcg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 18px;
    line-height: 1.4;
}

.auth-alert svg[b-t52pga0kcg] { flex-shrink: 0; }

.auth-alert--err[b-t52pga0kcg] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.auth-alert--ok[b-t52pga0kcg] {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4;
}

/* ── Form ── */
.auth-form[b-t52pga0kcg] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-row-2[b-t52pga0kcg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-field[b-t52pga0kcg] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.auth-label[b-t52pga0kcg] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.auth-input-wrap[b-t52pga0kcg] {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input[b-t52pga0kcg] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input[b-t52pga0kcg]::placeholder { color: var(--color-text-subtle); }

.auth-input:focus[b-t52pga0kcg] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
}

.auth-eye[b-t52pga0kcg] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-subtle);
    display: flex;
    transition: color 0.15s;
}

.auth-eye:hover[b-t52pga0kcg] { color: #0d9488; }

/* ── Forgot password ── */
.auth-forgot-wrap[b-t52pga0kcg] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.auth-forgot-link[b-t52pga0kcg] {
    font-size: 13px;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
}

.auth-forgot-link:hover[b-t52pga0kcg] {
    color: #0f766e;
    text-decoration: underline;
}

/* ── Submit ── */
.auth-submit[b-t52pga0kcg] {
    width: 100%;
    padding: 12px 20px;
    margin-top: 4px;
    background: #0d9488;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(13,148,136,0.3);
}

.auth-submit:hover[b-t52pga0kcg] {
    background: #0f766e;
    box-shadow: 0 4px 14px rgba(13,148,136,0.35);
    transform: translateY(-1px);
}

.auth-submit:active[b-t52pga0kcg] {
    transform: translateY(0);
}

/* ── Legal ── */
.auth-legal[b-t52pga0kcg] {
    margin-top: 18px;
    font-size: 12px;
    color: var(--color-text-subtle);
    text-align: center;
    line-height: 1.6;
}

.auth-legal a[b-t52pga0kcg] {
    color: #0d9488;
    text-decoration: none;
    font-weight: 500;
}

.auth-legal a:hover[b-t52pga0kcg] { text-decoration: underline; }

/* ── Inmobiliaria banner ── */
.auth-inmobiliaria-banner[b-t52pga0kcg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    font-size: 13px;
    color: #0f766e;
    font-weight: 500;
}

.auth-inmobiliaria-banner svg[b-t52pga0kcg] { stroke: #0d9488; flex-shrink: 0; }

.auth-inmobiliaria-banner a[b-t52pga0kcg] {
    color: #0d9488;
    font-weight: 700;
    text-decoration: none;
}

.auth-inmobiliaria-banner a:hover[b-t52pga0kcg] { text-decoration: underline; }

/* ── Back button ── */
.back-btn[b-t52pga0kcg] {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-t52pga0kcg] {
    background: rgba(255,255,255,1);
    color: #0f172a;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .auth-brand[b-t52pga0kcg] { display: none; }

    .back-btn[b-t52pga0kcg] {
        background: #fff;
        border-color: #e2e8f0;
        color: #475569;
    }

    .auth-form-panel[b-t52pga0kcg] { padding: 80px 20px 40px; }
}

@media (max-width: 480px) {
    .auth-row-2[b-t52pga0kcg] {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.nf-page[b-8n6holk2bj] {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 40px 20px;
    font-family: "Inter", system-ui, sans-serif;
}

.nf-card[b-8n6holk2bj] {
    text-align: center;
    max-width: 440px;
}

.nf-icon[b-8n6holk2bj] {
    margin-bottom: 24px;
}

.nf-card h1[b-8n6holk2bj] {
    font-size: 5rem;
    font-weight: 800;
    color: #0d9488;
    margin: 0;
    line-height: 1;
    letter-spacing: -2px;
}

.nf-card h2[b-8n6holk2bj] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 8px 0 12px;
}

.nf-card p[b-8n6holk2bj] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 32px;
    line-height: 1.6;
}

.nf-actions[b-8n6holk2bj] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.nf-btn-primary[b-8n6holk2bj] {
    padding: 12px 28px;
    background: #0d9488;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.nf-btn-primary:hover[b-8n6holk2bj] {
    background: #0f766e;
    color: #fff;
}

.nf-btn-secondary[b-8n6holk2bj] {
    padding: 12px 28px;
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.nf-btn-secondary:hover[b-8n6holk2bj] {
    border-color: #0d9488;
    color: #0d9488;
}

/* RequestId para soporte — se muestra solo en Error.razor, abajo de los
   botones. Texto chico, gris, con el código en monospace para que sea
   copy-pasteable a un mail / ticket. */
.nf-request-id[b-8n6holk2bj] {
    margin-top: 28px !important;
    font-size: 0.78rem !important;
    color: var(--color-text-subtle) !important;
    line-height: 1.5 !important;
}

.nf-request-id code[b-8n6holk2bj] {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    user-select: all;  /* click único selecciona todo para copiar rápido */
}
/* /Components/Pages/Nuevo/ComprarInmuebles.razor.rz.scp.css */
/* ============================================================
   COMPRAR INMUEBLES — Premium Real Estate Landing
   Accent: teal #0d9488 / #0f766e
   ============================================================ */

/* ── HERO ── */
.im-hero[b-g875dezuv0] {
    position: relative;
    min-height: 100vh;
    max-height: 780px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sora", sans-serif;
}

.im-hero-slides[b-g875dezuv0] {
    position: absolute;
    top: -260px; left: 0; right: 0; bottom: -60px;
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
    .im-hero-slides[b-g875dezuv0] { transform: none !important; }
}

.im-slide[b-g875dezuv0] {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: imSlide-b-g875dezuv0 24s infinite ease-in-out;
}

@keyframes imSlide-b-g875dezuv0 {
    0%   { opacity: 0; transform: scale(1); }
    5%   { opacity: 1; }
    25%  { opacity: 1; transform: scale(1.04); }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

.im-s1[b-g875dezuv0] { background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1600&q=85&auto=format&fit=crop'); animation-delay: 0s; }
.im-s2[b-g875dezuv0] { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1600&q=85&auto=format&fit=crop'); animation-delay: 6s; }
.im-s3[b-g875dezuv0] { background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1600&q=85&auto=format&fit=crop'); animation-delay: 12s; }
.im-s4[b-g875dezuv0] { background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=1600&q=85&auto=format&fit=crop'); animation-delay: 18s; }

.im-hero-overlay[b-g875dezuv0] {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
        160deg,
        rgba(2, 40, 60, 0.75) 0%,
        rgba(13, 148, 136, 0.45) 60%,
        rgba(2, 40, 60, 0.82) 100%
    );
}

.im-hero-content[b-g875dezuv0] {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    max-width: 900px; width: 100%;
    padding: 0 24px;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
}

.im-hero-eyebrow[b-g875dezuv0] {
    display: inline-block;
    font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 6px 16px; border-radius: 999px;
    margin-bottom: 20px;
}

.im-hero-title[b-g875dezuv0] {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0 0 16px;
    text-shadow: 0 4px 32px rgba(0,0,0,0.3);
}

.im-hero-title em[b-g875dezuv0] {
    font-style: normal;
    background: linear-gradient(135deg, #5eead4, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.im-hero-sub[b-g875dezuv0] {
    font-size: 1.1rem; opacity: 0.82;
    margin: 0 0 36px;
    max-width: 560px;
    line-height: 1.6;
}

/* ── SEARCH CARD ── */
.im-search-card[b-g875dezuv0] {
    width: 100%;
    max-width: 860px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(18px);
    border-radius: 26px;
    padding: 0;
    box-shadow: 0 28px 70px rgba(2, 40, 60, 0.28), 0 0 0 1px rgba(255,255,255,0.12);
    overflow: hidden;
    margin: 12px 0 28px;
}

.im-search-tabs[b-g875dezuv0] {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
    padding: 0 18px;
    background: rgba(248,250,252,0.92);
}

.im-stab[b-g875dezuv0] {
    flex: 1; padding: 18px 0 16px;
    font-size: 0.95rem; font-weight: 800;
    color: var(--color-text-subtle); background: none; border: none;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
    border-bottom: 2px solid transparent;
    position: relative; top: 1px;
}

.im-stab--active[b-g875dezuv0] {
    color: #0d9488;
    border-bottom-color: #0d9488;
}

.im-stab:hover:not(.im-stab--active)[b-g875dezuv0] { color: #475569; }

.im-search-fields[b-g875dezuv0] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr 0.9fr;
    align-items: stretch;
    gap: 14px;
    padding: 0;
}

.im-search-fields--row2[b-g875dezuv0] {
    grid-template-columns: 1.1fr 1fr auto;
    margin-top: 12px;
}

.im-search-body[b-g875dezuv0] {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.im-smart-search-panel[b-g875dezuv0] {
    width: 100%;
    max-width: 1120px;
    margin-top: -26px;
    padding: 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(15, 118, 110, 0.7));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 30px 80px rgba(2, 40, 60, 0.34);
    backdrop-filter: blur(22px);
}

.im-smart-search-copy[b-g875dezuv0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    margin-bottom: 16px;
}

.im-smart-search-tag[b-g875dezuv0] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,0.14);
}

.im-smart-search-copy h3[b-g875dezuv0] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.im-smart-search-copy p[b-g875dezuv0] {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.98rem;
}

.im-search-main[b-g875dezuv0] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: stretch;
}

.im-search-big[b-g875dezuv0] {
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.96);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.im-search-big input[b-g875dezuv0] {
    border: none;
    outline: none;
    background: transparent;
    font-family: "Sora", sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: #0f172a;
}

.im-search-big input[b-g875dezuv0]::placeholder {
    color: var(--color-text-subtle);
    font-weight: 500;
}

.im-search-hints[b-g875dezuv0] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.im-search-hint[b-g875dezuv0] {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.82);
    font-size: 0.78rem;
    font-weight: 700;
}

.im-sfield[b-g875dezuv0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    position: relative;
}

.im-sfield label[b-g875dezuv0] {
    font-size: 0.68rem; font-weight: 800;
    color: var(--color-text-subtle);
    text-transform: uppercase; letter-spacing: 0.9px;
}

.im-sfield input[b-g875dezuv0],
.im-sfield select[b-g875dezuv0] {
    border: none; outline: none;
    font-size: 0.98rem; font-weight: 700;
    color: #0f172a; background: transparent;
    padding: 0;
    font-family: "Sora", sans-serif;
    cursor: pointer;
    min-height: 28px;
}

.im-sfield input[b-g875dezuv0]::placeholder { color: var(--color-text-subtle); font-weight: 500; }
.im-sfield select option[b-g875dezuv0] { font-weight: 500; }

.im-search-btn[b-g875dezuv0] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff; border: none; cursor: pointer;
    font-size: 1rem; font-weight: 800;
    font-family: "Sora", sans-serif;
    transition: all 0.2s;
    white-space: nowrap;
    padding: 0 32px;
    min-height: 86px;
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(13,148,136,0.28);
}

.im-search-btn--filters[b-g875dezuv0] {
    min-height: 100%;
    align-self: stretch;
    padding: 0 28px;
    border-radius: 18px;
}

.im-search-btn:hover[b-g875dezuv0] {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
    box-shadow: 0 22px 44px rgba(13,148,136,0.34);
    transform: translateY(-2px);
}

.im-hero-stats[b-g875dezuv0] {
    display: flex; align-items: center; gap: 12px;
    font-size: 0.88rem; color: rgba(255,255,255,0.75);
}

.im-hero-stats strong[b-g875dezuv0] { color: #fff; font-weight: 800; }
.im-hsep[b-g875dezuv0] { opacity: 0.4; }

/* ── SHARED LAYOUT ── */
.im-section[b-g875dezuv0] {
    padding: 72px 0;
    font-family: "Sora", sans-serif;
}

.im-section--gray[b-g875dezuv0] { background: #f8fafc; }

.im-section--dark[b-g875dezuv0] {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
    color: #fff;
}

.im-container[b-g875dezuv0] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.im-section-hdr[b-g875dezuv0] {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px; gap: 16px;
}

.im-section-title[b-g875dezuv0] {
    font-size: 1.9rem; font-weight: 800;
    color: #0f172a; margin: 0 0 6px;
    letter-spacing: -0.5px;
}

.im-section--dark .im-section-title[b-g875dezuv0] { color: #fff; }

.im-section-sub[b-g875dezuv0] {
    font-size: 1rem; color: #64748b; margin: 0;
}

.im-section--dark .im-section-sub[b-g875dezuv0] { color: rgba(255,255,255,0.6); }

.im-see-all[b-g875dezuv0] {
    font-size: 0.88rem; font-weight: 700;
    color: #0d9488; text-decoration: none;
    white-space: nowrap; transition: color 0.2s;
}

.im-see-all:hover[b-g875dezuv0] { color: #0f766e; }

/* ── AGENCIES ── */
.im-section--agencies[b-g875dezuv0] { background: #fff; }

.im-agencies-grid[b-g875dezuv0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.im-agency-card[b-g875dezuv0] {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    background: #fff; border: 1px solid #e8edf3;
    border-radius: 18px;
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    flex-wrap: wrap;
}

.im-agency-card:hover[b-g875dezuv0] {
    border-color: #99f6e4;
    box-shadow: 0 12px 32px rgba(13,148,136,0.12);
    transform: translateY(-3px);
}

.im-agency-logo-wrap[b-g875dezuv0] {
    flex-shrink: 0;
    width: 60px; height: 60px;
    border-radius: 14px;
    overflow: hidden;
    background: #f0fdfa;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e8edf3;
}

.im-agency-logo[b-g875dezuv0] { width: 100%; height: 100%; object-fit: cover; }
.im-agency-logo-placeholder[b-g875dezuv0] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.im-agency-body[b-g875dezuv0] { flex: 1; min-width: 0; }

.im-agency-name[b-g875dezuv0] {
    font-size: 0.92rem; font-weight: 700; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}

.im-agency-meta[b-g875dezuv0] {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}

.im-agency-badge[b-g875dezuv0] {
    font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: #0d9488; background: #f0fdfa;
    border: 1px solid #99f6e4;
    padding: 2px 8px; border-radius: 999px;
}

.im-agency-count[b-g875dezuv0] { font-size: 0.75rem; color: var(--color-text-subtle); }

.im-agency-location[b-g875dezuv0] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.73rem; color: var(--color-text-subtle);
}

.im-agency-btn[b-g875dezuv0] {
    display: inline-flex; align-items: center;
    font-size: 0.75rem; font-weight: 700;
    color: #0d9488; text-decoration: none;
    background: #f0fdfa; border: 1px solid #99f6e4;
    padding: 7px 14px; border-radius: 8px;
    transition: all 0.15s; white-space: nowrap;
    flex-shrink: 0;
}

.im-agency-btn:hover[b-g875dezuv0] { background: #ccfbf1; border-color: #5eead4; }

/* ── TIPO CARDS ── */
.im-tipo-grid[b-g875dezuv0] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.im-tipo-card[b-g875dezuv0] {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 24px 16px;
    background: #fff; border: 1px solid #e8edf3;
    border-radius: 18px; text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    text-align: center;
}

.im-tipo-card:hover[b-g875dezuv0] {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(13,148,136,0.15);
    border-color: #99f6e4;
}

.im-tipo-icon[b-g875dezuv0] {
    font-size: 2rem;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: #f0fdfa; border-radius: 16px;
}

.im-tipo-info[b-g875dezuv0] {
    display: flex; flex-direction: column; gap: 2px;
}

.im-tipo-name[b-g875dezuv0] {
    font-size: 0.88rem; font-weight: 700; color: #0f172a;
}

.im-tipo-count[b-g875dezuv0] {
    font-size: 0.72rem; color: var(--color-text-subtle);
}

.im-tipo-arrow[b-g875dezuv0] {
    color: var(--color-text-subtle); transition: color 0.2s, transform 0.2s;
}

.im-tipo-card:hover .im-tipo-arrow[b-g875dezuv0] {
    color: #0d9488; transform: translateX(3px);
}

/* ── PROPERTY CARDS ── */
.im-props-grid[b-g875dezuv0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.im-prop-card[b-g875dezuv0] {
    display: block; text-decoration: none;
    background: #fff; border-radius: 22px;
    overflow: hidden; border: 1px solid #e8edf3;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(15,23,42,0.05);
}

.im-prop-card:hover[b-g875dezuv0] {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(15,23,42,0.12);
}

.im-prop-img-wrap[b-g875dezuv0] {
    position: relative;
    aspect-ratio: 4/3;
    background: #f1f5f9;
    overflow: hidden;
}

.im-prop-img[b-g875dezuv0] {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.im-prop-card:hover .im-prop-img[b-g875dezuv0] { transform: scale(1.06); }

.im-prop-no-img[b-g875dezuv0] {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.im-prop-badges[b-g875dezuv0] {
    position: absolute; top: 12px; left: 12px;
    display: flex; gap: 6px;
}

.im-badge[b-g875dezuv0] {
    font-size: 0.65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 4px 10px; border-radius: 999px;
}

.im-badge--avisos[b-g875dezuv0] { background: linear-gradient(135deg,#0d9488,#0f766e); color: #fff; }
.im-badge--gold[b-g875dezuv0] { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.im-badge--new[b-g875dezuv0]  { background: #0d9488; color: #fff; }

.im-prop-overlay[b-g875dezuv0] {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(15,23,42,0.7), transparent);
    display: flex; align-items: flex-end;
}

.im-prop-tipo[b-g875dezuv0] {
    font-size: 0.7rem; font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase; letter-spacing: 0.5px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    padding: 3px 9px; border-radius: 5px;
}

.im-prop-body[b-g875dezuv0] {
    padding: 18px 20px 20px;
    display: flex; flex-direction: column; gap: 6px;
}

.im-prop-price[b-g875dezuv0] {
    font-size: 1.3rem; font-weight: 900;
    color: #0d9488; letter-spacing: -0.5px;
}

.im-prop-title[b-g875dezuv0] {
    font-size: 0.97rem; font-weight: 700; color: #0f172a;
    margin: 0; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.im-prop-loc[b-g875dezuv0] {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.78rem; color: var(--color-text-subtle);
}

.im-prop-features[b-g875dezuv0] {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 4px;
}

.im-feat[b-g875dezuv0] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-weight: 600; color: #475569;
    background: #f8fafc; padding: 3px 9px; border-radius: 6px;
    border: 1px solid #e8edf3;
}

/* ── SKELETON ── */
.im-prop-skeleton[b-g875dezuv0] { pointer-events: none; }

.im-skel-img[b-g875dezuv0] {
    width: 100%; aspect-ratio: 4/3;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: imSkel-b-g875dezuv0 1.4s infinite ease-in-out;
}

.im-skel-line[b-g875dezuv0] {
    height: 14px; border-radius: 7px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: imSkel-b-g875dezuv0 1.4s infinite ease-in-out;
    margin: 6px 0;
}

.im-skel-line--short[b-g875dezuv0] { width: 40%; }
.im-skel-line--mid[b-g875dezuv0]   { width: 65%; }

@keyframes imSkel-b-g875dezuv0 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── ZONAS ── */
.im-zonas-grid[b-g875dezuv0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 220px 220px;
    gap: 16px;
}

.im-zonas-grid .im-zona-card:first-child[b-g875dezuv0] {
    grid-row: span 2;
    grid-template-rows: 1fr auto;
}

.im-zona-card[b-g875dezuv0] {
    position: relative;
    display: flex; align-items: flex-end;
    border-radius: 20px; overflow: hidden;
    text-decoration: none;
    background-size: cover; background-position: center;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 0;
    box-shadow: 0 4px 16px rgba(15,23,42,0.06);
}

.im-zona-card:hover[b-g875dezuv0] {
    transform: translateY(-4px);
    background-size: 110% auto;
    box-shadow: 0 22px 48px rgba(13,148,136,0.22);
}

.im-zona-card:hover .im-zona-overlay[b-g875dezuv0] {
    opacity: 1;
    background: linear-gradient(
        to top,
        rgba(13,148,136,0.92) 0%,
        rgba(15,23,42,0.78) 55%,
        rgba(15,23,42,0.35) 100%
    );
}

.im-zona-overlay[b-g875dezuv0] {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.72) 0%, transparent 55%);
    transition: opacity 0.32s, background 0.32s;
}

.im-zona-info[b-g875dezuv0] {
    position: relative; z-index: 1;
    padding: 20px;
    display: flex; flex-direction: column;
    gap: 4px;
    width: 100%;
}

.im-zona-city[b-g875dezuv0] {
    font-size: 0.7rem; font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 1.4px;
    transition: color 0.25s;
}

.im-zona-card:hover .im-zona-city[b-g875dezuv0] { color: rgba(255,255,255,0.9); }

.im-zona-name[b-g875dezuv0] {
    font-size: 1.25rem; font-weight: 800; color: #fff;
    letter-spacing: -0.3px;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.im-zona-card:hover .im-zona-name[b-g875dezuv0] { transform: translateY(-2px); }

.im-zona-desc[b-g875dezuv0] {
    margin: 6px 0 0;
    font-size: 0.86rem; line-height: 1.45;
    color: rgba(255,255,255,0.92);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease 0.04s,
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.04s,
                margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.im-zona-card:hover .im-zona-desc[b-g875dezuv0] {
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
}

.im-zona-cta[b-g875dezuv0] {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-size: 0.78rem; font-weight: 700;
    color: #5eead4;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease 0.08s,
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}

.im-zona-cta svg[b-g875dezuv0] { transition: transform 0.25s ease; }

.im-zona-card:hover .im-zona-cta[b-g875dezuv0] {
    opacity: 1;
    transform: translateY(0);
}

.im-zona-card:hover .im-zona-cta svg[b-g875dezuv0] { transform: translateX(4px); }

/* Soporte focus accesible (teclado) */
.im-zona-card:focus-visible[b-g875dezuv0] {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(13,148,136,0.22);
    outline: 2px solid #5eead4;
    outline-offset: 4px;
}

.im-zona-card:focus-visible .im-zona-overlay[b-g875dezuv0] {
    opacity: 1;
    background: linear-gradient(
        to top,
        rgba(13,148,136,0.92) 0%,
        rgba(15,23,42,0.78) 55%,
        rgba(15,23,42,0.35) 100%
    );
}

.im-zona-card:focus-visible .im-zona-desc[b-g875dezuv0] {
    max-height: 120px; opacity: 1; transform: translateY(0);
}

.im-zona-card:focus-visible .im-zona-cta[b-g875dezuv0] {
    opacity: 1; transform: translateY(0);
}

/* ── WHY ── */
.im-why-grid[b-g875dezuv0] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
}

.im-why-eyebrow[b-g875dezuv0] {
    display: inline-block;
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2px;
    color: #5eead4; margin-bottom: 16px;
}

.im-why-title[b-g875dezuv0] {
    font-size: 2.2rem; font-weight: 900;
    color: #fff; margin: 0 0 16px;
    letter-spacing: -1px; line-height: 1.15;
}

.im-why-desc[b-g875dezuv0] {
    font-size: 1rem; color: rgba(255,255,255,0.65);
    line-height: 1.7; margin: 0 0 32px;
}

.im-why-btns[b-g875dezuv0] { display: flex; gap: 14px; flex-wrap: wrap; }

.im-why-cards[b-g875dezuv0] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.im-why-card[b-g875dezuv0] {
    display: flex; gap: 14px; align-items: flex-start;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; padding: 20px;
    backdrop-filter: blur(6px);
}

.im-why-icon[b-g875dezuv0] { font-size: 1.5rem; flex-shrink: 0; }

.im-why-card-title[b-g875dezuv0] {
    font-size: 0.9rem; font-weight: 700; color: #fff;
    margin-bottom: 4px;
}

.im-why-card-desc[b-g875dezuv0] {
    font-size: 0.8rem; color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* ── BUTTONS ── */
.im-btn-primary[b-g875dezuv0] {
    display: inline-flex; align-items: center;
    padding: 13px 28px; border-radius: 12px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff; font-weight: 700; font-size: 0.9rem;
    text-decoration: none; transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(13,148,136,0.3);
    font-family: "Sora", sans-serif;
}

.im-btn-primary:hover[b-g875dezuv0] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(13,148,136,0.4);
}

.im-btn-outline-white[b-g875dezuv0] {
    display: inline-flex; align-items: center;
    padding: 12px 24px; border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.25);
    color: #fff; font-weight: 700; font-size: 0.9rem;
    text-decoration: none; transition: all 0.2s;
    backdrop-filter: blur(6px);
    font-family: "Sora", sans-serif;
}

.im-btn-outline-white:hover[b-g875dezuv0] { background: rgba(255,255,255,0.18); }

/* ── CTA ── */
.im-cta[b-g875dezuv0] {
    padding: 72px 0;
    background: #f0fdfa;
    font-family: "Sora", sans-serif;
}

.im-cta-inner[b-g875dezuv0] {
    text-align: center;
    max-width: 600px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.im-cta-inner h2[b-g875dezuv0] {
    font-size: 2rem; font-weight: 900; color: #0f172a;
    margin: 0; letter-spacing: -0.5px;
}

.im-cta-inner p[b-g875dezuv0] {
    font-size: 1rem; color: #64748b; margin: 0 0 8px;
}

.im-btn-cta[b-g875dezuv0] {
    display: inline-flex; align-items: center;
    padding: 16px 40px; border-radius: 14px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff; font-size: 1rem; font-weight: 800;
    text-decoration: none; transition: all 0.2s;
    box-shadow: 0 8px 28px rgba(13,148,136,0.35);
    font-family: "Sora", sans-serif;
    letter-spacing: -0.2px;
}

.im-btn-cta:hover[b-g875dezuv0] {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(13,148,136,0.45);
}

.im-empty-props[b-g875dezuv0] {
    text-align: center; padding: 60px 20px;
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
    color: #64748b;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .im-tipo-grid[b-g875dezuv0] { grid-template-columns: repeat(3, 1fr); }
    .im-props-grid[b-g875dezuv0] { grid-template-columns: repeat(2, 1fr); }
    .im-agencies-grid[b-g875dezuv0] { grid-template-columns: repeat(2, 1fr); }
    .im-search-main[b-g875dezuv0] { grid-template-columns: 1fr; }
    .im-search-fields[b-g875dezuv0] { grid-template-columns: 1fr 1fr; }
    .im-search-fields--row2[b-g875dezuv0] { grid-template-columns: 1fr 1fr; }
    .im-search-fields--row2 .im-search-btn[b-g875dezuv0] { grid-column: span 2; }
    .im-search-btn[b-g875dezuv0] { padding: 18px; min-height: 62px; }
    .im-smart-search-panel[b-g875dezuv0] { max-width: 860px; }
}

@media (max-width: 900px) {
    .im-hero[b-g875dezuv0] { min-height: 80vh; }
    .im-hero-title[b-g875dezuv0] { font-size: clamp(2.2rem, 8vw, 3.5rem); }
    .im-section[b-g875dezuv0] { padding: 48px 0; }
    .im-container[b-g875dezuv0] { padding: 0 20px; }
    .im-zonas-grid[b-g875dezuv0] { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .im-zonas-grid .im-zona-card:first-child[b-g875dezuv0] { grid-row: auto; }
    .im-why-grid[b-g875dezuv0] { grid-template-columns: 1fr; gap: 40px; }
    .im-section-hdr[b-g875dezuv0] { flex-direction: column; align-items: flex-start; }
    .im-search-body[b-g875dezuv0] { padding: 18px; }
    .im-smart-search-panel[b-g875dezuv0] {
        margin-top: -18px;
        padding: 18px;
        border-radius: 22px;
    }
    .im-smart-search-copy h3[b-g875dezuv0] { font-size: 1.2rem; }
    .im-search-btn--filters[b-g875dezuv0] { width: 100%; }
}

@media (max-width: 640px) {
    .im-tipo-grid[b-g875dezuv0] { grid-template-columns: repeat(2, 1fr); }
    .im-props-grid[b-g875dezuv0] { grid-template-columns: 1fr; }
    .im-zonas-grid[b-g875dezuv0] { grid-template-columns: 1fr; }
    .im-why-cards[b-g875dezuv0] { grid-template-columns: 1fr; }
    .im-agencies-grid[b-g875dezuv0] { grid-template-columns: 1fr; }
    .im-search-fields[b-g875dezuv0],
    .im-search-fields--row2[b-g875dezuv0] { grid-template-columns: 1fr; }
    .im-search-fields--row2 .im-search-btn[b-g875dezuv0] { grid-column: 1; }
    .im-search-big input[b-g875dezuv0] { font-size: 1rem; }
    .im-search-btn[b-g875dezuv0] { padding: 18px; min-height: 58px; }
    .im-sfield[b-g875dezuv0] { border-right: none; border-bottom: none; }
}

/* ── Paginación de destacados ── */
.im-dest-pagination[b-g875dezuv0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.im-dest-pg-btn[b-g875dezuv0] {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: "Sora", sans-serif;
}

.im-dest-pg-btn:hover:not(:disabled):not(.im-dest-pg-btn--active)[b-g875dezuv0] {
    border-color: #0d9488;
    color: #0d9488;
    background: #f0fdfa;
}

.im-dest-pg-btn:disabled[b-g875dezuv0] {
    opacity: 0.45;
    cursor: not-allowed;
}

.im-dest-pg-btn--active[b-g875dezuv0] {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.35);
}
/* /Components/Pages/Nuevo/DetalleInmueble.razor.rz.scp.css */
/* ============================================================
   DETALLE INMUEBLE — veocasas-inspired premium property detail
   Accent: teal var(--color-brand) / var(--color-brand-dark)
   ============================================================ */

.di-page[b-50w9t68civ] {
    min-height: 100vh;
    background: var(--color-bg);
    font-family: "Sora", sans-serif;
}

/* ── LOADING / NOT FOUND ── */
.di-loading[b-50w9t68civ] {
    min-height: 60vh; display: flex;
    flex-direction: column; align-items: center;
    justify-content: center; gap: 16px;
    color: var(--color-text-disabled); font-size: 0.9rem;
}

.di-spinner[b-50w9t68civ] {
    width: 40px; height: 40px;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: diSpin-b-50w9t68civ 0.8s linear infinite;
}

@keyframes diSpin-b-50w9t68civ { to { transform: rotate(360deg); } }

.di-not-found[b-50w9t68civ] {
    min-height: 60vh; display: flex;
    flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; text-align: center;
}

.di-not-found h2[b-50w9t68civ] { font-size: 1.4rem; color: var(--color-text); }

.di-not-found a[b-50w9t68civ] {
    color: var(--color-brand); font-weight: 700; text-decoration: none;
    font-size: 0.9rem;
}

/* ── BREADCRUMB ── */
.di-breadcrumb-bar[b-50w9t68civ] {
    background: #fff; border-bottom: 1px solid #f1f5f9;
    padding: 0 40px;
}

.di-breadcrumb[b-50w9t68civ] {
    max-width: 1300px; margin: 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 14px 0;
    font-size: 0.78rem; color: var(--color-text-disabled);
}

.di-breadcrumb a[b-50w9t68civ] { color: var(--color-text-subtle); text-decoration: none; transition: color 0.15s; }
.di-breadcrumb a:hover[b-50w9t68civ] { color: var(--color-brand); }
.di-breadcrumb span:not(:last-child)[b-50w9t68civ] { color: var(--color-divider); }

/* ── HEADER ── */
.di-header[b-50w9t68civ] {
    max-width: 1300px; margin: 0 auto;
    padding: 28px 40px 20px;
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 24px;
    background: #fff; border-bottom: 1px solid #f1f5f9;
}

.di-header-left[b-50w9t68civ] { flex: 1; min-width: 0; }

.di-header-badges[b-50w9t68civ] {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}

.di-badge[b-50w9t68civ] {
    font-size: 0.65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 4px 10px; border-radius: 999px;
}

.di-badge--gold[b-50w9t68civ]     { background: linear-gradient(135deg,var(--color-warning),#d97706); color: #fff; }
.di-badge--new[b-50w9t68civ]      { background: var(--color-brand); color: #fff; }

/* Fase 2.1 — badge "Catastro verificado" en el header del detalle.
   Estilo "sello": fondo claro + borde teal sólido, distinto a los badges
   tipo/operacion que son fills planos. Hover para feedback de clickeable. */
.di-badge--verified[b-50w9t68civ] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-brand-bg);
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brand);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.di-badge--verified:hover[b-50w9t68civ] {
    background: #ccfbf1;
    transform: translateY(-1px);
    color: var(--color-brand-dark);
}
.di-badge--verified svg[b-50w9t68civ] { color: var(--color-brand); }
.di-badge--tipo[b-50w9t68civ]     { background: #f1f5f9; color: var(--color-text-subtle); }
.di-badge--venta[b-50w9t68civ]    { background: var(--color-success); color: #fff; }
.di-badge--alquiler[b-50w9t68civ] { background: #3b82f6; color: #fff; }

/* Botón para editar la propia publicación (aparece solo si sos el dueño) */
.di-edit-btn[b-50w9t68civ] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(13,148,136,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    margin-left: 6px;
}

.di-edit-btn:hover[b-50w9t68civ] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13,148,136,0.45);
    color: #fff;
}

.di-title[b-50w9t68civ] {
    font-size: 1.8rem; font-weight: 900; color: var(--color-text);
    margin: 0 0 10px; letter-spacing: -0.5px;
    line-height: 1.2;
}

.di-location[b-50w9t68civ] {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; color: var(--color-text-subtle); margin-bottom: 12px;
}

.di-quick-stats[b-50w9t68civ] {
    display: flex; flex-wrap: wrap; gap: 10px;
}

.di-qstat[b-50w9t68civ] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted);
    background: var(--color-bg); border: 1px solid var(--color-border);
    padding: 5px 12px; border-radius: 8px;
}

.di-header-price[b-50w9t68civ] {
    text-align: right; flex-shrink: 0;
}

.di-price-label[b-50w9t68civ] {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--color-text-disabled); margin-bottom: 4px;
}

.di-price[b-50w9t68civ] {
    font-size: 2rem; font-weight: 900; color: var(--color-brand);
    letter-spacing: -1px; white-space: nowrap;
}

/* ── GALLERY ── */
.di-gallery-wrap[b-50w9t68civ] {
    max-width: 1300px; margin: 0 auto;
    padding: 24px 40px;
}

.di-gallery[b-50w9t68civ] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    border-radius: 22px;
    overflow: hidden;
    max-height: 520px;
}

.di-gallery-main[b-50w9t68civ] {
    position: relative; cursor: pointer;
    background: #f1f5f9; overflow: hidden;
}

.di-gallery-main-img[b-50w9t68civ] {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}

.di-gallery-main:hover .di-gallery-main-img[b-50w9t68civ] { transform: scale(1.03); }

.di-gallery-expand[b-50w9t68civ] {
    position: absolute; bottom: 14px; right: 14px;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 8px 14px; border-radius: 10px;
    font-size: 0.78rem; font-weight: 700; color: var(--color-text);
    cursor: pointer;
}

.di-gallery-thumbs[b-50w9t68civ] {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
    overflow: hidden;
}

.di-gallery-thumb[b-50w9t68civ] {
    position: relative; cursor: pointer;
    background: #f1f5f9; overflow: hidden;
    border-radius: 0;
}

.di-gallery-thumb img[b-50w9t68civ] {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.3s ease;
}

.di-gallery-thumb:hover img[b-50w9t68civ] { transform: scale(1.05); }

.di-gallery-thumb--active[b-50w9t68civ]::after {
    content: ""; position: absolute; inset: 0;
    border: 3px solid var(--color-brand);
    pointer-events: none;
}

.di-gallery-more[b-50w9t68civ] {
    position: absolute; inset: 0;
    background: rgba(15,23,42,0.65);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; font-weight: 800;
    backdrop-filter: blur(2px);
}

.di-gallery-placeholder[b-50w9t68civ] {
    height: 360px; border-radius: 22px;
    background: #f1f5f9; border: 2px dashed var(--color-border-soft);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    color: var(--color-text-disabled);
}

/* ── Video Platinum (debajo de la galería) ──
   aspect-ratio 16/9 para que el iframe se mantenga responsive sin necesidad
   del clásico padding-bottom hack. El badge violeta replica el estilo del
   tag PLATINUM en el form de edición, para reforzar la asociación visual. */
.di-video-wrap[b-50w9t68civ] {
    margin-top: 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--color-border-soft);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.di-video-head[b-50w9t68civ] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #faf5ff, #ffffff);
    border-bottom: 1px solid #f1f5f9;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 700;
}

.di-video-head svg[b-50w9t68civ] { color: #7c3aed; }

.di-video-tag[b-50w9t68civ] {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #c084fc);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.di-video-frame[b-50w9t68civ] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-text);
}

.di-video-frame iframe[b-50w9t68civ] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── LAYOUT ── */
.di-layout[b-50w9t68civ] {
    max-width: 1300px; margin: 0 auto;
    padding: 0 40px 48px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

/* ── SECTION ── */
.di-section[b-50w9t68civ] {
    background: #fff; border-radius: 20px;
    border: 1px solid var(--color-border);
    padding: 28px 32px;
    margin-bottom: 20px;
}

.di-section--ai[b-50w9t68civ] {
    background: linear-gradient(135deg, var(--color-brand-bg), #ecfdf5);
    border-color: #a7f3d0;
}

.di-section-title[b-50w9t68civ] {
    font-size: 1.05rem; font-weight: 800; color: var(--color-text);
    margin: 0 0 20px; letter-spacing: -0.2px;
}

/* ── DESCRIPTION ── */
.di-description[b-50w9t68civ] {
    /* Por defecto la descripción se muestra entera. Sólo aplicamos clamp +
       fade cuando el texto es lo suficientemente largo (di-description--clamped),
       así descripciones cortas no quedan cortadas con un gradiente sin botón. */
    position: relative;
    transition: max-height 0.3s ease;
}

.di-description--clamped[b-50w9t68civ] {
    max-height: 100px;
    overflow: hidden;
}

.di-description--clamped[b-50w9t68civ]::after {
    content: "";
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}

.di-description--clamped.di-description--expanded[b-50w9t68civ] {
    max-height: 2000px;
}

.di-description--clamped.di-description--expanded[b-50w9t68civ]::after { display: none; }

.di-description p[b-50w9t68civ] {
    font-size: 0.92rem; color: #374151;
    line-height: 1.7; margin: 0;
}

.di-expand-btn[b-50w9t68civ] {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px;
    font-size: 0.82rem; font-weight: 700; color: var(--color-brand);
    background: none; border: none; cursor: pointer;
    font-family: "Sora", sans-serif; padding: 0;
    transition: color 0.15s;
}

.di-expand-btn:hover[b-50w9t68civ] { color: var(--color-brand-dark); }

/* ── AMENITIES ── */
.di-amenities-grid[b-50w9t68civ] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.di-amenity[b-50w9t68civ] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    font-size: 0.82rem; font-weight: 600;
    border: 1.5px solid;
    transition: all 0.15s;
}

.di-amenity--on[b-50w9t68civ] {
    color: var(--color-brand);
    background: var(--color-brand-bg);
    border-color: var(--color-brand-pale);
}

.di-amenity--off[b-50w9t68civ] {
    color: var(--color-text-disabled);
    background: var(--color-bg);
    border-color: #f1f5f9;
}

.di-amenity-icon[b-50w9t68civ] { flex-shrink: 0; display: flex; align-items: center; }

/* ── SPECS ── */
/* Plan Fase 1.6: 4 cols desktop, 2 cols mobile. Antes: 2 cols default y
   1 col en mobile (mucho whitespace vertical en mobile, poca densidad
   en desktop). */
.di-specs-grid[b-50w9t68civ] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    overflow: hidden;
}

.di-spec-row[b-50w9t68civ] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}

.di-spec-row:nth-child(2n)[b-50w9t68civ] { background: var(--color-bg); }
.di-spec-row:last-child[b-50w9t68civ] { border-bottom: none; }

.di-spec-label[b-50w9t68civ] {
    font-size: 0.78rem; color: var(--color-text-disabled); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
}

.di-spec-value[b-50w9t68civ] {
    font-size: 0.9rem; font-weight: 700; color: var(--color-text);
    text-align: right;
}

/* ── MAP ── */
.di-map-wrap[b-50w9t68civ] {
    position: relative;
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--color-border);
    height: 320px;
}

.di-map-iframe[b-50w9t68civ] {
    width: 100%; height: 100%; border: 0; display: block;
}

/* ── AI SECTION ── */
.di-ai-header[b-50w9t68civ] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
}

.di-ai-icon[b-50w9t68civ] {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}

.di-ai-title[b-50w9t68civ] { font-size: 0.95rem; font-weight: 800; color: var(--color-text); }
.di-ai-sub[b-50w9t68civ]   { font-size: 0.72rem; color: var(--color-text-disabled); }

.di-ai-body p[b-50w9t68civ] {
    font-size: 0.88rem; color: #374151;
    line-height: 1.7; margin: 0 0 14px;
}

.di-ai-pros[b-50w9t68civ] { display: flex; flex-direction: column; gap: 8px; }

.di-ai-pro[b-50w9t68civ] {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.85rem; color: #374151; line-height: 1.5;
}

/* ── ASIDE ── */
.di-aside[b-50w9t68civ] {
    position: sticky; top: 24px;
    display: flex; flex-direction: column; gap: 16px;
}

/* ── PRICE CARD ── */
.di-price-card[b-50w9t68civ] {
    background: #fff; border-radius: 22px;
    border: 1px solid var(--color-border);
    padding: 28px 24px;
    box-shadow: 0 8px 32px rgba(15,23,42,0.08);
    display: flex; flex-direction: column; gap: 16px;
}

.di-pc-price-block[b-50w9t68civ] {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.di-pc-price-label[b-50w9t68civ] {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--color-text-subtle);
}

.di-pc-price[b-50w9t68civ] {
    font-size: 2rem; font-weight: 900; color: var(--color-brand);
    letter-spacing: -1px;
    line-height: 1.1;
}

/* Fila con el precio + botón de conversor (calculadora) al costado */
.di-pc-price-row[b-50w9t68civ] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.di-pc-calc-btn[b-50w9t68civ] {
    /* Pill: icono + label "Convertí a pesos en vivo" */
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid #ccfbf1;
    background: var(--color-brand-bg);
    color: var(--color-brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.di-pc-calc-lbl[b-50w9t68civ] {
    display: inline-block;
}

.di-pc-calc-btn:hover[b-50w9t68civ] {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.25);
}

.di-pc-calc-btn.is-open[b-50w9t68civ] {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

/* Popup con la conversión. Se inserta debajo del precio (no es absolute
   para no pelear con el sticky/overflow de la columna derecha). */
.di-conv-pop[b-50w9t68civ] {
    margin-top: 10px;
    background: #ffffff;
    border: 1px solid #ccfbf1;
    border-left: 3px solid var(--color-brand);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.08);
    animation: di-conv-in-b-50w9t68civ 0.2s ease-out;
}

@keyframes di-conv-in-b-50w9t68civ {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.di-conv-head[b-50w9t68civ] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.di-conv-eq[b-50w9t68civ] {
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    font-weight: 600;
}

.di-conv-uyu[b-50w9t68civ] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.3px;
}

.di-conv-rate[b-50w9t68civ] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.di-conv-rate strong[b-50w9t68civ] {
    color: var(--color-text);
    font-weight: 700;
}

.di-conv-meta[b-50w9t68civ] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.72rem;
    color: var(--color-text-disabled);
    margin-top: 2px;
}

.di-conv-foot[b-50w9t68civ] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border-soft);
}

.di-conv-source[b-50w9t68civ] {
    font-size: 0.7rem;
    color: var(--color-text-disabled);
    font-style: italic;
}

.di-conv-refresh[b-50w9t68civ] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-brand);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.di-conv-refresh:hover:not(:disabled)[b-50w9t68civ] {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

.di-conv-refresh:disabled[b-50w9t68civ] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Estado estimado: cambiamos el borde a amarillo/warning para que quede
   claro que el número NO es real sino un placeholder. */
.di-conv-pop.is-estimado[b-50w9t68civ] {
    border: 1px solid #fde68a;
    border-left: 3px solid var(--color-warning);
    background: #fffbeb;
}

.di-conv-pop.is-estimado .di-conv-uyu[b-50w9t68civ] { color: #92400e; }

.di-conv-warn[b-50w9t68civ] {
    font-size: 0.72rem;
    color: #92400e;
    background: #fef3c7;
    padding: 6px 8px;
    border-radius: 6px;
    line-height: 1.4;
}

.di-conv-loading[b-50w9t68civ] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

.di-conv-spinner[b-50w9t68civ] {
    width: 14px; height: 14px;
    border: 2px solid var(--color-border-soft);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: di-conv-spin-b-50w9t68civ 0.8s linear infinite;
}

@keyframes di-conv-spin-b-50w9t68civ {
    to { transform: rotate(360deg); }
}

.di-conv-error[b-50w9t68civ] {
    font-size: 0.82rem;
    color: #b91c1c;
}

.di-pc-gc[b-50w9t68civ] {
    font-size: 0.78rem; color: var(--color-text-subtle);
    font-weight: 500;
    margin-top: 2px;
}

.di-pc-meta[b-50w9t68civ] {
    font-size: 0.8rem; color: var(--color-text-subtle);
    display: flex; align-items: center; gap: 5px;
}

.di-pc-stats[b-50w9t68civ] {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; background: var(--color-bg);
    border-radius: 12px; border: 1px solid #f1f5f9;
}

.di-pc-stat[b-50w9t68civ] {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: var(--color-text-muted);
}

.di-pc-stat strong[b-50w9t68civ] { color: var(--color-text); font-weight: 800; }

.di-btn-visit[b-50w9t68civ] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 15px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    color: #fff; border: none; border-radius: 14px;
    font-size: 0.92rem; font-weight: 800;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
    box-shadow: 0 6px 20px rgba(13,148,136,0.3);
}

.di-btn-visit:hover[b-50w9t68civ] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(13,148,136,0.4);
}

.di-btn-contact[b-50w9t68civ] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px;
    background: var(--color-bg); border: 1.5px solid var(--color-border-soft);
    color: var(--color-text); border-radius: 14px;
    font-size: 0.88rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
}

.di-btn-contact:hover[b-50w9t68civ] { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-bg); }

.di-btn-whatsapp[b-50w9t68civ] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px;
    background: #25d366; color: #fff;
    border: none; border-radius: 14px;
    font-size: 0.88rem; font-weight: 700;
    text-decoration: none; transition: all 0.2s;
    font-family: "Sora", sans-serif;
}

.di-btn-whatsapp:hover[b-50w9t68civ] { background: #1ebe5d; }

/* Botón "Compartir" — mismo tamaño/peso que di-btn-contact (secundario) pero
   con acento teal sutil para diferenciarlo visualmente. */
.di-btn-share[b-50w9t68civ] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px;
    background: var(--color-brand-bg); border: 1.5px solid var(--color-brand-pale);
    color: var(--color-brand); border-radius: 14px;
    font-size: 0.88rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
}

.di-btn-share:hover[b-50w9t68civ] {
    background: #ccfbf1;
    border-color: var(--color-brand);
}

/* Fila Compartir + Guardar */
.di-btn-row[b-50w9t68civ] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.di-btn-row .di-btn-share[b-50w9t68civ] { width: 100%; }

.di-btn-fav[b-50w9t68civ] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px;
    background: #fff; border: 1.5px solid var(--color-border-soft);
    color: var(--color-text-muted); border-radius: 14px;
    font-size: 0.88rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
}

.di-btn-fav:hover[b-50w9t68civ] {
    border-color: #f43f5e;
    color: #f43f5e;
    background: #fff1f2;
}

.di-btn-fav--on[b-50w9t68civ] {
    background: #fff1f2;
    border-color: #f43f5e;
    color: #e11d48;
}

/* ── MODAL COMPARTIR ── */
.di-modal--share[b-50w9t68civ] { max-width: 460px; }

.di-share-grid[b-50w9t68civ] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.di-share-opt[b-50w9t68civ] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px;
    padding: 14px 8px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border-soft);
    border-radius: 14px;
    color: var(--color-text);
    text-decoration: none;
    font-family: "Sora", sans-serif;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s, background 0.2s;
    text-align: center;
}

.di-share-opt:hover[b-50w9t68civ] {
    transform: translateY(-2px);
    border-color: var(--color-brand);
    background: var(--color-brand-bg);
}

.di-share-icon[b-50w9t68civ] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
}

/* Color de marca por opción para que se reconozcan al vuelo. */
.di-share-opt--wpp  .di-share-icon[b-50w9t68civ] { color: #25d366; }
.di-share-opt--mail .di-share-icon[b-50w9t68civ] { color: var(--color-brand); }
.di-share-opt--fb   .di-share-icon[b-50w9t68civ] { color: #1877f2; }
.di-share-opt--x    .di-share-icon[b-50w9t68civ] { color: var(--color-text); }
.di-share-opt--tg   .di-share-icon[b-50w9t68civ] { color: #229ed9; }
.di-share-opt--copy .di-share-icon[b-50w9t68civ] { color: var(--color-text-muted); }

.di-share-opt--copy[b-50w9t68civ] {
    border-style: dashed;
}

.di-share-label[b-50w9t68civ] { line-height: 1.1; }

/* Banda con la URL de la publicación. Sirve para que el usuario pueda
   seleccionar/copiar a mano si el botón de "Copiar" no funciona en su browser. */
.di-share-url[b-50w9t68civ] {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f1f5f9;
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    word-break: break-all;
    user-select: all;
}

@media (max-width: 480px) {
    .di-share-grid[b-50w9t68civ] { grid-template-columns: repeat(2, 1fr); }
}

/* ── AGENCY CARD ── */
.di-agency-card[b-50w9t68civ] {
    background: #fff; border-radius: 22px;
    border: 1px solid var(--color-border);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.05);
    display: flex; flex-direction: column; gap: 16px;
}

.di-ac-title[b-50w9t68civ] {
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--color-text-disabled);
}

.di-ac-header[b-50w9t68civ] {
    display: flex; align-items: center; gap: 14px;
}

.di-ac-avatar[b-50w9t68civ] {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--color-brand-bg); border: 1px solid var(--color-brand-pale);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.di-ac-info[b-50w9t68civ] { flex: 1; }

.di-ac-name[b-50w9t68civ] {
    font-size: 0.92rem; font-weight: 700; color: var(--color-text);
    margin-bottom: 4px;
}

.di-ac-badge[b-50w9t68civ] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 700;
    color: var(--color-brand);
}

.di-ac-btns[b-50w9t68civ] {
    display: flex; gap: 10px;
}

.di-ac-btn[b-50w9t68civ] {
    flex: 1; padding: 11px 0;
    border-radius: 11px;
    font-size: 0.8rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    font-family: "Sora", sans-serif;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none;
}

.di-ac-btn--primary[b-50w9t68civ] {
    background: var(--color-brand); color: #fff; border: none;
}

.di-ac-btn--primary:hover[b-50w9t68civ] { background: var(--color-brand-dark); }

.di-ac-btn--outline[b-50w9t68civ] {
    background: var(--color-bg); color: var(--color-brand);
    border: 1.5px solid var(--color-border-soft);
}

.di-ac-btn--outline:hover[b-50w9t68civ] { border-color: var(--color-brand); background: var(--color-brand-bg); }

/* ── SIMILARES ── */
.di-similares[b-50w9t68civ] {
    max-width: 1300px; margin: 0 auto;
    padding: 0 40px 56px;
}

.di-similares-hdr[b-50w9t68civ] {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}

.di-similares-hdr h2[b-50w9t68civ] {
    font-size: 1.3rem; font-weight: 800; color: var(--color-text); margin: 0;
    letter-spacing: -0.3px;
}

.di-similares-hdr a[b-50w9t68civ] {
    font-size: 0.85rem; font-weight: 700;
    color: var(--color-brand); text-decoration: none;
}

.di-similares-grid[b-50w9t68civ] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.di-sim-card[b-50w9t68civ] {
    display: block; text-decoration: none;
    background: #fff; border-radius: 18px;
    overflow: hidden; border: 1px solid var(--color-border);
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.di-sim-card:hover[b-50w9t68civ] {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(15,23,42,0.1);
}

.di-sim-img-wrap[b-50w9t68civ] {
    position: relative; aspect-ratio: 4/3;
    background: #f1f5f9; overflow: hidden;
}

.di-sim-img[b-50w9t68civ] {
    width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.3s ease;
}

.di-sim-card:hover .di-sim-img[b-50w9t68civ] { transform: scale(1.05); }

.di-sim-no-img[b-50w9t68civ] {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.di-sim-tipo[b-50w9t68civ] {
    position: absolute; bottom: 8px; left: 8px;
    font-size: 0.62rem; font-weight: 700;
    color: rgba(255,255,255,0.9);
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(4px);
    padding: 3px 8px; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.4px;
}

.di-sim-body[b-50w9t68civ] {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 4px;
}

.di-sim-price[b-50w9t68civ] {
    font-size: 1.05rem; font-weight: 900;
    color: var(--color-brand); letter-spacing: -0.3px;
}

.di-sim-title[b-50w9t68civ] {
    font-size: 0.85rem; font-weight: 700; color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.di-sim-loc[b-50w9t68civ] {
    font-size: 0.72rem; color: var(--color-text-disabled);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── GALLERY MODAL ── */
.di-modal-gallery[b-50w9t68civ] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.96);
    display: flex; align-items: center; justify-content: center;
}

.di-mg-close[b-50w9t68civ] {
    position: fixed; top: 20px; right: 20px; z-index: 10;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); transition: background 0.2s;
}

.di-mg-close:hover[b-50w9t68civ] { background: rgba(255,255,255,0.2); }

.di-mg-nav[b-50w9t68civ] {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; z-index: 10;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); transition: background 0.2s;
}

.di-mg-nav:hover[b-50w9t68civ] { background: rgba(255,255,255,0.2); }
.di-mg-nav--prev[b-50w9t68civ] { left: 20px; }
.di-mg-nav--next[b-50w9t68civ] { right: 20px; }

.di-mg-content[b-50w9t68civ] {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: 90vw; max-height: 90vh;
}

.di-mg-img[b-50w9t68civ] {
    max-width: 100%; max-height: 80vh;
    object-fit: contain; border-radius: 8px;
}

.di-mg-counter[b-50w9t68civ] {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem; font-weight: 600;
}

/* ── MODALS ── */
.di-modal-bg[b-50w9t68civ] {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(15,23,42,0.6);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    padding: 20px;
}

.di-modal[b-50w9t68civ] {
    background: #fff; border-radius: 24px;
    width: 100%; max-width: 480px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.25);
    overflow: hidden;
}

.di-modal-hdr[b-50w9t68civ] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 28px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.di-modal-hdr h3[b-50w9t68civ] {
    font-size: 1.1rem; font-weight: 800; color: var(--color-text); margin: 0;
}

.di-modal-hdr button[b-50w9t68civ] {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-disabled); display: flex; align-items: center; justify-content: center;
    padding: 4px; border-radius: 6px; transition: color 0.15s;
}

.di-modal-hdr button:hover[b-50w9t68civ] { color: var(--color-text); }

.di-modal-body[b-50w9t68civ] { padding: 24px 28px 28px; }

.di-modal-intro[b-50w9t68civ] {
    font-size: 0.88rem; color: var(--color-text-subtle); margin: 0 0 20px;
    line-height: 1.6;
}

.di-modal-fields[b-50w9t68civ] { display: flex; flex-direction: column; gap: 14px; }

.di-modal-field[b-50w9t68civ] { display: flex; flex-direction: column; gap: 6px; }

.di-modal-field label[b-50w9t68civ] {
    font-size: 0.72rem; font-weight: 700; color: var(--color-text-subtle);
    text-transform: uppercase; letter-spacing: 0.5px;
}

.di-modal-field input[b-50w9t68civ],
.di-modal-field textarea[b-50w9t68civ] {
    border: 1.5px solid var(--color-border-soft); border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem; font-family: "Sora", sans-serif;
    color: var(--color-text); outline: none; background: var(--color-bg);
    transition: border-color 0.15s;
    resize: vertical;
}

.di-modal-field input:focus[b-50w9t68civ],
.di-modal-field textarea:focus[b-50w9t68civ] { border-color: var(--color-brand); background: #fff; }

.di-modal-submit[b-50w9t68civ] {
    width: 100%; margin-top: 20px; padding: 14px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    color: #fff; border: none; border-radius: 12px;
    font-size: 0.92rem; font-weight: 800;
    font-family: "Sora", sans-serif; cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(13,148,136,0.3);
}

.di-modal-submit:hover[b-50w9t68civ] { box-shadow: 0 10px 28px rgba(13,148,136,0.4); }
.di-modal-submit:disabled[b-50w9t68civ] { opacity: 0.6; cursor: not-allowed; }

.di-modal-error[b-50w9t68civ] {
    font-size: 0.8rem; color: #dc2626;
    margin: 10px 0 0; text-align: center;
}

.di-modal-success[b-50w9t68civ] {
    display: flex; flex-direction: column;
    align-items: center; gap: 12px; padding: 24px 0;
    text-align: center;
}

.di-modal-success p[b-50w9t68civ] {
    font-size: 0.92rem; color: #374151; font-weight: 600; margin: 0;
}

.di-modal-actions[b-50w9t68civ] {
    display: flex; gap: 10px; margin-top: 20px;
}

.di-modal-actions .di-modal-submit[b-50w9t68civ] { margin-top: 0; flex: 1; }

/* Modal Visita: solo el ancho maximo queda acá (no-grid props).
   Todo el resto vive en wwwroot/app.css bajo .dvis-* para evitar
   problemas con el bundle scoped cuando se agregan clases nuevas. */
.di-modal--visita[b-50w9t68civ] {
    max-width: 460px;
}

.di-modal-wa[b-50w9t68civ] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 20px;
    background: #25d366; color: #fff;
    border-radius: 12px; text-decoration: none;
    font-size: 0.88rem; font-weight: 700;
    font-family: "Sora", sans-serif;
    transition: background 0.2s; white-space: nowrap;
}

.di-modal-wa:hover[b-50w9t68civ] { background: #1ebe5d; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .di-layout[b-50w9t68civ] { grid-template-columns: 1fr; }
    .di-aside[b-50w9t68civ] { position: static; }
    .di-price-card[b-50w9t68civ], .di-agency-card[b-50w9t68civ] { max-width: 520px; }
    .di-similares-grid[b-50w9t68civ] { grid-template-columns: repeat(2, 1fr); }
    .di-amenities-grid[b-50w9t68civ] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .di-breadcrumb-bar[b-50w9t68civ], .di-header[b-50w9t68civ] { padding: 0 20px; }
    .di-header[b-50w9t68civ] { flex-direction: column; padding: 20px; gap: 16px; }
    .di-header-price[b-50w9t68civ] { text-align: left; }
    .di-gallery-wrap[b-50w9t68civ], .di-layout[b-50w9t68civ], .di-similares[b-50w9t68civ] { padding-left: 20px; padding-right: 20px; }
    .di-gallery[b-50w9t68civ] { grid-template-columns: 1fr; max-height: none; }
    /* Plan Fase 1.6: en mobile las thumbs pasan de grid (apiladas) a un
       carousel horizontal con scroll-snap. El usuario puede ver más fotos
       sin que se compriman a un tamaño ilegible, y el gesto de swipe
       horizontal es nativo en mobile. La foto grande (.di-gallery-main)
       queda arriba como hoy.

       Las propiedades grid-* heredadas de la regla base se invalidan con
       'display: flex' (que hace que grid-template-* se ignoren). */
    .di-gallery-thumbs[b-50w9t68civ] {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding-bottom: 4px; /* espacio para la scrollbar */
        -webkit-overflow-scrolling: touch;
    }
    .di-gallery-thumb[b-50w9t68civ] {
        flex: 0 0 calc(50% - 4px); /* 2 thumbs visibles a la vez, swipe para más */
        scroll-snap-align: start;
        aspect-ratio: 4/3; /* sin esto las thumbs en flex colapsan vertical */
    }

    /* Plan Fase 1.6: specs en 2 cols en mobile (entre 480 y 768). Más denso
       que 1 col, más legible que 4 cols. */
    .di-specs-grid[b-50w9t68civ] { grid-template-columns: repeat(2, 1fr); }
    .di-section[b-50w9t68civ] { padding: 20px; }
    .di-similares-grid[b-50w9t68civ] { grid-template-columns: repeat(2, 1fr); }
    .di-title[b-50w9t68civ] { font-size: 1.4rem; }
    .di-price[b-50w9t68civ] { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .di-similares-grid[b-50w9t68civ] { grid-template-columns: 1fr; }
    .di-amenities-grid[b-50w9t68civ] { grid-template-columns: 1fr 1fr; }

    /* En mobile el precio ya es grande, escondemos el label del conversor
       y el botón vuelve a ser un cuadradito sólo con el ícono. */
    .di-pc-calc-btn[b-50w9t68civ] { padding: 0; width: 34px; justify-content: center; }
    .di-pc-calc-lbl[b-50w9t68civ] { display: none; }

    /* Breadcrumb y padding del header: a 480px el padding de 20px deja poco
       aire lateral. Lo bajamos a 14px para ganar espacio para texto. */
    .di-breadcrumb-bar[b-50w9t68civ], .di-header[b-50w9t68civ] { padding: 0 14px; }
    .di-header[b-50w9t68civ] { padding: 16px 14px; }
    .di-gallery-wrap[b-50w9t68civ], .di-layout[b-50w9t68civ], .di-similares[b-50w9t68civ] { padding-left: 14px; padding-right: 14px; }
    .di-section[b-50w9t68civ] { padding: 16px; }

    /* Breadcrumb scrolleable horizontal — si los crumbs son largos (ej.
       "Inicio / Inmuebles / Listado / [tipo] / [barrio]"), permitir scroll
       en lugar de wrappear. Wrap rompe visualmente con el "/" separator. */
    .di-breadcrumb-bar > *[b-50w9t68civ] {
        white-space: nowrap;
    }
    .di-breadcrumb-bar[b-50w9t68civ] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .di-breadcrumb-bar[b-50w9t68civ]::-webkit-scrollbar { display: none; }

    /* Gallery thumbs: la regla 768px ya hizo el carousel horizontal con flex
       (1 thumb = 50% width). Eliminamos la línea vieja "grid-template-columns:
       repeat(3, 1fr)" que era dead code (flex la ignora) y damos un pelo más
       de tamaño a la thumb para que sea cómoda al tap. */
    .di-gallery-thumb[b-50w9t68civ] {
        flex: 0 0 calc(60% - 4px);
    }

    /* Specs: a 4-col base, 2-col en 768px, 1-col a 480px. Una columna en
       pantallas chicas hace la lista mucho más cómoda de escanear que dos
       celdas estrechas. */
    .di-specs-grid[b-50w9t68civ] { grid-template-columns: 1fr; }

    /* Header título + precio en mobile chico: el precio es más grande de lo
       necesario y dispara wrapping. Bajamos un toque para que entren juntos
       sin saltar de línea. */
    .di-title[b-50w9t68civ] { font-size: 1.25rem; }
    .di-price[b-50w9t68civ] { font-size: 1.4rem; }
}

/* ── Qué hay cerca (mini-mapa de POIs) ──────────────────────────────── */
.di-section-subtitle[b-50w9t68civ] {
    margin: -6px 0 16px;
    font-size: 14px;
    color: var(--color-text-subtle);
    line-height: 1.5;
}

.di-cerca-loading[b-50w9t68civ] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: #f1f5f9;
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.di-spinner[b-50w9t68civ] {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(13, 148, 136, 0.2);
    border-top-color: var(--color-brand);
    animation: di-spin-b-50w9t68civ 0.8s linear infinite;
}

@keyframes di-spin-b-50w9t68civ { to { transform: rotate(360deg); } }

.di-cerca-kpis[b-50w9t68civ] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.di-cerca-kpi[b-50w9t68civ] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: linear-gradient(135deg, var(--color-brand-bg), #ffffff);
    border: 1px solid var(--color-brand-pale);
    border-radius: 12px;
    text-align: center;
    transition: transform 200ms ease;
}
.di-cerca-kpi:hover[b-50w9t68civ] { transform: translateY(-2px); }

.di-cerca-kpi__n[b-50w9t68civ] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-brand-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.di-cerca-kpi__l[b-50w9t68civ] {
    font-size: 12px;
    color: var(--color-text-subtle);
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.02em;
}

.di-cerca-fuente[b-50w9t68civ] {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--color-text-disabled);
    font-style: italic;
    text-align: center;
}

.di-cerca-error[b-50w9t68civ] {
    padding: 14px 18px;
    background: #fef2f2;
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #991b1b;
    border-radius: 10px;
    font-size: 13.5px;
}

@media (max-width: 560px) {
    .di-cerca-kpis[b-50w9t68civ] { grid-template-columns: 1fr 1fr; }
    .di-cerca-kpi:last-child[b-50w9t68civ] { grid-column: span 2; }
    .di-cerca-kpi__n[b-50w9t68civ] { font-size: 22px; }
}

/* ── Tabla tabulada de cercanías (6 columnas por categoría) ─────────── */
.di-cerca-tabla[b-50w9t68civ] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

@media (min-width: 1200px) {
    .di-cerca-tabla[b-50w9t68civ] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .di-cerca-tabla[b-50w9t68civ] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .di-cerca-tabla[b-50w9t68civ] { grid-template-columns: 1fr; }
}

.di-cerca-col[b-50w9t68civ] {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    background: white;
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.di-cerca-col:hover[b-50w9t68civ] {
    border-color: var(--color-brand-pale);
    box-shadow: 0 6px 16px -8px rgba(13, 148, 136, 0.18);
}

.di-cerca-col-head[b-50w9t68civ] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.di-cerca-col-icon[b-50w9t68civ] {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.di-cerca-col-titulo[b-50w9t68civ] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-family: 'Sora', 'Inter', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.di-cerca-col-total[b-50w9t68civ] {
    display: block;
    font-size: 11.5px;
    color: var(--color-text-subtle);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

.di-cerca-col-vacio[b-50w9t68civ] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--color-text-disabled);
    font-style: italic;
}

.di-cerca-col-mas[b-50w9t68civ] {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--color-brand);
    font-weight: 600;
    text-align: center;
}

.di-cerca-lista[b-50w9t68civ] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.di-cerca-item[b-50w9t68civ] {
    padding-bottom: 10px;
    border-bottom: 1px dashed #f1f5f9;
}
.di-cerca-item:last-child[b-50w9t68civ] {
    border-bottom: 0;
    padding-bottom: 0;
}

.di-cerca-item-top[b-50w9t68civ] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
}

.di-cerca-item-nombre[b-50w9t68civ] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.di-cerca-item-tiempo[b-50w9t68civ] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-brand);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.di-cerca-item-meta[b-50w9t68civ] {
    margin-top: 3px;
}

.di-cerca-item-metros[b-50w9t68civ] {
    font-size: 11.5px;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

.di-cerca-item-lineas[b-50w9t68civ] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.di-cerca-linea[b-50w9t68civ] {
    display: inline-block;
    padding: 2px 7px;
    background: var(--color-brand-bg);
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brand-pale);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   STICKY MOBILE CTA (Fase 1.7)
   ════════════════════════════════════════════════════════════════════
   Barra fija al borde inferior del viewport en mobile, con los dos
   CTAs primarios del detalle: "Agendar visita" y "Contactar".
   Asegura que el usuario tenga 1-tap a la conversión sin importar
   qué tanto haya scrolleado en la página.

   En desktop está oculta (display:none) — el side panel ya tiene los
   mismos CTAs siempre visibles.

   Notas:
   - z-index 50: encima de todo el contenido normal pero debajo de
     los modales (que usan 1000+).
   - backdrop-filter: blur(12px) sobre fondo semi-transparente para
     que se "lea" sobre cualquier contenido scrolleando atrás.
   - safe-area-inset-bottom para dispositivos con home indicator (iOS).
   - El contenedor .di-page agrega padding-bottom solo en mobile para
     que el último contenido no quede tapado por la barra (~88px:
     barra + padding + safe-area). */
.di-mobile-cta[b-50w9t68civ] {
    display: none; /* solo se muestra en mobile, ver media query abajo */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.12);
}

.di-mobile-cta-btn[b-50w9t68civ] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    border: none;
}

.di-mobile-cta-btn:active[b-50w9t68civ] {
    transform: scale(0.98);
}

.di-mobile-cta-btn--primary[b-50w9t68civ] {
    background: var(--color-brand);
    color: #ffffff;
    box-shadow: 0 6px 16px -6px rgba(13, 148, 136, 0.55);
}
.di-mobile-cta-btn--primary:hover[b-50w9t68civ] {
    background: var(--color-brand-dark);
}

.di-mobile-cta-btn--secondary[b-50w9t68civ] {
    background: #ffffff;
    color: var(--color-brand-dark);
    border: 1.5px solid var(--color-brand-light);
}
.di-mobile-cta-btn--secondary:hover[b-50w9t68civ] {
    background: var(--color-brand-bg);
}

@media (max-width: 768px) {
    .di-mobile-cta[b-50w9t68civ] {
        display: flex;
    }
    /* Reservar espacio al final del scroll para que la barra no tape
       el último contenido (cercanías, similares, footer del aside). */
    .di-page[b-50w9t68civ] {
        padding-bottom: 88px;
    }
}
/* /Components/Pages/Nuevo/EditarPublicacion.razor.rz.scp.css */
/* ============================================================
   EDITAR PUBLICACIÓN — estilos específicos
   Reutiliza vp-* y define ep-* para lo propio de la edición.
   Accent: teal #0d9488
   ============================================================ */

.ep-page[b-k6z9pkh09g] {
    background: #f8fafc;
    min-height: 100vh;
    font-family: "Sora", sans-serif;
}

/* ── Loader y estados ── */
.ep-loader[b-k6z9pkh09g] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: "Sora", sans-serif;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.ep-spinner[b-k6z9pkh09g] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: ep-spin-b-k6z9pkh09g 0.85s linear infinite;
}

@keyframes ep-spin-b-k6z9pkh09g {
    to { transform: rotate(360deg); }
}

.ep-state[b-k6z9pkh09g] {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    padding: 40px 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(15,23,42,0.05);
    font-family: "Sora", sans-serif;
}

.ep-state-icon[b-k6z9pkh09g] {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fef2f2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-state h2[b-k6z9pkh09g] {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 8px;
}

.ep-state p[b-k6z9pkh09g] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px;
}

.ep-state-btn[b-k6z9pkh09g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(13,148,136,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.ep-state-btn:hover[b-k6z9pkh09g] {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13,148,136,0.42);
}

/* ── HERO ── */
.ep-hero[b-k6z9pkh09g] {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0f766e 100%);
    color: #fff;
    padding: 32px 0 28px;
    position: relative;
    overflow: hidden;
}

.ep-hero[b-k6z9pkh09g]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(94,234,212,0.18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(13,148,136,0.24), transparent 45%);
    pointer-events: none;
}

.ep-hero-inner[b-k6z9pkh09g] {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.ep-hero-content[b-k6z9pkh09g] {
    margin-top: 22px;
}

.ep-hero-badge[b-k6z9pkh09g] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.92);
    margin-bottom: 16px;
}

.ep-hero-title[b-k6z9pkh09g] {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    letter-spacing: -0.8px;
    margin: 0 0 10px;
    line-height: 1.1;
}

.ep-hero-title em[b-k6z9pkh09g] {
    font-style: normal;
    background: linear-gradient(135deg, #5eead4, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ep-hero-sub[b-k6z9pkh09g] {
    font-size: 14px;
    opacity: 0.78;
    margin: 0 0 20px;
    max-width: 640px;
    line-height: 1.55;
}

.ep-hero-meta[b-k6z9pkh09g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: 0.92;
}

.ep-meta-chip[b-k6z9pkh09g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ep-meta-chip--gold[b-k6z9pkh09g] {
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.2));
    border-color: rgba(251,191,36,0.4);
    color: #fef3c7;
}

.ep-meta-dot[b-k6z9pkh09g] { color: rgba(255,255,255,0.45); font-weight: 900; }

/* ── Imagen principal en sección fotos ── */
.ep-img-main[b-k6z9pkh09g] {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    max-height: 340px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.12);
}

.ep-img-main img[b-k6z9pkh09g] {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
}

.ep-img-main-tag[b-k6z9pkh09g] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(13,148,136,0.92);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Botón agregar miniatura */
.ep-add-img[b-k6z9pkh09g] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px dashed rgba(13,148,136,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(13,148,136,0.04);
    transition: border-color 0.15s, background 0.15s;
    color: #0d9488;
    font-size: 9px;
    font-weight: 700;
}

.ep-add-img:hover[b-k6z9pkh09g] {
    border-color: #0d9488;
    background: rgba(13,148,136,0.08);
}

.ep-add-img input[type=file][b-k6z9pkh09g] {
    display: none;
}

.ep-add-img span[b-k6z9pkh09g] { margin-top: 2px; }

/* ── Zona de peligro ── */
.ep-danger-zone[b-k6z9pkh09g] {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ep-danger-txt[b-k6z9pkh09g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ep-danger-txt strong[b-k6z9pkh09g] {
    font-size: 14px;
    font-weight: 800;
    color: #9a3412;
}

.ep-danger-txt span[b-k6z9pkh09g] {
    font-size: 12px;
    color: #b45309;
}

.ep-btn-danger[b-k6z9pkh09g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid #fca5a5;
    background: #fff;
    color: #dc2626;
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.ep-btn-danger:hover:not(:disabled)[b-k6z9pkh09g] {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220,38,38,0.25);
}

.ep-btn-danger:disabled[b-k6z9pkh09g] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Action bar sticky ── */
.ep-action-bar[b-k6z9pkh09g] {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    margin-top: 28px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}

.ep-btn-save[b-k6z9pkh09g] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 18px rgba(13,148,136,0.35);
}

.ep-btn-save:hover:not(:disabled)[b-k6z9pkh09g] {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(13,148,136,0.45);
}

.ep-btn-save:disabled[b-k6z9pkh09g] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Preview column — quick actions ── */
.ep-quick-actions[b-k6z9pkh09g] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ep-quick-link[b-k6z9pkh09g] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}

.ep-quick-link:hover[b-k6z9pkh09g] {
    border-color: #0d9488;
    color: #0d9488;
    background: #f0fdfa;
}

/* ── Modal confirmar borrado ── */
.ep-modal-bg[b-k6z9pkh09g] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15,23,42,0.58);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ep-fade-in-b-k6z9pkh09g 0.15s ease;
}

@keyframes ep-fade-in-b-k6z9pkh09g {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ep-modal[b-k6z9pkh09g] {
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(15,23,42,0.35);
    font-family: "Sora", sans-serif;
    animation: ep-pop-in-b-k6z9pkh09g 0.22s cubic-bezier(0.17, 0.84, 0.44, 1);
}

@keyframes ep-pop-in-b-k6z9pkh09g {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ep-modal-icon[b-k6z9pkh09g] {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-modal h3[b-k6z9pkh09g] {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}

.ep-modal p[b-k6z9pkh09g] {
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 22px;
}

.ep-modal-actions[b-k6z9pkh09g] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.ep-modal-actions .vp-btn-prev[b-k6z9pkh09g],
.ep-modal-actions .ep-btn-danger[b-k6z9pkh09g] { min-width: 130px; justify-content: center; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .ep-danger-zone[b-k6z9pkh09g] { flex-direction: column; align-items: flex-start; }
    .ep-action-bar[b-k6z9pkh09g] { position: static; }
}

@media (max-width: 720px) {
    .ep-hero[b-k6z9pkh09g] { padding: 24px 0 22px; }
    .ep-hero-inner[b-k6z9pkh09g] { padding: 0 20px; }
    .ep-hero-title[b-k6z9pkh09g] { font-size: 22px; }
    .ep-meta-chip[b-k6z9pkh09g] { font-size: 11px; padding: 4px 9px; }
    .ep-modal[b-k6z9pkh09g] { padding: 26px 22px; }
}

/* ============================================================
   vp-* shared styles (espejo de VenderInmuebles.razor.css)
   Se duplican acá porque CSS isolation los scopa por archivo.
   ============================================================ */

.vp-back-btn[b-k6z9pkh09g] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 8px;
    color: rgba(255,255,255,0.80); background: transparent;
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s;
    font-family: "Sora", sans-serif;
}
.vp-back-btn:hover[b-k6z9pkh09g] { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.40); }

.vp-body[b-k6z9pkh09g] { max-width: 1240px; margin: 0 auto; padding: 32px 32px 80px; display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.vp-form-col[b-k6z9pkh09g] { display: flex; flex-direction: column; gap: 0; }

.vp-alert[b-k6z9pkh09g] { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
.vp-alert--success[b-k6z9pkh09g] { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.vp-alert--error[b-k6z9pkh09g] { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

.vp-section[b-k6z9pkh09g] { background: #fff; border: 1.5px solid #eef2f7; border-radius: 16px; margin-bottom: 14px; overflow: hidden; position: relative; transition: all 0.2s; }
.vp-section[b-k6z9pkh09g]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #0d9488, #5eead4); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; }
.vp-section--open[b-k6z9pkh09g] { border-color: #e2e8f0; box-shadow: 0 8px 28px rgba(15,23,42,0.07); }
.vp-section--open[b-k6z9pkh09g]::before { transform: scaleY(1); }
.vp-section-hdr[b-k6z9pkh09g] { width: 100%; display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: none; border: none; text-align: left; }
.vp-sec-num[b-k6z9pkh09g] { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid #e2e8f0; color: var(--color-text-subtle); flex-shrink: 0; transition: all 0.15s; }
.vp-sec-num.cur[b-k6z9pkh09g] { border-color: #0d9488; color: #0d9488; background: #f0fdfa; }
.vp-sec-txt[b-k6z9pkh09g] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vp-sec-txt strong[b-k6z9pkh09g] { font-size: 14px; font-weight: 700; color: #1e293b; }
.vp-sec-txt span[b-k6z9pkh09g] { font-size: 12px; color: var(--color-text-subtle); }
.vp-section-body[b-k6z9pkh09g] { padding: 4px 20px 22px; border-top: 1px solid #f1f5f9; }

.vp-field[b-k6z9pkh09g] { display: flex; flex-direction: column; gap: 6px; }
.vp-lbl[b-k6z9pkh09g] { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 8px; }
.vp-req[b-k6z9pkh09g] { color: #ef4444; margin-left: 2px; }
.vp-platinum-tag[b-k6z9pkh09g] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #c084fc);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.vp-input[b-k6z9pkh09g], .vp-select[b-k6z9pkh09g], .vp-textarea[b-k6z9pkh09g] {
    width: 100%; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: 13px; color: #1e293b; background: #f8fafc; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; font-family: inherit;
}
.vp-input:focus[b-k6z9pkh09g], .vp-select:focus[b-k6z9pkh09g], .vp-textarea:focus[b-k6z9pkh09g] { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); background: #fff; }
.vp-select[b-k6z9pkh09g] {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.vp-textarea[b-k6z9pkh09g] { resize: vertical; min-height: 110px; }
.vp-hint[b-k6z9pkh09g] { font-size: 11px; color: var(--color-text-subtle); }
.vp-fields-grid[b-k6z9pkh09g] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 8px; }

.vp-upload[b-k6z9pkh09g] { display: block; border: 2px dashed #e2e8f0; border-radius: 12px; cursor: pointer; overflow: hidden; margin-top: 0; position: relative; transition: border-color 0.15s, background 0.15s; }
.vp-upload:hover[b-k6z9pkh09g] { border-color: #5eead4; background: #f8fafc; }
.vp-upload input[b-k6z9pkh09g] { display: none; }
.vp-upload-ph[b-k6z9pkh09g] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--color-text-subtle); }
.vp-upload-lbl[b-k6z9pkh09g] { font-size: 14px; font-weight: 600; color: #475569; }
.vp-upload-hint[b-k6z9pkh09g] { font-size: 12px; }

.vp-strip[b-k6z9pkh09g] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vp-strip-item[b-k6z9pkh09g] { position: relative; }
.vp-strip-btn[b-k6z9pkh09g] { display: block; width: 72px; height: 72px; border-radius: 8px; border: 2px solid #e2e8f0; overflow: hidden; cursor: pointer; padding: 0; background: none; position: relative; transition: border-color 0.15s; }
.vp-strip-btn img[b-k6z9pkh09g] { width: 100%; height: 100%; object-fit: cover; }
.vp-strip-btn.active[b-k6z9pkh09g] { border-color: #0d9488; }
.vp-strip-lbl[b-k6z9pkh09g] { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(13,148,136,0.85); color: #fff; font-size: 9px; font-weight: 700; text-align: center; padding: 2px; }
.vp-strip-del[b-k6z9pkh09g] { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: #fff; border: none; cursor: pointer; font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.vp-strip-del:hover[b-k6z9pkh09g] { background: #dc2626; }

.vp-price-row[b-k6z9pkh09g] { display: flex; align-items: stretch; border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 8px; }
.vp-currency[b-k6z9pkh09g] { padding: 0 14px; border: none; border-right: 1.5px solid #e2e8f0; background: #f1f5f9; font-size: 13px; font-weight: 700; color: #1e293b; cursor: pointer; outline: none; min-width: 90px; appearance: none; -webkit-appearance: none; }
.vp-price-field[b-k6z9pkh09g] { flex: 1; display: flex; align-items: center; padding: 0 14px; gap: 8px; background: #fff; }
.vp-price-sign[b-k6z9pkh09g] { font-size: 16px; font-weight: 700; color: #475569; }
.vp-price-input[b-k6z9pkh09g] { flex: 1; border: none; background: none; font-size: 22px; font-weight: 800; color: #0f172a; outline: none; padding: 12px 0; font-family: inherit; }
.vp-price-tag[b-k6z9pkh09g] { font-size: 12px; font-weight: 700; color: var(--color-text-subtle); }

.vp-btn-prev[b-k6z9pkh09g] { background: none; border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.15s; font-family: "Sora", sans-serif; }
.vp-btn-prev:hover[b-k6z9pkh09g] { border-color: var(--color-text-subtle); color: #1e293b; background: #f8fafc; }

.vp-btn-ai[b-k6z9pkh09g] {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none; border-radius: 8px; color: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    letter-spacing: 0.02em; font-family: "Sora", sans-serif;
}
.vp-btn-ai:hover[b-k6z9pkh09g] { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(102, 126, 234, 0.45); background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%); }
.vp-btn-ai:disabled[b-k6z9pkh09g] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.vp-spin[b-k6z9pkh09g] { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: vp-spin-b-k6z9pkh09g 0.7s linear infinite; }
@keyframes vp-spin-b-k6z9pkh09g { to { transform: rotate(360deg); } }

.vp-preview-col[b-k6z9pkh09g] { position: relative; }
.vp-preview-sticky[b-k6z9pkh09g] { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.vp-progress-card[b-k6z9pkh09g] { background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%); border: 1.5px solid #99f6e4; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 16px rgba(13,148,136,0.08); }
.vp-progress-head[b-k6z9pkh09g] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vp-progress-lbl[b-k6z9pkh09g] { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.08em; }
.vp-progress-pct[b-k6z9pkh09g] { font-size: 16px; font-weight: 900; color: #0d9488; letter-spacing: -0.3px; }
.vp-progress-bar[b-k6z9pkh09g] { width: 100%; height: 6px; background: #ccfbf1; border-radius: 999px; overflow: hidden; }
.vp-progress-fill[b-k6z9pkh09g] { height: 100%; background: linear-gradient(90deg, #0d9488 0%, #14b8a6 50%, #5eead4 100%); border-radius: 999px; transition: width 0.4s ease; }
.vp-progress-hint[b-k6z9pkh09g] { font-size: 11px; color: #64748b; margin: 8px 0 0; }

.vp-preview-title[b-k6z9pkh09g] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--color-text-subtle); margin: 4px 0 0; }
.vp-preview-card[b-k6z9pkh09g] { background: #fff; border: 1.5px solid #e8edf3; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(15,23,42,0.06); }
.vp-preview-img[b-k6z9pkh09g] { position: relative; aspect-ratio: 4/3; background: #f1f5f9; overflow: hidden; }
.vp-preview-img img[b-k6z9pkh09g] { width: 100%; height: 100%; object-fit: cover; }
.vp-preview-no-img[b-k6z9pkh09g] { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-subtle); font-size: 12px; }
.vp-prev-floating[b-k6z9pkh09g] { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 6px; background: rgba(15,23,42,0.65); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(6px); }
.vp-preview-body[b-k6z9pkh09g] { padding: 14px 16px 16px; }
.vp-prev-cat[b-k6z9pkh09g] { font-size: 10px; font-weight: 700; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; }
.vp-prev-title[b-k6z9pkh09g] { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 5px; line-height: 1.3; }
.vp-prev-desc[b-k6z9pkh09g] { font-size: 12px; color: #475569; line-height: 1.5; margin: 0 0 12px; }
.vp-prev-empty[b-k6z9pkh09g] { color: var(--color-text-subtle); font-style: italic; }
.vp-prev-price[b-k6z9pkh09g] { font-size: 22px; font-weight: 900; color: #0d9488; margin-bottom: 10px; letter-spacing: -0.5px; }
.vp-prev-tags[b-k6z9pkh09g] { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-tag[b-k6z9pkh09g] { font-size: 10px; font-weight: 600; padding: 3px 8px; background: #f1f5f9; border-radius: 6px; color: #475569; }

.vp-check-grid[b-k6z9pkh09g] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding-top: 8px; }
.vp-check-item[b-k6z9pkh09g] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 500; color: #475569; transition: all 0.15s; user-select: none; }
.vp-check-item:hover[b-k6z9pkh09g] { border-color: #5eead4; background: #fff; }
.vp-check-item.active[b-k6z9pkh09g] { border-color: #0d9488; background: #f0fdfa; color: #1e293b; font-weight: 600; }
.vp-check-item input[type="checkbox"][b-k6z9pkh09g] { display: none; }

@media (max-width: 1024px) {
    .vp-body[b-k6z9pkh09g] { grid-template-columns: 1fr; }
    .vp-preview-col[b-k6z9pkh09g] { display: none; }
}
@media (max-width: 768px) {
    .vp-body[b-k6z9pkh09g] { padding: 20px 16px 60px; }
    .vp-fields-grid[b-k6z9pkh09g] { grid-template-columns: 1fr; }
}

/* Estado de verificación de padrón (igual que en VenderInmuebles.razor.css).
   Se duplica acá porque los CSS scoped de Blazor son por componente. */
.vp-cat-status[b-k6z9pkh09g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.3;
}
.vp-cat-status-ok[b-k6z9pkh09g] { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.vp-cat-status-error[b-k6z9pkh09g] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.vp-cat-status-warn[b-k6z9pkh09g] { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.vp-cat-status-checking[b-k6z9pkh09g] { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
/* /Components/Pages/Nuevo/ListadoInmuebles.razor.rz.scp.css */
/* ============================================================
   LISTADO INMUEBLES
   ============================================================ */

.li-page[b-xaspxa2bot] {
    min-height: 100vh;
    background: var(--color-bg);
    font-family: "Inter", system-ui, sans-serif;
}

/* ── TOPBAR ── */
.li-topbar[b-xaspxa2bot] {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 0 32px;
}

.li-topbar-inner[b-xaspxa2bot] {
    max-width: 1440px; margin: 0 auto;
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 16px;
}

.li-breadcrumb[b-xaspxa2bot] {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; color: var(--color-text-disabled);
}

.li-breadcrumb a[b-xaspxa2bot] { color: var(--color-text-subtle); text-decoration: none; transition: color 0.15s; }
.li-breadcrumb a:hover[b-xaspxa2bot] { color: var(--color-brand); }
.li-breadcrumb span[b-xaspxa2bot] { color: var(--color-divider); }

/* Contador "X propiedades" como pill al final del breadcrumb. Lo separamos
   del breadcrumb con un margen extra y le quitamos el color de separator
   (el "/" gris) para que no se confunda con un crumb más. */
.li-breadcrumb-count[b-xaspxa2bot] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 10px;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted) !important;
}
.li-breadcrumb-count strong[b-xaspxa2bot] { color: var(--color-text); font-weight: 800; }

.li-topbar-right[b-xaspxa2bot] {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.li-sort select[b-xaspxa2bot] {
    border: 1px solid var(--color-border-soft); border-radius: 9px;
    padding: 8px 14px;
    font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted);
    background: #fff; outline: none; cursor: pointer;
    font-family: "Sora", sans-serif;
    transition: border-color 0.2s;
}

.li-sort select:focus[b-xaspxa2bot] { border-color: var(--color-brand); }

/* ── BODY (sidebar + main) ── */
.li-body[b-xaspxa2bot] {
    max-width: 1440px; margin: 0 auto;
    padding: 32px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── SIDEBAR ── */
.li-sidebar[b-xaspxa2bot] {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;
    position: sticky; top: 80px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.05);
}

.li-sidebar-hdr[b-xaspxa2bot] {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}

.li-sidebar-hdr h2[b-xaspxa2bot] {
    font-size: 1rem; font-weight: 800; color: var(--color-text); margin: 0;
}

.li-clear-btn[b-xaspxa2bot] {
    font-size: 0.75rem; font-weight: 700; color: var(--color-brand);
    background: none; border: none; cursor: pointer;
    font-family: "Sora", sans-serif;
    padding: 0; transition: color 0.2s;
}

.li-clear-btn:hover[b-xaspxa2bot] { color: var(--color-brand-dark); }

/* Filter groups */
.li-filter-group[b-xaspxa2bot] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.li-filter-group:last-of-type[b-xaspxa2bot] { border-bottom: none; margin-bottom: 20px; }

.li-fg-title[b-xaspxa2bot] {
    font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--color-text-disabled); margin-bottom: 14px;
}

/* Checkboxes */
.li-check[b-xaspxa2bot] {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; padding: 5px 0;
    user-select: none;
}

.li-check input[type="checkbox"][b-xaspxa2bot] { display: none; }

.li-check-box[b-xaspxa2bot] {
    width: 18px; height: 18px; flex-shrink: 0;
    border: 2px solid var(--color-border-soft); border-radius: 5px;
    background: #fff; transition: all 0.15s;
    position: relative;
}

.li-check input:checked + .li-check-box[b-xaspxa2bot] {
    background: var(--color-brand); border-color: var(--color-brand);
}

.li-check input:checked + .li-check-box[b-xaspxa2bot]::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 900;
}

.li-check-label[b-xaspxa2bot] { flex: 1; font-size: 0.85rem; color: #374151; font-weight: 500; }
.li-check-count[b-xaspxa2bot] { font-size: 0.72rem; color: var(--color-text-disabled); }

/* Range */
.li-range-inputs[b-xaspxa2bot] {
    display: flex; align-items: flex-end; gap: 8px;
    /* min-width:0 en hijos flex evita que el contenido fuerce overflow del sidebar */
}

.li-range-field[b-xaspxa2bot] {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column; gap: 5px;
}

.li-range-field label[b-xaspxa2bot] {
    font-size: 0.68rem; font-weight: 700; color: var(--color-text-disabled);
    text-transform: uppercase; letter-spacing: 0.4px;
}

.li-range-field select[b-xaspxa2bot] {
    /* appearance:none + chevron SVG propio: el nativo del browser aparecía
       encima del texto "Sin mínimo" / "Sin límite" en la columna angosta del
       sidebar. Reservamos padding-right para el chevron y truncamos con
       ellipsis si el texto se queda corto. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-border-soft); border-radius: 9px;
    padding: 9px 30px 9px 12px;
    font-size: 0.8rem; font-family: "Sora", sans-serif;
    color: #374151; background-color: var(--color-bg); outline: none;
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}

.li-range-field select:hover[b-xaspxa2bot] { border-color: var(--color-divider); }
.li-range-field select:focus[b-xaspxa2bot] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.li-range-sep[b-xaspxa2bot] {
    color: var(--color-divider); font-size: 0.85rem;
    flex: 0 0 auto;
    /* Bajamos el guión a la altura de los selects (los labels están encima) */
    padding-bottom: 10px;
}

/* Inputs number del rango de precio — mismo look que los select para que no
   rompan visualmente con el resto del sidebar. Sin spinners nativos del browser
   (le dejamos el rol al placeholder + foco del usuario). */
.li-range-field input[type="number"][b-xaspxa2bot] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-border-soft); border-radius: 9px;
    padding: 9px 12px;
    font-size: 0.8rem; font-family: "Sora", sans-serif;
    color: #374151; background-color: var(--color-bg); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}
.li-range-field input[type="number"][b-xaspxa2bot]::-webkit-outer-spin-button,
.li-range-field input[type="number"][b-xaspxa2bot]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.li-range-field input[type="number"]:hover[b-xaspxa2bot] { border-color: var(--color-divider); }
.li-range-field input[type="number"]:focus[b-xaspxa2bot] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* Selector de moneda (USD / UYU) sobre el rango de precio. Dos radio-buttons
   estilizados como pills lado a lado. Ocupan 100% del ancho del sidebar. */
.li-price-currency[b-xaspxa2bot] {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
}
.li-currency-opt[b-xaspxa2bot] {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 6px 0;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: all 0.15s;
    font-family: "Sora", sans-serif;
}
.li-currency-opt input[type="radio"][b-xaspxa2bot] {
    /* Ocultamos el radio nativo — la pill custom hace toda la UI. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.li-currency-opt--active[b-xaspxa2bot] {
    background: #fff;
    color: var(--color-brand);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.li-currency-opt:hover:not(.li-currency-opt--active)[b-xaspxa2bot] { color: var(--color-text); }

/* Ambientes */
.li-amb-grid[b-xaspxa2bot] {
    display: flex; gap: 8px; flex-wrap: wrap;
}

.li-amb-btn[b-xaspxa2bot] {
    flex: 1; min-width: 44px;
    padding: 8px 0;
    border: 1.5px solid var(--color-border-soft); border-radius: 10px;
    background: #fff; color: var(--color-text-muted);
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    font-family: "Sora", sans-serif;
    text-align: center;
}

.li-amb-btn:hover[b-xaspxa2bot] { border-color: var(--color-brand); color: var(--color-brand); }
.li-amb-btn--active[b-xaspxa2bot] { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* Text inputs para filtros (ciudad, barrio) */
.li-text-input[b-xaspxa2bot] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border-soft);
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: "Sora", sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.li-text-input[b-xaspxa2bot]::placeholder { color: var(--color-text-disabled); font-weight: 500; }
.li-text-input:focus[b-xaspxa2bot] { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(13,148,136,0.14); }

/* Apply button */
.li-apply-btn[b-xaspxa2bot] {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    color: #fff; border: none; border-radius: 12px;
    font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
    display: none; /* shown only on mobile */
}

.li-apply-btn:hover[b-xaspxa2bot] { box-shadow: 0 6px 20px rgba(13,148,136,0.35); }

/* ── MAIN ── */
.li-main[b-xaspxa2bot] { min-height: 60vh; position: relative; }

/* Active filters */
.li-active-filters[b-xaspxa2bot] {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 20px;
}

.li-af-chip[b-xaspxa2bot] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--color-brand-bg); border: 1px solid var(--color-brand-pale);
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; color: var(--color-brand);
}

.li-af-chip button[b-xaspxa2bot] {
    background: none; border: none; cursor: pointer;
    color: var(--color-brand); font-size: 1rem; line-height: 1;
    padding: 0; transition: color 0.15s;
}

.li-af-chip button:hover[b-xaspxa2bot] { color: #b91c1c; }

/* Variante "Zona dibujada" — un poco más prominente porque la acción
   pesa: el filtro afecta el inventario completo, no un atributo. */
.li-af-chip--zona[b-xaspxa2bot] {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

.li-af-chip--zona button[b-xaspxa2bot] {
    color: rgba(255, 255, 255, 0.85);
}

.li-af-chip--zona button:hover[b-xaspxa2bot] { color: #fff; }

/* ── GRID ── */
.li-grid[b-xaspxa2bot] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── PROPERTY CARD ── */
.li-card[b-xaspxa2bot] {
    display: block; text-decoration: none;
    background: #fff; border-radius: 20px;
    overflow: hidden; border: 1px solid var(--color-border);
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.li-card:hover[b-xaspxa2bot] {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(15,23,42,0.11);
    border-color: #ccfbf1;
}

.li-card-img-wrap[b-xaspxa2bot] {
    position: relative; aspect-ratio: 4/3;
    background: #f1f5f9; overflow: hidden;
}

.li-card-img[b-xaspxa2bot] {
    width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.35s ease;
}

.li-card:hover .li-card-img[b-xaspxa2bot] { transform: scale(1.05); }

.li-card-no-img[b-xaspxa2bot] {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.li-card-badges[b-xaspxa2bot] {
    position: absolute; top: 10px; left: 10px;
    display: flex; gap: 6px;
}

.li-badge[b-xaspxa2bot] {
    font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px;
    padding: 4px 9px; border-radius: 999px;
}

.li-badge--avisos[b-xaspxa2bot] { background: linear-gradient(135deg,var(--color-brand),var(--color-brand-dark)); color: #fff; }
.li-badge--gold[b-xaspxa2bot] { background: linear-gradient(135deg,var(--color-warning),#d97706); color: #fff; }
.li-badge--teal[b-xaspxa2bot] { background: var(--color-brand); color: #fff; }

/* Badge "Catastro verificado" (Fase 2.1) — clickeable, lleva a /verificacion.
   Diseño levemente distinto al resto: fondo claro + borde teal sólido + escudo,
   para que se lea como "sello de confianza" y no como "tag descriptivo". */
.li-badge--verified[b-xaspxa2bot] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-brand-bg);
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brand);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.li-badge--verified:hover[b-xaspxa2bot] {
    background: #ccfbf1;
    transform: translateY(-1px);
}
.li-badge--verified svg[b-xaspxa2bot] { color: var(--color-brand); }

.li-card-tipo[b-xaspxa2bot] {
    position: absolute; bottom: 10px; left: 10px;
    font-size: 0.65rem; font-weight: 700;
    color: rgba(255,255,255,0.9);
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(4px);
    padding: 3px 9px; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.4px;
}

.li-card-body[b-xaspxa2bot] {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 5px;
}

.li-card-price[b-xaspxa2bot] {
    font-size: 1.2rem; font-weight: 900;
    color: var(--color-brand); letter-spacing: -0.5px;
}
.li-card-price__period[b-xaspxa2bot] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-disabled);
    margin-left: 4px;
    letter-spacing: 0;
}

/* Desglose mensual del alquiler: GC + tributos + total. Sólo se renderiza
   cuando hay al menos uno de los extras cargados. Look discreto pero claro. */
.li-card-breakdown[b-xaspxa2bot] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    margin-top: 6px;
    margin-bottom: 4px;
    background: rgba(13, 148, 136, 0.04);
    border: 1px solid rgba(13, 148, 136, 0.10);
    border-radius: 8px;
    font-size: 0.74rem;
}
.li-card-breakdown__row[b-xaspxa2bot] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.li-card-breakdown__row--total[b-xaspxa2bot] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed rgba(13, 148, 136, 0.18);
    color: var(--color-text);
    font-weight: 800;
}

.li-card-title[b-xaspxa2bot] {
    font-size: 0.9rem; font-weight: 700; color: var(--color-text); margin: 0;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.li-card-loc[b-xaspxa2bot] {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.75rem; color: var(--color-text-disabled);
}

.li-card-features[b-xaspxa2bot] {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}

.li-feat-chip[b-xaspxa2bot] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted);
    background: var(--color-bg); border: 1px solid var(--color-border);
    padding: 3px 8px; border-radius: 5px;
    line-height: 1;
}

.li-feat-chip svg[b-xaspxa2bot] { color: var(--color-text-disabled); flex-shrink: 0; }

.li-feat-chip--ok[b-xaspxa2bot] { color: var(--color-brand); background: var(--color-brand-bg); border-color: var(--color-brand-pale); }
.li-feat-chip--ok svg[b-xaspxa2bot] { color: var(--color-brand); }
.li-feat-chip--barrio[b-xaspxa2bot] { color: var(--color-text); background: #fff; border-color: var(--color-divider); font-weight: 700; }

/* ── SKELETON ── */
.li-card-skel[b-xaspxa2bot] { pointer-events: none; }

.li-skel-img[b-xaspxa2bot] {
    aspect-ratio: 4/3;
    background: linear-gradient(90deg,#f1f5f9 25%,var(--color-border-soft) 50%,#f1f5f9 75%);
    background-size: 200% 100%;
    animation: liSkel-b-xaspxa2bot 1.4s infinite ease-in-out;
}

.li-skel-line[b-xaspxa2bot] {
    height: 13px; border-radius: 6px;
    background: linear-gradient(90deg,#f1f5f9 25%,var(--color-border-soft) 50%,#f1f5f9 75%);
    background-size: 200% 100%;
    animation: liSkel-b-xaspxa2bot 1.4s infinite ease-in-out;
    margin: 7px 0;
}

.li-skel-short[b-xaspxa2bot] { width: 40%; }
.li-skel-mid[b-xaspxa2bot]   { width: 65%; }

@keyframes liSkel-b-xaspxa2bot {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── EMPTY ── */
.li-empty[b-xaspxa2bot] {
    display: flex; align-items: center; justify-content: center;
    min-height: 400px;
}

.li-empty-inner[b-xaspxa2bot] {
    text-align: center; max-width: 360px;
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
}

.li-empty-icon[b-xaspxa2bot] { font-size: 3rem; }

.li-empty-inner h3[b-xaspxa2bot] {
    font-size: 1.15rem; font-weight: 800; color: var(--color-text); margin: 0;
}

.li-empty-inner p[b-xaspxa2bot] {
    font-size: 0.88rem; color: var(--color-text-subtle); margin: 0; line-height: 1.5;
}

.li-clear-all-btn[b-xaspxa2bot] {
    padding: 10px 24px; border-radius: 10px;
    background: var(--color-brand); color: #fff;
    border: none; cursor: pointer;
    font-size: 0.85rem; font-weight: 700;
    font-family: "Sora", sans-serif;
    transition: background 0.2s;
}

.li-clear-all-btn:hover[b-xaspxa2bot] { background: var(--color-brand-dark); }

/* ── PHOTO COUNT ── */
.li-card-photos[b-xaspxa2bot] {
    position: absolute; bottom: 10px; right: 10px;
    font-size: 0.68rem; font-weight: 600;
    color: #fff;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
    padding: 3px 8px; border-radius: 5px;
    display: flex; align-items: center; gap: 4px;
}

/* ── PAGINATION ── */
.li-pagination[b-xaspxa2bot] {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 32px 0 16px; flex-wrap: wrap;
}

.li-page-btn[b-xaspxa2bot] {
    width: 38px; height: 38px;
    border: 1px solid var(--color-border-soft); border-radius: 10px;
    background: #fff; color: var(--color-text-muted);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "Inter", system-ui, sans-serif;
}

.li-page-btn:hover:not(:disabled)[b-xaspxa2bot] { border-color: var(--color-brand); color: var(--color-brand); }
.li-page-btn:disabled[b-xaspxa2bot] { opacity: 0.4; cursor: default; }

.li-page-btn--active[b-xaspxa2bot] {
    background: var(--color-brand); color: #fff; border-color: var(--color-brand);
}
.li-page-btn--active:hover[b-xaspxa2bot] { background: var(--color-brand-dark); color: #fff; }

.li-page-info[b-xaspxa2bot] {
    font-size: 0.8rem; color: var(--color-text-disabled); margin-left: 8px;
}

/* ── MOBILE FILTER BTN ── */
.li-mobile-filter-btn[b-xaspxa2bot] {
    display: none;
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 50;
    padding: 14px 32px; border-radius: 999px;
    background: var(--color-text); color: #fff;
    border: none; cursor: pointer;
    font-size: 0.9rem; font-weight: 700;
    font-family: "Sora", sans-serif;
    box-shadow: 0 8px 32px rgba(15,23,42,0.3);
    display: none; align-items: center; gap: 8px;
    transition: background 0.2s;
}

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
    .li-grid[b-xaspxa2bot] { grid-template-columns: repeat(2, 1fr); }
    .li-body[b-xaspxa2bot] { grid-template-columns: 250px 1fr; }
}

@media (max-width: 900px) {
    .li-body[b-xaspxa2bot] {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .li-sidebar[b-xaspxa2bot] {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 300px; z-index: 100;
        transform: translateX(-120%);
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        border-radius: 0 24px 24px 0;
        overflow-y: auto;
    }

    .li-sidebar--open[b-xaspxa2bot] { transform: translateX(0); }

    .li-apply-btn[b-xaspxa2bot] { display: block; }

    .li-mobile-filter-btn[b-xaspxa2bot] { display: flex; }

    .li-grid[b-xaspxa2bot] { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 540px) {
    .li-grid[b-xaspxa2bot] { grid-template-columns: 1fr; }
    .li-topbar[b-xaspxa2bot] { padding: 0 12px; }
}

/* Mobile (≤720px): reorganizar topbar para que toggle de vistas + sort entren sin overflow.
   En mobile la barra pasa de una sola línea horizontal a dos filas:
     1. Breadcrumb con el contador (Inicio / Inmuebles / Listado · 7 propiedades)
     2. Toggle de vistas (icon-only) + dropdown de sort, lado a lado y full width
   Antes el sort quedaba cortado por la derecha porque flex-wrap: wrap empujaba
   los toggles a una segunda fila pero el dropdown seguía solo en la primera. */
@media (max-width: 720px) {
    .li-topbar-inner[b-xaspxa2bot] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 0 12px;
    }
    .li-breadcrumb[b-xaspxa2bot] {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    .li-topbar-right[b-xaspxa2bot] {
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .li-sort[b-xaspxa2bot] {
        flex: 1;
        min-width: 0;
    }
    .li-sort select[b-xaspxa2bot] {
        width: 100%;
        padding: 8px 12px;
    }
    .li-view-toggle[b-xaspxa2bot] {
        flex-shrink: 0;
    }
}

/* Padding extra al final del listado en mobile para que el FAB de Filtros
   no tape el último card del scroll. Sin esto, al hacer scroll completo, las
   últimas propiedades quedan parcialmente cubiertas. */
@media (max-width: 900px) {
    .li-main[b-xaspxa2bot] {
        padding-bottom: 96px;
    }
}

/* ════════════════════════════════════════════════════
   VISTA: toggle Lista / Lista+Mapa / Mapa
   ════════════════════════════════════════════════════ */
.li-view-toggle[b-xaspxa2bot] {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.li-view-btn[b-xaspxa2bot] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: "Sora", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.li-view-btn:hover[b-xaspxa2bot] { color: var(--color-text); }

.li-view-btn--active[b-xaspxa2bot],
.li-view-btn--active:hover[b-xaspxa2bot] {
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.li-view-btn svg[b-xaspxa2bot] { color: currentColor; }

/* En mobile escondemos el texto y dejamos sólo el icono para no romper el layout */
@media (max-width: 720px) {
    .li-view-btn span[b-xaspxa2bot] { display: none; }
    .li-view-btn[b-xaspxa2bot] { padding: 7px 10px; }
}

/* ════════════════════════════════════════════════════
   LAYOUT SPLIT (Lista+Mapa) / MAPA
   ════════════════════════════════════════════════════ */

/* Body con tres columnas cuando hay mapa: sidebar + main + mapa.
   El sidebar mantiene 280px, el resto se reparte. */
.li-body--split[b-xaspxa2bot] {
    grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1.05fr);
}

/* En modo "mapa" puro: ocultamos las cards y el grid pasa a 2 columnas
   (sidebar + mapa). El .li-main queda con display:none — Grid no le asigna
   track, así que el mapa hereda todo el espacio restante. */
.li-body--mapa[b-xaspxa2bot] {
    grid-template-columns: 280px minmax(0, 1fr);
}

/* Cuando el mapa está visible, las cards usan grid de 2 cols para mantener
   tamaño legible en la columna más angosta. */
.li-body--split .li-grid[b-xaspxa2bot],
.li-body--mapa .li-grid[b-xaspxa2bot] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1280px) {
    .li-body--split .li-grid[b-xaspxa2bot],
    .li-body--mapa .li-grid[b-xaspxa2bot] {
        grid-template-columns: 1fr;
    }
}

/* Columna del mapa: sticky para que quede fijo al scrollear las cards.
   Le damos un height calculado al viewport menos navbar para que ocupe
   toda la altura visible. */
.li-mapa-col[b-xaspxa2bot] {
    position: sticky;
    top: 76px;
    height: calc(100vh - 96px);
    min-height: 540px;
    border-radius: 18px;
    overflow: hidden;
}

/* En modo lista la columna no se monta (Razor @if), pero por las dudas
   ocultamos su slot si llegara a quedar uno fantasma. */
.li-body--lista .li-mapa-col[b-xaspxa2bot] { display: none; }

/* Modo "mapa" puro: ocultamos las cards y dejamos el mapa enorme. La idea
   es que el mapa sea el protagonista; los pins y los popups dan el detalle.
   Si más adelante queremos un drawer con cards, vivirá acá. */
.li-body--mapa .li-main[b-xaspxa2bot] { display: none; }
.li-body--mapa .li-mapa-col[b-xaspxa2bot] {
    /* Sin sidebar de cards, el mapa puede aprovechar más alto */
    height: calc(100vh - 96px);
}

/* Highlight de card cuando el pin del mapa está hovered */
.li-card--hover[b-xaspxa2bot] {
    box-shadow: 0 0 0 2px var(--color-brand), 0 12px 28px -10px rgba(13, 148, 136, 0.32);
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    /* Tablet: el mapa pasa a la fila de abajo con altura fija. Sigue siendo
       útil pero no compite con las cards por ancho. */
    .li-body--split[b-xaspxa2bot],
    .li-body--mapa[b-xaspxa2bot] {
        grid-template-columns: 280px minmax(0, 1fr);
    }
    .li-mapa-col[b-xaspxa2bot] {
        grid-column: 1 / -1;
        position: relative;
        top: 0;
        height: 480px;
        min-height: 420px;
    }
    .li-body--mapa .li-main[b-xaspxa2bot] { display: block; }
}

@media (max-width: 720px) {
    .li-body--split[b-xaspxa2bot],
    .li-body--mapa[b-xaspxa2bot] {
        grid-template-columns: 1fr;
    }
    .li-mapa-col[b-xaspxa2bot] { height: 440px; }
}
/* /Components/Pages/Nuevo/Perfil.razor.rz.scp.css */
/* ======================================= */
/* LISTO CASAS - PERFIL PAGE              */
/* ======================================= */

.perfil-page[b-zy0yuz4fuh] {
    font-family: "Inter", system-ui, sans-serif;
    background: #f8fafc;
    min-height: calc(100vh - 64px);
}

/* ── Header ── */
.perfil-header[b-zy0yuz4fuh] {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 32px 24px;
}

.perfil-header-inner[b-zy0yuz4fuh] {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.perfil-avatar[b-zy0yuz4fuh] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0d9488;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.perfil-name[b-zy0yuz4fuh] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.3;
}

.perfil-email[b-zy0yuz4fuh] {
    font-size: 14px;
    color: var(--color-text-subtle);
    margin: 0;
}

/* ── Container layout ── */
.perfil-container[b-zy0yuz4fuh] {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Sidebar nav ── */
.perfil-sidebar[b-zy0yuz4fuh] {
    position: sticky;
    top: 96px;
}

.perfil-nav[b-zy0yuz4fuh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perfil-nav-item[b-zy0yuz4fuh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: "Inter", system-ui, sans-serif;
    width: 100%;
}

.perfil-nav-item:hover[b-zy0yuz4fuh] {
    background: #f1f5f9;
    color: #0f172a;
}

.perfil-nav-item.active[b-zy0yuz4fuh] {
    background: #f0fdfa;
    color: #0d9488;
    font-weight: 600;
}

.perfil-nav-item.active svg[b-zy0yuz4fuh] {
    color: #0d9488;
}

.perfil-nav-item svg[b-zy0yuz4fuh] {
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.perfil-nav-item:hover svg[b-zy0yuz4fuh] {
    color: #64748b;
}

.nav-danger[b-zy0yuz4fuh] {
    color: #ef4444;
}

.nav-danger svg[b-zy0yuz4fuh] {
    color: #ef4444;
}

.nav-danger:hover[b-zy0yuz4fuh] {
    background: #fef2f2;
    color: #dc2626;
}

.nav-danger:hover svg[b-zy0yuz4fuh] {
    color: #dc2626;
}

.nav-danger.active[b-zy0yuz4fuh] {
    background: #fef2f2;
    color: #dc2626;
}

.nav-logout[b-zy0yuz4fuh] {
    color: #64748b;
}

.nav-logout:hover[b-zy0yuz4fuh] {
    background: #f1f5f9;
    color: #334155;
}

.perfil-nav-divider[b-zy0yuz4fuh] {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
}

/* ── Cards ── */
.perfil-card[b-zy0yuz4fuh] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.perfil-card-title[b-zy0yuz4fuh] {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.perfil-card-subtitle[b-zy0yuz4fuh] {
    font-size: 14px;
    color: var(--color-text-subtle);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* ── Fields ── */
.perfil-fields[b-zy0yuz4fuh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.perfil-field[b-zy0yuz4fuh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.perfil-field-label[b-zy0yuz4fuh] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.perfil-field-value[b-zy0yuz4fuh] {
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
}

/* ── Config rows ── */
.config-row[b-zy0yuz4fuh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.config-row-info[b-zy0yuz4fuh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.config-row-title[b-zy0yuz4fuh] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.config-row-desc[b-zy0yuz4fuh] {
    font-size: 13px;
    color: var(--color-text-subtle);
}

/* ── Buttons ── */
.perfil-card-actions[b-zy0yuz4fuh] {
    padding-top: 4px;
}

.btn-teal[b-zy0yuz4fuh] {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: #0d9488;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: "Inter", system-ui, sans-serif;
}

.btn-teal:hover[b-zy0yuz4fuh] {
    background: #0f766e;
}

.btn-teal-outline[b-zy0yuz4fuh] {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: "Inter", system-ui, sans-serif;
}

.btn-teal-outline:hover[b-zy0yuz4fuh] {
    border-color: #0d9488;
    color: #0d9488;
}

/* ── Danger card ── */
.card-danger[b-zy0yuz4fuh] {
    border-color: rgba(239, 68, 68, 0.2);
}

.danger-title[b-zy0yuz4fuh] {
    color: #ef4444;
}

.btn-danger-outline[b-zy0yuz4fuh] {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid #ef4444;
    background: #fff;
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: "Inter", system-ui, sans-serif;
}

.btn-danger-outline:hover[b-zy0yuz4fuh] {
    background: #fef2f2;
}

.btn-danger[b-zy0yuz4fuh] {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: "Inter", system-ui, sans-serif;
}

.btn-danger:hover[b-zy0yuz4fuh] {
    background: #dc2626;
}

.baja-confirm[b-zy0yuz4fuh] {
    margin-top: 16px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 10px;
    padding: 20px;
}

.baja-confirm-text[b-zy0yuz4fuh] {
    font-size: 14px;
    font-weight: 600;
    color: #991b1b;
    margin: 0 0 14px;
}

.baja-confirm-actions[b-zy0yuz4fuh] {
    display: flex;
    gap: 10px;
}

.baja-message[b-zy0yuz4fuh] {
    margin-top: 14px;
    padding: 12px 16px;
    background: #d1fae5;
    border-radius: 10px;
    color: #065f46;
    font-size: 13px;
    font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .perfil-container[b-zy0yuz4fuh] {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }

    .perfil-sidebar[b-zy0yuz4fuh] {
        position: static;
    }

    .perfil-nav[b-zy0yuz4fuh] {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
    }

    .perfil-nav-item[b-zy0yuz4fuh] {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 13px;
    }

    .perfil-nav-divider[b-zy0yuz4fuh] {
        width: 1px;
        height: 24px;
        margin: 0 4px;
    }

    .perfil-header[b-zy0yuz4fuh] {
        padding: 24px 16px;
    }

    .perfil-avatar[b-zy0yuz4fuh] {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .perfil-name[b-zy0yuz4fuh] {
        font-size: 18px;
    }

    .perfil-card[b-zy0yuz4fuh] {
        padding: 20px;
    }

    .config-row[b-zy0yuz4fuh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .baja-confirm-actions[b-zy0yuz4fuh] {
        flex-direction: column;
    }
}
/* /Components/Pages/Nuevo/PropiedadAvisos.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────
   PropiedadAvisos — scoped styles
   Paleta: teal (#0d9488 / #0f766e / #f0fdfa) + slate
   ─────────────────────────────────────────────────────────── */

.pa-page[b-cdo9csq7ti] {
    min-height: 100vh;
    background: #f8fafc;
    padding-bottom: 80px;
}

/* ── Topbar / Breadcrumb ──────────────────────────────────── */
.pa-topbar[b-cdo9csq7ti] {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 0;
}
.pa-topbar-inner[b-cdo9csq7ti] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.pa-breadcrumb[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #64748b;
    flex-wrap: wrap;
}
.pa-breadcrumb a[b-cdo9csq7ti] {
    color: #0d9488;
    text-decoration: none;
    transition: color 0.15s;
}
.pa-breadcrumb a:hover[b-cdo9csq7ti] {
    color: #0f766e;
    text-decoration: underline;
}
.pa-breadcrumb span[b-cdo9csq7ti] {
    color: var(--color-text-subtle);
}

/* ── Loading ──────────────────────────────────────────────── */
.pa-loading[b-cdo9csq7ti] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 20px;
    gap: 16px;
    color: #64748b;
}
.pa-spinner[b-cdo9csq7ti] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: pa-spin-b-cdo9csq7ti 0.8s linear infinite;
}
@keyframes pa-spin-b-cdo9csq7ti { to { transform: rotate(360deg); } }

/* ── Empty ────────────────────────────────────────────────── */
.pa-empty[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
}
.pa-empty-inner[b-cdo9csq7ti] { text-align: center; }
.pa-empty-icon[b-cdo9csq7ti] {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
}
.pa-empty h3[b-cdo9csq7ti] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}
.pa-empty p[b-cdo9csq7ti] {
    color: #64748b;
    margin-bottom: 20px;
}
.pa-back-btn[b-cdo9csq7ti] {
    display: inline-block;
    padding: 10px 24px;
    background: #0d9488;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.pa-back-btn:hover[b-cdo9csq7ti] { background: #0f766e; }

/* ── HERO ─────────────────────────────────────────────────── */
.pa-hero[b-cdo9csq7ti] {
    background: linear-gradient(135deg, #042f2e 0%, #134e4a 60%, #0f766e 100%);
    padding: 48px 0 60px;
    position: relative;
    overflow: hidden;
}
.pa-hero[b-cdo9csq7ti]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(94,234,212,0.08), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(13,148,136,0.12), transparent 45%);
    pointer-events: none;
}
.pa-hero-inner[b-cdo9csq7ti] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.pa-hero-left[b-cdo9csq7ti] { min-width: 0; }

/* Tag row (type + operation chips) */
.pa-tag-row[b-cdo9csq7ti] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.pa-tipo-chip[b-cdo9csq7ti] {
    background: rgba(255,255,255,0.14);
    color: #e6fffa;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.pa-op-chip[b-cdo9csq7ti] {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pa-op-chip--venta[b-cdo9csq7ti] {
    background: #10b981;
    color: white;
    box-shadow: 0 2px 8px rgba(16,185,129,0.35);
}
.pa-op-chip--alquiler[b-cdo9csq7ti] {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.pa-op-chip--gold[b-cdo9csq7ti] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    box-shadow: 0 2px 8px rgba(251,191,36,0.4);
}

.pa-title[b-cdo9csq7ti] {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.pa-location[b-cdo9csq7ti] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #99f6e4;
    font-size: 0.95rem;
    margin-bottom: 10px;
}
.pa-location em[b-cdo9csq7ti] {
    color: var(--color-text-subtle);
    font-style: italic;
}

.pa-edificio[b-cdo9csq7ti] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-subtle);
    font-size: 0.85rem;
    background: rgba(255,255,255,0.06);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    margin-left: 0;
}

/* Quick stats row */
.pa-quick-stats[b-cdo9csq7ti] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.pa-stat[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-subtle);
    font-size: 0.9rem;
}
.pa-stat svg[b-cdo9csq7ti] { color: #5eead4; flex-shrink: 0; }
.pa-stat strong[b-cdo9csq7ti] { color: white; font-weight: 700; }

/* Hero right (price box) */
.pa-hero-right[b-cdo9csq7ti] {
    background: linear-gradient(155deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 24px 26px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pa-price-label[b-cdo9csq7ti] {
    display: inline-block;
    color: #99f6e4;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.pa-price-label--alt[b-cdo9csq7ti] { color: var(--color-text-subtle); }

/* Rango de precios (varios avisos) → layout en 2 filas claras */
.pa-price-range[b-cdo9csq7ti] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pa-price-row[b-cdo9csq7ti] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pa-price-row:first-child .pa-price-amount[b-cdo9csq7ti] {
    font-size: 1.75rem;
    color: #5eead4;
}
.pa-price-row:last-child .pa-price-amount[b-cdo9csq7ti] {
    font-size: 1.15rem;
    color: #e0f2fe;
    font-weight: 700;
}

/* Precio único (un solo aviso) */
.pa-price--single[b-cdo9csq7ti] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pa-price--single .pa-price-amount[b-cdo9csq7ti] {
    color: #5eead4;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.pa-price-amount[b-cdo9csq7ti] {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.3px;
    display: block;
}

/* Compatibilidad con clases legacy (por si quedan referencias) */
.pa-price[b-cdo9csq7ti] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pa-price-min[b-cdo9csq7ti] { color: #5eead4; }
.pa-price-max[b-cdo9csq7ti] { color: #e0f2fe; }
.pa-price-dash[b-cdo9csq7ti] { color: #99f6e4; font-weight: 400; }

.pa-avisos-count-hero[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-subtle);
    font-size: 0.82rem;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    line-height: 1.4;
}
.pa-avisos-count-text[b-cdo9csq7ti] { flex: 1; }
.pa-avisos-count-hero strong[b-cdo9csq7ti] {
    color: #fbbf24;
    font-weight: 700;
}
.pa-dot[b-cdo9csq7ti] {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    animation: pa-pulse-b-cdo9csq7ti 2s ease-in-out infinite;
}
@keyframes pa-pulse-b-cdo9csq7ti {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.08); }
}

/* ── GALLERY ──────────────────────────────────────────────── */
.pa-gallery[b-cdo9csq7ti] {
    max-width: 1200px;
    margin: -30px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}
.pa-gallery-grid[b-cdo9csq7ti] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2,6,23,0.15);
    background: white;
}
/* Modificador: una sola imagen → grilla de una columna (evita el cuadrado
   blanco vacío a la derecha donde irían las miniaturas). */
.pa-gallery-grid--single[b-cdo9csq7ti] {
    grid-template-columns: 1fr;
}
.pa-gallery-grid--single .pa-gallery-main img[b-cdo9csq7ti] {
    height: 420px;
    object-fit: cover;
    object-position: center;
}
.pa-gallery-main[b-cdo9csq7ti] {
    overflow: hidden;
    position: relative;
}
.pa-gallery-main img[b-cdo9csq7ti] {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.pa-gallery-main:hover img[b-cdo9csq7ti] { transform: scale(1.02); }

.pa-gallery-side[b-cdo9csq7ti] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}
.pa-gallery-thumb[b-cdo9csq7ti] {
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
}
.pa-gallery-thumb img[b-cdo9csq7ti] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.pa-gallery-thumb:hover img[b-cdo9csq7ti] { transform: scale(1.05); }

.pa-gallery-more[b-cdo9csq7ti] {
    position: relative;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.2s;
}
.pa-gallery-more:hover[b-cdo9csq7ti] { filter: brightness(1.1); }
.pa-gallery-more span[b-cdo9csq7ti] { text-align: center; padding: 10px; }

/* ── SECTIONS ─────────────────────────────────────────────── */
.pa-section[b-cdo9csq7ti] {
    max-width: 1200px;
    margin: 48px auto 0;
    padding: 0 24px;
}
.pa-section-title[b-cdo9csq7ti] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
}
.pa-section-title svg[b-cdo9csq7ti] { color: #0d9488; flex-shrink: 0; }
.pa-section-sub[b-cdo9csq7ti] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 20px;
}

/* Section header with sort */
.pa-section-hdr[b-cdo9csq7ti] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pa-sort-wrap[b-cdo9csq7ti] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.pa-sort-label[b-cdo9csq7ti] {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}
.pa-sort-select[b-cdo9csq7ti] {
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    outline: none;
    padding: 4px 2px;
}
.pa-sort-select:focus[b-cdo9csq7ti] { color: #0d9488; }

/* ── AMENITIES ────────────────────────────────────────────── */
.pa-amenities-grid[b-cdo9csq7ti] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}
.pa-amenity[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 10px;
    transition: background 0.15s, transform 0.15s;
}
.pa-amenity:hover[b-cdo9csq7ti] {
    background: #ccfbf1;
    transform: translateY(-1px);
}
.pa-amenity-icon[b-cdo9csq7ti] {
    font-size: 1.15rem;
    flex-shrink: 0;
}
.pa-amenity-text[b-cdo9csq7ti] {
    font-size: 0.87rem;
    font-weight: 600;
    color: #0f172a;
}

/* ── AVISOS GRID ──────────────────────────────────────────── */
.pa-avisos-grid[b-cdo9csq7ti] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.pa-aviso-card[b-cdo9csq7ti] {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
    display: flex;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    border: 1px solid #e2e8f0;
}
.pa-aviso-card:hover[b-cdo9csq7ti] {
    box-shadow: 0 8px 24px rgba(15,23,42,0.1);
    transform: translateY(-2px);
    border-color: #5eead4;
}

.pa-aviso-img-wrap[b-cdo9csq7ti] {
    width: 300px;
    min-height: 220px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
}
.pa-aviso-img[b-cdo9csq7ti] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.pa-aviso-card:hover .pa-aviso-img[b-cdo9csq7ti] { transform: scale(1.04); }

.pa-aviso-no-img[b-cdo9csq7ti] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.pa-aviso-op-badge[b-cdo9csq7ti] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}
.pa-op-venta[b-cdo9csq7ti]    { background: #10b981; }
.pa-op-alquiler[b-cdo9csq7ti] { background: #3b82f6; }

.pa-aviso-destacado-badge[b-cdo9csq7ti] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-weight: 900;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(251,191,36,0.4);
    font-size: 0.9rem;
}

.pa-aviso-body[b-cdo9csq7ti] {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Publisher block — destacado */
.pa-aviso-publisher[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 10px;
    margin-bottom: 14px;
}
.pa-aviso-avatar[b-cdo9csq7ti] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(13,148,136,0.35);
}
/* Variante cuando la inmobiliaria tiene logo: reemplaza el gradient por la imagen. */
.pa-aviso-avatar--img[b-cdo9csq7ti] {
    background: white;
    object-fit: cover;
    object-position: center;
    border: 1px solid #e2e8f0;
    padding: 2px;
}
.pa-aviso-publisher-info[b-cdo9csq7ti] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pa-aviso-publisher-label[b-cdo9csq7ti] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pa-aviso-publisher-name[b-cdo9csq7ti] {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-aviso-price[b-cdo9csq7ti] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.pa-aviso-price-value[b-cdo9csq7ti] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0d9488;
    letter-spacing: -0.3px;
}
.pa-aviso-price-period[b-cdo9csq7ti] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.pa-aviso-title[b-cdo9csq7ti] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pa-aviso-desc[b-cdo9csq7ti] {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pa-aviso-meta[b-cdo9csq7ti] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pa-aviso-date[b-cdo9csq7ti] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-subtle);
    font-size: 0.78rem;
}

/* Actions */
.pa-aviso-actions[b-cdo9csq7ti] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pa-aviso-btn[b-cdo9csq7ti] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.87rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}
.pa-aviso-btn--primary[b-cdo9csq7ti] {
    background: #0d9488;
    color: white;
}
.pa-aviso-btn--primary:hover[b-cdo9csq7ti] {
    background: #0f766e;
    color: white;
}
.pa-aviso-btn--ghost[b-cdo9csq7ti] {
    background: transparent;
    color: #0d9488;
    border-color: #0d9488;
}
.pa-aviso-btn--ghost:hover[b-cdo9csq7ti] {
    background: #f0fdfa;
    color: #0f766e;
    border-color: #0f766e;
}

/* ── HELP / TRUST ────────────────────────────────────────── */
.pa-help[b-cdo9csq7ti] {
    max-width: 1200px;
    margin: 48px auto 0;
    padding: 0 24px;
}
.pa-help-inner[b-cdo9csq7ti] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-left: 4px solid #0d9488;
    border-radius: 12px;
    padding: 18px 20px;
}
.pa-help-ico[b-cdo9csq7ti] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #0d9488;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pa-help-text strong[b-cdo9csq7ti] {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.pa-help-text p[b-cdo9csq7ti] {
    color: #475569;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.5;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 960px) {
    .pa-hero-inner[b-cdo9csq7ti] {
        grid-template-columns: 1fr;
    }
    .pa-hero-right[b-cdo9csq7ti] {
        max-width: 100%;
    }
    .pa-gallery-grid[b-cdo9csq7ti] {
        grid-template-columns: 1fr;
    }
    .pa-gallery-main img[b-cdo9csq7ti] { height: 320px; }
    .pa-gallery-side[b-cdo9csq7ti] {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 90px;
    }
}

@media (max-width: 768px) {
    .pa-hero[b-cdo9csq7ti] { padding: 32px 0 48px; }
    .pa-title[b-cdo9csq7ti] { font-size: 1.5rem; }
    .pa-price[b-cdo9csq7ti] { font-size: 1.4rem; }
    .pa-section[b-cdo9csq7ti] { margin-top: 36px; }
    .pa-section-hdr[b-cdo9csq7ti] {
        flex-direction: column;
        align-items: flex-start;
    }
    .pa-aviso-card[b-cdo9csq7ti] { flex-direction: column; }
    .pa-aviso-img-wrap[b-cdo9csq7ti] {
        width: 100%;
        height: 220px;
        min-height: unset;
    }
    .pa-gallery-main img[b-cdo9csq7ti] { height: 240px; }
    .pa-gallery-side[b-cdo9csq7ti] {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 70px;
    }
    .pa-amenities-grid[b-cdo9csq7ti] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .pa-title[b-cdo9csq7ti] { font-size: 1.3rem; }
    .pa-quick-stats[b-cdo9csq7ti] { gap: 12px; }
    .pa-stat[b-cdo9csq7ti] { font-size: 0.82rem; }
    .pa-aviso-btn[b-cdo9csq7ti] { flex: 1; justify-content: center; }
    .pa-gallery-side[b-cdo9csq7ti] {
        grid-template-columns: repeat(3, 1fr);
    }
    .pa-gallery-side > :nth-child(n+4)[b-cdo9csq7ti] { display: none; }
}
/* /Components/Pages/Nuevo/VenderInmuebles.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   VenderInmuebles — Scoped Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO (paso 0) ── */
.vi-hero[b-oulvmm82x8] {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-family: "Sora", sans-serif;
    position: relative; overflow: hidden;
}

/* Orbes decorativos para look premium */
.vi-hero-orbs[b-oulvmm82x8] { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vi-orb[b-oulvmm82x8] { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; animation: vi-float-b-oulvmm82x8 14s ease-in-out infinite; }
.vi-orb-1[b-oulvmm82x8] { width: 380px; height: 380px; background: #14b8a6; top: -120px; right: -120px; }
.vi-orb-2[b-oulvmm82x8] { width: 280px; height: 280px; background: #2dd4bf; bottom: -100px; left: -80px; animation-delay: -7s; }
@keyframes vi-float-b-oulvmm82x8 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}

.vi-hero-inner[b-oulvmm82x8] {
    max-width: 680px; padding: 32px;
    position: relative; z-index: 1;
}

.vi-hero-badge[b-oulvmm82x8] {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.95);
    padding: 7px 18px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 28px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
}

/* Pulse verde indicando "live" */
.vi-pulse[b-oulvmm82x8] {
    width: 8px; height: 8px; border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 0 0 rgba(94,234,212,0.7);
    animation: vi-pulse-b-oulvmm82x8 2s infinite;
}
@keyframes vi-pulse-b-oulvmm82x8 {
    0% { box-shadow: 0 0 0 0 rgba(94,234,212,0.7); }
    70% { box-shadow: 0 0 0 8px rgba(94,234,212,0); }
    100% { box-shadow: 0 0 0 0 rgba(94,234,212,0); }
}

.vi-hero-title[b-oulvmm82x8] {
    font-size: clamp(2.6rem, 5.5vw, 4rem); font-weight: 900;
    color: #fff; line-height: 1.05; margin: 0 0 18px;
    letter-spacing: -1.5px;
}

/* Acento de la segunda línea del título */
.vi-hero-accent[b-oulvmm82x8] {
    background: linear-gradient(120deg, #5eead4 0%, #2dd4bf 50%, #99f6e4 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.vi-hero-sub[b-oulvmm82x8] {
    font-size: 1.05rem; color: rgba(255,255,255,0.75);
    margin: 0 0 32px; line-height: 1.5;
}

.vi-hero-stats[b-oulvmm82x8] {
    display: flex; align-items: center; justify-content: center; gap: 0;
    margin-bottom: 36px;
}

.vi-stat[b-oulvmm82x8] {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 24px;
}

.vi-stat-num[b-oulvmm82x8] { font-size: 1.5rem; font-weight: 900; color: #5eead4; }
.vi-stat-lbl[b-oulvmm82x8] { font-size: 0.72rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; }
.vi-stat-sep[b-oulvmm82x8] { width: 1px; height: 40px; background: rgba(255,255,255,0.15); }

.vi-hero-cta[b-oulvmm82x8] {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff; border: none; cursor: pointer;
    padding: 16px 40px; border-radius: 16px;
    font-size: 1rem; font-weight: 800;
    font-family: "Sora", sans-serif;
    transition: all 0.25s;
    box-shadow: 0 8px 32px rgba(13,148,136,0.4);
}

.vi-hero-cta:hover[b-oulvmm82x8] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(13,148,136,0.5);
}

/* Trust badges debajo del CTA */
.vi-hero-trust[b-oulvmm82x8] {
    display: flex; align-items: center; justify-content: center;
    gap: 22px; flex-wrap: wrap; margin-top: 28px;
}
.vi-trust-item[b-oulvmm82x8] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.74rem; font-weight: 600;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.2px;
}
.vi-trust-item svg[b-oulvmm82x8] { color: #5eead4; }

/* ── SELECTOR (paso 1) ── */
.vi-selector-page[b-oulvmm82x8] {
    min-height: 100vh;
    font-family: "Sora", sans-serif;
    background: #f8fafc;
}

.vi-selector-hero[b-oulvmm82x8] {
    padding: 48px 32px 56px;
    text-align: center;
}

.vi-selector-hero-inner[b-oulvmm82x8] {
    max-width: 620px; margin: 0 auto;
}

.vi-selector-hero-inner h1[b-oulvmm82x8] {
    font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900;
    color: #fff; margin: 16px 0 8px;
}

.vi-selector-hero-inner p[b-oulvmm82x8] {
    font-size: 1rem; color: rgba(255,255,255,0.7); margin: 0;
}

.vi-selector-body[b-oulvmm82x8] {
    /* Antes: margin-top -28px que solapaba los botones Venta/Alquiler con el hero.
       Ahora: separación clara para que la fila "Operación" respire bajo el hero. */
    max-width: 720px; margin: 32px auto 0; padding: 0 24px 64px;
    position: relative; z-index: 2;
}

/* Operación */
.vi-op-row[b-oulvmm82x8] { margin-bottom: 8px; }
.vi-op-label[b-oulvmm82x8] {
    font-size: 0.82rem; font-weight: 800; color: #334155;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.vi-op-btns[b-oulvmm82x8] {
    display: flex; gap: 12px;
}

.vi-op-btn[b-oulvmm82x8] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px; border-radius: 16px;
    background: #fff; border: 2px solid #e2e8f0;
    font-size: 0.95rem; font-weight: 700; color: #475569;
    cursor: pointer; transition: all 0.2s;
    font-family: "Sora", sans-serif;
}

.vi-op-btn:hover[b-oulvmm82x8] { border-color: #0d9488; color: #0d9488; }

.vi-op-btn.active[b-oulvmm82x8] {
    border-color: #0d9488; background: #f0fdfa; color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
}

/* Type grid */
.vi-type-grid[b-oulvmm82x8] {
    display: grid; grid-template-columns: 1fr; gap: 10px;
}

.vi-type-card[b-oulvmm82x8] {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px; border-radius: 16px;
    background: #fff; border: 2px solid #e2e8f0;
    cursor: pointer; transition: all 0.2s;
    text-align: left;
    font-family: "Sora", sans-serif;
}

.vi-type-card:hover[b-oulvmm82x8] { border-color: #0d9488; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.vi-type-card.active[b-oulvmm82x8] {
    border-color: #0d9488; background: #f0fdfa;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
}

.vi-type-icon[b-oulvmm82x8] { color: #0d9488; flex-shrink: 0; }
.vi-type-card.active .vi-type-icon[b-oulvmm82x8] { color: #0f766e; }

.vi-type-info[b-oulvmm82x8] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vi-type-name[b-oulvmm82x8] { font-size: 0.95rem; font-weight: 800; color: #0f172a; }
.vi-type-desc[b-oulvmm82x8] { font-size: 0.78rem; color: #64748b; }

.vi-type-arrow[b-oulvmm82x8] { color: var(--color-text-subtle); transition: all 0.2s; }
.vi-type-card:hover .vi-type-arrow[b-oulvmm82x8],
.vi-type-card.active .vi-type-arrow[b-oulvmm82x8] { color: #0d9488; transform: translateX(3px); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .vi-hero-stats[b-oulvmm82x8] { flex-direction: column; gap: 16px; }
    .vi-stat-sep[b-oulvmm82x8] { width: 40px; height: 1px; }
    .vi-op-btns[b-oulvmm82x8] { flex-direction: column; }
    .vi-selector-body[b-oulvmm82x8] { padding: 0 16px 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FORM STYLES (vp-* classes — duplicated from VenderAutos because
   Blazor scoped CSS does not share between components)
   ═══════════════════════════════════════════════════════════════════ */

.vp-form-page[b-oulvmm82x8] { background: #f8fafc; min-height: 100vh; font-family: "Sora", sans-serif; }
.vp-form-col[b-oulvmm82x8] { display: flex; flex-direction: column; gap: 0; }

.vp-form-hero[b-oulvmm82x8] { color: #fff; padding: 32px 0 28px; }
.vp-form-hero-inner[b-oulvmm82x8] { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.vp-back-btn[b-oulvmm82x8] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; border: 1.5px solid rgba(255,255,255,0.22); border-radius: 8px;
    color: rgba(255,255,255,0.80); background: transparent;
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; margin-bottom: 16px;
}
.vp-back-btn:hover[b-oulvmm82x8] { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.40); }

.vp-form-hero-content[b-oulvmm82x8] { margin-bottom: 24px; }
.vp-form-cat-badge[b-oulvmm82x8] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; background: rgba(255,255,255,0.15); border-radius: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 10px; backdrop-filter: blur(4px);
}
.vp-form-hero-content h1[b-oulvmm82x8] { font-size: clamp(22px, 3vw, 34px); font-weight: 800; margin: 0 0 6px; letter-spacing: -0.5px; }
.vp-form-hero-content p[b-oulvmm82x8] { font-size: 14px; opacity: 0.65; margin: 0; }

/* Stepper */
.vp-stepper[b-oulvmm82x8] { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.vp-stepper[b-oulvmm82x8]::-webkit-scrollbar { display: none; }
.vp-step[b-oulvmm82x8] { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.vp-step-dot[b-oulvmm82x8] {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.50); background: transparent;
    transition: all 0.2s; flex-shrink: 0;
}
.vp-step--active .vp-step-dot[b-oulvmm82x8] { border-color: #fff; color: #fff; background: rgba(255,255,255,0.18); }
.vp-step--done .vp-step-dot[b-oulvmm82x8] { border-color: #22c55e; background: #22c55e; color: #fff; }
.vp-step-lbl[b-oulvmm82x8] { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); transition: color 0.2s; }
.vp-step--active .vp-step-lbl[b-oulvmm82x8] { color: #fff; }
.vp-step--done .vp-step-lbl[b-oulvmm82x8] { color: rgba(255,255,255,0.65); }
.vp-step-line[b-oulvmm82x8] { height: 2px; width: 32px; background: rgba(255,255,255,0.20); flex-shrink: 0; margin: 0 4px; border-radius: 2px; transition: background 0.2s; }
.vp-step-line.done[b-oulvmm82x8] { background: #22c55e; }

/* Body grid */
.vp-body[b-oulvmm82x8] { max-width: 1240px; margin: 0 auto; padding: 32px 32px 80px; display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }

/* Alerts */
.vp-alert[b-oulvmm82x8] { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
.vp-alert--success[b-oulvmm82x8] { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.vp-alert--error[b-oulvmm82x8] { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* Accordion sections */
.vp-section[b-oulvmm82x8] {
    background: #fff;
    border: 1.5px solid #eef2f7;
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
}
.vp-section[b-oulvmm82x8]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, #0d9488, #5eead4);
    transform: scaleY(0); transform-origin: top;
    transition: transform 0.25s ease;
}
.vp-section--open[b-oulvmm82x8] { border-color: #e2e8f0; box-shadow: 0 8px 28px rgba(15,23,42,0.07); transform: translateY(-1px); }
.vp-section--open[b-oulvmm82x8]::before { transform: scaleY(1); }
.vp-section-hdr[b-oulvmm82x8] { width: 100%; display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.12s; }
.vp-section-hdr:hover[b-oulvmm82x8] { background: #fafbfc; }
.vp-sec-num[b-oulvmm82x8] { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid #e2e8f0; color: var(--color-text-subtle); flex-shrink: 0; transition: all 0.15s; }
.vp-sec-num.cur[b-oulvmm82x8] { border-color: #0d9488; color: #0d9488; background: #f0fdfa; }
.vp-sec-num.done[b-oulvmm82x8] { border-color: #22c55e; background: #22c55e; color: #fff; }
.vp-sec-txt[b-oulvmm82x8] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vp-sec-txt strong[b-oulvmm82x8] { font-size: 14px; font-weight: 700; color: #1e293b; }
.vp-sec-txt span[b-oulvmm82x8] { font-size: 12px; color: var(--color-text-subtle); }
.vp-chevron[b-oulvmm82x8] { color: var(--color-text-subtle); transition: transform 0.2s; flex-shrink: 0; }
.vp-chevron.open[b-oulvmm82x8] { transform: rotate(180deg); }
.vp-section-body[b-oulvmm82x8] { padding: 4px 20px 22px; border-top: 1px solid #f1f5f9; }

/* Fields */
.vp-field[b-oulvmm82x8] { display: flex; flex-direction: column; gap: 6px; }
.vp-lbl[b-oulvmm82x8] { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 8px; }
.vp-req[b-oulvmm82x8] { color: #ef4444; margin-left: 2px; }
/* Badge "PLATINUM" al lado del label del campo de video.
   Gradient violeta/dorado — lo usa el input de VideoUrl que sólo aparece
   si el dueño tiene plan Platinum. */
.vp-platinum-tag[b-oulvmm82x8] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #c084fc);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.vp-input[b-oulvmm82x8], .vp-select[b-oulvmm82x8], .vp-textarea[b-oulvmm82x8] {
    width: 100%; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: 13px; color: #1e293b; background: #f8fafc; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; font-family: inherit;
}
.vp-input:focus[b-oulvmm82x8], .vp-select:focus[b-oulvmm82x8], .vp-textarea:focus[b-oulvmm82x8] { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.10); background: #fff; }
.vp-select[b-oulvmm82x8] {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.vp-textarea[b-oulvmm82x8] { resize: vertical; min-height: 110px; }
.vp-hint[b-oulvmm82x8] { font-size: 11px; color: var(--color-text-subtle); }
.vp-req-hint[b-oulvmm82x8] { font-size: 11px; color: #ef4444; margin-top: 4px; }
.vp-fields-grid[b-oulvmm82x8] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 8px; }

/* Upload */
.vp-upload[b-oulvmm82x8] { display: block; border: 2px dashed #e2e8f0; border-radius: 12px; cursor: pointer; overflow: hidden; margin-top: 16px; position: relative; transition: border-color 0.15s, background 0.15s; }
.vp-upload:hover[b-oulvmm82x8] { border-color: #5eead4; background: #f8fafc; }
.vp-upload.has-img[b-oulvmm82x8] { border-style: solid; border-color: #e2e8f0; }
.vp-upload input[b-oulvmm82x8] { display: none; }
.vp-upload-ph[b-oulvmm82x8] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--color-text-subtle); }
.vp-upload-lbl[b-oulvmm82x8] { font-size: 14px; font-weight: 600; color: #475569; }
.vp-upload-hint[b-oulvmm82x8] { font-size: 12px; }
.vp-upload-img[b-oulvmm82x8] { width: 100%; height: 260px; object-fit: cover; display: block; }
.vp-upload-ov[b-oulvmm82x8] { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; color: #fff; font-size: 13px; font-weight: 600; transition: opacity 0.2s; }
.vp-upload:hover .vp-upload-ov[b-oulvmm82x8] { opacity: 1; }
.vp-strip[b-oulvmm82x8] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vp-strip-item[b-oulvmm82x8] { position: relative; }
.vp-strip-btn[b-oulvmm82x8] { display: block; width: 72px; height: 72px; border-radius: 8px; border: 2px solid #e2e8f0; overflow: hidden; cursor: pointer; padding: 0; background: none; position: relative; transition: border-color 0.15s; }
.vp-strip-btn img[b-oulvmm82x8] { width: 100%; height: 100%; object-fit: cover; }
.vp-strip-btn.active[b-oulvmm82x8] { border-color: #0d9488; }
.vp-strip-lbl[b-oulvmm82x8] { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(13,148,136,0.85); color: #fff; font-size: 9px; font-weight: 700; text-align: center; padding: 2px; }
.vp-strip-del[b-oulvmm82x8] { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: #fff; border: none; cursor: pointer; font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.vp-strip-del:hover[b-oulvmm82x8] { background: #dc2626; }

/* Price */
.vp-price-row[b-oulvmm82x8] { display: flex; align-items: stretch; border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 8px; }
.vp-currency[b-oulvmm82x8] { padding: 0 14px; border: none; border-right: 1.5px solid #e2e8f0; background: #f1f5f9; font-size: 13px; font-weight: 700; color: #1e293b; cursor: pointer; outline: none; min-width: 90px; appearance: none; -webkit-appearance: none; }
.vp-price-field[b-oulvmm82x8] { flex: 1; display: flex; align-items: center; padding: 0 14px; gap: 8px; background: #fff; }
.vp-price-sign[b-oulvmm82x8] { font-size: 16px; font-weight: 700; color: #475569; }
.vp-price-input[b-oulvmm82x8] { flex: 1; border: none; background: none; font-size: 22px; font-weight: 800; color: #0f172a; outline: none; padding: 12px 0; font-family: inherit; }
.vp-price-tag[b-oulvmm82x8] { font-size: 12px; font-weight: 700; color: var(--color-text-subtle); }

/* Navigation */
.vp-sec-nav[b-oulvmm82x8] { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.vp-btn-next[b-oulvmm82x8] { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; background: #0d9488; color: #fff; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.vp-btn-next:hover[b-oulvmm82x8] { background: #0f766e; transform: translateY(-1px); }
.vp-btn-prev[b-oulvmm82x8] { background: none; border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.15s; }
.vp-btn-prev:hover[b-oulvmm82x8] { border-color: var(--color-text-subtle); color: #1e293b; background: #f8fafc; }

/* AI Buttons */
.vp-btn-ai[b-oulvmm82x8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    letter-spacing: 0.02em;
}
.vp-btn-ai:hover[b-oulvmm82x8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.45);
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
}
.vp-btn-ai:active[b-oulvmm82x8] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.3);
}
.vp-btn-ai:disabled[b-oulvmm82x8] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.vp-btn-ai svg[b-oulvmm82x8] {
    flex-shrink: 0;
}

/* Submit */
.vp-submit[b-oulvmm82x8] { text-align: center; padding: 24px 0 8px; }
.vp-btn-publish[b-oulvmm82x8] {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 42px; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 800;
    cursor: pointer; transition: all 0.18s; box-shadow: 0 4px 20px rgba(13,148,136,0.30); letter-spacing: 0.02em;
}
.vp-btn-publish:hover[b-oulvmm82x8] { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(13,148,136,0.38); }
.vp-btn-publish.disabled[b-oulvmm82x8], .vp-btn-publish:disabled[b-oulvmm82x8] { background: #e2e8f0; color: var(--color-text-subtle); cursor: not-allowed; box-shadow: none; transform: none; }
.vp-spin[b-oulvmm82x8] { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: vp-spin-b-oulvmm82x8 0.7s linear infinite; }
@keyframes vp-spin-b-oulvmm82x8 { to { transform: rotate(360deg); } }
.vp-legal[b-oulvmm82x8] { font-size: 11px; color: var(--color-text-subtle); margin-top: 12px; }
.vp-legal a[b-oulvmm82x8] { color: #64748b; text-decoration: underline; }

/* Preview column */
.vp-preview-col[b-oulvmm82x8] { position: relative; }
.vp-preview-sticky[b-oulvmm82x8] { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* Tarjeta de progreso (nueva) */
.vp-progress-card[b-oulvmm82x8] {
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
    border: 1.5px solid #99f6e4;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(13,148,136,0.08);
}
.vp-progress-head[b-oulvmm82x8] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vp-progress-lbl[b-oulvmm82x8] { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.08em; }
.vp-progress-pct[b-oulvmm82x8] { font-size: 16px; font-weight: 900; color: #0d9488; letter-spacing: -0.3px; }
.vp-progress-bar[b-oulvmm82x8] { width: 100%; height: 6px; background: #ccfbf1; border-radius: 999px; overflow: hidden; }
.vp-progress-fill[b-oulvmm82x8] { height: 100%; background: linear-gradient(90deg, #0d9488 0%, #14b8a6 50%, #5eead4 100%); border-radius: 999px; transition: width 0.4s ease; }
.vp-progress-hint[b-oulvmm82x8] { font-size: 11px; color: #64748b; margin: 8px 0 0; }

.vp-preview-title[b-oulvmm82x8] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--color-text-subtle); margin: 4px 0 0; }
.vp-preview-card[b-oulvmm82x8] {
    background: #fff;
    border: 1.5px solid #e8edf3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(15,23,42,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vp-preview-card:hover[b-oulvmm82x8] { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,23,42,0.10); }
.vp-preview-img[b-oulvmm82x8] { position: relative; aspect-ratio: 4/3; background: #f1f5f9; overflow: hidden; }
.vp-preview-img img[b-oulvmm82x8] { width: 100%; height: 100%; object-fit: cover; }
.vp-preview-no-img[b-oulvmm82x8] { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-subtle); font-size: 12px; }
/* Badge flotante con la categoría sobre la imagen */
.vp-prev-floating[b-oulvmm82x8] {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 6px;
    background: rgba(15,23,42,0.65); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; backdrop-filter: blur(6px);
}
.vp-preview-body[b-oulvmm82x8] { padding: 14px 16px 16px; }
.vp-prev-cat[b-oulvmm82x8] { font-size: 10px; font-weight: 700; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; }
.vp-prev-title[b-oulvmm82x8] { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 5px; line-height: 1.3; }
.vp-prev-desc[b-oulvmm82x8] { font-size: 12px; color: #475569; line-height: 1.5; margin: 0 0 12px; }
.vp-prev-empty[b-oulvmm82x8] { color: var(--color-text-subtle); font-style: italic; }
.vp-prev-price[b-oulvmm82x8] { font-size: 22px; font-weight: 900; color: #0d9488; margin-bottom: 10px; letter-spacing: -0.5px; }
.vp-prev-tags[b-oulvmm82x8] { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-tag[b-oulvmm82x8] { font-size: 10px; font-weight: 600; padding: 3px 8px; background: #f1f5f9; border-radius: 6px; color: #475569; }
.vp-tips[b-oulvmm82x8] { background: #fff; border: 1.5px solid #e8edf3; border-radius: 14px; padding: 16px; box-shadow: 0 4px 14px rgba(15,23,42,0.04); }
.vp-tips-hdr[b-oulvmm82x8] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #0d9488; }
.vp-tips-ttl[b-oulvmm82x8] { font-size: 12px; font-weight: 800; color: #1e293b; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.vp-tips ul[b-oulvmm82x8] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vp-tips li[b-oulvmm82x8] { font-size: 12px; color: #475569; padding-left: 18px; position: relative; line-height: 1.5; }
.vp-tips li[b-oulvmm82x8]::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #5eead4);
}

/* Checkbox grid */
.vp-check-grid[b-oulvmm82x8] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding-top: 8px; }
.vp-check-item[b-oulvmm82x8] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 500; color: #475569; transition: all 0.15s; user-select: none; }
.vp-check-item:hover[b-oulvmm82x8] { border-color: #5eead4; background: #fff; }
.vp-check-item.active[b-oulvmm82x8] { border-color: #0d9488; background: #f0fdfa; color: #1e293b; font-weight: 600; }
.vp-check-item input[type="checkbox"][b-oulvmm82x8] { display: none; }

/* Responsive */
@media (max-width: 1024px) {
    .vp-body[b-oulvmm82x8] { grid-template-columns: 1fr; }
    .vp-preview-col[b-oulvmm82x8] { display: none; }
}
@media (max-width: 768px) {
    .vp-body[b-oulvmm82x8] { padding: 20px 16px 60px; }
    .vp-form-hero-inner[b-oulvmm82x8] { padding: 0 20px; }
    .vp-fields-grid[b-oulvmm82x8] { grid-template-columns: 1fr; }
    .vp-step-line[b-oulvmm82x8] { width: 20px; }

    /* Stepper horizontal scrolleable. Le agregamos scroll-snap para que el
       paso activo encaje en la izquierda al swipear, y scroll-behavior smooth
       cuando programáticamente cambiemos de paso. También damos un mask gradient
       a la derecha que insinúa "hay más pasos abajo de pantalla". */
    .vp-stepper[b-oulvmm82x8] {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 6px;
        padding-right: 24px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    }
    .vp-step[b-oulvmm82x8] { scroll-snap-align: start; }

    /* Upload preview: 260px de alto es mucho en mobile chico — robaba la
       mitad del viewport y obligaba a scrollear para llegar al siguiente
       campo del form. Bajamos a 180px que es suficiente para validar que
       la foto cargó. */
    .vp-upload-img[b-oulvmm82x8] { height: 180px; }
    .vp-upload-ph[b-oulvmm82x8] { padding: 28px 16px; }
}

/* ── Estado de verificación de padrón ─────────────────────────────────────
   Aparece bajo el input de padrón tras disparar on-blur. Tres variantes:
   ok (verde)  → matchea, dirección oficial mostrada.
   error (rojo) → fuente respondió pero no matchea → botón Publicar deshabilitado.
   warn (amarillo) → fuente caída / sin cobertura → se permite publicar.
   checking (azul) → consultando. */
.vp-cat-status[b-oulvmm82x8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.3;
}
.vp-cat-status-ok[b-oulvmm82x8] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.vp-cat-status-error[b-oulvmm82x8] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.vp-cat-status-warn[b-oulvmm82x8] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
.vp-cat-status-checking[b-oulvmm82x8] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
/* /Components/Pages/Planes.razor.rz.scp.css */
/* ============================================================
   PLANES / SUSCRIPCIONES — Premium pricing page
   Brand accent: teal #0d9488 / #0f766e · gold accent para Platinum
   ============================================================ */

.pl-page[b-joa2so8oaf] {
    background: #f8fafc;
    min-height: 100vh;
    font-family: "Sora", sans-serif;
    color: #0f172a;
}

.pl-container[b-joa2so8oaf] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ════════ HERO ════════ */
.pl-hero[b-joa2so8oaf] {
    position: relative;
    overflow: hidden;
    padding: 72px 0 140px;
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 50%, #0f766e 100%);
    color: #fff;
    text-align: center;
}

.pl-hero-orbs[b-joa2so8oaf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pl-orb[b-joa2so8oaf] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.pl-orb-1[b-joa2so8oaf] {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #14b8a6, transparent 70%);
    top: -180px; left: -140px;
}

.pl-orb-2[b-joa2so8oaf] {
    width: 620px; height: 620px;
    background: radial-gradient(circle, #7c3aed, transparent 70%);
    bottom: -300px; right: -200px;
    opacity: 0.35;
}

.pl-hero-inner[b-joa2so8oaf] {
    position: relative;
    z-index: 1;
}

.pl-hero-eyebrow[b-joa2so8oaf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.95);
    margin-bottom: 22px;
}

.pl-hero-title[b-joa2so8oaf] {
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 18px;
}

.pl-hero-title em[b-joa2so8oaf] {
    font-style: normal;
    background: linear-gradient(135deg, #5eead4, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pl-hero-sub[b-joa2so8oaf] {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.78;
    max-width: 640px;
    margin: 0 auto 22px;
}

.pl-hero-bullets[b-joa2so8oaf] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.pl-hero-bullet[b-joa2so8oaf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(94,234,212,0.25);
    color: #a7f3d0;
    font-size: 12.5px;
    font-weight: 700;
}

/* Billing toggle */
.pl-billing-toggle[b-joa2so8oaf] {
    display: inline-flex;
    gap: 0;
    padding: 5px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.pl-bt[b-joa2so8oaf] {
    padding: 9px 22px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.75);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pl-bt--active[b-joa2so8oaf] {
    background: #fff;
    color: #0f766e;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.pl-bt-save[b-joa2so8oaf] {
    display: inline-flex;
    padding: 2px 7px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pl-bt:not(.pl-bt--active) .pl-bt-save[b-joa2so8oaf] {
    background: rgba(94,234,212,0.3);
    color: #a7f3d0;
}

/* ════════ CARDS ════════ */
.pl-cards-section[b-joa2so8oaf] {
    position: relative;
    margin-top: -100px;
    padding-bottom: 64px;
    z-index: 2;
}

.pl-cards[b-joa2so8oaf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.pl-card[b-joa2so8oaf] {
    position: relative;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    padding: 34px 28px 32px;
    box-shadow: 0 10px 40px rgba(15,23,42,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.pl-card:hover[b-joa2so8oaf] {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(15,23,42,0.14);
}

.pl-card--featured[b-joa2so8oaf] {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
    border-color: #5eead4;
    box-shadow: 0 24px 60px rgba(13,148,136,0.28);
    transform: translateY(-10px) scale(1.03);
}

.pl-card--featured:hover[b-joa2so8oaf] {
    transform: translateY(-14px) scale(1.03);
}

/* Ribbon "Recomendado" */
.pl-card-ribbon[b-joa2so8oaf] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(13,148,136,0.4);
    white-space: nowrap;
}

/* Header */
.pl-card-hdr[b-joa2so8oaf] {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e2e8f0;
    margin-bottom: 20px;
}

.pl-card-icon[b-joa2so8oaf] {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,0.14);
}

.pl-card-name[b-joa2so8oaf] {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 4px;
    letter-spacing: -0.5px;
}

.pl-card-tagline[b-joa2so8oaf] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    min-height: 40px;
}

/* Price */
.pl-card-price[b-joa2so8oaf] {
    text-align: center;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px dashed #e2e8f0;
}

.pl-price-old[b-joa2so8oaf] {
    display: block;
    font-size: 13px;
    color: var(--color-text-subtle);
    text-decoration: line-through;
    margin-bottom: 4px;
    font-weight: 700;
}

.pl-price-row[b-joa2so8oaf] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
}

.pl-price-currency[b-joa2so8oaf] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.05em;
}

.pl-price-value[b-joa2so8oaf] {
    font-size: 44px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -1.5px;
    line-height: 1;
}

.pl-card--featured .pl-price-value[b-joa2so8oaf] {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pl-price-meta[b-joa2so8oaf] {
    display: block;
    font-size: 12px;
    color: var(--color-text-subtle);
    margin-top: 6px;
    font-weight: 600;
}

/* Features list */
.pl-card-feats[b-joa2so8oaf] {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pl-card-feats li[b-joa2so8oaf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #334155;
}

.pl-card-feats svg[b-joa2so8oaf] {
    flex-shrink: 0;
    color: #0d9488;
    background: #ccfbf1;
    padding: 3px;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    margin-top: 1px;
}

.pl-card--featured .pl-card-feats svg[b-joa2so8oaf] {
    background: #0d9488;
    color: #fff;
}

.pl-card-feats strong[b-joa2so8oaf] { color: #0f172a; font-weight: 800; }

/* CTA button */
.pl-card-cta[b-joa2so8oaf] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1.5px solid #0d9488;
    background: #fff;
    color: #0d9488;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}

.pl-card-cta:hover[b-joa2so8oaf] {
    background: #f0fdfa;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(13,148,136,0.15);
}

.pl-card-cta--primary[b-joa2so8oaf] {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(13,148,136,0.4);
}

.pl-card-cta--primary:hover[b-joa2so8oaf] {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13,148,136,0.55);
    background: linear-gradient(135deg, #0f766e, #115e59);
}

.pl-cards-footnote[b-joa2so8oaf] {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

.pl-cards-footnote a[b-joa2so8oaf] {
    color: #0d9488;
    font-weight: 700;
    text-decoration: none;
}

.pl-cards-footnote a:hover[b-joa2so8oaf] { text-decoration: underline; }

/* ════════ SECCIONES ════════ */
.pl-section-head[b-joa2so8oaf] {
    text-align: center;
    margin-bottom: 36px;
}

.pl-section-eyebrow[b-joa2so8oaf] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0d9488;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.pl-section-head h2[b-joa2so8oaf] {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 8px;
    letter-spacing: -0.8px;
}

.pl-section-head p[b-joa2so8oaf] {
    font-size: 15px;
    color: #64748b;
    max-width: 560px;
    margin: 0 auto;
}

/* ════════ COMPARATIVA ════════ */
.pl-compare-section[b-joa2so8oaf] {
    padding: 56px 0 72px;
    background: #ffffff;
}

.pl-compare-wrap[b-joa2so8oaf] {
    overflow-x: auto;
    border-radius: 18px;
    box-shadow: 0 10px 34px rgba(15,23,42,0.06);
    border: 1px solid #e2e8f0;
    background: #fff;
}

.pl-compare[b-joa2so8oaf] {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.pl-compare thead th[b-joa2so8oaf] {
    background: #f8fafc;
    padding: 22px 18px;
    text-align: center;
    font-weight: 800;
    color: #0f172a;
    border-bottom: 2px solid #e2e8f0;
}

.pl-compare-feature[b-joa2so8oaf] {
    text-align: left !important;
    min-width: 240px;
    font-size: 13.5px;
    color: #334155;
    padding: 14px 18px !important;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

thead .pl-compare-feature[b-joa2so8oaf] {
    color: var(--color-text-subtle);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    border-bottom: 2px solid #e2e8f0;
}

.pl-compare-feat-icon[b-joa2so8oaf] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #f0fdfa;
    color: #0d9488;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pl-compare-plan[b-joa2so8oaf] {
    min-width: 160px;
}

.pl-compare-plan-inner[b-joa2so8oaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pl-compare-plan-inner strong[b-joa2so8oaf] {
    font-size: 16px;
    color: #0f172a;
}

.pl-compare-ribbon[b-joa2so8oaf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
}

.pl-compare-plan--bronce strong[b-joa2so8oaf] { color: #b45309; }
.pl-compare-plan--oro strong[b-joa2so8oaf] { color: #d97706; }
.pl-compare-plan--platinum strong[b-joa2so8oaf] { color: #0d9488; }

.pl-compare-plan--featured[b-joa2so8oaf] {
    background: linear-gradient(180deg, #f0fdfa, #fff) !important;
    border-top: 3px solid #0d9488;
}

.pl-compare-cell[b-joa2so8oaf] {
    padding: 14px 18px;
    text-align: center;
    font-size: 13.5px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.pl-compare-cell--featured[b-joa2so8oaf] {
    background: linear-gradient(180deg, rgba(240,253,250,0.6), rgba(255,255,255,0.6));
}

.pl-check[b-joa2so8oaf] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(13,148,136,0.3);
}

.pl-xmark[b-joa2so8oaf] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    align-items: center;
    justify-content: center;
}

.pl-compare-text[b-joa2so8oaf] {
    font-weight: 700;
    color: #0f172a;
}

/* Price row en la comparativa */
.pl-compare-price-row .pl-compare-feature[b-joa2so8oaf] { font-weight: 800; }

.pl-compare-price[b-joa2so8oaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pl-compare-price strong[b-joa2so8oaf] {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.pl-compare-cell--featured .pl-compare-price strong[b-joa2so8oaf] {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pl-compare-price span[b-joa2so8oaf] {
    font-size: 10.5px;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.pl-compare-cta[b-joa2so8oaf] {
    padding: 10px 20px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #0d9488;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.pl-compare-cta:hover[b-joa2so8oaf] {
    border-color: #0d9488;
    background: #f0fdfa;
}

.pl-compare-cta--primary[b-joa2so8oaf] {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(13,148,136,0.35);
}

.pl-compare-cta--primary:hover[b-joa2so8oaf] {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(13,148,136,0.45);
    background: linear-gradient(135deg, #0f766e, #115e59);
}

/* ════════ FAQ ════════ */
.pl-faq-section[b-joa2so8oaf] {
    padding: 56px 0 72px;
    background: #f8fafc;
}

.pl-faq-grid[b-joa2so8oaf] {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-faq[b-joa2so8oaf] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s;
}

.pl-faq--open[b-joa2so8oaf] {
    border-color: #5eead4;
    box-shadow: 0 8px 22px rgba(13,148,136,0.12);
}

.pl-faq-q[b-joa2so8oaf] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.pl-faq-q:hover[b-joa2so8oaf] { background: #fafbfc; }

.pl-faq-q svg[b-joa2so8oaf] {
    color: #64748b;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.pl-faq--open .pl-faq-q svg[b-joa2so8oaf] { transform: rotate(180deg); color: #0d9488; }

.pl-faq-a[b-joa2so8oaf] {
    padding: 0 22px 20px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    animation: pl-fadein-b-joa2so8oaf 0.2s ease;
}

@keyframes pl-fadein-b-joa2so8oaf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════ CTA FINAL ════════ */
.pl-cta-section[b-joa2so8oaf] { padding: 48px 0 80px; }

.pl-cta-box[b-joa2so8oaf] {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0f766e 100%);
    border-radius: 24px;
    padding: 42px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    color: #fff;
    box-shadow: 0 20px 50px rgba(13,148,136,0.3);
    position: relative;
    overflow: hidden;
}

.pl-cta-box[b-joa2so8oaf]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(94,234,212,0.25), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(124,58,237,0.25), transparent 45%);
    pointer-events: none;
}

.pl-cta-txt[b-joa2so8oaf] { position: relative; z-index: 1; }

.pl-cta-txt h2[b-joa2so8oaf] {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}

.pl-cta-txt p[b-joa2so8oaf] {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
    line-height: 1.55;
    max-width: 520px;
}

.pl-cta-btns[b-joa2so8oaf] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pl-cta-btn[b-joa2so8oaf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1.5px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}

.pl-cta-btn:hover[b-joa2so8oaf] {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.pl-cta-btn--primary[b-joa2so8oaf] {
    background: #fff;
    color: #0f766e;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(255,255,255,0.24);
}

.pl-cta-btn--primary:hover[b-joa2so8oaf] {
    background: #f0fdfa;
    color: #0f766e;
    transform: translateY(-1px);
}

/* ════════ MODAL ════════ */
.pl-modal-bg[b-joa2so8oaf] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: pl-fade-in-b-joa2so8oaf 0.18s ease;
}

@keyframes pl-fade-in-b-joa2so8oaf {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pl-modal[b-joa2so8oaf] {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: #fff;
    border-radius: 22px;
    padding: 34px 30px 26px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(15,23,42,0.4);
    animation: pl-pop-in-b-joa2so8oaf 0.22s cubic-bezier(0.17, 0.84, 0.44, 1);
    font-family: "Sora", sans-serif;
}

@keyframes pl-pop-in-b-joa2so8oaf {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pl-modal-close[b-joa2so8oaf] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.pl-modal-close:hover[b-joa2so8oaf] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.pl-modal-icon[b-joa2so8oaf] {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,0.16);
}

.pl-modal h3[b-joa2so8oaf] {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 6px;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.pl-modal-sub[b-joa2so8oaf] {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 18px;
    line-height: 1.5;
}

.pl-modal-sub strong[b-joa2so8oaf] {
    color: #0d9488;
    font-weight: 900;
    font-size: 18px;
    display: inline-block;
    margin-top: 4px;
}

.pl-modal-info[b-joa2so8oaf] {
    display: flex;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 12px;
    margin-bottom: 20px;
}

.pl-modal-info svg[b-joa2so8oaf] {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}

.pl-modal-info strong[b-joa2so8oaf] {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #92400e;
    margin-bottom: 4px;
}

.pl-modal-info span[b-joa2so8oaf] {
    display: block;
    font-size: 12px;
    color: #854d0e;
    line-height: 1.5;
}

.pl-modal-actions[b-joa2so8oaf] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pl-btn-primary[b-joa2so8oaf],
.pl-btn-secondary[b-joa2so8oaf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    min-width: 130px;
}

.pl-btn-primary[b-joa2so8oaf] {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(13,148,136,0.35);
}

.pl-btn-primary:hover[b-joa2so8oaf] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(13,148,136,0.45);
    color: #fff;
}

.pl-btn-secondary[b-joa2so8oaf] {
    background: #f8fafc;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.pl-btn-secondary:hover[b-joa2so8oaf] {
    background: #f1f5f9;
    border-color: var(--color-text-subtle);
}

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
    .pl-cards[b-joa2so8oaf] { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    .pl-card--featured[b-joa2so8oaf] { transform: none; }
    .pl-card--featured:hover[b-joa2so8oaf] { transform: translateY(-4px); }
    .pl-cta-box[b-joa2so8oaf] { flex-direction: column; text-align: center; align-items: center; }
    .pl-cta-btns[b-joa2so8oaf] { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
    .pl-container[b-joa2so8oaf] { padding: 0 18px; }
    .pl-hero[b-joa2so8oaf] { padding: 52px 0 120px; }
    .pl-cards-section[b-joa2so8oaf] { margin-top: -90px; }
    .pl-card[b-joa2so8oaf] { padding: 28px 22px 26px; }
    .pl-price-value[b-joa2so8oaf] { font-size: 38px; }
    .pl-compare-wrap[b-joa2so8oaf] { border-radius: 0; border-left: none; border-right: none; }
    .pl-compare-feature[b-joa2so8oaf] { min-width: 200px; }
    .pl-cta-box[b-joa2so8oaf] { padding: 32px 24px; }
    .pl-cta-btns[b-joa2so8oaf] { flex-direction: column; width: 100%; }
    .pl-cta-btn[b-joa2so8oaf] { width: 100%; justify-content: center; }
    .pl-modal[b-joa2so8oaf] { padding: 28px 22px 22px; }
}

@media (max-width: 480px) {
    .pl-hero-title[b-joa2so8oaf] { font-size: 30px; letter-spacing: -1px; }
    .pl-billing-toggle[b-joa2so8oaf] { width: 100%; }
    .pl-bt[b-joa2so8oaf] { flex: 1; justify-content: center; padding: 9px 10px; }
}

/* Plan Fase 2.4 — botón "Probar 7 días gratis" en card Platinum.
   Estilo más sutil que el CTA principal — es complementario, no substitutivo. */
.pl-card-trial[b-joa2so8oaf] {
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
    background: transparent;
    color: var(--color-brand-dark);
    border: 1.5px dashed var(--color-brand);
    border-radius: var(--radius-md);
    font-family: "Sora", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.pl-card-trial:hover:not(:disabled)[b-joa2so8oaf] {
    background: var(--color-brand-bg);
    border-style: solid;
}
.pl-card-trial:disabled[b-joa2so8oaf] { opacity: 0.5; cursor: not-allowed; }

.pl-card-trial-note[b-joa2so8oaf] {
    margin: 6px 0 0;
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    font-style: italic;
}
/* /Components/Pages/Privacidad.razor.rz.scp.css */
/* Legal pages shared styles */
.legal-page[b-ztpag57t61] {
    background: #fff;
    min-height: calc(100vh - 64px);
    font-family: "Inter", system-ui, sans-serif;
}

.legal-container[b-ztpag57t61] {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.legal-breadcrumb[b-ztpag57t61] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--color-text-subtle);
    margin-bottom: 32px;
}

.legal-breadcrumb a[b-ztpag57t61] {
    color: #64748b;
    text-decoration: none;
}

.legal-breadcrumb a:hover[b-ztpag57t61] {
    color: #0d9488;
}

.legal-page h1[b-ztpag57t61] {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin: 0 0 8px 0;
}

.legal-updated[b-ztpag57t61] {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin: 0 0 40px 0;
}

.legal-page section[b-ztpag57t61] {
    margin-bottom: 32px;
}

.legal-page h2[b-ztpag57t61] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.legal-page p[b-ztpag57t61] {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.75;
    margin: 0 0 12px 0;
}

.legal-page ul[b-ztpag57t61] {
    margin: 0 0 12px 0;
    padding-left: 24px;
}

.legal-page li[b-ztpag57t61] {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.75;
    margin-bottom: 4px;
}

.legal-page strong[b-ztpag57t61] {
    color: #334155;
}

@media (max-width: 640px) {
    .legal-container[b-ztpag57t61] {
        padding: 24px 16px 60px;
    }
    .legal-page h1[b-ztpag57t61] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/RegistroInmobiliaria.razor.rz.scp.css */
/* =========================================================
   BRAND PANEL (left)
   ========================================================= */
.inmo-brand[b-lzxsi07n7m] {
    position: relative;
    width: 45%;
    background-image:
        linear-gradient(145deg, rgba(5,46,50,0.88) 0%, rgba(13,148,136,0.65) 50%, rgba(15,118,110,0.55) 100%),
        url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1600&q=80&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    overflow: hidden;
    flex-shrink: 0;
}

.inmo-deco[b-lzxsi07n7m] { position: absolute; border-radius: 50%; pointer-events: none; }
.inmo-deco-1[b-lzxsi07n7m] { width: 420px; height: 420px; background: rgba(13,148,136,0.25); top: -120px; right: -120px; filter: blur(60px); }
.inmo-deco-2[b-lzxsi07n7m] { width: 300px; height: 300px; background: rgba(20,184,166,0.2); bottom: -80px; left: -60px; filter: blur(50px); }
.inmo-deco-3[b-lzxsi07n7m] { width: 180px; height: 180px; background: rgba(56,189,248,0.15); top: 40%; left: 35%; filter: blur(40px); }

.inmo-brand-inner[b-lzxsi07n7m] { position: relative; z-index: 1; color: #fff; max-width: 360px; }

.inmo-brand-badge[b-lzxsi07n7m] {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 32px;
}
.inmo-brand-badge svg[b-lzxsi07n7m] { width: 28px; height: 28px; stroke: #fff; }

.inmo-brand-title[b-lzxsi07n7m] {
    font-size: clamp(26px, 3vw, 34px); font-weight: 800;
    line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.5px;
}
.inmo-brand-sub[b-lzxsi07n7m] {
    font-size: 14.5px; color: rgba(255,255,255,0.7);
    line-height: 1.7; margin-bottom: 36px;
}

.inmo-features[b-lzxsi07n7m] {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 20px;
}
.inmo-features li[b-lzxsi07n7m] {
    display: flex; align-items: flex-start; gap: 14px;
    color: rgba(255,255,255,0.92);
}
.inmo-feat-icon[b-lzxsi07n7m] {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.inmo-feat-icon svg[b-lzxsi07n7m] { width: 18px; height: 18px; stroke: #5eead4; }
.inmo-features li strong[b-lzxsi07n7m] { font-size: 14px; font-weight: 700; display: block; margin-bottom: 2px; }
.inmo-feat-desc[b-lzxsi07n7m] { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.4; }

/* =========================================================
   FORM PANEL (right)
   ========================================================= */
.inmo-form-panel[b-lzxsi07n7m] {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 48px 40px; background: #fafbfc; overflow-y: auto;
}
.inmo-form-inner[b-lzxsi07n7m] { width: 100%; max-width: 460px; }

.inmo-form-header[b-lzxsi07n7m] { margin-bottom: 28px; }
.inmo-form-title[b-lzxsi07n7m] { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.3px; margin-bottom: 8px; }
.inmo-form-desc[b-lzxsi07n7m] { font-size: 14px; color: #64748b; line-height: 1.5; }
.inmo-link[b-lzxsi07n7m] { color: #0d9488; font-weight: 600; text-decoration: none; }
.inmo-link:hover[b-lzxsi07n7m] { text-decoration: underline; }

/* ── Step indicator ── */
.inmo-steps[b-lzxsi07n7m] {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 28px;
}
.inmo-step[b-lzxsi07n7m] {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.inmo-step-num[b-lzxsi07n7m] {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e2e8f0; color: var(--color-text-subtle);
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s ease;
}
.inmo-step--active .inmo-step-num[b-lzxsi07n7m] {
    background: #0d9488; color: #fff;
    box-shadow: 0 2px 8px rgba(13,148,136,0.35);
}
.inmo-step--done .inmo-step-num[b-lzxsi07n7m] {
    background: #10b981; color: #fff;
}
.inmo-step-label[b-lzxsi07n7m] { font-size: 11px; font-weight: 600; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.5px; }
.inmo-step--active .inmo-step-label[b-lzxsi07n7m] { color: #0d9488; }
.inmo-step--done .inmo-step-label[b-lzxsi07n7m] { color: #10b981; }

.inmo-step-line[b-lzxsi07n7m] {
    width: 48px; height: 2px; background: #e2e8f0;
    margin: 0 12px; margin-bottom: 20px;
    transition: background 0.25s ease;
}
.inmo-step-line--active[b-lzxsi07n7m] { background: #10b981; }

/* ── Alert ── */
.inmo-alert[b-lzxsi07n7m] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 500; margin-bottom: 20px;
}
.inmo-alert svg[b-lzxsi07n7m] { width: 18px; height: 18px; flex-shrink: 0; }
.inmo-alert--err[b-lzxsi07n7m] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.inmo-alert--ok[b-lzxsi07n7m] { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* ── Form fields ── */
.inmo-step-content[b-lzxsi07n7m] { animation: inmoFadeIn-b-lzxsi07n7m 0.3s ease; }
@keyframes inmoFadeIn-b-lzxsi07n7m { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.inmo-field[b-lzxsi07n7m] { margin-bottom: 18px; }
.inmo-label[b-lzxsi07n7m] { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.inmo-req[b-lzxsi07n7m] { color: #ef4444; }

.inmo-input-wrap[b-lzxsi07n7m] { position: relative; }
.inmo-input[b-lzxsi07n7m] {
    width: 100%; padding: 11px 14px;
    background: #fff; border: 1.5px solid #e2e8f0;
    border-radius: 10px; font-size: 14px; color: #0f172a;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.inmo-input:focus[b-lzxsi07n7m] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
}
.inmo-input[b-lzxsi07n7m]::placeholder { color: var(--color-text-subtle); }

.inmo-textarea[b-lzxsi07n7m] { resize: vertical; min-height: 80px; font-family: inherit; }

.inmo-row-2[b-lzxsi07n7m] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Hint debajo de un input — texto chico gris para clarificar contexto. */
.inmo-hint[b-lzxsi07n7m] {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 5px;
    line-height: 1.4;
}

/* Selector visual de tipo de empresa — radio cards estilo segmented control.
   Cada card tiene label arriba y descripción corta abajo, así el usuario
   entiende qué opción le corresponde sin leer un tooltip. */
.inmo-tipo-grid[b-lzxsi07n7m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.inmo-tipo-card[b-lzxsi07n7m] {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.inmo-tipo-card:hover[b-lzxsi07n7m] { border-color: #0d9488; }
.inmo-tipo-card input[b-lzxsi07n7m] { display: none; }
.inmo-tipo-card--active[b-lzxsi07n7m] {
    border-color: #0d9488;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
}
.inmo-tipo-label[b-lzxsi07n7m] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.inmo-tipo-card--active .inmo-tipo-label[b-lzxsi07n7m] { color: #0d9488; }
.inmo-tipo-desc[b-lzxsi07n7m] {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.35;
}

@media (max-width: 480px) {
    .inmo-tipo-grid[b-lzxsi07n7m] { grid-template-columns: 1fr; }
}

.inmo-eye[b-lzxsi07n7m] {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--color-text-subtle); display: flex; align-items: center;
}
.inmo-eye svg[b-lzxsi07n7m] { width: 18px; height: 18px; }

/* ── Checkbox ── */
.inmo-check-field[b-lzxsi07n7m] { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; }
.inmo-checkbox[b-lzxsi07n7m] {
    width: 18px; height: 18px; accent-color: #0d9488;
    margin-top: 1px; flex-shrink: 0; cursor: pointer;
}
.inmo-check-label[b-lzxsi07n7m] { font-size: 13px; color: #475569; line-height: 1.4; cursor: pointer; }

/* ── Navigation buttons ── */
.inmo-nav-buttons[b-lzxsi07n7m] { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }

.inmo-btn-next[b-lzxsi07n7m] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: #0d9488; color: #fff;
    border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(13,148,136,0.3);
}
.inmo-btn-next:hover[b-lzxsi07n7m] { background: #0f766e; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(13,148,136,0.4); }
.inmo-btn-next svg[b-lzxsi07n7m] { width: 16px; height: 16px; }

.inmo-btn-back[b-lzxsi07n7m] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 20px; background: none; color: #64748b;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.inmo-btn-back:hover[b-lzxsi07n7m] { border-color: var(--color-text-subtle); color: #1e293b; background: #f8fafc; }
.inmo-btn-back svg[b-lzxsi07n7m] { width: 14px; height: 14px; }

.inmo-btn-submit[b-lzxsi07n7m] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 32px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 800; cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(13,148,136,0.35);
}
.inmo-btn-submit:hover[b-lzxsi07n7m] { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(13,148,136,0.45); }
.inmo-btn-submit svg[b-lzxsi07n7m] { width: 16px; height: 16px; }

/* ── Success state ── */
.inmo-success[b-lzxsi07n7m] {
    text-align: center; padding: 40px 20px;
    animation: inmoFadeIn-b-lzxsi07n7m 0.4s ease;
}
.inmo-success-icon[b-lzxsi07n7m] {
    width: 72px; height: 72px; border-radius: 50%;
    background: #f0fdf4; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.inmo-success-icon svg[b-lzxsi07n7m] { width: 36px; height: 36px; stroke: #10b981; }
.inmo-success-title[b-lzxsi07n7m] { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
.inmo-success-desc[b-lzxsi07n7m] { font-size: 14px; color: #64748b; line-height: 1.6; }

/* ── Back button ──
   El botón es un elemento raíz del componente, así que lleva directamente
   el atributo de scope de Blazor: NO usar ::deep (eso busca descendientes y
   hacía que el CSS no aplicara, dejando el botón sin estilo).
   Usamos un look sólido (no translúcido) porque el botón vive sobre el
   panel blanco del formulario, no sobre la imagen de fondo. */
.back-btn[b-lzxsi07n7m] {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.back-btn:hover[b-lzxsi07n7m] {
    background: #f8fafc;
    border-color: #0d9488;
    color: #0d9488;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.18);
}
.back-btn:active[b-lzxsi07n7m] { transform: translateY(0); }
.back-btn:focus-visible[b-lzxsi07n7m] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
    border-color: #0d9488;
}
.back-btn svg[b-lzxsi07n7m] {
    width: 16px;
    height: 16px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .inmo-brand[b-lzxsi07n7m] { display: none; }
    .inmo-form-panel[b-lzxsi07n7m] { padding: 32px 20px; }
    .inmo-row-2[b-lzxsi07n7m] { grid-template-columns: 1fr; }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
/* =========================================================
   RESET PASSWORD PAGE
   ========================================================= */
.rp-container[b-dfmlmdrz61] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f8fafc;
    padding: 24px;
    font-family: 'Inter', sans-serif;
}

.rp-card[b-dfmlmdrz61] {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    text-align: center;
}

/* Icon */
.rp-icon-wrap[b-dfmlmdrz61] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    margin-bottom: 24px;
}

.rp-icon[b-dfmlmdrz61] {
    width: 28px;
    height: 28px;
    color: #0d9488;
}

/* Title & description */
.rp-title[b-dfmlmdrz61] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.rp-desc[b-dfmlmdrz61] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 28px 0;
    line-height: 1.6;
}

/* Form */
.rp-form[b-dfmlmdrz61] {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.rp-field[b-dfmlmdrz61] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.rp-label[b-dfmlmdrz61] {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.rp-input-wrap[b-dfmlmdrz61] {
    position: relative;
    display: flex;
    align-items: center;
}

.rp-input[b-dfmlmdrz61] {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.rp-input[b-dfmlmdrz61]::placeholder {
    color: var(--color-text-subtle);
}

.rp-input:focus[b-dfmlmdrz61] {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* Eye toggle */
.rp-eye[b-dfmlmdrz61] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.rp-eye svg[b-dfmlmdrz61] {
    width: 17px;
    height: 17px;
}

.rp-eye:hover[b-dfmlmdrz61] {
    color: #0d9488;
}

/* Alert */
.rp-alert[b-dfmlmdrz61] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: left;
}

.rp-alert svg[b-dfmlmdrz61] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.rp-alert--err[b-dfmlmdrz61] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Submit button */
.rp-submit[b-dfmlmdrz61] {
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.rp-submit:hover:not(:disabled)[b-dfmlmdrz61] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.45);
    filter: brightness(1.05);
}

.rp-submit:active:not(:disabled)[b-dfmlmdrz61] {
    transform: translateY(0);
}

.rp-submit:disabled[b-dfmlmdrz61] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Link styled as button */
.rp-submit-link[b-dfmlmdrz61] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.rp-submit-link:hover[b-dfmlmdrz61] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.45);
    filter: brightness(1.05);
    color: #fff;
}

/* Spinner */
.rp-spinner[b-dfmlmdrz61] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rp-spin-b-dfmlmdrz61 0.6s linear infinite;
}

@keyframes rp-spin-b-dfmlmdrz61 {
    to { transform: rotate(360deg); }
}

/* Back link */
.rp-back-link[b-dfmlmdrz61] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
    transition: color 0.15s;
}

.rp-back-link svg[b-dfmlmdrz61] {
    width: 16px;
    height: 16px;
}

.rp-back-link:hover[b-dfmlmdrz61] {
    color: #0f766e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Responsive */
@media (max-width: 480px) {
    .rp-card[b-dfmlmdrz61] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/Sofi.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   Sofi Page — Listo Casas Teal Theme
   ══════════════════════════════════════════════ */

.sofi-page[b-haaln1u37b] {
    /* height fija (no min-height) → la página NO crece más allá del viewport.
       Eso hace que el overflow del sofi-chat-area se active y SOLO el panel
       derecho scrollee. El hero queda anclado en su lugar. */
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
    background: #f8fafc;
    font-family: "Inter", system-ui, sans-serif;
}

/* ── Hero Panel ──
   align-items: flex-start → contenido arriba, no centrado verticalmente.
   Antes el "Hola, soy WillyAI" caía al medio/abajo del panel porque el
   hero medía toda la altura y el contenido estaba center-aligned.
   overflow: hidden + altura heredada del .sofi-page → el panel queda
   estático, no scrollea aunque la página total crezca. */
.sofi-hero[b-haaln1u37b] {
    width: 400px;
    flex-shrink: 0;
    background: #f0fdfa;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.sofi-hero[b-haaln1u37b]::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(13,148,136,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.sofi-hero-content[b-haaln1u37b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.75rem;
    position: relative;
    z-index: 1;
    max-width: 320px;
}

/* ── Avatar ── */
.sofi-avatar-ring[b-haaln1u37b] {
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #5eead4, #0d9488);
    animation: ringRotate-b-haaln1u37b 8s linear infinite;
}

@keyframes ringRotate-b-haaln1u37b {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sofi-avatar-large[b-haaln1u37b] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #0d9488;
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    font-family: "Inter", system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(13,148,136,0.3);
    animation: counterRotate-b-haaln1u37b 8s linear infinite;
}

@keyframes counterRotate-b-haaln1u37b {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* ── Title block ── */
.sofi-title-block[b-haaln1u37b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sofi-eyebrow[b-haaln1u37b] {
    color: #0d9488;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.sofi-title[b-haaln1u37b] {
    color: #0f172a;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.sofi-title span[b-haaln1u37b] {
    color: #0d9488;
}

.sofi-subtitle[b-haaln1u37b] {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 4px 0 0;
}

/* ── Divider ── */
.sofi-divider[b-haaln1u37b] {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #0d9488, transparent);
    border-radius: 1px;
}

/* ── Features ── */
.sofi-features[b-haaln1u37b] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}

.sofi-feature[b-haaln1u37b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sofi-feature:hover[b-haaln1u37b] {
    border-color: #99f6e4;
    box-shadow: 0 2px 8px rgba(13,148,136,0.08);
}

.sofi-feature-icon[b-haaln1u37b] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f0fdfa;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-label[b-haaln1u37b] {
    display: block;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.feature-desc[b-haaln1u37b] {
    display: block;
    color: var(--color-text-subtle);
    font-size: 0.72rem;
    margin-top: 1px;
    line-height: 1.3;
}

/* ── Badge ── */
.sofi-badge[b-haaln1u37b] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    color: var(--color-text-subtle);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── Chat Area ──
   flex-direction: column → ChatWidget arriba, WillyToolsPanel debajo (apilados).
   Antes era flex row, lo que ponía el panel a la derecha del chat con alturas
   distintas (sensación de "desnivelado") y dejaba las mini-calculadoras
   abriendo offscreen al fondo del panel.
   overflow-y:auto permite scrollear hacia las herramientas y mini-calcs sin
   romper el layout vertical de la página. */
.sofi-chat-area[b-haaln1u37b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    overflow-y: auto;
}

/* El ChatWidget tiene altura propia (definida en ChatWidget.razor.css).
   Le ponemos un máximo para que las herramientas siempre sean visibles
   sin tener que scrollear demasiado. */
.sofi-chat-area > :first-child[b-haaln1u37b] {
    flex: 0 0 auto;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    /* En mobile revertimos al scroll de página normal: el hero arriba, el
       chat abajo, todo scrolleable. El patrón "hero fijo + chat scroll"
       solo tiene sentido en desktop con dos columnas lado a lado. */
    .sofi-page[b-haaln1u37b] {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 64px);
        overflow: visible;
    }

    .sofi-hero[b-haaln1u37b] {
        width: 100%;
        padding: 2rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .sofi-hero-content[b-haaln1u37b] {
        gap: 1.25rem;
    }

    .sofi-title[b-haaln1u37b] {
        font-size: 2rem;
    }

    .sofi-avatar-large[b-haaln1u37b] {
        width: 72px;
        height: 72px;
        font-size: 32px;
    }

    .sofi-chat-area[b-haaln1u37b] {
        min-height: 550px;
        overflow-y: visible;
    }
}

@media (max-width: 640px) {
    .sofi-features[b-haaln1u37b] {
        display: none;
    }

    .sofi-hero[b-haaln1u37b] {
        padding: 1.5rem 1rem;
    }

    .sofi-title[b-haaln1u37b] {
        font-size: 1.6rem;
    }

    .sofi-subtitle[b-haaln1u37b] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/SuscripcionCheckout.razor.rz.scp.css */
/* ============================================================
   CHECKOUT DE SUSCRIPCIÓN — página de pago profesional
   Brand: teal #0d9488
   ============================================================ */

.sck-page[b-ru1dww8r31] {
    background: #f8fafc;
    min-height: 100vh;
    font-family: "Sora", sans-serif;
    color: #0f172a;
}

/* ── Hero ── */
.sck-hero[b-ru1dww8r31] {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0f766e 100%);
    color: #fff;
    padding: 34px 0 30px;
    position: relative;
    overflow: hidden;
}

.sck-hero[b-ru1dww8r31]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(94,234,212,0.18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(124,58,237,0.22), transparent 45%);
    pointer-events: none;
}

.sck-hero-inner[b-ru1dww8r31] {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.sck-back[b-ru1dww8r31] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    margin-bottom: 18px;
}

.sck-back:hover[b-ru1dww8r31] {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.sck-eyebrow[b-ru1dww8r31] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.9);
    margin-bottom: 12px;
}

.sck-hero h1[b-ru1dww8r31] {
    font-size: clamp(26px, 3.3vw, 38px);
    font-weight: 900;
    letter-spacing: -0.8px;
    margin: 0 0 8px;
    line-height: 1.1;
}

.sck-hero h1 em[b-ru1dww8r31] {
    font-style: normal;
    background: linear-gradient(135deg, #5eead4, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sck-hero p[b-ru1dww8r31] {
    font-size: 14px;
    opacity: 0.78;
    margin: 0;
    max-width: 560px;
    line-height: 1.55;
}

/* ── Body: 2 columnas ── */
.sck-body[b-ru1dww8r31] {
    /* Antes: margin-top -12px que pegaba el primer alert ("No pudimos procesar
       el pago") al hero, daba sensación de elementos apilados.
       Ahora: separación generosa para que el alert de error y el "Resumen del
       pedido" respiren debajo del hero oscuro. */
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 0 32px 80px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}

/* ── Alerts ── */
.sck-alert[b-ru1dww8r31] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-family: inherit;
}

.sck-alert--error[b-ru1dww8r31] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.sck-alert--info[b-ru1dww8r31] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.sck-alert strong[b-ru1dww8r31] { display: block; font-size: 13.5px; margin-bottom: 2px; font-weight: 800; }
.sck-alert span[b-ru1dww8r31] { font-size: 13px; opacity: 0.92; line-height: 1.5; }
.sck-alert svg[b-ru1dww8r31] { flex-shrink: 0; margin-top: 2px; }

/* ── Secciones ── */
.sck-section[b-ru1dww8r31] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 6px 22px rgba(15,23,42,0.04);
}

.sck-section-hdr[b-ru1dww8r31] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.sck-step[b-ru1dww8r31] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(13,148,136,0.4);
}

.sck-section-hdr h3[b-ru1dww8r31] {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
    letter-spacing: -0.3px;
}

.sck-section-hdr p[b-ru1dww8r31] {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ── Card visual (tarjeta simulada) ── */
.sck-card-visual[b-ru1dww8r31] {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1.586;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 16px;
    padding: 22px 24px;
    color: #fff;
    box-shadow: 0 16px 40px rgba(15,23,42,0.25);
    margin: 0 auto 22px;
    overflow: hidden;
}

.sck-card-visual[b-ru1dww8r31]::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(94,234,212,0.18), transparent 60%);
    pointer-events: none;
}

.sck-card-visa[b-ru1dww8r31] { background: linear-gradient(135deg, #1e3a8a, #1e40af, #3b82f6); }
.sck-card-mastercard[b-ru1dww8r31] { background: linear-gradient(135deg, #991b1b, #dc2626, #f59e0b); }
.sck-card-amex[b-ru1dww8r31] { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.sck-card-discover[b-ru1dww8r31] { background: linear-gradient(135deg, #7c2d12, #ea580c); }

.sck-card-chip[b-ru1dww8r31] {
    width: 42px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #fde68a, #f59e0b, #d97706);
    position: relative;
    margin-bottom: 16px;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

.sck-card-chip[b-ru1dww8r31]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 3px;
}

.sck-card-brand[b-ru1dww8r31] {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.95;
}

.sck-card-number[b-ru1dww8r31] {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    margin-bottom: 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sck-card-bottom[b-ru1dww8r31] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.sck-card-bottom div[b-ru1dww8r31] { display: flex; flex-direction: column; gap: 3px; }

.sck-card-bottom span[b-ru1dww8r31] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.65;
}

.sck-card-bottom strong[b-ru1dww8r31] {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
}

/* ── Fields ── */
.sck-field[b-ru1dww8r31] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.sck-field label[b-ru1dww8r31] {
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sck-tooltip[b-ru1dww8r31] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    cursor: help;
}

.sck-input[b-ru1dww8r31],
.sck-input-wrap input[b-ru1dww8r31],
.sck-exp-wrap input[b-ru1dww8r31] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.sck-input:focus[b-ru1dww8r31],
.sck-input-wrap input:focus[b-ru1dww8r31],
.sck-exp-wrap input:focus[b-ru1dww8r31] {
    border-color: #0d9488;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.sck-input-wrap[b-ru1dww8r31] {
    position: relative;
}

.sck-input-wrap svg[b-ru1dww8r31] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-subtle);
    pointer-events: none;
}

.sck-input-wrap input[b-ru1dww8r31] {
    padding-left: 40px;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 1.5px;
}

.sck-err[b-ru1dww8r31] {
    font-size: 11.5px;
    color: #dc2626;
    font-weight: 700;
}

.sck-fields-row[b-ru1dww8r31] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sck-field--exp .sck-exp-wrap[b-ru1dww8r31] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sck-field--exp .sck-exp-wrap:focus-within[b-ru1dww8r31] {
    border-color: #0d9488;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.sck-field--exp .sck-exp-wrap input[b-ru1dww8r31] {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Courier New', monospace;
    text-align: center;
    padding: 12px 0;
    flex: 1;
    min-width: 50px;
}

.sck-field--exp .sck-exp-wrap span[b-ru1dww8r31] {
    color: var(--color-text-subtle);
    font-weight: 800;
}

.sck-field--cvv input[b-ru1dww8r31] {
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
    text-align: center;
}

/* ── Security strip ── */
.sck-security-strip[b-ru1dww8r31] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 16px 20px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.sck-security-item[b-ru1dww8r31] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f766e;
}

.sck-security-item svg[b-ru1dww8r31] { color: #0d9488; }

/* ════════ SIDEBAR SUMMARY ════════ */
.sck-summary-col[b-ru1dww8r31] {
    position: sticky;
    top: 24px;
}

.sck-summary[b-ru1dww8r31] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 36px rgba(15,23,42,0.08);
}

.sck-summary-hdr[b-ru1dww8r31] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
    margin-bottom: 14px;
}

.sck-summary-plan[b-ru1dww8r31] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0;
    margin-bottom: 16px;
}

.sck-summary-plan-icon[b-ru1dww8r31] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(15,23,42,0.12);
    flex-shrink: 0;
}

.sck-summary-plan strong[b-ru1dww8r31] {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.4px;
}

.sck-summary-plan span[b-ru1dww8r31] {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 2px;
}

.sck-summary-benefits[b-ru1dww8r31] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.sck-summary-benefits div[b-ru1dww8r31] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #334155;
    font-weight: 600;
    line-height: 1.5;
}

.sck-summary-benefits svg[b-ru1dww8r31] {
    flex-shrink: 0;
    color: #0d9488;
    margin-top: 2px;
    padding: 2px;
    background: #ccfbf1;
    border-radius: 5px;
    width: 16px;
    height: 16px;
}

.sck-summary-divider[b-ru1dww8r31] {
    height: 1px;
    background: #e2e8f0;
    margin: 14px 0;
}

.sck-summary-line[b-ru1dww8r31],
.sck-summary-total[b-ru1dww8r31] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13.5px;
    color: #475569;
}

.sck-summary-line--discount[b-ru1dww8r31] { color: #059669; font-weight: 700; }

.sck-summary-total[b-ru1dww8r31] {
    font-size: 15px;
    color: #0f172a;
    font-weight: 700;
    margin-top: 4px;
}

.sck-summary-total strong[b-ru1dww8r31] {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.6px;
}

.sck-pay-btn[b-ru1dww8r31] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    margin-top: 18px;
    border: none;
    border-radius: 13px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(13,148,136,0.42);
    transition: all 0.2s;
    letter-spacing: 0.01em;
}

.sck-pay-btn:hover:not(:disabled)[b-ru1dww8r31] {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(13,148,136,0.55);
    background: linear-gradient(135deg, #0f766e, #115e59);
}

.sck-pay-btn:disabled[b-ru1dww8r31] { opacity: 0.8; cursor: progress; }

.sck-spinner[b-ru1dww8r31] {
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sck-spin-b-ru1dww8r31 0.7s linear infinite;
}

@keyframes sck-spin-b-ru1dww8r31 { to { transform: rotate(360deg); } }

.sck-summary-note[b-ru1dww8r31] {
    font-size: 11.5px;
    color: var(--color-text-subtle);
    margin: 14px 0 0;
    line-height: 1.55;
    text-align: center;
}

.sck-summary-note a[b-ru1dww8r31] { color: #0d9488; text-decoration: none; font-weight: 700; }
.sck-summary-note a:hover[b-ru1dww8r31] { text-decoration: underline; }

/* ════════ STATE: NO ENCONTRADO ════════ */
.sck-state[b-ru1dww8r31] {
    max-width: 460px;
    margin: 100px auto;
    padding: 42px 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
    text-align: center;
}

.sck-state-icon[b-ru1dww8r31] {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fef2f2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sck-state h2[b-ru1dww8r31] { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: #1e293b; }
.sck-state p[b-ru1dww8r31] { font-size: 14px; color: #64748b; margin: 0 0 22px; }

.sck-btn-primary[b-ru1dww8r31],
.sck-btn-secondary[b-ru1dww8r31] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 800;
    border-radius: 11px;
    text-decoration: none;
    transition: all 0.2s;
}

.sck-btn-primary[b-ru1dww8r31] {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(13,148,136,0.35);
}

.sck-btn-primary:hover[b-ru1dww8r31] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(13,148,136,0.45);
    color: #fff;
}

.sck-btn-secondary[b-ru1dww8r31] {
    background: #f8fafc;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.sck-btn-secondary:hover[b-ru1dww8r31] { border-color: #0d9488; color: #0d9488; background: #f0fdfa; }

/* ════════ SUCCESS PAGE ════════ */
.sck-success-page[b-ru1dww8r31] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0fdfa 0%, #fff 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: "Sora", sans-serif;
}

.sck-success-inner[b-ru1dww8r31] {
    max-width: 540px;
    width: 100%;
    text-align: center;
    padding: 52px 36px;
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(13,148,136,0.2);
    animation: sck-pop-b-ru1dww8r31 0.3s cubic-bezier(0.17, 0.84, 0.44, 1);
}

@keyframes sck-pop-b-ru1dww8r31 {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sck-success-icon[b-ru1dww8r31] {
    width: 92px;
    height: 92px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px rgba(13,148,136,0.4);
    animation: sck-check-b-ru1dww8r31 0.5s ease 0.1s both;
}

@keyframes sck-check-b-ru1dww8r31 {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.sck-success-inner h1[b-ru1dww8r31] {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 10px;
    color: #0f172a;
    letter-spacing: -0.8px;
}

.sck-success-inner p[b-ru1dww8r31] {
    font-size: 14.5px;
    color: #475569;
    margin: 0 0 28px;
    line-height: 1.6;
}

.sck-success-recap[b-ru1dww8r31] {
    padding: 20px 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-align: left;
    margin-bottom: 24px;
}

.sck-success-row[b-ru1dww8r31] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.sck-success-row:last-child[b-ru1dww8r31] { border-bottom: none; }

.sck-success-row span[b-ru1dww8r31] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sck-success-row strong[b-ru1dww8r31] {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    text-align: right;
}

.sck-success-actions[b-ru1dww8r31] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ════════ RESPONSIVE ════════ */
@media (max-width: 960px) {
    .sck-body[b-ru1dww8r31] { grid-template-columns: 1fr; }
    .sck-summary-col[b-ru1dww8r31] { position: static; }
}

@media (max-width: 600px) {
    .sck-hero-inner[b-ru1dww8r31],
    .sck-body[b-ru1dww8r31] { padding-left: 18px; padding-right: 18px; }
    .sck-section[b-ru1dww8r31] { padding: 20px; }
    .sck-fields-row[b-ru1dww8r31] { grid-template-columns: 1fr; }
    .sck-card-visual[b-ru1dww8r31] { max-width: 100%; }
    .sck-success-inner[b-ru1dww8r31] { padding: 40px 24px; }
    .sck-security-strip[b-ru1dww8r31] { gap: 14px; }
}
/* /Components/Pages/Terminos.razor.rz.scp.css */
/* Legal pages shared styles */
.legal-page[b-z702tzyv8m] {
    background: #fff;
    min-height: calc(100vh - 64px);
    font-family: "Inter", system-ui, sans-serif;
}

.legal-container[b-z702tzyv8m] {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.legal-breadcrumb[b-z702tzyv8m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--color-text-subtle);
    margin-bottom: 32px;
}

.legal-breadcrumb a[b-z702tzyv8m] {
    color: #64748b;
    text-decoration: none;
}

.legal-breadcrumb a:hover[b-z702tzyv8m] {
    color: #0d9488;
}

.legal-page h1[b-z702tzyv8m] {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin: 0 0 8px 0;
}

.legal-updated[b-z702tzyv8m] {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin: 0 0 40px 0;
}

.legal-page section[b-z702tzyv8m] {
    margin-bottom: 32px;
}

.legal-page h2[b-z702tzyv8m] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.legal-page p[b-z702tzyv8m] {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.75;
    margin: 0 0 12px 0;
}

.legal-page ul[b-z702tzyv8m] {
    margin: 0 0 12px 0;
    padding-left: 24px;
}

.legal-page li[b-z702tzyv8m] {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.75;
    margin-bottom: 4px;
}

.legal-page strong[b-z702tzyv8m] {
    color: #334155;
}

@media (max-width: 640px) {
    .legal-container[b-z702tzyv8m] {
        padding: 24px 16px 60px;
    }
    .legal-page h1[b-z702tzyv8m] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/VerificarEmail.razor.rz.scp.css */
.verify-page[b-nz6m3b6dv9] {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 40px 20px;
    font-family: "Inter", system-ui, sans-serif;
}

.verify-card[b-nz6m3b6dv9] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.verify-icon[b-nz6m3b6dv9] {
    margin: 0 auto 20px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-icon--loading[b-nz6m3b6dv9] { background: #f0fdfa; animation: pulse-b-nz6m3b6dv9 1.5s ease-in-out infinite; }
.verify-icon--success[b-nz6m3b6dv9] { background: #f0fdfa; }
.verify-icon--error[b-nz6m3b6dv9] { background: #fef2f2; }

@keyframes pulse-b-nz6m3b6dv9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.verify-card h2[b-nz6m3b6dv9] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}

.verify-card p[b-nz6m3b6dv9] {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 24px;
}

.verify-btn[b-nz6m3b6dv9] {
    display: inline-block;
    padding: 12px 32px;
    background: #0d9488;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    transition: background 0.15s;
}

.verify-btn:hover[b-nz6m3b6dv9] {
    background: #0f766e;
    color: #fff;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* Plan Fase 2.5 — empty state genérico. */

.es-wrap[b-nlnuxmsyos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    background: var(--color-surface);
    border: 1px dashed var(--color-divider);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    gap: 6px;
}

.es-icon[b-nlnuxmsyos] {
    color: var(--color-text-disabled);
    margin-bottom: 8px;
}

.es-titulo[b-nlnuxmsyos] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.2px;
}

.es-subtitulo[b-nlnuxmsyos] {
    max-width: 420px;
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.es-cta[b-nlnuxmsyos] {
    display: inline-block;
    padding: 10px 22px;
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: "Sora", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.es-cta:hover[b-nlnuxmsyos] {
    background: var(--color-brand-dark);
    transform: translateY(-1px);
    color: #fff;
}
/* /Components/Shared/SkeletonCard.razor.rz.scp.css */
/* Plan Fase 2.5 — skeleton genérico con shimmer animation.
   El shimmer es un gradient de 3 stops que se desplaza con keyframes:
   funciona en cualquier fondo y respeta tokens.css. */

.sk-card[b-f0qcrzs2i0] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sk-card--compact[b-f0qcrzs2i0] { border-radius: var(--radius-md); }
.sk-card--tall .sk-card-img[b-f0qcrzs2i0] { aspect-ratio: 3/4; }

.sk-card-img[b-f0qcrzs2i0] {
    aspect-ratio: 4/3;
    background: var(--color-bg);
}

.sk-card-body[b-f0qcrzs2i0] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-line[b-f0qcrzs2i0] {
    height: 12px;
    border-radius: 4px;
    background: var(--color-bg);
}

.sk-line--price[b-f0qcrzs2i0] {
    height: 18px;
    width: 50%;
    margin-bottom: 4px;
}

.sk-line--short[b-f0qcrzs2i0] {
    width: 35%;
}

/* Shimmer: gradient horizontal que se mueve de -100% a 100%. */
.sk-shimmer[b-f0qcrzs2i0] {
    position: relative;
    overflow: hidden;
    background: var(--color-border-soft);
}

.sk-shimmer[b-f0qcrzs2i0]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: skShimmer-b-f0qcrzs2i0 1.4s linear infinite;
    transform: translateX(-100%);
}

@keyframes skShimmer-b-f0qcrzs2i0 {
    100% { transform: translateX(100%); }
}

/* Honra prefers-reduced-motion: usuarios con motion sensitivity ven el
   placeholder estático en vez de animado. */
@media (prefers-reduced-motion: reduce) {
    .sk-shimmer[b-f0qcrzs2i0]::after { animation: none; }
}
/* /Components/Shared/Toast.razor.rz.scp.css */
/* Plan Fase 2.5 — toast (snackbar) flotante. */

.toast[b-e13p4dwq6p] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 420px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-family: "Sora", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toastIn-b-e13p4dwq6p 0.2s ease-out;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.toast-icon[b-e13p4dwq6p] { display: flex; align-items: center; }

.toast-msg[b-e13p4dwq6p] { flex: 1; line-height: 1.4; }

.toast-close[b-e13p4dwq6p] {
    background: transparent;
    border: none;
    color: var(--color-text-subtle);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.toast-close:hover[b-e13p4dwq6p] { color: var(--color-text); }

/* Variants */
.toast--success[b-e13p4dwq6p] {
    background: #f0fdf4;
    border-color: var(--color-success);
    color: #064e3b;
}
.toast--success .toast-icon[b-e13p4dwq6p] { color: var(--color-success); }

.toast--error[b-e13p4dwq6p] {
    background: #fef2f2;
    border-color: var(--color-error);
    color: #7f1d1d;
}
.toast--error .toast-icon[b-e13p4dwq6p] { color: var(--color-error); }

.toast--warn[b-e13p4dwq6p] {
    background: #fffbeb;
    border-color: var(--color-warning);
    color: #78350f;
}
.toast--warn .toast-icon[b-e13p4dwq6p] { color: var(--color-warning); }

.toast--info[b-e13p4dwq6p] { color: var(--color-info); }
.toast--info .toast-icon[b-e13p4dwq6p] { color: var(--color-info); }

@keyframes toastIn-b-e13p4dwq6p {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-e13p4dwq6p] { animation: none; }
}
/* /Components/VisitaCalendar.razor.rz.scp.css */
/* Estilos del calendario movidos a wwwroot/app.css (clases .vcal-*).
   Esto evita problemas con el bundle de scoped CSS de Blazor cuando se
   agregan clases nuevas y el bundle no se regenera. */