/* ======================================
   RESET GENERAL
   ====================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ======================================
   ESTILOS GENERALES
   ====================================== */
.contenedor-general {
  padding: 20px 65px 0 65px;
}

/* =============================== */
/* FIX: Mantener layout de ESCRITORIO entre 1024px y 1294px */
/* =============================== */
@media (min-width: 1024px) and (max-width: 1294px) {
  /* Mostrar los botones de cabecera "empresa" (de escritorio) */
  button.empresa { display: inline-flex !important; }
  /* Ocultar el bot�n "Ordenar" (de m�vil) */
  button.orden { display: none !important; }

  /* Mantener filas en horizontal como escritorio */
  .vacante,
  .contenedor-caracteristicas {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* No invertir ni apilar cabeceras ni contenidos */
  .justify-content-between {
    flex-direction: row !important;
    gap: 0 !important;
  }

  /* Cabeceras alineadas como escritorio */
  .cabecera {
    display: flex !important;
    padding-top: 35px;
    justify-content: right !important;
    align-items: center !important;
    gap: 24px !important;
    margin-left: 10% !important;
  }
  .cabecera-otros-estados {
    display: flex !important;
    gap: 24px;
  }
  .cabecera-otros {
    display: block !important;
  }

  /* Caracter�sticas sin nowrap forzado ni padding extra�o */
  .contenedor-caracteristicas {
    white-space: normal !important;
    padding-left: 0 !important;
    gap: 12px !important;
  }

  /* Posici�n normal de "pesos" como en escritorio */
  .pesos {
    position: relative !important;
    right: auto !important;
  }

  /* Evitar �saltos� del bloque derecho */
  .flexible2 {
    align-self: center !important;
  }

  /* Botonera: quitar gaps gigantes y alinearla a la derecha */
  .botones {
    display: flex !important;
    gap: 8px !important;
    width: auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important; /* empuja a la derecha */
  }
}


/* ======================================
   RESPONSIVE GLOBAL: BOTONES
   ====================================== */

/* Móviles pequeños (hasta 424px) */
@media (max-width: 424px) {
  .botones {
    display: flex;
    justify-content: space-between;
    gap: 150%;
    width: 100%;
  }
}

/* Móviles grandes y tablets pequeñas (425px a 767px) */
@media (min-width: 425px) and (max-width: 767px) {
  .botones {
    display: flex;
    justify-content: space-between;
    gap: 130%;
    width: 100%;
  }
}

/* Tablets medianas (768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .botones {
    display: flex;
    justify-content: space-between;
    gap: 400%;
    width: 100%;
  }
}

/* Pantallas grandes intermedias (1024px a 1294px) */
@media (min-width: 1024px) and (max-width: 1294px) {
  .botones {
    display: flex;
    justify-content: space-between;
    gap: 600%;
    width: 100%;
  }
}

/* ======================================
   RESPONSIVE: M�XIMO 768PX
   ====================================== */
@media (max-width: 768px) {

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .btn-destacado{
    align-self: flex-start;
  }

  .footer-left,
  .footer-center,
  .footer-right,
  .footer-side-image {
    width: 100%;
  }

  .btn-registro,
  .btn-empresa {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }

  .footer-section.contacto {
    text-align: left;
  }

  .social-icons {
    justify-content: flex-start;
    margin: 10px 0;
  }

  .footer-logos {
    justify-content: flex-start;
    gap: 10px;
  }

  .footer-side-image {
    order: 3;
    align-self: flex-start;
    margin-top: 10px;
    justify-content: flex-start;
  }

  .footer-side-image img {
    writing-mode: horizontal-tb;
    transform: none;
    width: 100px;
    height: auto;
  }

  .input-cargo {
    display: none;
  }

  .input-busqueda {
    display: block;
  }

  .flexible2 {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
}

/* ======================================
   RESPONSIVE: M�XIMO 1297PX
   ====================================== */
@media (max-width: 1297px) {

  button.empresa {
    display: none;
  }

  button.orden {
    display: block;
    box-shadow: none;
	outline: none;
  }

  .vacante,
  .contenedor-caracteristicas {
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
  }

  .nombre-vacante-empresa {
    display: flex;
    flex-direction: column;
  }

  .responsive {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .justify-content-between {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .d-flex {
    display: flex !important;
  }

  .w-100 {
    width: 100% !important;
  }

  .cabecera-otros-estados {
    display: flex;
    gap: 70px;
  }

  .cabecera-otros {
    display: contents;
  }

  .cabecera {
    display: flex;
    padding-top: 35px;
    justify-content: flex-start;
    align-items: center;
    gap: 0%;
    margin-left: -10%;
  }

  .contenedor-caracteristicas {
    justify-content: flex-end;
    gap: 0vh;
    white-space: nowrap;
    padding-left: 0px;
  }

  .reverse {
    display: flex;
    flex-direction: row-reverse;
  }

  .pesos {
    position: static;
    right: 0px;
  }

  .vacante {
    gap: 15px;
  }
}

/* ======================================
   RESPONSIVE: 320px a 414px
   ====================================== */
@media (min-width: 320px) and (max-width: 414px) {

  .contenedor-estado {
    width: 255px;
    max-width: 100%;
  }

  .contenedor-general {
    padding: 0px 10px 0 10px;
  }

  .reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: 23px;
  }

  .iconos-vacante {
    gap: 210px;
  }

  .contenedor-vacante1 {
    padding: 10px;
  }

  .pesos {
    position: static;
    right: 0px;
  }

  .vacante {
    gap: 15px;
  }
}

/* ======================================
   RESPONSIVE: 425px a 1294px
   ====================================== */
@media (min-width: 425px) and (max-width: 1294px) {

  .reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: 23px;
  }

  .iconos-vacante {
    gap: 153px;
  }

  .contenedor-vacante1 {
    padding: 10px;
  }

  .diseño {
    margin-right: auto;
  }

  .contenedor-caracteristicas.flexible.w-100 {
    display: flex;
    gap: 15px;
  }

  .pesos {
    position: static;
    right: 0px;
  }

  .vacante {
    gap: 15px;
  }
}

/***EJEMPLO**/
/* Cabecera y tarjetas con el mismo grid */
.cabecera-grid,
.contenedor-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 2fr 1fr;
  gap: 20px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.cabecera-grid {
  font-weight: bold;
  padding: 30px 20px 10px;
  color: #1A356C;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--jobsite-font-size-subtitle); /* 14px */
}

.contenedor-grid {
  background-color: #FDFAC4;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}