@import url("colores.css");


/* Estilos Generales */
	
body, html {height: 100% !important; margin: 0 !important; }
	

  body { display: flex !important;
		flex-direction: column !important;
    font-family: Calibri;
    font-size: 18px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
   
  }

  main {flex: 1 0 auto !important; }


/* Login */
.formValid .cEmail { width: 80%; border: 0; border-bottom: 2px solid #ccc; margin-bottom: 1em; padding: 0.4em 0.2em 0.2em 0.5em; font-size: 1.1em;}
.formValid .cPassword { width: 80%; border: 0; border-bottom: 2px solid #ccc; margin-bottom: 1em; padding: 0.4em 0.2em 0.2em 0.5em; font-size: 1.1em;}

/* Cabecera */

.fila-superior { width: 100%; margin-top: 1rem; margin-bottom: 0.25rem; padding: 0 5%; }
.fila-superior img { margin-bottom: 0.3em; }
a { text-decoration:none; color: #ff0000; }
a:hover { font-weight: bold; }

/* Navegación */

.menuPrincipal {display: flex; width: 100%; padding: 0% 0% 0% 5%; color: var(--color-negro); margin-bottom: 0; align-items: center; }
.menuPrincipal li {list-style: none; padding: 1.5rem 0% 1.5rem 0%; margin-right: 0.5em; }
.menuPrincipal li a {color: var(--color-negro); font-weight: normal; text-decoration: none; transition: font-weight 0.2s ease;}	
.menuPrincipal li a:hover {color: var(--color-negro); font-weight: bold;}
.menuPrincipal li span {color: var(--color-negro); font-weight: bold;}
 
.menuPrincipal li.sel a {color: var(--color-negro)}
.menuPrincipal li.sel a div {padding: 0 0 0.4em 0; border-bottom: 2px solid; width: 43%}	

/* Encabezados o Titulares */

/* Login */
h1 {width: 13em; margin: 0 0 0.8em 0; color: #111; font-size: 1.4em}
h2.titLogin {width: 16em; color: #666; margin: 0 0 0.8em 0; font-size: 1.8em; font-weight: normal; color: #666}

/* Páginas */

h2.subTit {margin-top: 2.8em !important; border-left: 2px solid #ff0000; padding-left: 1.2em; font-size: 1.2em; color: #666; text-transform: uppercase}
h1.Tit {width: 75%; margin: 1.3% 0 3% 0 !important; font-size: 2.6em; line-height: 1.3em; text-transform: uppercase; font-weight: normal}

/* BOTONES */

.botonAccion, .botonAccionL {border: 0; margin: 1em 1em 1em 0; padding: 1em 2.5em 1em 2.5em; background-color: #ff0000; color: #ffffff; font-size: 0.9em; text-transform: uppercase;}
.botonAccionL {display: block; margin-top: 3%;color: #fff !important; padding: 1.2em 2.5em 1.2em 2.5em; text-align: center;}
.botonAccionHuge {border: 0; display: block; color: #fff !important; background-color: #ff0000; width: 32.5em ; padding: 1.4em 4.4em 1.4em 2.4em; font-size: 1em; text-align: center; text-transform: uppercase; border-radius: 38px; }

.botonAccion:hover, .botonAccionL:hover {background-color: #d50000}

.spinner-container {
  display: none;
  justify-content: center;
  align-items: center;
}
 
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-top: 4px solid #1a9a9b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
 

@media (max-width: 768px) {
  /* En pantallas extra pequeñas, hacer las columnas de ancho completo */
  .col-md-8,
  .col-md-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}