/* Archivo: public/assets/css/components.css */
/* Punto de integración: Nuevo archivo para biblioteca de componentes (HU-22, HU-23) */

/* ==========================================================================
   1. TOAST NOTIFICATIONS (Success / Error / Info)
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 110000;
    pointer-events: none; /* Permite hacer clic a través del contenedor invisible */
}

.toast-message {
    background-color: var(--cheisca-white);
    border: 1px solid var(--cheisca-border);
    border-radius: 16px;
    box-shadow: var(--shadow-hover);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 350px;
    pointer-events: auto;
    animation: slideInRight 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-message.closing {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon { font-size: 24px; }
.toast-content { flex: 1; }
.toast-title { font-family: var(--font-heading); font-size: 1rem; color: var(--cheisca-black); margin-bottom: 4px; }
.toast-desc { font-size: 0.85rem; color: var(--cheisca-black); opacity: 0.7; line-height: 1.4; }
.toast-close { background: transparent; border: none; font-size: 1rem; color: var(--cheisca-black); opacity: 0.4; cursor: pointer; }
.toast-close:hover { opacity: 1; }

/* Tipos de Toast */
.toast-success { border-left: 4px solid var(--cheisca-success); }
.toast-success .toast-icon { color: var(--cheisca-success); }

.toast-error { border-left: 4px solid var(--cheisca-danger); }
.toast-error .toast-icon { color: var(--cheisca-danger); }

.toast-info { border-left: 4px solid var(--cheisca-blue); }
.toast-info .toast-icon { color: var(--cheisca-blue); }

.toast-ai { border-left: 4px solid var(--cheisca-purple); }
.toast-ai .toast-icon { color: var(--cheisca-purple); animation: aiPulse 2s infinite; }


/* ==========================================================================
   2. SKELETON LOADERS (Estados de Carga Fluidos)
   ========================================================================== */
.skeleton-card {
    background-color: var(--cheisca-white);
    border: 1px solid var(--cheisca-border);
    border-radius: var(--radius-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-soft);
}

.skeleton-header { display: flex; gap: 16px; align-items: center; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 12px; border-radius: 6px; width: 100%; }
.skeleton-line.short { width: 40%; height: 16px; }
.skeleton-line.medium { width: 70%; }

/* Animación Global (El gradiente se mueve) */
.skeleton-avatar, .skeleton-line, .skeleton-loader {
    background: linear-gradient(90deg, var(--cheisca-smoke) 25%, #E5E5E5 50%, var(--cheisca-smoke) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite linear;
}

@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* ==========================================================================
   3. EMPTY STATES (Estados Vacíos y Errores)
   ========================================================================== */
.empty-state-container {
    padding: 64px 32px;
    margin: 24px auto;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-icon-wrapper {
    width: 80px; height: 80px;
    background-color: var(--cheisca-smoke);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}

.empty-icon { font-size: 40px; color: var(--cheisca-black); opacity: 0.2; }


/* ==========================================================================
   4. ADAPTACIÓN RESPONSIVE GLOBAL (PWA First)
   ========================================================================== */
@media (max-width: 768px) {
    .toast-container {
        bottom: 16px; right: 16px; left: 16px;
    }
    .toast-message { width: 100%; } /* Toast ocupa todo el ancho en móvil */
}

/* Archivo: public/assets/css/components.css */
/* Punto de integración: Agregar al final del archivo */

/* HU-27: Lilu Global Widget */
.fab-lilu-global {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cheisca-purple), #5E35B1);
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(124, 77, 255, 0.4);
    cursor: pointer;
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fab-lilu-global:hover { transform: scale(1.1) translateY(-4px); }

/* Chat Bubbles Globales */
.chat-message {
    padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; line-height: 1.5; max-width: 85%;
    box-shadow: var(--shadow-soft); word-wrap: break-word;
}
.ai-message { background: var(--cheisca-white); color: var(--cheisca-black); align-self: flex-start; border-bottom-left-radius: 4px; border-left: 3px solid var(--cheisca-purple); }
.user-message { background: var(--cheisca-blue); color: var(--cheisca-white); align-self: flex-end; border-bottom-right-radius: 4px; }

/* HU-28: AI Recommendations Panel (Para inyectar en Launchpad) */
.ai-recommendation-card {
    background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(247,247,245,1) 100%);
    border: 1px solid rgba(124, 77, 255, 0.2);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: 0 4px 15px rgba(124, 77, 255, 0.05);
    display: flex; flex-direction: column; gap: 12px;
    transition: all 0.3s;
    cursor: pointer;
}
.ai-recommendation-card:hover { transform: translateY(-3px); border-color: var(--cheisca-purple); }