/*Estilo de títulos*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
*{
font-family:'Open Sans', sans-serif !important;

}

body
{
  margin: 0px auto;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.5;

}

p, p a,ul li, ol li, ul li p, table
{
  font-size: large !important;
  text-align: justify;
  color: #000000 !important;
}

b {
color:#D82080 ;
}

#logoUAEM{
  max-width:180px !important;
  width:280px !important;
}
#logoUATM{
  max-width:100px !important;
  width:90px !important;
  min-width:30px !important;
}
.rosita{
  color:#D82080;
}

/*div para enfatizar contenidos, la cajita de los videos*/
.marco{
    width:90%;
    border-radius: 10px;
    box-shadow: lightgrey 1px 1px 15px;
    background-color: #fafafa;
    margin: auto;
    padding: 2.5rem;
    border: 2px solid #D82080;
}
/*clase para meter margen a los indices*/
.margen{
 margin-left: 5%;
}

/* clase para div con borde punteado y sombra*/
.cajapunteada{
  width:90%;
  max-width: 750px;
  border-radius: 10px;
  box-shadow: lightgrey 1px 1px 15px;
  background-color: #fafafa;
  margin: auto;
  padding: 2.5rem;
  border: 3px dotted #D82080;
}
/*estilo para las referencias*/
.txt-cita{
text-align: right;
color: #D82080 ;/*cambio*/
}

/*estilo para los links*/
.linkcrea
{
color:#135794 !important;
text-decoration: none;
word-wrap: break-word;
text-align: center;
}

.linkcrea:hover{
text-decoration: underline;
}

.linkcrea:active,.linkcrea:before,.linkcrea:visited{
  color:#135794 !important;
}


.encabezado, .piepagina{
  width: auto;
  height: 105px;
  margin:0px;
}
.encabezado #baner-color{
    background-color: #493487 ;
    height: 20px;
    margin: 0px;

}

.encabezado #baner-color img
{
  vertical-align: top !important;
  margin-top: 30px;
  margin-left: 10%;
}

.piepagina #baner-color, .piepagina #baner-color table{
  height: 20px;
  margin: 0px;
  width: 100%;
  vertical-align: top !important;

}

.bimages {
  width: 100%;
  background: white;
  margin: 1.25em;
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  margin: 0 auto !important;
}

.mcontenido{
  width:90% !important;
  max-width: 1080px !important;
  margin: 0px auto !important;
}

.uatmimg {
  width: 100%;
  max-width: 650px !important;
  height: auto;
  min-width: 280px  !important;
  margin: 0 auto;

}

.uatmimg2{
  width: 100%;
  max-width: 350px !important;
  height: auto;
  min-width: 280px  !important;
  margin: 0 auto;
}

h2, h3, h4, h5{
  color:#D82080;
  text-align: justify;

}

h5{
  font-size: 18px !important;
}
h3{
  font-size: 28px !important;
}

h2, .ch2{
  font-size: 32px !important;
}

.textjusti{
  text-align: justify;
}


/*para las tarjetas del punto 1.1.1*/



/* estilo para el pie de imagen*/
.pie, .pie a{
  text-align: center ;
  font-size: 11px;
  padding-top: 0px;
  text-decoration: none !important;
}

.pie a:hover{
  text-decoration: underline !important;
}

/* * * * * * * * * * * * * * * * * *  tablas * * * * * * * * * * * * * * * * * */
table {
width: 100% !important;
background: white;
margin-bottom: 1.25em;
border-collapse: collapse;
border-spacing: 0;
background: none;
margin: 0 auto !important;
text-align: center;
}

table thead, table thead tr td {
text-align: center !important;
background: #D82080 !important;
color: #FFF;
/*  border-bottom: 2px double #4E232E; */
font-weight: bold;
width: 100%;
}

.resp4  tbody tr td{
  width: 33% !important;
  text-align: center;
}


table tr th,
table tr td {
padding: 0.5625em 0.625em;
margin-right:auto ;
text-align: justify;
/*  font-size: 0.875em; */
width: 33% !important;
}

/* tamaño del link*/
table tr td p a{
overflow-wrap: break-word;
color: #D82080;
}

/*fondo de las filas pares*/
table tbody tr.even,
table tbody tr.alt,
table tbody tr.alt,
table tbody tr:nth-of-type(even),
table tbody tr:nth-of-type(even) p,
table tbody tr:nth-of-type(even) a
{
background: #9978CE !important;/*cambio*/
color: #ffffff !important;

}

/*Código para tarjetas con imagen en circulo*/

.container-card{
  width: 100%;
  min-width: 300px;
  max-width: 850px;
  padding: 30px;
  border: solid 3px #c1c1c1;;
  background-color: #f9f9f9;
  box-sizing: border-box;
  border-radius: 10px;
/*  box-shadow: 0 15px 50px rgba(0,0,0,.2); */
box-shadow: 5px 5px 5px rgba(0,0,0,.3);
  margin: 30px;

}

.container-card h1{
  color:#D82080;
  text-align: justify;
  font-size: 26px;
}
.container-card h2{
  color:#D82080;
  text-align: justify;
  font-size: 22px;
}


.container-card p{
  margin: 0px;
  padding: 0px;
  text-align: justify;
  line-height: 22px;
}
.circulo1, .circulo2, .circulo3, .circulo4, .circulo5, .circulo6, .circulo7, .circulo8 {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   float:left;
   shape-outside: circle();
   margin: 10px 30px 30px 0px;
   background-size:  contain;
   box-shadow:  5px 5px 5px rgba(242, 181, 213, 1);
}
.circulo1{
   background-image: url(../images/01-analitico.png);
}

.circulo2{
   background-image: url(../images/02-reflexivo.png);
}
.circulo3{
   background-image: url(../images/03-logico.png);
}
.circulo4{
   background-image: url(../images/04-intuitivo.png);
}
.circulo5{
   background-image: url(../images/05-creativo.png);
}
.circulo6{
   background-image: url(../images/06-practico.png);
}
.circulo7{
   background-image: url(../images/07-criticoo.png);
}
.circulo8{
   background-image: url(../images/08-estrategico.png);
}

/* * * * * * * * * * * * * * * Tablas responsivas * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px) {
  /* elementos para el círculo de la tarjeta del tema 2*/

  .container-card h1{
    color:#D82080;
    text-align: justify;
    font-size: 20px;
  }
  .container-card h2{
    color:#D82080;
    text-align: justify;
    font-size: 18px;
  }


  .circulo1,.circulo2,.circulo3,.circulo4,.circulo5,.circulo6,.circulo7,.circulo8{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    float:left;
    shape-outside: circle();
    margin: 5px 15px 15px 0px;

  }
  .resp,
  .resp thead,
  .resp tbody,
  .resp tr,
  .resp th,
  .resp td,
  .resp caption,
  .resp1,
  .resp1 thead,
  .resp1 tbody,
  .resp1 tr,
  .resp1 th,
  .resp1 td,
  .resp1 caption,
  .resp2,
  .resp2 thead,
  .resp2 tbody,
  .resp2 tr,
  .resp2 th,
  .resp2 td,
  .resp2 caption,
  .resp3,
  .resp3 thead,
  .resp3 tbody,
  .resp3 tr,
  .resp3 th,
  .resp3 td,
  .resp3 caption,
  .resp4,
  .resp4 thead,
  .resp4 tbody,
  .resp4 tr,
  .resp4 th,
  .resp4 td,
  .resp4 tbody tr td,
  .resp4 caption,
  .resp5,
  .resp5 thead,
  .resp5 tbody,
  .resp5 tr,
  .resp5 th,
  .resp5 td,
  .resp5 caption,
  .resp6,
  .resp6 thead,
  .resp6 tbody,
  .resp6 tr,
  .resp6 th,
  .resp6 td,
  .resp6 caption,
  .resp7,
  .resp7 thead,
  .resp7 tbody,
  .resp7 tr,
  .resp7 th,
  .resp7 td,
  .resp7 caption
   {
    display: block;
    min-width: 240px;
    width: 100% !important;

  }

  .resp3 tr td p a, .resp4 tr td p a{
  overflow-wrap: break-word;
  }


  .resp, .resp1, .resp2, .resp3, .resp4, .resp5, .resp6, .resp7 {
    border: none;
    max-width: 100% !important;
    width: auto;
  }


  .resp1 thead tr,.resp2 thead tr, .resp3 thead tr, .resp4 thead tr, .resp5 thead tr, .resp6 thead tr, .resp7 thead tr {
    display: none;
    width: 100% !important;
    min-width: 260px;
    max-width: 740px;
  }

  .resp tbody tr, .resp1 tbody tr,.resp2 tbody tr,.resp3 tbody tr, .resp4 tbody tr, .resp5 tbody tr,
  .resp6 tbody tr, .resp7 tbody tr {
    margin: 1em 0;
  /*  border: 1px solid #4E232E; */
  }

  .resp1 tbody tr {
    margin: 0 auto;
  }

  .resp1 td, .resp7  td {
    border: none;
    border-bottom: 1px solid #BCF8E4;
    position: relative;
    text-align: left;
  }
  .resp1 td, .resp2 td,.resp3 td, .resp4 td, .resp5 td, .resp6 td, .resp7 tr td {
    border: none;
  /*  position: relative; */
    width: 100% !important;
    text-align: justify;
    margin: 0 auto;
  }
  .resp1 img, .resp2 img,.resp3 img, .resp4 img, .resp5 img, .resp6 img, .resp7 img {
    border: none;
    text-align: center;
    width: 50%;
  }

  .resp tr td:last-child, {
  /*  border-bottom: 1px double #4E232E; */
  }

  .resp tr:last-child td:last-child {
    border: none;
  }

  .resp1 td:before,.resp2 td:before,.resp3 td:before, .resp4 td:before, .resp5 td:before, .resp6 td:before, .resp7 td:before {
          position: relative;
          top: 6px;
          margin:0px !important;
          padding: 5px 0px !important;
          width: 100% !important;
          white-space: nowrap;
          font-weight: bold;
        }


              .resp td:nth-of-type(1):before {
                content: "Tipo de licencia";
              }

              .resp td:nth-of-type(2):before {
                content: "Descripción";
              }

              .resp td:nth-of-type(3):before {
                content: "Ejemplo";
              }

              .resp td:nth-of-type(4):before {
                content: "Ejemplos";
                color: #e24d6d;
              }

              .resp2 td:nth-of-type(1):before {
                content: "Dependencia";
                color: #D82080;
                font-size: 18px;
                display: block;
                text-align: center !important;
                padding-bottom: 10px;
              }

              .resp2 td:nth-of-type(2):before {
                content: "Algunas funciones";
                color: #D82080;
                font-size: 18px;
                display: block ;
                text-align: center !important;
              }

              .resp2 td:nth-of-type(2):before {
                content: "Protege";
                color: #D82080;
                font-size: 18px;
                display: block ;
                text-align: center !important;
              }

              .resp2 table tr td ul li{
                font-size: 1
              }


              #respTable .carta img{
                width: 290px;
              }

              /* para el margen del contenido total*/
              .mcontenido{
                width:96% !important;
                margin: 0 2% !important;
              }

              /*div para enfatizar contenidos, la cajita de los videos*/
              .marco{
                  width:90%;
                  max-width: 650px;
                  border-radius: 10px;
                  box-shadow: lightgrey 1px 1px 15px;
                  background-color: #fafafa;
                  margin: auto;
                  padding: 2.5rem;
                  border: 2px solid #D82080;
              }

              /* clase para div con borde punteado y sombra*/
              .cajapunteada{
                width:100%;
                border-radius: 10px;
                box-shadow: lightgrey 1px 1px 15px;
                background-color: #fafafa;
                margin: auto;
                padding: 1rem;
                border: 3px dotted #D82080;
              }

              /* cuando la imagen está en dispositivos pequeños*/
              .uatmimg {
                width: 100%;
                height: auto;
                margin: 0 auto;

              }

              /* modificación para los logos del baner*/
              .bimages  tbody tr td{
                max-width: 33% !important;
                vertical-align: middle !important;
              }
              .bimages  tbody tr td img {
                /*width: 140px !important;*/
                text-align: left !important;
                align-items: center !important;
                vertical-align: middle !important;

              }

              .fondonota h5{
                font-family: 'Patrick Hand', cursive !important;
                font-size: 1.2em !important;
                color: #D82080 !important;
                padding: 0 45px !important;
                text-align: left;
              }
              .fondonota p {
                padding: 3px 45px !important;
                font-family: 'Patrick Hand', cursive !important;
                font-size: 1.5em !important;
                line-height: 1.2;
              }

              .fondonota ul {
                padding: 0px 30px 20px 60px !important;
              }

              .fondonota ul li {
                padding: 0px 5px 20px 0px !important;
                font-family: 'Patrick Hand', cursive !important;
                font-size: 1em !important;
                line-height: 1.2;
              }


  }




  /* * * * * * * * * Personalización de la barra de navegación * * * * * * * * * */

  /*fondo blanco para todos los contenedores de la barra de navegación*/
  .navbar, .sticky-top, .navbar-light, .bg-light{
    background-color: #ffffff !important;
  }
  /*para la línea inferior de las pestañas*/
  ul.nav-tabs{
    border-bottom: 1px solid transparent !important;
    padding: 0px;

  }
  /* el color de fondo para el menú*/
  nav, nav .container-fluid{
      background-color: #ffffff !important;

  }

  nav .container-fluid{
      border-bottom: 1px solid #D82080 !important;
  }


  /*es para el tipo de texto que tendráen las pestañas*/
  .nav-link{
    margin-right: 2px;
    line-height: 1.42857143;
    border-radius: 4px 4px 0 0;
    color:#555 !important;

  }

  /*código para la pestaña activa*/
  button.active{
    color:#ffffff !important;
    border: 1px solid #D82080 !important;
    background-color: #D82080 !important;
  }

  /* código para el hover de la pestaá*/
  button:hover{
    color:#ffffff !important;
    background-color: #D82080 !important;
    border: 1px solid #D82080 !important;
  }
/*videos responsivos*/
.video-responsive
{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}




.video-responsive iframe, .video-responsive object, .video-responsive embed
{ position: absolute;top: 0;left: 0;width: 100%;height: 100%; }

/* * * * * * *  clases para las botoneras de los íconos * * * * * * * * * */
.botonerapp a img:hover, .botonerapp2 a img:hover,
.botonerapp3 a img:hover
{
  box-shadow:6px 6px 7px rgba(0,0,0,.4);
  -moz-box-shadow:6px 6px 7px rgba(0,0,0,.4);
  -webkit-box-shadow: 6px 6px 7px rgba(0,0,0,.4);
  -webkit-transform: scale(1.10);
  -moz-transform: scale(1.10);
  -o-transform: scale(1.10);
  position:relative;
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
  z-index:5;
}

.botonerapp a img, .botonera img
{
  width: 100%;
  max-width: 450px;
  margin: 20px;
  border-radius: 10px;
}

.botonerapp2 a img, .botonera2 img
{
  width: 100%;
  max-width: 400px !important;
  margin: 20px;
  border-radius: 10px;
}


.botonerapp3 a img
{
  width: 100%;
  max-width: 650px;
  margin: 10px;
  padding: 30px;
}


/* Modificación de la separación de las tarjetas*/
.card{
  margin: 10px !important;
  border: 1px solid #D82080 !important;
}

h5.card-title {
  font-size: 30px !important;
}

/* Modificación de los mensajes de alerta de la pestaña 4*/


.alert-primary {
  margin: 10px !important;
  background:#ffffff !important;
  border: 2px solid #D82080 !important;
  min-width: 250px !important;
  max-width: 300px !important;
}
.alert-primary h5 {
  text-align: center;
  font-size: 20px !important;
}
.alert-primary p{
  text-align: center;
}

.alert-primary p a.linkcrea
{
  font-size: 14px !important;
}

.fondonota{
  background-image: url("../images/papel.png");
  text-align: center;
   background-repeat: repeat-y;
   background-size : contain;
}

.fondonota02{
  background-image: url("../images/papel-v02.png") !important;
  text-align: center;
   background-size : cover 100% !important;
   border-radius: 10px !important;
   border: 3px solid #c1c1c1 !important;
}


.fondonota h5{
  font-family: 'Patrick Hand', cursive !important;
  font-size: 3em !important;
  color: #D82080 !important;
  padding: 20px 40px 0px 80px ;
}

.fondonota02 h5{
  font-family: 'Patrick Hand', cursive !important;
  font-size: 3em !important;
  color: #D82080 !important;
  padding: 20px 20px 0px 20px;
}

.fondonota02 p  {
  padding: 0px 30px 20px 30px ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5em !important;
  line-height: 1.2;
}
.fondonota p{
  padding: 0px 50px 20px 80px ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5em !important;
  line-height: 1.2;
}

.fondonota ul, .fondonota02 ul {
  padding: 0px 50px 20px 90px ;
}

.fondonota ul li, .fondonota02 ul li {
  padding: 0px 5px 20px 0px ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5em !important;
  line-height: 1.2;
}


@media only screen and (min-width: 1200px) {
        .fondonota{
          background-image: url("../images/papel-xl.png");
          text-align: center;
           background-repeat: repeat-y;
           background-size : contain;
        }

        .fondonota h5{
          font-family: 'Patrick Hand', cursive !important;
          font-size: 3em !important;
          color: #D82080 !important;
            padding: 20px 40px 0px 80px ;
            text-align: left !important;
        }

        .fondonota p {
          padding:20px 80px ;
          font-family: 'Patrick Hand', cursive !important;

        }
        .fondonota ul {
          padding: 0px 50px 20px 90px ;
        }

        .fondonota ul li {
          padding: 0px 5px 20px 0px ;
          font-family: 'Patrick Hand', cursive !important;
          font-size: 1.5em !important;
          line-height: 1.2;
        }
}