/* 
 * Estilos personalizados - Portal de Empleo
 * Complementa a Tailwind CSS
 */

/* Fuente base */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Tipografía de encabezados */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Urbanist', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Animaciones para toasts */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: slideIn 0.3s ease-out forwards;
}

.toast-leave {
  animation: slideOut 0.3s ease-in forwards;
}

/* ============================================================
   PALETA CORPORATIVA
   Clase base para colores de marca y neutros.
   Las clases bg-brand / text-brand / border-brand se definen
   dinámicamente en header.php vía var(--brand-color).
   Aquí se añaden los tonos neutros/oscuros del sistema.
   ============================================================ */
:root {
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
}

/* Fondos neutros */
.bg-neutral-light {
  background-color: var(--neutral-100);
}

.bg-neutral {
  background-color: var(--neutral-600);
}

.bg-neutral-dark {
  background-color: var(--neutral-800);
}

/* Textos neutros */
.text-neutral-soft {
  color: var(--neutral-500);
}

.text-neutral {
  color: var(--neutral-700);
}

.text-neutral-dark {
  color: var(--neutral-900);
}

/* Bordes neutros */
.border-neutral {
  border-color: var(--neutral-300);
}

.border-neutral-dark {
  border-color: var(--neutral-700);
}

/* Botón secundario — usa var(--secondary-color) configurable desde admin */
.btn-slate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  background-color: var(--secondary-color, #1F2937);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-slate:hover {
  background-color: color-mix(in srgb, var(--secondary-color, #1F2937) 80%, white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.btn-slate:active {
  background-color: color-mix(in srgb, var(--secondary-color, #1F2937) 90%, black);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Cards con hover */
.job-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Badges de estado */
.status-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-pending {
  @apply bg-yellow-100 text-yellow-800;
}

.status-reviewing {
  @apply bg-blue-100 text-blue-800;
}

.status-interview {
  @apply bg-purple-100 text-purple-800;
}

.status-accepted {
  @apply bg-green-100 text-green-800;
}

.status-rejected {
  @apply bg-red-100 text-red-800;
}

/* Botones */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  background-color: var(--brand-color) !important;
  color: white !important;
  @apply focus:ring-offset-2;
}

.btn-primary:hover {
  filter: brightness(0.9);
}

.btn-secondary {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

/* Inputs mejorados con mayor padding y bordes visibles */
.form-input,
input.form-input,
textarea.form-input,
select.form-input {
  width: 100%;
  padding: 0.875rem 1rem !important;
  border: 2px solid #D1D5DB !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease-in-out !important;
  font-size: 0.95rem !important;
  color: #374151;
  line-height: 1.5 !important;
  background-color: #ffffff !important;
}

.form-input::placeholder {
  color: #9CA3AF !important;
}

.form-input:hover {
  border-color: #9CA3AF !important;
}

.form-input:focus {
  outline: none !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Textareas específicamente */
textarea.form-input {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Select específicamente */
select.form-input {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem !important;
  padding-right: 2.5rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.form-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.5rem !important;
}

/* Estados deshabilitados */
.form-input:disabled {
  background-color: #F9FAFB !important;
  color: #6B7280 !important;
  cursor: not-allowed !important;
  border-color: #E5E7EB !important;
}

.form-input[readonly] {
  background-color: #F9FAFB !important;
  border-color: #E5E7EB !important;
}

/* Sidebar admin */
.sidebar-link {
  @apply flex items-center px-4 py-2.5 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-lg transition-colors duration-200;
}

.sidebar-link.active {
  @apply bg-blue-50 text-blue-700;
}

/* Tablas */
.table-container {
  @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 rounded-lg;
}

.data-table {
  @apply min-w-full divide-y divide-gray-200;
}

.data-table thead {
  @apply bg-gray-50;
}

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

.data-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

/* Paginación */
.pagination {
  @apply flex items-center justify-center space-x-1;
}

.pagination a,
.pagination span {
  @apply px-3 py-2 text-sm border rounded-md;
}

.pagination a {
  @apply bg-white border-gray-300 text-gray-700 hover:bg-gray-50;
}

.pagination .active {
  @apply bg-blue-600 border-blue-600 text-white;
}

.pagination .disabled {
  @apply bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed;
}

/* Modal */
.modal-backdrop {
  @apply fixed inset-0 bg-black bg-opacity-50 transition-opacity;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl transform transition-all;
}

/* Tags/Skills */
.skill-tag {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800;
}

/* Timeline historial */
.timeline-item {
  @apply relative pb-8;
}

.timeline-item:not(:last-child)::before {
  content: '';
  @apply absolute left-4 top-8 w-0.5 h-full bg-gray-200;
}

.timeline-dot {
  @apply absolute left-0 w-8 h-8 rounded-full flex items-center justify-center;
}

/* Loading spinner */
.spinner {
  @apply animate-spin h-5 w-5 text-white;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .mobile-menu {
    @apply fixed inset-0 z-50 bg-white transform transition-transform duration-300;
  }

  .mobile-menu.hidden {
    transform: translateX(-100%);
  }
}

/* Filtros sticky */
.filters-sticky {
  @apply sticky top-0 bg-white z-10 pb-4 border-b;
}

/* Empty state */
.empty-state {
  @apply text-center py-12;
}

.empty-state svg {
  @apply mx-auto h-12 w-12 text-gray-400;
}

.empty-state h3 {
  @apply mt-2 text-sm font-medium text-gray-900;
}

.empty-state p {
  @apply mt-1 text-sm text-gray-500;
}

/* Alert boxes */
.alert {
  @apply px-4 py-3 rounded-lg mb-4;
}

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

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

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

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