:root {
  --logo-url: url('/images/logo.png');
  --background-image: url('../imagenes/fondo.jpg');
  --primary-color: #00577f;
  --secondary-color: #6c757d;
  --accent-color: #198754;
  --text-color: #00577f;
  --header-bg: #0f172a;
  --footer-bg: #111827;
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* 1. CREAMOS DOS NUEVAS VARIABLES PARA QUE CONFIGURES TUS AZULES */
  --gradient-color-1: #00577f; /* Azul fuerte (esquina superior izquierda) */
  --gradient-color-2: #9eb3c7; /* Azul cielo (esquina inferior derecha) */
  --ligas-tipo-a: #8fbbee;
  --placeholders: #ffffffc2;;
  
}

/******* PERSONALIZACION PARA BOTONES EN GENRAL DE LA PLANTILLA *****/
html, body {
  font-family: var(--font-family);
  color: var(--text-color);
  margin: 0;
  height: 100%;
}

body {
  /* 2. EFECTO DEGRADADO DIAGONAL */
  /* 'to bottom right' indica la dirección diagonal */
  background-image: linear-gradient(to bottom right, var(--gradient-color-1),#2c7898, var(--gradient-color-2)) !important;
  
  /* Asegura que el degradado cubra toda la pantalla fija y no se repita en mosaico */
  background-attachment: fixed;
  background-size: cover;
}

/* Mantenemos tu fondo transparente con ::before intacto */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* background-image: var(--background-image);
  background-size: cover;
  background-position: center; */
  opacity: 0.3; /* Bajé un poco la opacidad a 0.3 para que luzcan más tus nuevos colores */
}

.letras_login {
  color: #ffffff;
  
}


/* El truco del centrado vertical para Bootstrap 3 */
.login-container {
  position: relative;
  min-height: 100%;
  display: table; /* Hace que se comporte como una celda para poder alinear verticalmente */
  width: 100%;
}

.login-container .row {
  /* display: table-cell; */
  vertical-align: middle; /* Alineación vertical perfecta */
}


.card {
  border: none;
  border-radius: 2rem;
  background-color: none;
  box-shadow: 1px 3px 15px rgba(0,0,0,0.2);
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  /* max-width: 600px;  */
  width: 100%;
   

}

.card-interior {
  /* 1. Fondo blanco casi transparente (0.15 significa 15% de opacidad) */
  background-color: rgba(255, 255, 255, 0.05) !important;
  
  /* 2. El efecto de desenfoque esmerilado */
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(20px) !important; /* Compatibilidad con Safari */
  
  /* 3. Un borde blanco muy fino y transparente que define los límites del cristal */
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  
  /* 4. Sombreado sutil para darle profundidad sobre la tarjeta externa */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

.card-ext {
  border: none;
  border-radius: 5rem;
  background-color: #7d9bb8;
  box-shadow: 1px 3px 15px rgba(0,0,0,0.2);
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  /* max-width: 600px;  */
  width: 100%;
    background-image: var(--background-image);
  background-size: cover;
  background-position: center;

}



.search{
    height : 35px;
    width: 200px;
    border: 1px solid;
    border-radius: 10px;
    z-index: auto;
    border-color:lightgray;
}

.search .form-control{
    height : 35px;
}



.btn-primary, .btn-primary:focus, .btn-hover-primary:hover, .btn-hover-primary:active, .btn-hover-primary.active, .btn.btn-active-primary:active, .btn.btn-active-primary.active, .dropdown.open>.btn.btn-active-primary, .btn-group.open .dropdown-toggle.btn.btn-active-primary {
    background-color: #00577f;
    border-color:#00577f;
    color: #fff ;
}

.btn-primary:focus {
    background-color: #474747;
    border-color:  #474747;
    border-width: thin;
    color: #fff ;
}

.btn-primary:hover {
    color: #fff;
    background-color: #474747;
    border-color: #474747;
}

.btn-success, .label-success {
    background-color: #357a35;
    border: 1px solid #357a35;
}

.btn-success:hover {
    color: #fff;
    background-color: #068b06;
    border-color: #398439;
}

.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: #104910;
    border-color: #255625;
}


a{
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    color:#ffffff;
}
a:hover,a:focus, button, button:focus{
  
    outline: 0 !important;
    text-decoration: none; 
    color:var(--ligas-tipo-a);
}

#side-menu li.active a,
#side-menu li:hover a {
      color: #797979 !important;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #fff;
    cursor: default;
    background-color:  #4b4e53;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom-color: transparent;
}

.account-col .btn-primary {
    border: 0px;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: #797979;
    margin-bottom: 20px;
}

.navbar-default .navbar-nav > li > a {
    color: #1e1c8b !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 25px;
}

.search-icon .fa-search {
    display: block;
    padding: 21px 15px;
    line-height: 20px;
    cursor: pointer;
    color: #1e1c8b !important;
}

.color-lineMor {
    background: #04046e;
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-image: none;
        background-size: auto;
    height: 6px;
    background-image: -webkit-linear-gradient(left, #4B4E53, #8A8A8D , #1c1e8b , #0400eb , #00f7ff );
    background-image: -moz-linear-gradient(left, #4B4E53, #8A8A8D , #1c1e8b , #0400eb , #00f7ff);
    background-image: -ms-linear-gradient(left, #4B4E53, #8A8A8D , #1c1e8b , #0400eb , #00f7ff);
    background-image: linear-gradient(to right, #4B4E53, #8A8A8D , #1c1e8b , #0400eb , #00f7ff);
    background-size: 100% 6px;
    background-position: 50% 100%;
    background-repeat: no-repeat;
}

.navbar-minimalize {
    color: #fff;
    font-size: 21px;
    line-height: 30px;
    color: #1453db;
}

.form-control {
    display: block;
    /* width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5; */
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#deseoRegistrarme, #olvidasteContraseña {
  cursor: pointer; /* Convierte el cursor en manita, ya que al no usar 'href' no lo hace por defecto */
  transition: color 0.2s ease, text-decoration 0.2s ease;
  color: #ffffff; /* Ajusta el color del texto si se pierde con el fondo actual */
}

#deseoRegistrarme:hover, #olvidasteContraseña:hover {
  color: var(--ligas-tipo-a); /* Cambia a un color dorado/amarillo llamativo como el de tu aviso oculto */
  text-decoration: underline; /* Le añade una línea abajo para que resalte como enlace activo */
}

.form-control-degradado {
  /* 1. Fondo blanco casi transparente (0.15 significa 15% de opacidad) */
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important; /* Asegura que el texto sea visible sobre el fondo degradado */
  font-size:16px; /* Grosor de la línea de subrayado */
  
  /* 2. El efecto de desenfoque esmerilado */
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(20px) !important; /* Compatibilidad con Safari */
  
  /* 3. Un borde blanco muy fino y transparente que define los límites del cristal */
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  
  /* 4. Sombreado sutil para darle profundidad sobre la tarjeta externa */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

.form-control::-moz-placeholder {
    color:var( --placeholders);
    opacity: 1;
}
.form-control:-ms-input-placeholder {
    color: var( --placeholders);
}
.form-control::-webkit-input-placeholder {
    color:var( --placeholders);
}