/* =============================================================================
   RutaTurismo360 - Global Calendar Template Styles
   =============================================================================

   Estilos para el módulo Calendario / Agenda con prefijo rt360-calendar-*.
   Incluye sobreescrituras del RadzenScheduler y clases utilitarias del módulo.

   Prefijo: rt360-calendar-*
   Última actualización: Junio 2026
   Versión: 1.0.0

   ÍNDICE:
   -------
   1. Layout principal del calendario
   2. Panel lateral de filtros y próximos recordatorios
   3. Sobreescrituras RadzenScheduler
   4. Badges de tipo de recordatorio
   5. Dialog de recordatorio
   6. Dark Mode
   ============================================================================= */


/* =============================================================================
   1. LAYOUT PRINCIPAL
   ============================================================================= */

.rt360-calendar-wrapper {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 680px;
}

.rt360-calendar-main {
    flex: 1;
    min-width: 0;
    background: var(--rz-base-background-color, #fff);
    border-radius: 8px;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    overflow: hidden;
    position: relative; /* para el overlay de carga */
    height: calc(100vh - 300px);
}

/* Overlay semitransparente mientras carga */
.rt360-calendar-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--rz-base-background-color-rgb, 255,255,255), 0.6);
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

/* =============================================================================
   2. PANEL LATERAL
   ============================================================================= */

.rt360-calendar-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rt360-calendar-filter-card {
    border-radius: 8px;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    padding: 1rem;
    background: var(--rz-base-background-color, #fff);
}

.rt360-calendar-filter-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color, #888);
    margin-bottom: 0.75rem;
}

.rt360-calendar-upcoming {
    border-radius: 8px;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    padding: 1rem;
    background: var(--rz-base-background-color, #fff);
    flex: 1;
    overflow-y: auto;
}

.rt360-calendar-upcoming-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color, #888);
    margin-bottom: 0.75rem;
}

.rt360-calendar-upcoming-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rz-border-color, #e0e0e0);
    cursor: pointer;
    transition: background 0.15s;
}

.rt360-calendar-upcoming-item:last-child {
    border-bottom: none;
}

.rt360-calendar-upcoming-item:hover {
    background: var(--rz-base-200, #f5f5f5);
    border-radius: 4px;
    padding-left: 0.35rem;
}

.rt360-calendar-upcoming-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.rt360-calendar-upcoming-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-color, #333);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt360-calendar-upcoming-date {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #888);
    margin-top: 1px;
}

/* =============================================================================
   3. SOBREESCRITURAS RADZEN SCHEDULER
   ============================================================================= */

/*
 * height:auto se pasa directamente via Style= en el componente Razor.
 * Aquí solo ajustes de borde, padding y eventos.
 */
.rt360-calendar-main .rz-scheduler {
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

.rt360-calendar-main .rz-scheduler-nav {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-border-color, #e0e0e0);
}

.rt360-calendar-main .rz-event {
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 2px 6px;
    line-height: 1.4;
    cursor: pointer;
    border: none !important;
}

/* En vista mes los eventos fluyen con el contenido; en día/semana Radzen calcula la altura por duración */
.rt360-calendar-main .rz-month-view .rz-event {
    height: auto !important;
}

.rt360-calendar-main .rz-event:hover {
    filter: brightness(0.92);
}

/* En vista semana/día sí queremos altura fija con scroll */
.rt360-calendar-main:has(.rz-day-view),
.rt360-calendar-main:has(.rz-week-view) {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* =============================================================================
   4. BADGES DE TIPO DE EVENTO
   ============================================================================= */

.rt360-calendar-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.rt360-calendar-badge--reservation { background: rgba(52, 152, 219, 0.15); color: #2980b9; }
.rt360-calendar-badge--reminder    { background: rgba(155, 89, 182, 0.15); color: #8e44ad; }
.rt360-calendar-badge--done        { background: rgba(189, 195, 199, 0.2); color: #7f8c8d; }
.rt360-calendar-badge--urgent      { background: rgba(231, 76, 60, 0.15);  color: #c0392b; }

/* =============================================================================
   5. DIALOG DE RECORDATORIO
   ============================================================================= */

.rt360-reminder-dialog .rz-dialog {
    min-width: 480px;
    max-width: 580px;
}

.rt360-reminder-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* =============================================================================
   6. DARK MODE
   ============================================================================= */

html[data-theme="dark"] .rt360-calendar-main,
html[data-theme="dark"] .rt360-calendar-filter-card,
html[data-theme="dark"] .rt360-calendar-upcoming {
    background: var(--rz-base-background-color, #1e1e2e);
    border-color: var(--rz-border-color, #2d2d3f);
}

html[data-theme="dark"] .rt360-calendar-upcoming-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .rt360-calendar-badge--reservation { background: rgba(52, 152, 219, 0.2);   color: #5dade2; }
html[data-theme="dark"] .rt360-calendar-badge--reminder    { background: rgba(155, 89, 182, 0.2);   color: #bb8fce; }
html[data-theme="dark"] .rt360-calendar-badge--done        { background: rgba(189, 195, 199, 0.15); color: #aab7b8; }
html[data-theme="dark"] .rt360-calendar-badge--urgent      { background: rgba(231, 76, 60, 0.2);    color: #e74c3c; }

/* =============================================================================
   7. POPOVER DE EVENTO (dialog de detalle)
   ============================================================================= */

/* Título del popover */
.rt360-calendar-popover-title {
    font-weight: 600;
    line-height: 1.3;
}

/* Íconos de metadata (fecha, persona, agencia) */
.rt360-calendar-popover-icon {
    font-size: 0.9rem;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */

/* Textos legibles en el dialog oscuro de Radzen */
html[data-theme="dark"] .rt360-calendar-popover-title,
html[data-theme="dark"] .rz-dialog-content .rt360-calendar-popover .rz-text-subtitle1 {
    color: #f0f0f5 !important;
    font-weight: 600;
}

html[data-theme="dark"] .rt360-calendar-popover-icon,
html[data-theme="dark"] .rz-dialog-content .rt360-calendar-popover .rz-icon {
    color: #a0a0b8 !important;
}

html[data-theme="dark"] .rt360-calendar-popover-meta,
html[data-theme="dark"] .rz-dialog-content .rt360-calendar-popover .rz-text-caption {
    color: #d0d0e0 !important;
}

html[data-theme="dark"] .rt360-calendar-popover-description {
    color: #a0a0b8 !important;
    font-style: italic;
}

/* Títulos de página (h4/h5) en dark mode */
html[data-theme="dark"] .rt360-page-title,
html[data-theme="dark"] .rz-text-h4,
html[data-theme="dark"] .rz-text-h5 {
    color: #f0f0f5;
}