body {
  font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* iPhone como aplicación de inicio: la página se dibuja debajo de la barra de estado (isla / notch).
   Se reserva ese alto y se pinta una franja oscura fija, porque iOS escribe la hora y la batería en blanco. */
body {
  padding-top: env(safe-area-inset-top);
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: #343a40;
  z-index: 1036;
}

.app-sidebar {
  padding-top: env(safe-area-inset-top);
}

/* Importes largos dentro de las cajas del tablero: se achican en pantallas angostas en vez de cortarse */
.small-box .inner h3 {
  font-size: clamp(1.05rem, 4.2vw, 1.6rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Presupuesto: columnas mínimas para que en el celular la tabla se desplace en vez de aplastarse */
.col-descripcion {
  min-width: 150px;
}

.col-monto {
  min-width: 130px;
}

@media (max-width: 575.98px) {
  .app-content-header h3 {
    font-size: 1.35rem;
  }

  .btn-group-sm > .btn {
    padding: 0.25rem 0.4rem;
  }
}

.info-box .info-box-number {
  font-size: 1.15rem;
}

.brand-icono {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  line-height: 1;
}

/* Contenedores de Chart.js: el card-body de AdminLTE es flex, así que el ancho debe ser explícito */
.grafico,
.grafico-chico {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.grafico {
  height: 280px;
}

.grafico-chico {
  height: 200px;
}

.muestra-color {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.25em;
}

.categorizar-form select {
  max-width: 230px;
}

.card-title {
  font-size: 1.05rem;
}

/* Presupuesto: filas ya pagadas o devueltas */
.fila-pagada td {
  opacity: 0.65;
}

.fila-pagada input[name="monto"] {
  text-decoration: line-through;
}

.small-box .small-box-footer {
  white-space: normal;
}