/*----------  Fuentes  ----------*/
@font-face {
  font-family: "roboto_medium_regular";
  src: url("../webfonts/roboto-medium-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/*----------  Variables de Entorno  ----------*/
:root {
  --color-bg: #b9b9b9; /* Fondo general claro */
  --border-color: #dee2e6;
}

/*----------  Estilos Base  ----------*/
body,
html {
  font-family: "roboto_medium_regular", Arial, sans-serif;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  font-size: 16px;
  margin: 0;
}

/* Este es el contenedor que envuelve todas tus vistas */
.page-content {
  padding-top: 15px; /* Espacio para el Navbar superior */
  transition: all 0.3s ease;
  min-height: 100vh;
}

/*----------  Tablas con Esquinas Redondeadas  ----------*/
.table {
  width: 100%;
  margin-bottom: 5rem;
  /* Importante: separate permite que el radius funcione */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  border-radius: 12px; /* Ajusta el radio a tu gusto */
  overflow: hidden; /* Corta el fondo de las celdas para que no tapen la esquina */
}

.table thead th {
  border: none;
  padding: 12px;
}

/* Para que las celdas no tengan doble borde y respeten el redondeo */
.table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

/* Quitamos el borde a la última fila para que no choque con el redondeo inferior */
.table tbody tr:last-child td {
  border-bottom: none;
}

/*----------  Tarjetas (Cards)  ----------*/
.card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-header {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
}

/*----------  Page 404 styles  ----------*/
.container-404 {
  background: #001028;
  background: linear-gradient(to right, #6d6258, #281200);
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*----------  login Styles  ----------*/
.login-container {
  /* width: 100vw; */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-content {
  width: 95%;
  max-width: 320px;
  height: auto;
  border: 3px solid #000000;
  background-color: #ffffff00;
  border-radius: 15px;
  padding: 15px;
  color: #ffffff;
  background: #0000002d;
}

.btn-login {
  width: 90%;
  padding: 10px 0;
  display: block;
  margin: 30px auto 0; /* Simplificado */
  border-radius: 3px;
  background: transparent;
  color: #000000;
  border: 3px solid #000000;

  /* Definimos el gradiente aquí, pero oculto o estático */
  background-image: linear-gradient(
    to right,
    #0000006b,
    #9d00344d,
    #0034af4f,
    #bbbe0054,
    #0000006b
      /* Repetimos el primer color para que el ciclo sea infinito/suave */
  );
  background-size: 300% 100%; /* Hacemos el fondo muy ancho */
  background-position: 0% 50%;
  transition: all 0.4s ease; /* Aumenté un poco el tiempo para que se note el movimiento */
}

.btn-login:hover {
  border: 3px solid #000000; /* Mantener el mismo grosor evita que el botón "salte" */
  background-position: 100% 50%; /* Desplazamos el fondo al pasar el mouse */
  cursor: pointer;
  text-decoration: none;
}

.btn-login:active,
.btn-login:focus {
  outline: none;
}