/*  *****     FORMULARIO DE ALTA TEMPRANA    **** */

.for-text, select {
    text-transform: uppercase;
    color: #0d5350;
}
.style1 {
    background-color: white;
    color: rgb(3, 3, 3);
}
.form1{
  background-color: rgba(110, 110, 110, 0.2) ;
}
.btn-form{
    height: 4rem; 
    width: 15rem;
}

/*           NAVBAR - EFECTOS EN LOS ENLACES - */

.navbar-nav .nav-link {
  text-transform: uppercase;
}
.bi-box-arrow-right{
  font-size: 2rem;
  color: white;
}
.navbar-nav .nav-link {
    text-transform: uppercase;
    padding: 8px 12px; /* Añade algo de espacio interno */
    transition: border 0.5s ease-in-out, background-color 0.5s ease-in-out;
    border: 2px solid transparent; /* Inicialmente sin borde */
    border-radius: 15px; /* Redondeado */
  }
  
  .navbar-nav .nav-link:hover {
    border: 2px solid black; /* Aparece el borde negro */
    background-color: rgba(0, 0, 0, 0.1); /* Un ligero fondo transparente */
  }
  

  /*            FOOTER - EFECTOS          */


/* Estilos generales del footer */
.footer {
    background-color: #00b140;
    color: white;
    position: relative;
    display: flex;
    align-items: center; /* Centrar en altura */
    justify-content: start; /* Alinear a la izquierda */
    height: 4.5rem; /* Altura aumentada para evitar cortes de texto */
  }
  
  /* Contenedor del contenido (LOGO + TEXTO) */
  .footer-content {
    display: flex;
    align-items: center; /* Centrar en altura */
    gap: 0.5rem; /* Espaciado reducido entre logo y texto */
    padding-left: 0; /* Sin padding izquierdo */
    margin-left: 0; /* Sin margen izquierdo */
  }
  
  /* Imagen del logo */
  #coarco-logo {
    width: 55px; /* Tamaño del logo reducido */
    opacity: 0; /* Oculto al inicio */
    transform: translateX(-20px);
    animation: fadeInLogo 1.5s ease-in-out forwards;
  }
  
  /* Animación del logo */
  @keyframes fadeInLogo {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Contenedor del texto */
  .footer-text {
    display: flex;
    flex-direction: column; /* Organiza texto en columna */
    align-items: start; /* Alinea el texto a la izquierda */
    margin-top: 0.6rem; /* Baja más el texto para alinearlo con el logo */
  }
  
  /* Texto de la empresa */
  #company-name {
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    margin-bottom: 0.2rem; /* Espacio entre el nombre y la frase */
  }
  
/* Animación del tipeo */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
  
/* Aplicación de la animación */
.footer-text h2 {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typing 2s steps(12, end) forwards;
}

/* Slogan con transición */
  #company-slogan {
    font-size: 0.85rem;
    color: white;
    opacity: 0;
    animation: fadeInText 3s ease-in-out 2s forwards;
  }
  
  @keyframes fadeInText {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  

/*               LOGIN MEJORADO - EFECTOS   */

.login-container {
  background-image: url(../images/ParqueEolico2.jpg);
  background-size: cover; /* Hace que la imagen cubra toda la pantalla */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-attachment: fixed; /* Hace que el fondo quede fijo al hacer scroll */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ocupa toda la pantalla */
}
/* Nueva tarjeta grande que contiene el título y el login */
.login-wrapper {
  background: rgba(0, 0, 0, 0.3); /* Fondo oscuro con opacidad */
  backdrop-filter: blur(10px); /* Efecto de desenfoque */
  padding: 2rem;
  border-radius: 1rem; /* Bordes redondeados */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Relieve con sombra */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30rem; /* Más ancho para contener todo */
}
/* Estilo del título */
.login-title {
  color: white; /* Texto blanco */
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}


/* Tarjeta del login con fondo semitransparente y desenfoque */
.login-card {
  background: rgba(255, 255, 255, 0.2); /* Gris claro con opacidad */
  backdrop-filter: blur(5px); /* Efecto de desenfoque */
  padding: 2rem;
  width: 22rem; /* Más cuadrado */
  border-radius: 1rem; /* Bordes redondeados */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Relieve con sombra */
  transition: transform 0.3s ease-in-out;
}

/* Efecto de elevación al pasar el mouse */
.login-card:hover {
  transform: translateY(-5px);
}

/* Labels en mayúscula */
.form-label {
  text-transform: uppercase;
  font-weight: bold;
}

/* Input con borde parpadeante al enfocar */
.input-animated {
  transition: border 0.4s ease-in-out;
  border: 2px solid transparent;
  text-transform: uppercase;
}

.input-animated:focus {
  border: 2px solid black;
  animation: blinkBorder 1s infinite;
}

/* Animación del borde parpadeante */
@keyframes blinkBorder {
  50% {
      border-color: transparent;
  }
}



/*        NOVEDADES - CARGA DE NOVEDADES -                   */

/* Contenedor principal con la imagen de fondo */
.consulta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Toda la pantalla */
}

/* Tarjeta principal con fondo translúcido */
.consulta-wrapper {
  background: rgba(110, 110, 110, 0.2); /* Fondo oscuro con opacidad */
  backdrop-filter: blur(10px); /* Efecto de desenfoque */
  padding: 5rem;
  border-radius: 1rem; /* Bordes redondeados */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40rem; /* Tamaño ajustado */
}

/* Título */
.consulta-title {
  color: black;
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 3rem;
}

/* Formulario */
.consulta-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Campos de selección */
.form-label {
  text-transform: uppercase;
  font-weight: bold;
  color: black;
}

.form-select {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  transition: border 0.4s ease-in-out;
}

/* Efecto en los selects */
.form-select:focus {
  border: 2px solid white;
  animation: blinkBorder 1s infinite;
}

/* Animación de borde parpadeante */
@keyframes blinkBorder {
  50% {
      border-color: transparent;
  }
}

/* Botones */
.consulta-btn {
  font-size: 1rem;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}

/* Efecto hover en botones */
.consulta-btn:hover {
  transform: scale(1.05);
}

/* Spinner */
.hidden {
  display: none;
}


/* ---------------- HOME ---------------- */

/* Contenedor principal centrado */
.con1 {
  background: rgba(110, 110, 110, 0.2);
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 80%;
  margin: auto; /* Centrado */
  padding: 2rem;
}

/* Título */
h1 {
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Botones personalizados */
.btn-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 30rem; /* Evita que sean demasiado anchos */
  height: 10rem; /* Tamaño uniforme */
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 1rem;
  background: transparent;
  color: black;
  border: 4px solid black;
  transition: all 0.3s ease-in-out;
}

/* Efecto hover */
.btn-custom:hover {
  transform: scale(1.08);
  background: rgba(10, 10, 10, 0.1);
  box-shadow: 5px 8px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  color: white;
  border: 0.3rem solid black;
}

/* 🎯 Ajustes responsivos para pantallas grandes */
@media (min-width: 1400px) { /* Monitores grandes */
  .con1 {
    max-width: 80%; /* Se agranda en monitores de 24" */
    padding: 3rem;
  }

  h1 {
    font-size: 3.5rem;
  }

  .btn-custom {
    max-width: 35rem; /* Botones más anchos */
    height: 12rem;
    font-size: 1.5rem;
  }
}

/* Ajuste responsivo */
@media (max-width: 992px) { /* Tablets y laptops pequeñas */
  .btn-custom {
    font-size: 1rem;
    height: 90%;
  }
}

@media (max-width: 768px) { /* Móviles grandes */
  .btn-custom {
    font-size: 1rem;
    height: 80%;
  }
}

@media (max-width: 576px) { /* Móviles pequeños */
  .btn-custom {
    font-size: 1rem;
    height: 70%;
  }
}

/* ----------------- PERÍODOS ----------------- */
.container-periodos{
  background: rgba(66, 66, 66, 0.2);
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  color: black;
  padding: 2rem;
  width: 100%;
  text-align: center;
}
.tarjetaHistorial{
  background-color: white;
}

/* DataTables pagination styling for periods history */
.tarjetaHistorial .dataTables_wrapper .dataTables_paginate {
  border: 2px solid #000;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-top: 1rem;
  background-color: #f8f9fa;
}

.tarjetaHistorial .dataTables_wrapper .dataTables_info {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: #f8f9fa;
  margin-bottom: 0.5rem;
}

.tarjetaHistorial .dataTables_wrapper .dataTables_length {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
  background-color: #f8f9fa;
  margin-bottom: 1rem;
}

/* Container styling for alta temprana to match project design */
.container-altatemprana {
  background: rgba(110, 110, 110, 0.2);
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  color: black;
  padding: 2rem;
  width: 100%;
}

/* -------- REPORTES -------- */

/* Contenedor principal */
.repo-container {
  background: rgba(110, 110, 110, 0.2);
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  color: black;
  padding: 2rem;
  width: 100%;
  max-width: 500px;
  text-align: center;
}

/* Botón personalizado */
.btn-periodo {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 1rem;
  background: transparent;
  color: black;
  border: 4px solid black;
  transition: all 0.3s ease-in-out;
}

/* Efecto hover */
.btn-periodo:hover {
  transform: scale(1.08);
  background: rgba(10, 10, 10, 0.1);
  box-shadow: 5px 8px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  color: white;
  border: 0.3rem solid black;
}

/* Ajuste para evitar desplazamientos no deseados */
body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-vertical-center {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------- FILTRO AUTORIZACIONES ---------------- */

/* Contenedor principal centrado */
.con2 {
  background: rgba(110, 110, 110, 0.2);
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 80%;
  margin: auto; /* Centrado */
  padding: 2rem;
}

/* Título */
.t1 {
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Botones personalizados */
.btn-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 30rem; /* Evita que sean demasiado anchos */
  height: 10rem; /* Tamaño uniforme */
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 1rem;
  background: transparent;
  color: black;
  border: 4px solid black;
  transition: all 0.3s ease-in-out;
}

/* Efecto hover */
.btn-custom:hover {
  transform: scale(1.08);
  background: rgba(10, 10, 10, 0.1);
  box-shadow: 5px 8px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  color: white;
  border: 0.3rem solid black;
}

/* Responsive: Reduce tamaño en pantallas más chicas */
@media (max-width: 768px) {
  .btn-custom {
    height: 8rem;
    font-size: 1rem;
  }
}

/* Fondo gris para el buscador de conceptos */
.buscador-conceptos {
  background: #f2f2f2;
  border-radius: 0.5rem;
}