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

/* 
 * Horus Web - Sistema de Diseño Unificado
 * Plataforma Profesional de Registro de Dominios .CO
 * 
 * Este archivo centraliza todo el sistema de diseño visual
 * utilizando Tailwind CSS y componentes personalizados modernos.
 */

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

@layer base {
  :root {
    /* === PALETA DE COLORES PROFESIONAL === */
    
    /* Primary - Nuevo Color Institucional */
    --color-primary-50: #f7f8f9;
    --color-primary-100: #edeef1;
    --color-primary-200: #d8dce2;
    --color-primary-300: #b6bcc7;
    --color-primary-400: #8e97a7;
    --color-primary-500: #6f7a8c;
    --color-primary-600: #5a6375;
    --color-primary-700: #4a5260;
    --color-primary-800: #3f4651;
    --color-primary-900: #2d3343;
    
    /* Secondary - Grises Modernos */
    --color-secondary-50: #f8fafc;
    --color-secondary-100: #f1f5f9;
    --color-secondary-200: #e2e8f0;
    --color-secondary-300: #cbd5e1;
    --color-secondary-400: #94a3b8;
    --color-secondary-500: #64748b;
    --color-secondary-600: #475569;
    --color-secondary-700: #334155;
    --color-secondary-800: #1e293b;
    --color-secondary-900: #0f172a;
    
    /* Success - Verde para Confirmaciones */
    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-200: #a7f3d0;
    --color-success-300: #6ee7b7;
    --color-success-400: #34d399;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065f46;
    --color-success-900: #064e3b;
    
    /* Warning - Amarillo para Alertas */
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;
    
    /* Error - Rojo para Errores */
    --color-error-50: #fef2f2;
    --color-error-100: #fee2e2;
    --color-error-200: #fecaca;
    --color-error-300: #fca5a5;
    --color-error-400: #f87171;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;
    --color-error-800: #991b1b;
    --color-error-900: #7f1d1d;
    
    /* === TIPOGRAFÍA MODERNA === */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* === ESPACIADO Y DIMENSIONES === */
    --container-max-width: 960px;
    
    /* === SOMBRAS PROFESIONALES === */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* === BORDES Y RADIOS === */
    --radius-sm: 0.375rem;
    --radius-base: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    
    /* === TRANSICIONES PROFESIONALES === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Configuración Base del Body */
  body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-secondary-700);
    background-color: var(--color-secondary-50);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Mejoras de Accesibilidad */
  *:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

@layer components {
  /* === SISTEMA DE CONTENEDORES === */
  
  .main-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 1024px) {
    .main-container {
      padding: 0;
    }
  }

  /* === SISTEMA DE BOTONES UNIFICADO === */
  
  .btn {
    @apply inline-flex items-center justify-center gap-2 font-medium border-0 cursor-pointer transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
    border-radius: var(--radius-base);
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }

  /* Tamaños de Botones */
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
    min-height: 2rem;
  }

  .btn-md {
    @apply px-4 py-2.5 text-sm;
    min-height: 2.5rem;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
    min-height: 3rem;
  }

  .btn-xl {
    @apply px-8 py-4 text-lg;
    min-height: 3.5rem;
  }

  /* Variantes de Botones */
  .btn-primary {
    @apply text-white;
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
    box-shadow: var(--shadow-sm);
  }

  .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  .btn-secondary {
    @apply bg-white border border-gray-300 text-gray-700;
    box-shadow: var(--shadow-sm);
  }

  .btn-secondary:hover:not(:disabled) {
    @apply bg-gray-50 border-gray-400;
    box-shadow: var(--shadow-base);
    transform: translateY(-1px);
  }

  .btn-success {
    @apply text-white;
    background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
    box-shadow: var(--shadow-sm);
  }

  .btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .btn-danger {
    @apply text-white;
    background: linear-gradient(135deg, var(--color-error-500) 0%, var(--color-error-600) 100%);
    box-shadow: var(--shadow-sm);
  }

  .btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-error-600) 0%, var(--color-error-700) 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .btn-outline {
    @apply bg-transparent border-2 text-primary-600 border-primary-600;
  }

  .btn-outline:hover:not(:disabled) {
    @apply bg-primary-600 text-white;
  }

  .btn-ghost {
    @apply bg-transparent text-gray-600;
  }

  .btn-ghost:hover:not(:disabled) {
    @apply bg-gray-100 text-gray-900;
  }

  /* === SISTEMA DE TARJETAS === */
  
  

  .card-header {
    @apply p-6 border-b border-gray-200 bg-gray-50;
  }

  .card-body {
    @apply p-6;
  }

  .card-footer {
    @apply p-6 border-t border-gray-200 bg-gray-50;
  }

  /* === SISTEMA DE FORMULARIOS === */
  
  .form-input {
    @apply appearance-none border-2 border-gray-200 rounded-lg px-4 py-3 text-base w-full bg-white transition-all duration-200 text-gray-700;
    font-family: var(--font-family);
  }

  .form-input:focus {
    @apply outline-none border-primary-500;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
  }

  .form-input:hover:not(:focus) {
    @apply border-gray-300;
  }

  .form-input::placeholder {
    @apply text-gray-400;
  }

  .form-input.error {
    @apply border-red-500;
  }

  .form-input.error:focus {
    @apply border-red-500;
    box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  .form-error {
    @apply text-red-600 text-sm mt-1;
  }

  .form-help {
    @apply text-gray-500 text-sm mt-1;
  }

  /* === SISTEMA DE BADGES === */
  
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }

  .badge-error {
    @apply bg-red-100 text-red-800;
  }

  .badge-info {
    @apply bg-blue-100 text-blue-800;
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-800;
  }

  /* === SISTEMA DE ALERTAS === */
  
  .alert {
    @apply p-4 rounded-lg border;
  }

  .alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
  }

  .alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }

  .alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
  }

  .alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }

  /* === NAVEGACIÓN === */
  
  .nav-link {
    @apply flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-lg transition-colors duration-200;
  }

  .nav-link:hover {
    @apply bg-gray-100 text-gray-900;
  }

  .nav-link.active {
    @apply bg-primary-100 text-primary-700;
  }

  /* === DROPDOWN === */
  
  .dropdown {
    @apply relative inline-block;
  }

  .dropdown-toggle {
    @apply nav-link;
  }

  .dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50 opacity-0 invisible transform scale-95 transition-all duration-200;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown-menu.show {
    @apply opacity-100 visible scale-100;
  }

  .dropdown-item {
    @apply flex items-center px-4 py-2 text-sm text-gray-700 transition-colors duration-150;
  }

  .dropdown-item:hover {
    @apply bg-gray-100 text-gray-900;
  }

  .dropdown-divider {
    @apply border-t border-gray-200 my-1;
  }

  /* === TABLAS RESPONSIVAS === */
  
  .table-container {
    @apply overflow-x-auto;
  }

  .table {
    @apply w-full text-sm text-left text-gray-700;
  }

  .table th {
    @apply px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table td {
    @apply px-6 py-4 whitespace-nowrap border-b border-gray-200;
  }

  .table tbody tr:hover {
    @apply bg-gray-50;
  }

  /* === SISTEMA DE GRILLAS === */
  
  .grid-cols-responsive {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .grid-cols-dashboard {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* === ESTADOS DE CARGA === */
  
  .loading-spinner {
    @apply animate-spin h-5 w-5 border-2 border-gray-300 border-t-primary-600 rounded-full;
  }

  .skeleton {
    @apply bg-gray-200 animate-pulse rounded;
  }

  /* === UTILIDADES DE ANIMACIÓN === */
  
  .fade-in {
    animation: fadeIn 0.6s ease-out;
  }

  .slide-up {
    animation: slideUp 0.4s ease-out;
  }

  .hover-lift {
    transition: transform var(--transition-base);
  }

  .hover-lift:hover {
    transform: translateY(-4px);
  }
}

@layer utilities {
  /* === UTILIDADES PERSONALIZADAS === */
  
  .text-balance {
    text-wrap: balance;
  }

  .bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  }

  .bg-gradient-success {
    background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
  }

  .shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }

  .shadow-glow-success {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }

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

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

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  /* === MEJORAS RESPONSIVAS === */
  
  @media (max-width: 640px) {
    .main-container {
      padding: 0 0.75rem;
    }
    
    .btn-lg {
      @apply px-4 py-2.5 text-sm;
      min-height: 2.5rem;
    }
    
    .card-body,
    .card-header,
    .card-footer {
      @apply p-4;
    }
  }

  /* === MEJORAS DE CONTRASTE === */
  
  @media (prefers-contrast: high) {
    .btn,
    .card,
    .form-input {
      border-width: 2px;
    }
    
    .btn-outline {
      border-width: 3px;
    }
  }

  /* === PRINT STYLES === */
  
  @media print {
    .no-print {
      display: none !important;
    }
    
    .btn {
      border: 1px solid #000 !important;
      background: transparent !important;
      color: #000 !important;
    }
  }
}

/* === COMPONENTES ESPECIALIZADOS PARA HORUS === */

/* Estilos específicos para tickets de soporte */
.ticket-status-open { @apply badge badge-error; }
.ticket-status-in-progress { @apply badge badge-warning; }
.ticket-status-pending { @apply badge badge-warning; }
.ticket-status-resolved { @apply badge badge-success; }
.ticket-status-closed { @apply badge badge-gray; }

.ticket-priority-low { @apply badge badge-info; }
.ticket-priority-normal { @apply badge badge-gray; }
.ticket-priority-high { @apply badge badge-warning; }
.ticket-priority-critical { @apply badge badge-error; }

/* Estilos para estados de dominio */
.domain-status-active { @apply badge badge-success; }
.domain-status-expired { @apply badge badge-error; }
.domain-status-pending { @apply badge badge-warning; }
.domain-status-suspended { @apply badge badge-gray; }

/* Headers específicos para Dashboard */
.dashboard-header {
  @apply mb-8;
}

.dashboard-stats {
  @apply grid grid-cols-1 md:grid-cols-3 gap-6 mb-8;
}

.stat-card {
  @apply card card-body text-center;
}

/* Mejoras para formularios largos */
.form-section {
  @apply space-y-6 pb-8 border-b border-gray-200 last:border-b-0 last:pb-0;
}

.form-section-title {
  @apply text-lg font-semibold text-gray-900 mb-4;
}

/* Compatibilidad con componentes legacy */
.btn-enhanced { @apply btn; }
.btn-enhanced-primary { @apply btn-primary; }
.btn-enhanced-secondary { @apply btn-secondary; }
.btn-enhanced-sm { @apply btn-sm; }
.btn-enhanced-md { @apply btn-md; }
.btn-enhanced-lg { @apply btn-lg; }

.card-enhanced { @apply card; }
.card-enhanced-header { @apply card-header; }
.card-enhanced-body { @apply card-body; }
.card-enhanced-footer { @apply card-footer; }

.nav-link-enhanced { @apply nav-link; }
.dropdown-enhanced { @apply dropdown; }
.dropdown-enhanced-content { @apply dropdown-menu; }
.dropdown-enhanced-item { @apply dropdown-item; }

/* Legacy support para clases antiguas */
.nav-enhanced { @apply bg-white border-b border-gray-200 shadow-sm; }
.text-h1 { @apply text-3xl font-bold; }
.text-h2 { @apply text-2xl font-bold; }
.text-h3 { @apply text-xl font-semibold; }
.text-h4 { @apply text-lg font-semibold; }
.text-h5 { @apply text-base font-semibold; }
.text-body-lg { @apply text-lg; }
.text-body-sm { @apply text-sm; }
.status-badge { @apply badge; }
.status-badge-success { @apply badge-success; }

/* Grid enhanced classes para compatibilidad */
.grid-enhanced { @apply grid gap-6; }
.grid-enhanced-1 { @apply grid-cols-1; }
.grid-enhanced-2 { @apply grid-cols-1 md:grid-cols-2; }
.grid-enhanced-3 { @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3; }

/* Optimización final para performance */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
    @apply grid-cols-1 md:grid-cols-2;
}

.horus-grid-3 {
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
}

.horus-grid-4 {
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-4;
}

/* =============================================================================
   TYPOGRAPHY SYSTEM
   ============================================================================= */

.horus-h1 {
    @apply text-3xl lg:text-4xl font-bold text-gray-900 tracking-tight;
}

.horus-h2 {
    @apply text-2xl lg:text-3xl font-bold text-gray-900 tracking-tight;
}

.horus-h3 {
    @apply text-xl lg:text-2xl font-bold text-gray-900;
}

.horus-h4 {
    @apply text-lg lg:text-xl font-semibold text-gray-900;
}

.horus-h5 {
    @apply text-base lg:text-lg font-semibold text-gray-900;
}

.horus-h6 {
    @apply text-sm lg:text-base font-semibold text-gray-900;
}

.horus-body {
    @apply text-sm lg:text-base text-gray-600;
}

.horus-body-sm {
    @apply text-xs lg:text-sm text-gray-600;
}

.horus-body-lg {
    @apply text-base lg:text-lg text-gray-600;
}

/* =============================================================================
   RESPONSIVE UTILITIES
   ============================================================================= */

@media (max-width: 640px) {
    .horus-mobile-stack {
        @apply flex-col space-y-3;
    }
    
    .horus-mobile-full {
        @apply w-full;
    }
    
    .horus-mobile-hidden {
        @apply hidden;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .horus-no-print {
        display: none !important;
    }
    
    .horus-card {
        @apply shadow-none border border-gray-300;
    }
}