/* mi-filtro-general.css
   Estilos pulidos para el filtro general (Talentos + Vacantes)
   Mantiene la identidad visual de talentos/vacantes y corrige desbordes.
*/

/* Contenedor principal */
.mi-filtro-general-wrap {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 18px;
}

/* Formulario del filtro */
.mi-filtro-general-form {
  display: grid;
  grid-template-columns: 200px 160px 1fr 170px 160px;
  gap: 10px;
  align-items: center;
  margin-bottom: 40px;
  background-color: #FFFAF3;
  padding: 28px;
  border-radius: 10px;
  box-shadow: 0 1px 9px rgba(34,36,38,0.12);
}

/* Inputs / selects del formulario */
.mi-filtro-general-form select,
.mi-filtro-general-form input[type="search"] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(34,36,38,0.08);
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

/* Botones */
.mi-btn { padding:10px 14px; border-radius:10px; cursor:pointer; font-family:'Roboto',sans-serif; }
.mi-btn-primary { background:#E64E1E; color:#fff; border:0; }
.mi-btn-outline { background:transparent; color:#E64E1E; border:1px solid rgba(230,78,30,0.12); }

/* ========== Grid de resultados (corrección clave) ========== */
.mi-grid-general { width:100%; box-sizing: border-box; }

/* Use auto-fill/auto-fit para que las columnas se adapten,
   y justify-items: center para centrar cards en su celda. */
.mi-grid-general-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
}

/* Card genérica compacta (ahora flexible dentro del grid) */
.card-general {
  width: 100%;             /* ocupa toda la celda */
  max-width: 320px;        /* evita estirado excesivo */
  height: 400px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(34,36,38,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
  box-sizing: border-box;
}
.card-general:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(34,36,38,0.09); }

/* Media (imagen) */
.card-general .card-media {
  width: 100%;
  height: 190px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Si usas <img> dentro de .card-media */
.card-general .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body de la card */
.card-general .card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

/* Badge / Head */
.badge-type, .card-head .badge-type {
  display: inline-block;
  background: #FFFAF3;
  color: #E8571D;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}

/* Título */
.card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  margin: 6px 0 0;
  color: #111111;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-title a { color: inherit; text-decoration: none; display:inline-block; width:100%; }
.card-general:hover .card-title a, .card-title a:hover { color: #E64E1E; }

/* Excerpt / descripción */
.card-excerpt {
  font-family: 'Ubuntu Sans', sans-serif;
  color: #444;
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Footer / botones */
.card-footer {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
  justify-content: flex-start;
}

/* Botones (reutilizables) */
.btn {
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:1;
}
.btn-primary { background:#E64E1E; color:#fff; border: none; }
.btn-outline { background:transparent; color:#E64E1E; border:1px solid rgba(240,168,106,0.12); }

/* Paginación */
.mi-pagination-general, .mi-pagination-general a {
  margin-top: 16px;
  text-align: center;
}
.mi-pagination-general a {
  display:inline-block;
  padding:8px 10px;
  margin:0 4px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.06);
  text-decoration:none;
  color:#222;
}

/* ========== Responsive tweaks ========== */
/* Tablet: 2 columnas si cabe */
@media (max-width: 1100px) {
  .mi-grid-general-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mi-filtro-general-form { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; padding: 22px; }
}

/* Mobile: 1 columna */
@media (max-width: 700px) {
  .mi-grid-general-inner { grid-template-columns: 1fr; gap: 12px; }
  .mi-filtro-general-form { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .card-general { height: auto; max-width: 100%; }
  .card-general .card-media { height: 180px; }
  .card-excerpt { -webkit-line-clamp: 4; }
}

/* pequeño fix: evitar que el contenido se salga del contenedor padre */
.mi-grid-general-inner, .mi-grid-general-inner * { box-sizing: border-box; }