/* --- Logo --- */
.app-navbar-logo {
    height: 120px;
    width: auto;               /* Keep width automatic to preserve the image aspect ratio */
    max-height: none;
    object-fit: contain;
}
.app-navbar-logo-link {
    flex-grow: 0;              /* 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 */
    align-items: center;   /* centra verticalmente */
}
/* Eliminamos borde, outline y sombras del toggler */
.app-navbar-toggler,
.app-navbar-toggler:focus,
.app-navbar-toggler:active,
.app-navbar-toggler:focus-visible {
    box-shadow: none !important;
    border: none !important;
}
/* --- Navbar --- */
nav.navbar.app-navbar-custom,
.app-navbar-custom {
    background-color: #ffffff !important;
    color: #000000 !important;
    fill: #000000 !important; /* Para íconos SVG */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !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 */
    margin-left: auto !important;
}
/* --- 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;
    }
    .app-navbar-toggler {
        display: block !important;
    }
}