/* ==========================================
   IMPORTACIÓN DE FUENTES (GOOGLE FONTS)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ==========================================
   CONFIGURACIÓN GLOBAL Y TEMA OSCURO
   ========================================== */
:root {
    --bs-body-bg: #121212 !important;
    --bs-body-color: #e0e0e0 !important;
    --bs-primary: #71c837 !important;
    --bs-primary-rgb: 113, 200, 55 !important;
    --bs-dark: #1a1a1a !important;
    --bs-dark-rgb: 26, 26, 26 !important;
    --bs-border-color: #2c2c2c !important;
}

body, html {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
}

/* ==========================================
   TIPOGRAFÍA (BEBAS NEUE PARA TÍTULOS)
   ========================================== */
h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title, .modal-title {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 1px;
    color: #ffffff !important;
}

p, span, label, li, a, .text-muted, small, table {
    font-family: 'Roboto Condensed', sans-serif !important;
}

/* Forzar color claro en textos generales dentro de tarjetas y modales */
.card-text, .text-muted {
    color: #b0b0b0 !important;
}

/* ==========================================
   ELEMENTOS CUADRADOS (BOTONES Y TARJETAS)
   ========================================== */
.btn, .card, .form-control, .form-select, .modal-content, .dropdown-menu, .alert {
    border-radius: 0 !important;
}

/* ==========================================
   BOTONES
   ========================================== */
.btn-primary {
    background-color: #71c837 !important;
    border-color: #71c837 !important;
    color: #121212 !important;
    font-weight: 700;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #5fb22b !important;
    border-color: #5fb22b !important;
    color: #121212 !important;
}

/* Sobrescribir botones que queden en azul (como Ver Detalle) */
.btn-outline-primary, .btn-info, .btn-secondary {
    color: #71c837 !important;
    border-color: #71c837 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover, .btn-info:hover {
    background-color: #71c837 !important;
    color: #121212 !important;
}

/* ==========================================
   NAVEGACIÓN Y NAVBAR
   ========================================== */
.navbar {
    background-color: #181818 !important;
    border-bottom: 1px solid #2c2c2c;
}

.navbar-brand, .nav-link {
    color: #e0e0e0 !important;
}

.nav-link:hover, .nav-link.active {
    color: #71c837 !important;
}

/* ==========================================
   TARJETAS Y MODALES (DARK MODE FORZADO)
   ========================================== */
.card, .modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid #2c2c2c !important;
    color: #e0e0e0 !important;
}

.card-header, .card-footer, .modal-header, .modal-footer {
    background-color: #1f1f1f !important;
    border-color: #2c2c2c !important;
    color: #ffffff !important;
}

/* Contenedores generales que Bootstrap ponga como blancos o claros */
.bg-white, .bg-light, div[class*="bg-"] {
    background-color: #181818 !important;
    color: #e0e0e0 !important;
}

/* ==========================================
   FORMULARIOS E INPUTS (ELIMINAR FONDO AMARILLO AUTOFILL)
   ========================================== */
.form-control, .form-select {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}

.form-control:focus, .form-select:focus {
    background-color: #1a1a1a !important;
    border-color: #71c837 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(113, 200, 55, 0.25) !important;
}

/* Hack para evitar el fondo amarillo del autocompletado en navegadores */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* ==========================================
   ENLACES Y TEXTOS
   ========================================== */
a {
    color: #71c837;
    text-decoration: none;
}

a:hover {
    color: #8be052;
    text-decoration: underline;
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA PESTAÑAS (TABS) Y BOTONES DE CUENTA
   ========================================== */

/* Botón o pestaña activa/principal (ej: Registrarse seleccionado) */
.nav-pills .nav-link.active, 
.nav-tabs .nav-link.active,
.btn-primary,
.btn.btn-primary {
    background-color: #71c837 !important;
    border-color: #71c837 !important;
    color: #121212 !important;
    font-weight: 700 !important;
}

/* Pestaña o botón inactivo (ej: Iniciar Sesión cuando no está seleccionado) */
.nav-pills .nav-link:not(.active),
.btn-outline-primary,
.btn-secondary {
    background-color: transparent !important;
    color: #71c837 !important;
    border: 1px solid #71c837 !important;
}

.nav-pills .nav-link:not(.active):hover {
    background-color: rgba(113, 200, 55, 0.1) !important;
    color: #8be052 !important;
}

/* Botón de envío de formulario (Crear Cuenta / Ingresar) */
button[type="submit"], .btn-success {
    background-color: #71c837 !important;
    border-color: #71c837 !important;
    color: #121212 !important;
    font-weight: 700 !important;
}

button[type="submit"]:hover, .btn-success:hover {
    background-color: #5fb22b !important;
    border-color: #5fb22b !important;
    color: #121212 !important;
}

/* ==========================================
   CORRECCIÓN DEFINITIVA PARA INPUTS Y TEXTOS DE FORMULARIOS
   ========================================== */
input, textarea, select, .form-control, .form-select {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

/* Color para el texto de placeholder (ej: "Juan Pérez", "tu@email.com") */
input::placeholder, textarea::placeholder, .form-control::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

/* Asegurar que las etiquetas y textos dentro de los formularios sean claros */
label, .form-label {
    color: #e0e0e0 !important;
}

/* ==========================================
   CORRECCIÓN DE INPUT GROUPS (ÍCONOS DE FORMULARIOS)
   ========================================== */
.input-group-text {
    background-color: #222222 !important;
    border-color: #333333 !important;
    color: #71c837 !important;
    border-radius: 0 !important;
}

/* Sincronizar el borde del input junto al ícono */
.input-group .form-control {
    border-left: 0 !important;
}

.input-group .form-control:focus {
    border-color: #71c837 !important;
}