/*
 * Listas dentro de una tarjeta. Sneat no trae esta medida.
 *
 * La tarjeta NUNCA crece con la lista: mide lo que cabe en la pantalla y la lista se desplaza adentro, con su
 * encabezado fijo. Así el menú, los filtros y lo que está a los lados (recibo, navegación) no se van de la vista.
 * La carga por tramos sigue funcionando: el renglón "Cargando más…" va DENTRO de la zona que se desplaza.
 */
.erp-scroll {
  max-height: calc(100vh - 22.5rem);
  overflow-y: auto;
}

.erp-scroll > .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bs-card-bg);
}

/*
 * Una tarjeta que mide lo mismo que la columna de al lado (ISH junto a «Así queda una reserva»): en pantalla grande la
 * lista se desplaza adentro y la tarjeta llega exactamente hasta donde llega el recibo. En el celular, como antes.
 * `.erp-fill-col` va en la columna; `.erp-fill` en el panel que se estira; `.erp-scroll-fill` en la lista.
 */
@media (min-width: 992px) {
  .erp-fill-col { display: flex; flex-direction: column; }
  .erp-fill-col > form,
  .erp-fill-col .tab-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .erp-fill-col .tab-content > .tab-pane.active.erp-fill { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .erp-fill > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .erp-fill > .card > .card-body { flex: 0 0 auto; }   /* Bootstrap le da flex-grow: aquí solo crece la lista */
  .erp-fill .erp-scroll-fill { flex: 1 1 0; min-height: 18rem; max-height: none; }
}

/* Editor de texto (Quill de Sneat) en español: su lista de títulos viene en inglés ("Heading 2", "Normal"). Con `body` delante gana a quill.css, que carga después */
body .ql-snow .ql-picker.ql-header .ql-picker-label::before,
body .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Texto normal'; }
body .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Título'; }
body .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Subtítulo'; }
body .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: 'Título chico'; }
body .ql-snow .ql-picker.ql-header { width: 8.5rem; }

/*
 * Logo del menú: ARPAN en letras con el menú extendido y la pirámide con el menú compacto (flecha junto al logo).
 * Sneat ya trae `.app-brand-img` / `.app-brand-img-collapsed`, pero su `.app-brand-logo img { display: block }` le
 * gana a la regla que oculta la pirámide: aquí se pone con la misma especificidad que eso, más una clase.
 */
.app-brand-logo .app-brand-img-collapsed { display: none; }
@media (min-width: 1200px) {
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-logo .app-brand-img-collapsed { display: block; }
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-logo .app-brand-img { display: none; }
}