@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');



/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */
/* NO TOCAR NADA EN STYLES, SON COSAS GENERALES, AFECTAN A RESPONSIVE Y A TODA LA PAGINA */


* {
	margin: 0;
	padding: 0;
}

body {
    font-family: "Outfit", Arial, Helvetica, sans-serif;
    background: var(--fondo);
}

button  {
    font-family: "Outfit", Arial, Helvetica, sans-serif;
}



/* MODO OSCURO (por defecto) */
/* NO TOQUES NADA EN :ROOT, NO TOQUES NADA*/
/* NO TOQUES NADA EN :ROOT, NO TOQUES NADA*/
/* NO TOQUES NADA EN :ROOT, NO TOQUES NADA*/
/* NO TOQUES NADA EN :ROOT, NO TOQUES NADA*/
/* NO TOQUES NADA EN :ROOT, NO TOQUES NADA*/
:root {
  --corporativo_background: #2831685e; /* #6852285e */
  --corporativo: #ffc560;
  --border: 1px solid #27272a;
  --header: rgba(0,0,0,0.8);
  --background_div: #0a0a0a; /* #1b1b19*/
  --color_p: #ffffff;
  --color_p_dos: rgba(255, 255, 255, 0.7); /* NO TOQUES NADA EN :ROOT, NO TOQUES NADA*/
  --fondo: #101010;
}



/* MODO CLARO */
:root.white {
  --border: 1px solid #d0d0d0;
  --header: rgba(255,255,255,0.8);
  --background_div: #ffffff;
  --color_p: #000000;
  --color_p_dos: #000000;
  --fondo: #f0f0f0;
}


/* =========================
   MODO MORADO PREMIUM
========================= */
:root.purple {
  --border: 1px solid rgba(165, 130, 255, 0.25);

  --header: linear-gradient(
    135deg,
    rgba(55, 30, 90, 0.85),
    rgba(25, 12, 40, 0.85)
  );

  --background_div: linear-gradient(
    160deg,
    rgba(40, 28, 56, 0.95),
    rgba(20, 12, 32, 0.95)
  );

  --color_p: #ffffff;
  --color_p_dos: rgba(225, 205, 255, 0.8);
  
    --fondo: #291F38;
}

/* =========================
   MODO NEGRO PREMIUM
========================= */
:root.black {
  --border: 1px solid rgba(255, 255, 255, 0.08);

  --header: linear-gradient(
    135deg,
    rgba(20, 20, 22, 0.9),
    rgba(5, 5, 7, 0.9)
  );

  --background_div: linear-gradient(
    160deg,
    rgba(18, 18, 20, 0.98),
    rgba(8, 8, 10, 0.98)
  );

  --color_p: #f5f5f5;
  --color_p_dos: rgba(200, 200, 200, 0.65);
  
    --fondo: #0a0a0a;
}


/* =========================
   MODO AZUL PREMIUM
========================= */
:root.blue {
  --border: 1px solid #2a2f3a;          /* borde gris azulado */
  --header: rgba(15, 17, 21, 0.9);       /* header oscuro translúcido */
  --background_div: #171a21;             /* tarjetas / contenedores */
  --color_p: #e6e6e6;                    /* texto principal */
  --color_p_dos: rgba(230, 230, 230, 0.7); /* texto secundario */
  --fondo: #0f1115;                      /* fondo general */
}



input, select, textarea {
    width: 100%;
    color: var(--color_p);
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 16px;
    font-size: 1.3rem;
    outline: none;
    border: var(--border);
    background: transparent;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}

select option {
    background-color: #e0e0e0; /* gris */
    color: #000;
}


.row {
	display: flex;
	flex-direction: row;
}

.exito {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);

    max-width: 1200px;
    width: calc(100% - 2rem);
    padding: 1rem;
    
    backdrop-filter: blur(10px);
    border-radius: 16px;
    font-size: 1.5rem;
    background: #a4ff8e;
    z-index: 999999;
    color: #570000;
    border: var(--border);
}

.error {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);

    max-width: 1200px;
    width: calc(100% - 2rem);
    padding: 1rem;
    
    backdrop-filter: blur(10px);
    border-radius: 16px;
    font-size: 1.5rem;
    background: #fff6a7d1;
    z-index: 999999;
    color: #570000;
    border: var(--border);
}


#inicio {
    border-bottom: var(--border);
    background: var(--fondo);
    position: relative;
    overflow: hidden;
}

#margen_inicio {
    position: relative;
    padding: 7rem 0 3rem 0;
    max-width: 1200px;
    margin: 0 auto;
}


#inicio h1 {
    font-weight: 600;
	position: relative;
	text-align: left;
	font-size: 32px;
	color: var(--color_p);
	z-index: 99;
}

#inicio p {
    color: var(--color_p_dos);
    margin-top: 0.5rem;
	font-size: 20px;
}

#inicio #ruta {
    display: flex;
    gap: 0.5rem;
    color: var(--color_p);
    margin-bottom: 1rem;
    font-size: 1rem;
}

#inicio #ruta a {
    color: var(--color_p_dos);
    text-decoration: none;
    font-size: 1rem;
}

#inicio #ruta a:last-child {
    color: var(--color_p);
    font-weight: bold;
}

#a_sesion {
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--color_p);
    text-decoration: none;
}

#imagen_inicio {
    filter: blur(5px);
    opacity: 0.6;
	pointer-events: none;
	user-select: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	object-fit: cover;
}




/*
#div_header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(50px);
  mask-image: radial-gradient(
    115% 100% at 50% 0%,
    rgba(0, 0, 0, 0.8) 65%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}
*/


/* HEADER */
header {
    position: fixed;
    align-items: center;
    box-sizing: border-box;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    z-index: 99999999;
    height: 4rem;
    width: 100%;
    border-bottom: var(--border);
    background: var(--fondo);
    /* background: rgba(48, 48, 52, .7); */
}

#div_header {
    align-items: center;
    justify-content: space-between;
    display: flex;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

#header_izquierda {
    display: flex;
    align-items: center;
}

#titulo_header {
    font-family: Arial;
    color: var(--color_p);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
}


header nav ul li a {
    height: 100%;
    color: grey;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 1.1rem;
    box-sizing: border-box;
}

header nav ul li a:hover {
  color: var(--color_p);
}

/* color blanco para el enlace activo */
header nav ul li a.activo {
    border-bottom: solid var(--color_p) 1px;
    color: var(--color_p);
    font-weight: 600;
}

#header_centrado {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header_derecha {
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
}

#header_derecha #usuario_header {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#header_derecha #usuario_header.premium {
    background: linear-gradient(135deg, #8b5cf6, /* MORADO */ #ec4899, /* ROSA */ #9d6eff, /* MORADO_DOS */ #ec4899, /* ROSA */ #8b5cf6 /* MORADO */);
    background-size: 300% 300%;
    animation: nitro-flow 14s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.25), 0 0 22px rgba(236, 72, 153, 0.20), 0 0 30px rgba(56, 189, 248, 0.15);
}

#panel_header {
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border: var(--border);
    font-size: 16px;
    cursor: pointer;
    position: relative;
    border-radius: 16px;
    text-decoration: none;
    background: transparent;
    gap: 1rem;
    display: flex;
    color: var(--color_p);
}

#panel_header:hover {
    background: var(--background_div);
}

#boton_panel {
    padding: 12px 20px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    background: linear-gradient(90deg, #565656);
    border-radius: 16px;
    color: var(--color_p);
    box-shadow: inset 0px 35px 30px #353535;
    text-decoration: none;
    gap: 1rem;
    display: flex;
    margin-right: 1rem;
}

#boton_panel::after {
    z-index: 9999;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(180deg, rgba(140, 140, 140, 0.3) 0%, rgba(128, 128, 128, 0.2) 50%, rgba(110, 110, 110, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    box-sizing: border-box;
}





@keyframes nitro-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}





#header_responsive {
    display: none;
}

aside a.activo {
    font-weight: 600;
    color: var(--color_p) !important;
}


#desplegable_header {
    backdrop-filter: blur(50px);
    min-width: 15rem;
    overflow: hidden;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    border: var(--border);
    border-radius: 16px;
    position: absolute;
    top: 4.5rem;
    right: 0;
    display: none;
    flex-direction: column;
    
}

#desplegable_header.activo {
  display: flex;
}

#desplegable_header a {
    cursor: pointer;
    background: transparent;
    border: none;
    color: white;
    padding: 0.3rem;
    border-radius: 10px;
    text-decoration: none;
}

#desplegable_header a:hover {
    background: white;
    color: black;
}

#div_desplegable_header {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem;
    flex-direction: column;
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--border);
}

#a_desplegable_header {
    background: rgba(0, 0, 0, 0.3);
    flex-direction: column;
    padding: 0.5rem;
    display: flex;
}




nav ul {
    margin-left: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    height: 4rem;
}

nav ul li {
    height: 100%;
    margin: 0 1rem;
}

nav ul li a {
	color: white;
    text-decoration: none;
    display: flex;
    align-items: center; /* Asegura que el contenido del enlace se centre verticalmente */
    height: 100%; /* Asegura que el enlace tome toda la altura del li */
}

#imagen_logo {
	width: 1.8rem !important;
	margin-right: 0.5rem;
    vertical-align: middle; /* Alinea la imagen con el texto */
}

.usuario_header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-direction: row;
}


aside {
     display: none;
    position: relative;
    height: 100%;
    font-size: 1.5rem;
    width: 100%;
}

aside ul {
    list-style: none;
}

/*
aside ul li {
    margin-top: 2rem;
}


aside ul li a {
    text-decoration: none;
    color: var(--color_p_dos);
}
*/
/* FOOTER */
footer {
    border-top: var(--border);
	position: relative;
    
    background-color: rgb(34, 34, 34);
    padding: 3rem 0;

    font-size: 1.1rem;
}

#margenes_footer {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;

    flex-direction: column;
}

footer .row {
    gap: 4rem;
}

footer .item {
    color: white;
    width: 33%;
}

footer h4 {
    font-size: 1.3rem;
    border-bottom: var(--border);
}

footer .item ul {
    font-size: 1rem;
    list-style: none;
}

footer .item ul li {
    margin: 0.5rem 0;
}

footer .item a {
    font-size: 1.3rem;
    color: rgb(146, 146, 146);
    text-decoration: none;
}

footer .item a:hover {
    text-decoration: underline;
}

#footer_copy {
    font-size: 1.3rem;
    margin-top: 2rem;
    padding-top: 3rem;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-top: var(--border);
    
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tres columnas iguales */
    gap: 1rem
}

#redes_sociales {
    display: flex;
    justify-content: right;
    gap: 1rem;
}

#redes_sociales a {
    color: white;
    text-decoration: none;
}

#imagen_usuario_header {
    border: solid var(--fondo) 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.imagen_usuario {
    border: var(--border);
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

#modoBtn {
    font-size: 1rem;
    cursor: pointer;
    background: transparent;
    border-radius: 16px;
    color: rgb(146, 146, 146);
    border: var(--border);
    padding: 0.5rem;
    font-weight: 900;
    width: fit-content;
}

#modoBtn:hover {
    background: white;
    color: black;
}

#logo_footer {
    margin-bottom: 4rem;
    color: rgb(146, 146, 146);
    font-size: 1.3rem;
}

#logo_footer a {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    text-decoration: none;
}

#logo_footer a img {
    width: 6rem;
    height: 6rem;
}

.cloud_text {
    font-family: Arial;
	font-weight: 900;
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;	
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/clouds.jpg);
	background-size: auto;
	background-attachment: unset;
	background-position: 0%;
	width: 85%;
	font-size: 6rem;
	animation: clouds_moving infinite 60s;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function: linear;
}

@keyframes clouds_moving {
	0% {
		background-position: 0%;	
	}
	50% {
		background-position: 100%;	
	}
	100% {
		background-position: 0%;
	}
}






/* -- SESION -- */
/* PANEL LATERAL */
#panel_lateral {
    background: var(--background_div);
    position: relative;
    margin-top: 4rem;
    height: auto;
    border-right: var(--border);
    width: 15%;
    min-width: 6rem;
    transition: width 0.3s ease;
}

#panel_lateral .menu_text {
  display: inline;
}

/* Panel cerrado: solo iconos visibles, texto oculto */
#panel_lateral.cerrado {
  width: 2%;
}

#panel_lateral.cerrado .menu_text {
  display: none;
}

#panel_menu {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border);
    padding: 1rem 1rem 1.5rem 1rem;
    color: var(--color_p);
}

#panel_lateral.cerrado #panel_arriba #boton_info {
    transform: rotate(0deg);
}

#boton_info i {
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel_lateral.cerrado #panel_arriba a, #panel_lateral.cerrado #panel_arriba button {
  display: flex;
  justify-content: center;
  align-items: center;
}


#panel_lateral #boton_info {
    color: var(--color_p);
    font-size: 2rem;
    border: none;
    background: none;
    cursor: pointer;
    transform: rotate(180deg);
}

#div_column {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    max-width: 1200px;
    margin: 0 auto;
}

#panel_arriba {
    padding: 1rem;
    top: 4rem;
    gap: 1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: sticky;
    height: 92vh;
}

#panel_arriba .botones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color_p_dos);
    text-decoration: none;
    
    font-size: 1rem;
    padding: 1rem;
    border-radius: 16px;
}

#panel_arriba .botones:hover {
    background: var(--fondo);;
}

#panel_arriba .botones i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.submenu {
    display: none;
    margin-left: 20px;
    flex-direction: column;
}

.submenu_botones {
    display: flex;
    align-items: center;
    
    color: var(--color_p_dos);
    text-decoration: none;
    
    font-size: 1.1rem;
    padding: 1rem 0.5rem;
    border-radius: 16px;
}

.submenu_botones:hover {
    border: var(--border);
}

#permisos, #docs {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row_boton {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

#column_botones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#premium_header {
    margin-top: 0.5rem;
    position: relative;
    background: linear-gradient(90deg, #8b3097);
    box-shadow: inset 0px 35px 30px #492495;
    padding: 0.6rem;
    /* background: #9b9b9b2b; */
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    font-size: 1rem;
    color: white;
    border-radius: 16px;
}

#premium_header::after {
    z-index: 9999;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(180deg, rgba(140, 140, 140, 0.3) 0%, rgba(128, 128, 128, 0.2) 50%, rgba(110, 110, 110, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    box-sizing: border-box;
}



/* RESPONSIVE */
@media (max-width: 800px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    header {
        height: auto;
        justify-content: center;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
        width: -webkit-fill-available;
        overflow: hidden;
        border-radius: 16px;
        margin: 1rem;
        top: 0;
        display: flex;
        padding: 1rem 1.5rem;
        transition: height 0.4s ease;
    }

    
    #div_header {
        display: none;
    }
    
    #header_responsive {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
    
    #header_responsive #boton_responsive {
        justify-content: center;
        font-size: 2rem;
        border: none;
        background: transparent;
        cursor: pointer;
        color: white;
        display: flex;
    }
    
    #imagen_responsive {
        gap: 0.5rem;
        text-decoration: none;
        color: var(--color_p);
        display: flex;
        align-items: center;
        font-size: 1rem;
        font-weight: bold;
    }
    
    #aside_menu a {
        color: var(--color_p_dos);
        text-decoration: none;
    }
    
    #aside_menu ul li {
        margin: 1rem 0;
    }
    
    
    nav ul {
        display: none;
    }
    
    #logo_footer a img {
        width: 4rem;
        height: 4rem;
    }
    
    .cloud_text { 
        font-size: 4rem;
    }
    
	#margen_inicio {
        padding: 2rem !important;
    }
    
    #inicio {
        margin-top: 5rem;
    }
    
	#inicio h1 {
        font-size: 2rem;
    }
    
    #titulo p {
        font-size: 1.4rem;
    }

	#imagen_inicio {
	    object-fit: cover;
		height: 100%;
	}

   
   footer {
       padding: 3rem;
   }
   
   footer .row {
    gap: 1rem;
    flex-direction: column;
   }
   
   footer .item {
        width: 100%;
   }
   
   #logo_footer {
        width: 100% !important;
    }

}