body { background-color: #0a0a0a; color: #f3f4f6; margin: 0; font-family: 'Outfit', sans-serif; letter-spacing: 0.03em !important;}
::-webkit-scrollbar { 
    width: 10px;      /* Ancho vertical */
    height: 6px;     /* Alto horizontal */
    background-color: #141414; /* Fondo del track */
}

/* 2. Estado Hover (Al pasar el mouse por encima se ensancha) */
::-webkit-scrollbar:hover {
    width: 10px;     /* Se hace más ancho */
    height: 12px;    /* Se hace más alto */
}

/* 3. Estilo del "pulgar" (La barra que se mueve) */
::-webkit-scrollbar-thumb { 
    background: #4c1d95; 
    border-radius: 10px; 
    border: 2px solid #141414; /* Borde para que se vea separado */
}

/* 4. Estilo del "pulgar" al pasar el mouse (Se ilumina) */
::-webkit-scrollbar-thumb:hover {
    background: #7c3aed; /* Un morado más claro al tocarlo */
}

::-webkit-scrollbar-track { 
    background: #141414; 
}
.modal-overlay { background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); }
.nav-item-active { background: linear-gradient(to right, rgba(124, 58, 237, 0.2), transparent); border-left: 3px solid #7c3aed; color: white; }
.ai-card { background: linear-gradient(145deg, #1a1a1a, #141414); border: 1px solid rgba(124, 58, 237, 0.1); }

/* --- ESTILOS DEL CALENDARIO --- */
.day-cell { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    cursor: pointer; 
    transition: background-color 0.2s;
}
.day-content-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    width: 100%; 
    flex: 1;
    overflow: hidden; 
    padding-bottom: 4px;
}
.day-cell:hover { background-color: #1c1c1c; }

input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.avatar-float { animation: float 3s ease-in-out infinite; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.4); border-color: #7c3aed; }
    50% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.8); border-color: #a78bfa; transform: scale(1.02); }
}
.animate-buy-pulse { animation: pulse-glow 1.5s infinite; }
.sticky-header-shadow { background-color: #141414; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

.typing-cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
    color: #a78bfa;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.login-bg {
    background-image: radial-gradient(circle at 50% 50%, #2e1065 0%, #000000 70%);
}

/* --- ESTILOS PARA EL MARKDOWN DE LA IA --- */
.prose-content strong { color: #d8b4fe; font-weight: 800; }
.prose-content em { font-style: italic; color: #c084fc; }
.prose-content ul { list-style-type: disc; padding-left: 1.5rem; margin: 0.5rem 0; color: #d1d5db; }
.prose-content ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0.5rem 0; color: #d1d5db; }
.prose-content li { margin-bottom: 0.25rem; }
.prose-content h1, .prose-content h2, .prose-content h3 { font-weight: 800; color: #f3f4f6; margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.1em; text-transform: uppercase; letter-spacing: -0.02em; }
.prose-content p { margin-bottom: 0.75rem; }
.prose-content blockquote { border-left: 3px solid #7c3aed; padding-left: 1rem; margin: 1rem 0; color: #9ca3af; font-style: italic; background: rgba(124, 58, 237, 0.05); padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0 8px 8px 0; }
.prose-content a { color: #a78bfa; text-decoration: underline; }
.prose-content code { background: #2d2d2d; padding: 2px 4px; rounded: 4px; font-family: monospace; color: #e9d5ff; font-size: 0.9em; }

/* Checkbox personalizado */
.custom-checkbox { accent-color: #7c3aed; width: 16px; height: 16px; cursor: pointer; }

/* Notificaciones */
.notification-badge { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background-color: #ef4444; border-radius: 50%; border: 2px solid #141414; }

/* --- ESTILOS DE IMPRESIÓN (OPTIMIZADO PARA NO DESBORDAR) --- */
@media print {
    @page { size: 4in 6in; margin: 0; }
    body { background: white !important; margin: 0; padding: 0; }
}

/* Ocultar la etiqueta en la pantalla normal */
#printable-label-container {
    display: none;
}

h1, h2, h3, .text-xl, .text-2xl, .text-3xl, .text-4xl {
    letter-spacing: 0.05em !important; /* Más aire en títulos */
}

/* 3. Textos en Mayúscula (Botones, Etiquetas): Se ven mejor bien separados */
.uppercase, button, .font-black {
    letter-spacing: 0.1em !important; /* Separación elegante estilo "Premium" */
}

/* 4. Anular las clases de Tailwind que juntan las letras */
.tracking-tighter, .tracking-tight {
    letter-spacing: inherit !important;
}

/* --- ANIMACIÓN EN CASCADA PARA EL CATÁLOGO PÚBLICO --- */
@keyframes fadeInUpStagger {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stagger-card {
    opacity: 0; /* Comienza invisible */
    animation: fadeInUpStagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}