/* ============================================
   iCal Availability Calendar — Frontend Styles
   v2.1.9 (AÑO IZQ - FLECHAS DER - TABLA REAL)
   ============================================ */

:root {
    --iac-free:        #22c55e;
    --iac-free-bg:     #f0fdf4;
    --iac-free-border: #bbf7d0;
    --iac-busy:        #ef4444;
    --iac-busy-bg:     #fff1f2;
    --iac-busy-border: #fecdd3;
    --iac-today:       #f97316;
    --iac-today-bg:    #fff7ed;
    --iac-past:        #94a3b8;
    --iac-past-bg:     #f8fafc;
    --iac-border:      #e2e8f0;
    --iac-hdr-from:    #f0fdf4; /* Verde claro (mismo que días libres) */
    --iac-hdr-to:      #f0fdf4;
    --iac-hdr-fg:      #166534; /* Verde oscuro para contraste */
    --iac-radius:      1em;
    --iac-cell:        clamp(2em, 8vw, 2.6em);
    --iac-gap:         0.2em;
    --iac-shadow:      0 2px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
    --iac-shadow-hover:0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.08);
    --iac-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --iac-transition:  0.18s cubic-bezier(.4,0,.2,1);
}

/* ============ WRAPPER ============ */
.iac-calendar-wrapper {
    font-family: var(--iac-font) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* ============ MULTI-MONTH GRID ============ */
.iac-calendars-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19em), 1fr)) !important;
    gap: 1.1em !important;
    width: 100% !important;
}

/* ============ MONTH BLOCK ============ */
.iac-month-block {
    background: #fff !important;
    border-radius: var(--iac-radius) !important;
    box-shadow: var(--iac-shadow) !important;
    border: 1px solid var(--iac-border) !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 1em !important;
}

/* OCULTAR OCUPACIÓN EN TODOS LOS ESTILOS */
.iac-month-occ {
    display: none !important;
}

/* ============ MONTH HEADER (DENTRO DEL BLOQUE) ============ */
.iac-month-header {
    background: var(--iac-hdr-from) !important;
    color: var(--iac-hdr-fg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.8em 1em !important;
    border-bottom: 1px solid var(--iac-border) !important;
}

.iac-month-header-title {
    font-size: 0.88em !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    text-align: center !important;
}

/* ── Flechas de navegación ── */
.iac-nav-btn {
    background: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    color: #111827 !important;
    border-radius: 8px !important;
    width: 2.1em !important;
    height: 2.1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.1em !important;
    font-weight: 900 !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.30) !important;
}

/* ============ GRID NAV BAR (AÑO IZQ - FLECHAS DER) ============ */
.iac-grid-nav-bar {
    width: 100% !important;
    margin-bottom: 1.5em !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.iac-grid-nav-label {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: inline-block !important;
}

.iac-nav-dot {
    font-size: 1.5em !important;
    font-weight: 900 !important;
    color: #94a3b8 !important;
    display: inline-block !important;
    padding: 0 0.2em !important;
}

/* ============ DOW ROW ============ */
.iac-dow-row {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--iac-border) !important;
}

.iac-dow-cell {
    text-align: center !important;
    padding: 0.5em 0 !important;
    font-size: 0.68em !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
}

/* ============ DAYS GRID ============ */
.iac-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: var(--iac-gap) !important;
    padding: 0.45em !important;
}

/* ============ DAY CELL ============ */
.iac-day {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--iac-cell) !important;
    border-radius: 0.45em !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
}

.iac-day-free { background: var(--iac-free-bg) !important; color: #15803d !important; border: 1px solid var(--iac-free-border) !important; }
.iac-day-busy { background: var(--iac-busy-bg) !important; color: #be123c !important; border: 1px solid var(--iac-busy-border) !important; }
.iac-day-today { background: #fff7ed !important; color: #f97316 !important; border: 2px solid #f97316 !important; font-weight: 800 !important; }
.iac-day-past { background: #f3f4f6 !important; color: #9ca3af !important; border: 1px solid #e5e7eb !important; }
.iac-empty { visibility: hidden !important; }

/* ============ LEGEND ============ */
.iac-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5em 1.1em !important;
    padding: 1em !important;
    justify-content: center !important;
    width: 100% !important;
    background: #fafbfc !important;
    border-top: 1px solid var(--iac-border) !important;
}

.iac-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.4em !important;
    font-size: 0.73em !important;
    color: #64748b !important;
}

.iac-legend-dot { width: 0.75em !important; height: 0.75em !important; border-radius: 50% !important; }
.iac-legend-dot-free  { background: var(--iac-free) !important;  }
.iac-legend-dot-busy  { background: var(--iac-busy) !important;  }
.iac-legend-dot-today { background: var(--iac-today) !important; }
.iac-legend-dot-past  { background: var(--iac-past) !important;  }

/* ============================================
   ESTILO MINIMALISTA (VERDE Y BLANCO)
   ============================================ */
.iac-style-minimalist {
    --iac-free:        #ffffff; /* Blanco */
    --iac-free-bg:     #ffffff;
    --iac-free-border: #e5e7eb;
    --iac-busy:        #065f46; /* Verde oscuro */
    --iac-busy-bg:     #065f46;
    --iac-busy-border: #065f46;
    --iac-today:       #f97316; /* Naranja */
    --iac-today-bg:    #fff7ed;
    --iac-past:        #f3f4f6; /* Gris suave */
    --iac-past-bg:     #f3f4f6;
    --iac-border:      #f3f4f6;
    --iac-hdr-from:    #ffffff;
    --iac-hdr-to:      #ffffff;
    --iac-hdr-fg:      #065f46;
    --iac-radius:      0.5em;
    --iac-shadow:      0 1px 3px rgba(0,0,0,0.05);
}

.iac-style-minimalist .iac-month-block {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.iac-style-minimalist .iac-month-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #065f46 !important;
}

.iac-style-minimalist .iac-month-header-title {
    color: #065f46 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.iac-style-minimalist .iac-grid-nav-label {
    color: #065f46 !important;
}

.iac-style-minimalist .iac-nav-btn {
    background: #f0fdf4 !important;
    border: 1px solid #d1fae5 !important;
    color: #059669 !important;
    box-shadow: none !important;
}

.iac-style-minimalist .iac-nav-btn:hover {
    background: #d1fae5 !important;
}

.iac-style-minimalist .iac-day-free {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

.iac-style-minimalist .iac-day-free:hover {
    background: #f9fafb !important;
}

.iac-style-minimalist .iac-day-busy {
    background: #065f46 !important;
    color: #ffffff !important;
    border: 1px solid #065f46 !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

.iac-style-minimalist .iac-day-today {
    background: #fff7ed !important;
    color: #f97316 !important;
    border: 2px solid #f97316 !important;
    box-shadow: none !important;
}

.iac-style-minimalist .iac-dow-row {
    background: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.iac-style-minimalist .iac-dow-cell {
    color: #6b7280 !important;
}

.iac-style-minimalist .iac-legend {
    background: #ffffff !important;
    border-top: 1px solid #f3f4f6 !important;
}

.iac-style-minimalist .iac-legend-dot-free  { background: #ffffff !important; border: 1px solid #e5e7eb !important; }
.iac-style-minimalist .iac-legend-dot-busy  { background: #065f46 !important; }
.iac-style-minimalist .iac-legend-dot-today { background: #fff7ed !important; border: 1px solid #f97316 !important; }
.iac-style-minimalist .iac-legend-dot-past  { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; }

/* OCULTAR OCUPACIÓN EN ESTILO MINIMALISTA */
.iac-style-minimalist .iac-month-occ {
    display: none !important;
}

/* ============ BOTÓN VOLVER A HOY (CENTRADO) ============ */
.iac-back-today-btn {
    display: block !important;
    margin: 1.2em auto !important;
    padding: 0.6em 1.4em !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.6em !important;
    color: #475569 !important;
    font-size: 0.78em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--iac-transition) !important;
    text-align: center !important;
}

/* ============ BARRA ACTUALIZADO (PEQUEÑO Y CENTRADO) ============ */
.iac-updated-bar, .iac-stale-bar {
    text-align: center !important;
    font-size: 0.55em !important;
    color: #94a3b8 !important;
    padding: 0.8em 1em !important;
    font-weight: 500 !important;
    width: 100% !important;
    display: block !important;
}

/* ============ CAROUSEL MÓVIL (SWIPE) ============ */
.iac-carousel {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

.iac-carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
    will-change: transform !important;
}

.iac-carousel-track .iac-month-block {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    width: var(--iac-slide-width, 100%) !important;
    min-width: var(--iac-slide-width, 100%) !important;
    max-width: var(--iac-slide-width, 100%) !important;
}

.iac-carousel-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1em !important;
    padding: 0.8em 0 !important;
}

.iac-carousel-dots {
    display: flex !important;
    gap: 0.45em !important;
    align-items: center !important;
}

.iac-dot-indicator {
    width: 0.5em !important;
    height: 0.5em !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    transition: background 0.2s !important;
}

.iac-dot-indicator.active {
    background: #475569 !important;
}

/* ============ LOADING STATE ============ */
.iac-calendar-wrapper:not([data-iac-init]) {
    min-height: 200px !important;
}

.iac-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 200px !important;
    width: 100% !important;
}

.iac-spinner {
    display: inline-block !important;
    width: 2em !important;
    height: 2em !important;
    border: 3px solid #e2e8f0 !important;
    border-top-color: #22c55e !important;
    border-radius: 50% !important;
    animation: iac-spin 0.8s linear infinite !important;
}

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