/* Compact mode overrides - Aplica cuando el body o html tienen la clase .modo-compacto */

html.modo-compacto,
body.modo-compacto {
  font-size: 90%; /* letra 10% más pequeña */
}

body.modo-compacto {
  /* Quitar gaps */
  --imperium-card-gap: 0px !important;

  /* Forzar esquinas cuadradas */
  --imperium-radius-surface-xs: 0 !important;
  --imperium-radius-surface-sm: 0 !important;
  --imperium-radius-surface-md: 0 !important;
  --imperium-radius-surface-lg: 0 !important;
  --imperium-radius-surface-xl: 0 !important;
  --imperium-radius-button: 0 !important;
  --imperium-radius-control: 0 !important;
  --imperium-radius-pill: 0 !important;
  --imperium-radius-table-xs: 0 !important;
}

/* Forzar sin radio en la mayoría de elementos para garantizar esquinas cuadradas */
body.modo-compacto * {
  border-radius: 0 !important;
}

/* Reducir alto de headers y paddings generales */
body.modo-compacto .imperium-card__header {
  padding: 0.35rem 0.5rem 0.35rem !important;
}

body.modo-compacto .navbar {
  gap: 0.35rem !important;
  padding: 0.25rem 0.5rem !important;
}

body.modo-compacto .header-profile-trigger,
body.modo-compacto .header-mobile-action-card {
  padding: 0.18rem 0.4rem !important;
}

/* Reducir paddings en cuerpos de card en general (mínimo) */
body.modo-compacto .imperium-card__body {
  padding: 0.35rem 0.5rem 0.35rem !important;
}

/* View list: tabla pegada al borde de la card */
body.modo-compacto .view-list-shell__card .imperium-card__body,
body.modo-compacto .view-list-shell__table-area,
body.modo-compacto .view-list-shell__table {
  padding: 0 !important;
  margin: 0 !important;
}

/* POS: reducir header y paddings */
body.modo-compacto .pos-mobile-topbar,
body.modo-compacto .pos-header-collapsed,
body.modo-compacto .pos-mobile-topbar__brand,
body.modo-compacto .pos-mobile-topbar__action {
  padding: 0.06rem !important;
  min-height: 1.8rem !important;
}

body.modo-compacto .pos-mobile-topbar__action,
body.modo-compacto .pos-mobile-topbar__brand {
  font-size: 0.85rem !important;
}

/* Elementos de lista / items: menos padding */
body.modo-compacto .imperium-card__item,
body.modo-compacto .view-list-embedded-create-row td,
body.modo-compacto .view-list-embedded-create-row__field {
  padding: 0.25rem 0.35rem !important;
}

/* Evitar sombras y efectos grandes para mantener densidad */
body.modo-compacto .imperium-card,
body.modo-compacto .header-mobile-action-card,
body.modo-compacto .header-profile-trigger {
  box-shadow: none !important;
}

/* Eliminar gap inferior en view-list y form-view para que las tarjetas lleguen al borde de pantalla */
body.modo-compacto .view-list-shell {
  padding-bottom: 0 !important;
}

/* Hacer que el área de contenido llene el alto disponible en escritorio */
@media (min-width: 769px) {
  body.modo-compacto .page-shell__content {
    height: 100% !important;
  }
}

/* POS: contenido de borde a borde. Los paddings laterales/inferiores del
   shell están fijos en rem (styles.css, base + media queries) y no colapsan
   con --imperium-card-gap, así que se anulan aquí. El safe-area de Android no
   depende de este padding (vive en la propia topbar del POS). */
body.modo-compacto #id-pos .pos-screen-shell__content {
  padding: 0 !important;
  gap: 0 !important;
}

/* POS: hacer que el sidebar lateral llene el alto completo sin gap */
body.modo-compacto .pos-screen-shell__content--with-main-menu {
  padding: 0 !important;
  gap: 0 !important;
}

body.modo-compacto .pos-screen-shell__main-menu-aside {
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* Mantener reglas concretas al final para evitar que otras hojas las sobreescriban */