/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Banner Styling */
.banner {
    position: relative;
    width: 100%;
    height: 60vh;
    background: url('images/fondo.png') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

/* Banner Content */
.banner-content {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.banner h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;     
}

.banner p {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.table-transparent,
.table-transparent td,
.table-transparent th {
    background-color: transparent !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner h1 {
        font-size: 2rem;
    }

    .banner p {
        font-size: 1.2rem;
    }

    .btn {
        font-size: 1rem;
    }
}


/* Modo oscuro */
[data-bs-theme="dark"] {
    background-color: #242424;
    color: #eee;
}

[data-bs-theme="dark"] .banner {
    background-color: #0d6efd;
}

/* Para que los textos en alertas sean visibles en modo oscuro */
[data-bs-theme="dark"] .alert-danger {
    background-color: #8b0000;
    color: white;
}

[data-bs-theme="dark"] .alert-info {
    background-color: #1e90ff;
    color: white;
}

/* Footer */
footer {
    background-color: #222;
    color: #fff;
    padding: 1rem 0;
}

/* Botón toggle (opcional ajustes visuales) */
.theme-toggle {
    font-size: 1.2rem;
}

/* Estilos para modo claro */
:root {
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
}

/* Cuando el atributo data-bs-theme es "dark" */
html[data-bs-theme="dark"] {
  --bs-body-bg: #242424;
  --bs-body-color: #eee;
}

/* Aplica las variables */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* Estilos para el botón modo oscuro/claro */
.theme-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 20px;
    right: 80px;
    z-index: 1050;
    font-size: 24px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Modo claro - botón sol amarillo fondo celeste */
.theme-toggle.light {
    background-color: #242424; /* negro */
    color: #ffffff; /* amarillo */
}
/* Modo oscuro - botón luna blanca fondo negro */
.theme-toggle.dark {
    background-color: #242424; /* negro */
    color: #FFFFFF; /* blanco */
}

.user-toggle-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #242424;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  position: fixed;
  top: 20px;
  right: 40px;
  z-index: 1050;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.user-toggle-btn.light {
    background-color: #242424; /* negro */
    color: #FFFFFF; /* blanco */
}
.user-toggle-btn.dark {
    background-color: #3f3f3f; /* negro */
    color: #e0b046; /* blanco */
}

.user-toggle-btn:hover,
.user-toggle-btn:focus,
.user-toggle-btn:active {
  background-color: #636363 !important;
  color: #4e3c3c !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.user-toggle-btn.dark:hover,
.user-toggle-btn.dark:focus,
.user-toggle-btn.dark:active {
  background-color: #636363 !important;
  color: #e0b046 !important;
}

.form-check-input {
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.5);
    border-color: #3f3f3f;
}