/* Ticker CSS - Minimal Tailwind replacement */
/* Solo las clases necesarias para el ticker financiero */

/* Reset y base */
* {
  box-sizing: border-box;
}

/* Utility Classes */
.relative { position: relative; }
.absolute { position: absolute; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }

/* Spacing */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.gap-1\.5 { gap: 0.375rem; }

/* Positioning */
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }

/* Sizing */
.h-9 { height: 2.25rem; }
.h-full { height: 100%; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }

/* Border */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-2 { border-width: 2px; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }

/* Colors - Sky theme */
.border-sky-400\/50 { border-color: rgba(56, 189, 248, 0.5); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-sky-100\/85 { --tw-gradient-from: rgba(224, 242, 254, 0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(224, 242, 254, 0)); }
.via-sky-200\/90 { --tw-gradient-via: rgba(186, 230, 253, 0.9); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgba(186, 230, 253, 0)); }
.to-sky-100\/85 { --tw-gradient-to: rgba(224, 242, 254, 0.85); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.to-transparent { --tw-gradient-to: transparent; }

/* Text colors */
.text-slate-300 { color: rgb(203, 213, 225); }
.text-slate-700 { color: rgb(51, 65, 85); }
.text-slate-900 { color: rgb(15, 23, 42); }
.text-white { color: rgb(255, 255, 255); }
.text-yellow-400 { color: rgb(250, 204, 21); }
.text-yellow-600 { color: rgb(202, 138, 4); }
.text-red-400 { color: rgb(248, 113, 113); }
.text-red-600 { color: rgb(220, 38, 38); }
.text-red-700 { color: rgb(185, 28, 28); }
.text-green-300 { color: rgb(134, 239, 172); }
.text-green-700 { color: rgb(21, 128, 61); }
.text-gray-700 { color: rgb(55, 65, 81); }

/* Text size */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-\[10px\] { font-size: 10px; line-height: 1.25rem; }

/* Font weight */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Other */
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); }
.tracking-tight { letter-spacing: -0.025em; }

/* Badge colors - Mejorados para mejor contraste */
.bg-amber-500\/90 { background-color: rgba(245, 158, 11, 0.9); }
.text-amber-50 { color: rgb(255, 251, 235); }
.border-amber-400\/60 { border-color: rgba(251, 191, 36, 0.6); }

.bg-violet-500\/90 { background-color: rgba(139, 92, 246, 0.9); }
.text-violet-50 { color: rgb(245, 243, 255); }
.border-violet-400\/60 { border-color: rgba(167, 139, 250, 0.6); }

.bg-emerald-500\/90 { background-color: rgba(16, 185, 129, 0.9); }
.text-emerald-50 { color: rgb(236, 253, 245); }
.border-emerald-400\/60 { border-color: rgba(52, 211, 153, 0.6); }

.bg-blue-500\/90 { background-color: rgba(59, 130, 246, 0.9); }
.text-blue-50 { color: rgb(239, 246, 255); }
.border-blue-400\/60 { border-color: rgba(96, 165, 250, 0.6); }

.bg-slate-500\/90 { background-color: rgba(100, 116, 139, 0.9); }
.text-slate-50 { color: rgb(248, 250, 252); }
.border-slate-400\/60 { border-color: rgba(148, 163, 184, 0.6); }

/* Colores para porcentajes sobre fondo oscuro */
.text-green-300 { color: rgb(134, 239, 172); }
.bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.2); }
.border-green-400\/30 { border-color: rgba(74, 222, 128, 0.3); }

.text-red-300 { color: rgb(252, 165, 165); }
.bg-red-500\/20 { background-color: rgba(239, 68, 68, 0.2); }
.border-red-400\/30 { border-color: rgba(248, 113, 113, 0.3); }

.text-slate-300 { color: rgb(203, 213, 225); }
.bg-slate-500\/20 { background-color: rgba(100, 116, 139, 0.2); }
.border-slate-400\/20 { border-color: rgba(148, 163, 184, 0.2); }

/* Fondos para items del ticker */
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }

/* Gradientes para fondo del ticker */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.from-slate-900 { --tw-gradient-from: rgb(15, 23, 42); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0)); }
.via-slate-900\/80 { --tw-gradient-via: rgba(15, 23, 42, 0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgba(15, 23, 42, 0)); }
.to-transparent { --tw-gradient-to: transparent; }

/* Animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Transiciones */
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }