/* _content/Ceremony.RelojDeLuz/Pages/Admin/CeremonyEditor.razor.rz.scp.css */
/*
 * CeremonyEditor.razor.css
 * Estilos aislados para el componente CeremonyEditor (Tema Oscuro).
*/

.font-montserrat[b-4vifs9lfad] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado del Editor === */
.editor-header[b-4vifs9lfad] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .editor-header h1[b-4vifs9lfad] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

    .editor-header h2[b-4vifs9lfad] {
        margin: 0.25rem 0 0 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-form-label-reloj-de-luz);
    }

/* --- Estilo para el enlace en el subtítulo --- */
.subtitle-link a[b-4vifs9lfad] {
    color: var(--color-accent-gold);
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

    .subtitle-link a:hover[b-4vifs9lfad] {
        text-decoration: underline;
    }
/* --- FIN Estilo enlace --- */


.header-actions[b-4vifs9lfad] {
    display: flex;
    gap: 0.75rem;
}

/* Botones con estilo oscuro */
.btn-cancel[b-4vifs9lfad], .btn-preview[b-4vifs9lfad], .btn-save[b-4vifs9lfad] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-preview[b-4vifs9lfad], .btn-cancel[b-4vifs9lfad] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-preview:hover[b-4vifs9lfad], .btn-cancel:hover[b-4vifs9lfad] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-4vifs9lfad] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

    .btn-save:hover[b-4vifs9lfad] {
        filter: brightness(1.1);
    }

    /* Estado de carga del botón Guardar */
    .btn-save.is-loading[b-4vifs9lfad] {
        cursor: not-allowed;
        filter: brightness(0.9);
    }

        .btn-save.is-loading > *[b-4vifs9lfad] {
            visibility: hidden;
        }

        .btn-save.is-loading[b-4vifs9lfad]::after {
            content: '';
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            top: calc(50% - 0.6rem);
            left: calc(50% - 0.6rem);
            border: 2px solid var(--color-deep-carbon);
            border-top-color: var(--color-accent-gold);
            border-radius: 50%;
            animation: spin-b-4vifs9lfad 0.8s ease-in-out infinite;
        }

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


/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-4vifs9lfad] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.stacked-panel[b-4vifs9lfad] {
    width: 100%;
}

.image-section h4[b-4vifs9lfad],
.form-section h4[b-4vifs9lfad],
.stories-section h4[b-4vifs9lfad] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

.form-section[b-4vifs9lfad] {
    max-width: 800px; /* Limitar ancho del formulario */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

.form-group[b-4vifs9lfad] {
    margin-bottom: 1.5rem;
}

.form-actions[b-4vifs9lfad] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* ==============================================
 * === [IMPORTANTE] ESTILOS DE FORMULARIO (::deep) ===
 * Estos estilos se aplican a este componente Y
 * a los formularios del modal hijo (GalleryImageEditorModal)
 * ==============================================
*/

[b-4vifs9lfad] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-4vifs9lfad] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-4vifs9lfad] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-4vifs9lfad] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-4vifs9lfad] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-4vifs9lfad] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* --- Estilos para la sección de Historias --- */
.stories-section[b-4vifs9lfad] {
    max-width: 800px;
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

    .stories-section p[b-4vifs9lfad] {
        color: var(--color-form-label-reloj-de-luz);
        margin-top: -1rem;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }

/* Botón para gestionar historias */
.btn-manage-stories[b-4vifs9lfad] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    color: var(--color-text-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 1px solid var(--color-section-border-reloj-de-luz);
    cursor: pointer;
}

    .btn-manage-stories:hover[b-4vifs9lfad] {
        background-color: var(--color-accent-gold);
        color: #121212;
        border-color: var(--color-accent-gold);
    }
/* --- FIN NUEVO --- */

/* --- Estilos para el campo Geolocation con botón --- */
.input-with-button[b-4vifs9lfad] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .input-with-button .form-control[b-4vifs9lfad] {
        flex-grow: 1;
    }

.btn-edit-map[b-4vifs9lfad] {
    background: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 5px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    color: var(--color-form-label-reloj-de-luz);
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

    .btn-edit-map:hover[b-4vifs9lfad] {
        color: var(--color-accent-gold);
        border-color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

    .btn-edit-map:disabled[b-4vifs9lfad] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* === Responsividad === */
@media (max-width: 768px) {
    .editor-header[b-4vifs9lfad] {
        align-items: flex-start;
    }

    .header-actions[b-4vifs9lfad] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .btn-preview[b-4vifs9lfad] {
        grid-column: 2 / 3;
    }

    .btn-cancel[b-4vifs9lfad] {
        grid-column: 1 / 2;
    }
}

.text-muted[b-4vifs9lfad] {
    color: var(--color-form-label-reloj-de-luz);
}

.loading-text[b-4vifs9lfad], .empty-text[b-4vifs9lfad] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}

/* ========================================== */
/* === Panel 1: Sección de Imagen (NUEVO v3) === */
/* ========================================== */

.cover-image-wrapper[b-4vifs9lfad] {
    position: relative; /* Ancla para el botón de editar */
    width: 100%;
    max-width: 800px; /* Igual que el formulario */
    margin: 0 auto; /* Centrar el wrapper */
    border-radius: 8px;
    overflow: hidden; /* Asegura que el ThumbnailViewer respete el borde */
}

/* Usamos ::deep porque ThumbnailViewer es un componente hijo */
[b-4vifs9lfad] .image-editor-wrapper-outer {
    /* El ThumbnailViewer debe tener bordes redondeados */
    border-radius: 8px;
}

.btn-edit-cover[b-4vifs9lfad] {
    /* Botón flotante estilo v1 */
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(5px);
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-edit-cover:hover[b-4vifs9lfad] {
        background-color: var(--color-accent-gold);
        color: var(--color-deep-carbon);
        transform: scale(1.05);
    }

    .btn-edit-cover:disabled[b-4vifs9lfad] {
        background-color: rgba(50, 50, 50, 0.7);
        color: rgba(255, 255, 255, 0.5);
        cursor: not-allowed;
        transform: none;
    }

@media (max-width: 768px) {
    .btn-edit-cover[b-4vifs9lfad] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        justify-content: center;
    }
}

/* === BOTÓN FLOTANTE DE VISTA PREVIA (ADMIN -> CLIENTE) === */
.client-preview-fab[b-4vifs9lfad] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100; /* Por encima del contenido normal, debajo de modales (1050) */
    cursor: pointer;
    background-color: var(--color-accent-gold); /* Dorado Admin */
    color: #121212; /* Texto oscuro para contraste */
    height: 50px;
    min-width: 50px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    padding: 0;
    border: 2px solid var(--color-accent-gold);
}

    .client-preview-fab .fab-content[b-4vifs9lfad] {
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
        white-space: nowrap;
    }

    .client-preview-fab i[b-4vifs9lfad] {
        font-size: 1.2rem;
    }

/* Texto oculto inicialmente (Animación de expansión) */
.preview-text[b-4vifs9lfad] {
    max-width: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
}

/* === INTERACCIÓN HOVER === */
.client-preview-fab:hover[b-4vifs9lfad] {
    padding-right: 20px; /* Espacio extra a la derecha */
    background-color: #fff; /* Invertir */
    color: #000;
}

    .client-preview-fab:hover .preview-text[b-4vifs9lfad] {
        max-width: 150px;
        opacity: 1;
        transform: translateX(0);
    }
/* _content/Ceremony.RelojDeLuz/Pages/Admin/CheckRequest.razor.rz.scp.css */
/*
 * CheckRequest.razor.css
 * (REFACTORIZADO)
 * Estilos para la página de revisión de solicitudes (Admin).
 * Se eliminó la lógica/panel de imagen, por lo que se quita
 * el selector .image-section h4.
*/

.font-montserrat[b-w8tcomnqcs] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado del Editor === */
.editor-header[b-w8tcomnqcs] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .editor-header h1[b-w8tcomnqcs] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

    .editor-header h2[b-w8tcomnqcs] {
        margin: 0.25rem 0 0 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-form-label-reloj-de-luz);
    }

.header-actions[b-w8tcomnqcs] {
    display: flex;
    gap: 0.75rem;
}

/* === Botones === */
.btn-cancel[b-w8tcomnqcs], .btn-preview[b-w8tcomnqcs], .btn-save[b-w8tcomnqcs], .btn-danger[b-w8tcomnqcs] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-w8tcomnqcs] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-w8tcomnqcs] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-danger[b-w8tcomnqcs] {
    background-color: var(--color-danger);
    color: white;
}

    .btn-danger:hover[b-w8tcomnqcs] {
        filter: brightness(1.1);
    }

    .btn-danger:disabled[b-w8tcomnqcs] {
        opacity: 0.5;
        cursor: not-allowed;
        filter: none;
    }

.btn-save[b-w8tcomnqcs] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative; /* Para spinner */
}

    .btn-save:hover[b-w8tcomnqcs] {
        filter: brightness(1.1);
    }

    /* Estado de carga */
    .btn-save.is-loading[b-w8tcomnqcs],
    .btn-save:disabled[b-w8tcomnqcs] {
        cursor: not-allowed;
        filter: brightness(0.9);
        opacity: 0.7;
    }

        .btn-save.is-loading > *[b-w8tcomnqcs] {
            visibility: hidden;
        }

        .btn-save.is-loading[b-w8tcomnqcs]::after {
            content: '';
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            top: calc(50% - 0.6rem);
            left: calc(50% - 0.6rem);
            border: 2px solid var(--color-deep-carbon);
            border-top-color: var(--color-accent-gold);
            border-radius: 50%;
            animation: spin-b-w8tcomnqcs 0.8s ease-in-out infinite;
        }

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


/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-w8tcomnqcs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.stacked-panel[b-w8tcomnqcs] {
    width: 100%;
}

/* Títulos H4 (Selector .image-section h4 ELIMINADO) */
.form-section h4[b-w8tcomnqcs],
.vision-section h4[b-w8tcomnqcs] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
    display: flex;
    align-items: center;
}

.icon-gold[b-w8tcomnqcs] {
    color: var(--color-accent-gold);
    margin-right: 0.75rem;
    font-size: 1rem;
}

/* Estilo para los paneles de formulario */
.form-section[b-w8tcomnqcs],
.vision-section[b-w8tcomnqcs] {
    max-width: 800px;
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* --- Panel de Visión del Cliente --- */
.vision-text[b-w8tcomnqcs] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-size: 1rem;
    line-height: 1.7;
    white-space: pre-wrap;
    background-color: var(--color-form-background-input-reloj-de-luz);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-form-border-reloj-de-luz);
}

/* --- Resumen de la Solicitud (dentro del panel Visión) --- */
.request-summary[b-w8tcomnqcs] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    gap: 1.5rem;
}

.summary-item[b-w8tcomnqcs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .summary-item label[b-w8tcomnqcs] {
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--color-form-label-reloj-de-luz);
    }


/* --- Formulario --- */
.form-group[b-w8tcomnqcs] {
    margin-bottom: 1.5rem;
}

.form-actions[b-w8tcomnqcs] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* Grid layout */
.grid[b-w8tcomnqcs] {
    display: grid;
}

.grid-cols-1[b-w8tcomnqcs] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-4[b-w8tcomnqcs] {
    gap: 1rem;
}

@media (min-width: 640px) {
    .sm\:grid-cols-2[b-w8tcomnqcs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Estilos de Formulario (::deep) --- */
[b-w8tcomnqcs] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-w8tcomnqcs] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-w8tcomnqcs] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

    [b-w8tcomnqcs] .form-control:disabled {
        background-color: #2a2a2a;
        opacity: 0.7;
    }

[b-w8tcomnqcs] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-w8tcomnqcs] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-w8tcomnqcs] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* --- Estilos para el campo Geolocation con botón --- */
.input-with-button[b-w8tcomnqcs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .input-with-button .form-control[b-w8tcomnqcs] {
        flex-grow: 1;
    }

.btn-edit-map[b-w8tcomnqcs] {
    background: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 5px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    color: var(--color-form-label-reloj-de-luz);
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

    .btn-edit-map:hover[b-w8tcomnqcs] {
        color: var(--color-accent-gold);
        border-color: var(--color-accent-gold);
    }

    .btn-edit-map:disabled[b-w8tcomnqcs] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* --- Insignias de Estado (Badges) --- */
.status-badge[b-w8tcomnqcs] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
    text-transform: capitalize;
    display: inline-block;
}

/* Colores de Estado (Basado en Enums) */
.status-approved[b-w8tcomnqcs] {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--bs-green);
}

.status-pending[b-w8tcomnqcs] {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--bs-yellow);
}

.status-rejected[b-w8tcomnqcs] {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--bs-danger);
}

.status-canceled[b-w8tcomnqcs] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}

.status-creation[b-w8tcomnqcs] {
    background-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-info);
}

.status-edition[b-w8tcomnqcs] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}
/* Visibilidad */
.status-public[b-w8tcomnqcs] {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--bs-green);
}

.status-connectionsonly[b-w8tcomnqcs] {
    background-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-info);
}

.status-private[b-w8tcomnqcs] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}


/* --- Responsividad --- */
@media (max-width: 768px) {
    .editor-header[b-w8tcomnqcs] {
        align-items: flex-start;
    }

    .header-actions[b-w8tcomnqcs] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .btn-danger[b-w8tcomnqcs] {
        grid-column: 2 / 3;
    }

    .btn-cancel[b-w8tcomnqcs] {
        grid-column: 1 / 2;
    }
}

/* Utilidades */
.text-muted[b-w8tcomnqcs] {
    color: var(--color-form-label-reloj-de-luz);
}

.text-warning[b-w8tcomnqcs] {
    color: var(--color-warning);
}

.loading-text[b-w8tcomnqcs], .empty-text[b-w8tcomnqcs] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ClientEditor.razor.rz.scp.css */
/*
 * ClientEditor.razor.css
 * Estilos para el formulario de creación/edición de clientes (Tema Oscuro).
*/

/* --- Fuentes --- */
.font-montserrat[b-652d97kzys] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado del Editor === */
.editor-header[b-652d97kzys] {
    display: flex;
    flex-wrap: wrap; /* Para responsividad */
    justify-content: space-between;
    align-items: center; /* Centrar verticalmente */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem; /* Ajuste si se usa P en lugar de H2 */
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .editor-header h1[b-652d97kzys] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif; /* Asegurar fuente */
    }

    /* Estilo para el subtítulo H2 (Usuario Vinculado) */
    .editor-header h2[b-652d97kzys] {
        margin: 0.25rem 0 0 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-form-label-reloj-de-luz); /* Color más tenue */
        font-family: 'Montserrat', sans-serif; /* Asegurar fuente */
    }

    /* Estilo para el subtítulo P (Descripción) */
    .editor-header p.text-muted[b-652d97kzys] {
        margin: 0.25rem 0 0;
        color: var(--color-form-label-reloj-de-luz);
        font-size: 1rem;
    }

/* --- Estilo para el enlace en el subtítulo --- */
.subtitle-link a[b-652d97kzys] {
    color: var(--color-accent-gold); /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
    transition: text-decoration 0.2s ease;
}

    .subtitle-link a:hover[b-652d97kzys] {
        text-decoration: underline; /* Subrayado al pasar el mouse */
    }
/* --- FIN Estilo enlace --- */

.header-actions[b-652d97kzys] {
    display: flex;
    gap: 0.75rem;
}

/* === Botones === */
.btn-cancel[b-652d97kzys], .btn-save[b-652d97kzys], .btn-danger[b-652d97kzys], .btn-secondary[b-652d97kzys] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-652d97kzys] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-652d97kzys] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-652d97kzys] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative; /* Para spinner */
}

    .btn-save:hover[b-652d97kzys] {
        filter: brightness(1.1);
    }

.btn-danger[b-652d97kzys] {
    background-color: var(--color-danger);
    color: var(--color-white);
}

    .btn-danger:hover[b-652d97kzys] {
        filter: brightness(0.9);
    }

/* Botón secundario (si lo usas) */
.btn-secondary[b-652d97kzys] {
    background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    color: var(--color-text-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
}

    .btn-secondary:hover[b-652d97kzys] {
        background-color: #3a3a3a;
        border-color: #555;
    }

/* Estado de carga del botón */
.btn-save.is-loading[b-652d97kzys],
.btn-danger.is-loading[b-652d97kzys] {
    cursor: not-allowed;
    filter: brightness(0.9);
}

    .btn-save.is-loading > *[b-652d97kzys],
    .btn-danger.is-loading > *[b-652d97kzys] {
        visibility: hidden;
    }

    .btn-save.is-loading[b-652d97kzys]::after,
    .btn-danger.is-loading[b-652d97kzys]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: calc(50% - 0.6rem);
        left: calc(50% - 0.6rem);
        border: 2px solid var(--color-deep-carbon);
        border-top-color: var(--color-accent-gold);
        border-radius: 50%;
        animation: spin-b-652d97kzys 0.8s ease-in-out infinite;
    }

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

/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-652d97kzys] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los paneles */
    gap: 2rem;
}

/* Regla general para paneles */
.stacked-panel[b-652d97kzys] {
    width: 100%;
}

/* Títulos H4 dentro de los paneles */
.form-section h4[b-652d97kzys],
.user-link-section h4[b-652d97kzys],
.watches-list-section h4[b-652d97kzys] { /* Aplicar a todas las secciones */
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Estilo común para los paneles de contenido */
.form-section[b-652d97kzys],
.user-link-section[b-652d97kzys],
.watches-list-section[b-652d97kzys] {
    max-width: 800px; /* Limitar ancho */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* Grupos y acciones del formulario */
.form-group[b-652d97kzys] {
    margin-bottom: 1.5rem;
}

.form-actions[b-652d97kzys] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* === Sección de Vinculación de Usuario === */
/* Contenedor para párrafo + botón cuando está vinculado */
.linked-account-actions[b-652d97kzys] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

    .linked-account-actions p[b-652d97kzys] {
        margin-bottom: 0;
        color: var(--color-form-text-reloj-de-luz);
    }

    .linked-account-actions strong[b-652d97kzys] {
        color: var(--color-text-reloj-de-luz); /* Resaltar email */
    }

/* Estilos para el botón 'Vincular' cuando no hay usuario */
.user-link-section > p + .btn-save[b-652d97kzys] { /* Selecciona el botón 'Vincular' que sigue al párrafo */
    margin-top: 1rem;
}


/* === Estilos de Formulario (::deep) === */
[b-652d97kzys] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-652d97kzys] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-652d97kzys] .form-control:disabled {
        background-color: #2a2a2a;
        opacity: 0.7;
        cursor: not-allowed;
    }

    [b-652d97kzys] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-652d97kzys] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-652d97kzys] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-652d97kzys] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* === Responsividad (Afecta principalmente al header) === */
@media (max-width: 768px) {
    .editor-header[b-652d97kzys] {
        align-items: flex-start; /* Alinear texto a la izquierda */
    }

    .header-actions[b-652d97kzys] {
        width: 100%; /* Botón ocupa todo el ancho */
        justify-content: flex-end; /* Botón a la derecha */
    }
}

/* Utilidades */
.text-muted[b-652d97kzys] {
    color: var(--color-form-label-reloj-de-luz);
}

.loading-text[b-652d97kzys], .empty-text[b-652d97kzys] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/LinkUserToClient.razor.rz.scp.css */
/*
 * LinkUserToClient.razor.css
 * Estilos para la página de vinculación de usuarios (basado en ManageClients.razor.css).
*/

.page-header[b-xahymrnhhx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-xahymrnhhx] {
        margin: 0;
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

.btn-cancel[b-xahymrnhhx] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-xahymrnhhx] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

/* === ESTILOS DE LA TABLA (IDÉNTICOS A CLIENTS-TABLE) === */

.clients-table[b-xahymrnhhx] {
    width: 100%;
    border-collapse: collapse;
}

    .clients-table th[b-xahymrnhhx], .clients-table td[b-xahymrnhhx] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .clients-table th[b-xahymrnhhx] {
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .clients-table tbody tr[b-xahymrnhhx] {
        transition: background-color 0.2s ease;
    }

        .clients-table tbody tr:hover[b-xahymrnhhx] {
            background-color: #1a1a1a;
        }

.actions-cell[b-xahymrnhhx] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-xahymrnhhx] {
    text-align: right;
}

/* El botón para 'Vincular' usará el estilo de 'btn-save' */
.btn-save[b-xahymrnhhx] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-save:hover[b-xahymrnhhx] {
        filter: brightness(1.1);
    }


/* === LÓGICA RESPONSIVA: LA TABLA SE CONVIERTE EN TARJETAS === */

@media (max-width: 768px) {
    .clients-table thead[b-xahymrnhhx] {
        display: none;
    }

    .clients-table tr[b-xahymrnhhx] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .clients-table td[b-xahymrnhhx] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .clients-table tr:last-child[b-xahymrnhhx] {
        margin-bottom: 0;
    }

    .clients-table td:last-child[b-xahymrnhhx] {
        border-bottom: none;
    }

    .clients-table td[b-xahymrnhhx]::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-xahymrnhhx] {
        justify-content: flex-end;
    }

        .actions-cell[b-xahymrnhhx]::before {
            content: "Acciones";
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ManageCeremonies.razor.rz.scp.css */
/*
 * ManageCeremonies.razor.css
 * Estilos para la página de gestión de ceremonias (Tema Oscuro y Responsivo).
*/

.page-header[b-2imomnawar] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-2imomnawar] {
        margin: 0;
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

.btn-create-new[b-2imomnawar] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-2imomnawar] {
        opacity: 0.9;
    }

/* === ESTILOS DE LA TABLA === */
.ceremonies-table[b-2imomnawar] {
    width: 100%;
    border-collapse: collapse;
}

    .ceremonies-table th[b-2imomnawar], .ceremonies-table td[b-2imomnawar] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .ceremonies-table th[b-2imomnawar] {
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ceremonies-table tbody tr:hover[b-2imomnawar] {
        background-color: #1a1a1a;
    }
/* (El resto de los estilos de tabla, botones y responsividad son idénticos a los de ManageWatches.razor.css) */
.text-muted[b-2imomnawar] {
    color: #888;
    font-style: italic
}

.actions-cell[b-2imomnawar] {
    text-align: right;
    white-space: nowrap
}

.actions-header[b-2imomnawar] {
    text-align: right
}

.btn-icon[b-2imomnawar] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem
}

.btn-edit[b-2imomnawar] {
    color: #a0a0a0
}

    .btn-edit:hover[b-2imomnawar] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a
    }

.btn-delete[b-2imomnawar] {
    color: #a0a0a0
}

    .btn-delete:hover[b-2imomnawar] {
        color: var(--color-danger);
        background-color: #2a2a2a
    }

@media (max-width: 768px) {
    .ceremonies-table thead[b-2imomnawar] {
        display: none
    }

    .ceremonies-table tr[b-2imomnawar] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden
    }

    .ceremonies-table td[b-2imomnawar] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz)
    }

    .ceremonies-table tr:last-child[b-2imomnawar] {
        margin-bottom: 0
    }

    .ceremonies-table td:last-child[b-2imomnawar] {
        border-bottom: none
    }

    .ceremonies-table td[b-2imomnawar]:before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz)
    }

    .actions-cell[b-2imomnawar] {
        justify-content: flex-end
    }

        .actions-cell[b-2imomnawar]:before {
            content: "Acciones"
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ManageClients.razor.rz.scp.css */
/*
 * ManageClients.razor.css
 * Estilos para la página de gestión de clientes (Tema Oscuro y Responsivo).
*/

.page-header[b-hp7r25efw9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-hp7r25efw9] {
        margin: 0;
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

.btn-create-new[b-hp7r25efw9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-hp7r25efw9] {
        opacity: 0.9;
    }

/* === ESTILOS DE LA TABLA RESPONSIVA (TEMA OSCURO) === */

.clients-table[b-hp7r25efw9] {
    width: 100%;
    border-collapse: collapse;
}

    .clients-table th[b-hp7r25efw9], .clients-table td[b-hp7r25efw9] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .clients-table th[b-hp7r25efw9] {
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .clients-table tbody tr[b-hp7r25efw9] {
        transition: background-color 0.2s ease;
    }

        .clients-table tbody tr:hover[b-hp7r25efw9] {
            background-color: #1a1a1a;
        }

.text-muted[b-hp7r25efw9] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-hp7r25efw9] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-hp7r25efw9] {
    text-align: right;
}

.btn-icon[b-hp7r25efw9] {
    background: none;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.25rem;
}

.btn-edit[b-hp7r25efw9] {
    color: #A0A0A0;
}

    .btn-edit:hover[b-hp7r25efw9] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-hp7r25efw9] {
    color: #A0A0A0;
}

    .btn-delete:hover[b-hp7r25efw9] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === LÓGICA RESPONSIVA: LA TABLA SE CONVIERTE EN TARJETAS === */

@media (max-width: 768px) {
    .clients-table thead[b-hp7r25efw9] {
        display: none; /* Ocultamos los encabezados de tabla */
    }

    .clients-table tr[b-hp7r25efw9] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .clients-table td[b-hp7r25efw9] {
        display: flex; /* Usamos flex para alinear etiqueta y contenido */
        justify-content: space-between; /* Alinea la etiqueta a la izquierda y el contenido a la derecha */
        align-items: center;
        text-align: right; /* Alinea el texto del contenido a la derecha */
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .clients-table tr:last-child[b-hp7r25efw9] {
        margin-bottom: 0;
    }

    .clients-table td:last-child[b-hp7r25efw9] {
        border-bottom: none;
    }

    /* Usamos el pseudo-elemento ::before para mostrar las etiquetas de columna */
    .clients-table td[b-hp7r25efw9]::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        margin-right: 1rem; /* Espacio entre etiqueta y valor */
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-hp7r25efw9] {
        justify-content: flex-end; /* Alinea los botones a la derecha en la tarjeta */
    }

        .actions-cell[b-hp7r25efw9]::before {
            content: "Acciones"; /* Etiqueta para la celda de acciones */
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ManageStories.razor.rz.scp.css */
/*
 * ManageStories.razor.css
 * Estilos para la página de gestión de historias (Tema Oscuro y Responsivo).
*/

.page-header[b-7vo5yuzuqs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-7vo5yuzuqs] {
        margin: 0;
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

.btn-create-new[b-7vo5yuzuqs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-7vo5yuzuqs] {
        opacity: 0.9;
    }

/* === ESTILOS DE LA TABLA === */
.stories-table[b-7vo5yuzuqs] { /* <-- CAMBIADO */
    width: 100%;
    border-collapse: collapse;
}

    .stories-table th[b-7vo5yuzuqs], .stories-table td[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .stories-table th[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .stories-table tbody tr:hover[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        background-color: #1a1a1a;
    }

/* (El resto de los estilos de tabla, botones y responsividad son idénticos) */
.text-muted[b-7vo5yuzuqs] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-7vo5yuzuqs] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-7vo5yuzuqs] {
    text-align: right;
}

.btn-icon[b-7vo5yuzuqs] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
}

.btn-edit[b-7vo5yuzuqs] {
    color: #a0a0a0;
}

    .btn-edit:hover[b-7vo5yuzuqs] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-7vo5yuzuqs] {
    color: #a0a0a0;
}

    .btn-delete:hover[b-7vo5yuzuqs] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === RESPONSIVIDAD === */
@media (max-width: 768px) {
    .stories-table thead[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        display: none;
    }

    .stories-table tr[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .stories-table td[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .stories-table tr:last-child[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        margin-bottom: 0;
    }

    .stories-table td:last-child[b-7vo5yuzuqs] { /* <-- CAMBIADO */
        border-bottom: none;
    }

    .stories-table td[b-7vo5yuzuqs]:before { /* <-- CAMBIADO */
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-7vo5yuzuqs] {
        justify-content: flex-end;
    }

        .actions-cell[b-7vo5yuzuqs]:before {
            content: "Acciones";
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ManageUsers.razor.rz.scp.css */
/*
 * ManageUsers.razor.css
 * Estilos para la página de gestión de usuarios (Tema Oscuro y Responsivo).
*/

.page-header[b-f83a9zcodu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-f83a9zcodu] {
        margin: 0;
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

.btn-create-new[b-f83a9zcodu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-f83a9zcodu] {
        opacity: 0.9;
    }

/* === ESTILOS DE LA TABLA === */
.users-table[b-f83a9zcodu] { /* <-- CAMBIADO */
    width: 100%;
    border-collapse: collapse;
}

    .users-table th[b-f83a9zcodu], .users-table td[b-f83a9zcodu] { /* <-- CAMBIADO */
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .users-table th[b-f83a9zcodu] { /* <-- CAMBIADO */
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .users-table tbody tr:hover[b-f83a9zcodu] { /* <-- CAMBIADO */
        background-color: #1a1a1a;
    }

/* (El resto de los estilos de tabla, botones y responsividad son idénticos) */
.text-muted[b-f83a9zcodu] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-f83a9zcodu] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-f83a9zcodu] {
    text-align: right;
}

.btn-icon[b-f83a9zcodu] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
}

.btn-edit[b-f83a9zcodu] {
    color: #a0a0a0;
}

    .btn-edit:hover[b-f83a9zcodu] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-f83a9zcodu] {
    color: #a0a0a0;
}

    .btn-delete:hover[b-f83a9zcodu] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === RESPONSIVIDAD === */
@media (max-width: 768px) {
    .users-table thead[b-f83a9zcodu] { /* <-- CAMBIADO */
        display: none;
    }

    .users-table tr[b-f83a9zcodu] { /* <-- CAMBIADO */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .users-table td[b-f83a9zcodu] { /* <-- CAMBIADO */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .users-table tr:last-child[b-f83a9zcodu] { /* <-- CAMBIADO */
        margin-bottom: 0;
    }

    .users-table td:last-child[b-f83a9zcodu] { /* <-- CAMBIADO */
        border-bottom: none;
    }

    .users-table td[b-f83a9zcodu]:before { /* <-- CAMBIADO */
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-f83a9zcodu] {
        justify-content: flex-end;
    }

        .actions-cell[b-f83a9zcodu]:before {
            content: "Acciones";
        }
}

/* Estilos de carga y vacío */
.loading-text[b-f83a9zcodu], .empty-text[b-f83a9zcodu] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ManageWatches.razor.rz.scp.css */
/*
 * ManageWatches.razor.css
 * Estilos para la página de gestión de relojes (Tema Oscuro y Responsivo).
*/

.page-header[b-zxynmh3qfi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-zxynmh3qfi] {
        margin: 0;
        font-size: 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }

.btn-create-new[b-zxynmh3qfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-zxynmh3qfi] {
        opacity: 0.9;
    }

/* === ESTILOS DE LA TABLA RESPONSIVA (TEMA OSCURO) === */

.watches-table[b-zxynmh3qfi] {
    width: 100%;
    border-collapse: collapse;
}

    .watches-table th[b-zxynmh3qfi], .watches-table td[b-zxynmh3qfi] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .watches-table th[b-zxynmh3qfi] {
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .watches-table tbody tr[b-zxynmh3qfi] {
        transition: background-color 0.2s ease;
    }

        .watches-table tbody tr:hover[b-zxynmh3qfi] {
            background-color: #1a1a1a;
        }

.text-muted[b-zxynmh3qfi] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-zxynmh3qfi] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-zxynmh3qfi] {
    text-align: right;
}

.btn-icon[b-zxynmh3qfi] {
    background: none;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.25rem;
}

.btn-edit[b-zxynmh3qfi] {
    color: #A0A0A0;
}

    .btn-edit:hover[b-zxynmh3qfi] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-zxynmh3qfi] {
    color: #A0A0A0;
}

    .btn-delete:hover[b-zxynmh3qfi] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === LÓGICA RESPONSIVA: LA TABLA SE CONVIERTE EN TARJETAS === */

@media (max-width: 768px) {
    .watches-table thead[b-zxynmh3qfi] {
        display: none;
    }

    .watches-table tr[b-zxynmh3qfi] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .watches-table td[b-zxynmh3qfi] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .watches-table tr:last-child[b-zxynmh3qfi] {
        margin-bottom: 0;
    }

    .watches-table td:last-child[b-zxynmh3qfi] {
        border-bottom: none;
    }

    .watches-table td[b-zxynmh3qfi]::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-zxynmh3qfi] {
        justify-content: flex-end;
    }

        .actions-cell[b-zxynmh3qfi]::before {
            content: "Acciones";
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/Requests.razor.rz.scp.css */
/*
 * Requests.razor.css
 * Estilos para la página "Solicitudes de Ceremonia" (Admin).
 * (Basado en MyRequests.razor.css)
*/

.font-montserrat[b-7orsznj4ju] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-7orsznj4ju], .empty-text[b-7orsznj4ju] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- Encabezado de Página (Estándar) --- */
.page-header[b-7orsznj4ju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-7orsznj4ju] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif;
    }

/* Botón Crear Nuevo (si se usara) */
.btn-create-new[b-7orsznj4ju] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-7orsznj4ju] {
        opacity: 0.9;
    }


/* --- Contenedor de Tabla Responsiva --- */
.table-responsive-wrapper[b-7orsznj4ju] {
    width: 100%;
}

/* --- Tabla de Solicitudes --- */
.requests-table[b-7orsznj4ju] {
    width: 100%;
    border-collapse: collapse;
}

    .requests-table th[b-7orsznj4ju], .requests-table td[b-7orsznj4ju] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
        color: var(--color-text-reloj-de-luz);
    }

    .requests-table th[b-7orsznj4ju] {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-form-label-reloj-de-luz);
    }

    .requests-table tbody tr:hover[b-7orsznj4ju] {
        background-color: #1a1a1a;
    }

/* --- Insignias de Estado (Badges) --- */
.status-badge[b-7orsznj4ju] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
    text-transform: capitalize;
}

/* Colores de Estado (Basado en Enums) */
.status-approved[b-7orsznj4ju] {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--bs-green);
}

.status-pending[b-7orsznj4ju] {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--bs-yellow);
}

.status-rejected[b-7orsznj4ju] {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--bs-danger);
}

.status-canceled[b-7orsznj4ju] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}

.status-creation[b-7orsznj4ju] {
    background-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-info);
}

.status-edition[b-7orsznj4ju] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}


/* --- Celdas de Acciones --- */
.actions-cell[b-7orsznj4ju] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-7orsznj4ju] {
    text-align: right;
}

/* Botones de Icono (Revisar/Ver) */
.btn-icon[b-7orsznj4ju] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
    color: #a0a0a0;
}

.btn-view:hover[b-7orsznj4ju] {
    color: var(--color-accent-gold);
    background-color: #2a2a2a;
}

/* === RESPONSIVIDAD (Estilo Tarjeta) === */
@media (max-width: 768px) {
    .requests-table thead[b-7orsznj4ju] {
        display: none;
    }

    .requests-table tr[b-7orsznj4ju] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--color-dark-carbon);
    }

    .requests-table td[b-7orsznj4ju] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .requests-table tr:last-child[b-7orsznj4ju] {
        margin-bottom: 0;
    }

    .requests-table td:last-child[b-7orsznj4ju] {
        border-bottom: none;
    }

    .requests-table td[b-7orsznj4ju]:before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-7orsznj4ju] {
        justify-content: flex-end;
    }

        .actions-cell[b-7orsznj4ju]:before {
            content: "Acciones";
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/StoryEditor.razor.rz.scp.css */
/*
 * StoryEditor.razor.css
 * Estilos aislados para el componente StoryEditor (Tema Oscuro).
 * [REFACORIZADO] Layout de dos columnas.
*/

.font-montserrat[b-7attcupuy9] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado del Editor === */
.editor-header[b-7attcupuy9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Centra verticalmente título y botón */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    /* Título principal H1 */
    .editor-header h1[b-7attcupuy9] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
    }
    /* Estilo adicional para el subtítulo H2 (Ceremonia Padre) */
    .editor-header h2[b-7attcupuy9] {
        margin: 0.25rem 0 0 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-form-label-reloj-de-luz); /* Color más tenue */
    }

/* --- Estilo para el enlace en el subtítulo --- */
.subtitle-link a[b-7attcupuy9] {
    color: var(--color-accent-gold); /* Color del enlace igual al acento */
    text-decoration: none; /* Sin subrayado por defecto */
    transition: text-decoration 0.2s ease;
}

    .subtitle-link a:hover[b-7attcupuy9] {
        text-decoration: underline; /* Subrayado al pasar el mouse */
    }
/* --- FIN NUEVO --- */

.header-actions[b-7attcupuy9] {
    display: flex;
    gap: 0.75rem;
}

/* Botones con estilo oscuro (copiados de CeremonyEditor) */
.btn-cancel[b-7attcupuy9], .btn-preview[b-7attcupuy9], .btn-save[b-7attcupuy9] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel[b-7attcupuy9] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-7attcupuy9] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-7attcupuy9] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative; /* Para el spinner */
}

    .btn-save:hover[b-7attcupuy9] {
        filter: brightness(1.1);
    }

    /* Estado de carga del botón Guardar (copiado) */
    .btn-save.is-loading[b-7attcupuy9] {
        cursor: not-allowed;
        filter: brightness(0.9);
    }

        .btn-save.is-loading > *[b-7attcupuy9] {
            visibility: hidden;
        }

        .btn-save.is-loading[b-7attcupuy9]::after {
            content: '';
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            top: calc(50% - 0.6rem);
            left: calc(50% - 0.6rem);
            border: 2px solid var(--color-deep-carbon);
            border-top-color: var(--color-accent-gold);
            border-radius: 50%;
            animation: spin-b-7attcupuy9 0.8s ease-in-out infinite;
        }

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


/* ==============================
 * [NUEVO] LAYOUT DE DOS COLUMNAS
 * ==============================
*/
.editor-columns-layout[b-7attcupuy9] {
    display: grid;
    /* Define 2 columnas: 
       Col 1 (Formulario): Ancho fijo de 450px.
       Col 2 (Galería): Ocupa el resto del espacio (1fr).
    */
    grid-template-columns: 450px 1fr;
    gap: 2rem;
    /* Alinea la parte superior de ambos paneles */
    align-items: start;
}


/* Regla general para paneles, permite ancho completo */
.stacked-panel[b-7attcupuy9] {
    width: 100%;
}

/* Títulos H4 dentro de los paneles */
.form-section h4[b-7attcupuy9],
.gallery-section h4[b-7attcupuy9] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* [MODIFICADO] Sección del formulario (Columna 1) */
.form-section[b-7attcupuy9] {
    /* Se elimina 'max-width: 800px;'. El grid ahora controla el ancho. */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
    /* [NUEVO] Asegura que se mantenga "pegado" arriba */
    position: sticky;
    top: 2rem;
}

/* Grupos y acciones del formulario (copiado) */
.form-group[b-7attcupuy9] {
    margin-bottom: 1.5rem;
}

.form-actions[b-7attcupuy9] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* === Estilos de Formulario para Tema Oscuro (Copiado de CeremonyEditor) === */

/* Usamos ::deep para aplicar estilos a los componentes Input* */
[b-7attcupuy9] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-7attcupuy9] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-7attcupuy9] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

/* Mensajes de validación */
[b-7attcupuy9] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-7attcupuy9] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-7attcupuy9] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* [MODIFICADO] Sección de Galería (Columna 2) */
.gallery-section[b-7attcupuy9] {
    /* [CAMBIO CLAVE] Se eliminan todos los estilos de "tarjeta".
       Ahora es un contenedor transparente. */
    max-width: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}


/* === Responsividad === */
@media (max-width: 1024px) {
    /* [NUEVO] En pantallas medianas/pequeñas, apila las columnas */
    .editor-columns-layout[b-7attcupuy9] {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 2rem;
    }

    .form-section[b-7attcupuy9] {
        position: static; /* Quita el 'sticky' en móvil */
    }

    /* [MODIFICADO] El .gallery-section vuelve a tener padding en móvil 
       para que no se pegue a los bordes del .form-section */
    .gallery-section[b-7attcupuy9] {
        padding: 2rem;
        background-color: var(--color-dark-carbon);
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
    }
}


@media (max-width: 768px) {
    .editor-header[b-7attcupuy9] {
        /* El título y subtítulo se alinean a la izquierda */
        align-items: flex-start;
    }

    .header-actions[b-7attcupuy9] {
        width: 100%; /* Ocupa todo el ancho */
        /* Si solo hay un botón (Volver), justify-content lo alinea al final */
        justify-content: flex-end;
    }
}

/* Utilidad para texto tenue (usada en el H2) */
.text-muted[b-7attcupuy9] {
    color: var(--color-form-label-reloj-de-luz); /* O un gris más claro si prefieres */
}

/* Estilos de carga y vacío (copiados de ManageCeremonies) */
.loading-text[b-7attcupuy9], .empty-text[b-7attcupuy9] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/ThemeEditor.razor.rz.scp.css */
/*
 * ThemeEditor.razor.css
 * Estilos para el editor de tema visual.
*/

/* Usamos las variables del tema para estilizar los botones del propio editor */
.page-header[b-w8b1zeqfyv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-w8b1zeqfyv] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        font-family: 'Montserrat', sans-serif;
    }

.header-actions[b-w8b1zeqfyv] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-w8b1zeqfyv], .btn-save[b-w8b1zeqfyv] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel[b-w8b1zeqfyv] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
}

    .btn-cancel:hover[b-w8b1zeqfyv] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-w8b1zeqfyv] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-save:hover[b-w8b1zeqfyv] {
        opacity: 0.9;
    }


/* === NUEVO LAYOUT DE DOS COLUMNAS === */
.editor-layout-grid[b-w8b1zeqfyv] {
    display: grid;
    /* Por defecto una sola columna para el enfoque mobile-first */
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}


/* === CUADRÍCULA DEL EDITOR DE COLORES === */
.theme-editor-grid[b-w8b1zeqfyv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.settings-group[b-w8b1zeqfyv] {
    background-color: var(--color-sidebar-background-reloj-de-luz);
    border: 1px solid var(--color-sidebar-border-reloj-de-luz);
    border-radius: 8px;
    overflow: hidden;
}

.group-title[b-w8b1zeqfyv] {
    margin: 0;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--color-sidebar-border-reloj-de-luz);
}

.settings-list[b-w8b1zeqfyv] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.setting-item[b-w8b1zeqfyv] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}

    .setting-item label[b-w8b1zeqfyv] {
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
    }

.color-picker-wrapper[b-w8b1zeqfyv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

input[type="color"][b-w8b1zeqfyv] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

    input[type="color"][b-w8b1zeqfyv]::-webkit-color-swatch {
        border-radius: 4px;
        border: 1px solid var(--color-form-border-reloj-de-luz);
    }

    input[type="color"][b-w8b1zeqfyv]::-moz-color-swatch {
        border-radius: 4px;
        border: 1px solid var(--color-form-border-reloj-de-luz);
    }

.color-value[b-w8b1zeqfyv] {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-text-reloj-de-luz);
}


/* === RESPONSIVIDAD PARA EL LAYOUT DE DOS COLUMNAS === */
@media (min-width: 1200px) {
    .editor-layout-grid[b-w8b1zeqfyv] {
        /* Dos columnas en pantallas anchas */
        grid-template-columns: 2fr 1fr;
    }

    .preview-column[b-w8b1zeqfyv] {
        position: sticky;
        top: 2rem;
    }
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/UserEditor.razor.rz.scp.css */
/*
 * UserEditor.razor.css
 * Estilos aislados para el componente UserEditor (Tema Oscuro).
*/

.font-montserrat[b-sxhw0kkkey] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado del Editor === */
.editor-header[b-sxhw0kkkey] {
    display: flex;
    flex-wrap: wrap; /* Para responsividad */
    justify-content: space-between;
    align-items: center; /* Centrar verticalmente */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem; /* Ajuste si se usa P en lugar de H2 */
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .editor-header h1[b-sxhw0kkkey] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif; /* Asegurar fuente */
    }

    /* Estilo para el subtítulo P (Descripción) */
    .editor-header p.text-muted[b-sxhw0kkkey] { /* Ser específico si se usa p */
        margin: 0.25rem 0 0;
        color: var(--color-form-label-reloj-de-luz);
        font-size: 1rem;
    }

.header-actions[b-sxhw0kkkey] {
    display: flex;
    gap: 0.75rem;
}

/* === Botones === */
.btn-cancel[b-sxhw0kkkey], .btn-save[b-sxhw0kkkey], .btn-danger[b-sxhw0kkkey], .btn-secondary[b-sxhw0kkkey] { /* Añadir btn-secondary */
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-sxhw0kkkey] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-sxhw0kkkey] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-sxhw0kkkey] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative; /* Para spinner */
}

    .btn-save:hover[b-sxhw0kkkey] {
        filter: brightness(1.1);
    }

/* Botón secundario (ej. Gestionar Roles, Ver Cliente) */
.btn-secondary[b-sxhw0kkkey] {
    background-color: var(--color-button-background-cancel-hover-reloj-de-luz); /* Un gris oscuro */
    color: var(--color-text-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
}

    .btn-secondary:hover[b-sxhw0kkkey] {
        background-color: #3a3a3a; /* Un gris un poco más claro */
        border-color: #555;
    }


/* Estado de carga del botón */
.btn-save.is-loading[b-sxhw0kkkey] {
    cursor: not-allowed;
    filter: brightness(0.9);
}

    .btn-save.is-loading > *[b-sxhw0kkkey] {
        visibility: hidden;
    }

    .btn-save.is-loading[b-sxhw0kkkey]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: calc(50% - 0.6rem);
        left: calc(50% - 0.6rem);
        border: 2px solid var(--color-deep-carbon);
        border-top-color: var(--color-accent-gold);
        border-radius: 50%;
        animation: spin-b-sxhw0kkkey 0.8s ease-in-out infinite;
    }

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

/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-sxhw0kkkey] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los paneles */
    gap: 2rem;
}

/* Regla general para paneles */
.stacked-panel[b-sxhw0kkkey] {
    width: 100%;
}

/* Títulos H4 dentro de los paneles */
.form-section h4[b-sxhw0kkkey],
.roles-section h4[b-sxhw0kkkey],
.client-link-section h4[b-sxhw0kkkey] { /* Aplicar a todas las secciones */
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Estilo común para los paneles de contenido */
.form-section[b-sxhw0kkkey],
.roles-section[b-sxhw0kkkey],
.client-link-section[b-sxhw0kkkey] {
    max-width: 800px; /* Limitar ancho */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* Grupos y acciones del formulario */
.form-group[b-sxhw0kkkey] {
    margin-bottom: 1.5rem;
}

.form-check[b-sxhw0kkkey] { /* Estilo básico para checkbox de estado */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-form-text-reloj-de-luz);
}

.form-check-input[b-sxhw0kkkey] {
    margin: 0;
}

.form-check-label[b-sxhw0kkkey] {
    margin-bottom: 0; /* Anular margen de label normal */
}


.form-actions[b-sxhw0kkkey] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* === Sección de Vínculo con Cliente === */
.linked-client-display[b-sxhw0kkkey] { /* Similar a linked-account-display */
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .linked-client-display span[b-sxhw0kkkey] {
        color: var(--color-form-text-reloj-de-luz);
        font-weight: 500;
        display: inline-flex; /* Para alinear ícono */
        align-items: center;
    }

/* === Estilos de Formulario (::deep) === */
[b-sxhw0kkkey] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-sxhw0kkkey] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}
    /* Estilo para inputs deshabilitados */
    [b-sxhw0kkkey] .form-control:disabled {
        background-color: #2a2a2a; /* Un poco más oscuro */
        opacity: 0.7;
        cursor: not-allowed;
    }

    [b-sxhw0kkkey] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-sxhw0kkkey] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-sxhw0kkkey] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-sxhw0kkkey] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* === Responsividad (Afecta principalmente al header) === */
@media (max-width: 768px) {
    .editor-header[b-sxhw0kkkey] {
        align-items: flex-start; /* Alinear texto a la izquierda */
    }

    .header-actions[b-sxhw0kkkey] {
        width: 100%; /* Botón ocupa todo el ancho */
        justify-content: flex-end; /* Botón a la derecha */
    }
}

/* Utilidades */
.text-muted[b-sxhw0kkkey] {
    color: var(--color-form-label-reloj-de-luz);
}

.loading-text[b-sxhw0kkkey], .empty-text[b-sxhw0kkkey] { /* Incluir empty-text si lo usas */
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Admin/WatchEditor.razor.rz.scp.css */
/*
 * WatchEditor.razor.css
 * Estilos para el formulario de creación/edición de relojes (Tema Oscuro).
*/

/* --- Fuentes --- */
.font-montserrat[b-nah26zjzzm] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado del Editor === */
.editor-header[b-nah26zjzzm] {
    display: flex;
    flex-wrap: wrap; /* Para responsividad */
    justify-content: space-between;
    align-items: center; /* Centrar verticalmente */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem; /* Ajuste si se usa P en lugar de H2 */
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    width: 100%; /* Ocupar ancho completo */
    /* NO LLEVA max-width */
}

    .editor-header h1[b-nah26zjzzm] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif; /* Asegurar fuente */
    }

    /* Estilo para el subtítulo H2 (Cliente Padre) */
    .editor-header h2[b-nah26zjzzm] {
        margin: 0.25rem 0 0 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-form-label-reloj-de-luz); /* Color más tenue */
        font-family: 'Montserrat', sans-serif; /* Asegurar fuente */
    }

/* --- Estilo para el enlace en el subtítulo --- */
.subtitle-link a[b-nah26zjzzm] {
    color: var(--color-accent-gold); /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
    transition: text-decoration 0.2s ease;
}

    .subtitle-link a:hover[b-nah26zjzzm] {
        text-decoration: underline; /* Subrayado al pasar el mouse */
    }
/* --- FIN Estilo enlace --- */

.header-actions[b-nah26zjzzm] {
    display: flex;
    gap: 0.75rem;
}

/* === Botones === */
.btn-cancel[b-nah26zjzzm], .btn-save[b-nah26zjzzm] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-nah26zjzzm] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-nah26zjzzm] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-nah26zjzzm] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative; /* Para spinner */
}

    .btn-save:hover[b-nah26zjzzm] {
        filter: brightness(1.1);
    }

    /* Estado de carga del botón */
    .btn-save.is-loading[b-nah26zjzzm] {
        cursor: not-allowed;
        filter: brightness(0.9);
    }

        .btn-save.is-loading > *[b-nah26zjzzm] {
            visibility: hidden;
        }

        .btn-save.is-loading[b-nah26zjzzm]::after {
            content: '';
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            top: calc(50% - 0.6rem);
            left: calc(50% - 0.6rem);
            border: 2px solid var(--color-deep-carbon);
            border-top-color: var(--color-accent-gold);
            border-radius: 50%;
            animation: spin-b-nah26zjzzm 0.8s ease-in-out infinite;
        }

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

/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-nah26zjzzm] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los paneles hijos */
    gap: 2rem;
}

/* Regla general para paneles (ocupa ancho disponible) */
.stacked-panel[b-nah26zjzzm] {
    width: 100%;
}

/* Títulos H4 dentro de los paneles */
.form-section h4[b-nah26zjzzm],
.ceremonies-list-section h4[b-nah26zjzzm] { /* Aplicar a ambas secciones */
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Estilo común para los paneles de contenido (los que van centrados) */
.form-section[b-nah26zjzzm],
.ceremonies-list-section[b-nah26zjzzm] {
    max-width: 800px; /* Limitar ancho */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* Grupos y acciones del formulario */
.form-group[b-nah26zjzzm] {
    margin-bottom: 1.5rem;
}

.form-actions[b-nah26zjzzm] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* Grid layout (opcional) */
.grid[b-nah26zjzzm] {
    display: grid;
}

.grid-cols-1[b-nah26zjzzm] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-4[b-nah26zjzzm] {
    gap: 1rem;
}

@media (min-width: 640px) {
    .sm\:grid-cols-2[b-nah26zjzzm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === Estilos de Formulario (::deep) === */
[b-nah26zjzzm] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-nah26zjzzm] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-nah26zjzzm] .form-control:disabled {
        background-color: #2a2a2a;
        opacity: 0.7;
        cursor: not-allowed;
    }

    [b-nah26zjzzm] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-nah26zjzzm] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-nah26zjzzm] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-nah26zjzzm] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* === Responsividad (Afecta principalmente al header) === */
@media (max-width: 768px) {
    .editor-header[b-nah26zjzzm] {
        align-items: flex-start; /* Alinear texto a la izquierda */
    }

    .header-actions[b-nah26zjzzm] {
        width: 100%; /* Botón ocupa todo el ancho */
        justify-content: flex-end; /* Botón a la derecha */
    }
}

/* Utilidades */
.text-muted[b-nah26zjzzm] {
    color: var(--color-form-label-reloj-de-luz);
}

.loading-text[b-nah26zjzzm], .empty-text[b-nah26zjzzm] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/CeremonyWatch.razor.rz.scp.css */
/*
 * CeremonyWatch.razor.css
 * Estilos para la página 
*/

.loading-text[b-21cw1r5i7e], .empty-text[b-21cw1r5i7e] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz); /* Asumiendo color de texto tenue */
    font-style: italic;
    font-size: 1.1rem;
}

/* Layout principal, un simple flujo vertical */
.event-viewer-layout[b-21cw1r5i7e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* Espacio uniforme entre secciones */
}

/* Estilo para la Sección de Descripción */
.description-section[b-21cw1r5i7e] {
    width: 100%;
    max-width: 800px; /* Ancho de línea para legibilidad */
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-reloj-de-luz);
    opacity: 0.8;
}

    .description-section p[b-21cw1r5i7e] {
        margin: 0;
    }

/* --- Separador hacia las Historias --- */
.stories-separator[b-21cw1r5i7e] {
    text-align: center;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem auto; /* Margen ajustado */
    width: 100%;
    max-width: 800px;
}

    .stories-separator[b-21cw1r5i7e]::before,
    .stories-separator[b-21cw1r5i7e]::after {
        content: '';
        flex-grow: 1;
        height: 1px;
        background-color: var(--color-section-border-reloj-de-luz);
    }

    .stories-separator span[b-21cw1r5i7e] {
        font-size: 2.5rem;
        color: var(--color-accent-gold);
        font-weight: normal;
        /* Asumiendo que 'logo-font' ('Great Vibes') está cargado */
        font-family: 'Great Vibes', cursive;
    }

/* Contenedor para la lista de carruseles */
.stories-list-container[b-21cw1r5i7e] {
    width: 100%;
    /* [LA CLAVE] Forzamos el ancho máximo para 
       que coincida con el resto del contenido centrado */
    max-width: 90vw;
}

/*
============================================
(PULIDO v3) PORTADA FULL-BLEED REAL
============================================
*/

.cover-image-wrapper[b-21cw1r5i7e] {
    /* 1. (LA CORRECCIÓN) Ancho del 100% del layout (el layout ya no tiene padding) */
    width: 100%;
    /* 2. Redondeado y Desvanecido (Tu código) */
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}

    /* 3. El "desvanecido" (fade) */
    .cover-image-wrapper[b-21cw1r5i7e]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: linear-gradient( to top, var(--color-background-reloj-de-luz) 10%, transparent 100% );
        border-radius: 0 0 0.75rem 0.75rem;
    }

/*
============================================
(NUEVO) PULIDO: ESTILOS PARA EL AVATAR DEL DUEÑO (FLOTANTE)
============================================
*/

/* 1. El contenedor del enlace (el "botoncito") */
.owner-avatar-link[b-21cw1r5i7e] {
    /* 2. Posición (flotante) */
    position: absolute;
    top: 1.5rem; /* Espacio desde la orilla superior */
    left: 1.5rem; /* Espacio desde la orilla izquierda */
    /* 3. Apariencia (pastilla semi-transparente) */
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* Redondeado tipo "pastilla" */
    padding: 0.35rem 0.75rem 0.35rem 0.35rem; /* Padding (menos a la izq. por el avatar) */
    /* 4. Layout interno (para alinear avatar y texto) */
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* 5. Texto y Comportamiento */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-reloj-de-luz); /* Texto blanco */
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    /* 6. Orden (encima de la foto y el desvanecido, debajo de la TopBar) */
    z-index: 10;
}

    /* 7. Hover (para interactividad) */
    .owner-avatar-link:hover[b-21cw1r5i7e] {
        background-color: rgba(0, 0, 0, 0.6);
        transform: scale(1.03);
    }

/* 8. Estilo del Avatar (asumiendo que usas ProfileAvatar o un <img>) */
/* Usamos ::deep si ProfileAvatar es un componente hijo */
[b-21cw1r5i7e] .owner-avatar-link .profile-avatar-wrapper {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 9. Estilo del Texto (el "Por: ...") */
.owner-name[b-21cw1r5i7e] {
    display: inline-block;
    padding-right: 0.25rem; /* Espacio extra al final de la pastilla */
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/CLientWatchEditor.razor.rz.scp.css */
/*
 * ClientWatchEditor.razor.css
 * Estilos para el formulario de creación/edición de relojes.
*/

.font-montserrat[b-xd31ig1kz7] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-xd31ig1kz7], .empty-text[b-xd31ig1kz7] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

.empty-text-container[b-xd31ig1kz7] {
    text-align: center;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    max-width: 600px;
}

/* === Encabezado del Editor === */
.editor-header[b-xd31ig1kz7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    padding-bottom: 1.5rem;
}

    .editor-header h1[b-xd31ig1kz7] {
        margin: 0;
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
    }

    .editor-header h2[b-xd31ig1kz7] {
        margin: 0.5rem 0 0 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-form-label-reloj-de-luz);
    }

.header-actions[b-xd31ig1kz7] {
    flex-shrink: 0;
    margin-left: 1rem;
}

/* === LAYOUT APILADO (Contenedor Principal) === */
.editor-stacked-layout[b-xd31ig1kz7] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 700px; /* Ancho controlado para formularios */
    margin: 0 auto; /* Centrado */
    padding-bottom: 3rem;
}

/* === PANELES (Tarjetas de Sección) === */
.stacked-panel[b-xd31ig1kz7], .form-section[b-xd31ig1kz7] {
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
}

    .stacked-panel h4[b-xd31ig1kz7], .form-section h4[b-xd31ig1kz7] {
        margin-top: 0;
        margin-bottom: 1.5rem;
        color: var(--color-accent-gold);
        font-family: 'Montserrat', sans-serif;
        font-size: 1.1rem;
        font-weight: 600;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 0.5rem;
    }

/* === ALERTA INFORMATIVA (Para "Nuevo Reloj") === */
.alert-info-box[b-xd31ig1kz7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(192, 164, 124, 0.1); /* Tinte dorado suave */
    border-left: 3px solid var(--color-accent-gold);
    padding: 1rem 1.5rem;
    border-radius: 4px;
    color: var(--color-text-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

    .alert-info-box i[b-xd31ig1kz7] {
        font-size: 1.2rem;
        color: var(--color-accent-gold);
    }

/* === FORMULARIO === */
.form-group[b-xd31ig1kz7] {
    margin-bottom: 1.5rem;
}

/* Estilos ::deep para inputs (Consistencia con tu diseño) */
[b-xd31ig1kz7] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-xd31ig1kz7] .form-control {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 4px;
    color: var(--color-text-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    [b-xd31ig1kz7] .form-control:focus {
        outline: none;
        border-color: var(--color-accent-gold);
        box-shadow: 0 0 0 3px rgba(192, 164, 124, 0.2);
    }

/* Checkbox personalizado */
.form-check[b-xd31ig1kz7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0;
}

[b-xd31ig1kz7] .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: var(--color-accent-gold);
    margin: 0;
}

.form-check-label[b-xd31ig1kz7] {
    margin-bottom: 0;
    cursor: pointer;
    color: var(--color-text-reloj-de-luz);
}

/* Mensajes de Validación */
[b-xd31ig1kz7] .validation-message {
    color: #e53e3e;
    font-size: 0.85rem;
    margin-top: 0.4rem;
    display: block;
}

/* === BOTONES === */
.form-actions[b-xd31ig1kz7] {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    padding-top: 1.5rem;
}

.btn-save[b-xd31ig1kz7], .btn-cancel[b-xd31ig1kz7] {
    padding: 0.75rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-save[b-xd31ig1kz7] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
}

    .btn-save:hover[b-xd31ig1kz7] {
        filter: brightness(1.1);
    }

    .btn-save:disabled[b-xd31ig1kz7] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-cancel[b-xd31ig1kz7] {
    background-color: transparent;
    border: 1px solid var(--color-section-border-reloj-de-luz);
    color: var(--color-form-label-reloj-de-luz);
}

    .btn-cancel:hover[b-xd31ig1kz7] {
        background-color: rgba(255,255,255,0.05);
        color: var(--color-text-reloj-de-luz);
    }

/* Spinner en botón */
.spinner-border-sm[b-xd31ig1kz7] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-xd31ig1kz7 0.75s linear infinite;
}

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

/* Utilidades */
.text-muted[b-xd31ig1kz7] {
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .editor-header[b-xd31ig1kz7] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-xd31ig1kz7] {
        margin-left: 0;
        width: 100%;
    }

    .btn-cancel[b-xd31ig1kz7] {
        width: 100%;
        justify-content: center;
    }

    .stacked-panel[b-xd31ig1kz7], .form-section[b-xd31ig1kz7] {
        padding: 1.5rem;
    }

    .form-actions[b-xd31ig1kz7] {
        justify-content: stretch;
    }

    .btn-save[b-xd31ig1kz7] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/Explorer.razor.rz.scp.css */
/*
 * Explorer.razor.css
 * Estilos para la cuadrícula de descubrimiento (Masonry Style)
 */

.explore-container[b-45fpezkzo8] {
    width: 100%;
    padding: 1rem;
    max-width: 1600px;
    margin: 0 auto;
    /* Añadimos un min-height para que no se vea cortado en pantallas grandes vacías */
    min-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* --- ENCABEZADO --- */
.explore-header[b-45fpezkzo8] {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

    .explore-header h1[b-45fpezkzo8] {
        font-family: 'Great Vibes', cursive;
        font-weight: 400;
        font-size: 4rem;
        color: var(--color-accent-gold);
        margin: 0 0 0.5rem 0;
        line-height: 1.1;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .explore-header p[b-45fpezkzo8] {
        font-family: 'Montserrat', sans-serif;
        color: var(--color-form-label-reloj-de-luz);
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.5;
    }

/* --- EL MOSAICO (Masonry Logic) --- */
.explore-grid[b-45fpezkzo8] {
    display: grid;
    /* Columnas responsivas */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 250px; /* Altura base de celda */
    grid-auto-flow: dense; /* Rellena huecos */
    gap: 1rem;
    flex-grow: 1; /* Ocupa el espacio disponible */
}

/* Estilos para los items contenedores */
.gallery-item[b-45fpezkzo8] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 0s linear 0.3s;
    position: relative;
    background-color: #1a1a1a; /* Fondo base mientras carga imagen */
}

    .gallery-item:hover[b-45fpezkzo8] {
        transform: scale(1.02) translateY(-4px);
        z-index: 10; /* Traer al frente al hover */
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 0s;
    }

    /* --- PATRÓN IRREGULAR (nth-child) --- */
    /* Cada 5to elemento es grande (2x2) */
    .gallery-item:nth-child(5n - 2)[b-45fpezkzo8] {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Cada 7to elemento es alto (1x2) */
    .gallery-item:nth-child(7n - 3)[b-45fpezkzo8] {
        grid-row: span 2;
    }

    /* Cada 11vo elemento es ancho (2x1) */
    .gallery-item:nth-child(11n - 7)[b-45fpezkzo8] {
        grid-column: span 2;
    }

/* --- LOADERS Y ESTADOS VACÍOS --- */
.feed-sentinel[b-45fpezkzo8] {
    width: 100%;
    padding: 2rem;
    text-align: center;
    color: var(--color-accent-gold);
    margin-top: 1rem;
}

.text-muted[b-45fpezkzo8] {
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
}

/* --- ESTADO VACÍO MEJORADO --- */
.explore-empty-state[b-45fpezkzo8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    border: 1px dashed rgba(128, 128, 128, 0.2);
    border-radius: 15px;
    margin-top: 2rem;
    background-color: rgba(255, 255, 255, 0.02);
}

.empty-decoration[b-45fpezkzo8] {
    font-size: 3rem;
    color: var(--color-accent-gold);
    opacity: 0.5;
    margin-bottom: 1.5rem;
    animation: float-b-45fpezkzo8 3s ease-in-out infinite;
}

.empty-title[b-45fpezkzo8] {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5rem;
    color: var(--color-accent-gold);
    margin: 0 0 0.5rem 0;
    font-weight: 400;
}

.empty-subtitle[b-45fpezkzo8] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    max-width: 500px;
    margin-bottom: 2rem;
}

.btn-refresh-explore[b-45fpezkzo8] {
    background: transparent;
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-refresh-explore:hover[b-45fpezkzo8] {
        background-color: var(--color-accent-gold);
        color: #121212;
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    }

    .btn-refresh-explore i[b-45fpezkzo8] {
        transition: transform 0.5s ease;
    }

    .btn-refresh-explore:hover i[b-45fpezkzo8] {
        transform: rotate(180deg);
    }

@keyframes float-b-45fpezkzo8 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- RESPONSIVIDAD (MÓVIL) --- */
@media (max-width: 768px) {
    .explore-grid[b-45fpezkzo8] {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas fijas en móvil */
        grid-auto-rows: 200px;
        gap: 0.5rem;
    }

    .explore-header h1[b-45fpezkzo8] {
        font-size: 3rem;
    }

    /* Desactivar el patrón complejo en pantallas pequeñas para evitar huecos raros */
    .gallery-item:nth-child(5n - 2)[b-45fpezkzo8],
    .gallery-item:nth-child(7n - 3)[b-45fpezkzo8],
    .gallery-item:nth-child(11n - 7)[b-45fpezkzo8] {
        grid-column: auto;
        grid-row: auto;
    }

    /* Patrón simple para móvil: cada 3er elemento ocupa el ancho completo */
    .gallery-item:nth-child(3n)[b-45fpezkzo8] {
        grid-column: span 2;
        grid-row: span 2; /* Opcional: hacerlo más alto para destacar */
    }
}

/* --- UTILIDADES DE LOADING/ERROR --- */
.loading-text[b-45fpezkzo8], .empty-text-container[b-45fpezkzo8] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
}

    .empty-text-container h3[b-45fpezkzo8] {
        color: var(--color-accent-gold);
        margin-bottom: 1rem;
    }

.btn-create-new[b-45fpezkzo8] {
    background-color: var(--color-accent-gold);
    color: #121212;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1rem;
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MyConnections.razor.rz.scp.css */
.font-montserrat[b-sd0d2o9zrz] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-sd0d2o9zrz], .empty-text[b-sd0d2o9zrz] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

.empty-text-cell[b-sd0d2o9zrz] {
    text-align: center;
    padding: 2rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 0.9rem;
}


/* --- Encabezado de Página (Estándar) --- */
.page-header[b-sd0d2o9zrz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-sd0d2o9zrz] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif;
    }

/* Botón (Estilo Cancelar) */
.btn-cancel[b-sd0d2o9zrz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-cancel:hover[b-sd0d2o9zrz] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

/* --- Pestañas de Navegación (Copiado de MySchedule.razor.css) --- */
.agenda-tabs[b-sd0d2o9zrz] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    width: 100%;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    padding: 0 1rem;
    flex-wrap: wrap;
}

.tab-button[b-sd0d2o9zrz] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz); /* Color inactivo */
    background-color: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent; /* Borde inactivo */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px;
    position: relative; /* Para el badge */
}

    .tab-button:hover[b-sd0d2o9zrz] {
        color: var(--color-text-reloj-de-luz);
    }

    .tab-button.active[b-sd0d2o9zrz] {
        color: var(--color-accent-gold);
        border-bottom-color: var(--color-accent-gold);
    }

    .tab-button i[b-sd0d2o9zrz] {
        font-size: 1rem;
    }

/* Badge de notificación en la pestaña */
.notification-badge[b-sd0d2o9zrz] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: var(--color-danger);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- Contenedor de Tabla (Copiado de MyRequests.razor.css) --- */
.table-responsive-wrapper[b-sd0d2o9zrz] {
    width: 100%;
    /* AQUI ESTA LA MAGIA: */
    max-width: 900px; /* Limitamos el ancho para que no se estire feo */
    margin: 0 auto; /* Centramos horizontalmente */
    /* Opcional: Añadir un borde o sombra sutil en escritorio para que parezca una hoja */
    /* background-color: var(--color-dark-carbon); */
    /* border-radius: 8px; */
    /* padding: 1rem; */
}

.requests-table[b-sd0d2o9zrz] {
    width: 100%;
    border-collapse: collapse;
}

    .requests-table th[b-sd0d2o9zrz], .requests-table td[b-sd0d2o9zrz] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
        color: var(--color-text-reloj-de-luz);
    }

    .requests-table th[b-sd0d2o9zrz] {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-form-label-reloj-de-luz);
    }

    .requests-table tbody tr:hover[b-sd0d2o9zrz] {
        background-color: #1a1a1a;
    }

/* --- (NUEVO) Estilos de Avatar y Botones de Acción --- */
.avatar-header[b-sd0d2o9zrz] {
    width: 50px;
}

.avatar-cell[b-sd0d2o9zrz] {
    width: 50px;
}

.actions-cell[b-sd0d2o9zrz] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-sd0d2o9zrz] {
    text-align: right;
}

/* Botones de Icono (Ver) */
.btn-icon[b-sd0d2o9zrz] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
    color: #a0a0a0;
}

.btn-view:hover[b-sd0d2o9zrz] {
    color: var(--color-accent-gold);
    background-color: #2a2a2a;
}

/* Botones de Acción (Aceptar/Rechazar) */
.btn-action[b-sd0d2o9zrz] {
    padding: 0.4rem 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    position: relative;
    margin-left: 0.5rem;
}

/* Verde (hardcodeado, como lo pediste) */
.btn-accept[b-sd0d2o9zrz] {
    background-color: #198754;
    color: white;
}

    .btn-accept:hover[b-sd0d2o9zrz] {
        filter: brightness(1.1);
    }

/* Rojo (usando tu variable) */
.btn-decline[b-sd0d2o9zrz] {
    background-color: var(--color-danger);
    color: white;
}

    .btn-decline:hover[b-sd0d2o9zrz] {
        filter: brightness(1.1);
    }

/* Spinner (copiado de UpcomingCard) */
.btn-action:disabled[b-sd0d2o9zrz] {
    opacity: 0.7;
    cursor: not-allowed;
}

    .btn-action:disabled .spinner-border-sm[b-sd0d2o9zrz] {
        width: 1.1rem;
        height: 1.1rem;
        border-width: .2em;
    }

    .btn-action:disabled > i[b-sd0d2o9zrz],
    .btn-action:disabled > span[b-sd0d2o9zrz] {
        visibility: hidden;
    }

.spinner-border-sm[b-sd0d2o9zrz] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: .75s linear infinite spin-b-sd0d2o9zrz;
}

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


/* === RESPONSIVIDAD (Estilo Tarjeta) === */
@media (max-width: 768px) {
    .requests-table thead[b-sd0d2o9zrz] {
        display: none;
    }

    .requests-table tr[b-sd0d2o9zrz] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--color-dark-carbon);
    }

    .requests-table td[b-sd0d2o9zrz] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .requests-table tr:last-child[b-sd0d2o9zrz] {
        margin-bottom: 0;
    }

    .requests-table td:last-child[b-sd0d2o9zrz] {
        border-bottom: none;
    }

    .requests-table td[b-sd0d2o9zrz]:before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-sd0d2o9zrz] {
        justify-content: flex-end;
    }

        .actions-cell[b-sd0d2o9zrz]:before {
            content: "Acciones";
        }

    .avatar-cell[b-sd0d2o9zrz] {
        justify-content: flex-end;
    }

        .avatar-cell[b-sd0d2o9zrz]:before {
            content: "Avatar";
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MyFeed.razor.rz.scp.css */
/*
 * Inicio.razor.css
 * Versión: Minimalist & Compact
 */

.font-montserrat[b-ety0kah9db] {
    font-family: 'Montserrat', sans-serif;
}

.text-gold[b-ety0kah9db] {
    color: var(--color-accent-gold);
}

/* Loader Centrado */
.loading-container[b-ety0kah9db] {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

/* Mensajes Vacíos (Clean) */
.empty-text-container[b-ety0kah9db] {
    text-align: center;
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px dashed var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
}

    .empty-text-container h3[b-ety0kah9db] {
        margin-top: 0;
        color: var(--color-accent-gold);
        font-size: 1.2rem;
    }

    .empty-text-container p[b-ety0kah9db] {
        color: var(--color-form-label-reloj-de-luz);
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

.btn-create-new[b-ety0kah9db] {
    padding: 0.5rem 1rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

/* 1. ENCABEZADO DE PERFIL (Compacto) */
.watch-profile-layout[b-ety0kah9db] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Reduje padding superior e inferior */
    padding: 1.5rem 0 1rem 0;
    width: 100%;
}

.profile-viewer-section[b-ety0kah9db] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
}

.profile-info h1[b-ety0kah9db] {
    font-family: 'Great Vibes', cursive;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-accent-gold);
    margin: 0;
    line-height: 1.2;
}

.profile-info .profile-type[b-ety0kah9db] {
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
    margin: 0;
}

@media (min-width: 768px) {
    .profile-viewer-section[b-ety0kah9db] {
        flex-direction: row;
        text-align: left;
        justify-content: center;
        gap: 1.5rem;
    }
}

/* 2. SECCIÓN DE CONEXIONES (La Tira Horizontal) */
.connections-section[b-ety0kah9db] {
    width: 100%;
    margin-bottom: 1.5rem; /* Espacio justo antes del feed */
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz); /* Línea divisoria sutil */
    padding-bottom: 1rem;
}

/* Estado Vacío Compacto */
.connections-empty-compact[b-ety0kah9db] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
    padding: 0.5rem;
}

.btn-link-gold[b-ety0kah9db] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent-gold);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* Carrusel */
.connections-carousel-wrapper[b-ety0kah9db] {
    display: flex;
    justify-content: center;
}

.connections-carousel[b-ety0kah9db] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 1rem;
    max-width: 100%;
    /* Scrollbar oculta pero funcional */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .connections-carousel[b-ety0kah9db]::-webkit-scrollbar {
        display: none;
    }

/* Item Individual (Avatar + Nombre) */
.connection-item[b-ety0kah9db] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    width: 70px; /* Ancho fijo para alineación */
    transition: transform 0.2s;
}

    .connection-item:hover[b-ety0kah9db] {
        transform: translateY(-2px);
    }

/* Anillo del Avatar */
.avatar-ring[b-ety0kah9db] {
    padding: 2px;
    border: 2px solid var(--color-accent-gold); /* Anillo dorado de "Story" */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-name[b-ety0kah9db] {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-reloj-de-luz);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* Item "Ver Todo" (Círculo con flecha) */
.view-all-item .view-all-circle[b-ety0kah9db] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--color-form-label-reloj-de-luz);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-reloj-de-luz);
    background-color: rgba(255,255,255,0.05);
    transition: all 0.2s;
}

.view-all-item:hover .view-all-circle[b-ety0kah9db] {
    border-color: var(--color-accent-gold);
    color: var(--color-accent-gold);
}

/* 3. FEED */
.connections-feed-section[b-ety0kah9db] {
    width: 100%;
    /* Se pega justo debajo de la línea divisoria */
}

/* Loader Infinito */
.feed-sentinel[b-ety0kah9db] {
    display: flex;
    justify-content: center;
    padding: 2rem;
    color: var(--color-form-label-reloj-de-luz);
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MyProfile.razor.rz.scp.css */
/*
 * MyProfile.razor.css
 * Estilos para la página "Mi Perfil" del cliente (Tema Oscuro).
*/

.font-montserrat[b-15fvayyzsj] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado de Página (Simple) === */
.page-header[b-15fvayyzsj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-15fvayyzsj] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif;
    }

/* === Botones === */
.btn-cancel[b-15fvayyzsj], .btn-save[b-15fvayyzsj], .btn-danger[b-15fvayyzsj], .btn-secondary[b-15fvayyzsj] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-save[b-15fvayyzsj] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative; /* Para spinner */
}

    .btn-save:hover[b-15fvayyzsj] {
        filter: brightness(1.1);
    }

.btn-secondary[b-15fvayyzsj] {
    background-color: var(--color-button-background-cancel-hover-reloj-de-luz); /* Gris oscuro */
    color: var(--color-text-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
}

    .btn-secondary:hover[b-15fvayyzsj] {
        background-color: #3a3a3a;
        border-color: #555;
    }

/* Estado de carga del botón */
.btn-save.is-loading[b-15fvayyzsj] {
    cursor: not-allowed;
    filter: brightness(0.9);
}

    .btn-save.is-loading > *[b-15fvayyzsj] {
        visibility: hidden;
    }

    .btn-save.is-loading[b-15fvayyzsj]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: calc(50% - 0.6rem);
        left: calc(50% - 0.6rem);
        border: 2px solid var(--color-deep-carbon);
        border-top-color: var(--color-accent-gold);
        border-radius: 50%;
        animation: spin-b-15fvayyzsj 0.8s ease-in-out infinite;
    }

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

/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-15fvayyzsj] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los paneles hijos */
    gap: 2rem;
}

/* Regla general para paneles (ocupa ancho disponible) */
.stacked-panel[b-15fvayyzsj] {
    width: 100%;
}

/* Títulos H4 dentro de los paneles */
.form-section h4[b-15fvayyzsj],
.account-section h4[b-15fvayyzsj],
.watches-list-section h4[b-15fvayyzsj] { /* <-- APLICAR A TODAS LAS SECCIONES */
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Estilo común para los paneles de contenido (los que van centrados) */
.form-section[b-15fvayyzsj],
.account-section[b-15fvayyzsj],
.watches-list-section[b-15fvayyzsj] { /* <-- APLICAR A TODAS LAS SECCIONES */
    max-width: 800px; /* Limitar ancho */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* Grupos y acciones del formulario */
.form-group[b-15fvayyzsj] {
    margin-bottom: 1.5rem;
}

.form-actions[b-15fvayyzsj] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
}

/* Estilo para el checkbox de 'Email Confirmado' */
.form-check[b-15fvayyzsj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    color: var(--color-form-text-reloj-de-luz);
}

.form-check-input[b-15fvayyzsj] {
    margin: 0;
    width: 1rem;
    height: 1rem;
}

.form-check-label[b-15fvayyzsj] {
    margin-bottom: 0; /* Anular margen de label normal */
    font-weight: 500;
}


/* Grid layout (para Sexo y Fecha de Nacimiento) */
.grid[b-15fvayyzsj] {
    display: grid;
}

.grid-cols-1[b-15fvayyzsj] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-4[b-15fvayyzsj] {
    gap: 1rem;
}

@media (min-width: 640px) {
    .sm\:grid-cols-2[b-15fvayyzsj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === Estilos de Formulario (::deep) === */
[b-15fvayyzsj] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-15fvayyzsj] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}
    /* Estilo para inputs deshabilitados (como el email) */
    [b-15fvayyzsj] .form-control:disabled {
        background-color: #2a2a2a;
        opacity: 0.7;
        cursor: not-allowed;
    }

    [b-15fvayyzsj] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-15fvayyzsj] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-15fvayyzsj] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-15fvayyzsj] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* === Responsividad (Afecta principalmente al header) === */
@media (max-width: 768px) {
    .editor-header[b-15fvayyzsj] {
        align-items: flex-start; /* Alinear texto a la izquierda */
    }
}

/* Utilidades */
.text-muted[b-15fvayyzsj] {
    color: var(--color-form-label-reloj-de-luz);
}

.loading-text[b-15fvayyzsj], .empty-text[b-15fvayyzsj] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MyRequests.razor.rz.scp.css */
/*
 * MyRequests.razor.css
 * (CORREGIDO)
 * Añadidos los estilos de .empty-text-container para estandarizar.
*/

.font-montserrat[b-gwecthfi0x] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-gwecthfi0x], .empty-text[b-gwecthfi0x] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- (NUEVO) Contenedor de Error (Copiado de MyWatch.css) --- */
.empty-text-container[b-gwecthfi0x] {
    text-align: center;
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
}
    /* Estilos para el texto dentro del contenedor de error */
    .empty-text-container h3[b-gwecthfi0x] {
        margin-top: 0;
        margin-bottom: 1rem;
        font-family: 'Montserrat', sans-serif; /* (Aseguramos la fuente) */
    }

    .empty-text-container p.empty-text[b-gwecthfi0x] {
        padding: 0; /* Anulamos el padding de 4rem */
        margin-bottom: 1.5rem;
    }
/* (El botón .btn-create-new ya está definido abajo) */


/* --- Encabezado de Página (Estándar) --- */
.page-header[b-gwecthfi0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-gwecthfi0x] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif;
    }

/* Botón Crear Nuevo (Estándar) */
.btn-create-new[b-gwecthfi0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-gwecthfi0x] {
        opacity: 0.9;
    }

    .btn-create-new:disabled[b-gwecthfi0x] {
        opacity: 0.5;
        cursor: not-allowed;
    }


/* --- Contenedor de Tabla Responsiva --- */
.table-responsive-wrapper[b-gwecthfi0x] {
    width: 100%;
}

/* --- Tabla de Solicitudes --- */
.requests-table[b-gwecthfi0x] {
    width: 100%;
    border-collapse: collapse;
}

    .requests-table th[b-gwecthfi0x], .requests-table td[b-gwecthfi0x] {
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
        color: var(--color-text-reloj-de-luz);
    }

    .requests-table th[b-gwecthfi0x] {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-form-label-reloj-de-luz);
    }

    .requests-table tbody tr:hover[b-gwecthfi0x] {
        background-color: #1a1a1a;
    }

/* --- Insignias de Estado (Badges) --- */
.status-badge[b-gwecthfi0x] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
    text-transform: capitalize;
}

/* Colores de Estado (Basado en Enums) */
.status-approved[b-gwecthfi0x] {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--bs-green);
}

.status-pending[b-gwecthfi0x] {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--bs-yellow);
}

.status-rejected[b-gwecthfi0x] {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--bs-danger);
}

.status-canceled[b-gwecthfi0x] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}

.status-creation[b-gwecthfi0x] {
    background-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-info);
}

.status-edition[b-gwecthfi0x] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}


/* --- Celdas de Acciones --- */
.actions-cell[b-gwecthfi0x] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-gwecthfi0x] {
    text-align: right;
}

/* Botones de Icono (Ver) */
.btn-icon[b-gwecthfi0x] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
    color: #a0a0a0;
}

.btn-view:hover[b-gwecthfi0x] {
    color: var(--color-accent-gold);
    background-color: #2a2a2a;
}

/* === RESPONSIVIDAD (Estilo Tarjeta) === */
@media (max-width: 768px) {
    .requests-table thead[b-gwecthfi0x] {
        display: none;
    }

    .requests-table tr[b-gwecthfi0x] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--color-dark-carbon);
    }

    .requests-table td[b-gwecthfi0x] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .requests-table tr:last-child[b-gwecthfi0x] {
        margin-bottom: 0;
    }

    .requests-table td:last-child[b-gwecthfi0x] {
        border-bottom: none;
    }

    .requests-table td[b-gwecthfi0x]:before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-gwecthfi0x] {
        justify-content: flex-end;
    }

        .actions-cell[b-gwecthfi0x]:before {
            content: "Acciones";
        }
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MySchedule.razor.rz.scp.css */
/*
 * MySchedule.razor.css
 * Estilos para "Mi Agenda"
*/

.font-montserrat[b-1winn49wwq] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-1winn49wwq], .empty-text[b-1winn49wwq] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- ESTILOS DE ENCABEZADO --- */
.gallery-header[b-1winn49wwq] {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem; /* Espacio extra arriba para que la cursiva no se corte */
}

.gallery-title[b-1winn49wwq] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3rem; /* Ajustado para consistencia */
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.gallery-description[b-1winn49wwq] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-label-reloj-de-luz); /* Usar variable correcta de texto secundario */
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* --- Barra de Pestañas --- */
.agenda-tabs[b-1winn49wwq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    width: 100%;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    padding: 0 1rem;
    flex-wrap: wrap;
}

.tab-button[b-1winn49wwq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
    background-color: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px;
}

    .tab-button:hover[b-1winn49wwq] {
        color: var(--color-text-reloj-de-luz);
    }

    .tab-button.active[b-1winn49wwq] {
        color: var(--color-accent-gold);
        border-bottom-color: var(--color-accent-gold);
    }

    .tab-button i[b-1winn49wwq] {
        font-size: 1rem;
    }

/* --- Layout Apilado --- */
.editor-stacked-layout[b-1winn49wwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 0 3rem 0; /* Padding inferior para no pegar al footer */
    width: 100%;
    max-width: 800px; /* Limitar ancho del contenido */
    margin: 0 auto; /* Centrar bloque */
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MyScheduleEvent.razor.rz.scp.css */
/*
 * MyScheduleEvent.razor.css
 * Estilos para la página "Cédula" (Diseño Monolito + PESTAÑAS).
*/

.font-montserrat[b-6yeslha93j] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío (Reutilizados) --- */
.loading-text[b-6yeslha93j], .empty-text[b-6yeslha93j] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- 1. Cabecera del Mapa (Estilo Antiguo - Conservado) --- */
.map-monolith-wrapper[b-6yeslha93j] {
    width: 100%;
    margin: 0 0 2rem 0;
    border-radius: 0;
    overflow: hidden;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .map-monolith-wrapper[b-6yeslha93j]  .map-viewer-wrapper {
        border: none;
        border-radius: 0;
    }

    .map-monolith-wrapper[b-6yeslha93j]  .map-container {
        height: 350px;
    }

    .map-monolith-wrapper[b-6yeslha93j]  .map-search-controls {
        display: none;
    }


/* --- 2. Encabezado Elegante (Estilo Antiguo - Conservado) --- */
.gallery-header[b-6yeslha93j] {
    text-align: center;
    margin-bottom: 2.5rem; /* Espacio antes de las pestañas */
    margin-top: 1rem; /* Espacio después del mapa */
}

.gallery-title[b-6yeslha93j] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 400;
}

.btn-link-simple[b-6yeslha93j] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-label-reloj-de-luz);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .btn-link-simple:hover[b-6yeslha93j] {
        color: var(--color-accent-gold);
        text-decoration: underline;
    }

    .btn-link-simple .fas[b-6yeslha93j] {
        font-size: 0.8rem;
    }
/* --- Fin Encabezado Elegante --- */


/* --- 3. Barra de Pestañas (NUEVO - Copiado de MySchedule.razor.css) --- */
.agenda-tabs[b-6yeslha93j] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    width: 100%;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    padding: 0 1rem;
    flex-wrap: wrap;
}

.tab-button[b-6yeslha93j] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz); /* Color inactivo */
    background-color: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent; /* Borde inactivo */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px; /* Alinear con el borde inferior */
}

    .tab-button:hover[b-6yeslha93j] {
        color: var(--color-text-reloj-de-luz); /* Color hover */
    }

    .tab-button.active[b-6yeslha93j] {
        color: var(--color-accent-gold); /* Color activo */
        border-bottom-color: var(--color-accent-gold); /* Borde activo */
    }

    .tab-button i[b-6yeslha93j] {
        font-size: 1rem;
    }


/* --- 4. Layout Apilado (NUEVO - Copiado de MySchedule.razor.css) --- */
.editor-stacked-layout[b-6yeslha93j] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los paneles hijos (las hojas de cuaderno) */
    gap: 2rem;
    padding: 1rem 0 2rem 0;
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/MyWatch.razor.rz.scp.css */
/*
 * MyWatch.razor.css
 * Estilos para el Perfil del Reloj
*/

.font-montserrat[b-dby1nwlg4w] {
    font-family: 'Montserrat', sans-serif;
}

/* Estilos de Carga / Vacío */
.loading-text[b-dby1nwlg4w], .empty-text[b-dby1nwlg4w] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

.empty-text-container[b-dby1nwlg4w] {
    text-align: center;
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
}

    .empty-text-container h3[b-dby1nwlg4w] {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .empty-text-container p[b-dby1nwlg4w] {
        padding: 0;
        margin-bottom: 1.5rem;
    }

.btn-create-new[b-dby1nwlg4w] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-dby1nwlg4w] {
        opacity: 0.9;
    }

/* Layout Principal */
.watch-profile-layout[b-dby1nwlg4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 1rem;
    width: 100%;
}

/* 1. Sección del Perfil (Header) */
.profile-viewer-section[b-dby1nwlg4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 900px;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

.profile-info h1[b-dby1nwlg4w] {
    font-family: 'Great Vibes', cursive;
    font-size: 2.75rem;
    font-weight: 400;
    color: var(--color-accent-gold);
    margin: 0 0 0.25rem 0;
}

.profile-info .profile-type[b-dby1nwlg4w] {
    font-size: 1rem;
    color: var(--color-form-label-reloj-de-luz);
    margin: 0;
}

@media (min-width: 768px) {
    .profile-viewer-section[b-dby1nwlg4w] {
        flex-direction: row;
        text-align: left;
        justify-content: center;
    }
}

/* 2. Pestañas de Filtro (Agenda Style) */
.agenda-tabs[b-dby1nwlg4w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.tab-button[b-dby1nwlg4w] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
    background-color: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .tab-button:hover[b-dby1nwlg4w] {
        color: var(--color-text-reloj-de-luz);
    }

    .tab-button.active[b-dby1nwlg4w] {
        color: var(--color-accent-gold);
        border-bottom-color: var(--color-accent-gold);
    }

    .tab-button i[b-dby1nwlg4w] {
        font-size: 1rem;
    }

/* Botones de Acción del Perfil */
.profile-actions[b-dby1nwlg4w] {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .profile-actions[b-dby1nwlg4w] {
        justify-content: flex-start;
    }
}

.btn-profile-action[b-dby1nwlg4w] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-profile-action:disabled[b-dby1nwlg4w] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Estilos específicos de botones */
.btn-connect[b-dby1nwlg4w] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
}

    .btn-connect:hover[b-dby1nwlg4w] {
        filter: brightness(1.1);
    }

.btn-share[b-dby1nwlg4w], .btn-cancel-req[b-dby1nwlg4w] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-share:hover[b-dby1nwlg4w], .btn-cancel-req:hover[b-dby1nwlg4w] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

/* Grupo de botones para responder solicitud */
.pending-actions-group[b-dby1nwlg4w] {
    display: flex;
    gap: 0.5rem;
}

.btn-accept[b-dby1nwlg4w] {
    background-color: var(--color-accent-gold); /* O un verde si prefieres */
    color: #121212;
}

    .btn-accept:hover[b-dby1nwlg4w] {
        filter: brightness(1.1);
    }

.btn-ignore[b-dby1nwlg4w] {
    background-color: transparent;
    border: 1px solid var(--color-form-label-reloj-de-luz);
    color: var(--color-form-label-reloj-de-luz);
}

    .btn-ignore:hover[b-dby1nwlg4w] {
        border-color: #e53e3e; /* Rojo al pasar el mouse */
        color: #e53e3e;
    }

/* Badge Status */
.profile-connection-status[b-dby1nwlg4w] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 5px;
    background-color: transparent;
    border: 1px solid var(--color-form-label-reloj-de-luz);
    color: var(--color-form-label-reloj-de-luz);
    opacity: 0.7;
}

    .profile-connection-status.status-accepted[b-dby1nwlg4w] {
        color: var(--color-accent-gold);
        border-color: var(--color-accent-gold);
        opacity: 1;
    }

/* Spinner */
.spinner-border-sm[b-dby1nwlg4w] {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: -0.125em;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-dby1nwlg4w 0.75s linear infinite;
}

@keyframes spin-b-dby1nwlg4w {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/RequestCeremony.razor.rz.scp.css */
/*
 * RequestCeremony.razor.css
 * Estilos para la página de solicitud de ceremonia (Cliente).
*/

.font-montserrat[b-kocxt1c13s] {
    font-family: 'Montserrat', sans-serif;
}

/* === Encabezado de Página (Simple) === */
.page-header[b-kocxt1c13s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header h1[b-kocxt1c13s] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        color: var(--color-text-reloj-de-luz);
        font-family: 'Montserrat', sans-serif;
    }

/* === Botones === */
.btn-cancel[b-kocxt1c13s], .btn-save[b-kocxt1c13s] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-kocxt1c13s] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-kocxt1c13s] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-kocxt1c13s] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative; /* Para spinner */
}

    .btn-save:hover[b-kocxt1c13s] {
        filter: brightness(1.1);
    }

    /* Estado de carga del botón */
    .btn-save.is-loading[b-kocxt1c13s] {
        cursor: not-allowed;
        filter: brightness(0.9);
    }

        .btn-save.is-loading > *[b-kocxt1c13s] {
            visibility: hidden;
        }

        .btn-save.is-loading[b-kocxt1c13s]::after {
            content: '';
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            top: calc(50% - 0.6rem);
            left: calc(50% - 0.6rem);
            border: 2px solid var(--color-deep-carbon);
            border-top-color: var(--color-accent-gold);
            border-radius: 50%;
            animation: spin-b-kocxt1c13s 0.8s ease-in-out infinite;
        }

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

/* ===== LAYOUT APILADO Y PANELES ===== */
.editor-stacked-layout[b-kocxt1c13s] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los paneles hijos */
    gap: 2rem;
}

/* Regla general para paneles (ocupa ancho disponible) */
.stacked-panel[b-kocxt1c13s] {
    width: 100%;
}

/* Títulos H4 dentro de los paneles */
.form-section h4[b-kocxt1c13s] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Estilo común para los paneles de contenido (los que van centrados) */
.form-section[b-kocxt1c13s] {
    max-width: 800px; /* Limitar ancho */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* Grupos y acciones del formulario */
.form-group[b-kocxt1c13s] {
    margin-bottom: 1.5rem;
}

.form-actions[b-kocxt1c13s] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
    gap: 1rem; /* Espacio entre botones (ej. Cancelar, Guardar) */
}

/* Grid layout (para Tipo y Fecha) */
.grid[b-kocxt1c13s] {
    display: grid;
}

.grid-cols-1[b-kocxt1c13s] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-4[b-kocxt1c13s] {
    gap: 1rem;
}

@media (min-width: 640px) {
    .sm\:grid-cols-2[b-kocxt1c13s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === Estilos de Formulario (::deep) === */
[b-kocxt1c13s] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-kocxt1c13s] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-kocxt1c13s] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-kocxt1c13s] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}

[b-kocxt1c13s] .form-control.invalid {
    border-color: var(--color-danger);
}

    [b-kocxt1c13s] .form-control.invalid:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 .2rem rgba(229,62,62,.25);
    }

/* === Responsividad (Afecta principalmente al header) === */
@media (max-width: 768px) {
    .editor-header[b-kocxt1c13s] {
        align-items: flex-start; /* Alinear texto a la izquierda */
    }
}

/* Utilidades */
.text-muted[b-kocxt1c13s] {
    color: var(--color-form-label-reloj-de-luz);
}

.loading-text[b-kocxt1c13s], .empty-text[b-kocxt1c13s] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/StoryGalleryPage.razor.rz.scp.css */
.loading-text[b-ebud4sli1m] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- 1. ENCABEZADO (Estilo Cédula) --- */
.gallery-header[b-ebud4sli1m] {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 1rem;
    padding: 0 1rem;
}

.gallery-title[b-ebud4sli1m] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3rem; /* Un poco más chico que MySchedule (3.5) para que quepa mejor */
    line-height: 1.2;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
}

/* El botón estilo enlace simple */
.btn-link-simple[b-ebud4sli1m] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-label-reloj-de-luz);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem; /* Espacio antes de la descripción */
}

    .btn-link-simple:hover[b-ebud4sli1m] {
        color: var(--color-accent-gold);
        text-decoration: underline;
    }

    .btn-link-simple i[b-ebud4sli1m] {
        font-size: 0.8rem;
    }

.gallery-description[b-ebud4sli1m] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-reloj-de-luz);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* --- GRILLA --- */
.gallery-grid[b-ebud4sli1m] {
    display: grid;
    gap: 1.5rem;
    padding: 0 1.5rem;
    margin-bottom: 3rem;
}

/* Wrapper */
.grid-item-wrapper[b-ebud4sli1m] {
    border-radius: 8px;
    transition: transform 0.3s ease;
    scroll-margin-top: 150px; /* Espacio para el scroll */
    cursor: pointer;
}

    /* --- HIGHLIGHT (El efecto dorado) --- */
    /* Usamos ::deep para asegurar que penetre si es necesario, 
   aunque .grid-item-wrapper está en este mismo componente. */
    .grid-item-wrapper.highlighted-card[b-ebud4sli1m] {
        box-shadow: 0 0 0 4px var(--color-accent-gold), 0 0 30px var(--color-accent-gold);
        transform: scale(1.03);
        z-index: 10;
        animation: pulseHighlight-b-ebud4sli1m 2s infinite;
    }

@keyframes pulseHighlight-b-ebud4sli1m {
    0% {
        box-shadow: 0 0 0 4px var(--color-accent-gold), 0 0 20px var(--color-accent-gold);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(192, 164, 124, 0.5), 0 0 10px rgba(192, 164, 124, 0.5);
    }

    100% {
        box-shadow: 0 0 0 4px var(--color-accent-gold), 0 0 20px var(--color-accent-gold);
    }
}

/* Móvil */
@media (max-width: 768px) {
    .btn-back-absolute[b-ebud4sli1m] {
        position: relative; /* En móvil que fluya normal */
        left: 0;
        top: 0;
        margin-bottom: 1.5rem;
        width: 100%; /* Botón ancho */
        justify-content: center;
    }

    .gallery-title[b-ebud4sli1m] {
        font-size: 2.5rem;
    }
}
/* _content/Ceremony.RelojDeLuz/Pages/Cliente/WatchRedirect.razor.rz.scp.css */
body[b-mk1kpyo0kf] {
}
/* _content/Ceremony.RelojDeLuz/Pages/Login.razor.rz.scp.css */
.login-container[b-xbsxcsyl1i] {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: var(--color-background-paper);
    background-image: var(--texture-paper);
}

.login-card[b-xbsxcsyl1i] {
    width: 100%;
    max-width: 420px;
    background-color: white;
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    text-align: center;
}

.login-logo-link[b-xbsxcsyl1i] {
    display: inline-block;
    margin-bottom: 1rem;
}

/* ===== ESTILOS DEL LOGO MODIFICADOS ===== */
.login-logo-img[b-xbsxcsyl1i] {
    height: 4rem; /* 64px */
    width: auto;
    /* 1. Se elimina el filtro de invertir color */
    /* filter: invert(1); */
    /* 2. Se añade la transición para la animación suave */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    /* 3. Se evita que la imagen pueda ser seleccionada o arrastrada */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
}

/* 4. Se define la animación al pasar el mouse sobre el enlace del logo */
.login-logo-link:hover .login-logo-img[b-xbsxcsyl1i] {
    transform: scale(1.1); /* Se agranda un 10% */
    filter: drop-shadow(0 0 10px rgba(192, 164, 124, 0.7)); /* Resplandor dorado sutil */
}

.login-title[b-xbsxcsyl1i] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: var(--color-text-dark);
}

.login-subtitle[b-xbsxcsyl1i] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.login-form[b-xbsxcsyl1i] {
    text-align: left;
}

.login-error-message[b-xbsxcsyl1i] {
    background-color: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
}

[b-xbsxcsyl1i] .form-field {
    margin-bottom: 1.25rem;
}

[b-xbsxcsyl1i] label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    display: block;
}

[b-xbsxcsyl1i] .input-element {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    background-color: var(--color-background-paper);
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s ease;
}

    [b-xbsxcsyl1i] .input-element:focus {
        outline: none;
        border-color: var(--color-accent-gold);
        box-shadow: 0 0 0 3px rgba(192, 164, 124, 0.25);
        background-color: white;
    }

[b-xbsxcsyl1i] .validation-error-text {
    color: #e53e3e;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

[b-xbsxcsyl1i] .form-actions {
    margin-top: 1.5rem;
}

[b-xbsxcsyl1i] .btn-primary-custom {
    width: 100%;
    text-align: center;
}
/* _content/Ceremony.RelojDeLuz/Shared/AboutSection.razor.rz.scp.css */
.about-section[b-4zfnc8v2lk] {
    position: relative;
    width: 100%;
    background-color: var(--color-background-paper);
    padding: 6rem 1.5rem;
    overflow: hidden;
}

.about-content-wrapper[b-4zfnc8v2lk] {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    background-color: white;
    background-image: var(--texture-paper);
    color: var(--color-text-dark);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .about-content-wrapper[b-4zfnc8v2lk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
        padding: 4rem;
    }
}

/* --- Estilos para la imagen y su animación --- */
.about-image-container[b-4zfnc8v2lk] {
    padding: 1rem;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    /* ===== CAMBIO A ALTURA DINÁMICA ===== */
    /* 1. La altura ahora es el 70% de la altura de la ventana. ¡Puedes ajustar este valor! */
    height: 70vh;
    /* 2. Añadimos una altura máxima para evitar que se vea demasiado grande en monitores muy altos. */
    max-height: 650px;
    overflow: hidden;
    /* Estado inicial de la animación (sin cambios) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .about-image-container.is-visible[b-4zfnc8v2lk] {
        opacity: 1;
        transform: translateY(0);
    }

    .about-image-container img[b-4zfnc8v2lk] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
    }

/* --- Estilos para el texto usando tus variables --- */
.about-text-content .title-font[b-4zfnc8v2lk] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3rem;
    line-height: 1;
}

.about-text-content .body-font[b-4zfnc8v2lk] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-light);
    line-height: 1.75;
    margin-top: 1.5rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/AdminLayout.razor.rz.scp.css */
/*
 * ClientLayout.razor.css
 * Estilos aislados para el layout principal del cliente
*/

/* === ESTRUCTURA PRINCIPAL === */
.admin-layout[b-spvukvhg8e] {
    display: flex;
    background-color: var(--color-background-reloj-de-luz);
    color: var(--color-text-reloj-de-luz);
}

.page-container[b-spvukvhg8e] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /*margin-left: 260px;*/ /* Ancho del sidebar expandido versión que recorre a la derecha el contenido de body (descomentar para v1) */
    margin-left: 78px; /* Ancho del sidebar colapsado versión que no recorre a la derecha el contenido de body (comentar para v1) */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-main-content[b-spvukvhg8e] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* === INTERACCIÓN CON SIDEBAR, versión que recorre a la derecha el contenido del body (descomentar para v1) === */
/*.admin-layout.sidebar-collapsed .page-container {
    margin-left: 78px;
}*/

/* === OVERLAY PARA NAVEGACIÓN MÓVIL === */
.mobile-nav-overlay[b-spvukvhg8e] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1099;
    animation: fadeInOverlay-b-spvukvhg8e 0.3s;
}

@keyframes fadeInOverlay-b-spvukvhg8e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* === LÓGICA RESPONSIVA (MÓVIL) === */
@media (max-width: 992px) {
    .page-container[b-spvukvhg8e],
    .admin-layout.sidebar-collapsed .page-container[b-spvukvhg8e] {
        margin-left: 0;
    }

    .app-main-content[b-spvukvhg8e] {
        padding: calc(60px + 1.5rem) 1.5rem 1.5rem;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/AdminSidebar.razor.rz.scp.css */
/*
 * AdminSidebar.razor.css
 * Estilos aislados para la barra lateral del cliente (Tema Oscuro Estilo Instagram).
*/

/* === ESTADO BASE (EXPANDIDO) === */
.sidebar[b-ua96lut3x8] {
    width: 260px;
    background-color: var(--color-sidebar-background-reloj-de-luz);
    border-right: 1px solid var(--color-sidebar-border-reloj-de-luz);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Montserrat', sans-serif;
    z-index: 1100;
    display: flex;
    flex-direction: column;
}

.sidebar-header[b-ua96lut3x8] {
    padding: 1.25rem 0.75rem;
    text-align: center;
}

    .sidebar-header a[b-ua96lut3x8] {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        height: 40px;
    }

    .sidebar-header .icon-placeholder[b-ua96lut3x8] {
        width: 90px;
        flex-shrink: 0;
        text-align: left;
        padding-left: .8rem;
    }

    .sidebar-header img[b-ua96lut3x8] {
        height: 30px;
        vertical-align: middle;
    }

    .sidebar-header .logo-font[b-ua96lut3x8] {
        font-family: 'Great Vibes', cursive;
        font-size: 1.5rem;
        color: var(--color-sidebar-logo-font-reloj-de-luz);
        margin-left: -12px;
        padding-top: 8px;
    }

.sidebar-nav[b-ua96lut3x8] {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
}

.nav-section[b-ua96lut3x8] {
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
}

.nav-footer[b-ua96lut3x8] {
    margin-top: auto; /* Empuja esta sección al fondo */
    padding-bottom: 1rem;
}


[b-ua96lut3x8] .nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-sidebar-nav-link-reloj-de-luz);
    padding: 0.85rem 0;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}

[b-ua96lut3x8] .icon-placeholder {
    width: 55px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.2rem;
}

[b-ua96lut3x8] .link-text {
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    font-weight: 500;
}

[b-ua96lut3x8] .nav-link:hover {
    background-color: var(--color-sidebar-nav-link-hover-reloj-de-luz);
}

[b-ua96lut3x8] .nav-link.active {
    background-color: var(--color-sidebar-nav-link-active-reloj-de-luz);
    font-weight: 700;
}

/* --- ESTADO COLAPSADO --- */

.admin-layout.sidebar-collapsed .sidebar[b-ua96lut3x8] {
    width: 78px;
}

.admin-layout.sidebar-collapsed .link-text[b-ua96lut3x8] {
    opacity: 0;
    pointer-events: none;
    display: none;
}

/* --- ESTADO MÓVIL (RESPONSIVE) --- */
@media (max-width: 992px) {
    .sidebar[b-ua96lut3x8] {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    }

    .admin-layout.mobile-nav-open .sidebar[b-ua96lut3x8] {
        transform: translateX(0);
        width: 260px;
    }

    .admin-layout.mobile-nav-open .link-text[b-ua96lut3x8] {
        opacity: 1;
        pointer-events: auto;
        display: inline-block;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/AdminTopBar.razor.rz.scp.css */
/* === BARRA SUPERIOR (ESCRITORIO) === */
.app-top-bar[b-q0bm6adp6g] {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: 70px;
    background-color: var(--color-topbar-background-reloj-de-luz);
    border-bottom: 1px solid var(--color-topbar-border-reloj-de-luz);
    display: flex;
    align-items: center;
    /* [CAMBIO] justifyContent space-between si tuvieras algo a la izquierda, 
       o flex-end para empujar todo a la derecha. */
    justify-content: flex-end;
    padding: 0 2rem;
    flex-shrink: 0;
}

/* Contenedor para agrupar Campana + Usuario */
.top-bar-actions[b-q0bm6adp6g] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* === ESTILOS DE NOTIFICACIONES (Copiados de ClientTopBar para consistencia) === */
.notification-wrapper[b-q0bm6adp6g] {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-btn[b-q0bm6adp6g] {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0.5rem;
    color: var(--color-user-text-reloj-de-luz);
    font-size: 1.3rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notification-btn:hover[b-q0bm6adp6g] {
        color: var(--color-accent-gold);
        transform: scale(1.05);
    }

.notification-badge[b-q0bm6adp6g] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #e53e3e;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 4px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.2);
}

.notification-dropdown-container[b-q0bm6adp6g] {
    position: absolute;
    top: calc(100% + 10px);
    right: -10px;
    z-index: 1060;
    animation: fadeIn-b-q0bm6adp6g 0.2s ease-out;
}

/* === MENÚ DE USUARIO === */
.user-menu-container[b-q0bm6adp6g] {
    position: relative;
    background-color: var(--color-user-background-reloj-de-luz); /* Revisa si tenías un typo en tu css original (color-user--background) */
    border-radius: 50px;
}

.user-menu-button[b-q0bm6adp6g] {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50px;
    transition: background-color 0.2s ease;
}

    .user-menu-button:hover[b-q0bm6adp6g] {
        background-color: var(--color-user-background-hover-reloj-de-luz);
    }

.user-name[b-q0bm6adp6g] {
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-user-text-reloj-de-luz);
}

/* [NUEVO] Distintivo visual para Admin */
.badge-admin[b-q0bm6adp6g] {
    font-size: 0.65rem;
    background-color: var(--color-accent-gold);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 5px;
}

.user-dropdown-menu[b-q0bm6adp6g] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--color-user-background-dropdown-items-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    border: 1px solid #363636;
    min-width: 240px;
    z-index: 1050;
    overflow: hidden;
    padding: 0.5rem 0;
    animation: fadeIn-b-q0bm6adp6g 0.2s ease-out;
}

.dropdown-header[b-q0bm6adp6g] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: #a8a8a8;
    border-bottom: 1px solid #363636;
    margin-bottom: 0.5rem;
}

.user-dropdown-item[b-q0bm6adp6g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #f5f5f5;
    text-decoration: none;
    width: 100%;
    transition: background-color 0.2s;
    border: none;
    background: none;
    margin: 0;
}

    .user-dropdown-item:hover[b-q0bm6adp6g] {
        background-color: var(--color-user-background-dropdown-item-hover-reloj-de-luz);
    }

    .user-dropdown-item i[b-q0bm6adp6g] {
        width: 20px;
        text-align: center;
        color: var(--color-user-dropdown-item-i-reloj-de-luz);
    }

.logout-button[b-q0bm6adp6g] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.dropdown-divider[b-q0bm6adp6g] {
    height: 1px;
    background-color: var(--color-user-dropdown-item-divider-reloj-de-luz);
    margin: 0.5rem 0;
}

/* === LÓGICA RESPONSIVA (MÓVIL) === */
.mobile-header[b-q0bm6adp6g] {
    display: none;
}

@media (max-width: 992px) {
    .app-top-bar[b-q0bm6adp6g] {
        display: none;
    }

    .mobile-header[b-q0bm6adp6g] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 1rem;
        background-color: var(--color-topbar-background-reloj-de-luz);
        border-bottom: 1px solid var(--color-topbar-border-reloj-de-luz);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1020;
    }

    .mobile-menu-toggle[b-q0bm6adp6g] {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--color-topbar-mobile-menu-toggle-reloj-de-luz);
        cursor: pointer;
    }

    /* Contenedor de acciones móvil */
    .mobile-actions[b-q0bm6adp6g] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .notification-dropdown-container.mobile[b-q0bm6adp6g] {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0 10px;
        pointer-events: none;
    }

        .notification-dropdown-container.mobile[b-q0bm6adp6g] >  .notification-dropdown-panel {
            pointer-events: auto;
            box-shadow: 0 5px 30px rgba(0,0,0,0.8);
            width: 100%;
            max-width: 400px;
        }
}

/* === UTILIDADES === */
.click-away-overlay[b-q0bm6adp6g] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    cursor: default;
}

@keyframes fadeIn-b-q0bm6adp6g {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/AppGallery.razor.rz.scp.css */
.gallery-section[b-ldbh47ogdc] {
    width: 100%;
    padding: 0.5rem 1.5rem;
}

.gallery-header[b-ldbh47ogdc] {
    text-align: center;
    margin-bottom: 4rem;
}

.gallery-title[b-ldbh47ogdc] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 400;
}

.gallery-description[b-ldbh47ogdc] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* --- El Mosaico de Imágenes --- */
.gallery-grid[b-ldbh47ogdc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-item[b-ldbh47ogdc] {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    cursor: pointer;
}

    .gallery-item:nth-child(5n - 2)[b-ldbh47ogdc] {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item:nth-child(7n - 3)[b-ldbh47ogdc] {
        grid-row: span 2;
    }

    .gallery-item:nth-child(11n - 7)[b-ldbh47ogdc] {
        grid-column: span 2;
    }

@media (max-width: 768px) {
    .gallery-item:nth-child(5n - 2)[b-ldbh47ogdc],
    .gallery-item:nth-child(7n - 3)[b-ldbh47ogdc],
    .gallery-item:nth-child(11n - 7)[b-ldbh47ogdc] {
        grid-column: auto;
        grid-row: auto;
    }
}


.gallery-item img[b-ldbh47ogdc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

.gallery-item:hover img[b-ldbh47ogdc] {
    transform: scale(1.05);
}

.gallery-item-overlay[b-ldbh47ogdc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.gallery-item:hover .gallery-item-overlay[b-ldbh47ogdc] {
    opacity: 1;
}

/* ===== NUEVOS ESTILOS PARA EL LIGHTBOX REAL ===== */
.lightbox-overlay[b-ldbh47ogdc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-ldbh47ogdc 0.3s ease;
}

.lightbox-content[b-ldbh47ogdc] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-image[b-ldbh47ogdc] {
    max-width: 100%;
    max-height: 90vh; /* La imagen nunca será más alta que el 90% de la pantalla */
    border-radius: 0.25rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.lightbox-close[b-ldbh47ogdc], .lightbox-prev[b-ldbh47ogdc], .lightbox-next[b-ldbh47ogdc] {
    position: absolute;
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .lightbox-close:hover[b-ldbh47ogdc], .lightbox-prev:hover[b-ldbh47ogdc], .lightbox-next:hover[b-ldbh47ogdc] {
        background: rgba(0,0,0,0.6);
    }

.lightbox-close[b-ldbh47ogdc] {
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
}

.lightbox-prev[b-ldbh47ogdc], .lightbox-next[b-ldbh47ogdc] {
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
}

.lightbox-prev[b-ldbh47ogdc] {
    left: -70px;
}

.lightbox-next[b-ldbh47ogdc] {
    right: -70px;
}

@keyframes fadeIn-b-ldbh47ogdc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Media query para móviles */
@media (max-width: 768px) {
    .lightbox-prev[b-ldbh47ogdc], .lightbox-next[b-ldbh47ogdc] {
        top: auto;
        bottom: -60px;
        transform: none;
    }

    .lightbox-prev[b-ldbh47ogdc] {
        left: 25%;
    }

    .lightbox-next[b-ldbh47ogdc] {
        right: 25%;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/CedulaTab.razor.rz.scp.css */
/*
 * CedulaTab.razor.css
 * (Sin cambios)
 * Los estilos .btn-save y .btn-cancel
 * se reutilizan para el flujo "Unirse".
*/

/* --- 1. ESTILOS BASE (Copiados de UpcomingCard.razor.css) --- */

.agenda-card[b-ql5yrpj338] {
    max-width: 800px;
    width: 100%;
    position: relative;
    padding: 1.5rem;
    background-color: transparent;
    border: none;
    perspective: 1000px;
}

.agenda-paper[b-ql5yrpj338] {
    background-color: #fdfdfa; /* Color papel hueso */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    z-index: 2;
    transform: rotate(-0.2deg);
    min-height: 400px;
}

.agenda-card[b-ql5yrpj338]::before,
.agenda-card[b-ql5yrpj338]::after {
    content: '';
    position: absolute;
    inset: 1.5rem;
    background-color: #fdfdfa;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.agenda-card[b-ql5yrpj338]::before {
    z-index: 1;
    transform: translate(8px, 6px) rotate(1.5deg);
}

.agenda-card[b-ql5yrpj338]::after {
    z-index: 0;
    transform: translate(14px, 10px) rotate(-1.2deg);
}

.agenda-content[b-ql5yrpj338] {
    position: relative;
    padding-bottom: 1rem;
}

    .agenda-content[b-ql5yrpj338]::before {
        content: '';
        position: absolute;
        left: -2rem;
        top: -1rem;
        bottom: -1rem;
        width: 1px;
        background-color: rgba(255, 0, 0, 0.4);
    }

/* --- 2. ESTILOS DE LISTA (Renglones) --- */

.invitation-list[b-ql5yrpj338] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item[b-ql5yrpj338] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    /* (LA LÍNEA AZUL) - Esto dibuja los renglones */
    border-bottom: 1px solid rgba(0, 150, 255, 0.2);
    font-family: 'Montserrat', sans-serif;
    color: #333;
    min-height: 2.5rem; /* Altura estándar de renglón */
}

    .list-item:last-child[b-ql5yrpj338] {
        border-bottom: none;
    }

/* Renglón del Título */
.title-line[b-ql5yrpj338] {
    min-height: 3rem;
}

    .title-line .item-title[b-ql5yrpj338] {
        font-family: 'Great Vibes', cursive;
        font-size: 2rem;
        color: #2c3e50;
        font-weight: normal;
        margin-top: 0.5rem;
        width: 100%;
    }

/* Renglón de Acciones (Pending/Declined) */
.action-line[b-ql5yrpj338] {
    justify-content: center;
    padding: 1.5rem 0.5rem;
}

/* Renglón de Etiqueta QR */
.qr-label-line[b-ql5yrpj338] {
    justify-content: center;
    padding-top: 1rem;
    /* (FIX) Se elimina el 'border-bottom: none' para que 
       el renglón justo DEBAJO del Post-it tenga su línea azul */
}

.qr-label-text[b-ql5yrpj338] {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    color: #4a3c2b;
    font-size: 0.9rem;
    text-align: center;
}

/* Renglones vacíos */
.empty-line[b-ql5yrpj338] {
    /* Renglón normal, pero el texto se oculta */
}

    .empty-line .line-text-filler[b-ql5yrpj338] {
        visibility: hidden;
    }


/* --- 3. ESTADO PENDIENTE (Botones Café) --- */

.pending-actions-wrapper[b-ql5yrpj338] {
    width: 100%;
    text-align: center;
}

.parchment-text[b-ql5yrpj338] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
}

.status-pending[b-ql5yrpj338] {
    color: #795548;
}

.form-actions[b-ql5yrpj338] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-save[b-ql5yrpj338], .btn-cancel[b-ql5yrpj338] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 140px;
    flex-grow: 1;
}

.btn-save[b-ql5yrpj338] {
    background-color: #795548;
    color: #fdfdfa;
    border: 1px solid #795548;
}

    .btn-save:hover[b-ql5yrpj338] {
        background-color: #5d4037;
    }

.btn-cancel[b-ql5yrpj338] {
    background-color: transparent;
    color: #795548;
    border: 1px solid #795548;
}

    .btn-cancel:hover[b-ql5yrpj338] {
        background-color: rgba(121, 85, 72, 0.1);
    }

    .btn-save:disabled[b-ql5yrpj338], .btn-cancel:disabled[b-ql5yrpj338] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-save .spinner-border[b-ql5yrpj338],
    .btn-cancel .spinner-border[b-ql5yrpj338] {
        width: 1.2em;
        height: 1.2em;
        border-width: .2em;
    }


/* --- 4. ESTADO ACEPTADO (Post-it) --- */

.post-it-anchor[b-ql5yrpj338] {
    position: relative;
}

.post-it-note-wrapper[b-ql5yrpj338] {
    position: absolute;
    top: 2.0rem;
    left: 50%;
    transform: translateX(-50%) rotate(2.5deg);
    z-index: 10;
}

.post-it-note[b-ql5yrpj338] {
    background-color: #E6E6FA; /* Lila (como en tu captura) */
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    width: 200px;
    height: 200px;
    border: 1px solid #D8BFD8;
}

.qr-code-placeholder[b-ql5yrpj338] {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    color: #333;
    box-sizing: border-box;
}

/* --- 5. ESTADO RECHAZADO --- */

.declined-wrapper[b-ql5yrpj338] {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.declined-icon[b-ql5yrpj338] {
    font-size: 3rem;
    color: var(--color-danger);
}

.status-declined[b-ql5yrpj338] {
    color: #7a2126; /* Rojo oscuro */
}

/* Spinner (copiado de UpcomingCard) */
.spinner-border-sm[b-ql5yrpj338] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spin;
    animation: .75s linear infinite spin-b-ql5yrpj338;
}

@keyframes spin-b-ql5yrpj338 {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/CeremonyDetailCard.razor.rz.scp.css */
/*
 * CeremonyDetailCard.razor.css
 * (PULIDO: Añadidos estilos para badges de estado y spinners)
*/

/* 1. El Panel Principal (Hereda el fondo oscuro de .form-section) */
.detail-card-panel[b-xtlutgys7l] {
    padding: 1.5rem; /* Padding más ajustado para móvil */
    max-width: 900px; /* Ancho consistente con el ImageViewer */
    box-sizing: border-box;
}

/* 2. La Cuadrícula (1 Columna por defecto - Móvil) */
.detail-grid-list[b-xtlutgys7l] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* Espacio entre ítems */
}

/* 3. Cada Ítem (La caja gris oscura) */
.detail-item[b-xtlutgys7l] {
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column; /* Etiqueta arriba, valor abajo */
    gap: 0.25rem;
}

/* 4. La Etiqueta (Icono + Texto Gris) */
.detail-label[b-xtlutgys7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-form-label-reloj-de-luz); /* Gris tenue */
    text-transform: uppercase;
}

    .detail-label .fas[b-xtlutgys7l] {
        color: var(--color-accent-gold);
        font-size: 0.75rem;
        width: 12px; /* Alinea los íconos */
        text-align: center;
    }

/* 5. El Valor (Texto Blanco + Botón Dorado) */
.detail-value[b-xtlutgys7l] {
    display: flex;
    justify-content: space-between; /* Empuja el botón a la derecha */
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: var(--color-text-reloj-de-luz); /* Blanco/Suave */
    font-weight: 500;
}

.value-text[b-xtlutgys7l] {
    word-break: break-word; /* Para ubicaciones largas */
}

/* 6. El Botón (Reutilizado de CeremonyWatch.razor.css) */
.btn-map-link[b-xtlutgys7l] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent-gold);
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0; /* Evita que el botón se rompa */
    /* (NUEVO) Para alinear spinner e ícono */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

    .btn-map-link:hover[b-xtlutgys7l] {
        color: white;
    }

    /* (NUEVO) Estado deshabilitado/cargando para el botón dorado */
    .btn-map-link:disabled[b-xtlutgys7l] {
        opacity: 0.7;
        cursor: not-allowed;
    }

        .btn-map-link:disabled .spinner-border-sm[b-xtlutgys7l] {
            width: 1.1rem;
            height: 1.1rem;
            border-width: .2em;
        }

        .btn-map-link:disabled > i[b-xtlutgys7l],
        .btn-map-link:disabled > span[b-xtlutgys7l] {
            visibility: hidden;
        }


/* 7. Responsividad (Escritorio) */
@media (min-width: 768px) {
    .detail-card-panel[b-xtlutgys7l] {
        padding: 2rem; /* Padding normal en escritorio */
    }

    .detail-grid-list[b-xtlutgys7l] {
        grid-template-columns: 1fr 1fr; /* 2 columnas */
        gap: 1.5rem;
    }
}


/* ======================================================== */
/* --- 8. (PULIDO) ESTILOS AÑADIDOS PARA BADGES Y SPINNER --- */
/* ======================================================== */

/* Estilo base para los badges de estado (copiado de UpcomingCard) */
.status-badge-inline[b-xtlutgys7l] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
    /* (NUEVO) Ajuste para que se vea bien como texto */
    display: inline-block;
    line-height: 1.2;
}

/* Colores de Estatus (Copiados de UpcomingCard) */
.status-owner[b-xtlutgys7l] {
    background-color: rgba(185, 154, 95, 0.2);
    color: #5d4037;
}

.status-organizador[b-xtlutgys7l] {
    background-color: rgba(13, 202, 240, 0.2);
    color: #055160;
}

.status-accepted[b-xtlutgys7l] {
    background-color: rgba(40, 167, 69, 0.2);
    color: #1a682c;
}

.status-pending[b-xtlutgys7l] {
    background-color: rgba(255, 193, 7, 0.2);
    color: #8a6d04;
}

.status-declined[b-xtlutgys7l] {
    background-color: rgba(220, 53, 69, 0.2);
    color: #7a2126;
}


/* Spinner (Copiado de UpcomingCard) */
.spinner-border-sm[b-xtlutgys7l] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spin;
    animation: .75s linear infinite spin-b-xtlutgys7l;
}

@keyframes spin-b-xtlutgys7l {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/CeremonyGridList.razor.rz.scp.css */
/*
 * CeremonyGridList.razor.css
 * Estilos para la cuadrícula de ceremonias y el placeholder.
*/

/* --- Cuadrícula de Ceremonias (SOLUCIÓN FLEXBOX) --- */
.ceremony-grid[b-0l62446rcl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

    /* * Hacemos que CADA HIJO de .ceremony-grid (::deep .event-card)
     * y la nueva tarjeta (.solicitar-card-placeholder)
     * se comporten como items de flexbox.
     */
    .ceremony-grid[b-0l62446rcl]  .event-card,
    .solicitar-card-placeholder[b-0l62446rcl] {
        flex-basis: 320px;
        flex-grow: 1; /* Permitir que crezcan un poco si hay espacio */
        max-width: 380px; /* Evitar que crezcan demasiado */
        min-height: 380px; /* Altura consistente */
    }

/* Estilo para la nueva tarjeta "Solicitar" */
.solicitar-card-placeholder[b-0l62446rcl] {
    border: 2px dashed var(--color-accent-gold);
    opacity: 0.5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

    .solicitar-card-placeholder:hover[b-0l62446rcl] {
        opacity: 1;
        background-color: rgba(185, 154, 95, 0.05); /* Dorado muy sutil */
        border-style: solid;
    }

.placeholder-content[b-0l62446rcl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-accent-gold);
    text-align: center;
    padding: 0 1.5rem;
}

    .placeholder-content .fas[b-0l62446rcl] {
        font-size: 1.5rem;
    }

/* (Estilo de Texto Vacío - copiado del padre para ser autocontenido) */
.empty-text[b-0l62446rcl] {
    text-align: center;
    padding: 2rem; /* Menos padding que el 'loading-text' */
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
    width: 100%; /* Ocupa todo el ancho de la cuadrícula */
}
/* _content/Ceremony.RelojDeLuz/Shared/CeremonyStoriesList.razor.rz.scp.css */
/*
 * CeremonyStoriesList.razor.css
 * Estilos para la lista de historias dentro del CeremonyEditor (Tema Oscuro y Responsivo).
*/

/* (Opcional) Estilos para el encabezado H4 si se necesita */
h4[b-h8ajxa6129] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Margen inferior para el botón 'Añadir Historia' cuando la tabla es visible */
.list-header[b-h8ajxa6129] {
    margin-bottom: 1rem;
    display: flex; /* Para alinear el botón si hubiera más elementos */
    justify-content: flex-end; /* Alinea el botón a la derecha */
}

.btn-create-new[b-h8ajxa6129] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-h8ajxa6129] {
        opacity: 0.9;
    }

/* Margen superior para el botón 'Crear Primera' cuando la lista está vacía */
.empty-text + .btn-create-new[b-h8ajxa6129] {
    margin-top: 1rem;
    /* Centrar el botón si la lista está vacía */
    margin-left: auto;
    margin-right: auto;
    display: table; /* Truco para centrar un botón inline-flex */
}


/* === ESTILOS DE LA TABLA === */
.ceremony-stories-table[b-h8ajxa6129] { /* <-- CAMBIADO */
    width: 100%;
    border-collapse: collapse;
}

    .ceremony-stories-table th[b-h8ajxa6129], .ceremony-stories-table td[b-h8ajxa6129] { /* <-- CAMBIADO */
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .ceremony-stories-table th[b-h8ajxa6129] { /* <-- CAMBIADO */
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ceremony-stories-table tbody tr:hover[b-h8ajxa6129] { /* <-- CAMBIADO */
        background-color: #1a1a1a;
    }

/* (El resto de los estilos de tabla, botones y responsividad son idénticos) */
.text-muted[b-h8ajxa6129] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-h8ajxa6129] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-h8ajxa6129] {
    text-align: right;
}

.btn-icon[b-h8ajxa6129] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
}

.btn-edit[b-h8ajxa6129] {
    color: #a0a0a0;
}

    .btn-edit:hover[b-h8ajxa6129] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-h8ajxa6129] {
    color: #a0a0a0;
}

    .btn-delete:hover[b-h8ajxa6129] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === RESPONSIVIDAD === */
@media (max-width: 768px) {
    .ceremony-stories-table thead[b-h8ajxa6129] { /* <-- CAMBIADO */
        display: none;
    }

    .ceremony-stories-table tr[b-h8ajxa6129] { /* <-- CAMBIADO */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .ceremony-stories-table td[b-h8ajxa6129] { /* <-- CAMBIADO */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .ceremony-stories-table tr:last-child[b-h8ajxa6129] { /* <-- CAMBIADO */
        margin-bottom: 0;
    }

    .ceremony-stories-table td:last-child[b-h8ajxa6129] { /* <-- CAMBIADO */
        border-bottom: none;
    }

    .ceremony-stories-table td[b-h8ajxa6129]:before { /* <-- CAMBIADO */
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-h8ajxa6129] {
        justify-content: flex-end;
    }

        .actions-cell[b-h8ajxa6129]:before {
            content: "Acciones";
        }
}

/* Estilos de carga y vacío */
.loading-text[b-h8ajxa6129], .empty-text[b-h8ajxa6129] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Shared/ChangeRequestsCard.razor.rz.scp.css */
/*
 * ChangeRequestsCard.razor.css
 * Estilos para el panel "Solicitudes de Cambio".
*/

/* --- Título H4 (Estilo estándar del panel) --- */
h4[b-ub35920fb9] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
    display: flex;
    align-items: center;
}

/* Icono dorado en el título */
.icon-gold[b-ub35920fb9] {
    color: var(--color-accent-gold);
    margin-right: 0.75rem;
    font-size: 1rem;
}

/* --- Estilos del Panel --- */
/*
 * NOTA: El .stacked-panel y .requests-section (fondo, borde, padding)
 * se definen en el CSS del componente padre (MyScheduleEvent.razor.css)
*/

/* Texto para "No hay solicitudes..." */
.empty-text[b-ub35920fb9] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
    margin: 0;
    padding: 1rem 0 !important; /* Sobrescribir padding si se usa inline */
}

/* Texto para "Ya tienes una solicitud pendiente" */
.text-muted[b-ub35920fb9] {
    color: var(--color-form-label-reloj-de-luz);
    text-align: right;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}


/* --- Lista de Solicitudes (Estilo Cuaderno) --- */
.invitation-list[b-ub35920fb9] {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--color-form-background-input-reloj-de-luz); /* Fondo de "hoja" */
    border-radius: 8px;
    border: 1px solid var(--color-section-border-reloj-de-luz);
}

.list-item[b-ub35920fb9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    flex-wrap: wrap;
}

    .list-item:last-child[b-ub35920fb9] {
        border-bottom: none;
    }

.item-date[b-ub35920fb9] {
    font-weight: 600;
    flex-basis: 70px;
    flex-shrink: 0;
    color: var(--color-form-label-reloj-de-luz);
}

.item-title[b-ub35920fb9] {
    flex-grow: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-status[b-ub35920fb9] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
}

.item-link[b-ub35920fb9] {
    font-size: 1rem;
    color: var(--color-form-label-reloj-de-luz);
    transition: color 0.2s ease;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

    .item-link:hover[b-ub35920fb9] {
        color: var(--color-accent-gold);
    }

/* Colores de Estado */
.status-aprobada[b-ub35920fb9] {
    background-color: rgba(40, 167, 69, 0.2);
    color: #1a682c;
}

.status-pendiente[b-ub35920fb9] {
    background-color: rgba(255, 193, 7, 0.2);
    color: #8a6d04;
}

.status-cancelada[b-ub35920fb9], .status-rechazada[b-ub35920fb9] {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--color-danger);
}


/* --- Botón "Crear Nuevo" --- */
.btn-create-new[b-ub35920fb9] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-accent-gold);
    color: #121212;
}

    .btn-create-new:hover[b-ub35920fb9] {
        opacity: 0.9;
    }

    .btn-create-new:disabled[b-ub35920fb9] {
        opacity: 0.5;
        cursor: not-allowed;
    }


/* --- Contenedor de Acciones --- */
.form-actions[b-ub35920fb9] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/ClientLayout.razor.rz.scp.css */
/*
 * ClientLayout.razor.css
 * Estilos aislados para el layout principal del cliente
*/

/* === ESTRUCTURA PRINCIPAL === */
.client-layout[b-0dhbzpjabq] {
    display: flex;
    background-color: var(--color-background-reloj-de-luz);
    color: var(--color-text-reloj-de-luz);
}

.page-container[b-0dhbzpjabq] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /*margin-left: 260px;*/ /* Ancho del sidebar expandido versión que recorre a la derecha el contenido de body (descomentar para v1) */
    margin-left: 78px; /* Ancho del sidebar colapsado versión que no recorre a la derecha el contenido de body (comentar para v1) */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-main-content[b-0dhbzpjabq] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 2rem 2rem 2rem;
}

/* === INTERACCIÓN CON SIDEBAR, versión que recorre a la derecha el contenido del body (descomentar para v1) === */
/*.client-layout.sidebar-collapsed .page-container {
    margin-left: 78px;
}*/

/* === OVERLAY PARA NAVEGACIÓN MÓVIL === */
.mobile-nav-overlay[b-0dhbzpjabq] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1099;
    animation: fadeInOverlay-b-0dhbzpjabq 0.3s;
}

@keyframes fadeInOverlay-b-0dhbzpjabq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* === LÓGICA RESPONSIVA (MÓVIL) === */
@media (max-width: 992px) {
    .page-container[b-0dhbzpjabq],
    .client-layout.sidebar-collapsed .page-container[b-0dhbzpjabq] {
        margin-left: 0;
    }

    .app-main-content[b-0dhbzpjabq] {
        padding: 60px 1.5rem 1.5rem;
    }
}

/*
============================================
(NUEVO) EXCEPCIÓN PARA "MODO CINEMÁTICO"
(Esto quita el padding para la portada de CeremonyWatch)
============================================
*/

/* 1. (Escritorio) Elimina TODO el padding */
.client-layout.cinematic-mode .app-main-content[b-0dhbzpjabq] {
    padding: 0.4rem;
}

/* 2. (Móvil) Elimina el padding lateral/inferior,
      PERO MANTIENE el padding-top de 60px
      (para que el contenido no quede *detrás* de la barra móvil flotante) */
@media (max-width: 992px) {
    .client-layout.cinematic-mode .app-main-content[b-0dhbzpjabq] {
        padding: 60px 0.2rem 0.2rem 0.2rem;
    }
}

/* === BOTÓN FLOTANTE DE RETORNO ADMIN === */
.admin-return-fab[b-0dhbzpjabq] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2000; /* Encima de todo, incluso modales */
    cursor: pointer;
    /* Diseño de pastilla colapsada (Círculo inicial) */
    background-color: var(--color-accent-gold); /* El color del Admin */
    color: #000; /* Contraste fuerte */
    height: 50px;
    min-width: 50px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); /* Resplandor dorado */

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    padding: 0;
}

.fab-content[b-0dhbzpjabq] {
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    white-space: nowrap;
}

/* Icono del Módulo (Siempre visible) */
.module-icon[b-0dhbzpjabq] {
    font-size: 1.2rem;
}

/* Elementos ocultos inicialmente */
.return-icon[b-0dhbzpjabq], .return-text[b-0dhbzpjabq] {
    max-width: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    display: inline-block;
}

.return-icon[b-0dhbzpjabq] {
    font-size: 1rem;
}

.return-text[b-0dhbzpjabq] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
}

/* === INTERACCIÓN HOVER (La expansión) === */
.admin-return-fab:hover[b-0dhbzpjabq] {
    padding-right: 5px; /* Ajuste fino */
    background-color: #fff; /* Invertir colores al hover para llamar atención */
    color: #000;
    border: 2px solid var(--color-accent-gold);
}

    .admin-return-fab:hover .return-icon[b-0dhbzpjabq],
    .admin-return-fab:hover .return-text[b-0dhbzpjabq] {
        max-width: 150px; /* Suficiente para el texto */
        opacity: 1;
        transform: translateX(0);
    }

/* Opcional: Ocultar el icono del módulo al hover para dar paso a la flecha "Return" 
   O dejar ambos. En este CSS dejo ambos visibles para que se vea:
   [< Volver a Ceremonias] [Cámara] 
*/
/* _content/Ceremony.RelojDeLuz/Shared/ClientSidebar.razor.rz.scp.css */
/*
 * ClientSidebar.razor.css
 * Estilos aislados para la barra lateral del cliente (Tema Oscuro Estilo Instagram).
*/

/* === ESTADO BASE (EXPANDIDO) === */
.sidebar[b-1xnl78fb95] {
    width: 260px;
    background-color: var(--color-sidebar-background-reloj-de-luz);
    border-right: 1px solid var(--color-sidebar-border-reloj-de-luz);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Montserrat', sans-serif;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.sidebar-header[b-1xnl78fb95] {
    padding: 1.25rem 0.75rem;
}

    .sidebar-header a[b-1xnl78fb95] {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        height: 40px;
    }

    .sidebar-header .icon-placeholder[b-1xnl78fb95] {
        width: 63px;
        flex-shrink: 0;
        text-align: left;
        padding-left: .8rem;
    }

    .sidebar-header img[b-1xnl78fb95] {
        height: 30px;
        vertical-align: middle;
    }

    .sidebar-header .logo-font[b-1xnl78fb95] {
        font-family: 'Great Vibes', cursive;
        font-size: 1.5rem;
        color: var(--color-sidebar-logo-font-reloj-de-luz);
        padding-top: 8px;
        transition: opacity 0.2s ease-out 0.1s, transform 0.2s ease-out 0.1s;
        white-space: nowrap; /* <-- AÑADE ESTA LÍNEA */
    }

.sidebar-nav[b-1xnl78fb95] {
    flex-grow: 1;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
}

.nav-section[b-1xnl78fb95] {
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
}

.nav-footer[b-1xnl78fb95] {
    margin-top: auto; /* Empuja esta sección al fondo */
    padding-bottom: 1rem;
}

[b-1xnl78fb95] .nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-sidebar-nav-link-reloj-de-luz);
    padding: 0.85rem 0;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}

[b-1xnl78fb95] .nav-link .icon-placeholder {
    width: 55px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.2rem;
}

    [b-1xnl78fb95] .nav-link .link-text {
        white-space: nowrap;
        opacity: 1;
        font-weight: 500;
        white-space: nowrap; /* <-- AÑADE ESTA LÍNEA */
        transition: opacity 0.2s ease-out 0.1s, transform 0.2s ease-out 0.1s;
    }

    [b-1xnl78fb95] .nav-link:hover {
        background-color: var(--color-sidebar-nav-link-hover-reloj-de-luz);
    }

    [b-1xnl78fb95] .nav-link.active {
        background-color: var(--color-sidebar-nav-link-active-reloj-de-luz);
        font-weight: 700;
    }

/* --- ESTADO COLAPSADO --- */
.client-layout.sidebar-collapsed .sidebar[b-1xnl78fb95] {
    width: 78px;
}

.client-layout.sidebar-collapsed .link-text[b-1xnl78fb95] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

/* --- ESTADO MÓVIL (RESPONSIVE) --- */
@media (max-width: 992px) {
    .sidebar[b-1xnl78fb95] {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    }

    .client-layout.mobile-nav-open .sidebar[b-1xnl78fb95] {
        transform: translateX(0);
        width: 260px;
    }

    .client-layout.mobile-nav-open .link-text[b-1xnl78fb95] {
        opacity: 1;
        pointer-events: auto;
        display: inline-block;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ClientTopBar.razor.rz.scp.css */
/*
 * ClientTopBar.razor.css
 * Versión: Notifications & User Menu Unified
 */

/* =================================================================
   1. BARRA SUPERIOR (ESCRITORIO)
   ================================================================= */
.app-top-bar[b-h9uqti30is] {
    position: sticky;
    top: 0;
    /* CORRECCIÓN Z-INDEX: Subimos a 1050 para estar ENCIMA del overlay (1040) */
    z-index: 1050;
    height: 70px;
    /* Fondo transparente/integrado según tu diseño */
    background-color: var(--color-topbar-background-reloj-de-luz);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa el lado izq (si hubiera) del derecho */
    padding: 0 2rem;
    flex-shrink: 0;
}

/* Contenedor derecho (Acciones: Notificaciones + Menú Usuario) */
.top-bar-actions[b-h9uqti30is] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto; /* Empuja todo a la derecha */
}

/* =================================================================
   2. SISTEMA DE NOTIFICACIONES (Campana)
   ================================================================= */

/* El wrapper mantiene el contexto para posicionar el dropdown absoluto */
.notification-wrapper[b-h9uqti30is] {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-btn[b-h9uqti30is] {
    background: none;
    border: none;
    cursor: pointer;
    position: relative; /* Para posicionar el badge */
    padding: 0.5rem;
    color: var(--color-user-text-reloj-de-luz); /* Mismo color que el texto de usuario */
    font-size: 1.3rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notification-btn:hover[b-h9uqti30is] {
        color: var(--color-accent-gold);
        transform: scale(1.05);
    }

/* El puntito rojo */
.notification-badge[b-h9uqti30is] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #e53e3e; /* Rojo alerta */
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px; /* Pastilla redondeada */
    padding: 0 4px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.2);
}

/* El contenedor flotante del componente NotificationList */
.notification-dropdown-container[b-h9uqti30is] {
    position: absolute;
    top: calc(100% + 10px); /* Debajo de la campana */
    right: -10px; /* Alineado a la derecha con un ligero offset */
    z-index: 1060; /* Encima de todo */
    animation: fadeIn-b-h9uqti30is 0.2s ease-out;
}

/* =================================================================
   3. MENÚ DE USUARIO (Estilos existentes + Pulido)
   ================================================================= */

.user-menu-container[b-h9uqti30is] {
    position: relative;
    /* Fondo sutil tipo "pastilla" para contraste sobre fotos */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    transition: background-color 0.2s ease;
}

    .user-menu-container:hover[b-h9uqti30is] {
        background-color: rgba(0, 0, 0, 0.4);
    }

.user-menu-button[b-h9uqti30is] {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.4rem 1rem 0.4rem 1rem;
    border-radius: 50px;
}

.user-name[b-h9uqti30is] {
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-user-text-reloj-de-luz);
    margin-bottom: 0.1rem;
    font-size: 0.95rem;
}

/* Dropdown del Usuario (::deep necesario para estilos internos) */
[b-h9uqti30is] .user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--color-user-background-dropdown-items-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    border: 1px solid #363636;
    min-width: 240px;
    z-index: 1050;
    overflow: hidden;
    padding: 0.5rem 0;
    animation: fadeIn-b-h9uqti30is 0.2s ease-out;
}

[b-h9uqti30is] .dropdown-header {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: #a8a8a8;
    border-bottom: 1px solid #363636;
    margin-bottom: 0.5rem;
}

[b-h9uqti30is] .user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #f5f5f5;
    text-decoration: none;
    width: 100%;
    transition: background-color 0.2s;
    border: none;
    background: none;
    margin: 0;
    text-align: left;
    cursor: pointer;
}

    [b-h9uqti30is] .user-dropdown-item:hover {
        background-color: var(--color-user-background-dropdown-item-hover-reloj-de-luz);
    }

    [b-h9uqti30is] .user-dropdown-item i {
        width: 20px;
        text-align: center;
        color: var(--color-user-dropdown-item-i-reloj-de-luz);
    }

[b-h9uqti30is] .dropdown-divider {
    height: 1px;
    background-color: var(--color-user-dropdown-item-divider-reloj-de-luz);
    margin: 0.5rem 0;
}

/* Estilos para lista de relojes (WatchSwitcher) */
[b-h9uqti30is] .watch-list-scroll {
    max-height: 250px;
    overflow-y: auto;
}

[b-h9uqti30is] .watch-item {
    justify-content: space-between;
}

[b-h9uqti30is] .watch-avatar-placeholder {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-color: #333;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #888;
}

[b-h9uqti30is] .watch-name {
    flex-grow: 1;
    text-align: left;
    margin-left: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-h9uqti30is] .check-icon {
    width: auto;
    color: var(--color-accent-gold) !important;
    font-size: 1.1rem;
}

[b-h9uqti30is] .back-button {
    padding: 0;
    font-size: 0.95rem;
    margin: -0.25rem 0;
}

    [b-h9uqti30is] .back-button:hover {
        background-color: transparent;
    }

    [b-h9uqti30is] .back-button i {
        color: var(--color-accent-gold) !important;
        width: auto;
        margin-right: 0.5rem;
    }


/* =================================================================
   4. RESPONSIVIDAD MÓVIL
   ================================================================= */
.mobile-header[b-h9uqti30is] {
    display: none;
}

@media (max-width: 992px) {
    .app-top-bar[b-h9uqti30is] {
        display: none;
    }

    .mobile-header[b-h9uqti30is] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 1rem;
        /* Efecto Glassmorphism */
        background: linear-gradient(135deg, rgba(18, 18, 18, 0.2), rgba(18, 18, 18, 0.1));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(128, 128, 128, 0.1);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* CORRECCIÓN Z-INDEX: Subimos a 1050 también en móvil */
        z-index: 1050;
    }

    .mobile-menu-toggle[b-h9uqti30is] {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--color-topbar-mobile-menu-toggle-reloj-de-luz);
        cursor: pointer;
    }

    .mobile-actions[b-h9uqti30is] {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Espacio reducido entre campana y avatar */
    }

    /* Ajuste del Dropdown de Notificaciones en Móvil */
    .notification-dropdown-container.mobile[b-h9uqti30is] {
        position: fixed; /* Fijo a la ventana, no al botón */
        top: 60px; /* Debajo del header */
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: center; /* Centrar la lista */
        padding: 0 10px;
        pointer-events: none; /* Para que el wrapper no bloquee, solo el hijo */
    }

        /* Habilitamos clicks en el hijo directo (la lista) */
        .notification-dropdown-container.mobile[b-h9uqti30is] >  .notification-dropdown-panel {
            pointer-events: auto;
            box-shadow: 0 5px 30px rgba(0,0,0,0.8);
            width: 100%;
            max-width: 400px;
        }
}

/* =================================================================
   5. UTILIDADES GLOBALES
   ================================================================= */

/* Overlay invisible para cerrar menús al hacer clic fuera */
.click-away-overlay[b-h9uqti30is] {
    position: fixed;
    inset: 0;
    /* Mantenemos este en 1040. 
       Al tener los headers en 1050, el menú quedará ENCIMA del overlay. */
    z-index: 1040; /* Debajo del dropdown (1060) pero encima del resto */
    cursor: default;
}

/* Animación de aparición */
@keyframes fadeIn-b-h9uqti30is {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ClientWatchesList.razor.rz.scp.css */
/*
 * ClientWatchesList.razor.css
 * Estilos para la lista de relojes dentro del ClientEditor (Tema Oscuro y Responsivo).
*/

/* (Opcional) Estilos para el encabezado H4 si se necesita */
h4[b-x3tvna0sl2] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Margen inferior para el botón 'Añadir Reloj' cuando la tabla es visible */
.list-header[b-x3tvna0sl2] {
    margin-bottom: 1rem;
    display: flex; /* Para alinear el botón si hubiera más elementos */
    justify-content: flex-end; /* Alinea el botón a la derecha */
}

.btn-create-new[b-x3tvna0sl2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-x3tvna0sl2] {
        opacity: 0.9;
    }

/* Margen superior para el botón 'Crear Primer' cuando la lista está vacía */
.empty-text + .btn-create-new[b-x3tvna0sl2] {
    margin-top: 1rem;
    /* Centrar el botón si la lista está vacía */
    margin-left: auto;
    margin-right: auto;
    display: table; /* Truco para centrar un botón inline-flex */
}


/* === ESTILOS DE LA TABLA === */
.client-watches-table[b-x3tvna0sl2] { /* <-- CAMBIADO */
    width: 100%;
    border-collapse: collapse;
}

    .client-watches-table th[b-x3tvna0sl2], .client-watches-table td[b-x3tvna0sl2] { /* <-- CAMBIADO */
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .client-watches-table th[b-x3tvna0sl2] { /* <-- CAMBIADO */
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .client-watches-table tbody tr:hover[b-x3tvna0sl2] { /* <-- CAMBIADO */
        background-color: #1a1a1a;
    }

/* (El resto de los estilos de tabla, botones y responsividad son idénticos) */
.text-muted[b-x3tvna0sl2] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-x3tvna0sl2] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-x3tvna0sl2] {
    text-align: right;
}

.btn-icon[b-x3tvna0sl2] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
}

.btn-edit[b-x3tvna0sl2] {
    color: #a0a0a0;
}

    .btn-edit:hover[b-x3tvna0sl2] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-x3tvna0sl2] {
    color: #a0a0a0;
}

    .btn-delete:hover[b-x3tvna0sl2] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === RESPONSIVIDAD === */
@media (max-width: 768px) {
    .client-watches-table thead[b-x3tvna0sl2] { /* <-- CAMBIADO */
        display: none;
    }

    .client-watches-table tr[b-x3tvna0sl2] { /* <-- CAMBIADO */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .client-watches-table td[b-x3tvna0sl2] { /* <-- CAMBIADO */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .client-watches-table tr:last-child[b-x3tvna0sl2] { /* <-- CAMBIADO */
        margin-bottom: 0;
    }

    .client-watches-table td:last-child[b-x3tvna0sl2] { /* <-- CAMBIADO */
        border-bottom: none;
    }

    .client-watches-table td[b-x3tvna0sl2]:before { /* <-- CAMBIADO */
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-x3tvna0sl2] {
        justify-content: flex-end;
    }

        .actions-cell[b-x3tvna0sl2]:before {
            content: "Acciones";
        }
}

/* Estilos de carga y vacío */
.loading-text[b-x3tvna0sl2], .empty-text[b-x3tvna0sl2] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Shared/ContactSection.razor.rz.scp.css */
/*
 * ContactSection.razor.css
 * Estilos aislados para la sección de contacto unificada.
 * Incluye override a Tailwind y Dropdown personalizado.
*/

/* =================================================================
   1. ESTRUCTURA GENERAL
   ================================================================= */
.contact-section-unified[b-f7ztaidngd] {
    position: relative;
    width: 100%;
    background-color: var(--color-background-paper);
    padding: 6rem 1.5rem;
    overflow: hidden;
}

.contact-header[b-f7ztaidngd] {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.contact-main-title[b-f7ztaidngd] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 400;
    margin: 0;
}

.contact-main-subtitle[b-f7ztaidngd] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-light);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* =================================================================
   2. LA "TARJETA" PRINCIPAL
   ================================================================= */
.contact-card-wrapper[b-f7ztaidngd] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    background-color: white;
    /* Textura sutil de papel */
    background-image: var(--texture-paper, url('https://www.transparenttextures.com/patterns/paper-fibers.png'));
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* --- Columna Izquierda: Información e Imagen --- */
.contact-info-panel[b-f7ztaidngd] {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.contact-image-display[b-f7ztaidngd] {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    height: 100%;
    min-height: 500px;
    background-image: url('/images/contact-photo.jpg'); /* Asegúrate de que esta ruta exista */
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
}

    /* Degradado para leer el texto sobre la foto */
    .contact-image-display[b-f7ztaidngd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
        z-index: 1;
    }

.contact-image-title[b-f7ztaidngd], .contact-image-subtitle[b-f7ztaidngd] {
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.contact-image-title[b-f7ztaidngd] {
    font-family: 'Great Vibes', cursive;
    font-size: 3rem;
    margin: 0;
    color: white;
}

.contact-image-subtitle[b-f7ztaidngd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    max-width: 30ch;
    color: rgba(255,255,255,0.9);
}


/* =================================================================
   3. COLUMNA DERECHA: EL FORMULARIO
   ================================================================= */
.contact-form-panel-reimagined[b-f7ztaidngd] {
    padding: 2rem 2.5rem;
    display: flex;
}

/* Usamos ::deep porque EditForm es un componente hijo */
[b-f7ztaidngd] .contact-submission-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

[b-f7ztaidngd] .form-field {
    margin-bottom: 1.25rem;
}

[b-f7ztaidngd] .form-field-stretch {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

    [b-f7ztaidngd] .form-field-stretch .input-element {
        flex-grow: 1;
    }

[b-f7ztaidngd] .form-actions {
    text-align: right;
    margin-top: 1rem;
}

/* --- Etiquetas --- */
[b-f7ztaidngd] label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    display: block;
}

/* --- Inputs de Texto y TextArea (BLINDADOS CONTRA AZUL) --- */
[b-f7ztaidngd] .input-element {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    /* Forzamos nuestros bordes */
    border: 1px solid #D1D5DB !important;
    border-radius: 0.375rem;
    background-color: var(--color-background-paper);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-dark);
    font-size: 1rem;
    transition: all 0.2s ease;
    /* Matar estilos nativos o de Tailwind */
    box-shadow: none !important;
    outline: none !important;
}

[b-f7ztaidngd] textarea.input-element {
    resize: vertical;
}

/* Estado Hover: Dorado */
[b-f7ztaidngd] .input-element:hover {
    border-color: var(--color-accent-gold) !important;
    background-color: white;
    box-shadow: 0 2px 5px rgba(192, 164, 124, 0.2) !important;
}

/* Estado Focus: Dorado y Resplandor */
[b-f7ztaidngd] .input-element:focus {
    border-color: var(--color-accent-gold) !important;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(192, 164, 124, 0.25) !important;
}


/* =================================================================
   4. DROPDOWN PERSONALIZADO (TIPO DE EVENTO)
   ================================================================= */
/* Este reemplaza al <select> nativo feo */

[b-f7ztaidngd] .custom-select-container {
    position: relative;
    width: 100%;
}

/* El botón que simula ser un input */
[b-f7ztaidngd] .select-trigger {
    /* Hereda estilos de .input-element pero ajustamos alineación */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

    /* Cuando el menú está abierto */
    [b-f7ztaidngd] .select-trigger.active {
        border-color: var(--color-accent-gold) !important;
        box-shadow: 0 0 0 3px rgba(192, 164, 124, 0.25) !important;
        background-color: white;
    }

[b-f7ztaidngd] .placeholder-text {
    color: #9CA3AF;
}

[b-f7ztaidngd] .selected-text {
    color: var(--color-text-dark);
}

[b-f7ztaidngd] .chevron-icon {
    color: var(--color-text-light);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

    [b-f7ztaidngd] .chevron-icon.rotate {
        transform: rotate(180deg);
    }


/* La Lista Desplegable Flotante */
[b-f7ztaidngd] .custom-options-list {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 50; /* Encima de todo */
    max-height: 250px;
    overflow-y: auto;
    padding: 0.5rem 0;
    animation: fadeIn-b-f7ztaidngd 0.2s ease-out;
}

/* Cada Opción */
[b-f7ztaidngd] .custom-option-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    /* Hover en opciones (Dorado) */
    [b-f7ztaidngd] .custom-option-item:hover {
        background-color: var(--color-accent-gold);
        color: white;
    }

    /* Opción seleccionada */
    [b-f7ztaidngd] .custom-option-item.selected {
        background-color: rgba(192, 164, 124, 0.15);
        color: var(--color-accent-gold);
        font-weight: 600;
    }


/* =================================================================
   5. BOTONES Y VALIDACIÓN
   ================================================================= */

/* Botón Enviar */
[b-f7ztaidngd] .btn-primary-custom {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--color-text-dark);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.25rem;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

    [b-f7ztaidngd] .btn-primary-custom:hover {
        background-color: var(--color-accent-gold);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    [b-f7ztaidngd] .btn-primary-custom:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Texto de Error */
[b-f7ztaidngd] .validation-error-text {
    color: #e53e3e;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}


/* =================================================================
   6. TARJETA DE MAPA
   ================================================================= */
.map-card-wrapper[b-f7ztaidngd] {
    max-width: 1100px;
    margin: 3rem auto 0 auto;
    background-color: white;
    background-image: var(--texture-paper, url('https://www.transparenttextures.com/patterns/paper-fibers.png'));
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    padding: 1rem;
}

    .map-card-wrapper iframe[b-f7ztaidngd] {
        width: 100%;
        height: 450px;
        border: 0;
        border-radius: 8px;
        display: block;
    }


/* =================================================================
   7. RESPONSIVIDAD
   ================================================================= */
@media (max-width: 992px) {
    .contact-card-wrapper[b-f7ztaidngd] {
        grid-template-columns: 1fr;
    }

    .contact-info-panel[b-f7ztaidngd] {
        padding: 1.5rem;
        padding-bottom: 0;
    }

    .contact-image-display[b-f7ztaidngd] {
        min-height: 300px;
    }

    .contact-form-panel-reimagined[b-f7ztaidngd] {
        padding: 1.5rem;
        padding-top: 2rem;
    }

    .contact-section-unified[b-f7ztaidngd] {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .contact-main-title[b-f7ztaidngd] {
        font-size: 2.5rem;
    }

    .map-card-wrapper iframe[b-f7ztaidngd] {
        height: 300px;
    }
}

/* Animación para dropdown */
@keyframes fadeIn-b-f7ztaidngd {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/EmptyLayout.razor.rz.scp.css */
.empty-layout-container[b-bctp1ih89c] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--color-background-paper); /* Mantiene el color de fondo del sitio */
    padding: 2rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/EventCard.razor.rz.scp.css */
/*
 * EventCard.razor.css
 * (CORREGIDO)
 * Se eliminó .card-protagonists y se añadió .card-visibility.
*/

/* --- CONTENEDOR PRINCIPAL DE LA TARJETA --- */
.event-card[b-5nx0y9byub] {
    user-select: none;
    background-color: var(--color-card-event-background-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

    .event-card:hover[b-5nx0y9byub] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    }


/* --- SECCIÓN DE LA IMAGEN --- */
.card-image-link[b-5nx0y9byub] {
    display: block;
    background-color: #111;
    overflow: hidden;
}

/* --- SECCIÓN DEL CONTENIDO --- */
.card-content[b-5nx0y9byub] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Esto empuja el contenido hacia abajo y el link al fondo */
}

.card-date[b-5nx0y9byub] {
    font-size: 0.8rem;
    color: var(--color-card-event-date-reloj-de-luz);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* --- (NUEVA REGLA) Estilo para "Tuya", "Pública", "Privada" --- */
.card-visibility[b-5nx0y9byub] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 0.5rem 0; /* Margen inferior reducido */
    /* (Se quitó flex-grow: 1) */
}

    /* Estilo del ícono */
    .card-visibility .fas[b-5nx0y9byub] {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    /* Colores por estado */
    .card-visibility.is-owner[b-5nx0y9byub] {
        color: var(--color-accent-gold);
    }

    .card-visibility.is-public[b-5nx0y9byub] {
        color: var(--bs-green); /* Verde */
    }

    .card-visibility.is-connections[b-5nx0y9byub] {
        color: var(--bs-info); /* Azul */
    }

    .card-visibility.is-private[b-5nx0y9byub] {
        color: var(--color-form-label-reloj-de-luz); /* Gris */
    }


.card-title[b-5nx0y9byub] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--color-card-event-title-reloj-de-luz);
}

/* (ELIMINADO) .card-protagonists fue reemplazado */

.card-link[b-5nx0y9byub] {
    text-decoration: none;
    color: var(--color-card-event-link-reloj-de-luz);
    font-weight: 600;
    align-self: flex-start;
    transition: color 0.2s ease;
    margin-top: auto; /* Asegura que el link se quede al fondo */
}

    .card-link:hover[b-5nx0y9byub] {
        color: var(--color-card-event-link-hover-reloj-de-luz);
    }
/* _content/Ceremony.RelojDeLuz/Shared/ExplorePostCard.razor.rz.scp.css */
.explore-card[b-6fkhasv3sc] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-dark-carbon);
}

/* Imagen */
.explore-image-wrapper[b-6fkhasv3sc] {
    width: 100%;
    height: 100%;
}

/* Forzamos al ThumbnailViewer a llenar el contenedor del grid */
[b-6fkhasv3sc] .image-preview-container,
[b-6fkhasv3sc] .image-preview {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Mosaico requiere cover para no deformar */
}

/* Overlay */
.explore-overlay[b-6fkhasv3sc] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end; /* Info abajo */
    padding: 1rem;
    z-index: 2;
}

.explore-card:hover .explore-overlay[b-6fkhasv3sc] {
    opacity: 1;
}

.overlay-content[b-6fkhasv3sc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.open-icon[b-6fkhasv3sc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255,255,255,0.8);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.explore-card:hover .open-icon[b-6fkhasv3sc] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.overlay-info[b-6fkhasv3sc] {
    color: white;
    font-family: 'Montserrat', sans-serif;
}

.overlay-author[b-6fkhasv3sc] {
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
    color: var(--color-accent-gold);
}

.overlay-stats[b-6fkhasv3sc] {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    opacity: 0.9;
}
/* _content/Ceremony.RelojDeLuz/Shared/FeedPostCard.razor.rz.scp.css */
/*
 * FeedPostCard.razor.css
 */

/* 1. Contenedor Principal */
.feed-post-wrapper[b-jenwzhxn2s] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    padding-bottom: 1.5rem;
}

/* 2. Encabezado */
.feed-post-header[b-jenwzhxn2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
}

.post-owner-link[b-jenwzhxn2s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-text-reloj-de-luz);
}

    .post-owner-link:hover .post-owner-name[b-jenwzhxn2s] {
        text-decoration: underline;
    }

.post-owner-name[b-jenwzhxn2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-options[b-jenwzhxn2s] {
    background: none;
    border: none;
    color: var(--color-form-label-reloj-de-luz);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
}

/* 3. Imagen Principal */
.feed-post-image-container[b-jenwzhxn2s] {
    width: 100%;
    position: relative;
    max-height: 70dvh; /* Techo de Cristal */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-image-background-container, #000);
    overflow: hidden;
    cursor: pointer;
}

[b-jenwzhxn2s] .image-preview-container {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

[b-jenwzhxn2s] .image-preview {
    width: 100%;
    height: 100%;
}


/* ============================================================
   4. BARRA DE ACCIONES (NUEVO DISEÑO AGRUPADO)
   ============================================================
*/
.feed-post-actions[b-jenwzhxn2s] {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Separación entre el grupo Like y el grupo Comment */
    padding: 0.75rem 0.5rem;
}

/* Grupo individual (Icono + Texto) */
.action-group[b-jenwzhxn2s] {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Separación entre icono y número */
    cursor: pointer;
}

/* Botones */
.btn-action-feed[b-jenwzhxn2s] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-form-label-reloj-de-luz); /* Gris por defecto */
    font-size: 1.5rem; /* Iconos de buen tamaño */
    padding: 0; /* Quitamos padding para alinearlos bien con el número */
    display: flex;
    transition: transform 0.1s;
}

    .btn-action-feed:hover[b-jenwzhxn2s] {
        color: var(--color-text-reloj-de-luz);
        transform: scale(1.1);
    }

/* Estado Liked */
.btn-like.liked[b-jenwzhxn2s] {
    color: var(--color-accent-red, #E74C3C);
    animation: like-pop-b-jenwzhxn2s 0.3s;
}

/* Números contadores */
.action-count[b-jenwzhxn2s] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-reloj-de-luz);
    min-width: 10px; /* Para evitar saltos pequeños */
}

@keyframes like-pop-b-jenwzhxn2s {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


/* 5. Caption */
.feed-post-caption[b-jenwzhxn2s] {
    padding: 0 0.5rem;
}

    .feed-post-caption p[b-jenwzhxn2s] {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.9rem;
        color: var(--color-text-reloj-de-luz);
        line-height: 1.5;
        margin: 0;
    }

.caption-ceremony-link[b-jenwzhxn2s] {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-form-label-reloj-de-luz);
    text-decoration: none;
    display: block;
    margin-top: 0.25rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/Footer.razor.rz.scp.css */
.footer-container[b-45dffwzldy] {
    background-color: var(--color-text-dark); /* Fondo oscuro de tu paleta */
    color: #9CA3AF; /* Gris claro para el texto, buena legibilidad */
    font-family: 'Montserrat', sans-serif;
}

.footer-content-wrapper[b-45dffwzldy] {
    max-width: 1280px; /* Ancho máximo, consistente con un diseño moderno */
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Una columna por defecto para móviles */
    gap: 2.5rem;
    text-align: center; /* Todo centrado en la vista móvil */
}

/* En pantallas de tablet y más grandes, cambiamos a un layout de 3 columnas */
@media (min-width: 768px) {
    .footer-content-wrapper[b-45dffwzldy] {
        grid-template-columns: repeat(3, 1fr);
        text-align: left; /* Alineamos el texto a la izquierda */
    }
}

.footer-column[b-45dffwzldy] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espacio entre los elementos de cada columna */
}

.footer-title[b-45dffwzldy] {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem; /* Pequeño espacio extra debajo del título */
}

.footer-text[b-45dffwzldy] {
    font-size: 0.875rem; /* 14px */
    line-height: 1.6;
}

.contact-info-group[b-45dffwzldy] {
    display: flex;
    flex-direction: column;
}

.footer-link[b-45dffwzldy] {
    font-size: 0.875rem;
    transition: color 0.2s ease-in-out;
}

    .footer-link:hover[b-45dffwzldy] {
        color: white;
        text-decoration: underline;
    }

.social-icons-group[b-45dffwzldy] {
    display: flex;
    gap: 1.5rem;
    justify-content: center; /* Centra los iconos en móviles */
}

@media (min-width: 768px) {
    .social-icons-group[b-45dffwzldy] {
        justify-content: flex-start; /* Alinea los iconos a la izquierda en escritorio */
    }
}

.social-icon-link[b-45dffwzldy] {
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

    .social-icon-link:hover[b-45dffwzldy] {
        transform: translateY(-2px) scale(1.1);
        color: white;
    }

.footer-copyright[b-45dffwzldy] {
    border-top: 1px solid #4B5563; /* Borde separador sutil */
    padding: 1.5rem 1.5rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/GalleryImageCard.razor.rz.scp.css */
/* GalleryImageCard.razor.css */

.gallery-card[b-nqpqieg9xq] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-form-background-input-reloj-de-luz);
    overflow: hidden; /* Para que la imagen respete el borde redondeado */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gallery-card:hover[b-nqpqieg9xq] {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

/* ==============================
 IMAGEN
 ==============================
*/
.card-image-wrapper[b-nqpqieg9xq] {
    width: 100%;
    /* [CAMBIO] 'aspect-ratio' se elimina de aquí. 
       Ahora se establece en línea en el .razor desde el parámetro [GalleryAspectRatio]. */
    overflow: hidden;
    background-color: var(--color-dark-carbon); /* Color de fondo mientras carga */
    /* El ThumbnailViewer adentro usará height: 100% para llenar este espacio */
}

/* [CAMBIO] Se eliminaron '.card-image-wrapper img' y 
   '::deep .custom-card-image-wrapper' y sus 'img' 
   porque ThumbnailViewer ahora maneja la imagen. */


/* ==============================
 CONTENIDO (TÍTULO)
 ==============================
*/
.card-content[b-nqpqieg9xq] {
    padding: 1rem;
    flex-grow: 1; /* Empuja las acciones al fondo */
}

    .card-content h5[b-nqpqieg9xq] {
        margin: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--color-text-reloj-de-luz);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ==============================
 ACCIONES (BOTONES)
 ==============================
*/
.card-actions[b-nqpqieg9xq] {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    margin-top: auto; /* Asegura que las acciones se alineen al fondo */
    justify-content: flex-end;
}

.btn-action[b-nqpqieg9xq] {
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-edit[b-nqpqieg9xq] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-edit:hover[b-nqpqieg9xq] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-delete[b-nqpqieg9xq] {
    background-color: transparent;
    color: var(--color-danger-text-reloj-de-luz, #e53e3e);
    border: 1px solid var(--color-danger, #e53e3e);
}

    .btn-delete:hover[b-nqpqieg9xq] {
        background-color: var(--color-danger, #e53e3e);
        color: var(--color-deep-carbon, #fff);
    }

/* ==============================
  (NUEVO) LÓGICA DE MODO GRID (OVERLAY)
 ==============================
*/

/* 1. Hacemos que el wrapper de la imagen sea el 'ancla' */
.card-image-wrapper[b-nqpqieg9xq] {
    position: relative;
}

/* 2. El contenedor del overlay (oculto por defecto) */
.card-hover-overlay[b-nqpqieg9xq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Degradado sutil para oscurecer la parte inferior */
    background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* No bloquear el cursor */
    /* ¡Importante! Ponerlo sobre el z-index: 2 del ThumbnailViewer */
    z-index: 3;
}

/* 3. El 'gatillo' para mostrar el overlay */
.gallery-card:hover .card-hover-overlay[b-nqpqieg9xq] {
    opacity: 1;
}

/* 4. El icono del OJO (centrado) */
.overlay-icon-eye[b-nqpqieg9xq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.5rem;
    opacity: 0.9;
}

/* 5. El contenedor de los STATS (anclado abajo) */
.overlay-stats-bar[b-nqpqieg9xq] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
}

/* 6. El estilo de los STATS (Corazón y Comentario) */
.overlay-stat[b-nqpqieg9xq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/GalleryImageEditorModal.razor.rz.scp.css */
/*
 * GalleryImageEditorModal.razor.css
 * Implementación del diseño dual y lógicas de Flujo A, B, y C.
 * [CORREGIDO] Añadido ::deep a los estilos del formulario.
*/

/* ==============================
 * ESTRUCTURA DEL MODAL
 * ==============================
*/

.modal-backdrop[b-bv343ajmr5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1040;
}

.modal-panel[b-bv343ajmr5] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 90%;
    max-width: 900px; /* Ancho para 50/50 */

    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 95vh;
}

.modal-header[b-bv343ajmr5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
}

    .modal-header h4[b-bv343ajmr5] {
        margin: 0;
        font-weight: 500;
        color: var(--color-text-reloj-de-luz);
    }

.btn-close[b-bv343ajmr5] {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--color-form-label-reloj-de-luz);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* --- SECCIONES PRINCIPALES (50%/50%) --- */
.modal-body[b-bv343ajmr5] {
    padding: 0;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 550px;
}

@media (max-width: 900px) {
    .modal-body[b-bv343ajmr5] {
        flex-direction: column;
        overflow-y: auto;
        min-height: auto;
    }
}

/* ==============================
 * SECCIÓN 1: ÁREA VISUAL (IZQUIERDA/ARRIBA)
 * ==============================
*/
.editor-visual-area[b-bv343ajmr5] {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-color: var(--color-deep-gray); /* Fondo corregido */
    border-right: 1px solid var(--color-section-border-reloj-de-luz);
}

@media (max-width: 900px) {
    .editor-visual-area[b-bv343ajmr5] {
        flex-basis: auto;
        min-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }
}

.previewer-section[b-bv343ajmr5] {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-deep-gray); /* Fondo corregido */
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}

/* --- Drop Zone (Flujo B) --- */
.dropzone-area-wrapper[b-bv343ajmr5] {
    position: relative;
    border: 2px dashed var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-form-background-input-reloj-de-luz);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 1.5rem;
}

    .dropzone-area-wrapper:hover[b-bv343ajmr5] {
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
        border-color: var(--color-accent-gold);
    }

.dropzone-content[b-bv343ajmr5] {
    display: block;
    padding: 1rem;
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    z-index: 1;
    cursor: pointer;
    font-size: 0.9rem;
}

    .dropzone-content i[b-bv343ajmr5] {
        color: var(--color-accent-gold);
        margin-bottom: 0.5rem;
        display: block;
    }

    .dropzone-content span[b-bv343ajmr5] {
        display: block;
    }

    .dropzone-content strong[b-bv343ajmr5] {
        color: var(--color-accent-gold);
    }


/* ==============================
 * SECCIÓN 2: ÁREA DE CONTROLES (DERECHA/ABAJO)
 * ==============================
*/
.editor-controls-area[b-bv343ajmr5] {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.5rem;
}

/* --- CONTROLES DE VISTA (BOTONES DE ALTERNANCIA) --- */
.controls-header[b-bv343ajmr5] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
}

.btn-toggle-view[b-bv343ajmr5] {
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: none;
    color: var(--color-form-label-reloj-de-luz);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

    .btn-toggle-view:hover[b-bv343ajmr5] {
        color: var(--color-text-reloj-de-luz);
    }

    .btn-toggle-view.active[b-bv343ajmr5] {
        color: var(--color-accent-gold);
        border-bottom-color: var(--color-accent-gold);
    }

.spacer[b-bv343ajmr5] {
    flex-grow: 1;
}

.controls-content[b-bv343ajmr5] {
    flex-grow: 1;
}

.metadata-panel[b-bv343ajmr5], .adjustments-panel[b-bv343ajmr5] {
    padding-top: 0.5rem;
}

/* --- SELECTOR DE VERSIÓN (Flujo A - Solo Botones) --- */
.version-selector-container[b-bv343ajmr5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

/* [CORREGIDO] Este selector ahora SOLO aplica al InputFile del Drop Zone */
[b-bv343ajmr5] .hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

.version-button[b-bv343ajmr5] {
    padding: 0.6rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-dark-gray);
    color: var(--color-form-label-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    flex-grow: 1;
    min-width: 100px;
    height: 38px;
}

    .version-button:hover[b-bv343ajmr5] {
        background-color: var(--color-dark);
    }

    .version-button.active[b-bv343ajmr5] {
        background-color: var(--color-accent-gold);
        color: var(--color-button-text-save-reloj-de-luz);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .version-button.is-upload[b-bv343ajmr5] {
        background-color: transparent;
        border: 1px dashed var(--color-accent-gold);
        color: var(--color-accent-gold);
    }

        .version-button.is-upload:hover[b-bv343ajmr5] {
            background-color: var(--color-accent-gold-transparent);
        }

        .version-button.is-upload.is-loading[b-bv343ajmr5] {
            cursor: not-allowed;
        }

/* --- SLIDERS Y DROP DOWN --- */
.transform-controls[b-bv343ajmr5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 640px) {
    .transform-controls[b-bv343ajmr5] {
        grid-template-columns: 1fr 1fr;
    }
}

.control-group label[b-bv343ajmr5] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-form-label-reloj-de-luz);
    margin-bottom: 0.25rem;
    display: block;
}

.control-group input[type="range"][b-bv343ajmr5] {
    width: 100%;
    accent-color: var(--color-accent-gold);
    cursor: pointer;
}

.action-controls[b-bv343ajmr5] {
    display: flex;
    margin-top: 1.5rem;
    gap: 0.5rem;
    align-items: center;
}

.custom-dropdown-container[b-bv343ajmr5] {
    position: relative;
    width: 100%;
    flex-grow: 1;
}

@media (min-width: 640px) {
    .custom-dropdown-container[b-bv343ajmr5] {
        width: auto;
        min-width: 200px;
    }
}

.custom-dropdown[b-bv343ajmr5] {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-dark-gray);
    color: var(--color-text-reloj-de-luz);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease;
}

    .custom-dropdown:hover[b-bv343ajmr5] {
        border-color: var(--color-accent-gold);
    }

/* Botón de Desechar Ajustes (Flujo C) */
.btn-reset-adjustments[b-bv343ajmr5] {
    background: var(--color-dark-gray);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    color: var(--color-form-label-reloj-de-luz);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .btn-reset-adjustments:hover[b-bv343ajmr5] {
        border-color: var(--color-accent-gold);
        color: var(--color-accent-gold);
    }

    .btn-reset-adjustments:disabled[b-bv343ajmr5] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.dropdown-options[b-bv343ajmr5] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-dark-carbon);
    z-index: 1060;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-option[b-bv343ajmr5] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--color-text-reloj-de-luz);
    transition: background-color 0.2s ease;
}

    .dropdown-option:hover[b-bv343ajmr5] {
        background-color: var(--color-accent-gold);
        color: var(--color-button-text-save-reloj-de-luz);
    }

    .dropdown-option.selected[b-bv343ajmr5] {
        background-color: var(--color-dark);
        font-weight: 600;
    }


/* ==================================================
 * SECCIÓN 3: METADATOS (Formulario)
 * [CORREGIDO] Se añade ::deep a los selectores
 * ==================================================
*/
.form-group[b-bv343ajmr5] {
    margin-bottom: 1.25rem;
}

/* [CORREGIDO] ::deep añadido */
[b-bv343ajmr5] .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

/* [CORREGIDO] ::deep añadido */
[b-bv343ajmr5] .form-group .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-dark-gray);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
}

    /* [CORREGIDO] ::deep añadido */
    [b-bv343ajmr5] .form-group .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
    }

/* ==============================
 * PIE DE PÁGINA
 * ==============================
*/
.modal-footer-sticky[b-bv343ajmr5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
    background-color: var(--color-dark-carbon);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.btn-cancel[b-bv343ajmr5], .btn-save[b-bv343ajmr5] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel[b-bv343ajmr5] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-bv343ajmr5] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

    .btn-cancel:disabled[b-bv343ajmr5] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-save[b-bv343ajmr5] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

    .btn-save:hover[b-bv343ajmr5] {
        filter: brightness(1.1);
    }

    .btn-save:disabled[b-bv343ajmr5] {
        opacity: 0.5;
        cursor: not-allowed;
        filter: none;
    }

    .btn-save.is-loading > *[b-bv343ajmr5] {
        visibility: hidden;
    }

    .btn-save.is-loading[b-bv343ajmr5]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: calc(50% - 0.6rem);
        left: calc(50% - 0.6rem);
        border: 2px solid var(--color-deep-carbon);
        border-top-color: var(--color-accent-gold);
        border-radius: 50%;
        animation: spin-b-bv343ajmr5 0.8s ease-in-out infinite;
    }

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

.loading-text[b-bv343ajmr5] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    padding: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Shared/GalleryImageModal.razor.rz.scp.css */
/*
 * GalleryImageModal.razor.css
 * Versión: Production Ready (Threaded Comments & Reply Mode)
*/

/* =================================================================
   1. ESTRUCTURA PRINCIPAL (MODAL)
   ================================================================= */

/* Fondo Oscuro (Backdrop) */
.gallery-modal-backdrop[b-u4kmem9k2p] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(5px);
    z-index: 1101;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Contenedor Principal (LA VENTANA) */
.gallery-modal-container[b-u4kmem9k2p] {
    position: relative;
    z-index: 1102;
    display: grid;
    grid-template-columns: 1fr 0px; /* Default: Solo imagen */
    transition: grid-template-columns 0.3s ease-in-out;
    height: 85vh;
    width: 100%;
    max-width: 1400px;
    background-color: var(--color-dark-carbon);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    /* Borde dorado sutil */
    border: 1px dashed rgba(212, 175, 55, 0.5);
}

    .gallery-modal-container.comments-visible[b-u4kmem9k2p] {
        grid-template-columns: 1fr 360px;
    }

/* =================================================================
   2. SECCIÓN DE IMAGEN (IZQUIERDA)
   ================================================================= */
.modal-image-content[b-u4kmem9k2p] {
    grid-column: 1 / 2;
    position: relative;
    background-color: #000;
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Conexión con LightboxViewer */
    .modal-image-content[b-u4kmem9k2p]  .lightbox-wrapper {
        width: 100%;
        height: 100%;
    }

/* Spinner de carga */
.image-loading-overlay[b-u4kmem9k2p] {
    position: absolute;
    inset: 0;
    z-index: 11;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .image-loading-overlay .spinner-border[b-u4kmem9k2p] {
        width: 3rem;
        height: 3rem;
    }

/* Botón Cerrar Global (Top Right) */
.btn-modal-close[b-u4kmem9k2p] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-modal-close:hover[b-u4kmem9k2p] {
        background: rgba(200, 0, 0, 0.7);
        border-color: rgba(255,0,0,0.5);
        transform: scale(1.1);
    }

/* Flechas de Navegación */
.nav-arrow[b-u4kmem9k2p] {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1105;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-arrow:hover[b-u4kmem9k2p] {
        background: rgba(255, 255, 255, 0.2);
    }

    .nav-arrow:disabled[b-u4kmem9k2p] {
        opacity: 0.3;
        cursor: default;
    }

    .nav-arrow.prev[b-u4kmem9k2p] {
        left: 2rem;
    }

    .nav-arrow.next[b-u4kmem9k2p] {
        right: 2rem;
    }


/* =================================================================
   3. BARRA DE ACCIONES FLOTANTE (Cápsula)
   ================================================================= */
.modal-image-actions-bar[b-u4kmem9k2p] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}

    .modal-image-actions-bar:hover[b-u4kmem9k2p] {
        background: rgba(20, 20, 20, 0.95);
        border-color: rgba(255, 255, 255, 0.3);
    }

.action-pill-item[b-u4kmem9k2p] {
    background: none;
    border: none;
    color: var(--color-text-reloj-de-luz, #eee);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

    .action-pill-item:hover[b-u4kmem9k2p] {
        color: white;
        transform: scale(1.05);
    }

    .action-pill-item i[b-u4kmem9k2p] {
        font-size: 1.2rem;
    }

    /* Estado Like */
    .action-pill-item.liked i[b-u4kmem9k2p] {
        color: var(--color-accent-red, #E74C3C);
        animation: heart-pop-b-u4kmem9k2p 0.3s;
    }

    /* Estado Active (Comentarios abiertos) */
    .action-pill-item.active[b-u4kmem9k2p] {
        color: var(--color-accent-gold);
    }

.action-separator[b-u4kmem9k2p] {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.15);
}

@keyframes heart-pop-b-u4kmem9k2p {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


/* =================================================================
   4. COLUMNA DE COMENTARIOS (DERECHA)
   ================================================================= */
.modal-comments-column[b-u4kmem9k2p] {
    grid-column: 2 / 3;
    background-color: var(--color-dark-carbon);
    border-left: 1px solid var(--color-section-border-reloj-de-luz);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Padding top para librar el botón cerrar en desktop */
    padding-top: 3rem;
}

/* --- Elementos Fijos Superiores --- */
.post-owner-header[b-u4kmem9k2p],
.post-caption-section[b-u4kmem9k2p],
.post-actions-section[b-u4kmem9k2p] {
    padding: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
}

/* Estilos de texto */
.post-owner-link[b-u4kmem9k2p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.post-owner-name[b-u4kmem9k2p] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--color-text-reloj-de-luz);
}

.post-caption-section p[b-u4kmem9k2p] {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--color-text-reloj-de-luz);
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

.caption-text[b-u4kmem9k2p] {
    margin-right: 0.5rem;
}

.caption-ceremony-link[b-u4kmem9k2p] {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-form-label-reloj-de-luz);
    display: block;
    margin-top: 0.25rem;
    text-decoration: none;
    cursor: pointer;
}

.like-count[b-u4kmem9k2p] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-reloj-de-luz);
}


/* --- INPUT DE COMENTARIOS (MODO RESPUESTA) --- */
.comment-input-section[b-u4kmem9k2p] {
    padding: 1rem;
    display: flex;
    flex-direction: column; /* Para apilar el badge */
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
    background-color: var(--color-dark-carbon);
    position: sticky;
    bottom: 0; /* Se queda pegado al fondo si el contenedor crece? No, aquí es parte del flujo flex */
}

/* Badge "Respondiendo a..." */
.reply-badge[b-u4kmem9k2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(192, 164, 124, 0.15); /* Dorado muy suave */
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--color-accent-gold);
    font-family: 'Montserrat', sans-serif;
    animation: slideDown-b-u4kmem9k2p 0.2s ease-out;
    border-left: 3px solid var(--color-accent-gold);
}

    .reply-badge strong[b-u4kmem9k2p] {
        color: white;
        font-weight: 600;
        margin-left: 4px;
    }

.btn-cancel-reply[b-u4kmem9k2p] {
    background: none;
    border: none;
    color: var(--color-text-reloj-de-luz);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.2rem;
}

    .btn-cancel-reply:hover[b-u4kmem9k2p] {
        color: white;
    }

/* Wrapper del Input + Botón */
.input-wrapper[b-u4kmem9k2p] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.comment-input-section input[b-u4kmem9k2p] {
    flex-grow: 1;
    background: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    color: var(--color-text-reloj-de-luz);
    padding: 0.6rem;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

    .comment-input-section input:focus[b-u4kmem9k2p] {
        outline: none;
        border-color: var(--color-accent-gold);
    }

.comment-input-section button[b-u4kmem9k2p] {
    background: none;
    border: none;
    color: var(--color-accent-gold);
    font-weight: 600;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

    .comment-input-section button:disabled[b-u4kmem9k2p] {
        color: var(--color-form-label-reloj-de-luz);
        cursor: default;
    }


/* --- LISTA DE COMENTARIOS (HILOS) --- */
.comments-list-section[b-u4kmem9k2p] {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
}

.comment-item-wrapper[b-u4kmem9k2p] {
    margin-bottom: 1.2rem;
}

/* Estilo base del comentario */
.comment-item[b-u4kmem9k2p] {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.comment-avatar[b-u4kmem9k2p] {
    flex-shrink: 0;
    margin-top: 2px;
}

.comment-body[b-u4kmem9k2p] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Burbuja de texto (opcional, aquí lo hacemos limpio sin fondo) */
.comment-bubble[b-u4kmem9k2p] {
    line-height: 1.4;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
}

    .comment-bubble strong[b-u4kmem9k2p] {
        color: white;
        font-weight: 600;
        margin-right: 0.4rem;
    }

    .comment-bubble span[b-u4kmem9k2p] {
        color: var(--color-text-reloj-de-luz);
    }

.comment-meta[b-u4kmem9k2p] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Botón "Responder" pequeño */
.btn-reply[b-u4kmem9k2p] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-form-label-reloj-de-luz);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

    .btn-reply:hover[b-u4kmem9k2p] {
        color: var(--color-text-reloj-de-luz);
    }

/* Respuestas Anidadas */
.replies-container[b-u4kmem9k2p] {
    margin-top: 0.8rem;
    margin-left: 30px; /* Desplazamiento visual */
    padding-left: 0.8rem;
    border-left: 2px solid rgba(255,255,255,0.05); /* Línea guía */
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Ajuste para items de respuesta */
.reply-item .comment-avatar[b-u4kmem9k2p] {
    /* (El tamaño se controla en el componente razor, aquí solo layout) */
}

.empty-text[b-u4kmem9k2p] {
    text-align: center;
    padding: 2rem;
    font-style: italic;
    color: var(--color-form-label-reloj-de-luz);
}


/* =================================================================
   5. RESPONSIVIDAD MÓVIL (ESTABILIDAD RÍGIDA)
   ================================================================= */
@media (max-width: 992px) {
    .gallery-modal-backdrop[b-u4kmem9k2p] {
        padding: 0;
        background-color: #000;
    }

    .gallery-modal-container[b-u4kmem9k2p] {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        border: none;
        background-color: #000;
        overflow: hidden;
    }

    /* Imagen Móvil: Ocupa todo si está cerrado */
    .modal-image-content[b-u4kmem9k2p] {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: height 0.3s ease;
    }

    /* Imagen Móvil: Fija si está abierto */
    .gallery-modal-container.comments-visible .modal-image-content[b-u4kmem9k2p] {
        flex: none;
        height: 45vh;
    }

    /* Comentarios Móvil */
    .modal-comments-column[b-u4kmem9k2p] {
        display: none;
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.15);
        background-color: var(--color-dark-carbon);
        padding-top: 0;
        padding-bottom: 0; /* Padding gestionado internamente */
        flex: 1; /* Ocupa el resto */
    }

    .gallery-modal-container.comments-visible .modal-comments-column[b-u4kmem9k2p] {
        display: flex;
        flex-direction: column;
    }

    /* Ajuste del Input en Móvil (Siempre pegado al teclado/fondo) */
    .comment-input-section[b-u4kmem9k2p] {
        position: sticky; /* Pegado al fondo del contenedor flex */
        bottom: 0;
        order: 10; /* Forzamos que vaya al final del flex column */
    }

    /* Ajuste de la lista para que crezca */
    .comments-list-section[b-u4kmem9k2p] {
        flex-grow: 1;
        overflow-y: auto;
    }

    /* Barra Acciones Móvil */
    .modal-image-actions-bar[b-u4kmem9k2p] {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        padding: 0.4rem 1.2rem;
    }

    .post-owner-header[b-u4kmem9k2p] {
        padding-right: 1rem;
    }

    .btn-modal-close[b-u4kmem9k2p] {
        top: 15px;
        right: 15px;
        background: rgba(0,0,0,0.6);
    }

    .nav-arrow[b-u4kmem9k2p] {
        top: 50%;
        width: 40px;
        height: 40px;
    }

        .nav-arrow.prev[b-u4kmem9k2p] {
            left: 10px;
        }

        .nav-arrow.next[b-u4kmem9k2p] {
            right: 10px;
        }
}

/* Animaciones */
@keyframes slideDown-b-u4kmem9k2p {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bloqueo de selección */
.user-select-none[b-u4kmem9k2p] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Excepción para inputs */
.comment-input-section input[b-u4kmem9k2p], .comment-item span[b-u4kmem9k2p] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
/* _content/Ceremony.RelojDeLuz/Shared/GalleryManager.razor.rz.scp.css */
/* GalleryManager.razor.css */

.gallery-manager[b-6slvzou26m] {
    /* Contenedor principal */
}

/* ==============================
 ESTILOS DEL DROPZONE (ZONA DE SUBIDA) - ¡MODIFICADO!
 ==============================
*/
.dropzone-area[b-6slvzou26m] {
    position: relative; /* Clave para el input superpuesto */
    border: 2px dashed var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-form-background-input-reloj-de-luz);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    overflow: hidden; /* Nos aseguramos que el input no se salga */
}

    .dropzone-area:hover[b-6slvzou26m],
    .dropzone-area.is-dragover[b-6slvzou26m] {
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
        border-color: var(--color-accent-gold);
    }

/* El input real está 100% superpuesto, estirado e invisible */
/* Usamos ::deep porque <InputFile> es un componente */
[b-6slvzou26m] .dropzone-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Lo hace 100% invisible */
    cursor: pointer;
    z-index: 10; /* Se asegura de que esté ENCIMA del label */
}

/* El 'label' (ahora .dropzone-content) es solo el contenido visual */
.dropzone-content[b-6slvzou26m] {
    display: block; /* Hacemos que el label llene el espacio */
    padding: 2.5rem;
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    z-index: 1; /* Está DEBAJO del input */
    cursor: pointer;
}

    .dropzone-content i[b-6slvzou26m] {
        color: var(--color-accent-gold);
        margin-bottom: 1rem;
    }

    .dropzone-content p[b-6slvzou26m] {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 1.1rem;
        color: var(--color-text-reloj-de-luz);
        margin: 0;
    }

    .dropzone-content span[b-6slvzou26m] {
        font-size: 0.9rem;
    }

/* ==============================
 ESTILOS DE LA LISTA DE SUBIDA (Sin cambios)
 ==============================
*/
.upload-progress-list[b-6slvzou26m] {
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 4px;
    padding: 1rem;
    max-height: 200px;
    overflow-y: auto;
}

    .upload-progress-list h5[b-6slvzou26m] {
        margin-top: 0;
        margin-bottom: 0.75rem;
        color: var(--color-accent-gold);
    }

.upload-progress-item[b-6slvzou26m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--color-text-reloj-de-luz);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .upload-progress-item:last-child[b-6slvzou26m] {
        border-bottom: none;
    }

    .upload-progress-item .spinner-border[b-6slvzou26m] {
        color: var(--color-accent-gold);
    }


/* ==============================
 ESTILOS DE LA CUADRÍCULA DE GALERÍA (Sin cambios)
 ==============================
*/
.gallery-grid[b-6slvzou26m] {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
    gap: 1.5rem;
}

/* ==============================
 ESTILOS DE ESTADO (CARGA/VACÍO) (Sin cambios)
 ==============================
*/
.loading-text[b-6slvzou26m], .empty-text[b-6slvzou26m] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
    padding: 2rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/GallerySection.razor.rz.scp.css */
.gallery-section[b-5tudk1ckm3] {
    width: 100%;
    padding: 6rem 1.5rem;
    background-color: var(--color-background-paper);
    background-image: var(--texture-paper);
}

.gallery-header[b-5tudk1ckm3] {
    text-align: center;
    margin-bottom: 4rem;
}

.gallery-title[b-5tudk1ckm3] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 400;
}

.gallery-description[b-5tudk1ckm3] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-light);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* --- El Mosaico de Imágenes --- */
.gallery-grid[b-5tudk1ckm3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-item[b-5tudk1ckm3] {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    cursor: pointer;
}

    .gallery-item:nth-child(5n - 2)[b-5tudk1ckm3] {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item:nth-child(7n - 3)[b-5tudk1ckm3] {
        grid-row: span 2;
    }

    .gallery-item:nth-child(11n - 7)[b-5tudk1ckm3] {
        grid-column: span 2;
    }

@media (max-width: 768px) {
    .gallery-item:nth-child(5n - 2)[b-5tudk1ckm3],
    .gallery-item:nth-child(7n - 3)[b-5tudk1ckm3],
    .gallery-item:nth-child(11n - 7)[b-5tudk1ckm3] {
        grid-column: auto;
        grid-row: auto;
    }
}


.gallery-item img[b-5tudk1ckm3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

.gallery-item:hover img[b-5tudk1ckm3] {
    transform: scale(1.05);
}

.gallery-item-overlay[b-5tudk1ckm3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.gallery-item:hover .gallery-item-overlay[b-5tudk1ckm3] {
    opacity: 1;
}

/* ===== NUEVOS ESTILOS PARA EL LIGHTBOX REAL ===== */
.lightbox-overlay[b-5tudk1ckm3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-5tudk1ckm3 0.3s ease;
}

.lightbox-content[b-5tudk1ckm3] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-image[b-5tudk1ckm3] {
    max-width: 100%;
    max-height: 90vh; /* La imagen nunca será más alta que el 90% de la pantalla */
    border-radius: 0.25rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.lightbox-close[b-5tudk1ckm3], .lightbox-prev[b-5tudk1ckm3], .lightbox-next[b-5tudk1ckm3] {
    position: absolute;
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .lightbox-close:hover[b-5tudk1ckm3], .lightbox-prev:hover[b-5tudk1ckm3], .lightbox-next:hover[b-5tudk1ckm3] {
        background: rgba(0,0,0,0.6);
    }

.lightbox-close[b-5tudk1ckm3] {
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
}

.lightbox-prev[b-5tudk1ckm3], .lightbox-next[b-5tudk1ckm3] {
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
}

.lightbox-prev[b-5tudk1ckm3] {
    left: -70px;
}

.lightbox-next[b-5tudk1ckm3] {
    right: -70px;
}

@keyframes fadeIn-b-5tudk1ckm3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Media query para móviles */
@media (max-width: 768px) {
    .lightbox-prev[b-5tudk1ckm3], .lightbox-next[b-5tudk1ckm3] {
        top: auto;
        bottom: -60px;
        transform: none;
    }

    .lightbox-prev[b-5tudk1ckm3] {
        left: 25%;
    }

    .lightbox-next[b-5tudk1ckm3] {
        right: 25%;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/GuestsTab.razor.rz.scp.css */
/*
 * GuestsTab.razor.css
 * Estilos para la pestaña "Lista de Invitados", que reutiliza el
 * diseño de "Cuaderno" (de MySchedule) y añade los botones de acción "Café".
*/

/* --- 1. ESTILOS BASE (Copiados de UpcomingCard.razor.css) --- */

/* La Tarjeta Contenedora (Transparente, padre de las hojas) */
.agenda-card[b-ux17j1pi5q] {
    max-width: 800px;
    width: 100%;
    position: relative;
    padding: 1.5rem;
    background-color: transparent;
    border: none;
    perspective: 1000px;
}

/* La Hoja de Papel Principal (La de arriba) */
.agenda-paper[b-ux17j1pi5q] {
    background-color: #fdfdfa; /* Color papel hueso */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    z-index: 2;
    transform: rotate(-0.2deg);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hojas Falsas (detrás) */
.agenda-card[b-ux17j1pi5q]::before,
.agenda-card[b-ux17j1pi5q]::after {
    content: '';
    position: absolute;
    inset: 1.5rem;
    background-color: #fdfdfa;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.agenda-card[b-ux17j1pi5q]::before {
    z-index: 1;
    transform: translate(8px, 6px) rotate(1.5deg);
}

.agenda-card[b-ux17j1pi5q]::after {
    z-index: 0;
    transform: translate(14px, 10px) rotate(-1.2deg);
}

/* Animación Hover */
.agenda-card:hover .agenda-paper[b-ux17j1pi5q] {
    transform: translateY(-8px) rotate(0deg);
}

.agenda-card:hover[b-ux17j1pi5q]::before {
    transform: translate(10px, 8px) rotate(1.8deg);
}

.agenda-card:hover[b-ux17j1pi5q]::after {
    transform: translate(18px, 14px) rotate(-1.5deg);
}

/* El Contenido (con la línea roja) */
.agenda-content[b-ux17j1pi5q] {
    position: relative;
    padding-bottom: 1rem;
}

    .agenda-content[b-ux17j1pi5q]::before {
        content: '';
        position: absolute;
        left: -2rem;
        top: -1rem;
        bottom: -1rem;
        width: 1px;
        background-color: rgba(255, 0, 0, 0.4);
    }

/* Título de la "Nota" */
.agenda-title[b-ux17j1pi5q] {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    color: #2c3e50;
    margin: 0.5rem 0 1rem 0;
    font-weight: normal;
}

    /* Línea punteada */
    .agenda-title.separator[b-ux17j1pi5q] {
        padding-top: 1rem;
        border-top: 2px dashed rgba(0,0,0,0.1);
        margin-top: 1rem;
        margin-bottom: 2rem;
    }


/* --- 2. (NUEVO) Zona de Acción "+1" --- */

.guest-actions-wrapper[b-ux17j1pi5q] {
    padding: 0 0 1rem 0;
    text-align: center;
}

/* Texto de estado (reusado del pergamino/CedulaTab) */
.parchment-text[b-ux17j1pi5q] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    color: #795548; /* Café */
    margin-bottom: 1.5rem;
}

/* Botón "Invitar Acompañante" (reusado de CedulaTab) */
.btn-save[b-ux17j1pi5q] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid #795548;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #795548;
    color: #fdfdfa;
}

    .btn-save:hover[b-ux17j1pi5q] {
        background-color: #5d4037;
    }


/* --- 3. Lista de Invitados (Copiado de UpcomingCard.razor.css) --- */

.invitation-list[b-ux17j1pi5q] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item[b-ux17j1pi5q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(0, 150, 255, 0.2); /* Línea de cuaderno azul */
    font-family: 'Montserrat', sans-serif;
    color: #333;
    flex-wrap: wrap;
}

    .list-item:last-child[b-ux17j1pi5q] {
        border-bottom: none;
    }

    .list-item.empty-item[b-ux17j1pi5q] {
        color: #888;
        font-style: italic;
        font-size: 0.9rem;
    }

.item-title[b-ux17j1pi5q] {
    flex-grow: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-status[b-ux17j1pi5q] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
}

/* --- 4. Colores de Estado (Todos los roles y estados) --- */

.status-organizador[b-ux17j1pi5q] {
    background-color: rgba(13, 202, 240, 0.2);
    color: #055160;
}

.status-protagonista[b-ux17j1pi5q] {
    background-color: rgba(185, 154, 95, 0.2);
    color: #5d4037;
}

.status-invitado[b-ux17j1pi5q] {
    background-color: rgba(108, 117, 125, 0.2);
    color: #5a6268;
}

.status-acompañante[b-ux17j1pi5q] {
    background-color: rgba(25, 135, 84, 0.2); /* Verde */
    color: #0f5132;
}

/* Estados */
.status-aceptada[b-ux17j1pi5q] {
    background-color: rgba(40, 167, 69, 0.2);
    color: #1a682c;
}

.status-pendiente[b-ux17j1pi5q] {
    background-color: rgba(255, 193, 7, 0.2);
    color: #8a6d04;
    font-style: italic;
}

.status-declinada[b-ux17j1pi5q] {
    background-color: rgba(220, 53, 69, 0.2);
    color: #7a2126;
}


/* --- 5. Responsividad (Copiado de UpcomingCard.razor.css) --- */
@media (max-width: 768px) {
    .agenda-card[b-ux17j1pi5q] {
        padding: 0.5rem;
    }

        .agenda-card[b-ux17j1pi5q]::before,
        .agenda-card[b-ux17j1pi5q]::after {
            top: 0.5rem;
            left: 0.5rem;
            right: 0.5rem;
            bottom: 0.5rem;
        }

        .agenda-card[b-ux17j1pi5q]::before {
            transform: translate(3px, 3px) rotate(1.5deg);
        }

        .agenda-card[b-ux17j1pi5q]::after {
            transform: translate(6px, 6px) rotate(-1.2deg);
        }

    .agenda-paper[b-ux17j1pi5q] {
        position: relative;
        left: 0;
        top: 0;
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        margin-left: 0;
        z-index: 2;
    }

    .agenda-content[b-ux17j1pi5q]::before {
        left: -1rem;
        top: -0.5rem;
        bottom: -0.5rem;
    }

    .list-item[b-ux17j1pi5q] {
        gap: 0.5rem;
    }

    .item-title[b-ux17j1pi5q] {
        flex-basis: 100%;
        order: -1;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/HeroCarousel.razor.rz.scp.css */
.hero-carousel[b-hyvzc9e7dd] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga */
}

.overlay[b-hyvzc9e7dd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Tono oscuro sutil para mejorar contraste */
    z-index: 1;
}

.slides .slide[b-hyvzc9e7dd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* La magia de la transición suave */
    z-index: 0;
}

    .slides .slide.active[b-hyvzc9e7dd] {
        opacity: 1; /* La imagen activa se hace visible */
    }

.hero-content[b-hyvzc9e7dd] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: white;
}

.hero-title[b-hyvzc9e7dd] {
    font-family: 'Great Vibes', cursive;
    font-size: 5rem; /* 80px */
    font-weight: 400;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-subtitle[b-hyvzc9e7dd] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem; /* 20px */
    margin-top: 0.5rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
    .hero-title[b-hyvzc9e7dd] {
        font-size: 3.5rem; /* 56px */
    }

    .hero-subtitle[b-hyvzc9e7dd] {
        font-size: 1rem; /* 16px */
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ImageEditor.razor.rz.scp.css */
/* Contenedor exterior que envuelve AMBAS vistas.
    Es 'relative' para posicionar el botón de edición.
*/
.image-editor-wrapper-outer[b-f36ldzgrqv] {
    position: relative;
    width: 100%;
}

/* Esta es la regla para el 'marco' individual (Desktop o Mobile).
*/
.image-editor-popover-wrapper[b-f36ldzgrqv] {
    height: auto; /* La altura se adaptará a la relación de aspecto de la imagen */
    margin: 0 auto; /* Centra el componente si el style en línea le da un ancho < 100% */
    font-family: 'Montserrat', sans-serif;
}

/* --- Contenedor de la Imagen y Skeleton --- */
.image-preview-container[b-f36ldzgrqv] {
    position: relative;
    width: 100%;
    /* [CAMBIO CLAVE]: Se quitó 'height: 100%;'
      Esto es VITAL para que el 'aspect-ratio' inyectado desde
      el C# pueda controlar la altura del contenedor.
    */
    overflow: hidden;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* --- Skeleton Loader (SIN CAMBIOS) --- */
.skeleton-loader[b-f36ldzgrqv] {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #2c2c2c 25%, #444444 50%, #2c2c2c 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-f36ldzgrqv 1.8s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

@keyframes skeleton-loading-b-f36ldzgrqv {
    to {
        background-position: -200% 0;
    }
}

/* --- Imagen Preview (SIN CAMBIOS) --- */
/*
    Esta regla sigue siendo correcta. La imagen SÍ debe
    intentar llenar el 100% de su padre (el .image-preview-container).
*/
.image-preview[b-f36ldzgrqv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease, object-position 0.25s ease, opacity 0.5s ease;
    position: relative;
    z-index: 2;
    opacity: 0;
    display: block;
}

/* --- Lógica de Carga Visual (SIN CAMBIOS) --- */
.image-preview-container.loaded .image-preview[b-f36ldzgrqv] {
    opacity: 1;
}

.image-preview-container.loaded .skeleton-loader[b-f36ldzgrqv] {
    opacity: 0;
    pointer-events: none;
}

/* --- Botón de Edición Flotante (SIN CAMBIOS) --- */
.edit-image-button[b-f36ldzgrqv] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    background-color: rgba(26, 26, 26, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

    .edit-image-button:hover[b-f36ldzgrqv] {
        background-color: var(--color-accent-gold);
        transform: scale(1.1);
    }

/* --- Lógica de "Spotlight" (Mobile-first) (SIN CAMBIOS) --- */

/* 1. Por defecto (móvil): Ocultamos Desktop, mostramos Mobile */
.desktop-view[b-f36ldzgrqv] {
    display: none;
}

.mobile-view[b-f36ldzgrqv] {
    display: block;
}

/* 2. Media Query (pantallas anchas, 768px y más): Invertimos la visibilidad */
@media (min-width: 768px) {
    .desktop-view[b-f36ldzgrqv] {
        display: block;
    }

    .mobile-view[b-f36ldzgrqv] {
        display: none;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ImageEditorPopover.razor.rz.scp.css */
.popover-overlay[b-zh0u1o5sp6] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-zh0u1o5sp6 0.3s ease;
}

.popover-content-wrapper[b-zh0u1o5sp6] {
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    background-color: #18181b;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleUp-b-zh0u1o5sp6 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.previewer-section[b-zh0u1o5sp6] {
    min-height: 0;
    width: 100%;
    position: relative;
    display: flex;
    background-color: rgba(0, 0, 0, 0.2);
    flex: 1;
}

.controls-bar[b-zh0u1o5sp6] {
    width: 100%;
    background-color: rgba(30, 30, 35, 0.75);
    backdrop-filter: blur(12px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    flex-shrink: 0; /* Evita que la barra de controles se encoja */
    z-index: 2;
}


/* --- RESTO DEL ARCHIVO SIN CAMBIOS --- */
@keyframes fadeIn-b-zh0u1o5sp6 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp-b-zh0u1o5sp6 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.btn-close[b-zh0u1o5sp6] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-close:hover[b-zh0u1o5sp6] {
        background-color: var(--color-accent-gold);
        color: white;
    }

.version-selector-container[b-zh0u1o5sp6] {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-controls-wrapper[b-zh0u1o5sp6] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.transform-controls[b-zh0u1o5sp6] {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 0.5rem 1.5rem;
}

.action-controls[b-zh0u1o5sp6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 5px;
}

.control-group label[b-zh0u1o5sp6] {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
    display: block;
}

input[type="range"][b-zh0u1o5sp6] {
    width: 100%;
    accent-color: var(--color-accent-gold);
    cursor: pointer;
}

.file-upload-wrapper[b-zh0u1o5sp6] {
    display: flex;
    justify-content: center;
}

.file-upload-button[b-zh0u1o5sp6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-text-dark);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.2rem;
    margin-top: 7px;
}

    .file-upload-button:hover[b-zh0u1o5sp6] {
        background-color: var(--color-accent-gold);
        transform: scale(1.1);
    }

.custom-dropdown-container[b-zh0u1o5sp6] {
    position: relative;
}

.custom-dropdown[b-zh0u1o5sp6] {
    min-width: 180px;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    .custom-dropdown:hover[b-zh0u1o5sp6] {
        border-color: var(--color-accent-gold);
    }

    .custom-dropdown .arrow[b-zh0u1o5sp6] {
        transition: transform 0.2s ease;
    }

.dropdown-options[b-zh0u1o5sp6] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: #2c2c34;
    z-index: 1050;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-option[b-zh0u1o5sp6] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .dropdown-option:hover[b-zh0u1o5sp6] {
        background-color: var(--color-accent-gold);
        color: white;
    }

    .dropdown-option.selected[b-zh0u1o5sp6] {
        background-color: rgba(255, 255, 255, 0.1);
        font-weight: 600;
    }

@media (max-width: 768px) {
    .main-controls-wrapper[b-zh0u1o5sp6] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .transform-controls[b-zh0u1o5sp6] {
        grid-template-columns: 1fr;
    }

    .action-controls[b-zh0u1o5sp6] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ImagePreviewer.razor.rz.scp.css */
/* ImagePreviewer.razor.css */

.image-previewer-wrapper[b-lub4egzewi] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}

/* El "Marco": define la forma, recorta, y contiene todo. */
.aspect-ratio-viewport[b-lub4egzewi] {
    position: relative;
    overflow: hidden; /* Clave para recortar la imagen cuando se hace zoom/paneo */
    background-color: #000000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Lógica de escalado dinámico (ContainerWidth) */
    max-width: calc(100% * var(--container-scale, 1));
    max-height: calc(60vh * var(--container-scale, 1));
    transition: all 0.2s ease;
}

.skeleton-loader[b-lub4egzewi] {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #2c2c2c 25%, #444444 50%, #2c2c2c 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-lub4egzewi 1.8s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* La "Obra de Arte": se adapta al 100% del marco. */
.image-preview[b-lub4egzewi] {
    width: 100%;
    height: 100%;
    /* object-fit y transform se inyectan desde C# */
    transition: transform 0.1s ease; /* Transición rápida para que los sliders se sientan fluidos */
    position: relative;
    z-index: 2;
    opacity: 0;
    display: block;
}

/* Lógica de carga visual */
.aspect-ratio-viewport.image-loaded .image-preview[b-lub4egzewi] {
    opacity: 1;
}

.aspect-ratio-viewport.image-loaded .skeleton-loader[b-lub4egzewi] {
    opacity: 0;
    pointer-events: none;
}

@keyframes skeleton-loading-b-lub4egzewi {
    to {
        background-position: -200% 0;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ImageSetEditorModal.razor.rz.scp.css */
/*
 * ImageSetEditorModal.razor.css
 * Estilos para el modal genérico de ImageSet.
 * Este archivo es una copia de GalleryImageEditorModal.razor.css
 * y depende de las variables globales en site.css
*/

/* ==============================
 * ESTRUCTURA DEL MODAL
 * ==============================
*/

.modal-backdrop[b-gknbs82cfk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1040;
}

.modal-panel[b-gknbs82cfk] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 90%;
    max-width: 900px; /* Ancho para 50/50 */
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 95vh;
}

.modal-header[b-gknbs82cfk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
}

    .modal-header h4[b-gknbs82cfk] {
        margin: 0;
        font-weight: 500;
        color: var(--color-text-reloj-de-luz);
    }

.btn-close[b-gknbs82cfk] {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--color-form-label-reloj-de-luz);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* --- SECCIONES PRINCIPALES (50%/50%) --- */
.modal-body[b-gknbs82cfk] {
    padding: 0;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 550px;
}

@media (max-width: 900px) {
    .modal-body[b-gknbs82cfk] {
        flex-direction: column;
        overflow-y: auto;
        min-height: auto;
    }
}

/* ==============================
 * SECCIÓN 1: ÁREA VISUAL (IZQUIERDA/ARRIBA)
 * ==============================
*/
.editor-visual-area[b-gknbs82cfk] {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-color: var(--color-deep-gray);
    border-right: 1px solid var(--color-section-border-reloj-de-luz);
}

@media (max-width: 900px) {
    .editor-visual-area[b-gknbs82cfk] {
        flex-basis: auto;
        min-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }
}

.previewer-section[b-gknbs82cfk] {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-deep-gray);
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}

/* --- Drop Zone (Flujo B) --- */
.dropzone-area-wrapper[b-gknbs82cfk] {
    position: relative;
    border: 2px dashed var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-form-background-input-reloj-de-luz);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 1.5rem;
}

    .dropzone-area-wrapper:hover[b-gknbs82cfk] {
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
        border-color: var(--color-accent-gold);
    }

.dropzone-content[b-gknbs82cfk] {
    display: block;
    padding: 1rem;
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    z-index: 1;
    cursor: pointer;
    font-size: 0.9rem;
}

    .dropzone-content i[b-gknbs82cfk] {
        color: var(--color-accent-gold);
        margin-bottom: 0.5rem;
        display: block;
    }

    .dropzone-content span[b-gknbs82cfk] {
        display: block;
    }

    .dropzone-content strong[b-gknbs82cfk] {
        color: var(--color-accent-gold);
    }


/* ==============================
 * SECCIÓN 2: ÁREA DE CONTROLES (DERECHA/ABAJO)
 * ==============================
*/
.editor-controls-area[b-gknbs82cfk] {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.5rem;
}

/* --- CONTROLES DE VISTA (BOTONES DE ALTERNANCIA) --- */
.controls-header[b-gknbs82cfk] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
}

.btn-toggle-view[b-gknbs82cfk] {
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: none;
    color: var(--color-form-label-reloj-de-luz);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

    .btn-toggle-view:hover[b-gknbs82cfk] {
        color: var(--color-text-reloj-de-luz);
    }

    .btn-toggle-view.active[b-gknbs82cfk] {
        color: var(--color-accent-gold);
        border-bottom-color: var(--color-accent-gold);
    }

.spacer[b-gknbs82cfk] {
    flex-grow: 1;
}

.controls-content[b-gknbs82cfk] {
    flex-grow: 1;
}

.metadata-panel[b-gknbs82cfk], .adjustments-panel[b-gknbs82cfk] {
    padding-top: 0.5rem;
}

/* --- SELECTOR DE VERSIÓN (Flujo A - Solo Botones) --- */
.version-selector-container[b-gknbs82cfk] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

[b-gknbs82cfk] .hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.version-button[b-gknbs82cfk] {
    padding: 0.6rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-dark-gray);
    color: var(--color-form-label-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    flex-grow: 1;
    min-width: 100px;
    height: 38px;
}

    .version-button:hover[b-gknbs82cfk] {
        background-color: var(--color-dark);
    }

    .version-button.active[b-gknbs82cfk] {
        background-color: var(--color-accent-gold);
        color: var(--color-button-text-save-reloj-de-luz);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .version-button.is-upload[b-gknbs82cfk] {
        background-color: transparent;
        border: 1px dashed var(--color-accent-gold);
        color: var(--color-accent-gold);
    }

        .version-button.is-upload:hover[b-gknbs82cfk] {
            background-color: var(--color-accent-gold-transparent);
        }

        .version-button.is-upload.is-loading[b-gknbs82cfk] {
            cursor: not-allowed;
        }

/* --- SLIDERS Y DROP DOWN --- */
.transform-controls[b-gknbs82cfk] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 640px) {
    .transform-controls[b-gknbs82cfk] {
        grid-template-columns: 1fr 1fr;
    }
}

.control-group label[b-gknbs82cfk] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-form-label-reloj-de-luz);
    margin-bottom: 0.25rem;
    display: block;
}

.control-group input[type="range"][b-gknbs82cfk] {
    width: 100%;
    accent-color: var(--color-accent-gold);
    cursor: pointer;
}

.action-controls[b-gknbs82cfk] {
    display: flex;
    margin-top: 1.5rem;
    gap: 0.5rem;
    align-items: center;
}

.custom-dropdown-container[b-gknbs82cfk] {
    position: relative;
    width: 100%;
    flex-grow: 1;
}

@media (min-width: 640px) {
    .custom-dropdown-container[b-gknbs82cfk] {
        width: auto;
        min-width: 200px;
    }
}

.custom-dropdown[b-gknbs82cfk] {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-dark-gray);
    color: var(--color-text-reloj-de-luz);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease;
}

    .custom-dropdown:hover[b-gknbs82cfk] {
        border-color: var(--color-accent-gold);
    }

/* Botón de Desechar Ajustes (Flujo C) */
.btn-reset-adjustments[b-gknbs82cfk] {
    background: var(--color-dark-gray);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    color: var(--color-form-label-reloj-de-luz);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .btn-reset-adjustments:hover[b-gknbs82cfk] {
        border-color: var(--color-accent-gold);
        color: var(--color-accent-gold);
    }

    .btn-reset-adjustments:disabled[b-gknbs82cfk] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.dropdown-options[b-gknbs82cfk] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 8px;
    background-color: var(--color-dark-carbon);
    z-index: 1060;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-option[b-gknbs82cfk] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--color-text-reloj-de-luz);
    transition: background-color 0.2s ease;
}

    .dropdown-option:hover[b-gknbs82cfk] {
        background-color: var(--color-accent-gold);
        color: var(--color-button-text-save-reloj-de-luz);
    }

    .dropdown-option.selected[b-gknbs82cfk] {
        background-color: var(--color-dark);
        font-weight: 600;
    }


/* ==================================================
 * SECCIÓN 3: METADATOS (Formulario)
 * ==================================================
*/
.form-group[b-gknbs82cfk] {
    margin-bottom: 1.25rem;
}

[b-gknbs82cfk] .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-gknbs82cfk] .form-group .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-dark-gray);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
}

    [b-gknbs82cfk] .form-group .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
    }

/* ==============================
 * PIE DE PÁGINA
 * ==============================
*/
.modal-footer-sticky[b-gknbs82cfk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
    flex-shrink: 0;
    background-color: var(--color-dark-carbon);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.btn-cancel[b-gknbs82cfk], .btn-save[b-gknbs82cfk] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel[b-gknbs82cfk] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-gknbs82cfk] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

    .btn-cancel:disabled[b-gknbs82cfk] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-save[b-gknbs82cfk] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

    .btn-save:hover[b-gknbs82cfk] {
        filter: brightness(1.1);
    }

    .btn-save:disabled[b-gknbs82cfk] {
        opacity: 0.5;
        cursor: not-allowed;
        filter: none;
    }

    .btn-save.is-loading > *[b-gknbs82cfk] {
        visibility: hidden;
    }

    .btn-save.is-loading[b-gknbs82cfk]::after {
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: calc(50% - 0.6rem);
        left: calc(50% - 0.6rem);
        border: 2px solid var(--color-deep-carbon);
        border-top-color: var(--color-accent-gold);
        border-radius: 50%;
        animation: spin-b-gknbs82cfk 0.8s ease-in-out infinite;
    }

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

.loading-text[b-gknbs82cfk] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    padding: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Shared/ImageVersionSelector.razor.rz.scp.css */
.version-selector-wrapper[b-dkbi31id2l] {
    display: flex;
    justify-content: space-between; /* <-- CAMBIADO */
    align-items: flex-end; /* <-- AÑADIDO */
    margin-bottom: 1rem;
    background-color: var(--color-form-background-input-reloj-de-luz);
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-form-border-reloj-de-luz);
}

.version-button[b-dkbi31id2l] {
    flex-grow: 1;
    padding: 0.6rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
    color: var(--color-form-label-reloj-de-luz);
}

    .version-button:hover[b-dkbi31id2l] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

    .version-button.active[b-dkbi31id2l] {
        background-color: var(--color-accent-gold);
        color: var(--color-button-text-save-reloj-de-luz);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

.image-type-selector[b-dkbi31id2l] {
    display: flex;
    gap: 0.5rem;
}

/* --- Estilos para el Toggle 'IsForDownload' --- */

.download-toggle-wrapper[b-dkbi31id2l] {
    display: flex;
    align-items: center;
    /* --- AJUSTE FINO --- */
    position: relative; /* 1. Habilita el posicionamiento manual */
    top: .1rem; /* 2. Empuja el botón 1rem hacia abajo desde su posición original */
    left: .2rem;
}

    /* Ocultamos el checkbox real, usaremos el label para todo */
    .download-toggle-wrapper input[type="checkbox"][b-dkbi31id2l] {
        display: none;
    }

    /* Estilo del label (nuestro botón) */
    .download-toggle-wrapper label[b-dkbi31id2l] {
        font-size: 0.75rem; /* <-- MÁS PEQUEÑO */
        font-weight: 600;
        font-family: 'Montserrat', sans-serif;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem; /* <-- MÁS COMPACTO */
        border-radius: 20px; /* <-- FORMA DE PÍLDORA */
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        user-select: none;
    }

    /* Estilo HOVER (cuando NO está activo) */
    .download-toggle-wrapper input[type="checkbox"]:not(:checked) + label:hover[b-dkbi31id2l] {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* Estilo HOVER (cuando SÍ está activo) */
    .download-toggle-wrapper input[type="checkbox"]:checked + label:hover[b-dkbi31id2l] {
        filter: brightness(1.2); /* Solo aclara un poco el dorado */
    }

    /* Estilo ACTIVO (cuando está marcado) */
    .download-toggle-wrapper input[type="checkbox"]:checked + label[b-dkbi31id2l] {
        background-color: transparent; /* <-- YA NO TIENE FONDO */
        color: var(--color-accent-gold); /* <-- TEXTO DORADO */
        border-color: var(--color-accent-gold); /* <-- BORDE DORADO */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .download-toggle-wrapper label .fa-download[b-dkbi31id2l] {
        font-size: 0.9rem;
    }
/* _content/Ceremony.RelojDeLuz/Shared/ImageViewer.razor.rz.scp.css */
/*
 * ImageViewer.razor.css
 * Versión: Clean Photoshop Style (Sin cajas negras)
*/

/* 1. Contenedor Principal */
.image-viewer-wrapper[b-wkp1jr42hj] {
    position: relative;
    width: 100%;
}

/* 2. Wrappers de Vista */
.image-preview-wrapper[b-wkp1jr42hj] {
    width: 100%;
    height: auto;
    font-family: 'Montserrat', sans-serif;
}

/* 3. Marco de Imagen */
.image-preview-container[b-wkp1jr42hj] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. La Imagen */
.image-preview[b-wkp1jr42hj] {
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease, object-position 0.2s ease, opacity 0.5s ease;
    position: relative;
    z-index: 2;
    opacity: 0;
    display: block;
}

/* 5. Skeleton Loader */
.skeleton-loader[b-wkp1jr42hj] {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #2c2c2c 25%, #444444 50%, #2c2c2c 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-wkp1jr42hj 1.8s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.image-preview-container.loaded .image-preview[b-wkp1jr42hj] {
    opacity: 1;
}

.image-preview-container.loaded .skeleton-loader[b-wkp1jr42hj] {
    opacity: 0;
    pointer-events: none;
}

@keyframes skeleton-loading-b-wkp1jr42hj {
    to {
        background-position: -200% 0;
    }
}

/* 6. Responsive Logic */
.desktop-view[b-wkp1jr42hj] {
    display: none;
}

.mobile-view[b-wkp1jr42hj] {
    display: block;
}

@media (min-width: 768px) {
    .desktop-view[b-wkp1jr42hj] {
        display: block;
    }

    .mobile-view[b-wkp1jr42hj] {
        display: none;
    }
}

/*
========================================================
--- ESTILOS DE TEXTO (ESTILO PHOTOSHOP) ---
========================================================
*/

.overlay-content[b-wkp1jr42hj] {
    max-width: 600px;
    /* ELIMINAMOS LOS MÁRGENES AUTO */
    /* El posicionamiento lo controlan al 100% las clases del padre (.position-xxx) */
    margin: 0;
}

.title-text[b-wkp1jr42hj] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-text-reloj-de-luz, #ffffff); /* Blanco por defecto si falla la variable */
    font-weight: normal;
    margin: 0; /* Eliminamos margen superior para control total vía padding del contenedor */
    line-height: 1.2;
    /* MAGIA DE SOMBRA PHOTOSHOP:
       1. 0 2px 5px rgba(0,0,0,0.9) -> Sombra dura y oscura cerca de la letra (legibilidad).
       2. 0 0 20px rgba(0,0,0,0.6)  -> "Glow" difuso detrás para separar del fondo.
    */
    text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
    /* Tamaño base robusto */
    font-size: 4.5rem;
}

/* Ajustes responsivos para el texto */
@media (max-width: 1568px) {
    .title-text[b-wkp1jr42hj] {
        font-size: 3.5rem;
    }
}

@media (max-width: 1168px) {
    .title-text[b-wkp1jr42hj] {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .title-text[b-wkp1jr42hj] {
        font-size: 2.5rem;
    }
}

/*
========================================================
--- POSICIONAMIENTO DINÁMICO (SIN GRADIENTES) ---
========================================================
*/

/* 7. El Contenedor Overlay (Marco Invisible) */
.image-overlay[b-wkp1jr42hj] {
    position: absolute;
    left: 0;
    top: 0; /* Aseguramos que cubra desde arriba */
    bottom: 0; /* Aseguramos que cubra hasta abajo */
    width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 2.5rem; /* Un poco más de aire */
    box-sizing: border-box;
    pointer-events: none;
    /* IMPORTANTE: Sin background general */
    background: transparent;
}

@media (max-width: 992px) {
    .image-overlay[b-wkp1jr42hj] {
        padding: 1.5rem;
    }
}

/* A continuación, solo usamos Flexbox para mover el texto.
   YA NO hay 'background: linear-gradient'.
*/

/* 9. Bottom Center */
.image-overlay.position-bottom-center[b-wkp1jr42hj] {
    justify-content: flex-end; /* Vertical: Abajo */
    align-items: center; /* Horizontal: Centro */
    text-align: center;
}

/* 10. Top Center */
.image-overlay.position-top-center[b-wkp1jr42hj] {
    justify-content: flex-start; /* Vertical: Arriba */
    align-items: center; /* Horizontal: Centro */
    text-align: center;
}

/* 11. Top Left */
.image-overlay.position-top-left[b-wkp1jr42hj] {
    justify-content: flex-start; /* Vertical: Arriba */
    align-items: flex-start; /* Horizontal: Izquierda */
    text-align: left;
}
    /* Espacio extra para esquivar avatar o iconos en la esquina superior izquierda */
    .image-overlay.position-top-left .overlay-content[b-wkp1jr42hj] {
        padding-top: 4rem;
    }

/* 12. Top Right */
.image-overlay.position-top-right[b-wkp1jr42hj] {
    justify-content: flex-start; /* Vertical: Arriba */
    align-items: flex-end; /* Horizontal: Derecha */
    text-align: right;
}

/* 13. Center (Literal) */
.image-overlay.position-center-center[b-wkp1jr42hj] {
    justify-content: center; /* Vertical: Centro */
    align-items: center; /* Horizontal: Centro */
    text-align: center;
}
/* _content/Ceremony.RelojDeLuz/Shared/InvitationStatusCard.razor.rz.scp.css */
/*
 * InvitationStatusCard.razor.css
 * Estilos para la "escena" de estado de invitación (Efecto Pergamino + QR).
*/

/* --- Contenedor Principal (Centra todo) --- */
.invitation-scene-wrapper[b-pn2cuo4dlb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    width: 100%;
    max-width: 800px; /* Mantiene el ancho máximo del layout */
    margin: 0 auto; /* Centrado */
}

/* --- 1. La Pila de Pergaminos --- */
.parchment-card[b-pn2cuo4dlb] {
    max-width: 700px; /* Ancho del pergamino */
    width: 100%;
    position: relative;
    padding: 2rem; /* Espacio para que las hojas roten */
    perspective: 1000px;
    margin-bottom: 1.5rem;
}

/* Hoja de Papel Principal (La de arriba) */
.parchment-paper[b-pn2cuo4dlb] {
    background-color: #FBF5E6; /* Color pergamino/hueso */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Sombra principal */
    padding: 2rem;
    position: relative;
    z-index: 2;
    transform: rotate(-0.5deg); /* Ligeramente rotada */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(0,0,0,0.1); /* Borde sutil */
}

/* Hojas Falsas (detrás de .parchment-paper) */
.parchment-card[b-pn2cuo4dlb]::before,
.parchment-card[b-pn2cuo4dlb]::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    background-color: #FBF5E6;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hoja del medio */
.parchment-card[b-pn2cuo4dlb]::before {
    z-index: 1;
    transform: translate(6px, 4px) rotate(1.8deg);
}
/* Hoja de abajo */
.parchment-card[b-pn2cuo4dlb]::after {
    z-index: 0;
    transform: translate(12px, 8px) rotate(-1.2deg);
}

/* Animación Hover */
.parchment-card:hover .parchment-paper[b-pn2cuo4dlb] {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.parchment-card:hover[b-pn2cuo4dlb]::before {
    transform: translate(8px, 6px) rotate(2.5deg);
}

.parchment-card:hover[b-pn2cuo4dlb]::after {
    transform: translate(16px, 12px) rotate(-1.8deg);
}


/* --- 2. Contenido del Pergamino --- */
.parchment-content[b-pn2cuo4dlb] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #4a3c2b; /* Color "tinta" café oscuro */
}

.parchment-icon-wrapper[b-pn2cuo4dlb] {
    margin-bottom: 1rem;
}

.parchment-icon[b-pn2cuo4dlb] {
    font-size: 4rem; /* Icono grande */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
    /* Colores por estado */
    .parchment-icon.pending[b-pn2cuo4dlb] {
        color: #795548; /* Café */
    }

    .parchment-icon.accepted[b-pn2cuo4dlb] {
        color: var(--color-success); /* Verde */
    }

    .parchment-icon.declined[b-pn2cuo4dlb] {
        color: var(--color-danger); /* Rojo */
    }

    .parchment-icon.owner[b-pn2cuo4dlb] {
        color: var(--color-accent-gold); /* Dorado */
    }


/* --- 3. Texto de Estado (Debajo de la escena) --- */
.scene-status-text[b-pn2cuo4dlb] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
}
    /* Colores de texto por estado */
    .scene-status-text.status-owner[b-pn2cuo4dlb] {
        color: #4a3c2b; /* Tinta normal */
    }

    .scene-status-text.status-accepted[b-pn2cuo4dlb] {
        color: #1a682c; /* Verde oscuro */
    }

    .scene-status-text.status-pending[b-pn2cuo4dlb] {
        color: #795548; /* Café */
    }

    .scene-status-text.status-declined[b-pn2cuo4dlb] {
        color: #7a2126; /* Rojo oscuro */
    }


/* --- 4. Botones de Acción (Aceptar/Rechazar) --- */
.form-actions[b-pn2cuo4dlb] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.1); /* Separador sutil en el pergamino */
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.btn-save[b-pn2cuo4dlb], .btn-cancel[b-pn2cuo4dlb] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 140px; /* Ancho mínimo */
    flex-grow: 1;
}

.btn-save[b-pn2cuo4dlb] {
    /* Botón Aceptar (estilo primario, café) */
    background-color: #795548;
    color: #fdfdfa; /* Color papel */
    position: relative;
    border: 1px solid #795548;
}

    .btn-save:hover[b-pn2cuo4dlb] {
        background-color: #5d4037;
        border-color: #5d4037;
    }

.btn-cancel[b-pn2cuo4dlb] {
    /* Botón Rechazar (estilo secundario, borde café) */
    background-color: transparent;
    color: #795548;
    border: 1px solid #795548;
}

    .btn-cancel:hover[b-pn2cuo4dlb] {
        background-color: rgba(121, 85, 72, 0.1);
    }

    .btn-save:disabled[b-pn2cuo4dlb], .btn-cancel:disabled[b-pn2cuo4dlb] {
        opacity: 0.7;
        cursor: not-allowed;
        filter: brightness(0.9);
    }

    /* Spinner */
    .btn-save .spinner-border[b-pn2cuo4dlb],
    .btn-cancel .spinner-border[b-pn2cuo4dlb] {
        width: 1.2em;
        height: 1.2em;
        border-width: .2em;
    }

    .btn-save:disabled:has(.spinner-border) i[b-pn2cuo4dlb],
    .btn-save:disabled:has(.spinner-border) span[b-pn2cuo4dlb],
    .btn-cancel:disabled:has(.spinner-border) i[b-pn2cuo4dlb],
    .btn-cancel:disabled:has(.spinner-border) span[b-pn2cuo4dlb] {
        visibility: hidden;
    }

/* --- 5. [NUEVO] Wrapper para el QR Code --- */
.qr-code-wrapper[b-pn2cuo4dlb] {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.1); /* Separador sutil */
}

.qr-code-placeholder[b-pn2cuo4dlb] {
    width: 150px; /* QR un poco más pequeño */
    height: 150px;
    background-color: white; /* Fondo blanco para el QR */
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: #333; /* Icono oscuro sobre fondo blanco */
    padding: 10px; /* Espacio por si el QR real no tiene márgenes */
    box-sizing: border-box; /* Asegurar que el padding esté incluido */
}

.qr-label[b-pn2cuo4dlb] {
    color: #795548; /* Color tinta */
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.text-muted[b-pn2cuo4dlb] {
    color: #795548; /* Color tinta */
    opacity: 0.8;
}

/* Ocultar elementos de estado (el HTML anterior) si aún existen */
.status-display[b-pn2cuo4dlb], h4[b-pn2cuo4dlb] {
    display: none;
}
/* _content/Ceremony.RelojDeLuz/Shared/InviteLinkCard.razor.rz.scp.css */
/*
 * InviteLinkCard.razor.css
 * Estilos para el panel "Invitar a Más" (Estilo Pergamino).
*/

/* --- Contenedor Principal (Centra todo) --- */
.invitation-scene-wrapper[b-z002a7jlqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 1. La Pila de Pergaminos --- */
.parchment-card[b-z002a7jlqx] {
    max-width: 700px;
    width: 100%;
    position: relative;
    padding: 2rem;
    perspective: 1000px;
}

/* Hoja de Papel Principal (La de arriba) */
.parchment-paper[b-z002a7jlqx] {
    background-color: #FBF5E6; /* Color pergamino/hueso */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding: 2rem;
    position: relative;
    z-index: 2;
    transform: rotate(-0.2deg);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(0,0,0,0.1);
}

/* Hojas Falsas (detrás de .parchment-paper) */
.parchment-card[b-z002a7jlqx]::before,
.parchment-card[b-z002a7jlqx]::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    background-color: #FBF5E6;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hoja del medio */
.parchment-card[b-z002a7jlqx]::before {
    z-index: 1;
    transform: translate(6px, 4px) rotate(1.8deg);
}
/* Hoja de abajo */
.parchment-card[b-z002a7jlqx]::after {
    z-index: 0;
    transform: translate(12px, 8px) rotate(-1.2deg);
}

/* Animación Hover */
.parchment-card:hover .parchment-paper[b-z002a7jlqx] {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.parchment-card:hover[b-z002a7jlqx]::before {
    transform: translate(8px, 6px) rotate(2.5deg);
}

.parchment-card:hover[b-z002a7jlqx]::after {
    transform: translate(16px, 12px) rotate(-1.8deg);
}


/* --- 2. Contenido del Pergamino --- */
.parchment-content[b-z002a7jlqx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #4a3c2b; /* Color "tinta" café oscuro */
}

/* Título H4 (del panel de invitación y lista) */
.parchment-title[b-z002a7jlqx] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Línea separadora café */
    font-family: 'Montserrat', sans-serif;
    color: #4a3c2b;
    font-weight: 500;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.25rem;
}

    .parchment-title .icon-gold[b-z002a7jlqx] {
        color: var(--color-accent-gold);
        margin-right: 0.75rem;
        font-size: 1rem;
    }

    .parchment-title.separator[b-z002a7jlqx] {
        margin-top: 2rem;
    }


/* --- 3. Sección Invitar a Más --- */
.invite-section[b-z002a7jlqx] {
    width: 100%;
}

.parchment-text[b-z002a7jlqx] {
    font-family: 'Montserrat', sans-serif;
    color: #795548; /* Café */
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

    .parchment-text strong[b-z002a7jlqx] {
        color: #4a3c2b;
        font-weight: 600;
    }

    .parchment-text.text-muted[b-z002a7jlqx] {
        font-style: italic;
    }

/* --- (INICIO) NUEVOS ESTILOS PARA GENERADOR DE TOKENS --- */

.generate-controls[b-z002a7jlqx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    text-align: left;
}

.form-group[b-z002a7jlqx] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-z002a7jlqx] {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.8rem;
        color: #795548;
        margin-bottom: 0.25rem;
    }

/* Estilo para .form-control (select e input) dentro del pergamino */
.form-control[b-z002a7jlqx] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: #4a3c2b;
    background-color: rgba(255,255,255,0.4);
    border: 1px solid rgba(121, 85, 72, 0.3); /* Borde café */
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-z002a7jlqx] {
        outline: none;
        border-color: #795548;
        box-shadow: 0 0 0 2px rgba(121, 85, 72, 0.2);
    }

/* Contenedor para los botones de generar */
.form-actions-generate[b-z002a7jlqx] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-generate[b-z002a7jlqx],
.btn-generate-manual[b-z002a7jlqx] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-grow: 1;
}

/* Botón "Generar y Enviar" (Primario) */
.btn-generate[b-z002a7jlqx] {
    background-color: #795548;
    color: #fdfdfa;
    border: 1px solid #795548;
}

    .btn-generate:hover[b-z002a7jlqx] {
        background-color: #5d4037;
        border-color: #5d4037;
    }

/* Botón "Generar Enlace" (Secundario) */
.btn-generate-manual[b-z002a7jlqx] {
    background-color: transparent;
    color: #795548;
    border: 1px solid #795548;
}

    .btn-generate-manual:hover[b-z002a7jlqx] {
        background-color: rgba(121, 85, 72, 0.1);
    }

    .btn-generate:disabled[b-z002a7jlqx],
    .btn-generate-manual:disabled[b-z002a7jlqx] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Wrapper para el enlace generado */
.generated-link-wrapper[b-z002a7jlqx] {
    margin-top: 1.5rem;
    max-width: 450px;
    width: 100%;
}

/* Texto de error */
.text-danger[b-z002a7jlqx] {
    color: #7a2126; /* Rojo oscuro */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.mt-2[b-z002a7jlqx] {
    margin-top: 0.5rem !important; /* (Bootstrap override) */
}

/* --- (FIN) NUEVOS ESTILOS PARA GENERADOR DE TOKENS --- */


/* Contenedor para el input y el botón de copiar (reusado para el enlace generado) */
.input-with-button[b-z002a7jlqx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* Input (estilo claro para el pergamino) */
    .input-with-button .form-control[b-z002a7jlqx] {
        flex-grow: 1;
        cursor: text;
    }

    /* Botón de copiar (estilo café) */
    .input-with-button .btn-icon[b-z002a7jlqx] {
        background: #795548; /* Café */
        border: 1px solid #795548;
        color: #fdfdfa; /* Color papel */
        border-radius: 5px;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all .2s ease;
        flex-shrink: 0;
    }

        .input-with-button .btn-icon:hover[b-z002a7jlqx] {
            background-color: #5d4037;
            border-color: #5d4037;
        }

        .input-with-button .btn-icon.is-copied[b-z002a7jlqx] {
            background-color: var(--color-success);
            border-color: var(--color-success);
            color: white;
            cursor: default;
        }

/* --- 4. Sección Lista de Invitados --- */
.guest-list-section[b-z002a7jlqx] {
    width: 100%;
}

.invitation-list[b-z002a7jlqx] {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgba(255,255,255,0.4);
    border-radius: 8px;
    border: 1px solid rgba(121, 85, 72, 0.3);
}

.list-item[b-z002a7jlqx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(121, 85, 72, 0.2); /* Separador café */
    font-family: 'Montserrat', sans-serif;
    color: #4a3c2b;
    flex-wrap: wrap;
}

    .list-item:last-child[b-z002a7jlqx] {
        border-bottom: none;
    }

    .list-item.empty-item[b-z002a7jlqx] {
        color: #888;
        font-style: italic;
        font-size: 0.9rem;
    }

.item-title[b-z002a7jlqx] {
    flex-grow: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-status[b-z002a7jlqx] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
}

/* Colores de Estado (Roles) */
.status-protagonista[b-z002a7jlqx] {
    background-color: rgba(185, 154, 95, 0.2);
    color: #5d4037;
}

.status-organizador[b-z002a7jlqx] {
    background-color: rgba(13, 202, 240, 0.2);
    color: #055160;
}

/* (NUEVO) */
.status-invitado[b-z002a7jlqx] {
    background-color: rgba(108, 117, 125, 0.2);
    color: #5a6268;
}

/* (NUEVO) */
.status-acompañante[b-z002a7jlqx] {
    background-color: rgba(25, 135, 84, 0.2); /* Verde */
    color: #0f5132;
}

/* (NUEVO) */
.status-pending[b-z002a7jlqx] {
    background-color: rgba(255, 193, 7, 0.2); /* Amarillo/Alerta */
    color: #664d03;
    font-style: italic;
}

/* (RENOMBRADO) - Mantenemos 'participante' por si acaso,
   pero 'invitado' es el nuevo estándar */
.status-participante[b-z002a7jlqx] {
    background-color: rgba(108, 117, 125, 0.2);
    color: #5a6268;
}
/* _content/Ceremony.RelojDeLuz/Shared/LightboxViewer.razor.rz.scp.css */
/*
 * LightboxViewer.razor.css
 */

/* 1. Wrapper Principal */
.lightbox-wrapper[b-8ay4qe569e] {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000; /* Fondo negro puro para máxima inmersión */
}

/* 2. Control de Vistas (Desktop vs Mobile) */
.lightbox-view[b-8ay4qe569e] {
    width: 100%;
    height: 100%;
}

/* Lógica de visualización responsive (idéntica a ImageViewer) */
.desktop-view[b-8ay4qe569e] {
    display: none;
}

.mobile-view[b-8ay4qe569e] {
    display: block;
}

@media (min-width: 768px) {
    .desktop-view[b-8ay4qe569e] {
        display: block;
    }

    .mobile-view[b-8ay4qe569e] {
        display: none;
    }
}

/* 3. Contenedor de la Imagen */
.lightbox-container[b-8ay4qe569e] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    overflow: hidden;
}

/* 4. La Imagen "Purista" */
.lightbox-image[b-8ay4qe569e] {
    /* Ocupar todo el espacio posible... */
    width: 100%;
    height: 100%;
    /* ...PERO respetar la proporción original sin recortar nada. */
    object-fit: contain;
    opacity: 0; /* Para el efecto de carga */
    transition: opacity 0.3s ease-in;
    position: relative;
    z-index: 2;
    display: block;
}

/* 5. Skeleton Loader (Estética consistente) */
.skeleton-loader[b-8ay4qe569e] {
    position: absolute;
    inset: 0;
    /* Un gris muy oscuro, sutil sobre el fondo negro */
    background: linear-gradient(110deg, #1a1a1a 25%, #333333 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-8ay4qe569e 1.8s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

@keyframes skeleton-loading-b-8ay4qe569e {
    to {
        background-position: -200% 0;
    }
}

/* 6. Estado "Cargado" */
.lightbox-container.loaded .lightbox-image[b-8ay4qe569e] {
    opacity: 1;
}

.lightbox-container.loaded .skeleton-loader[b-8ay4qe569e] {
    opacity: 0;
    pointer-events: none;
}
/* _content/Ceremony.RelojDeLuz/Shared/LoadingScreen.razor.rz.scp.css */
/* Fondo de inmersión total */
.luxury-loader-overlay[b-tu1l360exq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Encima de todo */
    overflow: hidden;
}

.loader-content[b-tu1l360exq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- EL RELOJ SOLAR --- */
.sun-clock[b-tu1l360exq] {
    width: 120px;
    height: 120px;
    position: relative;
    margin-bottom: 2rem;
}

/* Anillo Exterior */
.orbit-ring[b-tu1l360exq] {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(192, 164, 124, 0.3); /* Dorado transparente */
    border-top: 2px solid var(--color-accent-gold); /* Acento brillante */
    border-radius: 50%;
    animation: spin-b-tu1l360exq 3s linear infinite;
    box-shadow: 0 0 15px rgba(192, 164, 124, 0.1);
}

    /* Anillo Interior (Gira al revés) */
    .orbit-ring.inner[b-tu1l360exq] {
        inset: 15px;
        border: 1px solid rgba(192, 164, 124, 0.2);
        border-bottom: 2px solid #fff; /* Contraste blanco sutil */
        animation: spin-reverse-b-tu1l360exq 4s linear infinite;
    }

/* Núcleo de Luz (El Sol) */
.sun-core[b-tu1l360exq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--color-accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 20px 5px var(--color-accent-gold);
    animation: pulse-glow-b-tu1l360exq 2s ease-in-out infinite;
}

/* Rayos de Luz (Efecto sutil) */
.light-rays[b-tu1l360exq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(192,164,124,0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: breathe-b-tu1l360exq 3s ease-in-out infinite;
}

/* --- TIPOGRAFÍA --- */
.loading-title[b-tu1l360exq] {
    font-family: 'Great Vibes', cursive;
    color: var(--color-accent-gold);
    font-size: 2.5rem;
    margin: 0;
    opacity: 0;
    animation: fadeInUp-b-tu1l360exq 1s ease-out forwards 0.5s; /* Aparece suavemente */
}

.loading-message[b-tu1l360exq] {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-label-reloj-de-luz);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    letter-spacing: 1px;
    min-height: 1.5em; /* Evita saltos si el texto cambia de tamaño */
    text-align: center;
    animation: textFade-b-tu1l360exq 2.5s infinite; /* Coincide con el timer de C# */
}

/* --- ANIMACIONES --- */
@keyframes spin-b-tu1l360exq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse-b-tu1l360exq {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes pulse-glow-b-tu1l360exq {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
}

@keyframes breathe-b-tu1l360exq {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.3;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
    }
}

@keyframes fadeInUp-b-tu1l360exq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textFade-b-tu1l360exq {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/LocationMapPopover.razor.rz.scp.css */
/*
 * LocationMapPopover.razor.css
 * Estilos para el popover del visor de mapas.
*/

.popover-overlay[b-u1dqfjkj15] {
    position: fixed;
    inset: 0;
    z-index: 1050; /* Un z-index alto para estar sobre todo */
    background-color: rgba(0, 0, 0, 0.7); /* Ligeramente más oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-u1dqfjkj15 0.3s ease;
}

.popover-content-wrapper[b-u1dqfjkj15] {
    width: 100%;
    max-width: 900px; /* Ancho generoso para el mapa */
    max-height: 90vh; /* Altura máxima */
    background-color: var(--color-dark-carbon, #222); /* Fondo oscuro */
    border-radius: 16px;
    border: 1px solid var(--color-section-border-reloj-de-luz, #444);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Importante para los bordes redondeados */
    animation: scaleUp-b-u1dqfjkj15 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Encabezado del Popover --- */
.popover-header[b-u1dqfjkj15] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz, #444);
    flex-shrink: 0; /* Evita que se encoja */
}

    .popover-header h4[b-u1dqfjkj15] {
        margin: 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 1.2rem;
        color: var(--color-text-reloj-de-luz, #eee);
    }

/* --- Cuerpo del Popover (donde va el mapa) --- */
.popover-body[b-u1dqfjkj15] {
    padding: 0; /* Sin padding, para que el mapa ocupe todo */
    position: relative;
    overflow: hidden;
    /* Hacemos que el cuerpo sea flexible si el contenido es flexible */
    display: flex;
    flex: 1;
    min-height: 0; /* Ayuda a flexbox a calcular bien la altura */
}

    /* Hacemos que el componente del mapa se estire */
    .popover-body[b-u1dqfjkj15]  .map-viewer-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%; /* El wrapper ocupa todo el espacio */
        min-height: 500px; /* Altura mínima para el popover */
        border: none; /* Quitamos bordes del componente hijo */
        border-radius: 0;
        background-color: transparent;
    }

    .popover-body[b-u1dqfjkj15]  .map-container {
        flex-grow: 1; /* El mapa ocupa todo el espacio restante */
        height: auto; /* Dejar que flex-grow maneje la altura */
    }


/* --- Pie de Página del Popover (para botón Guardar) --- */
.popover-footer[b-u1dqfjkj15] {
    display: flex;
    justify-content: flex-end; /* Botón a la derecha */
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz, #444);
    background-color: rgba(0,0,0,0.2); /* Fondo sutil */
    flex-shrink: 0;
}

/* Botón de Guardar (estilo copiado de otros editores) */
.btn-save[b-u1dqfjkj15] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative;
}

    .btn-save:hover[b-u1dqfjkj15] {
        filter: brightness(1.1);
    }

    /* (Spinner para el botón de guardar) */
    .btn-save .spinner-border[b-u1dqfjkj15] {
        width: 1.2em; /* Ajustar tamaño del spinner */
        height: 1.2em;
        border-width: .2em; /* Grosor del spinner */
    }

    .btn-save span[b-u1dqfjkj15] {
        margin-left: 0.5rem;
    }


/* --- Botón de Cierre --- */
.btn-close[b-u1dqfjkj15] {
    width: 28px;
    height: 28px;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-close:hover[b-u1dqfjkj15] {
        background-color: var(--color-accent-gold);
        color: white;
    }


/* --- Animaciones --- */
@keyframes fadeIn-b-u1dqfjkj15 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp-b-u1dqfjkj15 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/LocationMapViewer.razor.rz.scp.css */
/*
 * LocationMapViewer.razor.css
 * Estilos para el componente de visor de mapas de Google.
*/

.map-viewer-wrapper[b-x4zxc36qss] {
    position: relative;
    width: 100%;
    border-radius: 8px; /* Redondear todo el contenedor */
    overflow: hidden; /* Asegurar que el mapa no se salga */
    border: 1px solid var(--color-section-border-reloj-de-luz);
    background-color: var(--color-dark-carbon);
}

/* --- Controles de Búsqueda (Parte de prueba) --- */
.map-search-controls[b-x4zxc36qss] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background-color: rgba(0,0,0,0.2); /* Fondo ligeramente distinto */
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

/* --- NUEVO: Wrapper para el Input y el Botón 'X' --- */
.map-search-input-wrapper[b-x4zxc36qss] {
    position: relative;
    flex-grow: 1; /* Ocupa el espacio */
    display: flex;
}

.map-search-input[b-x4zxc36qss] {
    flex-grow: 1;
    /* Reutilizamos estilos de ::deep .form-control */
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    /* Dejar espacio para el botón 'X' */
    padding-right: 2.5rem;
}

    .map-search-input:focus[b-x4zxc36qss] {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

/* --- NUEVO: Botón 'X' para limpiar búsqueda --- */
.btn-clear-search[b-x4zxc36qss] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem; /* 40px */
    border: none;
    background-color: transparent;
    color: var(--color-form-label-reloj-de-luz);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .btn-clear-search:hover[b-x4zxc36qss] {
        color: var(--color-danger);
    }
/* --- FIN NUEVO --- */

.btn-map-search[b-x4zxc36qss] {
    /* Reutilizamos estilos de .btn-save */
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
}

    .btn-map-search:hover[b-x4zxc36qss] {
        filter: brightness(1.1);
    }


/* --- Contenedor del Mapa --- */
.map-container[b-x4zxc36qss] {
    position: relative;
    width: 100%;
    height: 400px; /* <-- ALTURA FIJA PARA EL MAPA (Puedes ajustarla) */
    background-color: #222; /* Color de fondo mientras carga */
}

/* Placeholder de carga (opcional) */
.map-loader[b-x4zxc36qss] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}

/* Ocultar el loader una vez que Google Maps se inicializa */
.map-container > .gm-style[b-x4zxc36qss] { /* gm-style es la clase que Google Maps añade */
    /* Hacemos que el loader desaparezca */
    background-color: transparent;
}

    .map-container > .gm-style .map-loader[b-x4zxc36qss] {
        display: none;
    }

/*
 * Corrección para el autocompletado de Google Places
 * (A veces necesita estilos globales o ::deep para verse bien en temas oscuros)
*/
[b-x4zxc36qss] .pac-container {
    background-color: var(--color-dark-carbon, #2c2c34);
    border: 1px solid var(--color-section-border-reloj-de-luz, #444);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 2000 !important; /* Asegurar que se vea sobre el popover si aplica */
}

[b-x4zxc36qss] .pac-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--color-text-reloj-de-luz, #eee);
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz, #444);
    font-family: 'Montserrat', sans-serif;
}

    [b-x4zxc36qss] .pac-item:last-child {
        border-bottom: none;
    }

    [b-x4zxc36qss] .pac-item:hover,
    [b-x4zxc36qss] .pac-item-selected {
        background-color: var(--color-accent-gold, #b99a5f);
        color: var(--color-button-text-save-reloj-de-luz, #111);
    }

[b-x4zxc36qss] .pac-item-query {
    font-weight: 600;
}
/* _content/Ceremony.RelojDeLuz/Shared/MainLayout.razor.rz.scp.css */
/*
  Aplica 'user-select: none' a componentes clave de la interfaz.
  Esto previene que el texto del men� y del carrusel pueda ser
  seleccionado por el usuario, mejorando la experiencia.
*/
[b-ch4c2kebpf] header,
[b-ch4c2kebpf] .hero-carousel {
    -webkit-user-select: none; /* Para navegadores Safari */
    -ms-user-select: none; /* Para Internet Explorer 10+ */
    user-select: none; /* Sintaxis est�ndar */
}
/* _content/Ceremony.RelojDeLuz/Shared/ManageProtagonistsForm.razor.rz.scp.css */
/* ManageProtagonistsForm.razor.css */

/* === Estilos para la Lista de Checkboxes (Tema Oscuro) === */
.checkbox-list[b-ek9q32n996] {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--color-form-border-check-list-reloj-de-luz); /* Borde sutil oscuro */
    border-radius: 4px;
    padding: 0.5rem;
    background-color: var(--color-form-background-chek-list-reloj-de-luz); /* Fondo de input oscuro */
}

.form-check[b-ek9q32n996] {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: transparent; /* Fondo transparente por defecto */
    border-radius: 4px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: 1px solid transparent;
}

    .form-check:last-child[b-ek9q32n996] {
        margin-bottom: 0;
    }

    .form-check:hover[b-ek9q32n996] {
        background-color: var(--color-form-background-chek-hover-reloj-de-luz); /* Fondo sutil al pasar el mouse */
        border-color: var(--color-form-border-check-reloj-de-luz);
    }

/* Estilo moderno para los checkboxes */
[b-ek9q32n996] .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0;
    accent-color: var(--color-form-background-chek-active-reloj-de-luz); /* Color del checkmark */
    background-color: var(--color-form-background-chek-active-back-reloj-de-luz);
    border: 1px solid var(--color-form-border-check-active-reloj-de-luz);
    border-radius: 3px;
}

.form-check-label[b-ek9q32n996] {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--color-form-label-check-reloj-de-luz); /* Texto claro */
}
/* _content/Ceremony.RelojDeLuz/Shared/ManageStoriesForm.razor.rz.scp.css */
/* ManageStoriesForm.razor.css */

/* === Estilos para la Sección de Historias (Tema Oscuro) === */
.stories-section[b-4cuzru4d5l] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
}

.section-header[b-4cuzru4d5l] {
    text-align: center;
    margin-bottom: 2.5rem;
}

    .section-header h3[b-4cuzru4d5l] {
        font-weight: 600;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.75rem;
        margin: 0;
        color: var(--color-text-reloj-de-luz);
    }

    .section-header p[b-4cuzru4d5l] {
        margin-top: 0.25rem;
        color: #A0A0A0; /* Gris claro para texto secundario */
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

.stories-grid[b-4cuzru4d5l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.story-card[b-4cuzru4d5l] {
    background-color: var(--color-sidebar-background-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .story-card:hover[b-4cuzru4d5l] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

.card-header[b-4cuzru4d5l], .card-body[b-4cuzru4d5l], .card-footer[b-4cuzru4d5l] {
    padding: 1.25rem;
}

.card-header[b-4cuzru4d5l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

.story-date[b-4cuzru4d5l] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #A0A0A0;
    background-color: #2a2a2a;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.card-body[b-4cuzru4d5l] {
    flex-grow: 1;
}

.story-title[b-4cuzru4d5l] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
}

.story-location[b-4cuzru4d5l] {
    margin: 0;
    color: #A0A0A0;
    font-size: 0.9rem;
}

.card-footer[b-4cuzru4d5l] {
    border-top: 1px solid var(--color-section-border-reloj-de-luz);
}

.btn-manage-gallery[b-4cuzru4d5l] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.6rem 1rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

    .btn-manage-gallery:hover[b-4cuzru4d5l] {
        opacity: 0.9;
    }

.add-story-card[b-4cuzru4d5l] {
    border: 2px dashed #363636;
    background-color: transparent;
    color: #A0A0A0;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    cursor: pointer;
}

    .add-story-card:hover[b-4cuzru4d5l] {
        border-color: var(--color-accent-gold);
        color: var(--color-accent-gold);
        background-color: #1A1A1A;
    }

.add-icon[b-4cuzru4d5l] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.add-text[b-4cuzru4d5l] {
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

/* _content/Ceremony.RelojDeLuz/Shared/ManageTab.razor.rz.scp.css */
/*
 * ManageTab.razor.css
 * (ACTUALIZADO)
 * Estilos para la pestaña "Gestionar" (Tema Oscuro),
 * ahora incluye la "mini-vista" del historial de solicitudes.
*/

/* --- 1. Layout Básico (Copiado de RequestCeremony) --- */

.stacked-panel[b-1rov8w8gu8] {
    width: 100%;
}

/* Panel de formulario oscuro */
.form-section[b-1rov8w8gu8] {
    max-width: 800px;
    width: 100%;
    background-color: var(--color-dark-carbon);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    padding: 2rem;
}

/* --- 2. Estilos de Texto y Títulos (Copiado de RequestCeremony) --- */
h4[b-1rov8w8gu8] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

.text-muted[b-1rov8w8gu8] {
    color: var(--color-form-label-reloj-de-luz);
}

/* --- 3. Estilos de Formulario (Copiado de RequestCeremony) --- */

.form-group[b-1rov8w8gu8] {
    margin-bottom: 1.5rem;
}

.generate-controls-dark[b-1rov8w8gu8] {
    width: 100%;
    max-width: 450px;
}

[b-1rov8w8gu8] label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-form-label-reloj-de-luz);
}

[b-1rov8w8gu8] .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz);
    background-color: var(--color-form-background-input-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

    [b-1rov8w8gu8] .form-control:focus {
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
    }

[b-1rov8w8gu8] .validation-message {
    color: var(--color-danger);
    font-size: .8rem;
    margin-top: .25rem;
}


/* --- 4. Botones (Copiado de RequestCeremony) --- */

.form-actions[b-1rov8w8gu8] {
    margin-top: 1rem;
    padding-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-cancel[b-1rov8w8gu8], .btn-save[b-1rov8w8gu8] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-1rov8w8gu8] {
    background-color: var(--color-button-background-cancel-reloj-de-luz);
    color: var(--color-button-text-cancel-reloj-de-luz);
}

    .btn-cancel:hover[b-1rov8w8gu8] {
        background-color: var(--color-button-background-cancel-hover-reloj-de-luz);
    }

.btn-save[b-1rov8w8gu8] {
    background-color: var(--color-button-background-save-reloj-de-luz);
    color: var(--color-button-text-save-reloj-de-luz);
    position: relative;
}

    .btn-save:hover[b-1rov8w8gu8] {
        filter: brightness(1.1);
    }

    /* Spinner (copiado) */
    .btn-save.is-loading[b-1rov8w8gu8],
    .btn-save:disabled:has(.spinner-border)[b-1rov8w8gu8],
    .btn-cancel:disabled:has(.spinner-border)[b-1rov8w8gu8] {
        cursor: not-allowed;
        filter: brightness(0.9);
    }

        .btn-save.is-loading > *[b-1rov8w8gu8],
        .btn-save:disabled:has(.spinner-border) > *[b-1rov8w8gu8],
        .btn-cancel:disabled:has(.spinner-border) > *[b-1rov8w8gu8] {
            visibility: hidden;
        }

        .btn-save.is-loading[b-1rov8w8gu8]::after {
            content: '';
            position: absolute;
            width: 1.2rem;
            height: 1.2rem;
            top: calc(50% - 0.6rem);
            left: calc(50% - 0.6rem);
            border: 2px solid var(--color-deep-carbon);
            border-top-color: var(--color-accent-gold);
            border-radius: 50%;
            animation: spin-b-1rov8w8gu8 0.8s ease-in-out infinite;
        }

.spinner-border-sm[b-1rov8w8gu8] {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: -0.125em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-1rov8w8gu8 0.75s linear infinite;
}

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


/* --- 5. Input + Botón de Copiar (Tema Oscuro) --- */

.input-with-button-dark[b-1rov8w8gu8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .input-with-button-dark .form-control[b-1rov8w8gu8] {
        flex-grow: 1;
        cursor: text;
    }

/* Botón de ícono (copiado de MyRequests.razor.css) */
.btn-icon-dark[b-1rov8w8gu8] {
    background: 0 0;
    border: 1px solid var(--color-form-border-reloj-de-luz);
    border-radius: 5px;
    width: 44px;
    height: 44px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    color: #a0a0a0;
    /* (NUEVO) Ajustes para NavLink */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

    .btn-icon-dark:hover[b-1rov8w8gu8] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

    .btn-icon-dark.is-copied[b-1rov8w8gu8] {
        color: var(--color-white);
        background-color: var(--bs-success);
        border-color: var(--bs-success);
        cursor: default;
    }

    .btn-icon-dark:disabled[b-1rov8w8gu8] {
        cursor: default;
    }


/* --- 6. (NUEVO) "Mini-Vista" - Historial de Solicitudes --- */

.request-history-wrapper[b-1rov8w8gu8] {
    margin-top: 2rem;
    /* Usamos 'label' (de ::deep) para el título */
}

/* La lista (con scroll) */
.request-list[b-1rov8w8gu8] {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--color-form-background-input-reloj-de-luz);
    border-radius: 8px;
    border: 1px solid var(--color-form-border-reloj-de-luz);
    max-height: 300px; /* Tu "scroll que limite la altura" */
    overflow-y: auto;
}

/* El ítem de la lista */
.request-list-item[b-1rov8w8gu8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    flex-wrap: wrap;
}

    .request-list-item:last-child[b-1rov8w8gu8] {
        border-bottom: none;
    }

    .request-list-item.empty-item[b-1rov8w8gu8] {
        color: var(--color-form-label-reloj-de-luz);
        font-style: italic;
        font-size: 0.9rem;
    }

.request-details[b-1rov8w8gu8] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

    .request-details i[b-1rov8w8gu8] {
        color: var(--color-accent-gold);
    }

    .request-details .text-muted[b-1rov8w8gu8] {
        font-size: 0.85rem;
    }

/* Insignias de estado (Copiadas de MyRequests.razor.css) */
.request-status-badge[b-1rov8w8gu8] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
    text-transform: capitalize;
}

.status-aprobada[b-1rov8w8gu8] {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--bs-green);
}

.status-pendiente[b-1rov8w8gu8] {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--bs-yellow);
}

.status-rechazada[b-1rov8w8gu8] {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--bs-danger);
}

.status-creacion[b-1rov8w8gu8] {
    background-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-info);
}

.status-edicion[b-1rov8w8gu8] {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--color-form-label-reloj-de-luz);
}
/* _content/Ceremony.RelojDeLuz/Shared/MyScheduleCard.razor.rz.scp.css */
/*
 * UpcomingCard.razor.css
 * (VERSIÓN COMPLETA Y CORREGIDA)
 * Contiene todos los estilos del cuaderno Y los estilos
 * para .btn-action (Aceptar/Rechazar/Unirse) y los
 * badges de estado (ej. .status-accepted).
*/

.font-montserrat[b-xpjjsd4bva] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-xpjjsd4bva], .empty-text[b-xpjjsd4bva] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- Layout Apilado (Centra el Cuaderno) --- */
.stacked-panel[b-xpjjsd4bva] {
    width: 100%;
}

/* --- Estilos del Cuaderno/Agenda --- */

/* 1. La Tarjeta Contenedora */
.agenda-card[b-xpjjsd4bva] {
    max-width: 800px;
    position: relative;
    padding: 1.5rem;
    background-color: transparent;
    border: none;
    perspective: 1000px;
}

/* 2. La Hoja de Papel Principal */
.agenda-paper[b-xpjjsd4bva] {
    background-color: #fdfdfa; /* Color papel hueso */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    z-index: 2;
    transform: rotate(-0.2deg);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Hojas Falsas (detrás) */
.agenda-card[b-xpjjsd4bva]::before,
.agenda-card[b-xpjjsd4bva]::after {
    content: '';
    position: absolute;
    inset: 1.5rem;
    background-color: #fdfdfa;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.agenda-card[b-xpjjsd4bva]::before {
    z-index: 1;
    transform: translate(8px, 6px) rotate(1.5deg);
}

.agenda-card[b-xpjjsd4bva]::after {
    z-index: 0;
    transform: translate(14px, 10px) rotate(-1.2deg);
}

/* 4. Animación Hover */
.agenda-card:hover .agenda-paper[b-xpjjsd4bva] {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.agenda-card:hover[b-xpjjsd4bva]::before {
    transform: translate(10px, 8px) rotate(1.8deg);
}

.agenda-card:hover[b-xpjjsd4bva]::after {
    transform: translate(18px, 14px) rotate(-1.5deg);
}

/* 5. El Contenido (con la línea roja) */
.agenda-content[b-xpjjsd4bva] {
    position: relative;
}

    .agenda-content[b-xpjjsd4bva]::before {
        content: '';
        position: absolute;
        left: -2rem;
        top: -1rem;
        bottom: -1rem;
        width: 1px;
        background-color: rgba(255, 0, 0, 0.4);
    }

/* --- Estilos del Contenido de la Agenda --- */

.agenda-title[b-xpjjsd4bva] {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    color: #2c3e50;
    margin: 0.5rem 0 1rem 0;
    font-weight: normal;
}

    .agenda-title.separator[b-xpjjsd4bva] {
        padding-top: 1rem;
        border-top: 2px dashed rgba(0,0,0,0.1);
        margin-top: 2rem;
    }

.invitation-list[b-xpjjsd4bva] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item[b-xpjjsd4bva] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(0, 150, 255, 0.2);
    font-family: 'Montserrat', sans-serif;
    color: #333;
    flex-wrap: wrap;
}

    .list-item:last-child[b-xpjjsd4bva] {
        border-bottom: none;
    }

    .list-item.empty-item[b-xpjjsd4bva] {
        color: #888;
        font-style: italic;
        font-size: 0.9rem;
    }

.item-date[b-xpjjsd4bva] {
    font-weight: 600;
    flex-basis: 75px; /* (Reducido para dar espacio a botones) */
    flex-shrink: 0;
    color: #555;
    font-size: 0.9rem;
}

.item-title[b-xpjjsd4bva] {
    flex-grow: 1; /* Ocupa el espacio disponible */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 100px; /* Asegura que no colapse */
}

.item-status[b-xpjjsd4bva] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
}

.item-link[b-xpjjsd4bva] {
    font-size: 1rem;
    color: #555;
    transition: color 0.2s ease;
    flex-shrink: 0;
    margin-left: auto; /* (NUEVO) Empuja el ojo a la derecha */
}

    .item-link:hover[b-xpjjsd4bva] {
        color: var(--color-accent-gold);
    }

/* --- (PULIDO) Botones de Acción --- */
.btn-action[b-xpjjsd4bva] {
    padding: 0.4rem 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0; /* No encoger */
    position: relative; /* Para spinner */
}

.btn-accept[b-xpjjsd4bva] {
    background-color: #198754; /* Asume que tienes esta variable (verde) */
    color: white;
}

    .btn-accept:hover[b-xpjjsd4bva] {
        filter: brightness(1.1);
    }

.btn-decline[b-xpjjsd4bva] {
    background-color: var(--color-danger); /* Asume que tienes esta variable (rojo) */
    color: white;
    padding: 0.4rem 0.6rem; /* Más pequeño para el 'X' */
}

    .btn-decline:hover[b-xpjjsd4bva] {
        filter: brightness(1.1);
    }

.btn-join[b-xpjjsd4bva] {
    background-color: #198754;
    color: white;
}

    .btn-join:hover[b-xpjjsd4bva] {
        filter: brightness(1.1);
    }

/* Spinner para botones de acción */
.btn-action:disabled[b-xpjjsd4bva] {
    opacity: 0.7;
    cursor: not-allowed;
}

    .btn-action:disabled .spinner-border-sm[b-xpjjsd4bva] {
        width: 1.1rem;
        height: 1.1rem;
        border-width: .2em;
    }

    .btn-action:disabled > i[b-xpjjsd4bva],
    .btn-action:disabled > span[b-xpjjsd4bva] {
        visibility: hidden;
    }


/* Colores de Estatus (Basado en GetStatusClass) */
.status-owner[b-xpjjsd4bva] {
    background-color: rgba(185, 154, 95, 0.2);
    color: #5d4037;
}

.status-organizador[b-xpjjsd4bva] {
    background-color: rgba(13, 202, 240, 0.2);
    color: #055160;
}

.status-accepted[b-xpjjsd4bva] {
    background-color: rgba(40, 167, 69, 0.2);
    color: #1a682c;
}

.status-pending[b-xpjjsd4bva] {
    background-color: rgba(255, 193, 7, 0.2);
    color: #8a6d04;
}

.status-declined[b-xpjjsd4bva] {
    background-color: rgba(220, 53, 69, 0.2);
    color: #7a2126;
}

/* Responsividad */
@media (max-width: 768px) {
    .agenda-card[b-xpjjsd4bva] {
        padding: 0.5rem;
    }
        /* ... (resto de estilos de responsividad del cuaderno) ... */
        .agenda-card[b-xpjjsd4bva]::before,
        .agenda-card[b-xpjjsd4bva]::after {
            top: 0.5rem;
            left: 0.5rem;
            right: 0.5rem;
            bottom: 0.5rem;
        }

        .agenda-card[b-xpjjsd4bva]::before {
            transform: translate(3px, 3px) rotate(1.5deg);
        }

        .agenda-card[b-xpjjsd4bva]::after {
            transform: translate(6px, 6px) rotate(-1.2deg);
        }

    .agenda-paper[b-xpjjsd4bva] {
        position: relative;
        left: 0;
        top: 0;
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        margin-left: 0;
        z-index: 2;
    }

    .agenda-content[b-xpjjsd4bva]::before {
        left: -1rem;
        top: -0.5rem;
        bottom: -0.5rem; /* <-- ¡Typo Corregido! */
    }

    .list-item[b-xpjjsd4bva] {
        gap: 0.5rem;
    }

    .item-title[b-xpjjsd4bva] {
        flex-basis: 100%;
        order: -1;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .item-date[b-xpjjsd4bva] {
        flex-basis: auto;
    }

    /* (NUEVO) Apilar botones de acción en móvil */
    .btn-action[b-xpjjsd4bva] {
        flex-basis: 48%; /* Ocupar casi la mitad */
        justify-content: center;
        margin-top: 0.5rem;
    }

    .item-link[b-xpjjsd4bva] {
        margin-left: 0;
    }
}

/* (NUEVO) Estilos del Spinner (si no están globales) */
.spinner-border-sm[b-xpjjsd4bva] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spin;
    animation: .75s linear infinite spin-b-xpjjsd4bva;
}

@keyframes spin-b-xpjjsd4bva {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-6ox6e3hi74] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

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

.oi[b-6ox6e3hi74] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

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

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

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

    .nav-item[b-6ox6e3hi74]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

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

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

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

    .collapse[b-6ox6e3hi74] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/NotificationList.razor.rz.scp.css */
/* Contenedor Principal (El Panel Flotante) */
.notification-dropdown-panel[b-qa3gaquqt0] {
    width: 360px;
    background-color: var(--color-card-event-background-reloj-de-luz);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    /* CORRECCIÓN DE CLICS: Forzamos que este panel reciba eventos */
    pointer-events: auto !important;
    /* CORRECCIÓN DE SCROLL: Limitamos altura máxima del panel completo */
    max-height: 80vh;
}

.notification-header[b-qa3gaquqt0] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .notification-header h6[b-qa3gaquqt0] {
        margin: 0;
        color: var(--color-accent-gold);
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
    }

.btn-mark-all[b-qa3gaquqt0] {
    background: none;
    border: none;
    color: var(--color-form-label-reloj-de-luz);
    cursor: pointer;
    transition: color 0.2s;
}

    .btn-mark-all:hover[b-qa3gaquqt0] {
        color: var(--color-text-reloj-de-luz);
    }

/* Lista Scrollable */
.notification-items-container[b-qa3gaquqt0] {
    /* Quitamos max-height fijo para que use flex */
    flex-grow: 1;
    overflow-y: auto;
    /* Scrollbar suave */
    scrollbar-width: thin;
    scrollbar-color: var(--color-deep-gray) transparent;
}

.notification-item[b-qa3gaquqt0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

    .notification-item:hover[b-qa3gaquqt0] {
        background-color: rgba(255,255,255,0.05);
    }

    .notification-item.unread[b-qa3gaquqt0] {
        background-color: rgba(192, 164, 124, 0.1); /* Tinte dorado muy suave */
    }

        /* Puntito azul para no leídos (opcional) */
        .notification-item.unread .notif-content[b-qa3gaquqt0]::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: var(--color-accent-gold);
            border-radius: 50%;
            margin-left: 0.5rem;
        }

/* Avatar + Badge */
.notif-avatar[b-qa3gaquqt0] {
    position: relative;
    flex-shrink: 0;
}

    .notif-avatar img[b-qa3gaquqt0], .avatar-placeholder[b-qa3gaquqt0] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

.avatar-placeholder[b-qa3gaquqt0] {
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

.action-badge[b-qa3gaquqt0] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.6rem;
    border: 2px solid var(--color-card-event-background-reloj-de-luz);
}

.bg-danger[b-qa3gaquqt0] {
    background-color: #e53e3e;
}

.bg-info[b-qa3gaquqt0] {
    background-color: #3182ce;
}

.bg-gold[b-qa3gaquqt0] {
    background-color: var(--color-accent-gold);
}

.bg-success[b-qa3gaquqt0] {
    background-color: #38a169;
}

.bg-gray[b-qa3gaquqt0] {
    background-color: #718096;
}


/* Contenido Texto */
.notif-content[b-qa3gaquqt0] {
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--color-text-reloj-de-luz);
    line-height: 1.3;
}

    .notif-content strong[b-qa3gaquqt0] {
        color: white;
        font-weight: 600;
    }

.notif-time[b-qa3gaquqt0] {
    display: block;
    font-size: 0.7rem;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 0.2rem;
}

/* Miniatura (Foto Target) */
.notif-thumbnail[b-qa3gaquqt0] {
    flex-shrink: 0;
}

    .notif-thumbnail img[b-qa3gaquqt0] {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
    }

/* Footer */
.notification-footer[b-qa3gaquqt0] {
    padding: 0.5rem;
    text-align: center;
    background-color: rgba(0,0,0,0.2);
}

.view-all-link[b-qa3gaquqt0] {
    font-size: 0.8rem;
    color: var(--color-accent-gold);
    text-decoration: none;
    font-weight: 600;
}

    .view-all-link:hover[b-qa3gaquqt0] {
        text-decoration: underline;
    }

/* Empty State */
.empty-notifications[b-qa3gaquqt0] {
    padding: 2rem;
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
}

    .empty-notifications i[b-qa3gaquqt0] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        opacity: 0.5;
    }

    .empty-notifications p[b-qa3gaquqt0] {
        margin: 0;
        font-size: 0.9rem;
    }

/* Estilos para el botón de cargar más */
.load-more-container[b-qa3gaquqt0] {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.btn-load-more[b-qa3gaquqt0] {
    background: none;
    border: 1px solid var(--color-section-border-reloj-de-luz);
    color: var(--color-accent-gold);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Montserrat', sans-serif;
}

    .btn-load-more:hover:not(:disabled)[b-qa3gaquqt0] {
        background-color: var(--color-accent-gold);
        color: white;
        border-color: var(--color-accent-gold);
    }

    .btn-load-more:disabled[b-qa3gaquqt0] {
        opacity: 0.6;
        cursor: default;
    }
/* _content/Ceremony.RelojDeLuz/Shared/PortraitEditor.razor.rz.scp.css */
.portrait-container[b-3kmads5po5] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow: hidden;
}

.image-preview-container[b-3kmads5po5] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    background-color: #1a1a1a;
    border-radius: 8px;
}

.image-preview[b-3kmads5po5] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* --- Skeleton Loader --- */
.skeleton-loader[b-3kmads5po5] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-3kmads5po5 1.5s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.image-preview-container.image-loaded .skeleton-loader[b-3kmads5po5] {
    opacity: 0;
}

.image-preview-container.image-loaded .image-preview[b-3kmads5po5] {
    opacity: 1;
}

@keyframes skeleton-loading-b-3kmads5po5 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ProfileAvatar.razor.rz.scp.css */
/* Estilos para el componente ProfileAvatar */
.profile-picture-container[b-1dn11oj24l] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    /* Usamos el color de texto oscuro como fondo base, como en tu otro proyecto */
    background-color: var(--color-text-dark);
    display: inline-block;
}

/* El fondo animado (esqueleto) usa ahora el color dorado de acento */
.skeleton-loader[b-1dn11oj24l] {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(192, 164, 124, 0) 25%, /* --color-accent-gold con opacidad */
    rgba(192, 164, 124, 0.4) 50%, rgba(192, 164, 124, 0) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-1dn11oj24l 1.8s infinite linear;
    z-index: 1;
}

@keyframes skeleton-loading-b-1dn11oj24l {
    to {
        background-position: -200% 0;
    }
}

/* La imagen de perfil */
.profile-picture[b-1dn11oj24l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: transparent;
    opacity: 0; /* Oculta hasta que esté cargada */
    transition: opacity 0.5s ease-in-out;
}

    /* Clase que se añade con JS cuando la imagen ha cargado */
    .profile-picture.loaded[b-1dn11oj24l] {
        opacity: 1;
    }

/* Borde exterior. Usamos el color de fondo del papel en lugar de blanco puro
   para que se integre mejor con el diseño general. */

.profile-picture-container.xlarge[b-1dn11oj24l] {
    /* Aquí necesitamos una nueva variable para el borde, o podemos usar blanco si prefieres el contraste */
    /* Comentario para ti: Si quieres que el borde sea del color del papel, crea --color-border-light: #F9F6F1 */
    box-shadow: 0 0 0 6px white, 0 6px 20px rgba(0,0,0,0.15);
}

.profile-picture-container.large[b-1dn11oj24l] {
    box-shadow: 0 0 0 5px white, 0 4px 15px rgba(0,0,0,0.1);
}

.profile-picture-container.small[b-1dn11oj24l] {
    box-shadow: 0 0 0 3px white, 0 2px 8px rgba(0,0,0,0.1);
}

.profile-picture-container.xsmall[b-1dn11oj24l] {
    /* Sombra más sutil para el avatar pequeño de la TopBar */
    box-shadow: 0 0 0 2px white, 0 1px 4px rgba(0,0,0,0.1);
}
/* _content/Ceremony.RelojDeLuz/Shared/QrCodeCard.razor.rz.scp.css */
/*
 * QrCodeCard.razor.css
 * Estilos para el panel de Código QR.
*/

/* --- Título H4 (Estilo estándar del panel) --- */
h4[b-n7roef92qa] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
    display: flex;
    align-items: center;
}

/* Icono dorado en el título */
.icon-gold[b-n7roef92qa] {
    color: var(--color-accent-gold);
    margin-right: 0.75rem;
    font-size: 1rem;
}

/* --- Estilos del Panel --- */
/*
 * NOTA: El .stacked-panel y .qr-code-section (fondo, borde, padding)
 * se definen en el CSS del componente padre (MyScheduleEvent.razor.css)
*/

/* Placeholder para el QR */
.qr-code-placeholder[b-n7roef92qa] {
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 8px;
    margin: 0 auto; /* Centrar el QR */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem; /* Icono grande */
    color: var(--color-dark-carbon);
}

/* Texto descriptivo debajo del QR */
.text-muted[b-n7roef92qa] {
    color: var(--color-form-label-reloj-de-luz);
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}
/* _content/Ceremony.RelojDeLuz/Shared/RequestsCard.razor.rz.scp.css */
/*
 * RequestsCard.razor.css
 * Estilos para el componente "Cuaderno de Solicitudes".
 * (Basado en MySchedule.razor.css)
*/

.font-montserrat[b-rariitct90] {
    font-family: 'Montserrat', sans-serif;
}

/* --- Estilos de Carga / Vacío --- */
.loading-text[b-rariitct90], .empty-text[b-rariitct90] {
    text-align: center;
    padding: 4rem;
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    font-size: 1.1rem;
}

/* --- Layout Apilado (Centra el Cuaderno) --- */
/* (Nota: El centrado real lo hace el layout padre: .editor-stacked-layout) */
.stacked-panel[b-rariitct90] {
    width: 100%;
}

/* --- Estilos del Cuaderno/Agenda --- */

/* 1. La Tarjeta Contenedora (Transparente, padre de las hojas) */
.agenda-card[b-rariitct90] {
    max-width: 800px;
    position: relative;
    padding: 1.5rem;
    background-color: transparent;
    border: none;
    perspective: 1000px;
}

/* 2. La Hoja de Papel Principal (La de arriba) */
.agenda-paper[b-rariitct90] {
    background-color: #fdfdfa; /* Color papel hueso */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Sombra principal */
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    z-index: 2; /* Encima de las hojas falsas */
    transform: rotate(-0.2deg);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Hojas Falsas (detrás de .agenda-paper) */
.agenda-card[b-rariitct90]::before,
.agenda-card[b-rariitct90]::after {
    content: '';
    position: absolute;
    inset: 1.5rem; /* Coincidir con el padding del .agenda-card */

    background-color: #fdfdfa;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hoja del medio */
.agenda-card[b-rariitct90]::before {
    z-index: 1; /* Detrás del papel */
    transform: translate(8px, 6px) rotate(1.5deg);
}
/* Hoja de abajo */
.agenda-card[b-rariitct90]::after {
    z-index: 0; /* Detrás de todas */
    transform: translate(14px, 10px) rotate(-1.2deg);
}

/* 4. Animación Hover */
.agenda-card:hover .agenda-paper[b-rariitct90] {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.agenda-card:hover[b-rariitct90]::before {
    transform: translate(10px, 8px) rotate(1.8deg);
}

.agenda-card:hover[b-rariitct90]::after {
    transform: translate(18px, 14px) rotate(-1.5deg);
}


/* 5. El Contenido (con la línea roja) */
.agenda-content[b-rariitct90] {
    position: relative;
}

    .agenda-content[b-rariitct90]::before {
        content: '';
        position: absolute;
        left: -2rem;
        top: -1rem;
        bottom: -1rem;
        width: 1px;
        background-color: rgba(255, 0, 0, 0.4);
    }

/* --- Estilos del Contenido de la Agenda --- */

.agenda-title[b-rariitct90] {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    color: #2c3e50;
    margin: 0.5rem 0 1rem 0;
    font-weight: normal;
}

    .agenda-title.separator[b-rariitct90] {
        padding-top: 1rem;
        border-top: 2px dashed rgba(0,0,0,0.1);
        margin-top: 2rem;
    }

/* --- Estilos para el Encabezado de Agenda con Botón --- */
.agenda-header-action[b-rariitct90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Mantenemos el margen inferior original del .agenda-title */
    margin: 0.5rem 0 1rem 0;
}

    /* Ajustar el H3 para que no tenga margen cuando está en flex */
    .agenda-header-action .agenda-title[b-rariitct90] {
        margin: 0;
    }

/* Botón flotante "+" */
.btn-add-request[b-rariitct90] {
    background: var(--color-accent-gold);
    color: #121212;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

    .btn-add-request:hover[b-rariitct90] {
        transform: scale(1.1);
        filter: brightness(1.1);
    }

.invitation-list[b-rariitct90] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item[b-rariitct90] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(0, 150, 255, 0.2); /* Línea de cuaderno azul */
    font-family: 'Montserrat', sans-serif;
    color: #333;
    flex-wrap: wrap;
}

    .list-item:last-child[b-rariitct90] {
        border-bottom: none;
    }

    .list-item.empty-item[b-rariitct90] {
        color: #888;
        font-style: italic;
        font-size: 0.9rem;
    }

.item-date[b-rariitct90] {
    font-weight: 600;
    flex-basis: 100px;
    flex-shrink: 0;
    color: #555;
}

.item-title[b-rariitct90] {
    flex-grow: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-status[b-rariitct90] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    flex-shrink: 0;
}

.item-link[b-rariitct90] {
    font-size: 1rem;
    color: #555;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

    .item-link:hover[b-rariitct90] {
        color: var(--color-accent-gold);
    }

/* Colores de Estado (Añadidos los tipos de solicitud) */
.status-aceptada[b-rariitct90], .status-aprobada[b-rariitct90] {
    background-color: rgba(40, 167, 69, 0.2);
    color: #1a682c;
}

.status-pendiente[b-rariitct90] {
    background-color: rgba(255, 193, 7, 0.2);
    color: #8a6d04;
}

.status-declinada[b-rariitct90], .status-rechazada[b-rariitct90] {
    background-color: rgba(220, 53, 69, 0.2);
    color: #7a2126;
}

.status-contratada[b-rariitct90] { /* (Ejemplo de 'MiAgenda' anterior) */
    background-color: rgb(40, 116, 167, 0.20);
    color: #1a5768;
}

.status-creacion[b-rariitct90] { /* (Nuevo para Solicitudes) */
    background-color: rgba(13, 202, 240, 0.2);
    color: #055160;
}

.status-edicion[b-rariitct90] { /* (Nuevo para Solicitudes) */
    background-color: rgba(108, 117, 125, 0.2);
    color: #5a6268;
}


/* Responsividad */
@media (max-width: 768px) {
    .agenda-card[b-rariitct90] {
        padding: 0.5rem;
    }

        .agenda-card[b-rariitct90]::before,
        .agenda-card[b-rariitct90]::after {
            top: 0.5rem;
            left: 0.5rem;
            right: 0.5rem;
            bottom: 0.5rem;
        }

        .agenda-card[b-rariitct90]::before {
            transform: translate(3px, 3px) rotate(1.5deg);
        }

        .agenda-card[b-rariitct90]::after {
            transform: translate(6px, 6px) rotate(-1.2deg);
        }

    .agenda-paper[b-rariitct90] {
        position: relative;
        left: 0;
        top: 0;
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        margin-left: 0;
        z-index: 2;
    }

    .agenda-content[b-rariitct90]::before {
        left: -1rem;
        top: -0.5rem;
        bottom: -0.5rem;
    }

    .list-item[b-rariitct90] {
        gap: 0.5rem;
    }

    .item-title[b-rariitct90] {
        flex-basis: 100%;
        order: -1;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .item-date[b-rariitct90] {
        flex-basis: auto;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/StoryCarousel.razor.rz.scp.css */
/*
 * StoryCarousel.razor.css
 * [REFACORIZADO] Ahora usa CSS Grid, consistente con GalleryManager.
*/

.story-carousel-wrapper[b-zipp2xcv16] {
    width: 100%;
    margin-bottom: 3rem;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    /* Le decimos que centre a su hijo (.carousel-container) */
    display: grid;
    justify-content: center;
}

    /* 1. Título de la Historia */
    .story-carousel-wrapper h3[b-zipp2xcv16] {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 1.5rem;
        color: var(--color-accent-gold);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        /* [CORREGIDO] Padding lateral para alinear con el carrusel */
        padding-left: 2rem;
        padding-right: 2rem;
        /* Se elimina max-width: 800px y márgenes auto */
    }

@media (max-width: 840px) {
    .story-carousel-wrapper h3[b-zipp2xcv16] {
        margin-left: 0; /* Ya se controla con el padding */
        margin-right: 0;
    }
}


/* 2. Contenedor del Carrusel */
.carousel-container[b-zipp2xcv16] {
    /* [CAMBIO CLAVE] Convertido a Grid */
    display: grid;
    grid-auto-flow: column; /* Flujo horizontal */
    /* Le decimos que su ancho máximo es el 100% de su padre */
    max-width: 100%;
    /* (El centrado lo hace el padre, él se dedica a alinear al inicio) */
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 2rem 1rem 2rem;
    gap: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Ocultar la barra de scroll (Opción 1) */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .carousel-container[b-zipp2xcv16]::-webkit-scrollbar {
        display: none;
    }


/* 3. Estilo de las Tarjetas (hijas) */
[b-zipp2xcv16] .gallery-card {
    flex-shrink: 0;
    scroll-snap-align: start;
    cursor: pointer; /* <-- [CAMBIO] Añadida la "manita" */
}

/* 4. Estilos de Carga */
.loading-text-carousel[b-zipp2xcv16] {
    color: var(--color-form-label-reloj-de-luz);
    font-style: italic;
    padding: 1rem;
}

.load-more-wrapper[b-zipp2xcv16] {
    flex-shrink: 0;
    /* [CAMBIO CLAVE] Se elimina 'width: 200px;'
       Ahora es una columna del grid. */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .load-more-wrapper .spinner-border[b-zipp2xcv16] {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--color-accent-gold);
    }


/* 5. BOTONES DE SCROLL */
.scroll-btn[b-zipp2xcv16] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(28, 28, 28, 0.7);
    backdrop-filter: blur(5px);
    color: var(--color-soft-white);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .scroll-btn:hover[b-zipp2xcv16] {
        background-color: var(--color-accent-gold);
        color: var(--color-deep-carbon);
        border-color: var(--color-accent-gold);
    }

    .scroll-btn.prev[b-zipp2xcv16] {
        left: 2rem;
    }

    .scroll-btn.next[b-zipp2xcv16] {
        right: 2rem;
    }

@media (max-width: 768px) {
    .scroll-btn.prev[b-zipp2xcv16] {
        left: 0.5rem;
    }

    .scroll-btn.next[b-zipp2xcv16] {
        right: 0.5rem;
    }
}
/* _content/Ceremony.RelojDeLuz/Shared/ThemePreviewPanel.razor.rz.scp.css */
/*
 * ThemePreviewPanel.razor.css
 * Estilos para el panel de previsualización del editor de temas.
*/

/* --- Contenedor Principal (Estilos Fijos) --- */
.preview-panel-wrapper[b-yv7o4n9p5k] {
    background-color: #000000; /* Fondo negro fijo para el panel */
    border: 1px solid #262626; /* Borde sutil fijo */
    border-radius: 8px;
    height: 100%;
}

.preview-title[b-yv7o4n9p5k] {
    margin: 0;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #f5f5f5; /* Texto blanco fijo */
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #262626;
}

.preview-content[b-yv7o4n9p5k] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* --- Elementos de Ejemplo (Estilos con Variables) --- */

/* Ejemplo de Encabezado */
.page-header-example[b-yv7o4n9p5k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
}

    .page-header-example h1[b-yv7o4n9p5k] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 400;
        font-family: 'Montserrat', sans-serif;
        color: var(--color-text-reloj-de-luz); /* VARIABLE */
    }

.btn-save-example[b-yv7o4n9p5k] {
    padding: 0.6rem 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-button-background-save-reloj-de-luz); /* VARIABLE */
    color: var(--color-button-text-save-reloj-de-luz); /* VARIABLE */
}

/* Ejemplo de Tarjeta */
.card-example-container[b-yv7o4n9p5k] {
    max-width: 350px;
    margin: 0 auto;
}

/* Ejemplo de Formulario */
.form-example-container[b-yv7o4n9p5k] {
    background-color: var(--color-form-background-reloj-de-luz); /* VARIABLE */
    border: 1px solid var(--color-form-border-reloj-de-luz); /* VARIABLE */
    border-radius: 8px;
    padding: 1.5rem;
}

.form-group-example[b-yv7o4n9p5k] {
    margin-bottom: 1.25rem;
}

    .form-group-example label[b-yv7o4n9p5k] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        font-size: 0.9rem;
        font-family: 'Montserrat', sans-serif;
        color: var(--color-form-label-reloj-de-luz); /* VARIABLE */
    }

.form-control-example[b-yv7o4n9p5k] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-form-text-reloj-de-luz); /* VARIABLE */
    background-color: var(--color-form-background-input-reloj-de-luz); /* VARIABLE */
    border: 1px solid var(--color-form-border-reloj-de-luz); /* VARIABLE */
    border-radius: 4px;
}

    .form-control-example.focus-example[b-yv7o4n9p5k] {
        border-color: var(--color-form-border-input-focus-reloj-de-luz); /* VARIABLE */
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz); /* VARIABLE */
        background-color: var(--color-form-background-input-focus-reloj-de-luz); /* VARIABLE */
    }

.form-check-example[b-yv7o4n9p5k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    background-color: var(--color-form-background-chek-list-reloj-de-luz); /* VARIABLE */
}

.form-check-input-example[b-yv7o4n9p5k] {
    accent-color: var(--color-form-background-chek-active-reloj-de-luz); /* VARIABLE */
}

.form-check-label-example[b-yv7o4n9p5k] {
    color: var(--color-form-label-check-reloj-de-luz); /* VARIABLE */
}
/* _content/Ceremony.RelojDeLuz/Shared/ThumbnailViewer.razor.rz.scp.css */
/*
 * ThumbnailViewer.razor.css
 */

/* Contenedor exterior que respeta el tamaño del padre */
.image-editor-wrapper-outer[b-3rx74qcl4c] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Contenedor de la Imagen (Fondo) */
.image-preview-container[b-3rx74qcl4c] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-image-background-container, #000);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Skeleton Loader */
.skeleton-loader[b-3rx74qcl4c] {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #2c2c2c 25%, #444444 50%, #2c2c2c 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-3rx74qcl4c 1.8s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

@keyframes skeleton-loading-b-3rx74qcl4c {
    to {
        background-position: -200% 0;
    }
}

/* Imagen Final */
.image-preview[b-3rx74qcl4c] {
    width: 100%;
    height: 100%;
    /* NOTA: object-fit se define en C# (inline style) */
    transition: transform 0.3s ease, opacity 0.5s ease;
    position: relative;
    z-index: 2;
    opacity: 0;
    display: block;
}

/* Lógica de carga */
.image-preview-container.loaded .image-preview[b-3rx74qcl4c] {
    opacity: 1;
}

.image-preview-container.loaded .skeleton-loader[b-3rx74qcl4c] {
    opacity: 0;
    pointer-events: none;
}
/* _content/Ceremony.RelojDeLuz/Shared/Toast.razor.rz.scp.css */
.toast-container[b-142af2lwr6] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1050; /* Un z-index alto para que aparezca sobre todo */
    min-width: 280px;
}

.toast[b-142af2lwr6] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    color: white;
}

    .toast.show[b-142af2lwr6] {
        opacity: 1;
        transform: translateX(0);
    }

.toast-body[b-142af2lwr6] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Variaciones de color según el nivel del toast */
.toast-success[b-142af2lwr6] {
    background-color: #16a34a; /* Verde */
    border-color: #15803d;
}

.toast-error[b-142af2lwr6] {
    background-color: #dc2626; /* Rojo */
    border-color: #b91c1c;
}

.toast-warning[b-142af2lwr6] {
    background-color: #f59e0b; /* Ámbar */
    border-color: #d97706;
    color: #1f2937; /* Texto oscuro para mejor contraste */
}

.toast-info[b-142af2lwr6] {
    background-color: #2563eb; /* Azul */
    border-color: #1d4ed8;
}
/* _content/Ceremony.RelojDeLuz/Shared/TopBar.razor.rz.scp.css */
/*
 * TopBar.razor.css
 * Estilos aislados y optimizados para el componente TopBar.
*/

/* --- Contenedor Principal de la Barra --- */
.top-bar-base[b-71paovdu87] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem; /* 80px */
    z-index: 50;
    color: white;
    transition: color 0.3s ease-in-out;
}

    .top-bar-base[b-71paovdu87]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        z-index: -1;
        will-change: opacity;
    }

    .top-bar-base.scrolled[b-71paovdu87]::before {
        opacity: 1;
    }

    .top-bar-base.scrolled[b-71paovdu87] {
        color: var(--color-text-dark);
    }

/* --- Contenedor de Navegación Interno --- */
.top-bar-nav[b-71paovdu87] {
    max-width: 1280px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo --- */
.logo-container[b-71paovdu87] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-img[b-71paovdu87] {
    height: 3rem;
    width: auto;
}

.logo-font[b-71paovdu87] {
    font-family: 'Great Vibes', cursive;
    font-size: 1.875rem;
}

/* --- Contenido Derecho (Menús) --- */
.right-content-container[b-71paovdu87] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* --- Menú de Escritorio --- */
.desktop-menu[b-71paovdu87] {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 978px) {
    .desktop-menu[b-71paovdu87] {
        display: flex;
    }
}

.nav-link-style[b-71paovdu87] {
    position: relative;
    padding-bottom: 0.25rem;
    color: inherit;
    transition: color 0.3s ease-in-out;
    cursor: pointer;
}

    .nav-link-style[b-71paovdu87]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-accent-gold);
        transition: width 0.3s ease-in-out;
    }

    .nav-link-style:hover[b-71paovdu87]::after,
    .nav-link-style.active[b-71paovdu87]::after {
        width: 100%;
    }

/* --- Separador --- */
.nav-separator[b-71paovdu87] {
    display: none;
    width: 1px;
    height: 1.5rem;
    background-color: #6b7280;
    opacity: 0.3;
}

@media (min-width: 978px) {
    .nav-separator[b-71paovdu87] {
        display: block;
    }
}

/* --- Estado de Scroll (Simplificado) --- */
.top-bar-base.scrolled .nav-link-style[b-71paovdu87] {
    color: var(--color-text-dark);
}

.top-bar-base.scrolled .mobile-menu-button[b-71paovdu87] {
    color: var(--color-text-dark);
}

/* --- Menú Móvil --- */
.mobile-menu-container[b-71paovdu87] {
    display: block;
}

@media (min-width: 978px) {
    .mobile-menu-container[b-71paovdu87] {
        display: none;
    }
}

.mobile-menu-button svg[b-71paovdu87] {
    width: 1.5rem;
    height: 1.5rem;
}

/* El resto de los estilos del TopBar.razor.css (menú de usuario, overlay móvil, etc.) */
.user-menu-container[b-71paovdu87] {
    position: relative;
}

.user-menu-button[b-71paovdu87] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
}

.user-icon[b-71paovdu87] {
    height: 1.75rem;
    width: 1.75rem;
    transition: color 0.2s ease-in-out;
}

.icon-logged-in[b-71paovdu87] {
    color: #b98c3c;
}

.icon-logged-out[b-71paovdu87] {
    color: #ffffff;
}

.user-menu-button:hover .user-icon[b-71paovdu87] {
    color: var(--color-accent-gold);
}

.user-menu-caret[b-71paovdu87] {
    height: 1.25rem;
    width: 1.25rem;
    transition: transform 0.2s ease-in-out;
}

    .user-menu-caret.is-open[b-71paovdu87] {
        transform: rotate(180deg);
    }

.user-dropdown-menu[b-71paovdu87] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 50;
    width: 240px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    overflow: hidden;
}

.dropdown-header[b-71paovdu87] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #6c757d;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-item[b-71paovdu87] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    text-decoration: none;
    width: 100%;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    border: none;
    background: none;
    margin: 0;
}

    .user-dropdown-item:hover[b-71paovdu87] {
        background-color: var(--color-background-paper);
        color: var(--color-accent-gold);
    }

    .user-dropdown-item i[b-71paovdu87] {
        width: 20px;
        text-align: center;
        color: var(--color-text-light);
        transition: color 0.2s;
    }

    .user-dropdown-item:hover i[b-71paovdu87] {
        color: var(--color-accent-gold);
    }

.dropdown-divider[b-71paovdu87] {
    height: 1px;
    background-color: #e9ecef;
    margin: 0.5rem 0;
}

.user-dropdown-form[b-71paovdu87] {
    margin: 0;
}

.click-away-overlay[b-71paovdu87] {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: transparent;
}

.mobile-menu-overlay[b-71paovdu87] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: white;
    background-image: var(--texture-paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

    .mobile-menu-overlay.is-visible[b-71paovdu87] {
        opacity: 1;
    }

.mobile-menu-close-button[b-71paovdu87] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--color-text-dark);
    transition: transform 0.2s ease, color 0.2s ease;
}

    .mobile-menu-close-button:hover[b-71paovdu87] {
        transform: scale(1.1) rotate(90deg);
        color: var(--color-accent-gold);
    }

.mobile-menu-logo[b-71paovdu87] {
    height: 3rem;
    width: auto;
    margin-bottom: 3rem;
}

.mobile-menu-links[b-71paovdu87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.mobile-menu-link[b-71paovdu87] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: var(--color-text-dark);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .mobile-menu-link:hover[b-71paovdu87] {
        color: white;
        background-color: var(--color-accent-gold);
    }

/* ===== Adiciones para el nuevo menú de usuario ===== */
.user-actions-group[b-71paovdu87] {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil */
    border-radius: 50px; /* Redondeado para agruparlos */
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.2s ease;
}

.top-bar-base.scrolled .user-actions-group[b-71paovdu87] {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.user-actions-group:hover[b-71paovdu87] {
    background-color: rgba(255, 255, 255, 0.2);
}

.top-bar-base.scrolled .user-actions-group:hover[b-71paovdu87] {
    background-color: #e9ecef;
}

.platform-link-button[b-71paovdu87] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    color: inherit;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* Separador */
}

.top-bar-base.scrolled .platform-link-button[b-71paovdu87] {
    border-right-color: #dee2e6;
}

.platform-link-button i[b-71paovdu87] {
    font-size: 1.1rem;
    color: #b98c3c;
}

.dropdown-toggle-button[b-71paovdu87] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.6rem;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}
/* _content/Ceremony.RelojDeLuz/Shared/WatchCeremoniesList.razor.rz.scp.css */
/*
 * WatchCeremoniesList.razor.css
 * Estilos para la lista de ceremonias dentro del WatchEditor (Tema Oscuro y Responsivo).
*/

/* (Opcional) Estilos para el encabezado H4 si se necesita */
h4[b-5ekqkap115] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-reloj-de-luz);
    font-weight: 400;
}

/* Margen inferior para el botón 'Añadir Ceremonia' cuando la tabla es visible */
.list-header[b-5ekqkap115] {
    margin-bottom: 1rem;
    display: flex; /* Para alinear el botón si hubiera más elementos */
    justify-content: flex-end; /* Alinea el botón a la derecha */
}

.btn-create-new[b-5ekqkap115] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-accent-gold);
    color: #121212;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

    .btn-create-new:hover[b-5ekqkap115] {
        opacity: 0.9;
    }

/* Margen superior para el botón 'Crear Primera' cuando la lista está vacía */
.empty-text + .btn-create-new[b-5ekqkap115] {
    margin-top: 1rem;
    /* Centrar el botón si la lista está vacía */
    margin-left: auto;
    margin-right: auto;
    display: table; /* Truco para centrar un botón inline-flex */
}


/* === ESTILOS DE LA TABLA === */
.watch-ceremonies-table[b-5ekqkap115] { /* <-- CAMBIADO */
    width: 100%;
    border-collapse: collapse;
}

    .watch-ceremonies-table th[b-5ekqkap115], .watch-ceremonies-table td[b-5ekqkap115] { /* <-- CAMBIADO */
        padding: 1rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
        vertical-align: middle;
    }

    .watch-ceremonies-table th[b-5ekqkap115] { /* <-- CAMBIADO */
        font-weight: 600;
        color: var(--color-text-reloj-de-luz);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .watch-ceremonies-table tbody tr:hover[b-5ekqkap115] { /* <-- CAMBIADO */
        background-color: #1a1a1a;
    }

/* (El resto de los estilos de tabla, botones y responsividad son idénticos) */
.text-muted[b-5ekqkap115] {
    color: #888;
    font-style: italic;
}

.actions-cell[b-5ekqkap115] {
    text-align: right;
    white-space: nowrap;
}

.actions-header[b-5ekqkap115] {
    text-align: right;
}

.btn-icon[b-5ekqkap115] {
    background: 0 0;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: .25rem;
}

.btn-edit[b-5ekqkap115] {
    color: #a0a0a0;
}

    .btn-edit:hover[b-5ekqkap115] {
        color: var(--color-accent-gold);
        background-color: #2a2a2a;
    }

.btn-delete[b-5ekqkap115] {
    color: #a0a0a0;
}

    .btn-delete:hover[b-5ekqkap115] {
        color: var(--color-danger);
        background-color: #2a2a2a;
    }

/* === RESPONSIVIDAD === */
@media (max-width: 768px) {
    .watch-ceremonies-table thead[b-5ekqkap115] { /* <-- CAMBIADO */
        display: none;
    }

    .watch-ceremonies-table tr[b-5ekqkap115] { /* <-- CAMBIADO */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-section-border-reloj-de-luz);
        border-radius: 8px;
        overflow: hidden;
    }

    .watch-ceremonies-table td[b-5ekqkap115] { /* <-- CAMBIADO */
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--color-section-border-reloj-de-luz);
    }

    .watch-ceremonies-table tr:last-child[b-5ekqkap115] { /* <-- CAMBIADO */
        margin-bottom: 0;
    }

    .watch-ceremonies-table td:last-child[b-5ekqkap115] { /* <-- CAMBIADO */
        border-bottom: none;
    }

    .watch-ceremonies-table td[b-5ekqkap115]:before { /* <-- CAMBIADO */
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        margin-right: 1rem;
        color: var(--color-text-reloj-de-luz);
    }

    .actions-cell[b-5ekqkap115] {
        justify-content: flex-end;
    }

        .actions-cell[b-5ekqkap115]:before {
            content: "Acciones";
        }
}

/* Estilos de carga y vacío */
.loading-text[b-5ekqkap115], .empty-text[b-5ekqkap115] {
    text-align: center;
    color: var(--color-form-label-reloj-de-luz);
    margin-top: 2rem;
    font-style: italic;
}
/* _content/Ceremony.RelojDeLuz/Shared/WatchImageViewer.razor.rz.scp.css */
/*
 * WatchImageViewer.razor.css
 * Estilos para el visor de foto de perfil del Reloj.
*/

/* --- 1. Contenedor Principal --- */
.watch-image-wrapper[b-dpyxp2g28a] {
    position: relative;
    /* (Ajusta el tamaño aquí para que coincida con MyWatch.razor.css) */
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* --- 2. Contenedor de Imagen (Circular) --- */
/* (Basado en ThumbnailViewer.razor.css y MyWatch.razor.css) */
.image-preview-container[b-dpyxp2g28a] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* (Circular, como en MyWatch) */
    border-radius: 50%;
    /* (Borde, como en MyWatch) */
    border: 2px solid var(--color-section-border-reloj-de-luz);
    background-color: var(--color-dark-carbon); /* Fondo mientras carga */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 3. Skeleton Loader (Circular) --- */
.skeleton-loader[b-dpyxp2g28a] {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #2c2c2c 25%, #444444 50%, #2c2c2c 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-dpyxp2g28a 1.8s infinite linear;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

@keyframes skeleton-loading-b-dpyxp2g28a {
    to {
        background-position: -200% 0;
    }
}

/* --- 4. Imagen (Llena el círculo) --- */
.image-preview[b-dpyxp2g28a] {
    width: 100%;
    height: 100%;
    /* (¡Importante!) Llena el círculo sin distorsión */
    object-fit: cover;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 2;
    opacity: 0;
}

/* --- 5. Lógica de Carga Visual --- */
.image-preview-container.loaded .image-preview[b-dpyxp2g28a] {
    opacity: 1;
}

.image-preview-container.loaded .skeleton-loader[b-dpyxp2g28a] {
    opacity: 0;
    pointer-events: none;
}

/* --- 6. (NUEVO) Loader de Subida --- */
.upload-loader[b-dpyxp2g28a] {
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Mantener circular */
}

    /* Spinner de Bootstrap (o tu spinner personalizado) */
    .upload-loader .spinner-border[b-dpyxp2g28a] {
        color: var(--color-accent-gold);
        width: 2rem;
        height: 2rem;
    }

/* --- 7. (NUEVO) Botón de "Camarita" --- */
.edit-photo-btn[b-dpyxp2g28a] {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 11;
    width: 36px;
    height: 36px;
    background-color: var(--color-dark-carbon);
    color: var(--color-accent-gold);
    border: 1px solid var(--color-section-border-reloj-de-luz);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

    .edit-photo-btn:hover[b-dpyxp2g28a] {
        background-color: var(--color-accent-gold);
        color: var(--color-dark-carbon);
        transform: scale(1.1);
    }

    .edit-photo-btn .fas[b-dpyxp2g28a] {
        font-size: 0.9rem;
    }

/* Cuando el wrapper está en modo 'is-uploading',
   deshabilitamos visualmente el botón (que es un label) */
.is-uploading .edit-photo-btn[b-dpyxp2g28a] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* Evita que el label reciba clics */
}

/* --- 8. (NUEVO) InputFile Oculto --- */
[b-dpyxp2g28a] .hidden-file-input {
    display: none;
}