/* --- Logo --- */
.app-navbar-logo {
    height: 150px;
    width: auto;               /* Keep width automatic to preserve the image aspect ratio */
    max-height: 80px;
    object-fit: contain;
}
.app-navbar-logo-link {
    flex-grow: 1;              /* Allow this container to expand and take available horizontal space */
    display: flex;             /* Use flexbox to position the logo inside this container */
    text-decoration: none; /* remove underline */
}
/* --- Navbar --- */
nav.navbar.app-navbar-custom,
.app-navbar-custom {
    background-color: #000000 !important;
    color: #ffffff !important;
    fill: #ffffff !important; /* Para íconos SVG */
    box-shadow: 0 2px 4px rgba(255,255,255,0.04) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
/* --- Navbar container --- */
.app-navbar-custom .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}
/* --- Offcanvas menu --- */
.app-offcanvas-menu {
  width: clamp(10rem, 25vw, 14rem) !important; /*Mínimo: 10rem (~160px), Ideal: 25vw (25% del ancho de la ventana), Máximo: 14rem (~224px)*/
}
/* --- Page container --- */
.app-page-container {
  flex: 1 1 auto;
  overflow: hidden;
  height: 100%;
}
/* --- Global layout container --- */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
/* --- Language button group (flag buttons) --- */
.app-buttongroup-flags {
    display: flex;             /* Lay out flag buttons horizontally using flexbox */
    align-items: center;       /* Vertically center the flag buttons */
    gap: 0.5rem;               /* Add horizontal spacing between individual flag buttons */
    background: transparent;   /* Ensure the group has no background color */
    border: none;              /* Remove any border around the button group container */
}
/* --- Individual flag buttons --- */
.app-buttongroup-flags .btn {
    background: transparent !important; /* Force buttons to have transparent background, overriding theme */
    border: none !important;            /* Force removal of button borders coming from Bootstrap */
    padding: 0.25rem;                   /* Tight padding so flag images appear compact within the buttons */
    box-shadow: none !important;        /* Remove any bootstrap shadow or focus shadow on the button */
}
/* --- Hover effect for flag buttons --- */
.app-buttongroup-flags .btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight translucent white background on hover for feedback */
}
/* --- Responsive --- */
@media (max-width: 992px) {
  /* Adjust navbar spacing for small screens */
  .app-navbar-custom .app-navbar-toggler {
    margin-left: auto;
    order: 2;
  }
}

/* -----------------------------
   FORZAR NAVBAR Y OFFCANVAS OSCUROS
   ----------------------------- */
/* Botones/links dentro del navbar */
.app-navbar-custom .nav-link {
  color: #f5f5f5 !important;
  background: transparent !important;
}
/* Forzar el icono del toggler a blanco puro */
.navbar-dark .navbar-toggler-icon {
  background-image: url("/assets/icons/toggler-white.png") !important;
}

/*!* Ícono del toggler (menú en móvil) *!*/
/*.navbar.app-navbar-custom .navbar-toggler {*/
/*  border-color: rgba(255,255,255,0.5) !important;*/
/*}*/
/*.navbar.app-navbar-custom .navbar-toggler-icon {*/
/*  background-image: none !important;*/
/*  position: relative;*/
/*}*/
/*.navbar.app-navbar-custom .navbar-toggler-icon::before,*/
/*.navbar.app-navbar-custom .navbar-toggler-icon::after {*/
/*  content: "";*/
/*  display: block;*/
/*  width: 24px;*/
/*  height: 2px;*/
/*  background-color: #ffffff;*/
/*  margin: 6px 0;*/
/*}*/

/*!* Offcanvas (DBC crea .offcanvas) *!*/
/*.offcanvas.app-offcanvas-menu,*/
/*.app-offcanvas-menu.offcanvas,*/
/*.app-offcanvas-menu {*/
/*  background-color: #000000 !important;*/
/*  color: #ffffff !important;*/
/*  border-right: 1px solid rgba(255,255,255,0.06) !important;*/
/*}*/

/*!* Contenido del offcanvas *!*/
/*.offcanvas.app-offcanvas-menu .offcanvas-body,*/
/*.app-offcanvas-menu .offcanvas-body,*/
/*.app-offcanvas-menu .nav {*/
/*  color: #ffffff !important;*/
/*}*/