section.contenido{
    background-image: url("../image/circuito.png");
    margin: auto;
    width: 100%;
    height: auto;
    padding-bottom: 30px;
}

.etiqueta1 {
    background-image: linear-gradient(to bottom, var(--azul-claro) 0%, var(--azul) 100%);
    color: white;
    padding: 10px;
    min-width: 7.2rem;
    margin-top: 30px;
    font-size: 14px; 
    display: inline-block;
    text-align: center;
    margin-left: 0px;
    text-shadow: 1px 1px 1px #000000;
}

.etiqueta2 {
    background-image: linear-gradient(to bottom, var(--azul-claro) 0%, var(--azul) 100%);
    color: white;
    padding: 10px;
    min-width: 7.2rem;
    margin-top: 30px;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    margin-left: 0px;
    text-shadow: 1px 1px 1px #000000;
    border-radius: 0px 25px 25px 0px;
}

/* Note under the labels, about the old 33rem on desktop; its right edge
   lines up with the schedule box below (1rem on mobile, the 15% / 10% left
   by the 70% / 80% box from 768px). */
.aprobTexto{
    box-sizing: border-box;
    width: 33rem;
    max-width: calc(100% - 2rem);
    margin: 20px 1rem 0 auto;
    padding: 5px 1rem;
    background-image: linear-gradient(to bottom, var(--azul-claro) 0%, var(--azul) 100%);
    color: whitesmoke;
    border-radius: 15px;
    font-size: small;
}

/* The search bar is the top edge of the schedule box: same width and axis,
   the box's top corners go square under it. */
#search_content{
    box-sizing: border-box;
    width: calc(100% - 2rem);
    margin: 20px auto 0;
}

#search_content input[type=text]{
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #fff;
    border-bottom: 0;
    border-radius: 20px 20px 0px 0px;
    padding: 10px 15px;
    margin: auto;
    background-color: rgba(0, 43, 122, 0.8);
    color: white;
    font-size: 15px;
}

#search_content + #semestres,
#search_content + #semestresExt,
#search_content + #semestres .menuSemestresH,
#search_content + #semestresExt .menuSemestresH {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Mobile: 1rem from each side; from 768px the old 70% / 80%. */
#semestres, #semestresExt {
    width: calc(100% - 2rem);
    margin: auto;
    margin-bottom: 20px;
    background-color: rgba(0,43,122, .8);
    border-radius: 20px;
}

@media (min-width: 768px) {
    #semestres, #search_content {
        width: 70%;
    }

    #semestresExt, #search_content.busqExt {
        width: 80%;
    }

    .aprobTexto {
        margin-right: 15%;
    }

    .aprobTexto.aprobTextoExt {
        margin-right: 10%;
    }
}

.menuGrupos, .menuSemestresH{
    background: var(--dorado);
    padding: 10px 0.5rem;
    margin: 0px auto;
    text-align: center;
    border-radius: 15px 15px 0px 0px;
}

.menuSemestresH{
    border-bottom: groove 2px rgba(0,0,0,.1);
}

.menuSemestresH ul, .menuGrupos ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0 auto;
}

.menuSemestresH ul li a, .menuGrupos ul li a{
    padding: 5px 10px;
    text-align: center;
    border-radius: 15px;
    margin: 0px auto;
    display:inline-block;
}

.menuGrupos{
    margin-bottom: 10px;
    border-radius: 0px;
}

.menuGrupos ul li{
    margin-right: 8px;
    margin-bottom: 8px;
}

.semestreActivo{
    background-color:#EFCA45;
    transition: linear .3s all;
}

.semestreActivo:hover{
    transform: none;
    background-color: rgba(0,43,122, 1);
    color: white;
    text-align: center;
}

.grupoActivo{
    box-shadow: black;
    background-color: rgba(0,43,122, 1);
    color: white;
    text-shadow: black;
    transition: linear .5s all;
}

.grupoActivo:hover{
    transform: none;
    background-color: #EFCA45;
    color: black;
    text-align: center;
}

.sActivo{
    background-color: rgba(0,43,122, 1);
    color: white;
}

.gActivo{
    background-color: #EFCA45;
    color: black;
    text-align: center;
    border: .29em solid rgba(0,43,122, .7);
}

/* The link is a block: a long name wraps under its own first line.
   Mobile: 1rem from each side; from 768px the old 60px. */
.materiasLI{
    list-style: none;
    text-align: left;
    padding: 5px 1rem;
}

.materiasLI a{
    display: block;
    font-size: small;
    color: #fff;
}

@media (min-width: 768px) {
    .materiasLI{
        padding-left: 60px;
    }
}

.cabe{
    padding: 3px;
    margin: 3px 31px 5px 10px;
    font-size: 14.5px;
    color: white;
    padding-bottom: 15px;
    border-bottom: groove 2px rgba(0,0,0,.3);
}

th{
    color: white;
    padding: 0px 5px;
    margin: 0 auto;
}

p{
    text-align: center
}

/* The baseline-aligned day lists hang up to ~20px below their rows; the
   bottom padding keeps them inside the scroll box. */
#resultGroup{
    padding-bottom: 2rem;
    color: white;
    text-align: center;
    font-size: 1.01em;
}

/* Each time range stays on one line; a narrow screen scrolls the table
   inside #resultGroup instead of breaking "11:00 - 13:00". */
#materias td:last-child {
    white-space: nowrap;
}

.renglonProf, .renglonM{
    vertical-align: baseline;
}

.renglonProfDesc, .renglonMateria{
    padding-top: 25px;
}

.renglonV{
    height:15px;
}

.celdaMateria{
    font-size: 1em;
}

.bajo{
    padding: 5px;
}

.semDisponib
{
    padding: 20px 10px;
    font-size: small;
    text-align: center;
}

#semestres.semDisponib, #semestres.semDisponib * {
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #semestres.semDisponib {
        width: 85%;
    }
}

/* Back link and "Este formato estará disponible hasta…" of the teacher
   forms: on the edges of the .semDisponib box (1rem on mobile, the 7.5%
   left by the 85% box from 768px). */
.contenido > .aviso-formato + .boton-regresar {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .contenido > .aviso-formato {
        margin-right: 7.5%;
    }

    .contenido > .aviso-formato + .boton-regresar {
        margin-left: 7.5%;
    }
}

.instruccionesDisponib
{
    font-size: 1.12em;
    color: white;
    padding: 5px;
}

.dia
{
    color: #FFF;
    font-size: 1.05em;
    text-align: left;
    padding-left: 10px;
}

.descripcionDisponib
{
    padding: 20px 0px;
}
.guardaCamb{
    width: 90px;
    padding: 5px;
    border-radius: 15px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(0.52, #EFCA45),color-stop(1, #CEA510));
    background-image: -o-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: -moz-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: -webkit-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: -ms-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: linear-gradient(to bottom, #EFCA45 52%, #CEA510 100%);
    cursor: pointer;
    margin-top: 25px;
}

.impFormato{
    width: 130px;
    padding: 5px;
    border-radius: 15px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(0.52, #EFCA45),color-stop(1, #CEA510));
    background-image: -o-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: -moz-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: -webkit-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: -ms-linear-gradient(bottom, #EFCA45 52%, #CEA510 100%);
    background-image: linear-gradient(to bottom, #EFCA45 52%, #CEA510 100%);
    cursor: pointer;
    margin-top: 25px;
}

/* A partir de aquí, corresponde a estilos utilizados para la parte de avatar de perfil de profesores. Se encuentran en los archivos base.html y change.html del paquete Django-Avatar */

.etiquetaPerfProf{
    background-image: -webkit-gradient(linear,left top,
    left bottom,color-stop(0, #2968CE),color-stop(1, #002B7A));
    background-image: -o-linear-gradient(bottom, #2968CE 0%, #002B7A 100%);
    background-image: -moz-linear-gradient(bottom, #2968CE 0%, #002B7A 100%);
    background-image: -webkit-linear-gradient(bottom, #2968CE 0%, #002B7A 100%);
    background-image: -ms-linear-gradient(bottom, #2968CE 0%, #002B7A 100%);
    background-image: linear-gradient(to bottom, #2968CE 0%, #002B7A 100%);
    width: 100px;
    height: 20px;
    padding: 8px;
    margin-bottom: 30px;
    border-radius: 0px 20px 20px 0px;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #000000;
    font-size: 15px;
    text-align: center;
}

.etiquetaPerfProf a
{
    color: white;
}

.seccion
{
    padding-top: 30px;
}

.tituloAvatar
{
    font-size: 1.4em;
    color: #FFF;
    background-color: rgba(0, 43, 122, 0.8);
    padding: 8px 15px;
    float: center;
    border-radius: 10px;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
}

/* Mobile: centred above the form; from 768px on the left, as before. */
.imagenPerfil
{
    width: 165px;
    margin: 0 auto 1rem;
}

@media (min-width: 768px) {
    .imagenPerfil
    {
        float: left;
        margin: 0 0 0 min(265px, 22%);
    }
}

.imagenPerfil img
{
    height: 150px;
    width: 150px;
    border: 6px outset rgba(0, 43, 122, 0.9);
    margin-bottom: 2px;
}

.imagenesSec
{
    width: 45%;
    display: inline-flex;
    text-align: center;
    margin-left: 115px;
}

.imagenesSec p input[type="submit"], .upload
{
    background: linear-gradient(to bottom, rgb(239, 202, 69) 52%, rgb(206, 165, 16) 100%);
    padding: 6px;
    border-radius: 7px;
    cursor: pointer;
    margin-top: 5px;
}

label[for=id_avatar]
{
    visibility: hidden;
}

/* The look it had under the old global input rule, as wide as the form
   allows. */
#id_avatar
{
    box-sizing: border-box;
    width: 100%;
    max-width: 30rem;
    margin-bottom: 15px;
    padding: 4px;
    border-radius: 5px;
    color: black;
}

/* Its own block next to the floated picture, so the input can use the
   remaining width. */
.subirImg
{
    display: flow-root;
    margin-top: 35px;
    padding: 0 1rem;
}

.avatars label
{
    font-size: 1.1em;
    font-weight: bold;
}

.errorlist li
{
    text-align: center;
    margin-bottom: 15px;
}

.instrAtras
{
    font-weight: bolder;
    font-size: 1em;
}

.horas, .hora
{
    color: white;
    padding-bottom: 7px;
    border-right: 1px solid white;
}

.hora
{
    padding: 0px 2px;
}

.horas
{
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
}

.tablaDatos th
{
   padding-top: 5px;
   padding-bottom: 7px;
   text-align: left;
   font-weight: 100;
}

.tablaDatos input[type=text], .tablaDatos input[type=email], .tablaDatos input[type=password], .tablaDatos textarea,  .tablaDatos input[type=number],  .tablaDatos input[type=file], .tablaDatos select
{
  padding: 4px;
  border-radius: 5px;
  color: black;
  resize:none;
  width: 225px;
  word-break: break-word;
}

.tablaDatos select
{
    width: 232px;
}

.tablaDatos tr .textareaprof textarea
{
    width: 100%;
    height: 50px;
}

/* Teacher data of the activity report: one .form-campo per field, in two
   columns from 1024px. */
.informeDatos {
    display: grid;
    column-gap: 2rem;
    text-align: left;
}

.informeDatos .form-campo > label,
.informeDatos .form-campo > span {
    grid-column: 1;
    color: white;
}

.informeDatos .form-campo > b {
    color: white;
}

/* Same look the fields had inside .tablaDatos. */
.informeDatos input,
.informeDatos select {
    padding: 4px;
    border-radius: 5px;
    color: black;
}

@media (min-width: 1024px) {
    .informeDatos {
        grid-template-columns: 1fr 1fr;
    }
}

.tablaDatosInf td
{
   padding-top: 4px;
   padding-bottom: 6px;
   text-align: left;
   font-weight: 80;
}

.tablaDatosInf input[type=text], .tablaDatosInf input[type=email], .tablaDatosInf input[type=password], .tablaDatosInf textarea,  .tablaDatosInf input[type=number],  .tablaDatosInf input[type=file], .tablaDatosInf select
{
  padding: 4px;
  border-radius: 5px;
  color: black;
  resize:none;
  width: 50px;
  word-break: break-word;
}

.tablaDatosInf select
{
    width: 232px;
}

/* After the rule above: the counts in the report table fill their cell. */
.tablaDatosInf input[type=number]
{
    width: 100%;
    min-width: 4rem;
    max-width: 6rem;
    min-height: 2rem;
    font-size: 15px;
}

.tablaDatosInf tr .textareaprof textarea
{
    width: 100%;
    height: 50px;
}

.inptChico input[type=text]{
  padding: 4px;
  border-radius: 5px;
  color: black;
  resize:none;
  width: 100px;
  word-break: break-word;
}

.tablaText label
{
    display: block;
    padding: 0 5px 5px;
    color: white;
}

/* Mobile: the whole box; from 768px the old 70%. */
.tablaText textarea
{
    width: 100%;
    height: 70px;
    padding: 4px;
    font-size: 15px;
    border-radius: 5px;
    color: black;
    resize: none;
}

@media (min-width: 768px) {
    .tablaText textarea
    {
        width: 70%;
    }
}