/* ─── Modern UI Overrides ─────────────────────────────────
   Layered on top of bootstrap.min.css to give the app a clean, contemporary look.
────────────────────────────────────────────────────────── */

/* ─── Page Layout ─────────────────────────────────────── */

.page-wrapper {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--page-gutter-y) var(--page-gutter-x);
}

.page-header {
  background: var(--surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: var(--space-section);
  box-shadow: var(--shadow-subtle);
}

.page-header h1 {
  font-size: var(--font-heading-page);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.3px;
  margin: 0 0 2px;
  padding: 0;
  border: none;
}

.page-header .page-subtitle {
  font-size: var(--font-md);
  color: var(--text-secondary);
  margin: 0;
}

/* ─── Toolbar (filters, date pickers) ─────────────────── */

.page-toolbar {
  background: var(--surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: var(--space-section);
  box-shadow: var(--shadow-subtle);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.page-toolbar .toolbar-group {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

/* `.date-range__label` es el label propio de `app-date-range-picker` (no vive en un
   `app-toolbar-group`): sin sumarlo acá quedaba en minúscula y a otra altura que el resto de la fila. */
.page-toolbar .toolbar-group label,
.page-toolbar .date-range__label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.page-toolbar .toolbar-spacer {
  flex: 1;
}

/* ─── Convención de orden de filtros (2026-08-11) ─────
   Pedido explícito del usuario, para TODA la app: en cualquier barra de filtros va primero lo
   "lógico" (selects, búsquedas, benchmarks) junto con los botones de acción que pertenecen a
   esos filtros, y todo lo temporal se va a la derecha -- primero "Period" (los presets) y
   después el rango de fechas o el date picker suelto.

   Este contenedor es el que empuja el bloque temporal a la derecha; el ORDEN interno (Period
   antes que las fechas) lo define el markup de cada pantalla. Los dashboards no lo usan: tienen
   el mismo mecanismo propio en `.filter-bar__right` de `app-filter-bar`, que ya venía con esta
   convención desde antes.

   Clase NUEVA y aditiva: no pisa `.page-toolbar` ni ninguna regla existente, y funciona igual
   dentro de un `.page-toolbar` que dentro de un div flex suelto (las toolbars de Órdenes). */
.toolbar-dates {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
}

.page-toolbar .toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* ─── Tab bar (standalone) ────────────────────────────── */

.page-tab-bar {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin-bottom: var(--space-section);
  box-shadow: var(--shadow-subtle);
}

.page-tab-item {
  flex: 1;
  padding: 10px 0;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-tab-item:hover {
  color: var(--brand-blue);
  background: var(--surface-muted);
}

.page-tab-item.active {
  color: var(--text-on-brand);
  background: var(--gradient-brand);
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}

/* ─── Content area ────────────────────────────────────── */

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.content-row {
  display: flex;
  gap: var(--space-section);
  flex-wrap: wrap;
}

.content-row > * {
  flex: 1;
  min-width: 280px;
}

/* ─── Typography ──────────────────────────────────────── */

h1, .heading-title h1 {
  font-size: var(--font-h1);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.3px;
  margin: 18px 0 12px;
  padding: 0;
  border: none;
}

h3 {
  font-size: var(--font-h3);
  font-weight: 600;
  color: var(--text-strong);
  margin: 12px 0 8px;
}

h4 {
  font-size: var(--font-h4);
  font-weight: 600;
  color: var(--text-body);
}

.heading-title {
  border: none;
  margin-bottom: 8px;
}

/* ─── Cards / Panels ─────────────────────────────────── */

.radius.shadow.bgBlanco,
.radius.shadow.pad0.bgBlanco,
.col-md-12.radius.shadow.pad0.bgBlanco,
.col-md-12.col-sm-12.col-xs-12.radius.shadow.pad0.bgBlanco {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--card-border-color);
  overflow: hidden;
  margin-bottom: var(--space-section);
  background: var(--surface);
}

.radius.shadow.bgBlanco {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--card-border-color);
}

/* Card headers */
.heading-table.bgGris3 {
  background: var(--bz-color-white) !important;
  border-bottom: 1px solid var(--bz-color-complementary-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 12px 16px;
  height: auto !important;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.heading-table.bgGris3 .title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--bz-color-primary);
  letter-spacing: normal;
}

/* Las plantillas siguen mandando `.blanco` (texto blanco, pensado para el header navy
   anterior) -- se pisa acá en vez de tocar los 5 templates que la usan. */
.heading-table.bgGris3.blanco,
.heading-table.bgGris3.blanco .title {
  color: var(--bz-color-primary) !important;
}

/* ─── Top N / threshold button bar inside cards ──────── */

.card-controls {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.card-controls .card-controls-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 4px;
}

/* ─── Tabs (legacy .nav-tabs fallback) ────────────────── */

.nav-tabs {
  border-bottom: 2px solid var(--card-border-color);
  margin-bottom: 20px !important;
}

.nav-tabs > li {
  margin-bottom: -2px;
}

.nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-secondary);
  font-size: var(--font-base);
  font-weight: 500;
  padding: 10px 18px;
  transition: color 0.2s, border-color 0.2s;
  background: transparent !important;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: transparent !important;
  color: var(--brand-blue);
  border-bottom-color: var(--border-tab) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--brand-blue) !important;
  font-weight: 600;
  border: none !important;
  border-bottom: 2px solid var(--brand-blue) !important;
  background: transparent !important;
}

/* ─── Form Controls ───────────────────────────────────── */

.form-control {
  height: 38px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text-strong);
  font-size: var(--font-base);
  padding: 6px 12px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: var(--focus-ring);
  outline: none;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

input[type="date"].form-control {
  cursor: pointer;
}

/* Legacy filter labels */
.div-filters p {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* ─── Buttons ─────────────────────────────────────────── */

.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--font-md);
  padding: 7px 16px;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--gradient-brand-button);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand-sm);
  border: 1px solid transparent;
  height: 36px;
  margin-top: 0;
  font-family: inherit;
  text-transform: none;
  line-height: 1;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--gradient-brand-focus);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand-lg);
}

.btn-default {
  background: var(--surface-muted);
  color: var(--text-body);
  border: 1px solid var(--border-input);
  height: 36px;
  line-height: 1;
}

.btn-default:hover {
  background: var(--surface-pressed);
  color: var(--text-body);
}

.btn-xs {
  padding: 4px 10px;
  font-size: var(--font-sm);
  border-radius: var(--radius-sm);
  height: auto;
  line-height: 1.4;
}

.btn-sm.balanz-button {
  background: var(--surface-muted);
  color: var(--brand-blue);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  transition: all 0.2s;
}

.btn-sm.balanz-button:hover {
  background: var(--brand-blue);
  color: var(--text-on-brand);
  border-color: var(--brand-blue);
}

/* ─── Tables ──────────────────────────────────────────── */

/* **UN SOLO LOOK DE TABLA PARA TODA LA APP** (2026-10-01, pedido explícito: Reportes, Compliance,
   Cuentas, Órdenes, drilldowns, etc. con la misma estética). Todo vive en este bloque; las pantallas
   sólo ajustan padding, anchos, `position: sticky` o el inset de su contenedor -- **no re-estilar
   header, filas, bordes ni hover por pantalla**.

   - Header: se distingue por tipografía, no por color (11px/700 mayúscula, gris azulado, fondo
     casi blanco). `.dashboard-table th` (`_rank-card.scss`) usa los mismos valores.
   - Cuerpo: sin zebra; separador de fila + grilla vertical sutil (pedida primero para los
     drilldowns, ahora en todas) y hover suave. El tinte por status que algunas pantallas ponen
     inline en el `<tr>` (Órdenes, Compliance) gana por ser inline.
   - Marco: la tabla lleva su propio borde y radio, como una sub-card. Las secciones que la tenían a
     sangre le dan aire con su contenedor (ver `_reports-card.scss` y `accounts-list.component.scss`).
     Excepciones: `.dashboard-table` (la card del dashboard ya es el marco) y las tablas clave/valor
     del detalle de cuenta (`.table-kv`).
   - Bootstrap 5.3 pinta zebra y hover con un `box-shadow: inset 0 0 0 9999px` en cada celda
     (`--bs-table-striped-bg` / `--bs-table-hover-bg`), así que `table-striped` y `table-hover`
     daban otro look aunque nuestros estilos fueran iguales. Se neutralizan acá: esas clases ya no
     cambian nada y se pueden dejar en los templates. */

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
  --bs-table-active-bg: transparent;
  margin-bottom: 0;
  width: 100%;
  table-layout: auto;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table > :not(caption) > * > * {
  box-shadow: none;
}

.table > thead > tr > th,
.table > tbody > tr > td {
  padding: 13px 20px;
  vertical-align: middle;
  border-right: none;
  font-size: var(--font-md);
}

.table > thead > tr > th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: none;
  border-bottom: 1px solid var(--divider-color);
}

.table > tbody > tr > td {
  color: var(--text-body);
  background-color: transparent;
  border-top: none;
  border-bottom: 1px solid var(--border-subtle);
}

/* Grilla vertical sutil. */
.table:not(.table-kv) > thead > tr > th:not(:last-child) {
  border-right: 1px solid var(--divider-color);
}

.table:not(.table-kv) > tbody > tr > td:not(:last-child) {
  border-right: 1px solid var(--border-subtle);
}

.table > tbody > tr:hover {
  background-color: var(--surface-hover);
}

/* Marco. Con `border-collapse: separate` el radio se resuelve en las celdas de las esquinas (sin
   `overflow` en la tabla: no cortamos sticky ni menús). La última fila no lleva separador: lo
   cierra el borde del marco. */
.table:not(.dashboard-table):not(.table-kv) {
  border: 1px solid var(--divider-color);
  border-radius: var(--radius-md);
}

.table:not(.dashboard-table):not(.table-kv) > thead > tr:first-child > th:first-child {
  border-top-left-radius: 7px;
}

.table:not(.dashboard-table):not(.table-kv) > thead > tr:first-child > th:last-child {
  border-top-right-radius: 7px;
}

.table:not(.table-kv) > tbody > tr:last-child > td {
  border-bottom: none;
}

.table:not(.dashboard-table):not(.table-kv) > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 7px;
}

.table:not(.dashboard-table):not(.table-kv) > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 7px;
}

/* Tabla DENTRO de una card (2026-10-05): la card ya es el marco, así que la tabla no lleva el
   suyo ni la grilla vertical. Antes quedaba una caja dentro de otra caja (dos bordes de grises
   distintos con radios distintos y un margen chico entre ambos) más una línea por cada columna.
   Quedan el encabezado en banda y los separadores horizontales. Las tablas sueltas (modales, sin
   card) conservan el marco. Selector con más especificidad que las reglas de arriba, no `!important`. */
:is(.reports-border, .accounts-card, .operar-section, .account-card, .marketplace-browse__body) .table:not(.table-kv):not(.dashboard-table) {
  border: none;
}

:is(.reports-border, .accounts-card, .operar-section, .account-card, .marketplace-browse__body) .table:not(.table-kv):not(.dashboard-table) > thead > tr > th:not(:last-child),
:is(.reports-border, .accounts-card, .operar-section, .account-card, .marketplace-browse__body) .table:not(.table-kv):not(.dashboard-table) > tbody > tr > td:not(:last-child),
:is(.reports-border, .accounts-card, .operar-section, .account-card, .marketplace-browse__body) .table:not(.table-kv):not(.dashboard-table) > tfoot > tr > td:not(:last-child) {
  border-right: none;
}

/* Fila de totales (`<tfoot>`, 2026-10-01; primer uso: drilldown de Calendario de pagos). Mismo
   fondo que el header para que cierre la tabla como él la abre, texto en navy y semibold, y una
   línea arriba un poco más marcada que el separador de filas. Con `<tfoot>` la última fila del
   cuerpo vuelve a llevar separador y las esquinas redondeadas del marco pasan al pie. */
.table > tfoot > tr > td {
  padding: 13px 20px;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--bz-color-primary);
  background: var(--surface-subtle);
  border-top: 1px solid var(--divider-color);
  border-bottom: none;
  font-variant-numeric: tabular-nums;
}

.table:not(.table-kv) > tfoot > tr > td:not(:last-child) {
  border-right: 1px solid var(--divider-color);
}

/* `!important`: las reglas del marco que esto revierte (`tr:last-child` sin separador y con radio)
   tienen más especificidad por los `:not()`. */
.table:has(> tfoot) > tbody > tr:last-child > td {
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
}

.table:not(.dashboard-table):not(.table-kv) > tfoot > tr:last-child > td:first-child {
  border-bottom-left-radius: 7px;
}

.table:not(.dashboard-table):not(.table-kv) > tfoot > tr:last-child > td:last-child {
  border-bottom-right-radius: 7px;
}

/* El título no es texto suelto dentro del `th` cuando la tabla es `bz-dynamic-table` (Reportes):
   el DS lo mete en un `<p class="mb-0">`, host además de `bzOrderBy` si la columna ordena. */
.table > thead > tr > th p,
.table > thead > tr > th p * {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.table > thead > tr > th p {
  white-space: nowrap;
}

/* Variante compacta: menos padding horizontal y fuente más chica, para tablas
   con muchas columnas (p. ej. órdenes Fixed Income) y reducir el scroll lateral. */
.table-compact > thead > tr > th,
.table-compact > tbody > tr > td {
  padding: 5px 6px;
  font-size: var(--font-xs);
}

/* Table overflow */
.table-responsive {
  overflow-x: auto;
}

/* ─── Títulos de card en navy ─────────────────────────── */

/* Desde 2026-10-01 la franja de título de las cards de gráfico y de tabla (`.chart-card__title`,
   `.rank-card__title`, `.portfolio-evolution__card-title`) va en navy #223675 con texto blanco. Los
   controles que se proyectan en esa franja estaban pensados para fondo blanco (toggles "light" con
   texto gris y seleccionado navy, flechas SVG navy, labels y KPIs grises) y desaparecían. Se adaptan
   todos acá, en un solo lugar, en vez de en cada uno de sus ~8 componentes. `!important` porque las
   reglas de origen están scopeadas por componente (atributo `_ngcontent` + clases) y algunas del DS
   ya lo traen. Los toggles de threshold de las tablas de variación conservan su verde/rojo
   (`variation-tables.component.scss`, con más especificidad). */
:is(.chart-card__title, .rank-card__title, .account-card__title) .bz-btn-group-v2 {
  background: transparent !important;
}

:is(.chart-card__title, .rank-card__title, .account-card__title) .button-date-v2 {
  color: var(--text-on-brand) !important;
  border: 1px solid var(--on-brand-border) !important;
  background: transparent !important;
}

:is(.chart-card__title, .rank-card__title, .account-card__title) .button-selected-v2 {
  background: var(--surface) !important;
  color: var(--bz-color-primary) !important;
  border-color: var(--text-on-brand) !important;
}

/* Textos secundarios de la franja (KPIs, label "Top", resumen del mes). */
:is(.chart-card__title, .rank-card__title) :is(.top-instruments__kpi, .top-instruments__kpi-value,
  .dashboard-calendario__chart-sub, .comisiones__topn-label, .top-account-table__topn-label,
  .dashboard-subsection__label, .variation-table__threshold-label) {
  color: var(--on-brand-text-muted) !important;
}

:is(.chart-card__title, .rank-card__title) .top-instruments__kpi-value {
  color: var(--text-on-brand) !important;
}

/* Variación del AUM intradiario: verde/rojo más claros para leerse sobre navy. */
.chart-card__title .intradiario__aum-delta {
  color: var(--on-brand-positive) !important;
}

.chart-card__title .intradiario__aum-delta--down {
  color: var(--on-brand-negative) !important;
}

/* Nav de mes del calendario: caja con borde claro y flechas SVG (navy) pasadas a blanco. */
.rank-card__title .dashboard-calendario__month-nav {
  background: transparent !important;
  border-color: var(--on-brand-border) !important;
}

.rank-card__title .dashboard-calendario__month-label {
  color: var(--text-on-brand) !important;
  border-color: var(--on-brand-border) !important;
}

.rank-card__title .dashboard-calendario__arrow img {
  filter: brightness(0) invert(1);
}

.rank-card__title .dashboard-calendario__arrow:hover {
  background: var(--on-brand-hover) !important;
}

/* ─── Alerts ──────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-lg);
  border: none;
  font-size: var(--font-md);
  padding: 12px 18px;
}

.alert-info {
  background: var(--surface-tint);
  color: var(--brand-blue);
}

.alert-danger {
  background: var(--danger-surface);
  color: var(--danger);
}

/* ─── Account search input ────────────────────────────── */

.input-group .input-group-addon {
  background: var(--surface-subtle);
  border: 1px solid var(--border-input);
  border-right: none;
  border-radius: var(--radius-md) 0 0 8px;
  color: var(--text-secondary);
}

.input-group .form-control {
  border-radius: 0 8px 8px 0;
}

/* ─── Section spacing ─────────────────────────────────── */

.cuenta-tabla {
  margin-bottom: 0;
}

.cuenta {
  padding-top: 0;
}

/* ─── Scrollbar ───────────────────────────────────────── */

.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--surface-muted);
  border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* ─── Footer ──────────────────────────────────────────── */

.small {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* ─── Pagination inline ───────────────────────────────── */

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0;
}

/* ─── Cards del detalle de cuenta ─────────────────────────────────────
   2026-08-14, pedido del usuario: el detalle de cuenta pasa de UNA card que envolvía
   identidad + pills + todo el contenido (`.account-tab-card`, borrada acá) a **una card por
   bloque**: identidad arriba, pills y filtros sueltos sobre el fondo de la página, y una card
   por cada tabla o gráfico.

   La receta es `.ranking-table` de `wc-em-dash-productores` (la pantalla "Inicio" de asesores;
   valores exactos en `docs/referencia-asesores-dash.md`): fondo blanco, borde `#E6E8EE`
   -- más claro que el `--bz-color-neutral-4` del DS, que es lo que hacía ver "duras" las
   cards --, radius 14px, sombra apenas perceptible, y el título DENTRO de la card como franja
   con fondo `#FAFBFD` y borde inferior.

   El contraste lo da el fondo del shell, que ya es `#F3F9FC` (`bz-bg-complementary-4` en
   `ds-shell.component.html`): no se pintó un gris propio para esta pantalla.

   Clases nuevas y aditivas: no pisan `.page-header`/`.page-toolbar`. Uso original exclusivo de
   `AccountDetailLayoutComponent` y sus 6 vistas hijas; sumó `AccountPositionsPanelComponent`
   (drawer de cuenta del dashboard) el 2026-09-21, mismo look de card para no desentonar con el
   resto de la app. */
.account-card {
  background: var(--surface);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  /* `min-width: 0` no es cosmético: sin esto, una card que aloja un gráfico dentro de un flex
     se realimenta con el layout y crece sola (mismo gotcha que `.ds-shell__content`). */
  min-width: 0;
}

/* Las cards se separan entre sí, no con el margen de la vista hija: así una subsección que
   agregue una card no tiene que acordarse del espaciado. */
.account-card + .account-card {
  margin-top: var(--space-section);
}

/* `overflow: hidden` va sólo en la franja de título (esquinas de arriba) y NO en la card: los
   `bz-selector` de los filtros y los tooltips de los gráficos se cortarían. Por eso el radius
   se repite acá. */
/* Franja de título de card, UNA sola receta (2026-10-05): navy de la plataforma, rótulo en blanco, 12px
   en mayúsculas. La comparten las cuatro variantes que existen por contexto:
   `.account-card__title` (Cuentas), `.chart-card__title` (`app-chart-card`), `.rank-card__title` (tablas del
   dashboard) y `.portfolio-evolution__card-title`. Cada componente deja sólo lo que es suyo (el
   `justify-content` del chart-card, el radio de la account-card). Para una card nueva, usar uno de
   estos nombres o sumar el suyo a la lista.
   `!important` en el color porque el tema legacy trae `p { color: #2d2d2d !important }` y casi todos los
   `.account-card__title` son un `<p>`. Los controles que se proyectan en la franja se adaptan en el
   bloque "Títulos de card en navy". */
:is(.account-card__title, .chart-card__title, .rank-card__title, .portfolio-evolution__card-title) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 14px 16px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-on-brand) !important;
  background: var(--surface-inverse);
  border-bottom: 1px solid var(--surface-inverse);
}

/* `overflow: hidden` va sólo en la franja de título (esquinas de arriba) y NO en la card: los
   `bz-selector` de los filtros y los tooltips de los gráficos se cortarían. Por eso el radio se
   repite acá. */
.account-card__title {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Controles de la franja (toggle Table/Map, botones): mismo criterio que el bloque "Títulos de card
   en navy" de más abajo. Contenido blanco en ambos estados; el seleccionado (sin `button-secondary`)
   se marca con relleno translúcido. Los íconos del DS vienen en navy o blanco: se fuerzan a blanco. */
.account-card__title bz-button button {
  background: transparent !important;
  color: var(--text-on-brand) !important;
  border: 1px solid var(--on-brand-border) !important;
}

.account-card__title bz-button button:not(.button-secondary) {
  background: var(--on-brand-selected) !important;
  border-color: var(--text-on-brand) !important;
}

.account-card__title bz-button button img {
  filter: brightness(0) invert(1);
}

/* Controles alojados en la franja de título (el toggle Table/Map de Position, los botones de
   Management Fees): empujados a la derecha, misma idea que el `.donut-selector` de la
   referencia, que también vive en la cabecera de su card. */
.account-card__title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  /* La altura de la franja la fija el rótulo, no los controles (mismo mecanismo que
     `.chart-card__actions`): un botón de ~30px contra los ~15px de la línea del rótulo estiraba la
     franja de ~44px a ~58px y la dejaba más gorda que las demás. Con altura 0 los controles se
     centran sobre el rótulo y desbordan simétricamente sobre el padding de 14px, que los absorbe. */
  height: 0;
  /* Los controles de la franja (toggle, botones) no heredan las mayúsculas del título. */
  text-transform: none;
  letter-spacing: normal;
}

/* Sólo para contenido que NO es una tabla (formularios, gráficos, bloques de resumen): las
   tablas van directo bajo la franja de título, sin padding envolvente, porque su propio
   `th`/`td` ya lo trae (receta `asesores-table-look`). */
.account-card__body {
  padding: 16px;
}

/* Fila de dos cards al 50% (Total + Allocation en Position; los pares de gráficos de Position
   Evolution). `minmax(0, 1fr)` y no `1fr`: con `1fr` (= `minmax(auto, 1fr)`) una columna que aloja
   un canvas se realimenta con el layout y crece sola -- ver el comentario de `:host` en
   `chart-card.component.ts`. Una sola columna abajo de 1023px, igual que la referencia. */
.account-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-section);
  align-items: stretch;
  margin-bottom: var(--space-section);
}

/* `.account-card + .account-card` apila con 16px arriba; acá las dos cards son hermanas pero van
   lado a lado, así que ese margen bajaría la segunda media altura. El aire lo da el `gap`. */
.account-card-row > .account-card + .account-card {
  margin-top: 0;
}

@media (max-width: 1023px) {
  .account-card-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fila de filtros de cada subsección: suelta sobre el fondo de la página, sin chrome. */
.account-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

/* ─── Botón de acción cuadrado con ícono (tablas / toolbars) ───────────
   2026-08-12: copiado tal cual (incluido el nombre de clase) de la regla
   `button.table-icon-action-btn, button.reports-download-btn` de
   `plataforma-asesores-v2/src/styles/_general.scss`. Es el botón chico blanco con borde
   finito y sólo un ícono adentro que esa app usa para descargar/refrescar en sus tablas de
   reportes. Global y aditivo: no pisa ninguna clase existente, y hace falta que sea global
   porque lo usan un componente compartido (`app-refresh-button`, variante `outline`) y
   templates de feature. El `<img>` se invierte a blanco en hover, mismo truco que allá, para
   no necesitar una segunda copia del SVG.

   2026-09-22: el borde pasa de `--bz-color-neutral-3` (#979797, gris medio de la regla
   original de asesores) a `--bz-color-tertiary-2` (#E3E6EE) -- el mismo gris azulado clarito
   que ya usan `.account-card`/`.pill-action-btn` para sus bordes blancos. Con neutral-3 este
   botón desentonaba al lado de esas otras cards/toolbars (pedido del usuario, apareció al
   migrar las acciones de fila de Órdenes a esta clase). Cambia para TODOS los usos de
   `.table-icon-action-btn` (Compliance, Reports, Exportar, Órdenes), no solo Órdenes. */
button.table-icon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Mismo alto que los botones de ícono de fila (`bz-button.row-icon-btn`): un solo valor, `--icon-button-size`. */
  height: var(--icon-button-size, 32px);
  padding: 4px 8px;
  border: 1px solid var(--bz-color-tertiary-2);
  border-radius: 3px;
  background-color: var(--bz-color-white);
  color: var(--bz-color-primary);
}

/* El `color` del hover estaba en la regla de asesores y se perdio al portarla: sin el, las
   instancias CON label (el "Hoy" de Calendario y las de toolbar que se migraron el 2026-09-14)
   quedaban con texto navy sobre el relleno gris oscuro del hover, ilegible. El `gap` de arriba
   es por lo mismo: separa el icono del label. Ambos son aditivos -- las instancias de solo
   icono no cambian. */
button.table-icon-action-btn:hover:not([disabled]) {
  background-color: var(--bz-color-neutral-2);
  border-color: var(--bz-color-neutral-2);
  color: var(--bz-color-neutral-5);
}

button.table-icon-action-btn:hover:not([disabled]) img {
  filter: brightness(0) invert(1);
}

button.table-icon-action-btn:disabled {
  border-color: var(--bz-color-tertiary-2);
  background-color: var(--bz-color-white);
  opacity: 0.5;
}

/* Ícono giratorio dentro de table-icon-action-btn (ej. Submit de Fixed Income mientras
   se aprueba la orden). Reutiliza el keyframe `fa-spin` de fontawesome.css. */
.spin-icon {
  animation: fa-spin 1s infinite linear;
}

/* --- Boton blanco de accion con label (toolbars / cabeceras de card) -----
   2026-09-14: los botones de accion CON label de toda la app venian del DS como
   `bz-button classBtn="button-secondary"` -- caja de borde navy de 1px, radius 6px y SOMBRA.
   El usuario los rechazo ("chocan muy fuerte con el estilo de la pagina") y senalo como
   referencia los botones Info / Positions del buscador de cuentas (`.action-btn--info` en
   `accounts-list.component.scss`). Esta clase es esa receta a escala de toolbar.

   Lo que se copia de `.action-btn--info` -- y es lo que define el look:
   - SIN sombra. `box-shadow: 0 2px 4px #00000021` es exactamente la que traia
     `button-secondary`; la sombra + la caja es lo que se estaba rechazando.
   - Borde del MISMO color que el fondo, o sea invisible en reposo, que recien aparece en
     hover. Asi el boton no dibuja una caja mientras no se lo toca, y el hover no mueve el
     layout (el borde ya ocupa su lugar).
   - Blanco `--bz-color-btn-white` + texto `--bz-color-primary` (navy), radius 6px.

   Lo que NO se copia son los valores de tamano (`font-size: 10px`, `padding: 7px 5px`,
   `gap: 3px`): alla son acciones de fila de tabla y por eso son diminutas. Aca es escala de
   toolbar. El `white-space: nowrap` si se conserva -- hay labels largos ("Adjust Price Date",
   "Create from Excel") que si no se parten en dos lineas.

   Va aca y no en `src/styles.scss` por lo mismo que `.table-icon-action-btn`: este archivo
   entra por <link> en la posicion de cascada correcta; `styles.scss` se inyecta al final y le
   ganaria a todo el tema legacy (ver la advertencia en la cabecera de ese archivo).

   Solo para botones CON label. Los de solo icono se quedan en `.table-icon-action-btn`.

   2026-09-15: el usuario pidio sacarles la negrita ("estan en negrita, eso no me gusta mucho")
   y darles "un diseno un poco mas moderno". Dos cambios acoplados:
   - `font-weight` 600 -> 400. Ojo con poner 500 aca: el DS carga Open Sans desde Google con
     `family=Open+Sans:300,400,600,700` -- no hay face de 500, asi que el browser lo resolveria
     a 400 igual y el CSS mentiria sobre lo que se ve.
   - El borde pasa a estar SIEMPRE visible, pero en `--bz-color-tertiary-2` (#E3E6EE, gris
     azulado casi imperceptible) en vez del navy que se rechazo en su momento. Es el reemplazo
     del peso tipografico: sin negrita Y sin borde en reposo, el boton no se lee como boton --
     queda un texto suelto en la toolbar. El borde clarito da la afordancia sin la "caja" que
     chocaba. Sigue SIN sombra, que era el otro motivo del rechazo de `button-secondary`.
   El hover ahora ademas tinta el fondo (`--bz-color-quaternary`, #F4F5F8) en vez de solo
   oscurecer el borde: con el borde ya presente en reposo, cambiarle el color solo era un
   feedback demasiado sutil. */
button.pill-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--bz-color-tertiary-2);
  border-radius: var(--radius-md);
  background-color: var(--bz-color-btn-white);
  color: var(--bz-color-primary);
  font-size: var(--font-md);
  font-weight: 400;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s;
}

button.pill-action-btn:hover:not([disabled]) {
  border-color: var(--bz-color-secondary);
  background-color: var(--bz-color-quaternary);
}

button.pill-action-btn:disabled {
  opacity: 0.5;
}

/* --- Variante de SOLO ICONO de la receta de arriba (toolbars / cabeceras de card) -----
   2026-09-15. Desde que existe `.pill-action-btn` (32px, radius 8, borde gris clarito) los
   botones de solo icono que comparten toolbar con el seguian en `.table-icon-action-btn`
   (28px, radius 3, borde gris siempre) y no pegaban: distinta altura, distinto radio y
   distinto borde uno al lado del otro. La captura del usuario es el par
   "Contraparte" + refresh de `fixed-income-orders`, pero el choque se repite en las toolbars
   de reports, dashboard/analytics, marketplace y fixed-income.

   Hereda TODO de `.pill-action-btn` (se aplican las dos clases juntas en el markup) y solo
   ajusta lo que cambia sin label: el padding deja de ser el de un boton con texto y pasa a
   dar una caja cuadrada de 32x32, y el `gap` no hace falta.

   **Es para toolbars y cabeceras, NO para acciones de fila de tabla.** Los ~29 botones de
   icono que viven dentro de un `<td>` se quedan en `.table-icon-action-btn` a proposito
   (decision del usuario, 2026-09-15): 32px de alto y radius 8 en cada fila engordarian las
   tablas densas de ordenes, reports y compliance. Por eso `.table-icon-action-btn` NO se
   cambio globalmente, que hubiera sido una sola regla pero se habria llevado puestas las filas.

   Al migrar un boton: cambiar `class="table-icon-action-btn"` por
   `class="pill-action-btn pill-action-btn--icon"`. El `<img>` del icono no se toca -- ojo que
   `.table-icon-action-btn` lo invertia a blanco en hover y esta receta no (el hover es un
   tinte gris claro, el icono navy se sigue leyendo). */
button.pill-action-btn--icon {
  gap: 0;
  padding: 0;
  width: 32px;
}