/* ==========================================
    DICIONARIO
========================================== */
.ABC{padding:10px 20px;border:1px solid black;font:bold 1.2em Verdana;width:90%;text-align:center;background:#b2b3b1;border-radius:50px;line-height:1.7em;position:fixed;left:2px;bottom:2px;z-index:10000;}
.ABC a{text-decoration:none;color:darkblue;background:white;padding:2px 10px;border-radius:20px;}
.ABC a:hover{color:white;background:darkblue;}
.ABC-letra{text-align:center;background:black;}
.ABC-letra strong{color:white;font-size:1.5em;}
/***********************************
    CONTENEDOR MENU
***********************************/
.contMenu{display:grid;grid-gap:1em;background-color:#a9aaaa;padding:10px;border-radius:20px;}
.contMenu>div{background-color:white;padding:1em;border-radius:20px;}
@media (max-width: 800px) {.col2,.col3,.col4 {grid-template-columns:auto;}}
@media (min-width: 800px) {.col2,.col3,.col4 {grid-template-columns:auto auto;}}
@media (min-width: 1200px) {
    .col3 {grid-template-columns:auto auto auto;}
    .col4 {grid-template-columns:auto auto auto auto;}
}
/***********************************
    TABLA VOCABULARIO Y DICIONARIO
***********************************/
.tablaVocabulario{margin:20px auto;width:100%;box-sizing:border-box;}
.tablaVocabulario th,.tablaVocabulario td{padding:5px;}
.tablaVocabulario th{color:white;background:black;}
.tablaVocabulario tr:hover{background:#525151;color:white;}
.tablaVocabulario td{outline:#414040 1px dotted;vertical-align:top;}
.tablaVocabulario td:nth-child(1){font-weight:bold;color:#793711;}
.tablaVocabulario tr:hover td:nth-child(1),.tablaVocabulario tr:hover span{color:palegreen}
.tablaVocabulario tr:hover a{color:yellow;}
/* ==========================================
    CONTENEDOR CÓDIGOS
========================================== */
.CajaCodigos{background:#FFFFE6;position:relative;padding:35px 20px 15px;margin:20px auto;border:1px solid #D4D2D2;border-radius:10px;width:80%;text-indent:0;}
.ccCod:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Código"}
.ccCss:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Estilos CSS"}
.ccEjem:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Ejemplo"}
.ccHtml:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Código HTML"}
.ccJs:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Javascript"}
.ccResul:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Resultado"}
.ccSint:after{position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Sintaxis"}
.CajaCodigos pre {margin:auto; overflow:auto; width:100%; font-size:14px;border:1px solid grey;padding:20px;box-sizing:border-box;background:black;color:white;}
@media (min-width: 290px) {.CajaCodigos pre {max-height:200px}}
@media (min-width: 768px) {.CajaCodigos {width:80%;}}
@media (min-width: 992px) {.CajaCodigos {width:60%;}}
/***********************************
    CAJA BLANCA
***********************************/
.CajaBlanca{margin:40px auto;border:1px solid #D4D2D2;border-radius:10px;width:80%;padding:20px;box-shadow:5px 5px 12px black}
.CajaBlanca pre {margin:auto; overflow:auto; width:100%; font-size:0.8em;}
/* ==========================================
    IR ARRIBA IMAGEN FIJA EN PANTALLA
========================================== */
#Ini{position:fixed;right:20px;bottom:20px;z-index:10000;font-size:50px;text-decoration:underline;}
#Ini a{color:#CFCECE;}
#Ini a:hover{color:#31BD45;}
/* ==========================================
    VOLVER ARRIBA
========================================== */
.arriba {font:1em monospace;text-align:right;}
.arriba span {font-size:1.2em;font-weight:bold;}
.arriba a {color:#8A8989;text-decoration:none;}
.arriba a:hover {color:#148313;text-decoration:underline;}
@media (min-width: 480px) {.arriba {margin:auto;width:90%;margin-bottom:20px;}}
@media (min-width: 600px) {.arriba {font-size:1.2em}}
/* ==========================================
    MENU DE CONTENIDO
========================================== */
.menuContenido{display:grid;grid-template-columns:100%;background-color:#2c2c2c;margin:1em auto;border-radius:20px;}
.menuContenido .columna{padding:5px;font-size:1em;color:#cccbcb;font:bold 1.1em monospace;}
.menuContenido a{color:rgb(250, 250, 196);text-decoration: none;}
.menuContenido a:hover{color:rgb(164, 243, 145);text-decoration:underline;}
.menuContenido ul{list-style-position: inside;padding-left:1em;}
@media (min-width: 600px) {.menuContenido{grid-template-columns:repeat(3,33.33%);}}
@media (min-width: 600px) {.menuContenido .columna{font-size:0.8em;}}
@media (min-width: 900px) {.menuContenido .columna{font-size: 1.1em;}}
/* ==========================================
    DICIONARIO CON DOS O TRES COLUMNAS CON GRILLA
========================================== */
.tableGrid{width:100%;margin:2em auto;}
.tableGridGrup{outline:1px solid #7c7b7b;}
.tableGridLiteral{color:white;background-color:#575555;font-size:2em;text-align:center;padding:2px;}
.tableGridItem{width:100%;display:grid;grid-template-columns:150px 200px auto;}
.tableGridItemMul{width:100%;display:grid;grid-template-columns:150px auto;}
.tableGridItem div,
.tableGridItemMul div{outline:1px solid #808080;}
.tableGridCol1{color:#5c0c0c;font:bold 1.2em 'Times New Roman';padding:5px;text-align:center;}
.tableGridCol2{color:#335c0a;font-weight:bold;padding:5px;text-align:center;}
.tableGridCol3{padding:5px;}
.tableGridColMul{width:100%;display:grid;grid-template-columns:200px auto;}
.tableGridItem:hover,.tableGridItemMul:hover,.tableGridItem2:hover{background-color:#faf4d2;}
.tableGridItem2{display:grid;grid-template-columns:200px auto;}
.tableGridItem2 div{outline:1px solid grey;padding:5px;}
/* ==========================================
    ALERTAS
========================================== */
.aviAdv{background:#ffffd8;border:1px solid #d9d733;color:#74730a;padding:.6em 1.2em .8em;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;width:80%;margin:auto;margin-bottom:30px;}
.aviExi{background:#eaffc0;border:1px solid #a3cd52;color:#405e07;padding:.6em 1.2em .8em;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;width:80%;margin:auto;margin-bottom:30px;}
.aviInf{background:#E0FEFD;border:1px solid #52C9CD;color:#075D5F;padding:.6em 1.2em .8em;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;width:80%;margin:auto;margin-bottom:30px;}
.aviPel{background:#ffebe7;border:1px solid #f9a08f;color:#c6361a;padding:.6em 1.2em .8em;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;width:80%;margin:auto;margin-bottom:30px;}
/* ==========================================
    ÍNDICE
========================================== */
.indiceArea1{grid-area:uno}
.indiceArea2{grid-area:dos}
.indiceArea3{grid-area:tre}
.indiceArea4{grid-area:cua}
.indice{background:#ddd;box-sizing:border-box;outline:1px solid #ccc;padding:0.5em;width:100%;display:grid;grid-gap:0.5em;grid-template-areas:'uno dos tre cua';}
.indice div>div{background:#fff;overflow:auto;box-sizing: border-box;padding:0.2em;border-bottom:1px dotted #333;}
.indice div>div:hover{background: rgba(76, 175, 80, 0.3);}
.indice a{color:#0703fb;text-decoration:none;}.indice a:hover{text-decoration:underline;}
.indice span{color:#1c970f;cursor:zoom-in;font-weight:bold;}
@media (max-width: 700px) {.indice{grid-template-areas:'uno tre' 'dos cua';}}
.indice .letra{background:#000;color:#FFF;font:bold 1.2em verdana;display:grid;justify-content:center; align-items:center;height:2em;}
.indice .letra:hover{background:#FFF;color:#000;outline:1px solid #000}
/* ==========================================
    Lista de código enumerada
========================================== */
.ListaNegra{color:white;background:black;border-radius:10px;padding:20px;box-sizing:border-box;font:0.75em monospace;letter-spacing: 1px;margin:2em auto;width: 100%;overflow: auto;}
.ListaNegra p{text-align:center;margin:0;padding:0;font:bold italic 1.5em Verdana;border-bottom:1px solid #878787}
.ListaNegra > span{box-sizing: border-box;display:contents;margin: 0;padding: 0;width: 100%;white-space: pre-wrap;}
.numListaNegra::before{background: rgb(33, 10, 168);color:#eff1f1;font-weight:bold;content:attr(data-num);padding-right: 5px;margin-right: 10px;}
/* ==========================================
    Acordeón con javascript 1
========================================== */
.acordeon{margin:5px auto;width:100%;}
@media (min-width: 768px) {.acordeon{width:80%}}
.acordeon h3{background:#E4DFDF;border-top:2px solid #F3F1F1;cursor:pointer;font-family:monospace;font-style:italic;margin:0;padding:.25em;}
.acordeon h3:before{content:" ▼  "}  /*Simbolo Alt+31*/
.acordeon div{background:#F9F7DB;margin:10px;padding:10px 20px;}
.acordeon pre {font:0.8em monospace;}
.acordeon img {height:auto;max-width:100%;}
/* ==========================================
    Acordeón con javascript 2
========================================== */
.acordeon2{border:1px solid #ccc; background:#fff; margin:auto; width:100%;}
@media (min-width: 768px) {.acordeon2{width:80%;}}
.acordeon2 p{padding:0px; margin:0px;}
.acordeon2 .acord2text{ font-weight: bold; font-style:italic;}
.acordeon2 .acord2cont{background:#F9F7DB; margin:10px; padding:10px 20px;}
.acordeon2 pre{overflow:auto; height:180px; font:0.8em monospace;}
.acordeon2 .acord2descrip{background:#Fff; overflow:hidden;}
.acordeon2 .acord2descrip div{background:#F9F7DB; margin:10px; padding:10px 20px;}
.acordeon2 .acord2Vermas{background:#999; color:#fff; cursor:pointer;}
.acordeon2, .acord2Vermas, .acord2descrip{padding:3px}
/* ==========================================
    Acordeón con javascript 3
========================================== */
.acordeon3{border:1px solid #ccc; background:#fff; margin:auto; width:100%;}
@media (min-width: 768px) {.acordeon3{width:80%}}
.acordeon3body{background:#F9F7DB; margin:10px; padding:10px 20px;}
.acordeon3pre{overflow:auto; margin:5px; background:#F7F8DE; padding:5px; font:0.8em monospace;}
.display-block {display:block}
.display-none {display:none}
/* ==========================================
    Caja estilos CSS 2
========================================== */
.cajaCss{border:0.5em solid #a4a55e;border-radius:20px;box-sizing:border-box;display:block;width:100%;margin-bottom:1em;}
.cajaCssA{display:flex;flex-wrap:wrap;width:100%;}
.cajaCssA > h1{border-bottom:1px solid black;margin:0;padding:0;text-align:center;width:100%;}
.cajaCssA div{width:100%;}
.cajaCssA pre{overflow:auto;height:auto;background:black;color:white;margin:0;box-sizing:border-box;padding:1em;width:100%;}
.cajaCssC{background:white;border:5px solid #660a0a;border-radius:20px;box-sizing:border-box;padding:1em;width:100%;}
@media screen and (min-width: 1000px){.cajaCss{border:1em solid #a4a55e;}.cajaCssA{margin-bottom:1em;}.cajaCssA .cajaCssB,.cajaCssA .cajaCssC{width:50%;}}
@media screen and (max-width: 1000px){.cajaCssB,.cajaCssC{margin-bottom:1em;}}
/* ==========================================
    Lista de código con UL y CSS
========================================== */
.CajaListaCodigoUL{width:500px;margin:20px auto;position:relative;}
.CajaListaCodigoUL ul {counter-reset: elemento;list-style-type: none;background:#FBF8F8;padding-left:20px;}
.CajaListaCodigoUL li{padding-left:30px;border-bottom:1px dashed #908D8D;font-family:monospace;font-size:14px;}
.CajaListaCodigoUL li:before {content: counter(elemento);counter-increment: elemento;background:#0D0B94;color:#F9F5F6;position:absolute;width:30px;border:1px solid #FFFFFF;left:1px;font-weight:bold;padding-left:5px;text-align:right;}
/* ==========================================
    Acordeón con CSS
========================================== */
.acordCss{font-family:Arial, sans-serif;font-size:16px;text-align:justify;line-height:1.2em;max-width:80%;margin:auto;}
.acordCss h4{text-transform:uppercase;font-family:sans-serif;letter-spacing:.02em;font-size:1.5em;line-height:1.5em;color:#6689fe;}
details.acordAttr,details.acordAttrCSS,details.acordAttrHtml5x{padding:0;border:1px solid #ccc;background:#f6f6f6;margin-bottom:1em;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;-moz-box-shadow:inset 0 0 8em #ddd;-webkit-box-shadow:inset 0 0 8em #ddd;box-shadow:inset 0 0 8em #ddd;}
/*cambiar el color del acordeón*/
details.acordAttr.eje{padding:0;border:1px solid #ccc;background:#FFD7FF;margin-bottom:1em;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;-moz-box-shadow:inset 0 0 8em #ddd;-webkit-box-shadow:inset 0 0 8em #ddd;box-shadow:inset 0 0 8em #ddd;}
details.acordAttr[open],details.acordAttrCSS[open],details.acordAttrHtml5x[open],details.acordAttr.open,details.acordAttrCSS.open,details.acordAttrHtml5x.open{padding:1.8em;}
details.acordAttr>summary,details.acordAttrCSS>summary,details.acordAttrHtml5x>summary{padding:.8em 1.8em;cursor:pointer;}
details.acordAttr[open]>summary,details.acordAttrCSS[open]>summary,details.acordAttrHtml5x[open]>summary,details.acordAttr.open>summary,details.acordAttrCSS.open>summary,details.acordAttrHtml5x.open>summary{position:relative;top:-1.8em;left:-1.8em;}
details.acordAttr>summary>h4,details.acordAttrCSS>summary>h4,details.acordAttrHtml5x>summary>h4{vertical-align:middle;cursor:pointer;display:inline;color:#526ecc;}
/*cambiar el color del texto*/
details.acordAttr>summary>h4>span{vertical-align:middle;cursor:pointer;display:inline;color:#9b0000}
details.acordAttrHtml5x>summary>h4{color:#f77878}
details,summary{display:block;}
.acordCSSimg{float:right;margin:.1em .2em 0 0;width:25px;height:35px;background:url(../img/maq/ic.png) 25px 0}
.acordHtml5ximg{float:right;margin:.1em .2em 0 0;width:25px;height:35px;background:url(../img/maq/ic.png) 0 35px}
.acordFondoBlanco{background:white;}
.acordPadding20{padding:20px;}
@media screen and (min-width:800px){.acordCss{width:80%;}}
/* ==========================================
    Caja estilos CSS 2
========================================== */
.contCajaEstilo{background-color:#d1cfcf;border-radius:20px;padding:1em;margin:2em auto;width:90%;}
.contCajaCss{
    display:grid;
    grid-template-columns:repeat(4,25%);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
        "contCajaText contCajaText contCajaText contCajaText"
        "contCajaHtml contCajaHtml contCajaEst contCajaEst"
        "contCajaRes contCajaRes contCajaRes contCajaRes";
}
.contCajaText{background-color:#ffffff;font:bold 2em 'Times New Roman';text-align:center;grid-area:contCajaText;padding:10px;}
.contCajaText span{font-weight:bold;color:blue}
.contCajaHtml{background-color:#000000;color:#ffffff;grid-area:contCajaHtml;}
.contCajaEst{background-color:#fcefde;color:#000000;grid-area:contCajaEst;}
.contCajaEst,.contCajaHtml{overflow:auto;padding:1em;max-height:200px;}
.contCajaEst pre,.contCajaHtml pre{margin:0;}
.contCajaRes{background-color:#ffffff;grid-area:contCajaRes;}
@media screen and (max-width: 800px){
    .contCajaCss{
        grid-template-areas:
        "contCajaText contCajaText contCajaText contCajaText"
        "contCajaHtml contCajaHtml contCajaHtml contCajaHtml" 
        "contCajaEst contCajaEst contCajaEst contCajaEst"
        "contCajaRes contCajaRes contCajaRes contCajaRes";
    }
}
/* ==========================================
    Ventana flotante
========================================== */
.ventanaFlotante{background:#ffffff;border:1px solid #b8b7b7;border-radius:22px;font:18px Arial;padding:33px;min-height:100px;width:70%;position:fixed;left:10%;top:15%;display:none;z-index:100;}
.VFcolorAm{background:#f8f8a7;color:#5e5c05;}
.VFcolorAz{background:#000066;color:#d2cdfc;}
.VFcolorAz a{color:#fcfc80;}
.VFcolorGr{background:#9d9c9c;color:#6b6a6a;}
.VFbordeDoble{border:5px double #000000;}
.VFbordeSombra{box-shadow:5px 5px 12px #000000;}
.VFcerrar{position:absolute;right:3px;top:1px;}
.VFcerrar svg{color:silver;height:2em;width:2em;}
.VFcerrar svg:hover{color:#e60505;}
/***********************************
    TABLA CEBRADA
***********************************/
/* Líneas pares */
.tablaCebrada tr:nth-child(even){background:#FFFFFF}
/* Líneas impares */
.tablaCebrada tr:nth-child(odd){background:#EEEEEE}
/* Primera linea de la tabla */
.tablaCebrada tr:nth-child(1){background:#8A8888;color:#FCFBFB}
/* Ancho y alineación de la tabla */
.tablaCebrada-posicion{width:80%;margin:auto}
/* Al posar el puntero */
.tablaCebrada tr+tr:hover{background:#E6FCE8}
/* Borde */
.tablaCebrada{border:1px solid #EEEEEE;border-collapse:collapse;margin-bottom:2em;}
.tablaCebrada td{border:2px solid #EEEEEE}
.tablaCebrada th{border:2px solid #FFFFFF}
/***********************************
    CONTENEDOR DE IMAGEN RESPONSIVE
***********************************/
.cajaImg{box-sizing:border-box;margin:2em auto;text-align:center;width:95%;max-width:800px;}
.cajaImg>img{height:auto;max-width:100%;}
/***********************************
    MENU DOS COLUMNAS FLEXIBLE
***********************************/
.menuCol2{display:flex;flex-wrap:wrap;border:1px solid #6e6d6d;border-radius:20px;box-shadow:5px 5px 12px black;box-sizing:border-box;width:100%;}
.menuCol2 div{box-sizing:border-box;width:100%;}
@media screen and (min-width: 800px){.menuCol2 div{width:50%;}}
/***********************************
    CAJA SOPORTE
***********************************/
.soporte {background:#FFF5FF;position:relative;padding:35px 20px 15px;margin:auto; margin-bottom:50px;border:1px solid #D4D2D2;border-radius:10px;width:90%;text-indent:0;}
.soporte:after {position:absolute;top:10px;left:20px;font-size:12px;font-weight:700;color:#414040;text-transform:uppercase;letter-spacing:1px;content:"Soporte"}
.soporte ul {display:block;list-style-position:inside;}
.soporte a {color:#666666; text-decoration:none;}
.soporte a:hover {color:#15A705; text-decoration:underline;}
@media (min-width: 599px) {
    .soporte ul li {display:inline;list-style:upper-roman;padding-left:20px;}
    .soporte ul li:before {content:"=> "}
}
@media (min-width: 768px) {.soporte {width:70%;}}
/***********************************
    MENÚ TRABAJANDO
***********************************/
.MenuTrabajando{display:scroll;position:fixed;top:20px;left:0px;z-index:100;border:3px solid #8B008B;background:#feeafe;font-size:0.7em;text-align:right;}
.MenuTrabajando nav,.MenuTrabajando div{padding:3px 20px;}
.MenuTrabajando nav{background-color:#8B008B;color:#feeafe;font:bold 1.1em Verdana;letter-spacing:2px;text-align:center;}
.MenuTrabajando a{color:#0808ca;text-decoration:none;}
.MenuTrabajando div:hover{background-color:#8B008B;;}
.MenuTrabajando a:hover{color:#ffff00;text-transform:uppercase;}
/***********************************
Buscar contenido en una tabla con función Javascript
***********************************/
.buscadorTablaJs{margin:2rem auto;border:1px solid #D4D2D2;border-radius:10px;width:80%;padding:20px;box-shadow:5px 5px 12px black}
.buscadorTablaJs>div,
.buscadorTablaJs>div>input{font-size: 1.5rem;}
.buscadorTablaJs>div{font-weight: bold;text-align: center;}
.buscadorTablaJs>table{margin:2rem auto;width: 100%;}
.buscadorTablaJs>table th{background: #535353;color: #fff;font-size: 1.2rem;text-transform:uppercase;}
.buscadorTablaJs>table tbody tr:nth-child(even){background: #ededfb;}
.buscadorTablaJs>table tbody tr:hover{background: #dcf8df;}
.buscadorTablaJs>table tbody td{padding: 5px;}
.noBuscar{font-size:1.5rem;font-weight: bold;}
.hide {display:none;}
.red{color: #F00;}