/* This file is reserved for overriding and extending the template styles. */

/* =============================================
   TIPOGRAFÍA GLOBAL - INTER
   ============================================= */

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400;
}

/* Títulos y encabezados */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700;
}

/* Títulos secundarios con peso medio */
.card-title, .modal-title, .page-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
}

.fw-bold, strong, b {
  font-weight: 700 !important;
}

.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500;
}

.nav, .menu, .navbar {
  font-family: 'Inter', sans-serif !important;
}

input, textarea, select, .form-control, .form-select {
  font-family: 'Inter', sans-serif !important;
}

/* Badges y etiquetas con peso medio */
.badge, .label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500;
}

/* =============================================
   LOGIN PAGE - Full Height Background
   ============================================= */

/* Asegurar que html, body y root ocupen 100% altura */
html, body, #root {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* Cuando hay animated-gradient, ocultar el fondo del body */
body:has(.animated-gradient) {
  background: #322783 !important; /* Color base del gradiente */
}

#root:has(.animated-gradient) {
  min-height: 100vh;
  min-height: 100dvh;
}

/* =============================================
   FUELLO LEARNS - Custom Styles
   ============================================= */

/* Profile Photo Edit Overlay */
.profile-photo-container {
  position: relative;
  display: inline-block;
}

.profile-photo-container .profile {
  transition: filter 0.2s ease;
}

.profile-photo-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 10;
  border: 2px solid var(--foreground);
}

.profile-photo-edit i,
.profile-photo-edit svg {
  color: #fff !important;
  fill: #fff !important;
}

.profile-photo-container:hover .profile-photo-edit {
  opacity: 1;
  transform: scale(1);
}

.profile-photo-container:hover .profile {
  filter: brightness(0.9);
}

/* Preparado para Firebase - Estados de carga */
.profile-photo-container.uploading .profile {
  filter: brightness(0.7);
}

.profile-photo-container.uploading .profile-photo-edit {
  opacity: 1;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* =============================================
   Modal de Selección de Avatar
   ============================================= */

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem 0;
}

.avatar-option {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  border: 3px solid transparent;
  transition: all 0.2s ease;
}

.avatar-option:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-option.upload-option {
  background: var(--separator);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed var(--muted);
}

.avatar-option.upload-option:hover {
  background: var(--separator-light);
  border-color: var(--primary);
}

.avatar-option.upload-option i,
.avatar-option.upload-option svg {
  width: 32px;
  height: 32px;
  color: var(--muted);
}

.avatar-option.upload-option:hover i,
.avatar-option.upload-option:hover svg {
  color: var(--primary);
}

.avatar-option.upload-option span {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.25rem;
  text-align: center;
}

.avatar-option.upload-option:hover span {
  color: var(--primary);
}

/* Responsive avatar grid */
@media (max-width: 576px) {
  .avatar-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* =============================================
   React Overrides - Force visibility without template JS
   ============================================= */

/* Force visibility immediately - CRITICAL */
html, body, #root {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Force body background */
body {
  background-color: var(--background, #f9f9f9) !important;
  min-height: 100vh;
}

/* Nav container styles */
.nav-container {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.nav-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Menu styles */
.menu-container {
  visibility: visible !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* Ocultar scrollbar en webkit (Chrome, Safari) */
.menu-container::-webkit-scrollbar {
  display: none;
  width: 0;
}

.menu {
  visibility: visible !important;
  opacity: 1 !important;
}

.menu > li > a {
  visibility: visible !important;
  opacity: 1 !important;
}

.menu > li > ul {
  visibility: visible !important;
  opacity: 1 !important;
}

.menu > li > ul > li > a {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Main content area */
main {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo - use template's default logo */
.logo .img {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Forzar que el li padre con submenú tenga overflow visible para no cortar esquinas */
.menu > li.active {
  overflow: visible !important;
  padding-bottom: 6px !important;
}

/* Active menu states - Fondo azul para items activos */
.menu > li.active > a,
.menu > li > a.active,
html[data-placement=vertical] .nav-container .menu-container .menu > li.active > a,
html[data-placement=vertical] .nav-container .menu-container .menu > li > a.active {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary) !important;
  border-radius: var(--border-radius-lg, 10px) !important;
}

/* Iconos del menú activo - cambiar solo el color (stroke), no el fill */
.menu > li.active > a .icon,
.menu > li > a.active .icon,
html[data-placement=vertical] .nav-container .menu-container .menu > li.active > a .icon,
html[data-placement=vertical] .nav-container .menu-container .menu > li > a.active .icon {
  color: var(--primary) !important;
}

/* Evitar que los iconos se rellenen - mantener solo stroke */
.menu .icon svg,
.nav-container .icon svg,
[data-acorn-icon] svg,
.list-group-item [data-acorn-icon] svg,
.card [data-acorn-icon] svg {
  fill: none !important;
}

/* Iconos específicos que nunca deben rellenarse */
[data-acorn-icon="email"] svg,
[data-acorn-icon="send"] svg,
[data-acorn-icon="logout"] svg,
[data-acorn-icon="box"] svg,
[data-acorn-icon="bell"] svg {
  fill: none !important;
}

/* Submenú items activos */
.menu > li > ul > li.active > a,
.menu > li > ul > li > a.active,
html[data-placement=vertical] .nav-container .menu-container .menu > li > ul > li.active > a,
html[data-placement=vertical] .nav-container .menu-container .menu > li > ul > li > a.active {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary) !important;
  border-radius: var(--border-radius-md, 8px) !important;
}

/* Submenu display control */
.menu > li > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Espacio entre el enlace activo y su submenú para que se vean las esquinas redondeadas */
.menu > li.active > a + ul,
.menu > li > a.active + ul {
  margin-top: 8px !important;
}

.menu > li > ul.show,
.menu > li.active > ul {
  max-height: 500px !important;
  overflow: visible !important;
}

/* Fix for template loading overlay */
.page-loading {
  display: none !important;
}

/* Ensure cards and content show */
.card {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Progress bar animation */
.progress-bar {
  transition: width 0.3s ease !important;
}

/* Responsive - mobile menu toggle */
@media (max-width: 991px) {
  html[data-placement=vertical] .nav-container {
    transform: translateX(-100%) !important;
  }

  html[data-placement=vertical] .nav-container.mobile-side-out {
    transform: translateX(0) !important;
  }
}

/* =============================================
   Additional Force Visibility Rules
   ============================================= */

/* Force all content to be visible */
#root * {
  visibility: visible;
}

/* Ensure proper spacing with sidebar */
html[data-placement=vertical] main {
  margin-left: 0 !important;
  padding-left: calc(var(--nav-size, 18rem) + 2rem) !important;
  padding-right: 2rem;
  padding-top: var(--main-spacing-vertical, 2rem);
  padding-bottom: var(--main-spacing-vertical, 2rem);
  transition: padding-left 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--background);
}

/* Cuando el menú está colapsado (unpinned), el contenido ocupa más espacio */
html[data-placement=vertical][data-behaviour=unpinned] main {
  padding-left: calc(var(--nav-size-slim, 4.5rem) + 2rem) !important;
}

/* BUG1 FIX: offset Bootstrap modals so they centre in the visible area (not behind sidebar) */
/* Desktop pinned */
html[data-placement=vertical][data-behaviour=pinned] .modal {
  padding-left: var(--nav-size, 18rem) !important;
}
/* Desktop unpinned (slim sidebar) */
html[data-placement=vertical][data-behaviour=unpinned] .modal {
  padding-left: var(--nav-size-slim, 4.5rem) !important;
}

/* MOBILE OVERRIDE — HUPOL FIX 2026-04-25
   En mobile el sidebar está oculto, no debe reservar padding. Las reglas de arriba
   tienen specificity (0,3,1) con !important; el override mobile tiene que igualar
   o superar esa specificity para ganar (otra forma: cascade order — las reglas
   abajo ganan ante misma specificity + !important). Por eso replicamos los
   selectores específicos en el @media. */
@media (max-width: 991.98px) {
  html[data-placement=vertical] main,
  html[data-placement=vertical][data-behaviour=pinned] main,
  html[data-placement=vertical][data-behaviour=unpinned] main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: calc(var(--nav-size-slim, 4rem) + 0.5rem) !important;
  }
  html[data-placement=vertical] .modal,
  html[data-placement=vertical][data-behaviour=pinned] .modal,
  html[data-placement=vertical][data-behaviour=unpinned] .modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Logo visibility */
.logo .img {
  width: 100px;
  height: 40px;
  display: block !important;
  visibility: visible !important;
}

/* User section */
.user-container {
  visibility: visible !important;
  opacity: 1 !important;
}

.user-container .name {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Avatar - transición suave de tamaño */
.user-container .profile,
.user-container .profile-photo-container {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Iconos del menú - transición suave de aparición */
.menu-icons {
  transition: opacity 0.4s ease 0.1s !important;
}

.menu-icons > li {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Cuando el menú está colapsado, los iconos se desvanecen */
html[data-behaviour=unpinned] .menu-icons > li {
  opacity: 0.7;
  transform: scale(0.9);
}

/* Cuando el menú está expandido, los iconos aparecen con efecto */
html[data-behaviour=pinned] .menu-icons > li {
  opacity: 1;
  transform: scale(1);
}

/* Efecto escalonado para cada icono */
html[data-behaviour=pinned] .menu-icons > li:nth-child(1) { transition-delay: 0.05s; }
html[data-behaviour=pinned] .menu-icons > li:nth-child(2) { transition-delay: 0.1s; }
html[data-behaviour=pinned] .menu-icons > li:nth-child(3) { transition-delay: 0.15s; }
html[data-behaviour=pinned] .menu-icons > li:nth-child(4) { transition-delay: 0.2s; }

/* Notification dot - color rojo */
.notification-dot {
  background-color: #dc3545 !important;
  width: 8px !important;
  height: 8px !important;
  top: 0 !important;
  right: 0 !important;
}

/* Dropdown de notificaciones - encima de todo */
.nav-container .dropdown-menu,
.nav-container .notification-dropdown,
.nav-container .user-menu {
  z-index: 9999 !important;
}

/* Mobile buttons */
.mobile-buttons-container {
  visibility: visible !important;
}

/* Page title */
.page-title-container {
  visibility: visible !important;
  opacity: 1 !important;
  margin-bottom: 1.5rem;
}

/* Small titles */
.small-title {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Row and columns */
.row {
  visibility: visible !important;
}

.col, [class*="col-"] {
  visibility: visible !important;
}

/* =============================================
   Fix Z-Index para cards con bg-opacity
   ============================================= */

/* Asegurar que el contenido de cards esté por encima del fondo */
.card .card-body {
  position: relative;
  z-index: 1;
}

/* Fix específico para cards con bg-opacity (estadísticas) */
.card[class*="bg-opacity"] .card-body,
.card.bg-primary .card-body,
.card.bg-success .card-body,
.card.bg-warning .card-body,
.card.bg-info .card-body,
.card.bg-danger .card-body {
  position: relative;
  z-index: 2;
}

/* Asegurar que textos y display estén visibles */
.card .display-5,
.card .display-4,
.card .display-3,
.card h5,
.card h4,
.card h3 {
  position: relative;
  z-index: 3;
}

/* Fix para iconos en cards con fondo coloreado */
.card .sw-6,
.card .sw-5,
.card [class*="sw-"] {
  position: relative;
  z-index: 2;
}

.card .sw-6 i,
.card .sw-6 svg,
.card .sw-5 i,
.card .sw-5 svg,
.card [class*="sw-"] i,
.card [class*="sw-"] svg {
  position: relative;
  z-index: 3;
}

/* =============================================
   Fix Z-Index para carrusel de categorías
   ============================================= */

/* Asegurar que todo el contenido del card esté por encima */
.card .card-body * {
  position: relative;
  z-index: 1;
}

/* Textos en cards - asegurar visibilidad */
.card .text-body,
.card .small,
.card .fw-medium {
  position: relative;
  z-index: 2;
}

/* Badges en cards - encima del fondo */
.card .badge,
.card [class*="badge"] {
  position: relative;
  z-index: 3;
}

/* =============================================
   BADGE TEXT FIX - Prevent text cutoff
   ============================================= */
.badge,
span.badge,
.badge[class*="bg-"],
.badge[class*="text-"],
span[class*="badge"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0.4em 0.6em 0.5em 0.6em !important;
  vertical-align: middle !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 1.5em !important;
  max-height: none !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Extra fix for very small font-size badges */
.badge[style*="font-size"],
span.badge[style*="font-size"] {
  padding: 0.5em 0.7em 0.6em 0.7em !important;
  line-height: 1 !important;
}

/* Fix específico para iconos con fondo coloreado (sw-5, sw-6) */
.card .d-inline-flex,
.card [class*="bg-"][class*="rounded"] {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

/* Asegurar que los iconos SVG estén visibles */
.card i[data-acorn-icon],
.card svg {
  position: relative;
  z-index: 3;
}

/* =============================================
   Menu Items - Siempre en una línea
   ============================================= */

/* Forzar que los enlaces del menú estén siempre en una línea */
.menu > li > a,
.menu > li > ul > li > a {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Labels del menú siempre en una línea, sin salto */
.menu > li > a .label,
.menu > li > ul > li > a .label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

/* Iconos del menú no deben encogerse y alineación correcta */
.menu > li > a .icon,
.menu > li > a i[data-acorn-icon],
.menu > li > a i[data-fuello-icon],
.menu > li > a svg {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  line-height: 1 !important;
}

/* =============================================
   Animaciones suaves del Sidebar
   ============================================= */

/* Transiciones suaves para TODOS los elementos del nav-container */
html[data-placement=vertical] .nav-container,
html[data-placement=horizontal] .nav-container {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Override de transiciones del sidebar para que sean más suaves */
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=hidden] .nav-container,
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transiciones suaves para el contenedor del menú */
html[data-placement=vertical] .nav-container .nav-content .menu-container,
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=hidden] .nav-container .nav-content .menu-container,
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container .nav-content .menu-container {
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transiciones suaves para los labels del menú - ocultarlos completamente al contraer */
html[data-placement=vertical][data-behaviour=unpinned]:not([data-menu-animate=show]) .nav-container .nav-content .menu-container .menu a:before,
html[data-placement=vertical][data-behaviour=unpinned]:not([data-menu-animate=show]) .nav-container .nav-content .menu-container .menu a .label {
  opacity: 0 !important;
  display: none !important;
}

/* Ocultar labels durante la animación de expansión - NO mostrarlos hasta que termine */
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container .nav-content .menu-container .menu a:before,
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container .nav-content .menu-container .menu a .label {
  display: inline-block !important;
  opacity: 0 !important;
  animation: fadeInLabels 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards !important;
}

/* Ocultar el nombre de usuario completamente al contraer */
html[data-placement=vertical][data-behaviour=unpinned]:not([data-menu-animate=show]) .nav-container .nav-content .user .name {
  opacity: 0 !important;
  display: none !important;
}

/* Keyframe para hacer aparecer los labels después de la animación */
@keyframes fadeInLabels {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=hidden] .nav-container .nav-content .logo a,
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container .nav-content .logo a {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=hidden] .nav-container .nav-content .user .profile,
html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container .nav-content .user .profile {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-placement=vertical][data-behaviour=unpinned][data-menu-animate=show] .nav-container .nav-content .user .name {
  display: block !important;
  opacity: 0 !important;
  animation: fadeInLabels 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards !important;
}

/* Transiciones suaves para el logo */
html[data-placement=horizontal] .nav-container .logo img,
html[data-placement=horizontal] .nav-container .logo .img,
html[data-placement=vertical] .nav-container .logo img,
html[data-placement=vertical] .nav-container .logo .img {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transiciones suaves para los enlaces del menú */
html[data-placement=horizontal] .nav-container .menu-container .menu li a,
html[data-placement=vertical] .nav-container .menu-container .menu li a {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease !important;
}

/* Transiciones suaves para el usuario */
html[data-placement=horizontal] .nav-container .user-container .user,
html[data-placement=vertical] .nav-container .user-container .user {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transiciones suaves para los iconos del menú */
html[data-placement=horizontal] .nav-container .menu-icons > li > a,
html[data-placement=vertical] .nav-container .menu-icons > li > a {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease !important;
}

/* Transición suave para el main cuando cambia el sidebar - consolidada arriba */

/* =============================================
   Hover de mensajes en Centro de Mensajes
   ============================================= */

/* Hover suave para los mensajes */
.list-group-item-action:hover {
  background-color: rgba(var(--primary-rgb), 0.08) !important;
  transition: background-color 0.2s ease !important;
}

/* Evitar que el hover afecte al mensaje seleccionado */
.list-group-item-action.active:hover {
  background-color: rgba(var(--primary-rgb), 0.15) !important;
}

/* Asegurar que los badges en mensajes tengan texto blanco visible */
.list-group-item .badge[class*="bg-"] {
  color: white !important;
}

.list-group-item .badge[class*="bg-"] i,
.list-group-item .badge[class*="bg-"] svg {
  color: white !important;
  fill: white !important;
}

/* Asegurar que los iconos en botones sean visibles */
.btn i[data-acorn-icon],
.btn svg {
  position: relative;
  z-index: 1;
}

/* Forzar visibilidad de iconos en botones de colores - TODOS LOS ESTADOS */
.btn-danger svg,
.btn-danger i,
.btn-secondary svg,
.btn-secondary i,
.btn-primary svg,
.btn-primary i {
  color: white !important;
  fill: white !important;
  stroke: white !important;
  opacity: 1 !important;
}

/* Mantener iconos visibles en estados hover, active y focus */
.btn-danger:hover svg,
.btn-danger:hover i,
.btn-danger:active svg,
.btn-danger:active i,
.btn-danger:focus svg,
.btn-danger:focus i,
.btn-secondary:hover svg,
.btn-secondary:hover i,
.btn-secondary:active svg,
.btn-secondary:active i,
.btn-secondary:focus svg,
.btn-secondary:focus i,
.btn-primary:hover svg,
.btn-primary:hover i,
.btn-primary:active svg,
.btn-primary:active i,
.btn-primary:focus svg,
.btn-primary:focus i {
  color: white !important;
  fill: white !important;
  stroke: white !important;
  opacity: 1 !important;
}

/* =============================================
   Responsive Width Utilities (Mobile-First)
   ============================================= */

/* Button full width on mobile, auto on sm+ */
@media (max-width: 575.98px) {
  .w-sm-auto {
    width: 100% !important;
  }
}

@media (min-width: 576px) {
  .w-sm-auto {
    width: auto !important;
  }
}