html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html{
position: absolute;
width: 100%;
height: 100%;
font-family: 'Sarabun', sans-serif;
}
body{
position: absolute;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
/* Combina radial-gradient con background-image */
background: radial-gradient(#21618c, var(--co-sec),black), url(img/trama-fondo.svg?2025b);
background-size: cover, 600px;
background-repeat: no-repeat, repeat;
color: white; /* El último color declarado es el que se aplica */
display: flex;
justify-content: center;
align-items: center;
}
body:after{
	content: ""; /* Necesario para que el pseudo-elemento se genere */
    position: absolute; /* Posiciona absolutamente respecto al body */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(img/trama-fondo.svg?2025b); /* Agregar la imagen de fondo */
    background-size: cover, 600px; /* Configura el tamaño de fondo para cada capa */
    background-repeat: repeat; /* Configura la repetición para cada capa */
    background-size: 400px;
    z-index: -1; /* Asegúrate de que esté detrás del contenido */
    opacity: 0.5;
}
div{

}
.load{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10000;
	background-color: rgba(200, 200, 200, 0.6);
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	display: none;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0px solid white;
  -webkit-text-fill-color: var(--bg-pri);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  
}

input[type=text],input[type=date],input[type=checkbox],input[type=password]{
    -webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
border: none;
    background-color: var(--bg-input);/*fondoInput*/;
    color: var(--co-input);
    width: 150px;
}
/* tamaños inputs */
input[type=text],input[type=date],input[type=file],input[type=button],input[type=password],select{
    width: 150px;
    height: 30px;
    display: flex;
    align-items: center;
    outline: none;
  border: 0;
  padding-left: 20px;
}
input[type=text]:focus {
    background-color: var(--bg-input)/*fondoInput*/;
    color: var(--co-input);
}

input[type=submit],input[type=button]{
    background-color: var(--bg-sec)/*fondoInput*/;
    color: var(--co-sec);
    transition: 0.3s;
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
   width: 150px;
    opacity: 0.2;
    font-size: 0.1px;
      background-image: url(../img/accion_ir.svg); /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
background-repeat: no-repeat;
background-position: center center;
}
input[type=submit],input[type=button]:hover{
    background-color: var(--bg-pri)/*fondoInput*/;
    color: var(--bg-sec);
    background-image: url(../img/accion_ir.svg); /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
    border-right: 1px solid var(--bg-sec);
    border-left: 1px solid var(--bg-sec);
    justify-content: left;
    padding-left: 20px;
    font-size: 1em;
    opacity: 0.8;
   width: 150px;
    transition: 0.3s;
}
input[type=text].login-user{
	background-image: url(../img/input-user.svg) !important; /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
}
input[type=text].login-user:focus {
		background-image: url(../img/input-user.svg) !important; /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
}
input[type=text].login-user:-webkit-autofill,
input[type=text].login-user:-webkit-autofill:hover, 
input[type=text].login-user:-webkit-autofill:focus{
background-image: url(../img/input-user.svg) !important; /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
}
input[type=password]{
	background-image: url(../img/input-pass.svg) !important; /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
}
input[type=password].login-pass:focus {
		background-image: url(../img/input-pass.svg) !important; /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
}
input[type=password].login-pass:-webkit-autofill,
input[type=password].login-pass:-webkit-autofill:hover, 
input[type=password].login-pass:-webkit-autofill:focus{
background-image: url(../img/input-pass.svg) !important; /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
background-size: 20px;
background-repeat: no-repeat;
background-position: 95% center;
}
input.error-login{
	background-image: url(../img/accion_atencion.svg); /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-size: 20px;
    padding-right: 20px;
background-repeat: no-repeat;
background-position: 95% center;
width: 150px;
}
.centro-intro{
	display: flex;
	flex-direction: row;
	/*background-color: var(--bg-intro);*/

	padding: 200px;
	border-radius: 10px;
	/*border: 1px solid var(--bg-sec);*/
}
.datos-centro{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}
.datos-centro .logo{
	/*
	background-color: rgba(255, 255, 255, 0.7);
	border-radius:3px;
	*/
	transition: 1s;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	opacity: 1;
	padding: 5px;
	margin: 20px;
}
.datos-centro .logo:hover{
	opacity: 0.8;
}
.datos-centro .logo img{
	width: 90%;
	border-radius:10px;
}

.login{
	background: var(--co-sec);
color: var(--bg-sec);
	width: 300px;
display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 2%;
	margin: 20px;
	padding-top: 50px;
	padding-bottom: 50px;
	position: relative;
	border: 1px solid rgba(168, 212, 212, 1);
}
.login::before {
  content: "";
  position: absolute;
  top: -0px;
  left: -0px;
  right: -0px;
  bottom: 0px;
  width: ;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 20px 10px rgba(168, 212, 212, 0.5);
  animation: neonGlow 1.5s ease-in-out infinite; 
}
.login::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  width: ;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 60px 30px rgba(168, 212, 212, 0.3);
  animation: neonGlow 1.5s ease-in-out infinite; 
}
@keyframes neonGlow {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
.login h1{
	margin: 2px;
	font-size: 2em;
}
.login .curso{
	margin: 3px;
	background-color: var(--bg-intro);
	opacity: 1;
	font-size: 0.8em;
	color: var(--co-input);
	font-weight: normal;
	padding: 8px;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 3px;
}
.login h2{
	margin: 3px;
	background-color: var(--bg-intro);
	opacity: 1;
	font-size: 0.8em;
	color: var(--co-input);
	padding: 0px;
	height: 2em;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
}
.login .inputs{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login .inputs div{
display: flex;
justify-content: center;
}
.login .inputs input{margin-top: 5px;}
.login .boton_entrar{
	margin: 4px;
}
.datos-centro .datos{
	opacity: 1;
	transition: 0.3;
}
.datos-centro .datos: hover{
	opacity: 1;
}
.datos-centro .datos .dato{
text-align: center;

}
.datos-centro .datos .nombre{
	font-size: 1.2em;
	font-weight: normal;
	position: relative;
	border: 1px solid rgba(255,255,255,0.8);
	border-radius: 2px;
	padding: 5px;
	color: rgba(255,255,255,0.8);
}
.datos-centro .datos .nombre::before {
  content: "";
  position: absolute;
  top: -0px;
  left: -0px;
  right: -0px;
  bottom: 0px;
  width: ;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 10px 5px rgba(168, 212, 212, 0.5);
  animation: neonGlow 2s ease-in-out infinite; 
}
.datos-centro .datos .nombre::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  width: ;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 20px 5px rgba(168, 212, 212, 0.3);
  animation: neonGlow 2s ease-in-out infinite; 
}
.datos-centro .datos .nombre .codigo{
	font-size: 0.6em;
	opacity: 0.6;
	padding: 5px;
}
.datos-centro .datos img.micro-ico{
width: 10px;
margin: 4px;
background-color: rgba(255, 255, 255, 0.7);
padding: 3px;
border-radius: 2px;
}
.datos-centro .datos .direccion{
	margin-top: 5px;
	font-size: 0.8em;
	padding: 3px;
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
}
.datos-centro .datos .localidad{
	margin-top: 0px;
	font-size: 0.6em;
	padding: 3px;
	font-weight: normal;
	font-style: italic;
	text-transform: uppercase;
	font-weight: bold;
	opacity: 0.7;
}
.login .msj-cerrado{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}
.login .msj-cerrado p{
padding: 30px;
text-align: center;
font-size: 1.2em;
font-weight: normal;
}
.login .msj-cerrado img{
	margin: 30px;
	margin-bottom: 0px;
	background: #FFFFFF;
	border-radius: 50px;
	padding: 20px;
width: 50px;
}
.login .fecha{
	font-size: 1.2em;
	font-weight: bold;
	color: var(--bg-intro);
}
.creditos{
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	bottom: 0px;
	font-size: 0.7em;
	padding: 0px;
	padding-bottom: 10px;
	opacity: 0.4;

}