/* HTML PUTO */

html{
    height: 100%;
}

body{
    scrollbar-gutter: auto;
    background: radial-gradient(at center, #001d29, #010101);
    background-repeat: repeat-y;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

footer{
    margin-top: auto;
}

nav{
    scrollbar-gutter: auto;
}

/* NAV */

a .li-margen{
    padding-left: 20px;
}


.collection article.wide {
    grid-column-end: span 2;
}

.collection article.tall {
    grid-row-end: span 2;
}

/* Formulario subir archivo */

.content-section {
    display: none; /* Oculta todos los elementos de contenido inicialmente */
}
    
.active-content {
    display: block; /* Muestra el contenido cuando tiene la clase "active-content" */
}

.error-message {
    color: red;
    display: none;
}

/* Estilo para las columnas del mega menú */

.menu-cat {
    display: flex;
    width: auto;
}

.div-menu{
    width: 100%;
    margin: 5px;
    padding: 10px;
}

.div-menu h6{
    padding: 10px;
}

.div-menu a{
    display: block;
}

@media (max-width: 980px) {
    .menu-cat {
        display: block;
    }
}

.div-menu-simple{
    width: 100%;
    padding: 10px;
}




/*LOADERS PARA ESPERA*/

.loader {
    width: 60px;
    height: 40px;
    position: relative;
    display: inline-block;
    --base-color: #282828; /*use your base color*/
  }
  .loader::before {
    content: '';  
    left: 0;
    top: 0;
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FFF;
    background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 3s linear infinite;
  }
  .loader::after {
    content: '';  
    left: 35px;
    top: 15px;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #299FD6;
    background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 4s linear infinite reverse;
  }
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }  

/*
ESTILOS OPCIONALES (van arriba de todo)

Radial center oscuro 
body{
background: #011F2B;
background: radial-gradient(at center, #011F2B, #010101);
}

Radial center claro
body{
    background: #01415C;
    background: radial-gradient(at center, #01415C, #010101);
}


//Radial abajo hacia arriba mas oscuro
body{
background: #01415C;
background: radial-gradient(at center bottom, #01415C, #010101);
}

//Radial abajo hacia arriba mas claro
body{
    background: #0184BC;
    background: linear-gradient(0deg, #0184BC, #010101);
}

Pag de degrades https://www.css-gradient.com
*/



/* Cambios de foto perfil y portada*/




/* Para un futuro Modos
@media (prefers-color-scheme: dark){
    :root{
        --bgd-color-p : #001d29;
        --bgd-color-s : #010101;
        --text-color: #ffffff;
    }    
}
@media (prefers-color-scheme: light){
    :root{
        --bgd-color-p : #001d29;
        --bgd-color-s : #010101;
        --text-color: #ffffff;
    }    
}

*/


/* 2FA */
.card-2fa {
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}
.card-2fa {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: 1rem;
}
.img-thumbnail-2fa {
    padding: .25rem;
    background-color: #ecf2f5;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
}
.avatar-lg {
    height: 150px;
    width: 150px;
}


/* Tabla Admin prueba*/

.avatar.sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .818125rem;
}
.table-nowrap .table td, .table-nowrap .table th {
    white-space: nowrap;
}
.table>:not(caption)>*>* {
    padding: 0.75rem 1.25rem;
    border-bottom-width: 1px;
}
table th {
    font-weight: 600;
    background-color: #2A9FD6 !important;
}

/*Pagos*/

.pricing-plan {
    margin: 0 0 1rem 0;
    width: 100%;
    position: relative;
    background: #272e48;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.pricing-plan .pricing-header {
    padding: 0;
    margin-bottom: 1rem;
    text-align: center;
    background: linear-gradient(120deg, #00b5fd 0%, #0047b1 100%);
    -webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}
.pricing-plan .pricing-header .pricing-title {
    font-size: 1.2rem;
    color: #ffffff;
    padding: 1rem 0;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15);
}
.pricing-plan .pricing-header .pricing-cost {
    color: #ffffff;
    padding: 1rem 0;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15);
}
.pricing-plan .pricing-header .pricing-save {
    color: #ffffff;
    padding: 0.8rem 0;
    font-size: 1rem;
    font-weight: 700;
}
.pricing-plan .pricing-header.secondary {
    background-image: linear-gradient(120deg, #c0d64a 0%, #35690f 100%);
}
.pricing-plan .pricing-header.red {
    background-image: linear-gradient(120deg, #ff3434 0%, #a50000 100%);
}
.pricing-plan .pricing-features {
    padding: 0;
    margin: 20px 0;
    text-align: left;
}
.pricing-plan .pricing-features li {
    padding: 15px 15px 15px 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    line-height: 100%;
}

.pricing-plan .pricing-footer {
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    text-align: center;
    padding: 1rem 0 2rem 0;
}

@media (max-width: 767px) {
    .pricing-plan .pricing-header {
        text-align: center;
    }
    .pricing-plan .pricing-header i {
        display: block;
        float: none;
        margin-bottom: 1.5rem;
    }
}

/*Alternativa a opciones*/

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col, .gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.bg-gray-300 {
    background-color: #e2e8f0;
}
.h-100 {
    height: 100%!important;
}
.shadow-none {
    box-shadow: none!important;
}


.div-perfil-bio{
	padding-left: 17rem;
	padding-top: 5rem;
}

.div-id-ranks{
	padding-left: 17rem;
	padding-bottom: 1rem;
}

.div-rank-single{
	display: inline-block;
	line-height: 2;
	border: 2px;
	border-radius: 10px;
	text-align: center;
}

.check18{
    padding-right: 10px;
}

/* Posts */
.post-categoria .avatar-perfil
{
    background: radial-gradient(at center, #00435f, #010101);
    display: flex;
    width: 10rem;
    height: 10rem;
    position: relative;
    overflow: hidden;
    z-index: 10;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    box-shadow: 0 0 12px 6px rgba(0, 0, 0, .7);
}



/* Perfil nuevo */


.perfil-usuario {
    background: url(https://bootdey.com/img/Content/bg1.jpg);
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #333;
}
.perfil-usuario .sombra {
    position: absolute;
    display: block;
    background: linear-gradient(transparent,rgba(0, 0, 0, .5));
    width: 100%;
    height: 5%;
    bottom: 0;
    left: 0;
}

.perfil-usuario img {
    width: 100%;

}

.perfil-usuario .contenedor-perfil {
    display: block;
    width: 100%;
}
.perfil-usuario .portada-perfil {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 19rem;
}
.perfil-usuario .avatar-perfil {
    background: radial-gradient(at center, #00435f, #010101);
    display: flex;
    width: 12.5rem;
    height: 12.5rem;
    position: relative;
    bottom: -3rem;
    left: 4rem;
    overflow: hidden;
    z-index: 10;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    box-shadow: 0 0 12px 6px rgba(0, 0, 0, .7);
}
.perfil-usuario .cambiar-foto {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(0, 67, 95, .5);
    height: 35%;
    bottom: 0;
    left: 0;
    color: #fff;
    text-decoration: none;
    transform: translateY(50%);
    opacity: 0;
    transition: all ease-in 200ms;
}
.perfil-usuario .cambiar-foto i {
    margin-bottom: .5rem;
    font-size: 2rem;
}
.perfil-usuario .avatar-perfil:hover .cambiar-foto {
    transform: translateY(0);
    opacity: 1;
}

.perfil-usuario .datos-perfil {
    background-color: #00000058;
    border: 1px solid #001d29;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, .2);
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    height: 100%;
}

.perfil-usuario .datos-perfil .tag {
    position: absolute;
    bottom: 5px;
    left: 65px;
}

.perfil-usuario .datos-perfil .nombre-completo{
    position: absolute;
    left: 300px;
    top: 45px;
}

.perfil-usuario .datos-perfil .bio-bandera-rango{
    position: absolute;
    left: 300px;
    top: 90px;
}

.perfil-usuario .titulo-usuario {
    font-size: 2.5rem;
    word-wrap: break-word; 
    margin-bottom: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perfil-usuario .lista-perfil {

    display: inline-block;
    font-size: 1em;
    margin-right: 1rem;
}


.perfil-usuario .opcciones-perfil {
    display: block;
    position: absolute;
    right: 1rem;
    top: 10px;
}
.perfil-usuario .opcciones-perfil button {
    border: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
}

.icono-perfil {
    margin-right: .75rem;
}

.div-rank-single{
    padding: 0.25rem;
    margin-bottom: 1.75rem;
}
.banderas{
    font-size: 1.5rem;
}
.perfil-usuario .banderas{
    width: auto;
    padding-left: 1px;
}

.perfil-usuario .info-usuario-perfil{
    position: absolute;
        top: 70%;
        left: 20%;
}


/*EN DISPOSITIVOS*/
@media (max-width: 920px) {
    .perfil-usuario .contenedor-perfil {
        width: 100%;
    }
    .perfil-usuario .avatar-perfil {
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .perfil-usuario .datos-perfil {
        background-color: #000000a9;
        border: 1px solid #001d29;
        color: #ffffff;
        text-shadow: 0 0 5px rgba(0, 0, 0, .2);
        position: absolute;
        display: block;
        height: max-content;
        bottom: 7rem;
        left: 0;
        right: 0;
        width: 100%;
        padding: 15px;
        text-align: center;
    }
    .perfil-usuario .datos-perfil .tag,
    .perfil-usuario .datos-perfil .bio-bandera-rango,
    .perfil-usuario .datos-perfil .nombre-completo {
        position: static;
    }

    .perfil-usuario .titulo-usuario {
        word-wrap: break-word; 
        font-size: 2.1rem;
    }
    .perfil-usuario .portada-perfil {
        height: 29rem;
    }
    .menu-perfil-usuario ul {
        flex-direction: column;
    }
    .perfil-usuario .lista-perfil {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .perfil-usuario .opcciones-perfil {
        display: block;
        position: absolute;
        right: 1rem;
        top: 2px;
    }

    .perfil-usuario .opcciones-perfil button {
        border: 0;
        padding: 6px 10px;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, .5);
        color: #fff;
    }

    .menu-perfil-usuario .menu-perfil ul {
        display: flex;
        list-style: none;
        margin-left: auto;
        margin-right: auto;
        padding-right: 2%;
        padding-top: 4rem;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 12px 2px rgba(0, 0, 0, .1);
    }
    .perfil-usuario .icono-perfil {
        display: inline-block;
    }

}

/*Menu Publicacion*/

.menu-perfil ul {
    color: #333;
    display: flex;
    list-style: none;
    background-color: #000;
    width: 100%;
}

.menu-perfil ul li {
    margin-right: 1rem;
}

.menu-perfil a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 20px;
    font-weight: bold;
    border-radius: 8px;
    transition: all ease-in 100ms;
}
.menu-perfil a:hover {
    background-color: #4CB0C6;
    color: #fff;
}

/* Perfil editable */

.edit-perfil{
    display: block;
    width: 100%;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    background-color: #2b2b2b;
    background-clip: padding-box;
    border: 0 solid #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* SWITCH SI/NO*/

.switchToggle input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute; 
}

.switchToggle label {
    cursor: pointer;
    text-indent: -9999px;
    width: 70px;
    max-width: 70px;
    height: 30px;
    background: #ffffff;
    display: block;
    border-radius: 100px;
    position: relative; 
}

.switchToggle label:after {
    content: '';
    position: absolute;
    top: 2px; 
    left: 2px; 
    width: 26px; 
    height: 26px; 
    background: #BFBFBF; 
    border-radius: 90px;
    transition: 0.3s;
}

.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #3e98d3; }

.switchToggle input + label:before, .switchToggle input + input + label:before {
    content: 'No';
    position: absolute;
    top: 5px; 
    left: 40px;
    width: 26px;
    height: 26px;
    border-radius: 90px;
    transition: 0.3s;
    text-indent: 0;
    color: #949494; 
}

.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {
    content: 'Si';
    position: absolute;
    top: 5px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 90px;
    transition: 0.3s;
    text-indent: 0;
    color: #ffffff; 
}

.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after 
{
    left: calc(100% - 2px);
    transform: translateX(-100%); 
}

.switchToggle label:active:after {width: 60px; } 

.toggle-switchArea { margin: 10px 0 10px 0; }

/* Code Editor*/

.container-code{
    width: 100%;
    height: 100vh;
    padding: 20px;
    display: flex;
}

.left-code, .right-code{
    flex-basis: 50%;
    padding: 10px;
}

.code-area{
    width: 100%;
    height: 28%;
    background-color: #1f1f1f;
    color: #ffffff;
    padding: 10px 20px;
    border: 0;
    outline: 0;
    font-size: 18px;
}

.iframe-code{
    width: 100%;
    height: 95%;
    background: #ffffff;
    border: 0;
    outline: 0;
}

.label-code .i-code{
    margin-right: 10px;
    margin-left: 10px;
}

.label-code{
    display: flex;
    align-items: center;
    background: #000000;
    height: 30px;
    border: 2px solid #00b5fd;
}

/* DATE */
input[type="date"] {
    padding: 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid #ced4da;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* Categorias prueba*/

.categorias{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 30px;
}

.categorias div img{
    width: 100%;
    border-radius: 10px;
}

.categorias div span{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.btn-art{
    background-image: url(https://bootdey.com/img/Content/bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 20%;
    height: 20%;
}




/* CALCULADORA */
#form-calc {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #414141;
}

#text-calc {
    width: 90%;
    height: auto;
    padding: 10px;
    font-size: 50px;
    border: none;
    margin: 20px 0;
}

.btn-calc {
    width: 120px;
    height: 60px;
    font-size: 35px;
    font-weight: bolder;
    color: #fff;
    background-color: rgb(30, 130, 230);
    border: none;
    margin: 12px;
}

.btn-calc:hover {
    background-color: rgb(0, 50, 200);
    box-shadow: 0px 3px 20px black;
}

@media (max-width: 920px) {
    .btn-calc {
        width: 70px;
        height: 50px;
        font-size: 35px;
        font-weight: bolder;
        color: #fff;
        background-color: rgb(30, 130, 230);
        border: none;
        margin: 12px;
    }    
}


/*  MP  */

.compose-msg .clearfix {padding: 5px;}

.m-top {
	width: 100%;
	font-weight: bold;
	color: #e60000;
	background: #8c7373;
}
.m-top .m-option {width: 20px;}
.m-top .m-sender {width: 192px;}

.m-option, .m-sender, .m-subject, .m-date, .m-option {
	float: left;
	padding: 8px 5px;
}

.m-l-message {
	width: 100%;
	border-bottom: 1px #6cb2de;
	background: #040f15;
}

.m-l-message-op {
	width: 100%;
	border-bottom: 1px #6cb2de;
	background: #EFF7FC;
}

.sender-info {
	float: left;
	overflow: hidden;
	margin-right: 36px;
	width: 110px;
	line-height: 16px;
}

.m-sender {
	padding: 0 5px;
	margin-top: 5px;	
}
.m-sender a {
	font-size: 14px;
	color: #000;
}
.m-sender img {
	display: block;
	float: left;
	margin-right: 10px;
	width: 32px;
	height: 32px;
	border: solid 1px;
	border-radius:5px;
	-moz-border-radius:5px;
}

.date {
	font-size: 11px;
	color: #999;
}

.m-subject {
	padding: 0 5px;
	margin-top: 5px;
	
	width: 464px;
}
.m-subject span {
	font-size: 11px;
	color: #999;
}



/* Subir portada */
.overlay-portada {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.overlay-foto-perfil {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}