/*
 * Adaptaciones responsive transversales de Contaverso.
 *
 * Este archivo vive separado del contrato de tokens (`variables.css`) para
 * conservar allí únicamente la identidad visual global. Las reglas siguientes
 * cambian composición y distribución, no colores ni lógica de negocio.
 */

@media (min-width: 992px) {
  #layoutSidenav_content > #content > .container,
  #layoutSidenav_content .legacy-header-container {
    transition: max-width .15s ease-in-out, padding .15s ease-in-out;
  }

  /* SB Admin amplía el área de contenido 225px al ocultar el sidebar, pero el
     `.container` de Bootstrap conservaba su max-width. Se elimina ese límite
     solo durante el estado contraído para aprovechar el espacio liberado. */
  .sb-sidenav-toggled #layoutSidenav_content > #content > .container,
  .sb-sidenav-toggled #layoutSidenav_content .legacy-header-container {
    width: 100%;
    max-width: calc(100vw - 1.5rem);
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}

/* La topbar móvil conserva únicamente los accesos de mayor frecuencia. */
.topbar-mobile-only {
  display: none;
}

.dropdown-toggle-no-caret::after {
  display: none;
}

@media (max-width: 991.98px) {
  .sb-topnav .navbar-brand {
    width: auto;
    margin-right: 0.25rem;
    padding-left: 0.5rem !important;
  }

  .sb-topnav .navbar-brand img {
    width: 112px !important;
  }

  .sb-topnav #sidebarToggle {
    margin-right: 0 !important;
    padding: 0.5rem;
  }

  .sb-topnav .topbar-desktop-only {
    display: none !important;
  }

  .sb-topnav .topbar-mobile-only {
    display: flex;
  }

  .sb-topnav .topbar-mobile-actions {
    gap: 0.15rem;
  }

  .sb-topnav .topbar-mobile-action {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--contaverso-primary);
    border: 0;
    background: transparent;
    border-radius: var(--contaverso-border-radius);
  }

  .sb-topnav .topbar-mobile-action:hover,
  .sb-topnav .topbar-mobile-action:focus-visible,
  .sb-topnav .topbar-mobile-action[aria-expanded="true"] {
    color: var(--contaverso-bg-white);
    background: var(--contaverso-primary);
    outline: none;
  }

  .sb-topnav .topbar-mobile-action i,
  .sb-topnav .topbar-mobile-action svg {
    color: currentColor !important;
  }

  .sb-topnav .topbar-mobile-search {
    width: min(20rem, calc(100vw - 1rem));
    padding: 0.6rem;
  }

  .sb-topnav .topbar-mobile-menu {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

@media (max-width: 379.98px) {
  .sb-topnav .navbar-brand img {
    width: 100px !important;
  }

  .sb-topnav .topbar-mobile-action {
    width: 2.25rem;
  }
}

/*
 * Primitivas móviles de adopción explícita. No se aplican a tablas ni a
 * formularios sin estas clases: cada vista conserva la decisión de qué dato o
 * acción debe permanecer visible en pantalla pequeña.
 */
.cv-mobile-table-cell,
.cv-mobile-actions,
.cv-mobile-meta {
  display: none;
}

.cv-mobile-action-trigger {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.cv-mobile-action-menu :is(.dropdown-toggle, .dropdown-item):focus-visible {
  outline: 2px solid var(--contaverso-primary);
  outline-offset: 2px;
}

/* Solo se activa por `responsive.js` mientras un menú opt-in está abierto. */
.cv-mobile-dropdown-open {
  overflow: visible !important;
}

@media (max-width: 768px) {
  .cv-desktop-only {
    display: none !important;
  }

  .cv-mobile-table-cell {
    display: table-cell;
  }

  .cv-mobile-actions {
    display: table-cell;
    width: 3.25rem;
    text-align: center;
  }

  .cv-mobile-meta {
    display: block;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--contaverso-text-secondary);
    overflow-wrap: anywhere;
  }

  .cv-mobile-header-stack {
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
  }

  .cv-mobile-header-stack > .hero-right,
  .cv-mobile-header-stack > .d-flex {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* El menú público expandido presenta las acciones de cuenta como destinos
   directos y suficientemente grandes para interacción táctil. */
@media (max-width: 991.98px) {
  .public-navbar-action {
    margin-top: .5rem;
  }

  .public-navbar-action:nth-last-child(2) {
    padding-top: .65rem;
    border-top: var(--contaverso-border);
  }

  .public-navbar-action .btn {
    width: 100%;
  }
}