/* =====================================================
   Celulosa Europa - Análisis de Margen
   Custom Styles
   ===================================================== */

/* Base */
* { box-sizing: border-box; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Navigation */
.nav-tab {
  @apply px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 cursor-pointer;
}
.nav-tab.active {
  @apply bg-white text-emerald-700 shadow-sm;
}
.nav-tab:not(.active) {
  @apply text-gray-500 hover:text-gray-700 hover:bg-white/50;
}

/* Cards */
.stat-card {
  @apply bg-white rounded-xl p-5 shadow-sm border border-gray-100 transition-all duration-200;
}
.stat-card:hover {
  @apply shadow-md border-gray-200;
}

/* Tables */
.data-table {
  @apply w-full text-sm;
}
.data-table thead th {
  @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-200;
}
.data-table tbody td {
  @apply px-4 py-3 text-gray-700 border-b border-gray-100;
}
.data-table tbody tr:hover {
  @apply bg-emerald-50/30;
}
.data-table tbody tr:last-child td {
  @apply border-b-0;
}

/* Number formatting */
.num-positive { @apply text-emerald-600 font-semibold; }
.num-negative { @apply text-red-500 font-semibold; }

/* Badge */
.puerto-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.puerto-badge.livorno { @apply bg-blue-100 text-blue-800; }
.puerto-badge.monfalcone { @apply bg-purple-100 text-purple-800; }
.puerto-badge.palamos { @apply bg-amber-100 text-amber-800; }

/* Loading */
.loading-spinner {
  @apply animate-spin h-8 w-8 text-emerald-500;
}

/* Tooltip */
.tooltip-container { @apply relative; }
.tooltip-container .tooltip-text {
  @apply invisible absolute z-10 px-3 py-2 text-xs text-white bg-gray-800 rounded-lg -top-10 left-1/2 transform -translate-x-1/2 whitespace-nowrap;
}
.tooltip-container:hover .tooltip-text {
  @apply visible;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.slide-in {
  animation: slideIn 0.4s ease-out;
}

/* Chart container */
.chart-container {
  @apply bg-white rounded-xl p-5 shadow-sm border border-gray-100;
  position: relative;
  min-height: 320px;
}

/* Select */
.filter-select {
  @apply block w-full rounded-lg border-gray-300 shadow-sm text-sm py-2 px-3 bg-white border focus:border-emerald-500 focus:ring-emerald-500 focus:ring-1 transition-colors;
}

/* Button */
.btn-primary {
  @apply inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700 transition-colors shadow-sm;
}
.btn-secondary {
  @apply inline-flex items-center px-4 py-2 bg-white text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors shadow-sm border border-gray-300;
}

/* Print */
@media print {
  .no-print { display: none !important; }
  body { background: white !important; }
  .stat-card, .chart-container { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
}