/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                                                                           ║
 * ║     📅 CALENDARIO PLUGINHIVE - ESTILOS PREMIUM                           ║
 * ║     Sistema de estados visuales claros y elegantes                        ║
 * ║     Versión 1.0 - Refactorización completa                               ║
 * ║                                                                           ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES LOCALES PARA ESTADOS DEL CALENDARIO
   =========================================================================== */

:root {
    /* Color Primario (Kenkatsu Green/Deep Teal) */
    --ph-cal-primary: var(--kenkatsu-primary, #1F5E6B);
    --ph-cal-primary-light: var(--kenkatsu-primary-light, #2A7A8A);
    --ph-cal-primary-15: rgba(31, 94, 107, 0.15); /* Primario con 15% opacidad */
    --ph-cal-primary-20: rgba(31, 94, 107, 0.20);
    
    /* Color Secundario (Sand/Gold/Cream) */
    --ph-cal-secondary: var(--kenkatsu-cream-light, #F5F0E8);
    --ph-cal-secondary-hover: var(--kenkatsu-cream, #E6DCCF);
    
    /* Estados del calendario */
    --ph-cal-available-bg: #FFFFFF;
    --ph-cal-available-text: var(--kenkatsu-text-primary, #1A1A1A);
    --ph-cal-available-border: rgba(229, 231, 235, 0.5);
    
    --ph-cal-hover-bg: var(--ph-cal-primary-15); /* Hover suave con primario */
    --ph-cal-hover-text: var(--ph-cal-primary);
    --ph-cal-hover-border: var(--ph-cal-primary);
    
    --ph-cal-selected-bg: var(--ph-cal-primary);
    --ph-cal-selected-text: #FFFFFF;
    --ph-cal-selected-border: var(--ph-cal-primary);
    --ph-cal-selected-range: rgba(31, 94, 107, 0.7); /* Días intermedios en rango */
    
    --ph-cal-disabled-bg: #F3F3F3;
    --ph-cal-disabled-text: #CCCCCC;
    --ph-cal-disabled-border: #E5E7EB;
    --ph-cal-disabled-opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO 1: DÍA DISPONIBLE (DEFAULT)
   =========================================================================== */

/* Formato <li> (actual del plugin) */
.ph-calendar-days.ph-ul-date .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]),
.ph-calendar-days.ph-ul-date .ph-calendar-date.available,
.ph-calendar-days.ph-ul-date .ph-calendar-date.ph-date-available {
    background-color: var(--ph-cal-available-bg) !important;
    color: var(--ph-cal-available-text) !important;
    border: 1px solid var(--ph-cal-available-border) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Formato <td> (compatibilidad) */
.phive-book-calendar td:not(.not-available):not(.de-active):not(.booking-disabled):not(.selected-date):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]),
.phive-book-calendar td.available,
.phive-book-calendar td.ui-datepicker-other-month:not(.not-available) {
    background-color: var(--ph-cal-available-bg) !important;
    color: var(--ph-cal-available-text) !important;
    border: 1px solid var(--ph-cal-available-border) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO 2: HOVER (CRÍTICO - Debe diferenciarse claramente de bloqueado)
   =========================================================================== */

/* Hover en días disponibles - Formato <li> */
.ph-calendar-days.ph-ul-date .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]):hover,
.ph-calendar-days.ph-ul-date .ph-calendar-date.available:hover,
.ph-calendar-days.ph-ul-date .ph-calendar-date.ph-date-available:hover {
    background-color: var(--ph-cal-hover-bg) !important;
    color: var(--ph-cal-hover-text) !important;
    border: 2px solid var(--ph-cal-hover-border) !important;
    cursor: pointer !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(31, 94, 107, 0.2) !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Hover en días disponibles - Formato <td> */
.phive-book-calendar td:not(.not-available):not(.de-active):not(.booking-disabled):not(.selected-date):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]):hover,
.phive-book-calendar td.available:hover {
    background-color: var(--ph-cal-hover-bg) !important;
    color: var(--ph-cal-hover-text) !important;
    border: 2px solid var(--ph-cal-hover-border) !important;
    cursor: pointer !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(31, 94, 107, 0.2) !important;
    z-index: 1 !important;
    position: relative !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO 3: DÍA SELECCIONADO (ACTIVE/RANGE)
   =========================================================================== */

/* Días seleccionados - Formato <li> */
.ph-calendar-days.ph-ul-date .ph-calendar-date.selected,
.ph-calendar-days.ph-ul-date .ph-calendar-date.active,
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="selected"],
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="active"],
.ph-calendar-days.ph-ul-date .ph-calendar-date.kenkatsu-selected-day {
    background-color: var(--ph-cal-selected-bg) !important;
    color: var(--ph-cal-selected-text) !important;
    border: 2px solid var(--ph-cal-selected-border) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(31, 94, 107, 0.3) !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Días seleccionados - Formato <td> */
.phive-book-calendar td.selected-date,
.phive-book-calendar td.selected,
.phive-book-calendar td.active,
.phive-book-calendar td[class*="selected"],
.phive-book-calendar td[class*="active"],
.phive-book-calendar td.ui-state-active,
.phive-book-calendar td.ui-state-selected {
    background-color: var(--ph-cal-selected-bg) !important;
    color: var(--ph-cal-selected-text) !important;
    border: 2px solid var(--ph-cal-selected-border) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(31, 94, 107, 0.3) !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Días en rango (intermedios) - Opacidad reducida */
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="range"]:not(.selected):not(.active),
.phive-book-calendar td[class*="range"]:not(.selected-date):not(.selected):not(.active) {
    background-color: var(--ph-cal-selected-range) !important;
    color: var(--ph-cal-selected-text) !important;
    border: 1px solid var(--ph-cal-selected-border) !important;
    opacity: 0.7 !important;
}

/* Texto de elementos hijos en días seleccionados */
.ph-calendar-days.ph-ul-date .ph-calendar-date.selected *,
.ph-calendar-days.ph-ul-date .ph-calendar-date.active *,
.phive-book-calendar td.selected-date *,
.phive-book-calendar td.selected *,
.phive-book-calendar td.active * {
    color: var(--ph-cal-selected-text) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO 4: DÍA BLOQUEADO/NO DISPONIBLE (DISABLED)
   =========================================================================== */

/* Días bloqueados - Formato <li> */
.ph-calendar-days.ph-ul-date .ph-calendar-date.ph-date-unavailable,
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="unavailable"],
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="disabled"],
.ph-calendar-days.ph-ul-date .ph-calendar-date.not-available {
    background-color: var(--ph-cal-disabled-bg) !important;
    color: var(--ph-cal-disabled-text) !important;
    border: 1px solid var(--ph-cal-disabled-border) !important;
    opacity: var(--ph-cal-disabled-opacity) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    text-decoration: line-through !important;
    box-shadow: none !important;
}

/* Días bloqueados - Formato <td> */
.phive-book-calendar td.not-available,
.phive-book-calendar td.de-active,
.phive-book-calendar td.booking-disabled,
.phive-book-calendar td[class*="unavailable"],
.phive-book-calendar td[class*="disabled"],
.phive-book-calendar td.ui-state-disabled {
    background-color: var(--ph-cal-disabled-bg) !important;
    color: var(--ph-cal-disabled-text) !important;
    border: 1px solid var(--ph-cal-disabled-border) !important;
    opacity: var(--ph-cal-disabled-opacity) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    text-decoration: line-through !important;
    box-shadow: none !important;
}

/* Texto de elementos hijos en días bloqueados */
.ph-calendar-days.ph-ul-date .ph-calendar-date.ph-date-unavailable *,
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="unavailable"] *,
.phive-book-calendar td.not-available *,
.phive-book-calendar td.de-active *,
.phive-book-calendar td.booking-disabled * {
    color: var(--ph-cal-disabled-text) !important;
    opacity: var(--ph-cal-disabled-opacity) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DÍA DE HOY - DESTACADO ESPECIAL
   =========================================================================== */

.ph-calendar-days.ph-ul-date .ph-calendar-date.today:not(.selected):not(.active):not(.ph-date-unavailable),
.phive-book-calendar td.ui-datepicker-today:not(.selected-date):not(.selected):not(.active):not(.not-available) {
    border: 2px solid var(--ph-cal-primary) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVENIR CONFLICTOS - Asegurar que hover NO se aplique a bloqueados
   =========================================================================== */

/* CRÍTICO: Asegurar que días bloqueados NUNCA tengan hover */
.ph-calendar-days.ph-ul-date .ph-calendar-date.ph-date-unavailable:hover,
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="unavailable"]:hover,
.ph-calendar-days.ph-ul-date .ph-calendar-date[class*="disabled"]:hover,
.phive-book-calendar td.not-available:hover,
.phive-book-calendar td.de-active:hover,
.phive-book-calendar td.booking-disabled:hover {
    background-color: var(--ph-cal-disabled-bg) !important;
    color: var(--ph-cal-disabled-text) !important;
    border: 1px solid var(--ph-cal-disabled-border) !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HORARIOS (TIME SLOTS) - Mismo sistema de estados
   =========================================================================== */

/* Horarios disponibles - Formato <li> con clase ph-calendar-date */
.time-picker .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]),
.time-picker-wraper .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]),
#ph-calendar-time .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]),
.ph-calendar-days.ph-ul-time .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]),
.ph-time-slot:not(.ph-time-unavailable):not(.selected):not(.active),
.ph-time-slot.available {
    background-color: var(--ph-cal-available-bg) !important;
    color: var(--ph-cal-available-text) !important;
    border: 1px solid var(--ph-cal-available-border) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Hover en horarios disponibles */
.time-picker .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]):hover,
.time-picker-wraper .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]):hover,
#ph-calendar-time .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]):hover,
.ph-calendar-days.ph-ul-time .ph-calendar-date:not(.ph-date-unavailable):not(.selected):not(.active):not([class*="unavailable"]):not([class*="disabled"]):hover,
.ph-time-slot:not(.ph-time-unavailable):not(.selected):not(.active):hover,
.ph-time-slot.available:hover {
    background-color: var(--ph-cal-primary-20) !important;
    color: var(--ph-cal-primary) !important;
    border: 2px solid var(--ph-cal-primary) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 2px 6px rgba(31, 94, 107, 0.15) !important;
}

/* Horarios seleccionados - CRÍTICO: Máxima especificidad */
.time-picker .ph-calendar-date.selected,
.time-picker .ph-calendar-date.active,
.time-picker .ph-calendar-date[class*="selected"],
.time-picker .ph-calendar-date[class*="active"],
.time-picker-wraper .ph-calendar-date.selected,
.time-picker-wraper .ph-calendar-date.active,
.time-picker-wraper .ph-calendar-date[class*="selected"],
.time-picker-wraper .ph-calendar-date[class*="active"],
#ph-calendar-time .ph-calendar-date.selected,
#ph-calendar-time .ph-calendar-date.active,
#ph-calendar-time .ph-calendar-date[class*="selected"],
#ph-calendar-time .ph-calendar-date[class*="active"],
.ph-calendar-days.ph-ul-time .ph-calendar-date.selected,
.ph-calendar-days.ph-ul-time .ph-calendar-date.active,
.ph-calendar-days.ph-ul-time .ph-calendar-date[class*="selected"],
.ph-calendar-days.ph-ul-time .ph-calendar-date[class*="active"],
.ph-time-slot.selected,
.ph-time-slot.active,
.ph-time-slot[class*="selected"],
.ph-time-slot[class*="active"] {
    background-color: var(--ph-cal-selected-bg) !important;
    background: var(--ph-cal-selected-bg) !important;
    color: var(--ph-cal-selected-text) !important;
    border: 2px solid var(--ph-cal-selected-border) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(31, 94, 107, 0.35) !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Texto de elementos hijos en horarios seleccionados */
.time-picker .ph-calendar-date.selected *,
.time-picker .ph-calendar-date.active *,
.time-picker-wraper .ph-calendar-date.selected *,
.time-picker-wraper .ph-calendar-date.active *,
#ph-calendar-time .ph-calendar-date.selected *,
#ph-calendar-time .ph-calendar-date.active *,
.ph-calendar-days.ph-ul-time .ph-calendar-date.selected *,
.ph-calendar-days.ph-ul-time .ph-calendar-date.active *,
.ph-time-slot.selected *,
.ph-time-slot.active * {
    color: var(--ph-cal-selected-text) !important;
    font-weight: 600 !important;
}

/* Horarios bloqueados */
.time-picker .ph-calendar-date.ph-date-unavailable,
.time-picker .ph-calendar-date[class*="unavailable"],
.time-picker .ph-calendar-date[class*="disabled"],
.time-picker-wraper .ph-calendar-date.ph-date-unavailable,
.time-picker-wraper .ph-calendar-date[class*="unavailable"],
.time-picker-wraper .ph-calendar-date[class*="disabled"],
#ph-calendar-time .ph-calendar-date.ph-date-unavailable,
#ph-calendar-time .ph-calendar-date[class*="unavailable"],
#ph-calendar-time .ph-calendar-date[class*="disabled"],
.ph-calendar-days.ph-ul-time .ph-calendar-date.ph-date-unavailable,
.ph-calendar-days.ph-ul-time .ph-calendar-date[class*="unavailable"],
.ph-calendar-days.ph-ul-time .ph-calendar-date[class*="disabled"],
.ph-time-slot.ph-time-unavailable,
.ph-time-slot[class*="unavailable"],
.ph-time-slot[class*="disabled"] {
    background-color: var(--ph-cal-disabled-bg) !important;
    color: var(--ph-cal-disabled-text) !important;
    border: 1px solid var(--ph-cal-disabled-border) !important;
    opacity: var(--ph-cal-disabled-opacity) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE Y AJUSTES FINOS
   =========================================================================== */

@media (max-width: 768px) {
    /* Ajustar escala en hover para móvil */
    .ph-calendar-days.ph-ul-date .ph-calendar-date:hover,
    .phive-book-calendar td:hover {
        transform: scale(1.02) !important; /* Menos escala en móvil */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILIDADES - Clases helper para JavaScript si es necesario
   =========================================================================== */

.ph-calendar-date.kenkatsu-hover-preview {
    background-color: var(--ph-cal-hover-bg) !important;
    border: 2px solid var(--ph-cal-hover-border) !important;
}