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

:root {
    /* === Sistema de Diseño Hablam v4 "h_dots" (estilo limpio) ===
       Nombres antiguos conservados, valores remapeados a la paleta v4. */
    /* Fondos */
    --bg-dark: #1E1E1E;
    --bg-warm-cream: #ECEAE3;
    --bg-soft-cream: #F5F3ED;
    --bg-glacial: #F5F3ED;
    --bg-white: #F5F3ED;
    /* Tarjetas */
    --card-beige: #E4E1D9;
    --card-peach: #F5D9C0;
    --card-sage: #D9E8D9;
    --card-celeste: #C8E3EA;
    /* Texto */
    --text-primary: #1E1E1E;
    --text-secondary: #6A6862;
    --text-muted: #6A6862;
    /* Acentos */
    --accent-black: #1E1E1E;
    --accent-green: #4A7C59;
    --accent-gold: #E0C882;
    --accent-terracota: #B8410F;
    /* Compatibilidad con código existente */
    --primary-color: #F15A24;
    --primary-gradient: #F15A24;
    --bg-color: #ECEAE3;
    --surface-color: #F5F3ED;
    --shadow-dark: rgba(30,30,30,0.06);
    --shadow-light: rgba(30,30,30,0.0);
    /* Tokens v4 nuevos */
    --acento: #F15A24;
    --acento-osc: #D94D18;
    --acento-texto: #B8410F;
    --linea: rgba(30,30,30,.10);
    /* Espaciado */
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    /* Radios */
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-full: 999px;
    /* Tipografía */
    --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ═══ Modo oscuro (paleta noche v4) ═══ */
[data-theme="noche"] {
    --bg-dark: #0F0E0D;
    --bg-warm-cream: #161513;
    --bg-soft-cream: #201F1C;
    --bg-glacial: #201F1C;
    --bg-white: #201F1C;
    --card-beige: #2A2825;
    --text-primary: #F1EFE9;
    --text-secondary: #9A9892;
    --text-muted: #9A9892;
    --accent-black: #201F1C;
    --bg-color: #161513;
    --surface-color: #201F1C;
    --shadow-dark: rgba(0,0,0,0.45);
    --shadow-light: rgba(0,0,0,0);
    --papel: #161513;
    --papel-elev: #201F1C;
    --tinta: #F1EFE9;
    --tinta-suave: #9A9892;
    --gris-claro: #3A3833;
    --linea: rgba(241,239,233,.12);
}
/* Ajustes de superficies con color fijo en modo oscuro */
[data-theme="noche"] .mini-survey-card { background: #201F1C; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
[data-theme="noche"] .mini-survey-greeting,
[data-theme="noche"] .mini-survey-option label { color: #F1EFE9; }
[data-theme="noche"] .mini-survey-option { border-bottom-color: rgba(241,239,233,.10); }
[data-theme="noche"] .prog-card { background: rgba(47,191,78,.12); border-color: rgba(47,191,78,.34); }
[data-theme="noche"] .prog-label { color: #F1EFE9; }
[data-theme="noche"] .prog-bar { background: #3A3833; }
[data-theme="noche"] .message.alba .message-bubble { background: #201F1C; border-color: rgba(241,239,233,.10); color: #F1EFE9; }
[data-theme="noche"] .message.user .message-bubble { background: var(--acento); color: #1B1E30; }
[data-theme="noche"] .chat-input-bar { background: #201F1C; border-color: rgba(241,239,233,.12); }
[data-theme="noche"] .chat-input-field { color: #F1EFE9; }
[data-theme="noche"] .menu-ic { background: rgba(241,239,233,.08); color: #F1EFE9; }
[data-theme="noche"] .faq-item { background: #201F1C; }
[data-theme="noche"] .neumorphic-button:hover,
[data-theme="noche"] .menu-item:hover { background: rgba(241,239,233,.07); }

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

body {
    font-family: var(--font);
    background-color: var(--bg-warm-cream);
    background-image: url('https://hablam-alba-assets.s3.eu-west-1.amazonaws.com/email/email_trama_dots.png');
    background-repeat: repeat;
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-warm-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.logo-splash {
    width: 120px;
    height: 120px;
}

.logo-circle-splash {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.loading-text {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
    max-width: 480px;
    width: 100%;
    background: var(--bg-color);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

.app-container.hidden {
    display: none;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 12px;
    background: var(--bg-warm-cream);
    border-bottom: 1px solid var(--linea);
    min-height: 56px;
}

/* Bloque identidad ALBA + estado (v4/v5) — en una sola línea */
.id-alba { flex: 1; min-width: 0; padding-left: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.id-alba h1 {
    font-family: var(--font);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.4px;
    color: var(--tinta);
    line-height: 1.1;
    flex: none;
}
.id-alba .estado {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--tinta-suave);
    margin-top: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.punto-vivo {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--verde, #2FBF4E);
    animation: latido 2.4s ease-in-out infinite;
    flex: none;
}
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47,191,78,.5); }
    50% { box-shadow: 0 0 0 6px rgba(47,191,78,0); }
}

/* Campana de Notificaciones (botón derecho del header en la Home) */
.bell-btn { position: relative; }
.header-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 17px; height: 17px;
    border-radius: 999px;
    background: var(--acento);
    color: #1E1E1E;
    font-size: 10px; font-weight: 800;
    display: grid; place-items: center;
    padding: 0 4px; line-height: 1;
    border: 2px solid var(--bg-warm-cream);
}

.header-left {
    width: 44px;
}

.header-title {
    flex: 1;
    text-align: center;
}

.header-title h1 {
    font-size: 13px;
    font-weight: 600;
    color: #1E1E1E;
    margin-bottom: 1px;
    letter-spacing: -0.01em;
}

.header-title p {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.header-right {
    width: 44px;
}

.neumorphic-button {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tinta);
    transition: background 0.2s ease, transform 0.15s ease;
}

.neumorphic-button:hover {
    background: rgba(30, 30, 30, 0.06);
}

.neumorphic-button:active {
    background: rgba(30, 30, 30, 0.06);
    transform: scale(0.92);
}

.chat-main {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-warm-cream);
    -webkit-overflow-scrolling: touch;
}

.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    text-align: center;
    padding: 0 20px;
    padding-top: 32px;
}

.logo-main {
    width: 240px;
    margin-bottom: var(--spacing-lg);
}

.welcome-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--tinta);
    margin-bottom: var(--spacing-md);
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.welcome-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Botón HABLA CON ALBA */
.welcome-cta-btn {
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    border-radius: 999px;
    padding: 14px 34px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(30,30,30,.10);
    transition: transform 0.15s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.welcome-cta-btn:active {
    transform: scale(0.96);
    background: var(--acento-osc);
}

/* ═══ Carrusel tarjetas flotantes ═══ */
/* ═══ Carrusel circular "vivo" (Prototipo v5) ═══ */
.carousel-viewport {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 0;
    margin-bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.carousel-track {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.6s cubic-bezier(.34,1.45,.5,1);
    will-change: transform;
}
.carousel-card {
    flex: none;
    width: 172px;
    height: 172px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    transition: transform 0.6s cubic-bezier(.34,1.45,.5,1), opacity 0.6s ease;
    opacity: 0.55;
    transform: scale(0.82);
    box-shadow: 0 1px 2px rgba(30,30,30,.06), 0 8px 28px rgba(30,30,30,.10);
}
.carousel-card.active {
    opacity: 1;
    transform: scale(1);
}
.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
/* Las etiquetas por tarjeta se ocultan: se usa una sola leyenda bajo el carrusel */
.carousel-card .card-label { display: none; }

.carousel-caption {
    text-align: center;
    margin: 16px 0 4px;
    min-height: 46px;
}
.carousel-caption .small {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--tinta-suave);
}
.carousel-caption .big {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--acento-texto);
    margin-top: 2px;
}
.card-label {
    font-family: 'Manrope', sans-serif;
    color: #6A6862;
    text-align: center;
    margin: 10px 0 0 0;
    line-height: 1.3;
}
.card-label-small {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.card-label-big {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--acento-texto);
}

/* Esfera animada en bienvenida */
.welcome-sphere {
    width: 80px;
    height: 80px;
    margin-top: 16px;
    opacity: 0.85;
    border-radius: 50%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════ */
/* MINIENCUESTAS — 21 MAR 2026                                */
/* ═══════════════════════════════════════════════════════════ */

.mini-survey-container {
    padding: 0 20px;
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
}

.mini-survey-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    max-width: 400px;
    margin: 0 auto;
}

/* Avatar h_dots (monograma con fuente Doto) — Prototipo v5/v6 */
.mini-survey-avatar { display: flex; justify-content: center; margin-bottom: 14px; }
.avatar-dots {
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--acento);
    display: grid; place-items: center;
    font-family: 'Doto', monospace;
    font-weight: 800;
    font-variation-settings: 'ROND' 100, 'wght' 800;
    font-size: 30px; line-height: 1;
    color: #fff; letter-spacing: 1px;
}

/* Tarjeta de progreso "Cuánto te conoce ALBA" (Prototipo v6) — reutilizable Home + Tu Perfil */
.prog-card {
    background: #E9F6ED;
    border: 1px solid #BFE6C9;
    border-radius: 16px;
    padding: 16px 18px;
    margin: 4px 0 16px;
    text-align: left;
}
.prog-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.prog-emoji { font-size: 22px; line-height: 1; flex: none; }
.prog-label { font-size: 14.5px; font-weight: 700; color: var(--tinta); flex: 1; }
.prog-pct { font-weight: 800; color: #2C7A3F; font-size: 15px; }
.prog-bar { height: 9px; border-radius: 99px; background: var(--gris-claro); overflow: hidden; margin: 10px 0 8px; }
.prog-fill { height: 100%; background: #2FBF4E; border-radius: 99px; transition: width .6s cubic-bezier(.34,1.45,.5,1); }
.prog-text { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.5; }

.mini-survey-greeting {
    font-size: 16px;
    color: #1A1A1A;
    margin: 0 0 12px 0;
    font-weight: 600;
    line-height: 1.4;
}

.mini-survey-question {
    font-size: 14px;
    color: #555;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.mini-survey-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mini-survey-option {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0ebe3;
    cursor: pointer;
}

.mini-survey-option:last-child {
    border-bottom: none;
}

.mini-survey-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-right: 12px;
    accent-color: #F15A24;
    cursor: pointer;
}

.mini-survey-option label {
    font-size: 15px;
    color: #1A1A1A;
    cursor: pointer;
    flex: 1;
}

.mini-survey-separator {
    height: 1px;
    background: #d4cfc6;
    margin: 8px 0;
}

.mini-survey-option.optout label {
    color: #C62828;
    font-style: normal;
}

.mini-survey-submit {
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    background: #F15A24;
    color: #1E1E1E;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.mini-survey-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mini-survey-submit:not(:disabled):active {
    background: #D94D18;
}

.mini-survey-thankyou {
    text-align: center;
    padding: 20px 10px;
}

.mini-survey-thankyou-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.mini-survey-thankyou-text {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.5;
}

.mini-survey-askmore {
    display: inline-block;
    margin-top: 16px;
    padding: 13px 30px;
    background: #23A547;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(35,165,71,.28);
    transition: background 0.2s, transform 0.15s ease;
}

.mini-survey-askmore:hover { background: #1E8E3A; }
.mini-survey-askmore:active {
    background: #1E8E3A;
    transform: scale(0.97);
}

/* 🆕 07 MAR 2026: Botón COMPLETAR PRESENTACIÓN — estilo feedback (verde sage) */
.alba-interview-btn {
    display: block;
    margin: 8px 0 12px 0;
    padding: 11px 24px;
    border-radius: 999px;
    border: none;
    background: var(--acento);
    color: #1E1E1E;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.alba-interview-btn:hover {
    background: var(--acento-osc);
    transform: translateY(-1px);
}
.alba-interview-btn:active {
    transform: scale(0.97);
}
.alba-interview-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.messages-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.messages-container.hidden {
    display: none;
}

.message {
    display: flex;
    animation: slideIn 0.3s ease;
}

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

.message.user {
    justify-content: flex-end;
}

.message.alba {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 84%;
    padding: 13px 16px;
    border-radius: 20px;
    line-height: 1.5;
    font-size: 16px;
}

.message.user .message-bubble {
    background: var(--accent-black);
    color: #FFFFFF;
    border-bottom-right-radius: 8px;
}

.message.alba .message-bubble {
    background: var(--papel-elev);
    color: var(--tinta);
    border: 1px solid var(--linea);
    border-bottom-left-radius: 8px;
    box-shadow: 0 1px 2px rgba(30,30,30,.04), 0 8px 28px rgba(30,30,30,.06);
}

/* Etiqueta "ALBA" sobre la burbuja (Prototipo v4) */
.message.alba .message-bubble::before {
    content: "ALBA";
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--tinta-suave);
    margin-bottom: 4px;
}

/* 🆕 22 FEB 2026: Botones de acción inline en mensajes de ALBA */
.alba-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.alba-action-btn {
    padding: 10px 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.alba-action-btn.primary {
    background: var(--acento);
    color: #1E1E1E;
}

.alba-action-btn.primary:hover {
    background: var(--acento-osc);
    transform: translateY(-1px);
}

.alba-action-btn.secondary {
    background: #FCFBF8;
    color: var(--tinta);
    border: 1px solid var(--gris-claro);
}

.alba-action-btn.secondary:hover {
    border-color: var(--acento);
    color: var(--acento-texto);
}

/* Botón CREAR ENCUENTRO (botones de acción) — destacado naranja, objetivo nº1 */
.alba-action-btn.create-primary {
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(241,90,36,.22);
}
.alba-action-btn.create-primary:hover {
    background: var(--acento-osc);
    color: #1E1E1E;
    transform: translateY(-1px);
}
[data-theme="noche"] .alba-action-btn.create-primary {
    background: var(--acento);
    border: none;
    color: #1B1E30;
}

.alba-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.alba-action-btn.invitation {
    background: var(--acento);
    color: #1E1E1E;
    padding: 12px 22px;
    font-size: 15px;
    width: 100%;
    text-align: center;
}.alba-action-btn.invitation:hover {
    background: var(--acento-osc);
    transform: translateY(-1px);
}

.alba-action-btn.invitation:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 🆕 01 MAR 2026: Botones inline dentro del texto del mensaje */
.alba-inline-btn {
    display: block;
    margin: 6px 0;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid var(--gris-claro);
    background: #FCFBF8;
    color: var(--tinta);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.alba-inline-btn .ibtn-ic {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 7px;
}
/* Botón "REVISAR NO PREFERIDOS" (avoid): fondo negro + texto blanco (decisión JC 15 JUN) */
.alba-inline-btn.avoid {
    background: #1E1E1E;
    color: #F5F3ED;
    border: none;
}
.alba-inline-btn.avoid:hover {
    background: #000000;
    color: #F5F3ED;
    transform: translateY(-1px);
}
[data-theme="noche"] .alba-inline-btn.avoid {
    background: #000000;
    color: #F5F3ED;
    border: 1px solid #3A3833;
}
/* Texto explicativo encima del botón de no-preferidos */
.fav-avoid-hint {
    font-size: 14px;
    color: var(--tinta-suave);
    line-height: 1.5;
    margin: 10px 0 8px;
}
.alba-inline-btn:hover {    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}
/* Botón CREAR ENCUENTRO inline — destacado naranja (objetivo principal de la Comunidad) */
.alba-inline-btn.create-primary {
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(241,90,36,.22);
}
.alba-inline-btn.create-primary:hover {
    background: var(--acento-osc);
    color: #1E1E1E;
    transform: translateY(-1px);
}
/* Modo noche: pills claros del chat → superficie elevada oscura + borde sutil */
[data-theme="noche"] .alba-inline-btn,
[data-theme="noche"] .alba-action-btn.secondary {
    background: #2A2825;
    border-color: #3A3833;
    color: var(--tinta);
}
[data-theme="noche"] .alba-inline-btn.create-primary {
    background: var(--acento);
    border: none;
    color: #1B1E30;
}
.alba-inline-btn.invitation {
    background: var(--acento);
    color: #1E1E1E;
    border: none;
}
.alba-inline-btn.invitation:hover {
    background: var(--acento-osc);
    color: #1E1E1E;
    transform: translateY(-1px);
}
.alba-inline-btn.invitame {
    background: var(--papel-elev);
    color: var(--acento-texto);
    border: 1.5px solid var(--acento);
}
.alba-inline-btn.invitame:hover {
    background: rgba(241,90,36,.08);
    color: var(--acento-texto);
    transform: translateY(-1px);
}
.alba-inline-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.alba-inline-btn.feedback {
    background: var(--papel-elev);
    color: var(--tinta);
    border: 1px solid var(--linea);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}
.alba-inline-btn.feedback:hover {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}
/* 🔧 08 MAR 2026: Botón CANCELAR inline (rojo suave v4) */
.alba-inline-btn.cancel {
    background: rgba(176,0,32,.07);
    color: #B00020;
    border: 1px solid rgba(176,0,32,.22);
    font-size: 13px;
    padding: 6px 16px;
}
.alba-inline-btn.cancel:hover {
    background: rgba(176,0,32,.12);
    transform: translateY(-1px);
}
/* Botón Añadir a Favoritos inline (naranja tenue v4) */
.alba-inline-btn.alba-btn-fav {
    background: rgba(241,90,36,.10);
    color: var(--acento-texto);
    border: 1px solid rgba(241,90,36,.25);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
}
.alba-inline-btn.alba-btn-fav:hover {
    background: rgba(241,90,36,.16);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BOTONES CONTEXTUALES: Tipos icon e icon-text
   ═══════════════════════════════════════════════════════════════════════════════ */

.alba-action-btn.icon {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: var(--papel-elev);
    border: 1px solid var(--linea);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tinta);
    transition: all 0.2s ease;
}

.alba-action-btn.icon:hover {
    border-color: var(--acento);
    color: var(--acento-texto);
    box-shadow: 0 2px 8px rgba(241,90,36,0.15);
    transform: translateY(-1px);
}

.alba-action-btn.icon:active {
    transform: scale(0.95);
    transition: transform 150ms ease;
}

.alba-action-btn.icon-text {
    padding: 10px 18px;
    background: var(--papel-elev);
    border: 1px solid var(--linea);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tinta);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.alba-action-btn.icon-text:hover {
    border-color: var(--acento);
    color: var(--acento-texto);
    box-shadow: 0 2px 8px rgba(241,90,36,0.15);
    transform: translateY(-1px);
}

.alba-action-btn.icon-text:active {
    transform: scale(0.95);
    transition: transform 150ms ease;
}

.alba-action-btn.icon svg,
.alba-action-btn.icon-text svg {
    flex-shrink: 0;
}

/* 🆕 MEJORA 17 ABR 2026: Botones respuesta rápida feedback */
.alba-action-btn.feedback_quick {
    background: var(--papel-elev);
    color: var(--tinta);
    border: 1px solid var(--linea);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
}

.alba-action-btn.feedback_quick:hover {
    background: var(--papel);
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRÓXIMOS PASOS: Botones contextuales post-acción
   🆕 04 MAR 2026
   ═══════════════════════════════════════════════════════════════════════════════ */

.alba-next-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.alba-next-steps .next-step-label {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.alba-next-step-btn {
    padding: 9px 17px;
    border-radius: var(--radius-full);
    border: 1px solid var(--gris-claro);
    background: #FCFBF8;
    color: var(--tinta);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.alba-next-step-btn:hover {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}

.alba-next-step-btn:active {
    transform: scale(0.97);
}

.alba-next-step-btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Botón CREAR ENCUENTRO — destacado naranja (objetivo principal de la Comunidad) */
.alba-next-step-btn.create-primary {
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(241,90,36,.22);
}
.alba-next-step-btn.create-primary:hover {
    background: var(--acento-osc);
    color: #1E1E1E;
    transform: translateY(-1px);
}
[data-theme="noche"] .alba-next-step-btn {
    background: #2A2825;
    border-color: #3A3833;
}
[data-theme="noche"] .alba-next-step-btn.create-primary {
    background: var(--acento);
    border: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DATEPICKER: Selector de fecha modal
   ═══════════════════════════════════════════════════════════════════════════════ */

.alba-datepicker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.alba-datepicker {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: 300px;
    max-width: 90vw;
    font-family: 'Manrope', sans-serif;
    position: relative;
}

.alba-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-right: 28px;
}

.alba-datepicker-title {
    font-size: 16px;
    font-weight: 700;
    color: #1A1A1A;
}

.alba-datepicker-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.alba-datepicker-nav:hover:not(:disabled) {
    background: #F0F0F0;
}

.alba-datepicker-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.alba-datepicker-close:hover {
    background: #F0F0F0;
    color: #333;
}

.alba-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
}

.alba-datepicker-weekdays span {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    padding: 4px 0;
}

.alba-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.alba-datepicker-day {
    width: 100%;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    color: #1A1A1A;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alba-datepicker-day:hover:not(.disabled) {
    background: var(--card-sage, #D9E8D9);
    color: #2d5a3a;
}

.alba-datepicker-day.today {
    border: 2px solid var(--accent-green, #4A7C59);
    font-weight: 700;
}

.alba-datepicker-day.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.alba-datepicker-empty {
    width: 100%;
    aspect-ratio: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TIMEPICKER: Selector de hora desplegable
   ═══════════════════════════════════════════════════════════════════════════════ */

.alba-timepicker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.alba-timepicker {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: 180px;
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
    padding-top: 40px;
}

.alba-timepicker-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    text-align: center;
    border-bottom: 1px solid #E8E0D4;
}

.alba-timepicker .alba-datepicker-close {
    position: absolute;
    top: 6px;
    right: 8px;
}

.alba-timepicker-list {
    max-height: 300px;
    overflow-y: auto;
}

.alba-timepicker-option {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #1A1A1A;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
    font-family: inherit;
}

.alba-timepicker-option:hover {
    background: var(--card-sage, #D9E8D9);
}

.voice-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.voice-animation.hidden {
    display: none;
}

.sphere-animation {
    width: 200px;
    height: 200px;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-full);
}

.voice-status {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.chat-footer {
    background: var(--bg-warm-cream);
    padding: 8px 20px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
}


.qb-label {
    line-height: 1;
}

/* === NUEVO CHAT INPUT BAR === */
.chat-input-bar {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 10px 14px 8px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.chat-input-field {
    width: 100%;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    background: transparent;
    margin-bottom: 8px;
    resize: none;
    min-height: 22px;
    max-height: 100px;
    line-height: 1.4;
}

.chat-input-field::placeholder {
    color: #AAAAAA;
}

.chat-input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-input-left {
    display: flex;
    align-items: center;
}

.chat-input-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botón + (nuevo encuentro) */
.btn-input-add {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-input-add:active {
    background: var(--card-beige);
    transform: scale(0.94);
}

/* Botón micrófono */
.btn-input-mic {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-input-mic:active {
    background: var(--card-beige);
    transform: scale(0.94);
}

/* Botón waveform (voz activa / hablar con ALBA) */
.btn-input-waveform {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--accent-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-input-waveform:active {
    background: #333333;
    transform: scale(0.97);
}

/* Botón enviar (aparece al escribir) */
.btn-input-send {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--acento);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-input-send:active {
    background: var(--acento-osc);
    transform: scale(0.97);
}

/* Botón stop (ALBA respondiendo) */
.btn-input-stop {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: var(--bg-warm-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-input-stop:active {
    background: var(--card-beige);
    transform: scale(0.94);
}

/* === ESTADOS DEL CHAT INPUT === */

/* Estado: ALBA respondiendo */
.chat-input-bar.state-alba-responding .chat-input-right .btn-input-mic,
.chat-input-bar.state-alba-responding .chat-input-right .btn-input-waveform {
    display: none;
}

/* Estado: Grabando voz */
.chat-input-bar.state-recording {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0;
}

/* Estado: Escribiendo (con texto) */
.chat-input-bar.state-typing .chat-input-right .btn-input-mic,
.chat-input-bar.state-typing .chat-input-right .btn-input-waveform {
    display: none;
}

/* Ocultar elementos viejos del footer */
.voice-button-container {
    display: none;
}

.button-container {
    display: none !important;
}

/* === PUNTOS DE ESCRITURA (ALBA pensando) — Prototipo v2/v4 === */
.typing-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 18px;
    padding: 2px 0;
}
.typing-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--acento);
    display: block;
    animation: alba-onda 1.15s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes alba-onda {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-7px); opacity: 1; }
}

/* === ECUALIZADOR DE VOZ MULTICOLOR (grabando) — Prototipo v2/v4 === */
/* (multicolor permitido SOLO en el ecualizador de voz, Guía v4) */
.voice-eq { display: none; }
.chat-input-bar.state-recording .voice-eq {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.chat-input-bar.state-recording .chat-input-field,
.chat-input-bar.state-recording .chat-input-actions {
    display: none;
}
.voice-eq-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
    flex: none;
}
.voice-eq-bars {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 44px;
}
.voice-eq-bars i {
    width: 7px;
    border-radius: 99px;
    display: block;
    animation: voice-eq 1s ease-in-out infinite;
}
@keyframes voice-eq {
    0%, 100% { height: 8px; }
    50% { height: 30px; }
}
.voice-eq-stop {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    border: none;
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease;
}
.voice-eq-stop:active { transform: scale(0.94); }
.voice-eq-stop svg { width: 18px; height: 18px; }
[data-theme="noche"] .voice-eq-text { color: #F1EFE9; }
[data-theme="noche"] .voice-eq-stop { background: #F1EFE9; color: #161513; }
@media (prefers-reduced-motion: reduce) {
    .typing-dots i, .voice-eq-bars i { animation-duration: .01ms; }
}

/* Botones legacy (ocultos, mantenidos por compatibilidad) */
.neumorphic-button-small {
    display: none;
}

.neumorphic-button-primary {
    display: none;
}

/* === Estados de voz (aplicados al input bar) === */
.voice-button.state-idle {
    /* sin estilo especial */
}

.voice-button.state-listening {
    animation: pulse-listening 1.5s ease-in-out infinite;
}

@keyframes pulse-listening {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(192, 120, 64, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(192, 120, 64, 0);
    }
}

.voice-button.state-processing {
    /* sin estilo especial */
}

.voice-button.state-processing svg {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.voice-button.state-speaking {
    animation: pulse-speaking 0.8s ease-in-out infinite;
}

@keyframes pulse-speaking {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.menu-overlay.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.menu-content {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    background: var(--bg-warm-cream);
    overflow-y: auto;
    animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.menu-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px;
    background: var(--bg-warm-cream);
    border-bottom: 1px solid var(--linea);
}
.menu-title {
    flex: 1;
    text-align: center;
    font-family: var(--font);
    font-weight: 600;
    font-size: 17px;
    color: var(--tinta);
    margin: 0;
}
.menu-header-spacer { width: 44px; flex: none; }

.menu-header .header-title h1 {
    font-size: 13px;
    font-weight: 600;
    color: #1E1E1E;
}

.menu-header .header-title p {
    font-size: 11px;
    color: var(--text-muted);
}

.close-menu-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.menu-sections {
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
}

.menu-section {
    margin-bottom: var(--spacing-lg);
}

.menu-section h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta-suave);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.menu-item {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 2px;
    background: transparent;
    border: none;
    border-radius: 14px;
    text-align: left;
    font-size: 14.5px;
    color: var(--tinta);
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font);
    flex-wrap: nowrap;
    line-height: 1.25;
}

.menu-item:hover { background: rgba(30,30,30,.05); }
.menu-item:active { background: rgba(30,30,30,.08); }

/* Caja de icono monocromo del menú (Prototipo v4) */
.menu-ic {
    width: 36px; height: 36px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    background: rgba(30,30,30,.06);
    color: var(--tinta);
}
.menu-ic svg { width: 19px; height: 19px; }
.menu-label { flex: 1; min-width: 0; }

/* Badges dentro de menu-items: empujar a la derecha */
.menu-item .badge,
.menu-item .badge-coming {
    margin-left: auto;
    flex-shrink: 0;
}

/* Botón Crear Encuentro — destacado naranja */
.menu-item-create {
    background: rgba(241,90,36,.10);
    border: 1.5px solid var(--acento);
    font-weight: 700;
    color: var(--acento-texto);
    font-size: 15px;
}
.menu-item-create:active {
    background: rgba(241,90,36,.16);
}

/* Botón ¡Sorpréndeme! — fila normal */
.menu-item-surprise {
    background: transparent;
    border: none;
    font-weight: 600;
    color: var(--tinta);
}
.menu-item-surprise:active {
    background: rgba(30,30,30,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MENÚ COLAPSABLE (Acordeón) — 20 MAR 2026
   ═══════════════════════════════════════════════════════════════════════════════ */

.menu-collapsible {
    margin-bottom: 8px;
}

.menu-section-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
}

.menu-section-toggle h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta-suave);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

.menu-section-toggle .toggle-arrow {
    width: 26px;
    height: 26px;
    font-size: 0;
    color: var(--tinta-suave);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 24px no-repeat;
    transition: transform 0.25s ease;
    display: inline-block;
    flex: none;
}

.menu-section-toggle[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

.menu-section-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 500px;
    opacity: 1;
}

.menu-section-body.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Botón CERRAR SESIÓN — fondo negro, destacado */
.menu-section-logout {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.menu-item-logout {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    justify-content: center;
    border: none !important;
    border-radius: var(--radius-sm);
    padding: 14px var(--spacing-md);
}

.menu-item-logout:active {
    background: #333333 !important;
    transform: scale(0.98);
}

/* Botón PREGUNTAS FRECUENTES — destacado naranja (Prototipo v4) */
.menu-item-faqs {
    background: transparent;
    border: 1.5px solid var(--acento);
    color: var(--acento-texto);
    margin: 10px 0 4px;
    font-weight: 700;
}
.menu-item-faqs:hover { background: rgba(241,90,36,.06); }
.menu-item-faqs:active { background: rgba(241,90,36,.10); }
.menu-item-faqs .menu-ic { background: rgba(241,90,36,.14); color: var(--acento-texto); }

/* Pie de versión del menú (paridad con la app) */
.menu-version-footer {
    text-align: center;
    padding: 14px 14px 18px;
    margin-top: 8px;
    border-top: 1px solid var(--linea);
}
.menu-foot-logo { height: 30px; width: auto; opacity: .5; margin: 0 auto 8px; display: block; }
.menu-version-footer .ver-app { font-size: 11.5px; font-weight: 600; color: var(--tinta); margin: 0 0 6px; }
.menu-version-footer p {
    font-size: 11px;
    color: var(--tinta-suave);
    margin: 0;
    line-height: 1.7;
}
.menu-version-footer .corazon { margin-top: 8px; }

/* Badge "Próximamente" / "Solo en App" — contorno suave */
.badge-coming {
    background: transparent;
    color: var(--tinta-suave);
    border: 1px solid var(--linea);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Badge "✓ Activa" — tinta (paridad con la app) */
.badge-active {
    background: var(--tinta);
    color: var(--papel);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Notificaciones item independiente */
.menu-item-notifications {
    font-weight: 600;
    color: var(--text-primary);
}

.badge {
    background: var(--acento);
    color: #1E1E1E;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 800;
    flex: none;
    min-width: 22px;
    text-align: center;
}

.badge-blue { background: var(--acento); color: #1E1E1E; }

.badge-green { background: var(--acento); color: #1E1E1E; }

.badge-orange { background: var(--acento); color: #1E1E1E; }

.menu-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--bg-warm-cream);
    padding: var(--spacing-md) 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.menu-footer a {
    color: var(--accent-terracota);
    text-decoration: none;
}

.menu-footer .copyright {
    margin-top: 8px;
    font-size: 9px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    background: var(--bg-warm-cream);
    overflow-y: auto;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 20px;
    background: var(--bg-warm-cream);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-header .header-title h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-header .header-title p {
    font-size: 11px;
    color: var(--text-muted);
}

.close-modal-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.modal-body {
    padding: var(--spacing-md);
    padding-bottom: 80px;
}

.profile-info {
    margin-bottom: var(--spacing-lg);
}

.profile-info p {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-primary);
}

.profile-info p strong {
    color: var(--accent-terracota);
}

.profile-menu-item {
    width: 100%;
    padding: var(--spacing-md);
    margin-bottom: 8px;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font);
}

.profile-menu-item:active {
    background: var(--card-beige);
    transform: scale(0.98);
}

.profile-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--bg-warm-cream);
    padding: var(--spacing-md) 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.profile-footer a {
    color: var(--accent-terracota);
    text-decoration: none;
}

.profile-footer .copyright {
    margin-top: 8px;
    font-size: 9px;
}

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ESTILOS PARA MODAL DE FAQs - 13 ENE 2026
   ═══════════════════════════════════════════════════════════════════════════════ */

.faqs-modal {
    max-height: 90vh;
}

.faqs-body {
    max-height: calc(90vh - 80px);
    overflow-y: auto;
    padding-bottom: 20px !important;
}

.faq-section {
    margin-bottom: var(--spacing-lg);
}

.faq-section h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta-suave);
    margin-bottom: var(--spacing-sm);
    padding-left: 4px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.faq-item {
    width: 100%;
    padding: 13px var(--spacing-md);
    margin-bottom: 6px;
    background: var(--papel-elev);
    border: 1px solid var(--linea);
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: 14.5px;
    color: var(--tinta);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font);
}

.faq-item:hover {
    background: var(--papel-elev);
    border-color: var(--acento);
    color: var(--acento-texto);
}

.faq-item:active {
    background: var(--papel);
    transform: scale(0.98);
}

/* FAQs colapsables por bloques — 20 MAR 2026 */
.faq-section-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
}

.faq-section-toggle h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta-suave);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

.faq-section-toggle .toggle-arrow {
    width: 24px;
    height: 24px;
    font-size: 0;
    color: var(--tinta-suave);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 22px no-repeat;
    transition: transform 0.25s ease;
    display: inline-block;
    flex: none;
}

.faq-section-toggle[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

.faq-section-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 800px;
    opacity: 1;
}

.faq-section-body.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ESTILOS PARA PÁGINAS DE CONTENIDO (Guías) - 30 ENE 2026
   ═══════════════════════════════════════════════════════════════════════════════ */

.content-page {
    min-height: 100vh;
    background-color: var(--bg-color);
    background-image: url('https://hablam-alba-assets.s3.eu-west-1.amazonaws.com/email/email_trama_dots.png');
    background-repeat: repeat;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix scroll en páginas legales standalone (accedidas desde register.html o directamente) */
body:has(> .content-page) {
    overflow: auto;
    height: auto;
}

.content-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-dark);
    color: var(--bg-warm-cream);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-button {
    display: none; /* 🔧 FIX 11 ABR 2026: Ocultar flecha — no funciona desde la app */
}

.content-header h1 {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.content-body {
    padding: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.content-section {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--linea);
    box-shadow: 0 1px 2px rgba(30,30,30,.04), 0 8px 28px rgba(30,30,30,.06);
}

.content-section a {
    color: var(--acento-texto);
    text-decoration: underline;
    font-weight: 600;
}

.content-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.content-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.content-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.content-section ul,
.content-section ol {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.content-section li {
    margin-bottom: var(--spacing-sm);
}

.info-card {
    background: var(--bg-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--primary-color);
}

.info-card.warning {
    border-left-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 10%, transparent);
}

.info-card.success {
    border-left-color: var(--verde);
    background: color-mix(in srgb, var(--verde) 12%, transparent);
}

.info-card.danger {
    border-left-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, transparent);
}

.action-btn-content {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-btn-content:hover {
    transform: translateY(-2px);
    background: var(--acento-osc);
}

/* Alias v4 para enlaces/botones de acción de las guías que usan `action-btn` */
.action-btn,
.content-modal-body .action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.action-btn:hover,
.content-modal-body .action-btn:hover {
    transform: translateY(-2px);
    background: var(--acento-osc);
    color: #1E1E1E;
}

.content-footer {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 12px;
}

.content-footer img {
    width: 80px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ESTILOS PARA MODAL DE CONTENIDO EMBEBIDO - 30 ENE 2026
   Muestra contenido de guías dentro del frame de la app
   ═══════════════════════════════════════════════════════════════════════════════ */

.content-modal {
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-modal .modal-header {
    flex-shrink: 0;
    background: var(--bg-dark);
    color: white;
    border-bottom: none;
}

.content-modal .modal-header .header-title h1 {
    color: var(--bg-warm-cream);
    font-size: 15px;
}

.content-modal .modal-header .close-modal-btn {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    box-shadow: none;
    border-radius: 12px;
}

.content-modal .modal-header .close-modal-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.content-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
    -webkit-overflow-scrolling: touch;
}

/* Estilos para el contenido cargado dinámicamente */
.content-modal-body .content-section {
    background: var(--bg-white);
    border-radius: 18px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.content-modal-body h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.content-modal-body h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.content-modal-body p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    font-size: 14px;
}

.content-modal-body ul,
.content-modal-body ol {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
    font-size: 14px;
}

.content-modal-body li {
    margin-bottom: var(--spacing-sm);
}

.content-modal-body .info-card {
    background: var(--bg-soft-cream);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--accent-terracota);
    font-size: 13px;
}

.content-modal-body .info-card.warning {
    border-left-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 10%, transparent);
}

.content-modal-body .info-card.success {
    border-left-color: var(--verde);
    background: color-mix(in srgb, var(--verde) 12%, transparent);
}

.content-modal-body .info-card.danger {
    border-left-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, transparent);
}

.content-modal-body a {
    color: var(--accent-terracota);
    text-decoration: none;
}

.content-modal-body a:hover {
    text-decoration: underline;
}

/* Botón de acción dentro del contenido */
.content-modal-body .action-btn-content {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--accent-black);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font);
}

/* Loading state */
.content-modal-body .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.content-modal-body .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--accent-terracota);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BOTONES DE FAVORITOS: Panel de selección en flujo de creación de encuentro
   🆕 05 MAR 2026
   ═══════════════════════════════════════════════════════════════════════════════ */

.alba-fav-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.alba-fav-btn {
    padding: 11px 20px;
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 🆕 12 JUL 2026 (v4): icono outline monocromo dentro de los botones de favoritos */
.alba-fav-btn .fav-btn-ic {
    flex-shrink: 0;
    color: var(--tinta-suave);
}
.alba-fav-btn:hover:not(:disabled) .fav-btn-ic {
    color: var(--acento-texto);
}
.alba-fav-btn.fav-confirm .fav-btn-ic,
.alba-fav-btn.fav-confirm:hover:not(:disabled) .fav-btn-ic {
    color: #1E1E1E;
}
[data-theme="noche"] .alba-fav-btn .fav-btn-ic {
    color: #9A9892;
}

.alba-fav-btn.fav-all {
    background: #FCFBF8;
    color: var(--tinta);
    border: 1px solid var(--gris-claro);
}

.alba-fav-btn.fav-all:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}

.alba-fav-btn.fav-some {
    background: #FCFBF8;
    color: var(--tinta);
    border: 1px solid var(--gris-claro);
}

.alba-fav-btn.fav-some:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}

.alba-fav-btn.fav-alba {
    background: #FCFBF8;
    color: var(--tinta);
    border: 1px solid var(--gris-claro);
}

.alba-fav-btn.fav-none {
    background: #FCFBF8;
    color: var(--tinta);
}

.alba-fav-btn.fav-none:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
}

.alba-fav-btn.fav-alba:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}

[data-theme="noche"] .alba-fav-btn.fav-all,
[data-theme="noche"] .alba-fav-btn.fav-some,
[data-theme="noche"] .alba-fav-btn.fav-none,
[data-theme="noche"] .alba-fav-btn.fav-alba {
    background: #2A2825;
    border-color: #3A3833;
    color: #F1EFE9;
}

.alba-fav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.alba-fav-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Panel de checkboxes para selección de favoritos */
.alba-fav-checkbox-panel {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 12px;
    margin-top: 8px;
    animation: slideIn 0.2s ease;
}
[data-theme="noche"] .alba-fav-checkbox-panel { background: #201F1C; }

.fav-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta-suave);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fav-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.fav-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.fav-checkbox-item:hover {
    background: rgba(30, 30, 30, 0.04);
}
[data-theme="noche"] .fav-checkbox-item:hover { background: rgba(241,239,233,0.06); }

.fav-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--acento);
    cursor: pointer;
    flex-shrink: 0;
}

.fav-checkbox-name {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tinta);
}

.alba-fav-btn.fav-confirm {
    background: var(--acento);
    color: #1E1E1E;
    border: none;
    margin-top: 4px;
}

.alba-fav-btn.fav-confirm:hover:not(:disabled) {
    background: var(--acento-osc);
    color: #fff;
    transform: translateY(-1px);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* 🆕 v3.41: Estilos para checkboxes de feedback */
.feedback-cb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alba-feedback-read-pb {
    background: var(--papel-elev);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 6px 8px;
    color: var(--tinta);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.alba-feedback-read-pb svg { width: 19px; height: 19px; display: block; }

.alba-feedback-read-pb:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: scale(1.08);
}

.alba-feedback-read-pb:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.alba-fav-btn.feedback-none-btn {
    background: #FCFBF8;
    color: var(--tinta);
    border: 1px solid var(--gris-claro);
}

.alba-fav-btn.feedback-none-btn:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
}

.alba-fav-btn.feedback-unblock-btn {
    background: #FCFBF8;
    color: var(--tinta);
    border: 1px solid var(--gris-claro);
}

.alba-fav-btn.feedback-unblock-btn:hover:not(:disabled) {
    border-color: var(--acento);
    color: var(--acento-texto);
    transform: translateY(-1px);
}
[data-theme="noche"] .alba-fav-btn.feedback-none-btn,
[data-theme="noche"] .alba-fav-btn.feedback-unblock-btn {
    background: #2A2825;
    border-color: #3A3833;
    color: #F1EFE9;
}


/* ── 21 JUN 2026: botones "VER FICHA" en listados de encuentros (paridad APP) ── */
.alba-ficha-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.alba-ficha-btn {
    align-self: flex-start;
    max-width: 100%;
    margin-top: 12px;
    background: var(--surface-color);
    color: var(--acento-texto);
    border: 1.5px solid var(--acento);
    border-radius: 999px;
    padding: 9px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    line-height: 1.25;
    transition: background 0.2s, transform 0.15s ease;
}
.alba-ficha-btn:hover { background: rgba(241,90,36,.08); transform: translateY(-1px); }
.alba-ficha-btn:active { transform: scale(0.98); }
.alba-ficha-btn:disabled { opacity: .55; cursor: default; transform: none; }
[data-theme="noche"] .alba-ficha-btn { background: #2A2825; border-color: var(--acento); color: var(--acento); }

/* Tarjeta de encuentro en el chat (paridad con EncounterCard de la APP) */
.alba-enc-text { margin: 4px 0; }
.alba-enc-card {
    background: var(--surface-color);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--acento);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 10px 0;
}
.alba-enc-card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}
.alba-enc-card-details {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.alba-enc-card .enc-name-link {
    color: var(--acento-texto);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
[data-theme="noche"] .alba-enc-card { background: #201F1C; }
[data-theme="noche"] .alba-enc-card .enc-name-link { color: var(--acento); }


/* ── 21 JUN 2026: botón destructivo sólido (Cancelar encuentro / Cancelar asistencia) ── */
.alba-inline-btn.alba-cancel-solid {
    background: #B00020;
    color: #FFFFFF;
    border: none;
    font-weight: 700;
}
.alba-inline-btn.alba-cancel-solid:hover {
    background: #8E0019;
    color: #FFFFFF;
    transform: translateY(-1px);
}


/* ── 21 JUN 2026: botón "Confirmar punto de encuentro" → verde + texto blanco ── */
.alba-inline-btn.alba-confirm-green {
    background: #157A34;
    color: #FFFFFF;
    border: none;
    font-weight: 700;
}
.alba-inline-btn.alba-confirm-green:hover {
    background: #11652B;
    color: #FFFFFF;
    transform: translateY(-1px);
}