/*****************************
*DISPOSITIVO MOVIL SMARTPHONE 
*****************************/

:root{
/*BODY*/
--body-fondo: #F4F7F9;
--body-color: #1D2D3D;
/*HEADER*/
--header-color: #EFEFEF;
--header-fondo: #1A2B44;
/*Iconos Launcher*/
--icono-shadow: 10px 10px 3px rgba(26, 43, 68, 0.15);
--icono-focus-shadow: 5px 2px 1px rgba(26, 43, 68, 0.15);
/*COLORES CONTRASTE DE SKINS*/
--blanco-contraste: #3A8A8A;
--negro-contraste: #C75D34;
/*AVISO IMPORTANTE*/
--aviso-importante-fondo: #FFF8F0;
--aviso-importante-color: #C75D34;
--aviso-importante-borde: #F2C199;
--aviso-importante-borde-secundario: #C75D34;
--aviso-importante-enlace-color: #682E18;
/*TABLAS*/
--tabla-fondo: #FFFFFF;
--tabla-color: #1D2D3D;
--tabla-sombreado-fondo: #AAB8C2;
--tabla-sombreado-color: #1A2B44;
/*LOGIN BOTON*/
--login-fondo: #FFFFFF;
--login-color: #1F1F1F;
--login-borde: #747775;
--login-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
/*GLASS WHITE*/
--skin-glass-fondo: #FFFFFF;
--skin-glass-color: #212529;
--skin-glass-contorno: #E0E6EB;
--skin-glass-borde: #E0E6EB;
--skin-glass-shadow: 0 4px 12px 0 rgba(26, 43, 68, 0.1);
--skin-glass-viñeta: #1A2B44;
/*GLASS DARK*/
--skin-dark-glass-fondo: #F4F7F9;
--skin-dark-glass-color: #1D2D3D;
--skin-dark-glass-borde: #ACB1B5;
/*FORMULARIOS DE APLICACION*/
--formulario-input-fondo: #FFFFFF;
--formulario-input-borde: #E0E6EB;
--formulario-input-color: #212529;
--formulario-input-fondo-disabled: #F4F7F9;
--formulario-input-color-disabled: #AAB8C2;
--formulario-input-placeholder: #AAB8C2;
--formulario-input-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
--formulario-error-color: #D93025;
--formulario-input-focus-borde: #2563EB;
--formulario-boton-fondo: #1A2B44;
--formulario-boton-color: #EFEFEF;
--formulario-img-fondo: #1a2b44;
--formulario-boton-activo-color: #2563EB;
/*SNACKBAR */
--snack-fondo: #1A2B44;
--snack-texto: #EFEFEF;
--snack-borde: rgba(255, 255, 255, 0.2);
--snack-cerrar-fondo: transparent;
--snack-cerrar-color: #1D2D3D;
--snack-enlace-color: #60A5FA;
--snack-acept-color: #FFFFFF;
--snack-acept-fondo: #2563EB;
--snack-acept-borde: transparent;
--snack-cancel-color: #EFEFEF;
--snack-cancel-borde: rgba(239, 239, 239, 0.5);
--snack-cancel-fondo: transparent;
/*SCROLLBAR*/
--scrollbar-track-contraste: rgba(0, 0, 0, 0.1);
--scrollbar-thumb-contraste: rgba(0, 0, 0, 0.27);
/*ENLACES*/
--color-enlace: #2563EB;
/*LOADING BAR HORIZ*/
--loading-bar-fondo: rgba(239, 239, 239, 0.25);
--loading-bar-content: #2563EB;
}






/******************************
*ANIMACIONES CSS v5.0
********************************/
/*ANIMACION BARRIDO Y OCPACIDAD */
@keyframes sweep {0% {opacity: 0; transform: translateX(-1%)}100%  {opacity: 1; transform: translateX(0)}  }
/*ANIMACION DESAPARECER GRADUALMENTE UN OBJETO*/
@keyframes desvanecer {0% {opacity: 1;} 100% {opacity: 0;} } 
/*ANIMACION APARECER GRADUALMENTE UN OBJETO*/
@keyframes aparecer {0% {opacity: 0;} 100% {opacity: 1;} }
/*ANIMACION ZOOM DE ENTRADA*/
@keyframes zoomIn {0% {transform: scale3d(0, 0, 0); } 100% {transform: scale3d(1, 1, 1); } } 
/*ANIMACION ZOOM DE SALIDA*/
@keyframes zoomOut {0% {opacity: 1;} 50% {opacity: 0; transform: scale3d(.3, .3, .3); }  100% { opacity: 0; } } 
/*ANIMACION PULSAR UN OBJETO O IMAGEN HOVER*/
@keyframes pulsar {0% {transform: scale3d(1, 1, 1);} 50% {transform: scale3d(1.05, 1.05, 1.05);} 100% {transform: scale3d(1, 1, 1);}} 
/*ANIMACION APARECER DE ABAJO HACIA ARRIBA */
@keyframes fadeInUp { 0% {transform: translate3d(0, 250%, 0);  }  100% {transform: none;  }  } 
/*ANIMACION APARECER DE ARRIBA ABAJO */
@keyframes fadeInDown {0% {transform: translate3d(0, -250%, 0);  }  100% {transform: none;  }  } 
/*ANIMACION APARECER DE IZQ A DERECHA*/
@keyframes moverDeIzquierdaADerecha {  0% {transform: translateX(-100vw);}  100% {transform: translateX(0);}}
/*ANIMACION APARECER DE DERECHA A IZQ*/
@keyframes moverDeDerechaAIzquierda {  0% {transform: translateX(100vw);}  100% {transform: translateX(0);}}
/*ANIMACION PARA SPINNER */
@keyframes cambiarHora {0% {content: '🕛 Cargando...';} 8.33% { content: '🕐 Cargando...'; } 16.66% {content: '🕑 Cargando...'; } 25% {content: '🕒 Cargando...'; } 33.33% { content: '🕓 Cargando...'; } 41.66% { content: '🕔 Cargando...'; } 50% {content: '🕕 Cargando...'; } 58.33% { content: '🕖 Cargando...'; } 66.66% { content: '🕗 Cargando...';  } 75% { content: '🕘 Cargando...'; } 83.33% {content: '🕙 Cargando...'; } 91.66% { content: '🕚 Cargando...'; } 100% { content: '🕛 Cargando...'; } }
/*ANIMACION LOADING CON PUNTOS SUSPENSIVOS*/
@keyframes loadingPuntosSuspensivos { 0% { content: '.'; } 50% { content: '..'; } 100% { content: '...'; }}
/*ANIMACION PARA BARRA HORIZONTAL DE LOADING*/
@keyframes animLoaderBar {0% {left: 0; transform: translateX(-100%);} 100% { left: 100%; transform: translateX(0%); } }
/*ANIMACION PARA EXPANDIR TOOLBAR*/
@keyframes expandToolbar { 0% { transform: scaleX(0); opacity: 0;} 100% { transform: scaleX(1); opacity: 1; } }
/*ANIMACION FLASH DIAPOSITIVA ESTILO*/
@keyframes diapositivaFlash {0% { background: #000; } 50% { background: #000; } 75% { background: #353535; } 100% { background: var(--body-fondo); } }
/*ANIMACION FONDO DEGRADADO PARA LAUNCHER*/
@keyframes fondoLauncher {0% { background: #ffffff;} 100% { background: var(--body-fondo);} }




/*SCROLL v5.0*/
section  pre::-webkit-scrollbar-track, section .tabla::-webkit-scrollbar-track{
background: var(--scrollbar-track-contraste); 
border-radius: inherit;
}  
section  pre::-webkit-scrollbar-thumb, section .tabla::-webkit-scrollbar-thumb{
background: var(--scrollbar-thumb-contraste); 
border-radius: inherit;
} 
section  pre::-webkit-scrollbar, section .tabla::-webkit-scrollbar{
width: 3px; 
height: 6px;
}





/*BODY v5.0*/
body{
background: var(--body-fondo); 
color: var(--body-color); 
position: relative; 
font-size: 1.075em; 
font-weight: 300;
width: 100%; 
height: 100%; 
overflow-x: hidden; 
overflow-y: auto; 
font-family: -apple-system, Roboto, Arial, Helvetica, sans-serif;
}





/*HEADER v5.0*/
header{
background: var(--header-fondo);
color: var(--header-color); 
width: 100%;  
padding: 1em 7%; 
position: sticky; 
top: 0; 
z-index: 100;
}
header a{
transition: opacity .3s; 
opacity: 1; 
letter-spacing: 1px; 
display: inline-block; 
font-size: 1.45em; 
}
header a > img{
width: 28px;
height: 28px; 
margin-right: 0.3em;  
vertical-align: top; 
}
header[data-modal="activo"] a{
pointer-events: none; 
opacity: 0.65; 
transition: opacity .3s;
}
header[data-modal="activo"] > img {
cursor: pointer; 
display: inline-block; 
width: 28px; 
height: 28px; 
position: absolute;  
top: auto;  
right: 5%; 
animation-name: zoomIn;  
animation-duration: .5s;  
animation-fill-mode: both;
}
header[data-modal="activo"] > img[data-estado="oculto"]{
visibility: hidden; 
pointer-events: none;
}
header[data-modal="activo"] > img[data-estado="visible"]{
visibility: visible; 
pointer-events: initial;
}





/*MODAL v5.0*/
dialog[open]{
overflow-x: hidden; 
overflow-y: auto; 
animation-name: aparecer; 
animation-duration: 0.35s; 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 90; 
}





/*MAIN v5.0*/
main{
width: 100%; 
height: auto; 
position: relative; 
overflow-x: hidden; 
overflow-y: auto;
}
dialog > main{
background: var(--body-fondo); 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
overflow-x: hidden; 
overflow-y: scroll;
}





/*ARTICLE v5.0*/
article{
width: inherit; 
position: relative;  
padding: 2.5em 0%; 
}
dialog > main article.login{
padding: 0; 
margin: 0; 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
display: flex; 
justify-content: center; 
align-items: center; 
flex-direction: column; 
flex-wrap: nowrap;
}
dialog > main article.explorar{
padding: 3.5em 0%;
}
dialog > main article.primer-plano{
margin-top: 3em;
}





/*SECTION v5.0*/
section{
margin-bottom: 15%; 
padding: 1em 1.5em; 
color: var(--skin-glass-color); 
background: var(--skin-glass-fondo); 
border-radius: 16px; 
box-shadow: var(--skin-glass-shadow); 
border: 1px solid var(--skin-glass-contorno);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
dialog > main article.login section{
margin-bottom: 0%; 
border-radius: 0px; 
box-shadow: none; 
background: transparent; 
border: none;
}
dialog > main article.explorar section{
margin-bottom: 0%; 
border-radius: 0px; 
box-shadow: none; 
background: transparent; 
border: none;
}




/*H1 TITULOS v5.0*/
h1{
font-family: Tahoma, Verdana, sans-serif; 
font-size: 1.5em; 
line-height: 1.2; 
margin-bottom: 1em; 
padding: 0.75em 4%; 
}





/*H2 H3 SUBTITULOS v5.0*/
section h2, section h3{
margin-bottom: 1.3em; 
font-size: 1.35em; 
font-weight: 700;
}
section h2{
color: var(--skin-glass-color);
}
section h3, section h3 a{
color: var(--skin-glass-color);
}
section h3 a{
cursor: default; 
display: block; 
pointer-events: none;
}
dialog > main article.explorar section h2.titulo-menu{
color: var(--body-color); 
letter-spacing: 1px; 
width: max-content; 
font-weight: 500; 
font-size: 1.1em; 
margin-left: auto;
}
dialog > main article.explorar section h2.back{
opacity: 1; 
transition: opacity .3s; 
cursor: pointer;
}
dialog > main article.explorar section h2.back::before{
content: '➔'; 
background: inherit; 
font-size: 0.75em; 
vertical-align: baseline; 
margin-right: 0.2em; 
transform: rotate(180deg); 
display: inline-block; 
width: max-content; 
color: inherit;
}





/*GADGET POST v5.0*/
section .post > p{
line-height: 1.5;
}
section .post > div, section .post pre{
margin-bottom: 1.1em;
width: 100%;
}
section .post  ul, section .post ul li, section .post > p{
margin-bottom: 1.1em;
}
section .post ul li, section .post > p{
font-size: 1.1em;
}
section .post ul li{
line-height: 1.4;
}
section .post ul li::before{
content: '•'; 
color: var(--skin-glass-viñeta); 
margin-right: 0.15em; 
font-size: 1.25em; 
vertical-align: baseline;
}
section .post > p[contenteditable]{
transition: border 0.3s; 
border-bottom: 1px solid var(--skin-glass-borde); 
opacity: 0.95; 
font-family: Georgia, sans-serif;
}
section .post > p[contenteditable]:focus{
opacity: 1; 
border-bottom: 1px solid var(--color-enlace)
}
section .post > div img{
width: 100%; 
height: 14em; 
object-fit: contain; 
filter: brightness(95%) drop-shadow(0 2px 8px rgba(26, 43, 68, 0.1)); 
background: transparent;
}
section .post > div img[data-style="cover"]{
object-fit: cover;
}
section .post > div iframe{
max-width: 100%; 
height: 280px;
}
section .post pre{
border: 1px solid var(--skin-dark-glass-borde); 
font-family: inherit; 
max-height: 470px;  
color: var(--skin-dark-glass-color); 
background: var(--skin-dark-glass-fondo); 
font-size: 1.3em; 
border-radius: 8px; 
padding: 0.75em 1em; 
white-space: nowrap; 
overflow-x: auto; 
overflow-y: auto;
}
section .post pre::after{
content: ''; 
padding-right: 1em; 
display: contents;
}
section .post pre a{
margin: 0em 0.7em; 
text-decoration: underline;
}
section .post pre b{
color: var(--negro-contraste); 
font-weight: 600; 
} 
section .post pre > sup, section .post pre > sub{
font-size: smaller; 
}
section .post > div.tabla{
border: 1px solid var(--skin-dark-glass-borde); 
background: var(--skin-dark-glass-fondo); 
overflow-x: auto;  
max-height: 470px; 
margin-bottom: 1.75em; 
padding: 1.2em; 
border-radius: 8px;
}
section .post > div table{
margin: 0 auto; 
background: var(--tabla-fondo); 
color: var(--tabla-color);
}
section .post + section div.post, section .post + section div.app, section .post + section div.tab-nav {
margin: 2em auto;
}





/*ESTILOS FORMATO ESTANDAR PARA TABLA DE DATOS v5.0*/
section .post > div.tabla table.formato-estandar{
text-align: center; 
vertical-align: middle; 
font-size: 1.1em;
}
section .post > div.tabla table.formato-estandar .sombreado{
background: var(--tabla-sombreado-fondo); 
color: var(--tabla-sombreado-color);
}
section .post > div.tabla table.formato-estandar .sombreado > p{
background: transparent;
}
section .post > div.tabla table.formato-estandar .texto-oculto p{
color: transparent; 
}
section .post > div.tabla table.formato-estandar tr.encabezado{
font-weight: bold;
}
section .post > div.tabla table.formato-estandar .formato-sin-salto{
white-space: nowrap;
}
section .post > div.tabla table.formato-estandar .subrayado-sup{
text-decoration: overline;
}
section .post > div.tabla table.formato-estandar tr td > p{
margin: 0; 
background: transparent;
}
section .post > div.tabla table.formato-estandar tr td.default > p {
line-height: 1.3; 
margin-bottom: 0.5em;
}
section .post > div.tabla table.formato-estandar tr td{
padding: 0.5em; 
border: 1px solid;
}





/*GADGET FORMULARIO DE APLICACION v5.0*/
section .app{
margin: 2em auto;  
width: 100%; 
}
section .app form{
width: 100%;
} 
section .app form > div{
margin-bottom: 1em; 
width: inherit;
}
section .app form div.controls{
display: flex; 
flex-direction: column; 
flex-wrap: nowrap; 
justify-content: center; 
align-items: center;
}
section .app form input, section .app form > div select, section .app form textarea{
font-size: 1.1em; 
padding: 0.75em 1em; 
color: var(--formulario-input-color); 
width: inherit; 
border-radius: 8px; 
background: var(--formulario-input-fondo); 
border: 1px solid var(--formulario-input-borde); 
}
section .app form input:disabled, section .app form > div select:disabled, section .app form textarea:disabled{
border: 1px solid var(--formulario-input-borde); 
background: var(--formulario-input-fondo-disabled); 
color: var(--formulario-input-color-disabled);
}
section .app form input:focus, section .app form textarea:focus{
border: 1px solid var(--formulario-input-focus-borde); 
box-shadow: var(--formulario-input-shadow); 
caret-color: var(--formulario-input-focus-borde);
}
section .app form input::placeholder, section .app form textarea::placeholder{
opacity: 1; 
color: var(--formulario-input-placeholder);
}
section .app form input:focus::placeholder, section .app form textarea:focus::placeholder{
opacity: 0;
}
section .app form input[type='submit'], section .app form input[type='reset'], section .app form input[type='button'] {
cursor: pointer; 
letter-spacing: 1px; 
border-radius: 999px; 
text-align: center; 
padding: 0.3em 1.5em; 
width: max-content; 
border: transparent; 
background: var(--formulario-boton-fondo);   
color: var(--formulario-boton-color);
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
section .app form input[type='submit']:disabled, section .app  form input[type='reset']:disabled, section .app form input[type='button']:disabled{
opacity: 0.7; 
pointer-events: none;
}
section .app form div.controls > input{
margin: 0.75em auto;
} 
section .app form div > img{
background: var(--formulario-img-fondo); 
object-fit: cover;
border-radius: 8px;
}
section .app form div > label{
display: inline-block; 
text-align: center; 
opacity: 0.75; 
line-height: 1.5; 
font-size: 0.75em;
} 
section .app form .boton-activado{
font-size: 1em; 
cursor: pointer; 
pointer-events: initial; 
opacity: 1; 
color: var(--formulario-boton-activo-color); 
font-weight: 600; 
}
section .app form .boton-desactivado{
font-size: 1em; 
opacity: 0.7; 
cursor: default; 
pointer-events: none;
}
section .app form output{
color: var(--formulario-error-color);
}
section .app form input[type='submit']:focus , section .app form input[type='reset']:focus{
box-shadow: none; 
caret-color: transparent;
}
section .app pre{
border: 1px solid var(--skin-dark-glass-borde); 
font-family: inherit; 
color: var(--skin-dark-glass-color); 
background: var(--skin-dark-glass-fondo); 
margin-bottom: 1em; 
font-size: 1.25em; 
border-radius: 8px; 
padding: 0.75em 1em; 
white-space: nowrap; 
overflow-x: auto; 
overflow-y: hidden;
}
section .app form .autocorrect-mode {
display: flex;
align-items: center;
justify-content: flex-start; 
margin: 1.5em 0; 
padding: 0 5px; 
gap: 0.5em; 
cursor: pointer; 
}

/* Etiqueta de texto (ej. "Autocorregir orden...") */
section .app form .autocorrect-mode label {
font-size: 0.9em;
color: var(--body-color);
opacity: 0.9;
user-select: none; 
}

/* Estilo del checkbox */
section .app form .autocorrect-mode input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
cursor: pointer;  
accent-color: var(--color-enlace);
}
/*Auto sugerencias*/
section .app form #suggestion-box {
padding: 0.25em 1em;
color: var(--body-color);
transition: opacity 0.3s ease;
}
section .app form #suggestion-box .mensaje-sugerencia{
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
text-align: left;
margin-bottom: 0.5em;
opacity: 0.9;
}

section .app form #suggestion-box .suggestion-link {
color: var(--color-enlace);
font-weight: bold;
text-decoration: underline;
cursor: pointer;
padding: 0.5em 0em;
display: block;
text-align: center;
font-size: 1.08em;
}

section .app form #suggestion-box .suggestion-link:hover {
filter: grayscale(40%);
}





/*GADGET SEARCH HOME v5.0*/
section .app form .busqueda {
display: flex; 
flex-wrap: nowrap; 
justify-content: center; 
padding: 1em 0em; 
}
section .app form .busqueda input[type='submit'] {
pointer-events: none; 
padding: 0.75em; 
border-style: solid; 
border-width: 1px 1px 1px 0px; 
border-color: var(--formulario-input-borde); 
background: var(--formulario-input-fondo); 
border-radius: 0px; 
border-top-right-radius: 999px;  
border-bottom-right-radius: 999px;  
color: inherit;
transition: none;
}
section .app form .busqueda input[type='search']::placeholder{
color: var(--formulario-input-placeholder);
}
section .app form .busqueda input[type='search'] {
background: var(--formulario-input-fondo); 
text-overflow: ellipsis; 
padding: 0.75em 1.5em; 
border-style: solid; 
border-width: 1px 0px 1px 1px; 
border-color: var(--formulario-input-borde);  
border-radius: 0px; 
border-top-left-radius: 999px;  
border-bottom-left-radius: 999px;
}
section .app form .busqueda input[type='search']:focus {
border-style: solid; 
border-width: 1px 0px 1px 1px; 
border-color: var(--formulario-input-focus-borde);
}
section .app form .busqueda input[type='search']:focus ~ input[type='submit'] {
border: 1px solid var(--formulario-input-focus-borde); 
box-shadow: var(--formulario-input-shadow);  
caret-color: var(--formulario-input-focus-borde);
}
section .app form .busqueda input[type='search']:valid ~ input[type='submit']{
pointer-events: initial;
}
section .app form .busqueda input[type='search']:disabled ~ input[type='submit']{
opacity: 0.7; pointer-events: none;
}






/*GADGET SEARCH MODAL v5.0*/
dialog main > article.explorar section .app form .busqueda{
margin-bottom: 0em; 
}



/*Gadget para expresiones matematicas*/
pre .math-expression {
display: flex;
align-items: center; 
flex-wrap: nowrap;
font-family: 'Times New Roman', Times, serif; 
font-size: 1.3em;
}

/* Estilos base para términos, operadores, etc. */
pre .math-expression > span, .math-expression__term {
margin: 0 0.15em;
display: inline-flex; 
align-items: center;
}

pre .math-expression__operator {
color: var(--negro-contraste);
font-weight: 600;
padding: 0 0.1em;
}

/* --- Estilos para Fracciones --- */
pre .math-expression__fraction {
display: inline-flex;
flex-direction: column;
text-align: center;
margin-left: 0.1em;
vertical-align: middle; 
}

pre .math-expression__numerator {
padding: 0.1em 0.3em;
border-bottom: 2px solid var(--body-color);
line-height: 1.1;
}

pre .math-expression__denominator {
padding: 0.1em 0.3em;
line-height: 1.1;
}

/* --- Estilos para Potencias --- */
pre .math-expression sup {
font-size: 0.7em;
margin-left: 0.1em;
line-height: 0; 
position: relative;
top: -0.5em; 
}

/* --- Estilos para Raíces Cuadradas --- */
pre .math-expression__radicand {
border-top: 2px solid var(--body-color);
padding: 0.1em;
margin-left: -0.2em; 
}
pre .math-expression__sign {
font-weight: 400; 
padding: 0 0.05em;
}





/*GAGDGET FRACCIONES v5.0*/
pre .expresion-de-fracciones {
display: flex; 
align-items: center; 
flex-wrap: nowrap; 
flex-direction: row; 
width: max-content;
}
pre .expresion-de-fracciones sup, pre .expresion-de-fracciones sub{
font-size: inherit;
}
pre .expresion-de-fracciones .num-fraccionario{
margin: 0em 0.5em; 
display: flex; 
justify-content: flex-start; 
flex-wrap: nowrap; 
align-items: center; 
flex-direction: row;
}
pre .expresion-de-fracciones .num-fraccionario .p-entero{
font-size: larger; 
padding-right: 0.3em;
}
pre .expresion-de-fracciones .num-fraccionario .p-fraccionaria{
text-align: center; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center;
}
pre .expresion-de-fracciones .num-fraccionario .p-fraccionaria .p-numerador{
width: 100%; 
border-bottom: 3px solid var(--blanco-contraste); 
padding: 0em 0.5em;
}
pre .expresion-de-fracciones .num-fraccionario .p-fraccionaria .p-denominador{
width: 100%; 
padding: 0em 0.5em;
}
pre .expresion-de-fracciones .operador{
padding: 0.1em; 
font-size: larger; 
font-weight: 600; 
color: var(--negro-contraste);
}
pre .expresion-de-fracciones .num-entero{
font-size: larger; 
padding: 0em 0.3em;
}
pre .expresion-de-fracciones .potencia-exponente{
display: inline-block; 
vertical-align: text-top; 
font-size: large; 
color: inherit; 
font-weight: initial; 
padding: 0em 0.17em;
}
pre .expresion-de-fracciones .potencia-base{
font-size: larger; 
padding: 0em 0.15em;
}
pre .expresion-de-fracciones .exponente{
font-size: large;  
vertical-align: text-top; 
padding: 0em 0.17em;
}





/*GADGET LOGIN v5.0*/
section .post picture.login{
display: block; 
margin-top: 3em; 
border: 1px solid var(--login-borde); 
color: var(--login-color); 
background: var(--login-fondo); 
box-shadow: var(--login-shadow); 
padding: 0.5em 1em; 
border-radius: 16px; 
cursor: pointer; 
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
section .post picture.login img{
width: 36px; height: 36px; 
background: transparent; 
display: inline-block; 
vertical-align: middle; 
padding: 0.2em;
}
section .post picture.login figcaption{
font-size: 1.1em; 
font-weight: 600; 
display: inline-block; 
padding: 0.2em; 
}





/*GADGET LAUNCHER SYSTEM v5.0*/
section .menu-apps{
color: var(--body-color); 
width: 100%; 
display: flex; 
justify-content: flex-start; 
flex-wrap: wrap; 
align-items: flex-start; 
animation: aparecer 1s ease-in-out; 
animation-fill-mode: both; 
animation-delay: .2s; 
}
section .menu-apps > p{
width: 50%; 
text-align: center; 
padding: 0.75em; 
line-height: 1.2;
}
section .menu-apps > p a{
display: flex;  
flex-direction: column;  
justify-content: center;  
align-items: center;
}
section .menu-apps > p img{
width: 54px; 
height: 54px; 
filter: drop-shadow(var(--icono-shadow));
}
section .menu-apps > p span{
padding: 0.75em 0em; 
font-size: 0.85em;
}
section .menu-apps > ul{
padding: 1em; 
width: 100%;
}
section .menu-apps > ul li{
border-bottom: 1px solid var(--skin-glass-borde); 
font-size: 1.1em; 
line-height: 1.4; 
margin-bottom: 1.3em; 
display: flex; 
justify-content: flex-start; 
align-items: flex-start; 
width: inherit;
}
section .menu-apps > ul li::before{
content: '▸'; 
opacity: 0.8;
font-size: 1.1em; 
color: var(--color-enlace); 
margin-right: 0.15em;
}
section .menu-apps > ul li a{
display: inline-block; 
width: max-content;
}





/*GADGET TABLA DE NAVEGACION v5.0*/
section .tab-nav{
margin-bottom: 5%;
}
section .tab-nav > div, section .tab-nav > p, section .tab-nav > ul{
margin-bottom: 1.1em;
}
section .tab-nav > p{
line-height: 1.5; 
font-size: 1.1em;
}
section .tab-nav > div img{
width: 100%; 
height: 6em; 
border-radius: 8px; 
object-fit: cover; 
object-position: 10% 35%; 
filter: brightness(85%) saturate(50%); 
background: transparent; 
}
section .tab-nav ul li{
font-size: 1.05em; 
display: flex; 
align-items: baseline;
}
section .tab-nav ul li a{
transition: color 0.2s; 
flex-grow: 1; 
margin-left: 0.2em; 
line-height: 1.25; 
border-bottom: 1px solid var(--skin-glass-borde); 
padding: 0.5em 0em; 
margin-bottom: 1em;
}
section .tab-nav ul li a:active{
color: var(--color-enlace);
}
section .tab-nav ul li::before{
content: '▸';  
opacity: 0.6; 
font-size: 1.2em; 
color: var(--color-enlace);
}
section .tab-nav ul li[data-status="inactivo"]{
pointer-events: none; opacity: 0.75;
}
section .tab-nav ul li[data-status="inactivo"]::before{
color: inherit; 
opacity: 0.6; 
font-size: 1.2em;
}





/*SPINNER LOADING v5.0*/
.insert-vista{
margin: 0; 
padding: 0; 
width: 100%; 
text-align: center;
}
.insert-vista .contener-spinner{
padding: 1.5em; 
font-size: 1.2em;
}
.insert-vista .contener-spinner .loading::before{
content: '🕛 Cargando...'; 
filter: grayscale(25%); 
animation: cambiarHora 2s ease-in-out infinite; 
animation-fill-mode: both;
}





/*LOADER HORIZONTAL V5.0*/
.loader-bar{
display: block; 
background: var(--loading-bar-fondo); 
position: fixed; 
top: 0; 
left: 0; 
z-index: 110; 
height: 3px; 
width: 100%; 
overflow: hidden;
}
.loader-bar::after {
content: ''; 
width: 40%; 
height: 100%; 
background: var(--loading-bar-content); 
position: absolute;  
top: 0; 
left: 0; 
animation: animLoaderBar 2s linear infinite;  
}





/*SNACKBAR v5.0*/
.notificaciones{
max-width: 94%; 
width: max-content; 
color: var(--snack-texto); 
position: fixed;  
bottom: 2%;  
left: 3%; 
right: 3%; 
height: max-content; 
z-index: 200; 
animation-name: fadeInUp;  
animation-duration: 1s;  
animation-fill-mode: both;
}
.notificaciones[data-type="dialogo"]{
background: var(--snack-fondo); 
border-radius: 8px; 
border: 1px solid var(--snack-borde); 
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.2);
} 
.notificaciones div#cerrar-notificacion{
margin-bottom: 0.5em; 
background: var(--snack-cerrar-fondo); 
color: var(--snack-cerrar-color); 
border-radius: 100%; 
box-shadow: 0 1px 3px rgba(60,64,67,.85);  
text-align: center; 
width: 24px; 
height: 24px; 
animation-name: aparecer;  
animation-duration: 3s;  
animation-fill-mode: both; 
animation-delay: 2s;
}
.notificaciones div#cerrar-notificacion::before{
content: 'x'; 
cursor: pointer; 
width: inherit; 
height: inherit;
}
.notificaciones p{
line-height: 1.3; 
font-size: 1.1em; 
padding: 0.5em 1em; 
border: 1px solid var(--snack-borde); 
background: var(--snack-fondo); 
border-radius: 4px; 
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.notificaciones[data-type="dialogo"] > p{
border: 0px; 
box-shadow: none;
}
.notificaciones p[data-controlador='activo']{
cursor: pointer;
}
.notificaciones p > a{
display: block;
}
.notificaciones p > a::after{
content: '➜'; 
display: inline; 
font-size: 1.1em; 
padding: 0em 0.5em; 
font-weight: bold; 
color: var(--snack-enlace-color);
}
.notificaciones p.type-notify{
text-align: center;
}
.notificaciones > .contenedor-botones{
margin: 2em auto; 
width: max-content; 
font-size: 0.82em; 
font-family: Arial; 
letter-spacing: 1px;
}
.notificaciones > .contenedor-botones span{
padding: 0.75em 1.5em;  
cursor: pointer;  
border-radius: 8px;  
margin: 0em 0.75em;
}
.notificaciones > .contenedor-botones span[data-tipo='cancelar']{
background: var(--snack-cancel-fondo); 
color: var(--snack-cancel-color); 
border: 1px solid var(--snack-cancel-borde);
}
.notificaciones > .contenedor-botones span[data-tipo='aceptar']{
background: var(--snack-acept-fondo); 
color: var(--snack-acept-color); 
border: 1px solid var(--snack-acept-borde);
}





/*Sección Bloque destacado v5.0*/
section.bloque-destacado {
background: var(--aviso-importante-fondo); 
border: 1px solid var(--aviso-importante-borde); 
border-left: 6px solid var(--aviso-importante-borde-secundario); 
}
section.bloque-destacado h2 {
color: var(--aviso-importante-color); 
}
section.bloque-destacado h2::before {
content: "📚";
margin-right: 0.5em;
display: inline-block;
}
section.bloque-destacado .formato-enlace {
font-weight: 500;
color: var(--aviso-importante-enlace-color);
text-decoration: underline;
}





/*FOOTER v5.0*/
footer{
color: var(--skin-glass-color); 
position: relative; 
font-size: large;  
padding: 1em 0em; 
display: flex; 
flex-direction: column; 
align-items: center; 
flex-wrap: nowrap; 
justify-content: center;
}
footer a, footer span{
margin: 0.5em; 
padding: 0.3em;
}
footer span::before{
content: '© 2025 Peyemon';
}
footer a:active{
text-decoration: underline;
}
footer.fixed-bottom{
position: fixed; bottom: 0; left: 0; width: 100%;
}






/********************
*FORMATOS A NIVEL ELEMENTO
*********************/

/*Cargando puntos suspensivos v5.0*/
span.loading-icon::after{content: ''; animation: loadingPuntosSuspensivos 0.75s ease-out infinite alternate;}

strong{font-weight: bold;}
b{font-weight: bold;}

.letra-espaciado-1{letter-spacing: 1px;}
.letra-espaciado-2{letter-spacing: 2px;}

.cursor-pointer {cursor: pointer;}
.cursor-celda{cursor: cell;}
.cursor-default{cursor: initial;}

.ocultar{display: none;}
.visibilidad-oculta{visibility: hidden;}

.opacity-100{opacity: 1;}
.opacity-0{opacity: 0;}
.opacity-50{opacity: 0.5;}
.opacity-80{opacity: 0.8;}

.texto-overflow-elipsis{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.overflow-hidden{overflow: hidden;}

.texto-justificado{text-align: justify;}
.texto-centrado{text-align: center;}
.texto-alineado-izquierda{text-align: left;}
.texto-alineado-derecha{text-align: right;}

.texto-mayuscula{text-transform: uppercase;}
.texto-minuscula{text-transform: lowercase;}
.texto-capital::first-letter{text-transform: uppercase;}

.subrayado{text-decoration: underline;}
.negritas{font-weight: 600;}
.cursiva{font-style: italic; opacity: 0.85; font-family: Georgia, sans-serif;}

.enlace-nulo{pointer-events: none; color: inherit; transition: color 1s;}
.formato-enlace{opacity: 1; color: var(--color-enlace); font-weight: bold;}

.formato-romano{text-decoration: overline;}
.formato-linea-superior{text-decoration: overline;}

/*
*Velocidades de mayor a menor
*ease, ease-out, ease-in-out, linear, ease-in
*/
.animacion-fondo-launcher{animation: fondoLauncher .3s ease; animation-fill-mode: forwards;}
.animacion-flash{animation: diapositivaFlash .3s linear; animation-fill-mode: both;}
.animacion-sweep{animation: sweep 1s ease-in-out; animation-fill-mode: forwards;}
.animacion-aparecer{animation: aparecer 1s ease-in-out; animation-fill-mode: both; }
.animacion-desvanecer{animation: desvanecer 1s ease-out; animation-fill-mode: both;  }
.animacion-pulsar{animation: pulsar 1s ease; animation-fill-mode: both; }
.animacion-zoomIn{animation: zoomIn 1s ease-out; animation-fill-mode: both;  }
.animacion-zoomOut{animation: zoomOut 1s ease-out; animation-fill-mode: both;  }
.animacion-fadeInUp {animation: fadeInUp 1s ease-out; animation-fill-mode: both;  }
.animacion-fadeInDown {animation: fadeInDown 1s ease-in-out; animation-fill-mode: both;  }
.animacion-desplazar-izq-der{animation: moverDeIzquierdaADerecha 1s ease-out; animation-fill-mode: both;}
.animacion-desplazar-der-izq{animation: moverDeDerechaAIzquierda 1s ease-out; animation-fill-mode: both;}
.animacion-expandir-horz{animation: expandToolbar .4s ease forwards;}




/**********************
*DISPOSITIVO MOVIL TABLET 
***********************/

@media screen and (min-width: 600px) and (max-width: 1280px) {
/*BODY v5.0*/    
body{
font-size: 1.2em;
}





/*HEADER v5.0*/
header[data-modal="activo"] > img{
right: 50%;
}





/*ARTICLE v5.0*/
article{
padding: 2.5em 10%;
}
dialog > main article.explorar{
padding: 5em 5%;
}




/*SECTION v5.0*/
section{
margin-bottom: 12%;
}





/*GADGET POST v5.0*/
section .post > div img{
height: 15em;
}
section .post > div iframe{
height: 370px;
}
section .post > div.tabla, section .post pre{
max-height: 520px;
}




/*GADGET FORMULARIO DE APLICACION v5.0*/
section .app{
width: 80%;
}
section .app form div.controls{
display: flex; 
flex-direction: row; 
}





/*GADGET SEARCH v5.0*/
section .app form .busqueda input[type='submit']{
padding: 0.75em 1.5em;
}





/*GADGET LAUNCHER SYSTEM v5.0*/
section .menu-apps > p{
width: 25%; 
padding: 0.85em; 
line-height: 1.2;
}
section .menu-apps > p img{
width: 54px;  
height: 54px;
}
section .menu-apps > p span{
font-size: 0.89em;
}





/*SNACKBAR v5.0*/
.notificaciones{
max-width: 60%;
}

/*FOOTER v5.0*/
footer{
flex-direction: row; 
flex-wrap: wrap;
}
}



/**********************
*DISPOSITIVO PC-LAPTOP
***********************/
@media screen and (min-width: 1280px) {
/*BODY v5.0*/    
body{
font-size: 1.2em; 
font-family: Arial, Helvetica, sans-serif;
}





/*HEADER v5.0*/
header{
padding: 0.75em 10%;
}
header a{
font-size: 1.2em;
}
header a > img{
width: 24px; 
height: 24px;
}
header[data-modal="activo"] > img{
right: 50%; 
width: 24px; 
height: 24px;
}
header a:hover, header[data-modal="activo"] > img:hover{
opacity: 0.75;
}





/*ARTICLE v5.0*/
article{
padding: 3em 20%;
}
dialog > main article.explorar{
padding: 3em 15%;
}




/*SECTION v5.0*/
section{
margin-bottom: 8%;
}
section:hover{
box-shadow: 0 8px 24px 0 rgba(26, 43, 68, 0.12); /* Usa la sombra más pronunciada */    
}





/*GADGET POST v5.0*/
section .post > div img{
height: 17em;
}
section .post > div iframe{
height: 380px;
}
section .post pre a:hover{
opacity: 0.82; cursor: pointer;
}
section .post > div.tabla, section .post pre{
max-height: 500px;
}





/*GADGET FORMULARIO DE APLICACION v5.0*/
section .app{
width: 75%;
}
section .app form div.controls{
display: flex; 
flex-direction: row; 
}
section .app form input[type='submit']:hover, section .app form input[type='reset']:hover, section .app form input[type='button']:hover {
background-color: #294269; /* Cambia al azul interactivo */
box-shadow: 0 4px 10px rgba(26, 43, 68, 0.2); /* Sombra que refuerza la elevación */
}
section .app form input[type='submit']:disabled:hover, section .app  form input[type='reset']:disabled:hover, section .app form input[type='button']:disabled:hover {
opacity: 0.7; 
transition: opacity .3s;
}





/*GADGET LOGIN v5.0*/
section .post picture.login:hover{
background-color: #F7F8F8; /* Un gris muy sutil al pasar el ratón */
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.1);
}





/*GADGET SEARCH v5.0*/
section .app form .busqueda input[type='submit']{
padding: 0.75em 1.5em;
}
section .app form .busqueda input[type='submit']:hover{
background: #c0d2f5;
}





/*GADGET LAUNCHER SYSTEM v5.0*/
section .menu-apps > p{
width: 25%; 
padding: 0.85em;
}
section .menu-apps > p:hover img{
transform: scale(1.3); 
transition: transform .1s; 
filter: brightness(120%) drop-shadow(var(--icono-focus-shadow));
}
section .menu-apps > p img{
width: 54px;  
height: 54px;
}
section .menu-apps > p span{
font-size: 0.89em;
}
section .menu-apps > ul{
width: 85%;
}
section .menu-apps > ul li a:hover{
color: var(--color-enlace);
}






/*GADGET TABLA DE NAVEGACION v5.0*/
section .tab-nav > div img{
height: 10em;
}
section .tab-nav ul li a:hover{
color: var(--color-enlace); 
transition: color .3s;
}






/*SNACKBAR v5.0*/
.notificaciones{
max-width: 50%;
}
.notificaciones > .contenedor-botones span:hover{
filter: brightness(80%);
}





/*FORMATOS A NIVEL ELEMENTO v5.0*/
.formato-enlace:hover{
filter: grayscale(40%);
}




/*Sección Bloque destacado v5.0*/
section.bloque-destacado .formato-enlace:hover {
filter: brightness(94%);
}




/*FOOTER v5.0*/
footer{
flex-direction: row; 
flex-wrap: wrap;
}
footer a:hover{
text-decoration: underline;
}
}