/* --- 1. VARIABLES ESPECÍFICAS DE ESTA PÁGINA --- */
:root {
    --primary: #2563EB;
    --btn-inactive: #546e7a;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --bg-body: #F8FAFC;
    --border-radius: 12px;
    --danger: #ef4444;
}

/* --- 2. LAYOUT PRINCIPAL (GRID) --- */
.main-container {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar fijo 280px */
    gap: 2.5rem;
    align-items: start;
}

/* --- 3. SIDEBAR DE FILTROS --- */
.filters-sidebar {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 90px;
    /*max-height: 85vh;*/
    overflow-y: auto;
}
.container-center { max-width: 1100px; margin: 0 auto; padding: 0 20px; padding-top: 20px; }
.breadcrumb-row { margin-bottom: 25px; font-size: 14px; color: #64748b; }
    .breadcrumb-row a { color: #64748b; text-decoration: none; transition: 0.2s; }
    .breadcrumb-row a:hover { color: #0000FF; }
    .breadcrumb-separator { margin: 0 8px; color: #cbd5e1; }
    .breadcrumb-current { color: #94a3b8; }

/* Cabecera del sidebar (Solo visible en móvil) */
.filters-header-mobile {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}
.f-mobile-title { font-size: 1.2rem; font-weight: 800; }
.close-icon { font-size: 1.5rem; cursor: pointer; color: var(--text-muted); padding: 5px; }

.filter-section { margin-bottom: 2rem; }
.filter-title { 
    font-size: 1rem; font-weight: 700; color: #0f172a; 
    margin-bottom: 1rem; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; 
}

/* Estilo Radio Buttons */
.radio-item { display: flex; align-items: center; margin-bottom: 12px; cursor: pointer; font-size: 0.95rem; color: var(--text-main); transition: 0.2s; }
.radio-item:hover { color: var(--primary); }
.radio-item input[type="radio"] {
    appearance: none; width: 18px; height: 18px; border: 2px solid #cbd5e1;
    border-radius: 50%; margin-right: 10px; position: relative; cursor: pointer;
}
.radio-item input[type="radio"]:checked { border-color: var(--primary); background-color: white; }
.radio-item input[type="radio"]:checked::after {
    content: ''; position: absolute; width: 10px; height: 10px; background: var(--primary);
    border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);
}


/* Estilo Botones Píldora */
.pill-checkbox input { display: none; }
.pill-label {
    display: block; width: 100%; background-color: var(--btn-inactive); color: white;
    text-align: center; padding: 12px 15px; border-radius: 50px; margin-bottom: 10px;
    cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 2px solid white;
}
.pill-label:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); filter: brightness(1.1); }
.pill-checkbox input:checked + .pill-label { background-color: var(--primary); transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }

/* Botón Limpiar Filtros */
.btn-reset-filters {
    width: 100%; padding: 12px; background-color: white; color: var(--danger);
    border: 1px solid #fecaca; border-radius: 50px; font-weight: 700; cursor: pointer;
    transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1rem;
}
.btn-reset-filters:hover { background-color: #fef2f2; border-color: var(--danger); }

/* --- 4. TARJETA DE EMPLEO (JOB CARD) --- */
.job-card {
    background: white; border-radius: var(--border-radius); padding: 1.5rem;
    margin-bottom: 1rem; border: 1px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; transition: all 0.2s;
}
.job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1); border-color: #e2e8f0; }

.company-logo { width: 64px; height: 64px; border-radius: 12px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }

.job-main-info { display: flex; flex-direction: column; justify-content: center; }
.job-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; line-height: 1.3; color: var(--text-main); }
.company-name { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; }

.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background: #f1f5f9; color: #475569; }
.tag.green { background: #dcfce7; color: #166534; }
.tag.blue { background: #dbeafe; color: #1e40af; }

.job-right-side { text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; min-width: 150px; }
.salary { font-weight: 800; font-size: 1.15rem; color: var(--text-main); }
.salary-period { font-size: 0.8rem; color: var(--text-muted); }

.action-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.date-posted { font-size: 0.8rem; color: #94a3b8; font-weight: 500; }

.btn-view { background-color: var(--text-main); color: white; padding: 9px 20px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: 0.2s; display: inline-block; }
.btn-view:hover { background-color: var(--primary); }

/* --- 5. ESTILOS MÓVILES --- */
.mobile-filter-trigger {
    display: none; width: 100%; background: #1e293b; color: white; padding: 14px;
    border-radius: 8px; text-align: center; font-weight: 700; margin-bottom: 1.5rem;
    cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (max-width: 900px) {
    .main-container { grid-template-columns: 1fr; padding: 0 1rem; }
    .mobile-filter-trigger { display: block; }

    /* Sidebar Modal */
    .filters-sidebar {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 9999; border-radius: 0; padding: 2rem; border: none; overflow-y: scroll;
    }
    .filters-sidebar.active { display: block; animation: slideUp 0.3s ease-out; }
    
    /* Mostrar cabecera móvil (Título y X) */
    .filters-header-mobile { display: flex; }

    /* Ajustes Tarjeta */
    .job-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
    .job-right-side { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 1rem; margin-top: 0.5rem; text-align: left; }
    .action-box { flex-direction: row-reverse; align-items: center; gap: 12px; }
}

/* 1. Ocultar el círculo nativo y cualquier rastro de radio original */
.radio-item input[type="radio"],
.pill-checkbox input[type="checkbox"],
#formFiltros input[type="radio"] {
    display: none !important;
}

/* 2. Ajustar el contenedor */
.radio-item, .pill-checkbox {
    display: block !important;
    margin-bottom: 12px !important;
    cursor: pointer;
}

/* 3. Estilo de la píldora (Gris por defecto) */
.pill-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #546e7a !important; /* El gris que te gusta */
    color: white !important;
    padding: 12px 15px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid transparent; /* Para evitar saltos al activar */
}

/* 4. LA CLAVE: El sombreado AZUL al marcar */
/* Este selector dice: "Cuando el radio esté checked, busca al HERMANO .pill-label y píntalo" */
.radio-item input:checked + .pill-label,
.pill-checkbox input:checked + .pill-label,
#formFiltros input:checked + .pill-label {
    background-color: #0000FF !important; /* Tu azul de marca */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3) !important;
    transform: scale(0.98); /* Pequeño efecto de hundimiento al marcar */
}

/* Efecto hover opcional para que se sienta vivo */
.pill-label:hover {
    filter: brightness(1.2);
}

@media (min-width: 901px) {
    .filters-header-mobile {
        display: none !important;
    }
}

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