/* ==========================================================================
   Control Financiero — Familia Rodríguez
   Diseño pensado para personas mayores de 60 años:
   - Tipografía Atkinson Hyperlegible (creada para máxima legibilidad)
   - Letra grande en todo (con opción "letra más grande")
   - Botones amplios (mínimo 56px de alto), alto contraste, sin gestos ocultos
   ========================================================================== */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-700.woff2') format('woff2');
}

:root {
  --navy: #12335e;
  --tinta: #12203a;
  --gris: #40506b;
  --gris-claro: #5a6f8f;
  --azul: #1d4ed8;
  --verde: #16a34a;
  --verde-osc: #14532d;
  --verde-med: #166534;
  --verde-bg: #dcfce7;
  --rojo: #dc2626;
  --rojo-osc: #991b1b;
  --rojo-bg: #fee2e2;
  --ambar: #d97706;
  --ambar-osc: #92400e;
  --ambar-bg: #fef3c7;
  --borde: #cdd6e4;
  --fondo: #f4f6f9;
  --fondo-ext: #dfe4ec;
  --azul-bg: #e3ebf7;
  --pista: #e5e9f0;
}

html { font-size: 16px; }
html.letra-grande { font-size: 18.5px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fondo-ext);
  font-family: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
  color: var(--tinta);
}

button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }

button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 4px solid #f59e0b;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- marco general ---------- */
#app-marco {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 40px rgba(18, 32, 58, 0.25);
}

header.encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--navy);
  color: #fff;
  padding: 0.875rem 1rem;
  padding-top: calc(0.875rem + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}
.encabezado .titulo-peq { font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; color: #a9c4e8; }
.encabezado .titulo { font-size: 1.3125rem; font-weight: 700; line-height: 1.1; }

.selector-usuario {
  min-height: 3.5rem;
  background: #fff;
  color: var(--navy);
  border: none;
  border-radius: 0.875rem;
  padding: 0.375rem 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-weight: 700;
}
.selector-usuario .peq { font-size: 0.8125rem; color: var(--gris-claro); }
.selector-usuario .nom { font-size: 1.0625rem; display: flex; align-items: center; gap: 0.375rem; }

main {
  flex: 1;
  padding: 1rem 1rem 9.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

h1 { margin: 0; font-size: 1.625rem; font-weight: 700; }
h2 { margin: 0; font-size: 1.375rem; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 0.5rem; }
.sub-gris { font-size: 1.0625rem; font-weight: 700; color: var(--gris); }

/* ---------- componentes ---------- */
.tarjeta {
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: 1.125rem;
  padding: 1.125rem;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: none;
  border-radius: 0.875rem;
  font-weight: 700;
  min-height: 3.5rem;
  font-size: 1.0625rem;
  padding: 0.5rem 0.875rem;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  width: 100%;
}
.btn:active { transform: scale(0.98); }
.btn-verde { background: var(--verde); }
.btn-azul { background: var(--azul); }
.btn-rojo { background: var(--rojo); }
.btn-navy { background: var(--navy); }
.btn-borde { background: #fff; color: var(--tinta); border: 3px solid var(--azul); }
.btn-gris { background: #fff; color: var(--gris); border: 2px solid #8ea3c2; font-size: 1rem; }
.btn-xl { min-height: 4.5rem; font-size: 1.3125rem; border-radius: 1.125rem; }
.btn-lg { min-height: 4rem; font-size: 1.1875rem; }
.btn-sel { border: 3px solid var(--navy); background: #fff; color: var(--navy); font-size: 0.9375rem; border-radius: 0.75rem; }
.btn-sel.activo { background: var(--navy); color: #fff; }
.btn-sel-azul { border: 3px solid var(--azul); background: #fff; color: var(--azul); }
.btn-sel-azul.activo { background: var(--azul); color: #fff; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.rejilla-2 > *, .rejilla-3 > *, .rejilla-4 > * { min-width: 0; }
.rejilla-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; }
.rejilla-roles > * { min-width: 0; }
.columna { display: flex; flex-direction: column; gap: 0.875rem; }
.columna-peq { display: flex; flex-direction: column; gap: 0.625rem; }

.tag {
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.625rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
  min-width: 7.5rem;
}
.tag-rojo { background: var(--rojo-bg); color: var(--rojo-osc); }
.tag-ambar { background: var(--ambar-bg); color: var(--ambar-osc); }
.tag-verde { background: var(--verde-bg); color: var(--verde-osc); }
.tag-azul { background: var(--azul-bg); color: var(--navy); }

.chip-rol {
  font-size: 1rem;
  font-weight: 700;
  background: var(--azul-bg);
  color: var(--navy);
  border-radius: 0.625rem;
  padding: 0.25rem 0.75rem;
}

.barra {
  background: var(--pista);
  border-radius: 999px;
  height: 1.875rem;
  overflow: hidden;
  border: 2px solid var(--borde);
}
.barra > span { display: block; height: 100%; border-radius: 999px; }
.barra-fina { height: 1.375rem; border: none; }
.barra-mini { height: 0.875rem; border: none; background: #eef2f8; }

.entrada {
  min-height: 3.75rem;
  border: 3px solid var(--navy);
  border-radius: 0.875rem;
  font-size: 1.1875rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  width: 100%;
  background: #fff;
}
.entrada-dinero { font-size: 1.625rem; min-height: 4rem; }
textarea.entrada { min-height: 7rem; line-height: 1.4; resize: vertical; }
.etiqueta-campo { font-size: 1.125rem; font-weight: 700; }

.chip-cat {
  min-height: 3.25rem;
  border-radius: 0.75rem;
  border: 2px solid var(--navy);
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.375rem 0.375rem;
  line-height: 1.2;
}
.chip-cat.activo { background: var(--navy); color: #fff; }

/* ---------- fotos y documentos ---------- */
.foto-marco {
  border: 2px dashed #8ea3c2;
  border-radius: 0.75rem;
  min-height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: repeating-linear-gradient(45deg, #eef2f8, #eef2f8 12px, #e2e9f3 12px, #e2e9f3 24px);
}
.foto-marco span {
  font-family: monospace;
  font-size: 0.9375rem;
  color: var(--gris);
  background: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--borde);
  text-align: center;
}
img.foto { width: 100%; border-radius: 0.75rem; border: 2px solid var(--borde); display: block; }

/* ---------- avisos ---------- */
.aviso-caja {
  border-radius: 1rem;
  padding: 1.125rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
}
.aviso-verde { background: var(--verde-bg); border: 3px solid var(--verde); color: var(--verde-osc); }
.aviso-rojo { background: var(--rojo-bg); border: 3px solid var(--rojo); color: var(--rojo-osc); }
.aviso-ambar { background: var(--ambar-bg); border: 3px solid var(--ambar); color: var(--ambar-osc); }
.aviso-info { background: var(--azul-bg); border-radius: 0.875rem; padding: 0.875rem 1rem; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.aviso-neutro { background: #fff; border: 2px solid var(--borde); border-radius: 1rem; padding: 1.125rem; font-size: 1.125rem; font-weight: 700; color: var(--gris); }

/* ---------- navegación inferior ---------- */
nav.inferior {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 40;
  background: #fff;
  border-top: 3px solid var(--borde);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom)) 4px;
  gap: 2px;
}
nav.inferior.seis { grid-template-columns: repeat(6, 1fr); }
nav.inferior button {
  min-height: 3.875rem;
  border: none;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #fff;
  color: var(--gris-claro);
}
nav.inferior button.activo { background: var(--azul-bg); color: var(--azul); }

/* ---------- ventanas (modales) ---------- */
.velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(18, 32, 58, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.dialogo {
  width: 100%;
  max-width: 390px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.dialogo .titulo-dialogo { font-size: 1.4375rem; font-weight: 700; text-align: center; line-height: 1.25; }
.dialogo .sub-dialogo { font-size: 1rem; font-weight: 700; color: var(--gris); text-align: center; }

/* ---------- toast ---------- */
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
#toast .aviso {
  position: fixed;
  bottom: 7.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 390px;
  z-index: 60;
  background: var(--navy);
  color: #fff;
  border-radius: 0.875rem;
  padding: 1rem 1.125rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 24px rgba(18, 32, 58, 0.4);
  animation: toastIn 0.25s ease;
}

/* ---------- gráficas de reportes ---------- */
.grafica-barras { display: grid; gap: 6px; align-items: end; height: 180px; }
.grafica-barras .mes { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.grafica-barras .par { display: flex; align-items: flex-end; gap: 4px; flex: 1; }
.grafica-barras .b-ing { width: 0.9375rem; border-radius: 6px 6px 0 0; background: var(--verde); }
.grafica-barras .b-gas { width: 0.9375rem; border-radius: 6px 6px 0 0; background: var(--rojo); }
.grafica-barras .b-caja { width: 1.625rem; border-radius: 8px 8px 0 0; background: var(--azul); }
.grafica-barras .rotulo { font-size: 0.875rem; font-weight: 700; color: var(--gris); }
.grafica-barras .cifra { font-size: 0.8125rem; font-weight: 700; color: var(--navy); text-align: center; }

.fila-tabla { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 6px; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--pista); border-radius: 0.5rem; }
.fila-tabla span { font-size: 1rem; font-weight: 700; }

/* ---------- registros del historial ---------- */
.registro { background: #fff; border: 2px solid var(--borde); border-radius: 1rem; overflow: hidden; }
.registro > button {
  width: 100%;
  background: #fff;
  border: none;
  padding: 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}