/* =====================================================
   GLOBAL RESPONSIVE LAYER
   Safe overrides for viewport, drawers and dialogs.
===================================================== */

body:not(.login-page) {
  min-width: 320px;
}

body:not(.login-page) .layout,
body:not(.login-page) .main-wrapper,
body:not(.login-page) .content,
body:not(.login-page) .sidebar {
  min-width: 0;
}

/* Los modulos fijados del sidebar (icono + nombre) pierden su layout flex
   porque la regla generica ".sidebar-menu a { display: block }" (clase +
   elemento) es mas especifica que ".sidebar-module-card-link { display:
   flex }" (una sola clase) y le gana en cascada. Sin flex, el nombre no
   puede truncar con ellipsis (eso requiere ser un flex-item que se
   encoja) y cuando el texto es largo el navegador lo manda entero a una
   segunda linea, dejando el icono solo arriba. Se restaura flex aqui con
   especificidad suficiente para ganarle a la regla generica. */
body:not(.login-page) .sidebar-module-card-link {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

body:not(.login-page) .sidebar-module-card-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.login-page) .sidebar-module-card-icon {
  flex: 0 0 auto;
}

@supports (height: 100dvh) {
  body:not(.login-page) .layout {
    height: calc(100dvh - var(--vc-topbar-height));
  }

  body:not(.login-page) .main-wrapper {
    min-height: calc(100dvh - var(--vc-topbar-height));
  }

  body:not(.login-page) .sidebar {
    height: calc(100dvh - var(--vc-topbar-height));
    max-height: calc(100dvh - var(--vc-topbar-height));
  }
}

body:not(.login-page) .content {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body:not(.login-page).sidebar-desktop-collapsed .fv-trans-shell {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:not(.login-page) .topbar-actions,
body:not(.login-page) .topbar-control-summary,
body:not(.login-page) .topbar-notifications,
body:not(.login-page) .topbar-user {
  min-width: 0;
}

@media (max-width: 1199px) {
  body:not(.login-page) .topbar-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 1180px) {
  body:not(.login-page) .layout {
    min-height: calc(100vh - var(--vc-topbar-height));
    height: auto;
  }

  body:not(.login-page) .main-wrapper {
    min-height: calc(100vh - var(--vc-topbar-height));
  }
}

body:not(.login-page) .v-overlay__content > .v-card,
body:not(.login-page) .v-dialog > .v-overlay__content > .v-card {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body:not(.login-page) .v-overlay__content > .v-card .v-card-text,
body:not(.login-page) .v-overlay__content > .v-card .v-card__text,
body:not(.login-page) .v-overlay__content > .v-card .vc-vue-dialog-card__body,
body:not(.login-page) .v-overlay__content > .v-card .vc-persona-dialog__body,
body:not(.login-page) .v-overlay__content > .v-card [class*="__body"] {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body:not(.login-page) .v-overlay__content > .v-card .v-card-actions,
body:not(.login-page) .v-overlay__content > .v-card [class*="__actions"] {
  flex-shrink: 0;
}

body:not(.login-page) .vc-vue-dialog-card,
body:not(.login-page) .vc-persona-dialog,
body:not(.login-page) .proforma-filter-dialog,
body:not(.login-page) .cxc-dialog-card,
body:not(.login-page) .cxp-dialog-card,
body:not(.login-page) .ec-dialog-card,
body:not(.login-page) .dc-dialog-card,
body:not(.login-page) .guia-dialog-card,
body:not(.login-page) .parametros-dialog-card,
body:not(.login-page) .maintenance-global-dialog-card {
  max-width: calc(100vw - 24px);
}

@media (max-width: 768px) {
  body:not(.login-page) .topbar-actions {
    gap: 8px;
  }

  body:not(.login-page) .topbar-control-summary {
    justify-content: flex-start;
  }

  body:not(.login-page) .vc-vue-dialog-card__titlebar,
  body:not(.login-page) .vc-persona-dialog__titlebar,
  body:not(.login-page) .proforma-filter-dialog__titlebar,
  body:not(.login-page) .cxc-dialog-card__title,
  body:not(.login-page) .cxp-dialog-card__title,
  body:not(.login-page) .ec-dialog-card__title,
  body:not(.login-page) .dc-dialog-card__title,
  body:not(.login-page) .guia-dialog-card__titlebar {
    padding-right: 56px;
  }

  body:not(.login-page) .vc-vue-modal-close-btn {
    right: 14px;
  }
}

@media (max-width: 480px) {
  body:not(.login-page) .vc-vue-dialog-card,
  body:not(.login-page) .vc-persona-dialog,
  body:not(.login-page) .proforma-filter-dialog,
  body:not(.login-page) .cxc-dialog-card,
  body:not(.login-page) .cxp-dialog-card,
  body:not(.login-page) .ec-dialog-card,
  body:not(.login-page) .dc-dialog-card,
  body:not(.login-page) .guia-dialog-card,
  body:not(.login-page) .parametros-dialog-card,
  body:not(.login-page) .maintenance-global-dialog-card {
    border-radius: 18px;
  }

  body:not(.login-page) .v-overlay__content > .v-card .v-card-text,
  body:not(.login-page) .v-overlay__content > .v-card .vc-vue-dialog-card__body,
  body:not(.login-page) .v-overlay__content > .v-card .vc-persona-dialog__body,
  body:not(.login-page) .v-overlay__content > .v-card [class*="__body"] {
    padding: 14px 12px 12px;
  }

  body:not(.login-page) .v-overlay__content > .v-card .v-card-actions,
  body:not(.login-page) .v-overlay__content > .v-card [class*="__actions"] {
    padding-inline: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 1180px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    position: static;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-y: auto;
    touch-action: auto;
  }

  body:not(.login-page) {
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
  }

  body.sidebar-mobile-open {
    overflow: auto !important;
  }

  body:not(.login-page) .layout {
    display: flex;
    height: calc(100dvh - var(--vc-topbar-height));
    min-height: calc(100dvh - var(--vc-topbar-height));
    overflow: hidden !important;
  }

  body:not(.login-page) .main-wrapper {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:not(.login-page) .content {
    display: block !important;
    flex: 1 1 auto !important;
    height: calc(100dvh - var(--vc-topbar-height)) !important;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  #dashboard-vue-app,
  #dashboard-vue-app .v-application,
  #dashboard-vue-app .v-application__wrap {
    display: contents;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  #dashboard-vue-app .vc-dashboard-page {
    min-height: calc(100dvh - var(--vc-topbar-height));
    width: 100%;
    overflow: visible;
  }

  /* El menu movil se ancla debajo del topbar (var(--vc-topbar-height)), pero
     ese alto crece mucho en horizontal porque el topbar apila varias filas
     (marca, selector de sistema, pills de estado, usuario). En pantallas
     bajas (telefono/tablet en horizontal) eso deja casi sin alto util al
     drawer. Para que el menu siempre sea navegable, lo hacemos pantalla
     completa y por encima del topbar en vez de depender de su alto. */
  body:not(.login-page) .sidebar {
    top: 0;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1200;
  }

  body:not(.login-page) .sidebar-mobile-head {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  body:not(.login-page) .sidebar-backdrop {
    inset: 0;
    z-index: 1190;
  }
}

/* Notificaciones en movil: la campana queda centrada y estrecha, asi que el menu anclado a su borde
   derecho se salia por la izquierda. Se ancla a los bordes de la pantalla; con top:auto conserva su
   posicion vertical natural (justo debajo de la campana). */
@media (max-width: 768px) {
  body:not(.login-page) .topbar-notifications-menu {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    margin-top: 10px;
    max-height: 70vh;
    overflow-y: auto;
    box-sizing: border-box;
  }
}