/*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, i {
color:#410099 ;
}

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

/*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 #410099;
}
/*clase para meter margen a los indices*/
.margen{
 margin-left: 5%;
}

/* clase para div con borde punteado y sombra*/
.cajapunteada{
  width:90%;
  border-radius: 10px;
  box-shadow: lightgrey 1px 1px 15px;
  background-color: #fafafa;
  margin: auto;
  padding: 2.5rem;
  border: 3px dotted #410099;
}
/*estilo para las referencias*/
.txt-cita{
text-align: right;
color: #410099 ;/*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: #410099 ;
    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:80% !important;
  margin: 0 10% !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;
}

.uatmimg3{
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto;
}

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

}

h5{
  font-size: 18px !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: #410099 !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: #410099;
}

/*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;

}

/* * * * * * * * * * * * * * * Tablas responsivas * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px) {
  .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: #410099;
                font-size: 18px;
                display: block;
                text-align: center !important;
                padding-bottom: 10px;
              }

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

              .resp2 td:nth-of-type(2):before {
                content: "Protege";
                color: #410099;
                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:100%;
                  border-radius: 10px;
                  box-shadow: lightgrey 1px 1px 15px;
                  background-color: #fafafa;
                  margin: auto;
                  padding: 2.5rem;
                  border: 2px solid #410099;
              }

              /* 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 #410099;
              }

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

              }
              .uatmimg3{
                width: 100% !important;
                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: #410099 !important;
                padding: 10px 15% !important;
                text-align: left;
              }
              .fondonota p {
                padding: 3px 15% !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;
              }
              .card02{
                min-width: 300px;
                max-width: 300px;
                margin: 0px auto !important;
              }
  }




  /* * * * * * * * * 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 #410099 !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 #410099 !important;
    background-color: #410099 !important;
  }

  /* código para el hover de la pestaá*/
  button:hover{
    color:#ffffff !important;
    background-color: #410099 !important;
    border: 1px solid #410099 !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: 3px solid #410099 !important;
  border-radius: 10px !important;
  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);
}

.card02{
  margin: 10px !important;
  border: 3px solid #410099 !important;
  border-radius: 10px !important;
  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);
  height: auto;
  min-height: 460px;
  max-width: 350px;
}

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

.col .card img{
  max-width: 300px !important;
  width: 100% !important;
  text-align: center !important;
  margin: auto;
}

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 #410099 !important;
  min-width: 250px !important;
  max-width: 90% !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") !important;
  text-align: center;
    background-size : contain !important;
    background-repeat: repeat-y;
    border-radius: 10px !important;
    border: 3px solid #c1c1c1 !important;
    box-shadow:6px 6px 7px rgba(0,0,0,.4);
}

.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: 1.5em !important;
  color: #410099 !important;
  padding: 30px 40px 0px 10% ;
}

.fondonota02 h5{
  font-family: 'Patrick Hand', cursive !important;
  font-size: 3em !important;
  color: #410099 !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 10% ;
  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.png") !important;
          text-align: center;
            background-size : cover 100% !important;
            background-repeat: repeat-y;
            border-radius: 10px !important;
            border: 3px solid #c1c1c1 !important;
            box-shadow:6px 6px 7px rgba(0,0,0,.4);
            max-width: 800px !important;
        }

        .fondonota h5{
          font-family: 'Patrick Hand', cursive !important;
          font-size: 2em !important;
          color: #410099 !important;
            padding: 30px 40px 0px 60px ;
            text-align: left !important;
        }

        .fondonota p {
          padding:20px 60px ;
          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;
        }
}

/* clase para dar color a la base de las fichitas*/
.card-footer{
  background-color: #19d3c5 !important;
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius:7px !important;
  z-index: 3495056;
}

/* Carbonara */
/*nuevas tarjetas*/
.carbonads{
  /*position: static;
  display: block;*/
  border-radius: 15px;
  color: #000000;
  border: solid 4px #410099;
/*  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;*/
  font-size: 1.2rem !important;
  font-weight: 450 !important;
  line-height: 1.5;
  width: 100%;
  padding: 15px 25px 15px 100px;
  margin: 2rem 0;
  overflow: hidden;
  line-height: 1.4;
  text-align: justify;
  box-shadow:6px 6px 7px rgba(0,0,0,.4);
  margin: 0 auto;
}

#carbonadas-pal01{
  /*background-color: #D64598;*/
}
#carbonadas-pal02{
  background-color: #FFB900;
}
#carbonadas-pal03{
  background-color: #00BE7F;
}
#carbonadas-pal04{
  background-color: #FF4058;
}

.carbonads a {
  color: #343a40;
}

.carbon-img {
  float: left !important;
  margin-left: -75px !important;
}

.carbon-poweredby {
  display: block;
  margin-top: .75rem;
  color: #495057 !important;
}

.carbonads01, .carbonads02, .carbonads03, .carbonads04 {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: bottom right !important;
}

.carbonads01{
 background-image: url("../images/cajas/01_NumArmar.png");

}

.carbonads02{
 background-image: url("../images/cajas/02_NumArmar.png");
}

.carbonads03{
 background-image: url("../images/cajas/03_NumArmar.png");
}

.carbonads04{
 background-image: url("../images/cajas/04_NumArmar.png");

}

.carbonads .carbon-text b
{
  color: #ffffff !important;
}

#carbonads01-fondo{
  height: 100px !important;
  float: inline-end !important;
  margin: 0px;
  padding: 0px;
  z-index: 10000;

}

/* cambios css solo para modo vertical */
@media only screen
and (max-width: 550px)
{
  .botonerapp img
  {
    width: 100%;
    margin: 0px 40px;
    border-radius: 10px;
  }
}

/*Colores para el vocaroo*/
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #410099 !important;
-webkit-box-shadow:  2px 2px 4px 0px #410099 !important;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}