/* Estilos mínimos, pensados primero para el celular. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --texto: #1d2330;
  --suave: #5b6475;
  --primario: #1f5eff;
  --error: #b42318;
  --borde: #d8dce3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12151b;
    --superficie: #1c2029;
    --texto: #e8eaef;
    --suave: #a3aabb;
    --primario: #6d94ff;
    --error: #ff8a80;
    --borde: #333a47;
  }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--fondo);
  color: var(--texto);
}

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.encabezado form { margin: 0; }
.marca { font-weight: 600; }

.contenido {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

h1 { font-size: 1.4rem; margin: 0 0 1rem; }

label { display: block; margin-bottom: 0.25rem; color: var(--suave); }

input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--fondo);
  color: var(--texto);
  margin-bottom: 1rem;
}

button {
  font: inherit;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--primario);
  color: #fff;
  cursor: pointer;
}

button.ancho { width: 100%; }

button.secundario {
  width: auto;
  background: transparent;
  color: var(--primario);
  border: 1px solid var(--borde);
  padding: 0.45rem 0.8rem;
}

.error { color: var(--error); margin: 0 0 1rem; }

.aviso {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--superficie);
}

.aviso.ok { color: var(--texto); }
.aviso.error { color: var(--error); }

a { color: var(--primario); }

.enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.enlaces a {
  flex: 1 1 10rem;
  text-align: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--superficie);
  text-decoration: none;
}

.volver { text-decoration: none; }

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Las descripciones vienen del banco y pueden ser largas y sin espacios. */
.descripcion { font-weight: 600; overflow-wrap: anywhere; }
.monto, .categoria { white-space: nowrap; font-variant-numeric: tabular-nums; }
.detalle { color: var(--suave); margin: 0.25rem 0 0.75rem; font-size: 0.9rem; }

.categorizar select {
  width: 100%;
  padding: 0.7rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--fondo);
  color: var(--texto);
  margin-bottom: 0.75rem;
}

label.casilla {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--texto);
  margin-bottom: 0.75rem;
}

label.casilla input { width: 1.2rem; height: 1.2rem; }

.categorizar button { width: 100%; }
.regla form { margin: 0.75rem 0 0; }

/* Saldo, ingresos y ajustes (ítem 05). */
.contenido > .tarjeta + .tarjeta, .contenido > .aviso + .tarjeta { margin-top: 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.contenido > h2 { margin-top: 1.5rem; }

.saldo-grande {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.formulario input {
  display: block;
  width: 100%;
  padding: 0.7rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--fondo);
  color: var(--texto);
  margin-bottom: 0.9rem;
  min-width: 0;
}

.formulario button { width: 100%; }
.formulario .ayuda { color: var(--suave); font-size: 0.85rem; margin: -0.6rem 0 0.9rem; }
.formulario button.secundario.ancho { width: 100%; padding: 0.7rem 1.1rem; }

/* Reporte mensual (ítem 06): pantalla principal. */
.barra {
  display: grid;
  gap: 0.75rem;
}
.barra .enlaces { margin-top: 0; }
.barra-saldo { margin: 0; }
.barra-saldo .detalle { margin: 0; }
.saldo-barra {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.barra-sincronizar { margin: 0; }
.barra-sincronizar button { width: 100%; }

@media (min-width: 40rem) {
  .barra { grid-template-columns: 1fr auto; align-items: center; }
  .barra .enlaces { grid-column: 1 / -1; }
  .barra-sincronizar button { width: auto; }
}

/* En el celular: el mes arriba y los enlaces debajo, a lado y lado. */
.selector-mes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "mes mes" "anterior siguiente";
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 1.5rem 0 0.75rem;
}
.selector-mes h1 { grid-area: mes; margin: 0; text-align: center; font-size: 1.25rem; }
.selector-mes > :first-child { grid-area: anterior; }
.selector-mes > :last-child { grid-area: siguiente; }
@media (min-width: 40rem) {
  .selector-mes {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "anterior mes siguiente";
  }
}
.selector-mes a { text-decoration: none; font-size: 0.9rem; }
.selector-mes a[rel="next"] { text-align: right; }

.ir-a-mes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.ir-a-mes label { margin: 0; }
.ir-a-mes input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--superficie);
  color: var(--texto);
}

.total-grande {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.grafico {
  position: relative;
  height: 20rem;
  margin-bottom: 1rem;
}

.tabla-categorias {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tabla-categorias th, .tabla-categorias td {
  padding: 0.45rem 0.25rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  font-weight: normal;
}
.tabla-categorias thead th { color: var(--suave); font-size: 0.85rem; }
.tabla-categorias tfoot th, .tabla-categorias tfoot td { font-weight: 700; border-bottom: 0; }
.tabla-categorias .numero { text-align: right; white-space: nowrap; }
.tabla-categorias tbody th { overflow-wrap: break-word; }
.nombre-categoria { display: flex; align-items: baseline; gap: 0.4rem; }
@media (max-width: 30rem) {
  .tabla-categorias { font-size: 0.9rem; }
}

.muestra {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  border-radius: 0.2rem;
}
/* Mismos colores que PALETA_GRAFICO en finanzas/web/app.py (lo comprueba una prueba). */
.color-0 { background: #009e73; }
.color-1 { background: #e69f00; }
.color-2 { background: #0072b2; }
.color-3 { background: #cc79a7; }
.color-4 { background: #d55e00; }
.color-5 { background: #56b4e9; }
.color-6 { background: #8e6bd8; }
.color-7 { background: #a6761d; }
.color-8 { background: #8c8c8c; }

.movimiento .detalle { margin-bottom: 0; }
.movimiento .fila .descripcion { min-width: 0; }
.no-gasto { border-style: dashed; }
.no-gasto .monto { color: var(--suave); }
.etiqueta {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.45rem;
  border: 1px solid var(--borde);
  border-radius: 1rem;
  font-size: 0.8rem;
  white-space: nowrap;
}