html {
  font-size: 13px;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

/* Títulos de página (siempre <h3>, ver cada Pages.../Index.cshtml) y su texto explicativo
   inmediato (<p class="text-muted"> sin "small", ej. "Últimas 200 posiciones,
   actualizándose solas..." - el subtítulo debajo del título) - 3 puntos menos que el
   default de Bootstrap para el título, 2 puntos menos para el subtítulo. */
main h3 {
  font-size: 1.5625rem;
}

main p.text-muted {
  font-size: 0.875rem;
}

/* Etiquetas arriba de cada control de formulario/filtro (Cuenta, Estrategia, Ticker,
   Desde/Hasta, etc.) - Bootstrap no tiene un "form-label-sm", así que sin esto quedaban
   al tamaño de fuente normal (1rem) aunque el control de abajo ya fuera -sm (0.875rem). */
.form-label {
  font-size: 0.8125rem;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Portado de app.css (proyecto Blazor original) */
body {
  background-color: #f8f9fa;
}

.nav-link {
  color: #212529;
}

.nav-link.active {
  font-weight: 600;
  color: #0d6efd;
}

/* Grilla de gráficas de la pestaña "Gráficas" de /indices (SPY) - la cantidad de
   columnas la elige el usuario con el toggle 2/3/4 (ver spyChartsColumnsToggle en
   Index.cshtml, misma idea que el toggle de /charts), con degradado responsive propio
   por cada opción para pantallas angostas. minmax(0, 1fr) evita que las imágenes
   desborden la celda. */
.spy-charts-grid {
  display: grid;
  gap: 0.75rem;
}

.spy-charts-grid.spy-charts-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .spy-charts-grid.spy-charts-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .spy-charts-grid.spy-charts-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .spy-charts-grid.spy-charts-cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.spy-charts-grid.spy-charts-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 992px) {
  .spy-charts-grid.spy-charts-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .spy-charts-grid.spy-charts-cols-3 { grid-template-columns: minmax(0, 1fr); }
}

.spy-charts-grid.spy-charts-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 576px) {
  .spy-charts-grid.spy-charts-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Barra de filtros por columna arriba de la tabla de /indices (SPY) - grid (no flex) para
   que las 23 columnas se acomoden solas en varios renglones parejos, tan angostos como
   entren en el ancho disponible, sin ocupar mucho alto: celdas más chicas (5.5rem) que
   antes (7rem) para que quepan más por renglón. */
#spyTableFilters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 5.5rem));
  gap: 0.25rem 0.5rem;
}

#spyTableFilters .spy-filter-cell {
  display: flex;
  flex-direction: column;
}

#spyTableFilters label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.68rem;
  line-height: 1.1;
  color: var(--bs-secondary-color);
}

#spyTableFilters input {
  width: 100%;
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  height: auto;
}

/* Todas las grillas (.table de Bootstrap) a un mismo tamaño de fuente - 3px menos que
   el resto de la página -, el mismo que ya tenía la tabla de índices (#spyTable) antes
   de estandarizarse acá. Además, la tabla de índices tiene su scroll horizontal espejo
   arriba (ver más abajo). */
.table {
  font-size: 0.8125rem;
}

.spy-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  display: none;
}

.spy-scroll-top > div {
  height: 1px;
}