/* Hidratación Infinita - Custom Styles */

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Status badges */
.status-ok {
  @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-alerta {
  @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-fuera-servicio {
  @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-instalada {
  @apply bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium;
}

/* Machine card hover effects */
.machine-card {
  @apply bg-white rounded-lg shadow-md p-6 transition-all duration-200;
}

.machine-card:hover {
  @apply shadow-lg transform -translate-y-1;
}

/* Service priority badges */
.priority-baja {
  @apply bg-gray-100 text-gray-700;
}

.priority-media {
  @apply bg-blue-100 text-blue-700;
}

.priority-alta {
  @apply bg-orange-100 text-orange-700;
}

.priority-critica {
  @apply bg-red-100 text-red-700;
}

/* Loading animation */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Mobile responsive table */
@media (max-width: 768px) {
  .mobile-table {
    display: block;
  }
  
  .mobile-table thead {
    display: none;
  }
  
  .mobile-table tbody tr {
    display: block;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
  }
  
  .mobile-table tbody td {
    display: block;
    text-align: right;
    border: none;
    padding: 0.25rem 0;
  }
  
  .mobile-table tbody td:before {
    content: attr(data-label) ": ";
    font-weight: bold;
    float: left;
  }
}

/* Form styles */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

/* Photo gallery */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.photo-item {
  @apply relative rounded-xl overflow-hidden bg-gray-100 shadow-md transition-all duration-300;
  aspect-ratio: 4/3;
}

.photo-item:hover {
  @apply shadow-xl transform scale-105;
}

.photo-item img {
  @apply w-full h-full object-cover;
}

.photo-overlay {
  @apply absolute inset-0 bg-black bg-opacity-0 transition-all duration-300 flex items-end;
}

.photo-item:hover .photo-overlay {
  @apply bg-opacity-40;
}

.photo-caption {
  @apply text-white text-sm p-3 transform translate-y-full transition-transform duration-300;
}

.photo-item:hover .photo-caption {
  @apply translate-y-0;
}

/* Machine visual cards */
.machine-visual-card {
  @apply bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 group;
}

.machine-visual-card:hover {
  @apply shadow-2xl transform -translate-y-2;
}

.machine-hero-image {
  @apply relative h-48 bg-gradient-to-br from-gray-200 to-gray-300 overflow-hidden;
}

.machine-hero-image img {
  @apply w-full h-full object-cover transition-transform duration-300 group-hover:scale-110;
}

.machine-status-badge {
  @apply absolute top-3 right-3 px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg;
}

.machine-model-badge {
  @apply absolute top-3 left-3 px-2 py-1 rounded-lg text-xs font-medium bg-white bg-opacity-90 backdrop-blur-sm;
}

.machine-info-section {
  @apply p-6;
}

.machine-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Visual filters */
.model-filter-pills {
  @apply flex flex-wrap gap-2 mb-6;
}

.model-pill {
  @apply flex items-center space-x-2 px-4 py-2 rounded-full border-2 transition-all duration-200 cursor-pointer;
}

.model-pill.active {
  @apply border-blue-500 bg-blue-50 text-blue-700;
}

.model-pill:not(.active) {
  @apply border-gray-200 text-gray-600 hover:border-gray-300 hover:bg-gray-50;
}

.model-icon {
  @apply w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white;
}

/* Visual statistics */
.visual-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.visual-stat-card {
  @apply bg-gradient-to-br rounded-xl p-6 text-white relative overflow-hidden;
}

.visual-stat-icon {
  @apply absolute top-4 right-4 text-3xl opacity-20;
}

.visual-stat-value {
  @apply text-3xl font-bold mb-1;
}

.visual-stat-label {
  @apply text-sm opacity-90;
}

/* Modal styles for photo viewer */
.photo-modal {
  @apply fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4;
}

.photo-modal-content {
  @apply bg-white rounded-xl max-w-4xl max-h-full overflow-auto;
}

.photo-modal-image {
  @apply w-full h-auto max-h-96 object-contain;
}

/* Machine identification visual elements */
.machine-identification {
  @apply flex items-center space-x-3 mb-4;
}

.machine-serial-badge {
  @apply bg-gray-900 text-white px-3 py-1 rounded-lg font-mono text-sm font-bold;
}

.machine-model-info {
  @apply flex items-center space-x-2;
}

.machine-visual-description {
  @apply text-sm text-gray-600 italic bg-gray-50 p-3 rounded-lg border-l-4 border-blue-500;
}

/* Map styles */
.map-container {
  height: 400px;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Calendar styles */
.calendar-day {
  @apply p-2 text-sm border-r border-b border-gray-200 min-h-[80px] relative;
}

.calendar-event {
  @apply text-xs p-1 mb-1 rounded text-white cursor-pointer;
}

.calendar-event.preventivo {
  @apply bg-blue-500;
}

.calendar-event.correctivo {
  @apply bg-orange-500;
}

.calendar-event.emergencia {
  @apply bg-red-500;
}

/* Animations */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

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

/* Chart container fixes */
.chart-container {
  position: relative;
  height: 250px;
  width: 100%;
  overflow: hidden;
}

#machinesChart {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Prevent chart.js from creating multiple canvases */
.chartjs-render-monitor {
  animation: none !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    @apply bg-gray-900 text-white;
  }
  
  .machine-card {
    @apply bg-gray-800;
  }
  
  .form-input,
  .form-select {
    @apply bg-gray-700 border-gray-600 text-white;
  }
}