/* Frontend CSS para el bloque Calendario Diario - INTEGRADO CON THEME.JSON */
/* Sistema dinámico que se adapta al tema activo de WordPress */

/* Contenedor principal del bloque - hereda del tema */
.daily-calendar-block {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--small, 16px);
    font-family: var(--calendario-font-family, var(--wp--preset--font-family--body, system-ui, sans-serif));
}

/* Calendario SVG */
.daily-calendar-block__calendar {
    flex-shrink: 0;
}

.daily-calendar-block__calendar svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Año - Integrado con theme.json del tema activo */
.daily-calendar-block__year {
    margin: 0;
    line-height: 1;
    font-size: var(--calendario-font-size-large, var(--wp--preset--font-size--medium, 18px));
    color: var(--calendario-color-text-primary, var(--wp--preset--color--foreground, #333333));
    font-family: var(--calendario-font-family, var(--wp--preset--font-family--body, system-ui, sans-serif));
}

/* El bloque wrapper hereda del tema */
.wp-block-calendario-experiencias-daily-calendar {
    color: var(--calendario-color-text-primary, var(--wp--preset--color--foreground, #333333));
    font-family: var(--calendario-font-family, var(--wp--preset--font-family--body, system-ui, sans-serif));
}

/* Variaciones de color del año usando paleta del tema */
.wp-block-calendario-experiencias-daily-calendar .daily-calendar-block__year {
    /* Por defecto usa el color de texto del tema activo */
    color: var(--calendario-color-text-primary, var(--wp--preset--color--foreground, #333333));
}

/* Si el usuario selecciona colores del tema */
.wp-block-calendario-experiencias-daily-calendar.has-primary-color .daily-calendar-block__year {
    color: var(--calendario-color-primary, var(--wp--preset--color--primary, #007cba)) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-secondary-color .daily-calendar-block__year {
    color: var(--calendario-color-secondary, var(--wp--preset--color--secondary, #005a87)) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-gradient-green-color .daily-calendar-block__year {
    color: var(--wp--preset--color--gradient-green, #6AAA96) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-light-green-color .daily-calendar-block__year {
    color: var(--wp--preset--color--light-green, #ADD899) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-accent-color .daily-calendar-block__year {
    color: var(--wp--preset--color--accent, #003558) !important;
}

/* Font sizes del tema para el año */
.wp-block-calendario-experiencias-daily-calendar.has-small-font-size .daily-calendar-block__year {
    font-size: var(--wp--preset--font-size--small, 14px) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-medium-font-size .daily-calendar-block__year {
    font-size: var(--wp--preset--font-size--medium, 16px) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-large-font-size .daily-calendar-block__year {
    font-size: var(--wp--preset--font-size--large, 18px) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-x-large-font-size .daily-calendar-block__year {
    font-size: var(--wp--preset--font-size--x-large, 24px) !important;
}

.wp-block-calendario-experiencias-daily-calendar.has-h-2-standard-font-size .daily-calendar-block__year {
    font-size: var(--wp--preset--font-size--h2-standard, 32px) !important;
}

/* Alineaciones */
.wp-block-calendario-experiencias-daily-calendar.has-text-align-left {
    text-align: left;
}

.wp-block-calendario-experiencias-daily-calendar.has-text-align-center {
    text-align: center;
}

.wp-block-calendario-experiencias-daily-calendar.has-text-align-right {
    text-align: right;
}

.wp-block-calendario-experiencias-daily-calendar.has-text-align-center .daily-calendar-block {
    justify-content: center;
}

.wp-block-calendario-experiencias-daily-calendar.has-text-align-right .daily-calendar-block {
    justify-content: flex-end;
}

/* Responsive con espaciado del tema */
@media (max-width: 768px) {
    .daily-calendar-block {
        gap: var(--wp--preset--spacing--x-small, 12px);
    }
    
    /* Responsive font-size usando clamp del tema */
    .daily-calendar-block__year {
        font-size: var(--wp--preset--font-size--small, 14px);
    }
    
    /* Hacer responsive el mes */
    .daily-calendar-block__month {
        font-size: 12px !important;
    }
    
    /* Hacer responsive el número del día */
    .daily-calendar-block__day-number {
        font-size: 20px !important;
    }
    
    /* Ajustar el tamaño del calendario en móvil */
    .daily-calendar-block__calendar.size-small {
        width: 60px !important;
        height: 60px !important;
    }
    
    .daily-calendar-block__calendar.size-medium {
        width: 70px !important;
        height: 70px !important;
    }
    
    .daily-calendar-block__calendar.size-large {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Responsive para pantallas muy pequeñas */
@media (max-width: 480px) {
    .daily-calendar-block {
        gap: var(--wp--preset--spacing--xx-small, 8px);
    }
    
    .daily-calendar-block__year {
        font-size: 12px;
    }
    
    /* Hacer aún más pequeño en pantallas muy pequeñas */
    .daily-calendar-block__month {
        font-size: 10px !important;
    }
    
    .daily-calendar-block__day-number {
        font-size: 16px !important;
    }
    
    /* Calendarios más pequeños en móvil pequeño */
    .daily-calendar-block__calendar.size-small {
        width: 50px !important;
        height: 50px !important;
    }
    
    .daily-calendar-block__calendar.size-medium {
        width: 60px !important;
        height: 60px !important;
    }
    
    .daily-calendar-block__calendar.size-large {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Compatibilidad con tema oscuro usando variables del tema */
@media (prefers-color-scheme: dark) {
    .wp-block-calendario-experiencias-daily-calendar .daily-calendar-block__year {
        color: var(--wp--preset--color--white, #ffffff);
    }
    
    .daily-calendar-block__calendar svg {
        stroke: var(--wp--preset--color--white, #ffffff);
    }
}

/* Integración completa con spacing del tema */
.wp-block-calendario-experiencias-daily-calendar {
    margin-bottom: var(--wp--preset--spacing--medium, 24px);
}

/* Número del día - estilos específicos con alta especificidad */
.daily-calendar-block__day-number {
    position: absolute !important;
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-weight: 600 !important;
    pointer-events: none !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    z-index: 10 !important;
}

/* Mes del calendario - estilos base */
.daily-calendar-block__month {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    font-family: Arial, sans-serif;
    text-align: center;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
}

/* El número del día usa font-size fijo calculado en PHP basado en el tamaño del calendario */
.daily-calendar-block__day-number {
    /* Tamaños fijos: small=28px, medium=36px, large=44px - ya no usa porcentajes */
}