@tailwind base;
@tailwind components;
@tailwind utilities;

/* Importar fuente Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* Variables CSS personalizadas */
:root {
  --primary-color: #E55204;
  --primary-dark: #C44503;
  --primary-light: #FF6B1A;
  --secondary-color: #2C3E50;
  --accent-color: #F39C12;
  --success-color: #27AE60;
  --warning-color: #F1C40F;
  --error-color: #E74C3C;
  --gray-50: #F8F9FA;
  --gray-100: #E9ECEF;
  --gray-200: #DEE2E6;
  --gray-300: #CED4DA;
  --gray-400: #ADB5BD;
  --gray-500: #6C757D;
  --gray-600: #495057;
  --gray-700: #343A40;
  --gray-800: #212529;
  --gray-900: #0D1117;
}

/* Base styles */
@layer base {
  * {
    @apply box-border;
  }
  
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply font-montserrat text-gray-800 bg-gray-50 leading-relaxed;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold text-gray-900;
  }
  
  h1 {
    @apply text-4xl lg:text-5xl;
  }
  
  h2 {
    @apply text-3xl lg:text-4xl;
  }
  
  h3 {
    @apply text-2xl lg:text-3xl;
  }
  
  h4 {
    @apply text-xl lg:text-2xl;
  }
  
  h5 {
    @apply text-lg lg:text-xl;
  }
  
  h6 {
    @apply text-base lg:text-lg;
  }
  
  p {
    @apply text-gray-700 leading-relaxed;
  }
  
  a {
    @apply text-primary hover:text-primary-dark transition-colors duration-200;
  }
  
  input, textarea, select {
    @apply border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
  }
  
  button {
    @apply transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
}

/* Component styles */
@layer components {
  /* Botones */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-dark focus:ring-primary;
  }
  
  .btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
  }
  
  .btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary;
  }
  
  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
  }
  
  .btn-warning {
    @apply bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400;
  }
  
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }
  
  .btn-sm {
    @apply px-4 py-2 text-xs;
  }
  
  .btn-lg {
    @apply px-8 py-4 text-lg;
  }
  
  /* Cards */
  .card {
    @apply bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
  }
  
  .card-body {
    @apply px-6 py-4;
  }
  
  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }
  
  .card-hover {
    @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
  }
  
  /* Formularios */
  .form-group {
    @apply mb-4;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
  }
  
  .form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
  }
  
  .form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg resize-vertical focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
  }
  
  .form-error {
    @apply border-red-500 focus:ring-red-500;
  }
  
  .error-message {
    @apply text-red-600 text-sm mt-1;
  }
  
  /* Navegación */
  .navbar {
    @apply bg-white shadow-lg border-b border-gray-200;
  }
  
  .navbar-brand {
    @apply text-2xl font-bold text-primary;
  }
  
  .navbar-nav {
    @apply flex items-center space-x-6;
  }
  
  .nav-link {
    @apply text-gray-700 hover:text-primary font-medium transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply text-primary font-semibold;
  }
  
  /* Breadcrumbs */
  .breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-600;
  }
  
  .breadcrumb-item {
    @apply hover:text-primary transition-colors duration-200;
  }
  
  .breadcrumb-separator {
    @apply text-gray-400;
  }
  
  /* Alertas */
  .alert {
    @apply px-4 py-3 rounded-lg border-l-4 mb-4;
  }
  
  .alert-success {
    @apply bg-green-50 border-green-500 text-green-800;
  }
  
  .alert-warning {
    @apply bg-yellow-50 border-yellow-500 text-yellow-800;
  }
  
  .alert-error {
    @apply bg-red-50 border-red-500 text-red-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border-blue-500 text-blue-800;
  }
  
  /* Badges */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }
  
  .badge-primary {
    @apply bg-primary text-white;
  }
  
  .badge-secondary {
    @apply bg-gray-500 text-white;
  }
  
  .badge-success {
    @apply bg-green-500 text-white;
  }
  
  .badge-warning {
    @apply bg-yellow-500 text-white;
  }
  
  .badge-danger {
    @apply bg-red-500 text-white;
  }
  
  /* Loading */
  .loading {
    @apply inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary;
  }
  
  .loading-lg {
    @apply h-8 w-8;
  }
  
  /* Modales */
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
  }
  
  .modal {
    @apply bg-white rounded-xl shadow-2xl max-w-lg w-full max-h-screen overflow-y-auto;
  }
  
  .modal-header {
    @apply px-6 py-4 border-b border-gray-200;
  }
  
  .modal-body {
    @apply px-6 py-4;
  }
  
  .modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-3;
  }
  
  /* Tablas */
  .table {
    @apply w-full border-collapse bg-white rounded-lg overflow-hidden shadow;
  }
  
  .table th {
    @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
  }
  
  .table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
  }
  
  .table-striped tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }
  
  .table-hover tbody tr:hover {
    @apply bg-gray-100;
  }
  
  /* Paginación */
  .pagination {
    @apply flex items-center justify-center space-x-2;
  }
  
  .pagination-item {
    @apply px-3 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 transition-colors duration-200;
  }
  
  .pagination-item-active {
    @apply bg-primary text-white border-primary;
  }
  
  /* Instalaciones */
  .installation-card {
    @apply card card-hover cursor-pointer;
  }
  
  .installation-image {
    @apply w-full h-48 object-cover;
  }
  
  .installation-info {
    @apply p-6;
  }
  
  .installation-name {
    @apply text-xl font-semibold text-gray-900 mb-2;
  }
  
  .installation-address {
    @apply text-gray-600 mb-2;
  }
  
  .installation-phone {
    @apply text-gray-600 mb-4;
  }
  
  /* Mapa */
  .map-container {
    @apply rounded-lg overflow-hidden shadow-lg;
  }
  
  .map-info-window {
    @apply p-2;
  }
  
  .map-info-window h3 {
    @apply text-lg font-semibold mb-2;
  }
  
  .map-info-window p {
    @apply text-sm text-gray-600 mb-1;
  }
  
  /* Responsive utilities */
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .section {
    @apply py-12 lg:py-16;
  }
  
  .section-header {
    @apply text-center mb-12;
  }
  
  .section-title {
    @apply text-3xl lg:text-4xl font-bold text-gray-900 mb-4;
  }
  
  .section-subtitle {
    @apply text-lg text-gray-600 max-w-2xl mx-auto;
  }
}

/* Utility classes */
@layer utilities {
  .text-primary {
    color: var(--primary-color);
  }
  
  .text-primary-dark {
    color: var(--primary-dark);
  }
  
  .text-primary-light {
    color: var(--primary-light);
  }
  
  .bg-primary {
    background-color: var(--primary-color);
  }
  
  .bg-primary-dark {
    background-color: var(--primary-dark);
  }
  
  .bg-primary-light {
    background-color: var(--primary-light);
  }
  
  .border-primary {
    border-color: var(--primary-color);
  }
  
  .font-montserrat {
    font-family: 'Montserrat', sans-serif;
  }
  
  .shadow-primary {
    box-shadow: 0 4px 14px 0 rgba(229, 82, 4, 0.39);
  }
  
  .gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  }
  
  .gradient-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-color) 100%);
  }
}

/* Animaciones personalizadas */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.6s ease-out;
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
  .mobile-hidden {
    @apply hidden;
  }
  
  .mobile-full {
    @apply w-full;
  }
  
  .mobile-text-center {
    @apply text-center;
  }
  
  .mobile-px-4 {
    @apply px-4;
  }
  
  .mobile-py-8 {
    @apply py-8;
  }
}

/* Estilos para impresión */
@media print {
  .print-hidden {
    @apply hidden;
  }
  
  .print-break {
    page-break-after: always;
  }
}