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

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fondoAnimado {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Aplicación directa */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

body {
  @apply min-h-screen flex flex-col;
  background: linear-gradient(-45deg, #0f172a, #1a2536, #263142, #0f2047);

  background-size: 400% 400%;
  animation: fondoAnimado 15s ease infinite;
}

@layer components {

  /* Layout estructural */
  .header {
    @apply bg-gray-900 text-white shadow-sm border-b border-gray-700;
  }

  .footer {
    @apply bg-gray-900 text-white text-center py-4 text-sm relative;
  }

  .section {
    @apply max-w-4xl mx-auto px-4 py-8;
  }

  .auth-wrapper {
    @apply min-h-screen flex items-center justify-center px-4 py-12;
  }

  /* Estilos reutilizables */
  .login-card,
  .form-card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden fade-in w-full max-w-md;
  }

  .form-section {
    @apply px-6 py-6;
  }

  .form-section h2 {
    @apply text-2xl font-bold text-gray-100 mb-4 text-center;
  }

  .form-group {
    @apply mb-4;
  }

  .label {
    @apply block text-sm font-medium text-gray-200 mb-1;
  }



  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  /* Fondo dinámico alternativo para recuperación */
  .recuperar-bg {
    background: linear-gradient(145deg, #f9fafb, #e2e8f0, #cbd5e1, #f8fafc);
    background-size: 400% 400%;
    animation: fondoAnimado 25s ease infinite;
  }

  .form-card {
    @apply bg-white/80 backdrop-blur-md rounded-xl shadow-lg w-full max-w-md;
  }

  /* Ajustes para la navegación móvil */
  @media (max-width: 768px) {
    #mobile-menu {
      min-height: 100vh;
    }
  }
}
@layer components {
  #simsTable {
    @apply w-full table-auto;
  }
  #simsTable th,
  #simsTable td {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

@layer base {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  input[type="file"],
  select,
  textarea {
    @apply bg-brand-800 border border-brand-600 text-gray-100 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-brand-accent transition;
  }

  button {
    @apply transition;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-medium;
  }

  .btn-primary {
    @apply bg-brand-accent text-white hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .form-control-file {
    @apply text-gray-100;
  }

  /* --- Tema oscuro select2 adicional --- */
  /* Fondo y texto del select cerrado */
  body .select2-container--default .select2-selection--single {
    background-color: #1f2937; /* bg-gray-800 */
    border: 1px solid #4b5563; /* border-gray-600 */
    color: #f9fafb; /* text-gray-100 */
    border-radius: 0.375rem; /* rounded-md */
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
  }

  /* El texto que se muestra seleccionado */
  body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f9fafb; /* text-gray-100 */
  }

  /* Input de búsqueda dentro del desplegable */
  body .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #1f2937;
    color: #f9fafb;
    border: 1px solid #4b5563;
  }

  /* Opciones del desplegable */
  body .select2-container--default .select2-results > .select2-results__options {
    background-color: #1f2937;
    color: #f9fafb;
  }

  /* Opción resaltada con el ratón */
  body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2563eb; /* bg-blue-600 */
    color: #f9fafb;
  }

  /* Opciones seleccionadas en múltiple */
  body .select2-container--default .select2-selection--multiple {
    background-color: #1f2937;
    border: 1px solid #4b5563;
    color: #f9fafb;
    border-radius: 0.375rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
  }

  /* Etiquetas de las SIMs seleccionadas */
  body .select2-container--default .select2-selection__choice {
    background-color: #374151 !important; /* bg-gray-700 */
    border: 1px solid #4b5563; /* border-gray-600 */
    color: #f9fafb; /* text-gray-100 */
  }

  /* Texto dentro de las etiquetas de SIMs */
  body .select2-container--default .select2-selection__choice__remove {
    color: #f9fafb;
  }
}

/* Fuerza el color blanco en el texto del Select2 cerrado */
body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f9fafb !important;
}

/* Correcciones de color y fondo para Select2 y filtros de DataTables */
body .select2-container--default .select2-selection--single {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

.dataTables_wrapper thead input {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
  border: 1px solid #4b5563 !important;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

#clientesTable th,
#clientesTable td {
  white-space: normal;
  word-break: break-word;
}

/* Select2 cerrado */
.select2-container--default .select2-selection--single {
  background-color: #1f2937 !important;
  border: 1px solid #4b5563 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f9fafb !important;
}

/* Select2 búsqueda interna */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

/* DataTables inputs de cabecera */
.dataTables_wrapper thead input {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
  border: 1px solid #4b5563 !important;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

/* Tabla responsive sin barra scroll */
#clientesTable {
  width: 100% !important;
  table-layout: auto !important;
}

#clientesTable th,
#clientesTable td {
  white-space: normal !important;
  word-break: break-word !important;
}

html,
body {
  overflow-x: hidden;
}

/* Responsive tables */
@media (max-width: 768px) {
  #clientesTable thead,
  #simsTable thead {
    display: none;
  }

  #clientesTable tr,
  #simsTable tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid #374151;
  }

  #clientesTable td::before,
  #simsTable td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #9ca3af;
    margin-right: 0.5rem;
    display: block;
  }
}

/* Reusable admin card styles */
.admin-card-row {
  @apply rounded-xl p-4 border border-white/10 bg-white/5 shadow;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Destaca las filas de agrupación por cliente en sims_por_cliente */
#simsClienteTable tr.dtrg-group th {
  background-color: blue !important;
  color: #ffffff;
}