/* =====================================================
   BOOTSTRAP 5 THEME OVERRIDE — "Banana Steel v5.1"
   Marca fitness: Negro (primario) + Amarillo plátano apagado (acento)
   Cobertura total de Bootstrap 5: colores, botones, tipografía, fondos, borders
   ===================================================== */

/* ---------- Paleta base ---------- */
:root {
    --fitness-black: #000000;
    --fitness-gray-900: #111111;
    --fitness-gray-800: #1a1a1a;
    --fitness-gray-700: #222222;
    --fitness-bg: #ffffff;
  
    --fitness-yellow: #e6b800;
    --fitness-yellow-accent: #ffd84d;
    --fitness-yellow-dark: #cc9900;
  
    --fitness-text-dark: #111111;
    --fitness-text-light: #fdfdfd;
  
    /* Overrides Bootstrap */
    --bs-primary: var(--fitness-black);
    --bs-secondary: var(--fitness-yellow);
    --bs-success: #66b366;
    --bs-info: #85c5e6;
    --bs-warning: var(--fitness-yellow-accent);
    --bs-danger: #ff5a5a;
    --bs-dark: var(--fitness-black);
    --bs-light: #f8f9fa;
  
    --bs-body-bg: var(--fitness-bg);
    --bs-body-color: var(--fitness-text-dark);
  
    --bs-link-color: var(--fitness-yellow);
    --bs-link-hover-color: var(--fitness-yellow-accent);
  
    --focus-shadow-yellow: 0 0 0 0.2rem rgba(230, 184, 0, 0.25);
    --table-header-bg: var(--fitness-black);
    --table-header-color: var(--fitness-yellow);
  }
  
  /* ---------- Base ---------- */
  body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Nunito', system-ui, sans-serif;
  }
  a, .nav-link, .dropdown-item {
    color: var(--bs-link-color);
    text-decoration: none;
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.2s ease,
      transform 0.1s ease;
  }
  a:hover, .nav-link:hover, .dropdown-item:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
  }

/* =======================================================
   DROPDOWN MENUS — BANANA STEEL THEME
   ======================================================= */

/* ---------- Menú claro (por defecto) ---------- */
.dropdown-menu {
    background-color: #ffffff !important;
    color: var(--fitness-gray-800) !important;
    border: 1px solid #e2e2e2 !important;
    border-top: 3px solid var(--fitness-yellow) !important; /* separador visual */
    border-radius: 0.6rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    margin-top: 0.3rem;
    z-index: 1080;
  }
  
  .dropdown-menu .dropdown-item {
    color: var(--fitness-gray-800) !important;
    font-weight: 500;
    border-radius: 0.4rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
  }
  
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    background-color: rgba(230, 184, 0, 0.10);
    color: var(--fitness-yellow-dark) !important;
  }
  
  .dropdown-menu .dropdown-item.active,
  .dropdown-menu .dropdown-item:active {
    background-color: var(--fitness-yellow) !important;
    color: var(--fitness-black) !important;
  }
  
  .dropdown-menu .dropdown-divider {
    border-top-color: #ebebeb !important;
  }
  
  /* ---------- Menú oscuro ---------- */
  .dropdown-menu.dropdown-menu-dark {
    background-color: #101010 !important;
    color: var(--fitness-text-light) !important;
    border: 1px solid #1f1f1f !important;
    border-top: 3px solid var(--fitness-yellow) !important; /* separador visual */
    border-radius: 0.6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    margin-top: 0.3rem;
    z-index: 1080;
  }
  
  .dropdown-menu.dropdown-menu-dark .dropdown-item {
    color: var(--fitness-text-light) !important;
    border-radius: 0.4rem;
  }
  
  .dropdown-menu.dropdown-menu-dark .dropdown-item:hover,
  .dropdown-menu.dropdown-menu-dark .dropdown-item:focus {
    background-color: #181818 !important;
    color: var(--fitness-yellow) !important;
  }
  
  .dropdown-menu.dropdown-menu-dark .dropdown-item.active,
  .dropdown-menu.dropdown-menu-dark .dropdown-item:active {
    background-color: var(--fitness-yellow) !important;
    color: var(--fitness-black) !important;
  }
  
  .dropdown-menu.dropdown-menu-dark .dropdown-divider {
    border-top-color: #2a2a2a !important;
  }
  
  .dropdown-menu.dropdown-menu-dark i {
    color: var(--fitness-yellow) !important;
  }
  
  /* ---------- Transición suave y separación visual ---------- */
  .dropdown-menu,
  .dropdown-menu-dark {
    transform-origin: top;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
  }
  
  .show > .dropdown-menu,
  .show > .dropdown-menu-dark {
    transform: translateY(3px);
  }
  
  
  
  /* ---------- Tipografía / Colores de texto ---------- */
  .text-primary { color: var(--fitness-black) !important; }
  .text-secondary, .text-warning, .text-accent { color: var(--fitness-yellow) !important; }
  .text-dark { color: var(--fitness-text-dark) !important; }
  .text-light { color: var(--fitness-text-light) !important; }
  .text-success { color: #66b366 !important; }
  .text-danger { color: #ff5a5a !important; }
  .text-info { color: #85c5e6 !important; }
  .text-muted { color: #777 !important; }
  
  /* ---------- Fondos ---------- */
  .bg-primary {
    background-color: var(--fitness-black) !important;
    color: var(--fitness-text-light) !important;
  }
  .bg-secondary, .bg-warning {
    background-color: var(--fitness-yellow) !important;
    color: var(--fitness-black) !important;
  }
  .bg-dark {
    background-color: var(--fitness-black) !important;
    color: var(--fitness-yellow) !important;
  }
  .bg-light, .bg-white {
    background-color: var(--fitness-bg) !important;
    color: var(--fitness-text-dark) !important;
  }
  .bg-success { background-color: #66b366 !important; color: #fff !important; }
  .bg-danger { background-color: #ff5a5a !important; color: #fff !important; }
  .bg-info { background-color: #85c5e6 !important; color: #000 !important; }
  
  /* ---------- Bordes ---------- */
  .border-primary { border-color: var(--fitness-black) !important; }
  .border-secondary, .border-warning { border-color: var(--fitness-yellow) !important; }
  .border-dark { border-color: var(--fitness-black) !important; }
  .border-light { border-color: #f8f9fa !important; }
  .border-success { border-color: #66b366 !important; }
  .border-danger { border-color: #ff5a5a !important; }
  .border-info { border-color: #85c5e6 !important; }
  
  /* ---------- Navbar / Footer ---------- */
  .navbar, .footer, .bg-black {
    background-color: var(--fitness-black) !important;
    color: var(--fitness-text-light);
  }
  .navbar-brand, .nav-link {
    color: var(--fitness-yellow) !important;
    font-weight: 600;
    text-transform: uppercase;
  }
  .nav-link:hover { color: var(--fitness-yellow-accent) !important; }
  .navbar-toggler { border-color: var(--fitness-yellow); }
  .navbar-toggler-icon::before {
    content: "☰";
    color: var(--fitness-yellow);
    font-size: 1.5rem;
  }
  
  /* ---------- Botones ---------- */
  .btn {
    font-weight: 700;
    border-radius: .5rem;
    text-transform: uppercase;
    transition: all 0.25s ease-in-out;
    background-image: none !important;
    box-shadow: none !important;
  }
  .btn:active { transform: scale(0.97); }
  .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-shadow-yellow);
  }
  
  /* Principales */
  .btn-primary,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: var(--fitness-black) !important;
    border-color: var(--fitness-black) !important;
    color: var(--fitness-yellow) !important;
  }
  
  .btn-secondary,
  .btn-warning,
  .btn-secondary:hover,
  .btn-warning:hover,
  .btn-secondary:focus,
  .btn-warning:focus,
  .btn-secondary:active,
  .btn-warning:active {
    background-color: var(--fitness-yellow) !important;
    border-color: var(--fitness-yellow) !important;
    color: var(--fitness-black) !important;
  }
  
  .btn-dark,
  .btn-dark:hover,
  .btn-dark:focus,
  .btn-dark:active {
    background-color: var(--fitness-black) !important;
    border-color: var(--fitness-black) !important;
    color: var(--fitness-yellow) !important;
  }
  
  .btn-light {
    background-color: var(--fitness-text-light);
    color: var(--fitness-black);
    border-color: #ddd;
  }
  .btn-light:hover {
    background-color: #f3f3f3;
  }
  
  /* Outline */
  .btn-outline-primary,
  .btn-outline-dark {
    color: var(--fitness-black);
    border-color: var(--fitness-black);
  }
  .btn-outline-primary:hover,
  .btn-outline-dark:hover {
    background-color: var(--fitness-black);
    color: var(--fitness-yellow);
  }
  .btn-outline-secondary,
  .btn-outline-warning {
    color: var(--fitness-yellow);
    border-color: var(--fitness-yellow);
  }
  .btn-outline-secondary:hover,
  .btn-outline-warning:hover {
    background-color: var(--fitness-yellow);
    color: var(--fitness-black);
  }
  .btn-outline-success {
    color: #66b366;
    border-color: #66b366;
  }
  .btn-outline-success:hover {
    background-color: #66b366;
    color: var(--fitness-black);
  }
  .btn-outline-danger {
    color: #ff5a5a;
    border-color: #ff5a5a;
  }
  .btn-outline-danger:hover {
    background-color: #ff5a5a;
    color: var(--fitness-black);
  }
  
  /* Disabled */
  .btn:disabled,
  .btn.disabled {
    opacity: 0.65;
    pointer-events: none;
    background-color: #888 !important;
    color: #222 !important;
    border-color: #666 !important;
  }
  
  /* Btn-link coherente */
  .btn-link {
    color: var(--fitness-yellow);
    text-decoration: none;
  }
  .btn-link:hover {
    color: var(--fitness-yellow-accent);
    text-decoration: underline;
  }
  
  /* ---------- Formularios ---------- */
  .form-control, .form-select {
    border-color: #d7d7d7;
    border-radius: 0.5rem;
  }
  .form-control:focus, .form-select:focus {
    border-color: var(--fitness-yellow);
    box-shadow: var(--focus-shadow-yellow);
  }
  .form-check-input:checked {
    background-color: var(--fitness-yellow);
    border-color: var(--fitness-yellow);
  }
  .input-group-text {
    background-color: var(--fitness-gray-700);
    color: var(--fitness-text-light);
    border-color: var(--fitness-black);
  }
  
  /* ---------- Tablas ---------- */
  .table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
  }
  .table tbody tr:hover {
    background-color: rgba(230, 184, 0, 0.1);
  }
  
  /* ---------- List Groups ---------- */
  .list-group-item {
    border-color: #e2e2e2;
    transition: background-color .2s ease;
  }
  .list-group-item:hover {
    background-color: rgba(230,184,0,0.08);
  }
  .list-group-item.active {
    background-color: var(--fitness-yellow);
    border-color: var(--fitness-yellow);
    color: var(--fitness-black);
  }
  
  /* ---------- Pagination ---------- */
  .page-link {
    color: var(--fitness-yellow);
    border-color: var(--fitness-yellow);
  }
  .page-link:hover {
    background-color: var(--fitness-yellow);
    color: var(--fitness-black);
  }
  .page-item.active .page-link {
    background-color: var(--fitness-black);
    border-color: var(--fitness-black);
    color: var(--fitness-yellow);
  }
  
  /* ---------- Progress / Spinner ---------- */
  .progress-bar {
    background-color: var(--fitness-yellow);
  }
  .spinner-border, .spinner-grow {
    color: var(--fitness-yellow);
  }
  
  /* ---------- Badges ---------- */
  .badge {
    background-color: var(--fitness-yellow);
    color: var(--fitness-black);
  }
  .badge.bg-dark {
    background-color: var(--fitness-black) !important;
    color: var(--fitness-yellow) !important;
  }
  
  /* ---------- Breadcrumb ---------- */
  .breadcrumb {
    background: transparent;
  }
  .breadcrumb-item + .breadcrumb-item::before {
    color: var(--fitness-yellow);
  }
  .breadcrumb-item.active {
    color: var(--fitness-yellow-accent);
  }
  
  /* ---------- Alerts ---------- */
  .alert-warning, .alert-primary {
    background-color: var(--fitness-yellow);
    border-color: var(--fitness-yellow-dark);
    color: var(--fitness-black);
  }
  .alert-dark {
    background-color: var(--fitness-black);
    color: var(--fitness-yellow);
    border-color: var(--fitness-yellow);
  }
  
  /* ---------- Toasts / Tooltips ---------- */
  .toast {
    background-color: var(--fitness-black);
    color: var(--fitness-yellow);
  }
  .tooltip .tooltip-inner {
    background-color: var(--fitness-black);
    color: var(--fitness-text-light);
    border: 1px solid var(--fitness-gray-700);
  }
  .popover {
    border-color: var(--fitness-gray-800);
  }
  
  /* ---------- Cards / Modals ---------- */
  .card, .modal-content {
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,0.1);
  }
  .card-header, .modal-header {
    background-color: var(--fitness-black);
    color: var(--fitness-yellow);
  }
  .card-footer {
    background-color: #fafafa;
  }
  
  /* ---------- Accesibilidad general ---------- */
  :focus-visible {
    outline: 2px solid var(--fitness-yellow);
    outline-offset: 2px;
  }