/**
 * Cloris Plantas - Frontend Styles
 */

/* Reset básico para el plugin */
.cloris-plantas-container * {
    box-sizing: border-box;
}

/* Animaciones */
@keyframes clorisFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cloris-planta-card {
    animation: clorisFadeIn 0.5s ease;
}

/* Hover effects mejorados */
.cloris-planta-card {
    position: relative;
}

.cloris-planta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cloris-planta-card.destacada::before {
    background: linear-gradient(135deg, rgba(74, 124, 67, 0.05), rgba(45, 90, 39, 0.05));
    opacity: 1;
}

/* Botón de preguntar activo */
.cloris-planta-ask-btn:active {
    transform: scale(0.95);
}

/* Estado de carga */
.cloris-planta-ask-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.cloris-planta-ask-btn.loading::after {
    content: '...';
    animation: clorisLoading 1s infinite;
}

@keyframes clorisLoading {
    0%, 100% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

/* Detalles del acordeón */
.cloris-planta-details[open] summary {
    border-bottom: 1px solid #e0e0e0;
}

.cloris-planta-details[open] summary ~ * {
    animation: clorisSlideDown 0.3s ease;
}

@keyframes clorisSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Categorías con colores diferentes */
.cloris-planta-category {
    text-transform: capitalize;
}

.cloris-planta-category[data-category="Interior"] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.cloris-planta-category[data-category="Exterior"] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.cloris-planta-category[data-category="Cactus"] {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.cloris-planta-category[data-category="Flores"] {
    background: linear-gradient(135deg, #fa709a, #fee140);
}

.cloris-planta-category[data-category="Medicinal"] {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    color: #333;
}

/* Responsive mejorado */
@media (max-width: 480px) {
    .cloris-plantas-title {
        font-size: 1.75rem;
    }
    
    .cloris-plantas-subtitle {
        font-size: 1rem;
    }
    
    .cloris-planta-care {
        flex-direction: column;
        gap: 6px;
    }
    
    .cloris-care-item {
        font-size: 0.85rem;
    }
}

/* Accesibilidad */
.cloris-planta-ask-btn:focus,
.cloris-planta-card:focus-within {
    outline: 3px solid #4a7c43;
    outline-offset: 2px;
}

.cloris-planta-details summary {
    list-style: none;
}

.cloris-planta-details summary::-webkit-details-marker {
    display: none;
}

.cloris-planta-details summary::after {
    content: ' ▼';
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.cloris-planta-details[open] summary::after {
    transform: rotate(180deg);
}

/* Loading skeleton */
.cloris-planta-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: clorisSkeleton 1.5s infinite;
}

@keyframes clorisSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}