*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}


.container{
  width: 800px;
  margin: 0 auto;
}
.container2{
  width: 1200px;
  margin: 0 auto;
}
/* login */ 
  section#login{
    margin-top: 200px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
  section#login h1, label{
    text-align: center;
    padding: 10px;
  }
  section#login input{
    margin-bottom: 10px;
    width: 300px;
  }
 
section#registro{
  margin-top: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
section#registro h1, label{
  text-align: center;
  padding: 10px;
}
section#registro input{
  margin-bottom: 10px;
  width: 300px;
}
section#registro div{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 12px;
}
section#registro div div#lvlExp, section#registro div  div#areaInt{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
select#selAreaIntRegistro{
  height: 64px;
}
section#registro div div#lvlExp p, section#registro div  div#areaInt p{
  margin-bottom: 10px;
}

header img{
  width: 50px;
}



/* ////////////////// PANTALLAS /////////////////// */

/* ///////////////////////// HEADER ///////////////////////// */ 

div#wPantallaAdministrador header, div#wPantallaPostulante header{
  padding: 50px;
  background-color: gray;
}
div#wPantallaAdministrador header div#contenedor, div#wPantallaPostulante header div#contenedor{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div#wPantallaAdministrador header div#contenedor nav, div#wPantallaPostulante header div#contenedor nav{
  display: flex;
  gap: 20px;
}
div#wPantallaAdministrador input[type="button"], div#wPantallaPostulante input[type="button"]{
  border-radius: 5px;
  padding: 5px 20px;
}
div#wPantallaAdministrador header div#contenedor div.headerUsuario, div#wPantallaPostulante header div#contenedor div.headerUsuario{
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

/* ///////////////////////// MAIN ///////////////////////// */ 
/*
div#wPantallaAdministrador header div#contenedor div.headerUsuario{
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}*/

/* ///////////////////////// CREAR OFERTA ///////////////////////// */ 

section#sectionCrearOferta{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
  justify-content: space-between;
  background-color: rgb(195, 195, 195);
  padding: 24px;
}
section#sectionCrearOferta div{
  display: flex;
  justify-content: space-between;
}               
section#sectionCrearOferta input{
  width: 80%;
}
section#sectionCrearOferta div:nth-child(1), div:nth-child(2), div:nth-child(3){
  display: flex;
  align-items: top;
  width: 100%;
  margin-bottom: 18px;
}
section#sectionCrearOferta div:nth-child(1) :nth-child(2), div:nth-child(2) :nth-child(2){
  height: 32px;
}
section#sectionCrearOferta div:nth-child(3) :nth-child(2){
  height: 128px;
}
section#sectionCrearOferta div:nth-child(4), div:nth-child(5), div:nth-child(6), div:nth-child(7), div:nth-child(9){
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  width: 32%;
  margin-left: 9%;
  margin-right: 9%;
}
section#sectionCrearOferta div:nth-child(5) :nth-child(2), section#sectionCrearOferta div:nth-child(7) :nth-child(2){
  height: 32px;
  width: 64px;
}
section#sectionCrearOferta div:nth-child(4) :nth-child(2), section#sectionCrearOferta div:nth-child(6) :nth-child(2){
  height: 32px;
}
section#sectionCrearOferta div:nth-child(8){
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  gap: 48px;
}
section#sectionCrearOferta div:nth-child(8) :nth-child(1){
  width: 80%;
  text-align: center;
}
section#sectionCrearOferta div:nth-child(8) :nth-child(2), section#sectionCrearOferta div:nth-child(8) :nth-child(3){
  max-width: 30%;
  padding: 18px 24px;
}
section#sectionCrearOferta div:nth-child(9){
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 48px;
}
section#sectionCrearOferta div:nth-child(9) :nth-child(2){
  width: 10%;
}



.btnDisable{

  background-color: rgb(221, 221, 221);
  color: rgb(255, 0, 0);

}


section#wSectionEstadisticas table.estadisticas {
  width: 100%;
  background-color: rgba(224, 222, 222, 0.699);
  border: 1px solid gray;
  border-collapse: collapse;
  font-size: 16px;
}

section#wSectionEstadisticas table.estadisticas th,
section#wSectionEstadisticas table.estadisticas td {
  border: 1px solid gray;
  padding: 12px;
}

/* Cabezal */
section#wSectionEstadisticas table.estadisticas thead th {
  background-color: #333;
  color: white;
  text-align: center;
}

/* Primera columna: texto */
section#wSectionEstadisticas table.estadisticas th:first-child,
section#wSectionEstadisticas table.estadisticas td:first-child {
  text-align: left;
  width: 45%;
}

/* Columnas numéricas */
section#wSectionEstadisticas table.estadisticas th:nth-child(2),
section#wSectionEstadisticas table.estadisticas th:nth-child(3),
section#wSectionEstadisticas table.estadisticas th:nth-child(4),
section#wSectionEstadisticas table.estadisticas th:nth-child(5),
section#wSectionEstadisticas table.estadisticas td:nth-child(2),
section#wSectionEstadisticas table.estadisticas td:nth-child(3),
section#wSectionEstadisticas table.estadisticas td:nth-child(4),
section#wSectionEstadisticas table.estadisticas td:nth-child(5) {
  text-align: center;
  width: 13.75%;
}

/* Footer */
section#wSectionEstadisticas table.estadisticas tfoot td {
  background-color: #cfcfcf;
  font-weight: bold;
}




/*
div#wPantallaAdministrador main section#sectionCrearOferta {
  padding: 48px;
  display: flex;
  flex-direction: column;
}
div#wPantallaAdministrador main section#sectionCrearOferta div#contenedorOfertaCampos {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
}
div.OfertaCamposEnFila{
  display: flex;
  justify-content: center;
}
div.OfertaCamposEnFila label{
  width: 200px;
  text-align: right;
}
div#contenedorOfertaCampos div.OfertaCamposEnFila input{
  width: 600px;
}
div#contenedorOfertaCampos input.descripcion{
  width: 600px;
  height: 200px;
}
div#wPantallaAdministrador main section#sectionCrearOferta div#contenedorOfertaSelectores{
  display: flex;
  justify-content: center;
  padding: 24px 48px;
  width: 100%;
  gap: 24px;
}
div#contenedorOferta2{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
div#contenedorOfertaSelectores div.OfertaCamposEnFila input[type="checkbox"]{
  width: 24px;;
}
div#contenedorOferta3{
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
div#contenedorOferta2 input[type="button"]{
  margin-top: 48px;
  padding: 24px 48px;
}
*/

/* ///////////////////////// PANTALLA POSTULANTE ///////////////////////// */ 


div#wPantallaPostulante section{
  margin-top: 48px;
  display: flex;
}
div#wPantallaPostulante table{
  width: 100%;
}
div#wPantallaPostulante table thead{
  display: flex;
  justify-content: center;
  background-color: gray;
  margin-bottom: 24px;
  flex-wrap: nowrap;
}
div#wPantallaPostulante table thead tr{
  display: flex;
  gap: 92px;
  padding: 12px;
}

div#wPantallaPostulante table tbody tr{
  width: 100%;
  margin-bottom: 24px;
  padding: 12px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
  
  background-color: gray;
  
}
div#wPantallaPostulante table tbody tr td:nth-child(1){  /* destacadas */
  width: 10%;
  height: 48px;
  font-size: 48px;
}
div#wPantallaPostulante table tbody tr td:nth-child(2), div#wPantallaPostulante table tbody tr td:nth-child(3){ /* titulo y nombre empresa*/
  width: calc(90% - 12px);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
div#wPantallaPostulante table tbody tr td:nth-child(4){ /* descripcion */ 
  width: 95%;
  min-height: 48px;
  font-style: italic;
}

div#wPantallaPostulante table tbody tr td:nth-child(5), div#wPantallaPostulante table tbody tr td:nth-child(8){ /* area y experiencia */
  width: calc(50%);
  font-size: 18px;
  font-weight: 400;
}
div#wPantallaPostulante table tbody tr td:nth-child(6), div#wPantallaPostulante table tbody tr td:nth-child(7){ /* vacantes y postulantes*/
  width: calc(25% - 12px);
  font-size: 18px;
}
div#wPantallaPostulante table tbody tr td:nth-child(9){ /* boton postular */
  width: calc(50% - 12px);
  text-align: center;
}

div#wPantallaPostulante table tbody tr input[type="button"]{
  padding: 12px 48px;
  background-color: rgb(183, 181, 181);
  border: 1px solid rgb(48, 48, 48);
}

div#wPantallaPostulante table tbody tr input[type="button"]:disabled{
  background-color: red;
}

/* ///////////////////////// PANTALLA ADMINISTRADOR ///////////////////////// */ 


div#wPantallaAdministrador section{
  margin-top: 48px;
  display: flex;
}
section#wSectionAdministrador table{
  width: 100%;
}
section#wSectionAdministrador table thead{
  display: flex;
  justify-content: center;
  background-color: gray;
  margin-bottom: 24px;
  flex-wrap: nowrap;
}
section#wSectionAdministrador table thead tr{
  display: flex;
  gap: 92px;
  padding: 12px;
}

section#wSectionAdministrador table tbody tr{
  width: 100%;
  margin-bottom: 24px;
  padding: 12px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
  
  background-color: gray;
  
}
section#wSectionAdministrador table tbody tr td:nth-child(1){  /* destacadas */
  width: 10%;
  height: 48px;
  font-size: 48px;
}
section#wSectionAdministrador table tbody tr td:nth-child(2), section#wSectionAdministrador table tbody tr td:nth-child(3){ /* titulo y nombre empresa*/
  width: calc(90% - 12px);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
section#wSectionAdministrador table tbody tr td:nth-child(4){ /* descripcion */ 
  width: 95%;
  min-height: 48px;
  font-style: italic;
}

section#wSectionAdministrador table tbody tr td:nth-child(5), section#wSectionAdministrador table tbody tr td:nth-child(8){ /* area y experiencia */
  width: calc(50%);
  font-size: 18px;
  font-weight: 400;
}
section#wSectionAdministrador table tbody tr td:nth-child(6), section#wSectionAdministrador table tbody tr td:nth-child(7){ /* vacantes y postulantes*/
  width: calc(25% - 12px);
  font-size: 18px;
}
section#wSectionAdministrador table tbody tr td:nth-child(9){ /* boton postular */
  width: calc(50% - 12px);
  text-align: center;
}

section#wSectionAdministrador table tbody tr input[type="button"]{
  padding: 12px 48px;
  background-color: rgb(183, 181, 181);
  border: 1px solid rgb(48, 48, 48);
}

section#wSectionAdministrador table tbody tr input[type="button"]:disabled{
  background-color: red;
}

/* ///////////////////////// ESTADISTICAS ///////////////////////// */

section#wSectionEstadisticas{
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

section#wSectionEstadisticas h2{
  margin-top: 24px;
  margin-bottom: 0px;
}

section#wSectionEstadisticas table.resumenEstadisticas th:first-child,
section#wSectionEstadisticas table.resumenEstadisticas td:first-child{
  width: 60%;
}

section#wSectionEstadisticas table.resumenEstadisticas th:nth-child(2),
section#wSectionEstadisticas table.resumenEstadisticas td:nth-child(2){
  width: 40%;
  text-align: center;
}
