:root {
    --bs-body-bg: #fcfbfa; /* Fondo general lino/marfil muy suave */
    --color-primary: #b89774; /* Tono champán / dorado suave */
    --color-secondary: #e6dfd5; /* Bordes y separadores sutiles */
    --color-text: #524d46; /* Texto gris cálido para lectura cómoda */
    --font-serif: "Playfair Display", Georgia, serif; /* Tipografía clásica para títulos */
}

body {
    background-color: var(--bs-body-bg);
    color: var(--color-text);
    font-family: 'Lora', 'Georgia', serif;
    letter-spacing: 0.3px;
}

/* Títulos con estilo clásico / serif */
h1, h2, h3, h4, .navbar-brand {
    font-family: var(--font-serif);
    font-weight: 600;
    color: #423d38;
}

/* Barra de navegación estilo invitación */
.navbar-custom {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--color-secondary);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-custom .navbar-brand {
    font-size: 1.4rem;
    letter-spacing: 1px;
    color: var(--color-primary) !important;
}

.navbar-custom .nav-link {
    color: #6b635b !important;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary);
}

/* Tarjetas con aspecto de papel fino */
.card {
    border: 1px solid #f0ece4;
    border-radius: 4px; /* Bordes ligeramente redondeados, más sobrios */
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(82, 77, 70, 0.04);
}

/* Timeline horizontal elegante */
#timeline-container {
    background-color: #ffffff;
    border: 1px solid #f0ece4;
    box-sizing: border-box;
}

/* Contenedor desplazable */
#timeline-container .timeline-wrapper {
    height: 70px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    margin: 0;
    box-sizing: border-box;
    /* Ocultar scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#timeline-container .timeline-wrapper::-webkit-scrollbar {
    display: none;
    height: 8px;
}

/* Línea base */
#timeline-container .timeline-line {
    position: absolute;
    top: 36px;
    height: 4px;
    border-radius: 4px;
    background: #e9e6e2;
}

/* Progreso */
#timeline-container .timeline-progress {
    position: absolute;
    top: 36px;
    height: 4px;
    width: 2px;
    border-radius: 4px;
    background: #b89774;
}

/* Track */
#timeline-container .timeline-track {
    position: relative;
    width: 100%;
    min-height: 70px;
}

/* Cada hito */
#timeline-container .timeline-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    box-sizing: border-box;
    pointer-events: auto;
    transform: translateX(-50%);
}

/* Texto del hito */
#timeline-container .timeline-item-content {
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2px;
}

/* Label */
#timeline-container .timeline-label {
    width: 132px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Círculo */
#timeline-container .timeline-circle-container {
    display: flex;
    justify-content: center;
    margin-top: 2px;
}

#timeline-container .timeline-circle {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #cfcfcf;
    background: #fff;
}

.timeline-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) #f0ece4;
}


/* Botones personalizados */
.btn-primary-login, .btn-primary-recover{
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    padding: 0.6rem 2rem;
    transition: background-color 0.3s ease;
}

.btn-primary-login:hover, .btn-primary-recover:hover{
    background-color: #a38260;
    border-color: #a38260;
    color: #ffffff;
}

.btn-primary-recover-view, .btn-primary-login-view{
    color: #a38260;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 1px;
    font-size: 0.9rem;
    padding: 0.6rem 2rem;
    margin-top: 0.5rem;
    transition: background-color 0.3s ease;
}

.btn-primary-recover-view:hover, .btn-primary-login-view:hover {
    background-color: #a38260;
    border-color: #a38260;
    color: #ffffff;
}

.label-recover{
    color: #4b351d;
    letter-spacing: 1px;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    justify-content: center;
}

/* Pie de página clásico */
footer {
    background-color: #f4efe6 !important;
    color: #7a7067 !important;
    border-top: 1px solid var(--color-secondary);
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
/* 1. Contenedor Flotante */
.status-toast {
    position: fixed;
    top: 1px;
    left: 50%;
    transform: translate(-50%, -18px);
    opacity: 0;
    z-index: 9999;
    pointer-events: none; /* Evita bloquear la pantalla */
    transition: opacity 0.28s ease, transform 0.35s ease;
    max-width: min(92vw, 720px);
    width: 100%;
}

.status-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 2. Caja de Contenido (Asegura interactividad y espacio para la cruz) */
.status-toast__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 2.5rem 0.75rem 1rem; /* 2.5rem a la derecha deja hueco para la cruz */
    border-radius: 0px 0px 12px 12px;
    background: rgba(221, 187, 212, 0.92);
    color: #222;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: normal;
    word-break: break-word;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: auto; /* IMPORTANTE: Permite hacer clic en la cruz y seleccionar texto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 3. Cuerpo del mensaje */
.status-toast__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* 4. Botón de cierre (Cruz alineada) */
.status-toast__close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%); /* Centrado vertical perfecto */
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px;
    z-index: 10;
    transition: opacity 0.2s ease-in-out;
}

.status-toast__close:hover {
    opacity: 1;
}

/* 5. Variaciones de color según tipo */
.status-toast[data-type="success"] .status-toast__content {
    background: rgba(170, 210, 194, 0.95);
    color: #0b6b36;
}

.status-toast[data-type="error"] .status-toast__content {
    background: rgba(237, 169, 169, 0.95);
    color: #a81308;
}

.status-toast[data-type="info"] .status-toast__content {
    background: rgba(150, 168, 208, 0.95);
    color: #1f116e;
}

/* Muro specific styles */
.muro-media {
    display: block;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    position: relative;
}
.muro-media img, .muro-media video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.muro-media .media-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}
.muro-reactions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.muro-reactions-row .emoji-btn {
    border: 1px solid #eee;
    background: #fff;
    padding: 6px 8px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.95rem;
}
.muro-reactions-row .emoji-badge {
    margin-left: 6px;
    font-size: 0.85rem;
    color: #333;
}
.comments-wrapper {
    margin-top: 12px;
}

/* Badge de estado de asistencia sobre el avatar */
.avatar-wrapper {
    position: relative;
    display: inline-block;
}
.status-badge-overlay {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.status-badge-overlay.asiste-si { background-color: #198754; }  /* Check verde */
.status-badge-overlay.asiste-pen { background-color: #ffc107; color: #000; } /* ? amarillo */
.status-badge-overlay.asiste-no { background-color: #dc3545; }  /* Cruz roja */

/* Popups flotantes de reacciones */
.reactions-popup, .picker-popup {
    position: absolute;
    z-index: 1050;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
}
.reactions-popup-content {
    max-height: 250px;
    overflow-y: auto;
    min-width: 220px;
}

/* Picker flotante para elegir emoji */
.picker-popup {
    position: absolute;
    z-index: 2100;
    background: #fff;
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid #e0e0e0;
}

.picker-popup .emoji-pick-btn {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.15s ease;
    padding: 2px 4px;
}

.picker-popup .emoji-pick-btn:hover {
    transform: scale(1.3);
}

/* 1. Ajuste de Imágenes para que NO se corten en altura */
.post-media-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-media-container img,
.post-media-container video {
    width: 100%;
    max-height: 600px; /* Permite más altura */
    object-fit: contain !important; /* Muestra la imagen completa sin recortarla */
}

/* 2. Barra Inferior en una ÚNICA Línea */
.post-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
    flex-wrap: nowrap !important; /* Fuerza una sola linea */
    gap: 8px;
}

.post-actions-bar .post-group-info,
.post-actions-bar .btn-action-post {
    white-space: nowrap; /* Evita saltos de linea dentro de cada item */
    font-size: 0.88rem;
    color: #65676b;
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-actions-bar .btn-action-post:hover {
    background-color: #f0f2f5;
    color: #050505;
}

.action-label {
    display: inline;
}
.btn-action-post {
    color: #555;
    font-weight: 500;
    text-decoration: none;
    border: none;
    background: transparent;
}
.btn-action-post:hover {
    color: #0d6efd;
}

/* Unificación de estilo entre input y select de comentarios */
.form-add-comment .comment-input,
.form-add-comment .comment-group-select {
    height: 38px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    font-size: 0.875rem;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-add-comment .comment-input:focus,
.form-add-comment .comment-group-select:focus {
    border-color: var(--color-primary, #b89774);
}
@media (max-width: 767.98px) {
    .action-label {
        display: none !important;
    }

    .btn-delete-post,
    .btn-link[data-post-id] {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    .form-add-comment .comment-group-select {
        margin-bottom: 0 !important; /* Elimina el mb-2 por defecto del helper de opciones */
        width: 100%;
    }    
    .form-add-comment .btn {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Popup Modal de Reacciones Centrado en Pantalla */
.reactions-modal-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2000 !important;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 420px;
    max-width: 92vw;
    border: 1px solid #e0e0e0;
    padding: 16px;
    overflow-x: hidden;
}

/* Overlay semitransparente para destacar el modal centrado */
.reactions-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1999;
    backdrop-filter: blur(2px);
}

/* Header del Modal */
.reactions-modal-header {
    font-size: 1.2rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 12px;
}

/* Pestañas / Tabs */
.reactions-tabs-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.reactions-tabs-bar::-webkit-scrollbar {
    display: none;
}

/* Botones de Pestaña con Emojis Más Grandes */
.reaction-tab-btn {
    flex-shrink: 0;
    font-size: 1.1rem; /* Emojis más grandes en las pestañas */
    padding: 4px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    border-radius: 4px;
}
.reaction-tab-btn:hover {
    background-color: #f0f2f5;
}
.reaction-tab-btn.active {
    color: #198754;
    font-weight: bold;
    border-bottom: 3px solid #198754;
    background-color: #e8f5e9;
}

/* Lista de Usuarios */
.reactions-user-list {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 10px;
}

.reaction-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Avatar y Emoji Superpuesto Grande */
.user-avatar-badge-wrap {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

.user-avatar-badge-wrap img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}
/* Badge de la Reacción sobre la foto (Más grande) */
.user-reaction-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 1.1rem; /* Emoji de reacción más grande sobre el avatar */
    line-height: 1;
    background: #ffffff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

.reaction-user-info {
    flex-grow: 1;
    line-height: 1.35;
}

.reaction-user-name {
    font-weight: 600;
    color: #050505;
    font-size: 0.95rem;
}

.reaction-user-role {
    font-size: 0.82rem;
    color: #65676b;
}

.reaction-user-asistencia {
    font-size: 0.82rem;
    color: #65676b;
    float: right;
}

.reaction-user-date {
    font-size: 0.8rem;
    color: #8a8d91;
}


/* Picker flotante para elegir emoji */
.picker-popup {
    position: absolute;
    z-index: 2100;
    background: #fff;
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid #e0e0e0;
}

.picker-popup .emoji-pick-btn {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.15s ease;
    padding: 2px 4px;
}

.post-media-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1px !important;
}

.post-media-container img,
.post-media-container video {
    width: 100%;
    max-height: 600px; /* Permite más altura */
    object-fit: contain !important; /* Muestra la imagen completa sin recortarla */
}

.info-acompaniantes {
    font-size: 0.8rem;
    font-style: italic;
    color: #8a8d91;
}

/* =========================================================
   ESTILOS PARA MODALES Y FORMULARIOS (LABELS, CHECKS, ETC.)
   ========================================================= */

/* 1. Títulos de los Modales */
.modal-header {
    background-color: #fcfbfa;
    border-bottom: 1px solid var(--color-secondary);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    font-size: 1.35rem;
}

/* Encabezados secundarios dentro de modales/formularios */
.modal-body h5, 
.modal-body h6,
.form-section-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-primary);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-secondary);
    padding-bottom: 0.35rem;
}

/* 2. Labels de Inputs, Selects y Textareas */
.form-label, 
label:not(.form-check-label) {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d4c5b7; /* Tono de etiqueta más oscuro que distingue del input */
    margin-bottom: 0.4rem;
    display: inline-block;
}
/* 3. Inputs de Texto, Selects y Textareas (Contenido introducido) */
.form-control, 
.form-select {
    font-family: 'Lora', 'Georgia', serif; /* Tipografía para el texto del usuario */
    font-size: 0.95rem;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #534d49 !important; /* Texto oscuro de alto contraste */
    background-color: #ffffff;
    border: 1px solid #dcd6cd;
}

.form-control:focus, 
.form-select:focus {
    border-color: #b89774;
    box-shadow: 0 0 0 0.2rem rgba(184, 151, 116, 0.2);
}

/* 4. Labels y Contenedores de Checkboxes / Radios / Switches */
.form-check {
    padding-left: 1.8em;
    margin-bottom: 0.5rem;
}

.form-check-label {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    color: #5c4731 !important; /* Tono tostado medio */
}

/* Estilo del box del Checkbox / Radio en dorado */
.form-check-input {
    border: 1.5px solid #b89774 !important;
    background-color: #faf8f5;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #b89774 !important;
    border-color: #b89774 !important;
}
.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(184, 151, 116, 0.2);
}

/* 5. Pie del Modal */
.modal-footer {
    background-color: #fcfbfa;
    border-top: 1px solid var(--color-secondary);
    padding: 1rem 1.5rem;
}

/* =========================================================
   SOLUCIÓN DEFINITIVA PARA TOOLTIPS HUÉRFANOS Y REGLAS CSS
   ========================================================= */

/* 1. Desactivar eventos de ratón en la caja flotante del tooltip 
      (Evita que el tooltip interfiera si la tabla o botón se refresca debajo) */
.tooltip {
    pointer-events: none !important;
}
/* 2. Ocultar inmediatamente cualquier tooltip que no esté asociado 
      a un elemento visible o interactivo en ese momento */
.tooltip:not(.show) {
    display: none !important;
}
/* 3. Asegurar que las etiquetas y contenedores no interfieran con el z-index del tooltip */
.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-auto {
    z-index: 1080 !important;
}

/* =========================================================
   AJUSTE DE NAVBAR Y DROPDOWNS EN MÓVIL
   ========================================================= */
@media (max-width: 991.98px) {
    /* Forzar desplegables estáticos dentro del menú colapsable */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        background-color: #f8f9fa;
        border: none;
        box-shadow: none;
        padding-left: 1.5rem;
        margin-top: 0.25rem;
    }

    .navbar-collapse .dropdown-item {
        padding: 0.5rem 1rem;
        color: var(--color-text) !important;
    }

    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:active {
        background-color: var(--color-secondary);
        color: var(--color-primary) !important;
    }

    /* Alineación de avatar e iconos en móvil */
    #nav-user-dropdown {
        flex-direction: row !important;
        justify-content: flex-start;
        padding: 0.5rem 0;
    }

    #nav-config-dropdown {
        padding: 0.5rem 0;
    }
} /* 👈 AQUÍ DEBE CERRAR EL @media (max-width: 991.98px) */


/* =========================================================
   ESTILOS DE LA TARJETA DE INVITACIÓN (Aplica a Pantallas y Móviles)
   ========================================================= */

/* Contenedor principal con fondo floral estilo acuarela */
.invitation-card-container.floral-background {
    background-color: #fcfbfa;
    background-image: 
        url('/img/web/fondo_rosa_up.gif'),
        url('/img/web/fondo_rosa_down.gif');
    background-position: top right, bottom left;
    background-repeat: no-repeat, no-repeat;
    background-size: 220px auto, 220px auto;
    
    padding: 3.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(180, 150, 140, 0.15);
    max-width: 580px;
    margin: 0 auto;
    position: relative;
    border: 1px solid #f0e6e1;
}

/* Tipografía y Textos */
.invitation-header-title {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #8c5b52;
    margin-bottom: 0;
}

.names-subtitle {
    font-family: 'Playfair Display', serif;
    letter-spacing: 5px;
    font-size: 0.95rem;
    color: #6e5c54;
    text-transform: uppercase;
}

.romantic-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: #524741;
    line-height: 1.6;
    padding: 0 1rem;
}

/* Botón Romántico */
.btn-romantic {
    background-color: #e5cdca;
    color: #4a3832;
    border: 1px solid #d4b5b0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-romantic:hover {
    background-color: #dcb9b5;
    color: #382924;
    transform: translateY(-1px);
}

/* Divisor Decorativo */
.romantic-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(166, 124, 109, 0.35), rgba(0, 0, 0, 0));
}

.section-form-title {
    font-family: 'Playfair Display', serif;
    color: #8c5b52;
}

.romantic-label {
    font-size: 0.85rem;
    color: #6e5c54;
}

.romantic-input {
    border-color: #e8d7d0;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
}

.romantic-input:focus {
    border-color: #bf988f;
    box-shadow: 0 0 0 0.2rem rgba(191, 152, 143, 0.2);
}

/* Animación de apertura */
.fade-in-section {
    animation: fadeIn 0.5s ease-in-out forwards;
}

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