/* ===== RESET Y BASE ===== */
* {
    box-sizing: border-box;
  }
  
  /* ===== VARIABLES CSS ===== */
  :root {
    --primary: #3b82f6;
    --primary-hover: #1e40af;
    --secondary: #1e40af;
    --accent: #f59e0b;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
  }
  
  /* ===== LAYOUT COMPONENTS ===== */
  
  /* Header y Navegación */
  .site-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--gray-700);
    text-decoration: none;
  }
  
  .nav-link:hover {
    background-color: var(--gray-50);
    color: var(--primary);
  }
  
  .nav-link.nav-link-primary {
    background-color: var(--primary);
    color: white;
  }
  
  .nav-link.nav-link-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
  }
  
  .nav-link.nav-link-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
  }
  
  .nav-link.nav-link-outline:hover {
    background-color: var(--primary);
    color: white;
  }
  
  .mobile-nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--gray-700);
    text-decoration: none;
  }
  
  .mobile-nav-link:hover {
    background-color: var(--gray-50);
  }
  
  /* ===== BOTONES ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.875rem;
  }
  
  .btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 1px 3px 0 rgba(59, 130, 246, 0.3);
  }
  
  .btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
  }
  
  .btn-secondary {
    background-color: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
  }
  
  .btn-secondary:hover {
    background-color: var(--gray-50);
  }
  
  .btn-success {
    background-color: var(--success);
    color: white;
  }
  
  .btn-success:hover {
    background-color: #059669;
  }
  
  .btn-outline {
    background-color: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
  }
  
  .btn-outline:hover {
    background-color: var(--gray-50);
  }
  
  /* Tamaños de botones */
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.75rem;
  }
  
  .btn-xl {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: 0.75rem;
    font-weight: 600;
  }
  
  /* ===== FORMULARIOS ===== */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    display: flex;
    align-items: center;
  }
  
  .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
  }
  
  .form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
  }
  
  .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
  }
  
  .form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .form-checkbox {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.25rem;
    background-color: white;
  }
  
  .form-checkbox:checked {
    background-color: var(--primary);
    border-color: var(--primary);
  }
  
  /* ===== CARDS ===== */
  .card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
  }
  
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
  }
  
  .card-body {
    padding: 1.5rem;
  }
  
  .card-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--gray-200);
  }
  
  /* ===== BADGES Y TAGS ===== */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
  }
  
  .badge-primary {
    background-color: var(--primary);
    color: white;
  }
  
  .badge-success {
    background-color: var(--success);
    color: white;
  }
  
  .badge-warning {
    background-color: var(--warning);
    color: white;
  }
  
  .badge-error {
    background-color: var(--error);
    color: white;
  }
  
  .badge-gray {
    background-color: var(--gray-100);
    color: var(--gray-700);
  }
  
  .info-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.5rem;
  }
  
  /* ===== MODALES ===== */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
  }
  
  .modal-overlay.hidden {
    display: none;
  }
  
  .modal-container {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
  }
  
  .modal-sm {
    max-width: 28rem;
  }
  
  .modal-md {
    max-width: 42rem;
  }
  
  .modal-lg {
    max-width: 56rem;
  }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
  }
  
  .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
  }
  
  .modal-close-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
  }
  
  .modal-close-btn:hover {
    background-color: var(--gray-100);
    color: var(--gray-700);
  }
  
  .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 8rem);
  }
  
  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  /* ===== TOASTS ===== */
  .toast-stack {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
  }
  
  .toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid;
    animation: toastSlideIn 0.3s ease-out;
    max-width: 24rem;
  }
  
  .toast.toast-slide-out {
    animation: toastSlideOut 0.3s ease-in forwards;
  }
  
  .toast-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
  }
  
  .toast-error {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
  }
  
  .toast-warning {
    background-color: #fffbeb;
    border-color: #fed7aa;
    color: #92400e;
  }
  
  .toast-info {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
  }
  
  .toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    margin-left: auto;
  }
  
  .toast-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  @keyframes toastSlideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes toastSlideOut {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  /* ===== UTILIDADES ===== */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .backdrop-blur {
    backdrop-filter: blur(8px);
  }
  
  .backdrop-blur-lg {
    backdrop-filter: blur(16px);
  }
  
  .text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* ===== NAVBAR MEJORADO ===== */
  .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  
  .navbar-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
  }
  
  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
  }
  
  .brand-logo {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
  }
  
  .brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--gray-700);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .navbar-nav .nav-link:hover {
    background-color: var(--gray-50);
    color: var(--primary);
  }
  
  .navbar-nav .nav-link-primary {
    background-color: var(--primary);
    color: white;
  }
  
  .navbar-nav .nav-link-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
  }
  
  .navbar-nav .nav-link-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
  }
  
  .navbar-nav .nav-link-outline:hover {
    background-color: var(--primary);
    color: white;
  }
  
  /* Mobile menu */
  .mobile-menu-button {
    display: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--gray-600);
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .mobile-menu-button:hover {
    background-color: var(--gray-100);
  }
  
  .mobile-menu {
    display: none;
    background: white;
    border-top: 1px solid var(--gray-200);
  }
  
  .mobile-menu.open {
    display: block;
  }
  
  .mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.25rem;
  }
  
  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .navbar-nav {
      display: none;
    }
    
    .mobile-menu-button {
      display: block;
    }
    
    .modal-container {
      margin: 1rem;
      max-height: calc(100vh - 2rem);
    }
    
    .navbar-content {
      height: 3.5rem;
    }
  }
  
  /* ===== ESTILOS ESPECÍFICOS PARA COMPONENTES ===== */
  
  /* Filtros */
  .filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background-color: white;
    font-size: 0.875rem;
  }
  
  .filter-input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    width: 100%;
  }
  
  /* Paginación */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .pagination-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background: white;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .pagination-btn:hover {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
  }
  
  /* Estados vacíos */
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-500);
  }
  
  .empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }
  
  /* Tablas */
  .table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .table th,
  .table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
  }
  
  .table th {
    background-color: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
  }
  
  /* Asegurar que los colores personalizados funcionen */
  .bg-primary { background-color: var(--primary) !important; }
  .text-primary { color: var(--primary) !important; }
  .border-primary { border-color: var(--primary) !important; }
  
  .bg-secondary { background-color: var(--secondary) !important; }
  .text-secondary { color: var(--secondary) !important; }
  
  .bg-accent { background-color: var(--accent) !important; }
  .text-accent { color: var(--accent) !important; }
  
  /* Override para asegurar funcionalidad */
  .hidden { display: none !important; }
  .flex { display: flex !important; }
  .block { display: block !important; }


  /* ===== CLASES FALTANTES PARA LOS PROBLEMAS IDENTIFICADOS ===== */

/* === BOTONES ESPECÍFICOS === */
.btn-edit-profile {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    background-color: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  
  .btn-edit-profile:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }
  
  /* Botones de la página principal */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    background-color: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 0.875rem;
  }
  
  .btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
  }
  
  /* Botones grandes */
  .btn-primary-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    background-color: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }
  
  .btn-primary-lg:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
  }
  
  .btn-secondary-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    background-color: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1rem;
  }
  
  .btn-secondary-lg:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
  }
  
  .btn-outline-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    background-color: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1rem;
  }
  
  .btn-outline-lg:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
  }
  
  /* === BOTONES SOCIAL MEDIA === */
  .social-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
  }
  
  .social-share-btn:hover {
    transform: scale(1.1);
  }
  
  /* === ESTADÍSTICAS - TARJETAS DE NÚMEROS === */
  .stat-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }
  
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
  }
  
  .stat-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.9;
  }
  
  .stat-content {
    text-align: center;
  }
  
  .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* === BADGES DE ESTADO === */
  .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .status-active {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
  }
  
  .status-inactive {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }
  
  /* === COMPONENTES DE FORMULARIO CREAR OFERTA === */
  .section-card {
    background: var(--gray-50);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
  }
  
  .section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .section-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  
  .section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
  }
  
  .section-description {
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
  }
  
  .section-content {
    space-y: 1.5rem;
  }
  
  /* Checkbox personalizado */
  .feature-checkbox {
    display: none;
  }
  
  .feature-check {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--gray-300);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  
  .feature-checkbox:checked + .feature-check {
    background-color: var(--primary);
    border-color: var(--primary);
  }
  
  .feature-checkbox:checked + .feature-check::after {
    content: '✓';
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
  }
  
  /* Input de archivos múltiples */
  .file-input-multiple {
    width: 100%;
    padding: 0.75rem;
    border: 2px dashed var(--gray-300);
    border-radius: 0.5rem;
    background-color: var(--gray-50);
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .file-input-multiple:hover {
    border-color: var(--primary);
    background-color: var(--gray-100);
  }
  
  .file-input-multiple::file-selector-button {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin-right: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .file-input-multiple::file-selector-button:hover {
    background-color: var(--primary-hover);
  }
  
  /* === MEJORAS PARA TEXTOS TRUNCADOS === */
  .line-clamp-2,
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    -webkit-line-clamp: 3;
  }
  
  /* Asegurar que el texto truncado funcione en todos los navegadores */
  .job-description-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.5em;
    line-height: 1.5;
  }
  
  /* === ESTILOS PARA QUILL EDITOR === */
  .ql-toolbar.ql-snow {
    border-color: var(--gray-300) !important;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background-color: var(--gray-50) !important;
  }
  
  .ql-container.ql-snow {
    border-color: var(--gray-300) !important;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-top: none !important;
  }
  
  .ql-editor {
    min-height: 200px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--gray-700);
  }
  
  .ql-editor.ql-blank::before {
    color: var(--gray-400) !important;
    font-style: italic !important;
  }
  
  .ql-snow .ql-stroke {
    stroke: var(--gray-600) !important;
  }
  
  .ql-snow .ql-fill {
    fill: var(--gray-600) !important;
  }
  
  .ql-snow .ql-picker-label {
    color: var(--gray-600) !important;
  }
  
  .ql-snow .ql-picker-options {
    background-color: white !important;
    border-color: var(--gray-300) !important;
    border-radius: 0.5rem !important;
  }
  
  /* === MEJORAS ESPECÍFICAS PARA BOTONES DE ACCIÓN === */
  .btn-action {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.25rem;
  }
  
  .btn-view {
    background-color: var(--gray-100);
    color: var(--gray-700);
  }
  
  .btn-view:hover {
    background-color: var(--gray-200);
  }
  
  .btn-edit {
    background-color: #dbeafe;
    color: var(--primary);
  }
  
  .btn-edit:hover {
    background-color: #bfdbfe;
  }
  
  .btn-delete {
    background-color: #fef2f2;
    color: #ef4444;
  }
  
  .btn-delete:hover {
    background-color: #fecaca;
  }
  
  /* === MEJORAS PARA TARJETAS DE OFERTAS === */
  .job-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary);
  }
  
  .job-card-featured {
    border-left: 4px solid var(--accent);
  }
  
  .job-card-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-100);
  }
  
  .job-card-body {
    padding: 1.25rem;
  }
  
  .job-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gray-100);
    background-color: var(--gray-50);
  }
  
  /* === MEJORAS PARA FILTROS === */
  .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  
  .filter-select,
  .filter-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background-color: white;
    font-size: 0.875rem;
    transition: all 0.2s ease;
  }
  
  .filter-select:focus,
  .filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
  }
  
  .filter-checkbox:hover {
    border-color: var(--primary);
  }
  
  .filter-checkbox input[type="checkbox"] {
    margin: 0;
  }
  
  /* === MEJORAS PARA PAGINACIÓN === */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  
  .pagination-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background-color: white;
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
  }
  
  .pagination-btn:hover:not(:disabled) {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
  }
  
  .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .pagination-info {
    padding: 0.5rem 1rem;
    color: var(--gray-600);
    font-size: 0.875rem;
  }
  
  /* === MEJORAS PARA ESTADOS VACÍOS === */
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-500);
  }
  
  .empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }
  
  .empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
  }
  
  .empty-state-description {
    color: var(--gray-500);
    margin-bottom: 1.5rem;
  }
  
  /* === RESPONSIVE ADICIONAL === */
  @media (max-width: 768px) {
    .section-header {
      flex-direction: column;
      text-align: center;
    }
    
    .section-icon {
      align-self: center;
    }
    
    .stat-card {
      padding: 1rem;
    }
    
    .stat-number {
      font-size: 2rem;
    }
    
    .btn-primary-lg,
    .btn-secondary-lg,
    .btn-outline-lg {
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
    }
    
    .filter-group {
      flex-direction: column;
      align-items: stretch;
    }
    
    .filter-select,
    .filter-input,
    .filter-checkbox {
      width: 100%;
    }
  }
  
  /* === UTILIDADES ADICIONALES === */
  .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .border-gradient {
    border: 1px solid;
    border-image: linear-gradient(135deg, var(--primary), var(--secondary)) 1;
  }
  
  .shadow-gradient {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  }
  
  .hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
  }
  
  /* === CORRECCIONES PARA ELEMENTOS ESPECÍFICOS MENCIONADOS === */
  
  /* Asegurar que los botones de redes sociales tengan colores específicos */
  .social-share-btn.bg-blue-600 { background-color: #2563eb !important; }
  .social-share-btn.bg-blue-600:hover { background-color: #1d4ed8 !important; }
  
  .social-share-btn.bg-gray-800 { background-color: #1f2937 !important; }
  .social-share-btn.bg-gray-800:hover { background-color: #111827 !important; }
  
  .social-share-btn.bg-blue-800 { background-color: #1e40af !important; }
  .social-share-btn.bg-blue-800:hover { background-color: #1e3a8a !important; }
  
  .social-share-btn.bg-red-600 { background-color: #dc2626 !important; }
  .social-share-btn.bg-red-600:hover { background-color: #b91c1c !important; }
  
  /* Asegurar que los badges de estado se vean bien */
  .status-badge.status-active,
  .status-badge.status-inactive {
    display: inline-flex !important;
    align-items: center;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }
  
  /* Corrección para textos truncados en ofertas */
  .job-description-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.5em;
    line-height: 1.5;
    color: var(--gray-600);
  }
  
  /* Asegurar que los formularios se vean consistentes */
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  }
  
  /* Mejoras para las tarjetas de estadísticas en "Mis Ofertas" */
  .stat-card .stat-number {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* Corrección para botones en modales */
  .modal-body .btn-primary {
    width: 100%;
    justify-content: center;
  }


  /* === ANIMACIONES PARA EL HERO MODERNO === */
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
  }
  
  /* Efectos de glassmorphism */
  .glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  /* Efectos de gradiente animado */
  .gradient-border {
    position: relative;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
    padding: 2px;
    border-radius: 1rem;
  }
  
  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    animation: rotate 3s linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Efectos de partículas flotantes */
  .floating-element {
    animation: float 6s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  /* Mejoras para textos con gradiente */
  .text-gradient-animated {
    background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
  }
  
  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Efectos de hover mejorados */
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  
  /* Mejoras de responsividad para el hero */
  @media (max-width: 1024px) {
    .hero-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
    
    .hero-visual {
      order: -1;
      margin-bottom: 2rem;
    }
  }
  
  /* Efectos de brillo y glow */
  .glow-effect {
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
  }
  
  .hover-glow:hover {
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.5));
  }


  /* === FILTROS MEJORADOS === */

/* Botón de filtro principal */
.btn-filter-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }
  
  .btn-filter-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, var(--primary-hover), var(--secondary));
  }
  
  /* Checkbox de destacadas mejorado */
  .featured-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 0.75rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .featured-checkbox:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
  }
  
  .featured-checkbox input:checked + .checkmark {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-color: #f59e0b;
  }
  
  .featured-checkbox input:checked + .checkmark .featured-star {
    color: white;
    transform: scale(1.1);
  }
  
  .featured-checkbox .checkmark {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--gray-400);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: white;
  }
  
  .featured-checkbox .featured-star {
    color: var(--gray-400);
    font-size: 0.75rem;
    transition: all 0.3s ease;
  }
  
  .featured-checkbox .filter-checkbox-text {
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.3s ease;
  }
  
  .featured-checkbox input:checked ~ .filter-checkbox-text {
    color: #f59e0b;
    font-weight: 600;
  }
  
  /* Selectores múltiples mejorados */
  .filter-multiselect {
    position: relative;
  }
  
  .selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 2rem;
  }
  
  .filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: white;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
  }
  
  .filter-tag-remove {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 0.125rem;
    transition: background-color 0.2s ease;
  }
  
  .filter-tag-remove:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .filter-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
  }
  
  /* Filtros activos */
  #active-filters {
    background: var(--gray-50);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
  }
  
  .active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .active-filter-tag-remove {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
  }
  
  .active-filter-tag-remove:hover {
    background-color: var(--primary);
    color: white;
  }
  
  /* Animación para filtros avanzados */
  #advanced-filters {
    transition: all 0.3s ease;
  }
  
  #advanced-filters.show {
    display: block;
    animation: slideDown 0.3s ease;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Mejoras para selects con íconos */
  .filter-select option {
    padding: 0.5rem;
  }
  
  /* Inputs de ubicación con íconos */
  .form-group .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
  }
  
  /* Responsive para filtros */
  @media (max-width: 768px) {
    .filter-checkbox {
      width: 100%;
      justify-content: center;
    }
    
    .btn-filter-primary {
      width: 100%;
      justify-content: center;
    }
    
    .active-filter-tag {
      font-size: 0.75rem;
      padding: 0.375rem 0.5rem;
    }
  }
  
  /* Estados de carga para selects */
  .filter-select.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
  }
  
  /* Mejoras visuales para inputs de salario */
  .filter-input[type="number"] {
    -moz-appearance: textfield;
  }
  
  .filter-input[type="number"]::-webkit-outer-spin-button,
  .filter-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* === Candidaturas – Tarjeta moderna === */
.app-card{
  position: relative;
  border-radius: 1rem;                 /* rounded-2xl */
  background: white;
  border: 1px solid rgba(226,232,240,.8); /* border-gray-200 */
  padding: 1rem;                       /* p-4 */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 6px 18px rgba(2, 8, 23, .06);
  overflow: hidden;
}

/* Borde degradado sutil */
.app-card::before{
  content:"";
  position:absolute; inset: -1px;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(6,182,212,.12));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; pointer-events: none;
}

/* Franja de estado a la izquierda */
.app-card::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px; opacity:.9;
  background: var(--state-color, #e5e7eb);
}

/* Hover */
.app-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(2,8,23,.10); }

/* Header */
.app-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.app-title{ font-weight:700; color:#0f172a; line-height:1.2; }
.app-company{ font-size:.9rem; color:#64748b; margin-top:.15rem; }

/* Avatar (inicial de empresa) */
.app-avatar{
  width: 2.5rem; height:2.5rem; border-radius:.9rem;
  display:grid; place-items:center; font-weight:800;
  background: linear-gradient(135deg, #3b82f6, #06b6d4); color:white;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
}

/* Badge estado */
.app-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:9999px; font-size:.72rem; font-weight:700;
  border:1px solid; background:#fff; white-space:nowrap;
}
.state-pending  { --state-color:#f59e0b; color:#92400e; border-color:#fde68a; background:#fffbeb; }
.state-reviewed { --state-color:#3b82f6; color:#1e3a8a; border-color:#bfdbfe; background:#eff6ff; }
.state-rejected { --state-color:#ef4444; color:#7f1d1d; border-color:#fecaca; background:#fef2f2; }
.state-hired    { --state-color:#10b981; color:#065f46; border-color:#a7f3d0; background:#ecfdf5; }
.state-enviada  { --state-color:#f59e0b; color:#92400e; border-color:#fde68a; background:#fffbeb; } /* por si viene "enviada" */

/* Meta chips */
.app-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.app-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .6rem; border-radius:.6rem; font-size:.8rem; color:#475569;
  background:#f8fafc; border:1px solid #e2e8f0;
}
.app-chip i{ color:#94a3b8; }

/* Acciones */
.app-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.app-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; padding:.55rem .8rem; border-radius:.7rem; border:1px solid; transition: background .2s ease; }
.app-btn.view{ border-color:#e2e8f0; color:#0f172a; background:#fff; }
.app-btn.view:hover{ background:#f8fafc; }
.app-btn.withdraw{ border-color:#fecaca; color:#b91c1c; background:#fff; }
.app-btn.withdraw:hover{ background:#fef2f2; }

/* Skeleton tarjeta */
.app-skel{
  height: 112px; border-radius: 1rem;
  background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%);
  background-size: 400% 100%; animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* Forzar modo claro en los elementos de estadísticas */
.stat-glass {
    color-scheme: light !important;
    forced-color-adjust: none !important;
    -ms-high-contrast-adjust: none !important;
  }
  
  /* Asegurar que los fondos se mantengan claros */
  .stat-glass {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  /* Opcional: Media query específica para modo oscuro */
  @media (prefers-color-scheme: dark) {
    .stat-glass {
      background: rgba(255, 255, 255, 0.9) !important;
      color: #000 !important;
    }
    
    .stat-label {
      color: #374151 !important; /* gris-700 */
    }
  }