/* @mixin tablet {
  @media screen and (max-width: 900px) {
      @content
  }
} */
body {
  margin: 0;
  background-color: #f1f3f9;
  padding-bottom: 1.5rem;
  font-family: "PT Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
body header {
  background-color: white;
  text-align: center;
  margin-bottom: 6px;
  padding-bottom: 1rem;
  padding-top: 1rem;
  border-bottom: 1px solid #dee2e6;
  position: sticky;
  top: 0px;
  z-index: 1;
}
body header .logo img {
  max-height: 30px;
  vertical-align: middle;
  border-style: none;
}
body .conatainer-header {
  grid-area: 1/1/2/13;
  display: flex;
  flex-wrap: wrap;
  padding: 24px 12px;
  color: white;
  background-color: #E32A46;
}
body .conatainer-header img {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
body .conatainer-header img.d-desktop {
  display: block;
}
body .conatainer-header img.d-mobile {
  display: none;
}
@media screen and (max-width: 720px) {
  body .conatainer-header img.d-desktop {
    display: none;
  }
  body .conatainer-header img.d-mobile {
    display: block;
  }
}
body .header_col-r {
  width: 40%;
  margin-top: 24px;
}
@media screen and (max-width: 720px) {
  body .header_col-r {
    width: 100%;
    display: none;
  }
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, auto);
  gap: 24px;
}
@media screen and (max-width: 720px) {
  .container {
    margin: 0 12px;
    gap: 12px;
  }
}
.container .container-seccion {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 24px;
  align-items: center;
  background-color: white;
  padding: 24px 0px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
@media screen and (max-width: 720px) {
  .container .container-seccion {
    gap: 12px;
    padding: 6px 0px;
  }
}
.container .container-seccion .titulo h2 {
  font-size: 1.875rem;
  color: #E32A46;
  font-weight: 700;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .titulo h2 {
    font-size: 1rem;
  }
}
.container .container-seccion .inputNota {
  position: relative;
}
.container .container-seccion .inputNota input {
  border: 1px solid #C4C4C4;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 18px 0px;
  width: 100%;
  background-color: transparent;
  outline: none;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .inputNota input {
    max-width: 70px;
    font-size: 12px;
    width: auto;
    align-items: center;
    padding: 6px 0;
  }
}
.container .container-seccion .inputNota label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  pointer-events: none;
  color: #A4ACB3;
}
.container .container-seccion .inputNota :is(input:focus, input:valid) ~ label {
  margin: 0;
  margin-right: 30px;
  padding: 0 10px;
  color: #E32A46;
  background-color: #ffffff;
  transform: translateY(-190%) translateX(-70%) scale(0.8);
  -webkit-transform: translateY(-190%) translateX(-70%) scale(0.8);
  -moz-transform: translateY(-190%) translateX(-70%) scale(0.8);
  -ms-transform: translateY(-190%) translateX(-70%) scale(0.8);
  -o-transform: translateY(-190%) translateX(-70%) scale(0.8);
}
@media screen and (max-width: 720px) {
  .container .container-seccion .inputNota :is(input:focus, input:valid) ~ label {
    transform: translateY(-120%) translateX(-70%) scale(0.8);
    -webkit-transform: translateY(-120%) translateX(-70%) scale(0.8);
    -moz-transform: translateY(-120%) translateX(-70%) scale(0.8);
    -ms-transform: translateY(-120%) translateX(-70%) scale(0.8);
    -o-transform: translateY(-120%) translateX(-70%) scale(0.8);
  }
}
.container .container-seccion .inputNota :is(input:focus, input:valid) {
  border-color: #E32A46;
}
.container .container-seccion fieldset {
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0 24px;
  border-color: #dee2e6;
  border-style: solid;
}
@media screen and (max-width: 720px) {
  .container .container-seccion fieldset {
    font-size: 12px;
    padding: 12px 6px;
  }
}
.container .container-seccion fieldset legend {
  padding: 0 6px;
}
.container .container-seccion select {
  border: 1px solid #C4C4C4;
  border-radius: 10px;
  font-size: 18px;
  color: #333;
  padding: 18px 6px;
}
@media screen and (max-width: 720px) {
  .container .container-seccion select {
    font-size: 14px;
    padding: 4px 0;
  }
}
.container .container-seccion button {
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 18px 0px;
  width: 100%;
  background-color: #E32A46;
  outline: none;
}
@media screen and (max-width: 720px) {
  .container .container-seccion button {
    max-width: 70px;
    font-size: 12px;
    width: auto;
    align-items: center;
    padding: 6px 0;
  }
}
.container .container-seccion .row-input {
  padding: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .row-input {
    padding: 0 6px;
  }
}
.container .container-seccion .row-input:last-child {
  padding-bottom: 20px;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .row-input:last-child {
    padding-bottom: 0;
  }
}
.container .container-seccion .row-input span {
  width: 80%;
  text-transform: none;
  font-size: 1.188rem;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .row-input span {
    width: 100%;
    padding-bottom: 12px;
    font-size: 1rem;
  }
}
.container .container-seccion .row-input select {
  width: 70%;
  margin-right: 10%;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .row-input select {
    margin-right: 0;
  }
}
.container .container-seccion .row-input .inputNota {
  width: 20%;
}
@media screen and (max-width: 720px) {
  .container .container-seccion .row-input .inputNota {
    width: auto;
    margin-bottom: 12px;
  }
}
.container .container-seccion.bachillerato {
  grid-area: 2/2/3/12;
  grid-template-areas: ".titulo titulo titulo titulo titulo titulo titulo inputNota . .";
}
@media screen and (max-width: 720px) {
  .container .container-seccion.bachillerato {
    grid-area: 2/1/3/13;
    display: flex;
    justify-content: space-around;
  }
}
.container .container-seccion.bachillerato .titulo {
  grid-area: titulo;
}
.container .container-seccion.bachillerato .inputNota {
  grid-area: inputNota;
}
.container .container-seccion.abau {
  grid-area: 3/2/4/12;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: ". titulo titulo titulo titulo titulo titulo titulo titulo ." ". . . troncales troncales troncales troncales troncales troncales ." ". . . modalidad modalidad modalidad modalidad modalidad modalidad ." ". . . optativa optativa optativa optativa optativa optativa .";
  /* .inputNota {
    } */
}
@media screen and (max-width: 720px) {
  .container .container-seccion.abau {
    grid-area: 3/1/4/13;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(4, auto);
    grid-template-areas: ". titulo ." ". troncales ." ". modalidad ." ". optativa .";
  }
}
.container .container-seccion.abau .titulo {
  grid-area: titulo;
}
.container .container-seccion.abau .form-troncales {
  grid-area: troncales;
}
.container .container-seccion.abau .form-modalidad {
  grid-area: modalidad;
}
.container .container-seccion.abau .form-optativas {
  grid-area: optativa;
}
.container .container-seccion.carrera {
  grid-area: 4/2/5/12;
  grid-template-rows: repeat(3, auto);
  row-gap: 12px;
  grid-template-areas: ". titulo titulo titulo titulo titulo titulo titulo titulo ." ". rowInput rowInput rowInput rowInput rowInput rowInput rowInput rowInput ." ". mensaje mensaje mensaje mensaje mensaje mensaje mensaje mensaje .";
}
@media screen and (max-width: 720px) {
  .container .container-seccion.carrera {
    grid-area: 4/1/5/13;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    gap: 12px;
    grid-template-areas: ". titulo ." ". rowInput ." ". mensaje .";
  }
}
.container .container-seccion.carrera .titulo {
  grid-area: titulo;
}
.container .container-seccion.carrera .titulo h2 {
  margin: 0;
}
.container .container-seccion.carrera .row-input {
  grid-area: rowInput;
  display: flex;
}
.container .container-seccion.carrera .row-input .selectCarrera {
  width: 100%;
  margin-right: 5%;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.carrera .row-input .selectCarrera {
    width: 70%;
    margin-right: 0%;
    padding-bottom: 12px;
  }
}
.container .container-seccion.carrera .row-input .selectCarrera select {
  width: 100%;
}
.container .container-seccion.carrera .row-input .buttonCarrera {
  width: 15%;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.carrera .row-input .buttonCarrera {
    width: 24%;
  }
  .container .container-seccion.carrera .row-input .buttonCarrera button {
    width: 100%;
    padding: 5px;
  }
}
.container .container-seccion.carrera .row-message {
  grid-area: mensaje;
  font-size: 12px;
}
.container .container-seccion.nota {
  grid-area: 5/2/6/12;
  grid-template-areas: ". titulo titulo titulo titulo titulo titulo titulo titulo ." " . tabla tabla tabla tabla tabla tabla tabla tabla . ";
}
@media screen and (max-width: 720px) {
  .container .container-seccion.nota {
    grid-area: 5/1/6/13;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    grid-template-areas: ". titulo ." ". tabla .";
  }
}
.container .container-seccion.nota .titulo {
  grid-area: titulo;
}
.container .container-seccion.nota .row-nota {
  grid-area: tabla;
  display: flex;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.nota .row-nota {
    flex-direction: column;
  }
}
.container .container-seccion.nota .row-nota .col-nota {
  flex-grow: 1;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.nota .row-nota .col-nota {
    display: flex;
  }
}
.container .container-seccion.nota .row-nota .col-nota .title {
  font-weight: 700;
  padding-bottom: 10px;
  flex-grow: 1;
}
.container .container-seccion.nota .row-nota .col-nota .nota {
  flex-grow: 1;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.nota .row-nota .col-nota .nota {
    margin-left: 10px;
  }
}
.container .container-seccion.nota .row-nota .col-nota.total {
  border: 1px solid #E32A46;
  border-radius: 10px;
  padding: 6px 0px;
  color: #E32A46;
  font-weight: 700;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.nota .row-nota .col-nota.total {
    padding: 14px 14px 0;
  }
}
.container .container-seccion.nota .row-nota .col-operador {
  flex-grow: 1;
  font-weight: 900;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .container .container-seccion.nota .row-nota .col-operador {
    padding-bottom: 10px;
  }
}
.container .container-seccion.campus {
  grid-area: 6/2/7/12;
  grid-template-areas: ". titulo titulo titulo titulo titulo titulo titulo titulo ." " tabla tabla tabla tabla tabla tabla tabla tabla tabla tabla ";
}
@media screen and (max-width: 720px) {
  .container .container-seccion.campus {
    grid-area: 6/1/7/13;
  }
}
.container .container-seccion.campus .titulo {
  grid-area: titulo;
  text-align: center;
}
.container .container-seccion.campus .row-input {
  grid-area: tabla;
}
.container .container-seccion a.info {
  text-decoration: none;
  text-align: center;
  border: 1px solid #E32A46;
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #E32A46;
  margin: 0 12px;
}
.container table {
  width: 100%;
  margin: 24px;
  border-spacing: 0px;
  padding: 0;
}
@media screen and (max-width: 720px) {
  .container table {
    margin: 0;
    font-size: 0.75rem;
  }
}
.container table thead {
  color: #C4C4C4;
}
.container table thead tr th {
  font-weight: 300;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5EA;
  margin: 12px 24px;
}
.container table thead tr th:nth-child(2) {
  border-left: 1px solid #E5E5EA;
  border-right: 1px solid #E5E5EA;
}
.container table tbody tr:nth-child(2n) {
  background-color: #F2F2F7;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.container table tbody tr td {
  padding: 12px 24px;
}
.container table tbody tr td:nth-child(2) {
  font-weight: 700;
  text-align: center;
  border-left: 1px solid #E5E5EA;
  border-right: 1px solid #E5E5EA;
}
.container table tbody tr td:nth-child(3) {
  text-align: center;
}
.container .modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.container .modal .modal-box {
  background-color: #ffffff;
  padding: 24px;
  width: 50%;
  margin: 25% auto;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
@media screen and (max-width: 720px) {
  .container .modal .modal-box {
    width: 90%;
    padding: 12px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
}
.container .modal .modal-box img {
  width: 100%;
}
.container .modal .modal-box table {
  margin: 0;
}
.container .modal .modal-box table thead tr th {
  width: 50%;
}
.container .modal .modal-box table thead tr th:nth-child(2) {
  border-right: none;
}
.container .modal .modal-box table tbody tr td {
  vertical-align: baseline;
}
.container .modal .modal-box table tbody tr td:nth-child(2) {
  text-align: left;
  font-weight: 400;
  border-right: none;
}
.container .modal .modal-box .close {
  float: right;
  text-decoration: none;
  color: #E32A46;
  font-weight: bolder;
}
.container .modal .modal-box .close:hover {
  color: #c06774;
}

body .container .container-seccion.ponderacion {
  grid-area: 1/2/2/12;
}
@media screen and (max-width: 720px) {
  body .container .container-seccion.ponderacion {
    grid-area: 1/1/2/13;
  }
}
body .container .container-seccion.ponderacion form {
  grid-area: 1/1/2/11;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  gap: 24px;
  grid-template-areas: ". grado grado grado grado grado grado grado grado ." ". asignatura asignatura asignatura asignatura asignatura asignatura asignatura asignatura ." ". ponderacion ponderacion ponderacion ponderacion ponderacion ponderacion ponderacion ponderacion ." ". boton boton boton boton boton boton boton boton .";
}
body .container .container-seccion.ponderacion form .select-grado {
  grid-area: grado;
}
body .container .container-seccion.ponderacion form .select-asignatura {
  grid-area: asignatura;
}
body .container .container-seccion.ponderacion form select {
  width: 100%;
}
body .container .container-seccion.ponderacion form .row-radio {
  grid-area: ponderacion;
  justify-content: center;
}
@media screen and (max-width: 720px) {
  body .container .container-seccion.ponderacion form .row-radio span {
    display: block;
    padding-bottom: 12px;
  }
}
body .container .container-seccion.ponderacion form .row-radio input.radio {
  margin-left: 12%;
}
body .container .container-seccion.ponderacion form .buttonActualizar {
  grid-area: boton;
}
body .container .container-seccion.campus-ponderacion {
  grid-area: 2/2/3/12;
  grid-template-areas: ". titulo titulo titulo titulo titulo titulo titulo titulo ." " tabla tabla tabla tabla tabla tabla tabla tabla tabla tabla ";
}
@media screen and (max-width: 720px) {
  body .container .container-seccion.campus-ponderacion {
    grid-area: 2/1/3/13;
  }
}
body .container .container-seccion.campus-ponderacion .titulo {
  grid-area: titulo;
}
body .container .container-seccion.campus-ponderacion .row-input {
  grid-area: tabla;
}
body .container .container-seccion.campus-ponderacion .row-input table td:nth-child(2) {
  text-align: left;
  padding-left: 24px;
}
@media screen and (max-width: 720px) {
  body .container .container-seccion.campus-ponderacion .row-input table tbody tr td {
    padding: 6px;
  }
}/*# sourceMappingURL=style.css.map */