/* rb-ledger — estilos propios (mismo criterio que rb-fl5) sobre Bootstrap 5.3.
   Pensado para personas con baja visión: Atkinson Hyperlegible, letra base de 18px
   ajustable (A−/A+), contrastes AA o mejores en claro y oscuro y foco siempre visible. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-italic.woff2) format("woff2"); }

/* --- Escala de letra (la elige el usuario, queda en localStorage) --- */
html[data-escala="0"] { font-size: 100%; }    /* 16px */
html[data-escala="1"] { font-size: 112.5%; }  /* 18px, por defecto */
html[data-escala="2"] { font-size: 125%; }    /* 20px */
html[data-escala="3"] { font-size: 137.5%; }  /* 22px */

:root {
  --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-line-height: 1.55;
  --foco: #0b57d0;
}
[data-bs-theme="light"] {
  --bs-body-color: #16181b;               /* casi negro: contraste ~17:1 */
  --bs-secondary-color: #4a5058;          /* texto secundario ≥ 7:1 (AAA) */
  --bs-link-color: #0a4fb8; --bs-link-color-rgb: 10, 79, 184;
  --bs-link-hover-color: #073a88; --bs-link-hover-color-rgb: 7, 58, 136;
  --ingreso: #047857;                     /* ≥ 5:1 sobre blanco */
  --egreso: #b91c1c;
  --efectivo: #0f766e;
  --mp: #1d4ed8;
  --transferencia: #6d28d9;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #121417;
  --bs-body-color: #eceff3;
  --bs-secondary-color: #bcc3cc;          /* ≥ 9:1 sobre el fondo oscuro */
  --bs-tertiary-bg: #1b1f24;
  --bs-link-color: #8ab4ff; --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color: #b3ceff; --bs-link-hover-color-rgb: 179, 206, 255;
  --foco: #8ab4ff;
  --ingreso: #6fdc94;
  --egreso: #ff9a9a;
  --efectivo: #5ed1c5;
  --mp: #8ab4ff;
  --transferencia: #c4b5fd;
}

/* Foco bien visible para quien navega con teclado */
:focus-visible { outline: 3px solid var(--foco) !important; outline-offset: 2px; box-shadow: none !important; }
.btn, .form-control, .form-select { --bs-border-width: 1.5px; }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .85; }

/* El atributo hidden siempre oculta, aunque el elemento tenga d-flex u otra utilidad de display de Bootstrap. */
[hidden] { display: none !important; }

/* --- Nav --- */
.navbar .nav-link, .dropdown-item { font-size: 1rem; }
.navbar .nav-link.active { font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.dropdown-menu { max-height: calc(100vh - 6rem); overflow-y: auto; }
.menu-usuario { min-width: 16rem; }
/* Celular (menú colapsado): el menú de usuario va dentro del flujo, a todo el ancho que queda, en vez de flotar
   alineado a la derecha del botón (se salía de la pantalla y tapaba A− / A+). El menú desplegado scrollea si no entra. */
@media (max-width: 991.98px) {
  .navbar-collapse { max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; }
  .navbar-collapse .menu-usuario { position: static; min-width: 0; max-height: none; overflow: visible; margin-top: .5rem; }
}
[data-bs-theme="light"] .tema-claro, [data-bs-theme="dark"] .tema-oscuro { display: none; }

/* --- Login --- */
.login-card { border-radius: 1rem; }

.table { --bs-table-bg: transparent; }
.table > thead th { background: var(--bs-secondary-bg); }
.table-responsive { position: relative; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Modo oscuro: botones outline más claros para mantener contraste AA */
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #ced4da; --bs-btn-border-color: #8c959f; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f19ca4; --bs-btn-border-color: #f19ca4; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8ab4ff; --bs-btn-border-color: #8ab4ff; }
/* La confirmación puede abrirse sobre otro modal: va por encima. */
#confirmModal { z-index: 1070; }

/* --- Importes --- */
.importe-in { color: var(--ingreso) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.importe-out { color: var(--egreso) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.table td, .tarjeta-valor { font-variant-numeric: tabular-nums; }
/* Textos largos (cuenta, nota): bajan de renglón para que los importes no queden fuera de la pantalla. */
.col-texto { min-width: 9rem; white-space: normal; overflow-wrap: anywhere; }
.acciones-fila { white-space: nowrap; }

/* --- Tarjetas de importes (saldos, totales) --- */
.tarjeta-rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.tarjeta-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.tarjeta-total { border-width: 2px; border-color: var(--bs-body-color); }

/* --- Período (‹ mes año ›) --- */
.periodo-rotulo { min-width: 9rem; text-align: center; }
.periodo .form-select { width: auto; }
.form-angosto { max-width: 44rem; }
.form-fecha, .form-cuenta { max-width: 28rem; }

/* --- Formulario de asiento: opciones con forma de botón (radios btn-check) --- */
.rotulo-grupo { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color);
  margin-bottom: .5rem; float: none; width: auto; padding: 0; }
.opciones { display: grid; gap: .6rem; }
.opciones-2 { grid-template-columns: 1fr 1fr; }
.opciones-3 { grid-template-columns: 1fr 1fr 1fr; }
.opcion { --tono: var(--bs-secondary-color); border: 2px solid var(--bs-border-color); border-radius: .75rem; padding: .7rem .4rem;
  font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.opcion-egreso { --tono: var(--egreso); }
.opcion-ingreso { --tono: var(--ingreso); }
.opcion-efectivo { --tono: var(--efectivo); }
.opcion-mercado_pago { --tono: var(--mp); }
.opcion-transferencia { --tono: var(--transferencia); }
.btn-check:checked + .opcion { border-color: var(--tono); color: var(--bs-body-color);
  background: color-mix(in srgb, var(--tono) 18%, var(--bs-body-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 25%, transparent); }
/* Cuentas y bancos: el color de la categoría o del banco tiñe el fondo; el texto es siempre el del cuerpo (contraste fijo).
   El elegido lleva borde grueso del color y un tilde. */
.opcion-cuenta, .opcion-banco { --bs-btn-color: var(--bs-body-color); border: 2px solid color-mix(in srgb, var(--color) 45%, var(--bs-body-bg));
  background: color-mix(in srgb, var(--color) 12%, var(--bs-body-bg)); font-weight: 600; }
.opcion-cuenta { border-radius: 999px; padding: .4rem .9rem; }
.opcion-banco { border-radius: .75rem; padding: .55rem .9rem; font-weight: 800; letter-spacing: .04em; min-width: 4rem; }
.opcion-cuenta:hover, .opcion-banco:hover { background: color-mix(in srgb, var(--color) 22%, var(--bs-body-bg)); color: var(--bs-body-color); }
.btn-check:checked + .opcion-cuenta, .btn-check:checked + .opcion-banco { border: 3px solid var(--color); color: var(--bs-body-color);
  background: color-mix(in srgb, var(--color) 30%, var(--bs-body-bg)); font-weight: 700; }
.btn-check:checked + .opcion-cuenta::before, .btn-check:checked + .opcion-banco::before { content: "✓ "; }
.resumen-asiento { font-weight: 700; }
.resumen-asiento:empty { display: none; }

/* --- Barras de egresos por categoría --- */
.barras { display: grid; gap: .45rem; }
.barra-fila { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 7.5rem); align-items: center; gap: .6rem; }
.barra-nombre { font-size: .9rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pista { display: block; height: .9rem; border-radius: 999px; background: var(--bs-secondary-bg); overflow: hidden; min-width: 0; }
.barra-relleno { display: block; height: 100%; border-radius: 999px; }
.barra-valor { font-size: .9rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .barra-fila { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) minmax(0, 6rem); } }

/* --- Gráfico de barras por mes (Resumen) --- */
.grafico-anual { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem; height: 11rem; }
.grafico-mes { display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; padding: .35rem .05rem .1rem;
  border-radius: .6rem; color: inherit; text-decoration: none; }
a.grafico-mes:hover { background: var(--bs-secondary-bg); }
.grafico-mes.activo { background: var(--bs-secondary-bg); outline: 2px solid var(--bs-body-color); }
.grafico-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; min-height: 0; }
.vbar { width: 42%; max-width: .8rem; border-radius: 4px 4px 1px 1px; }
.vbar-in { background: var(--ingreso); }
.vbar-out { background: var(--egreso); }
.grafico-rotulo { font-size: clamp(.55rem, 2.6vw, .75rem); font-weight: 700; color: var(--bs-secondary-color); }
.leyenda { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
.leyenda-in { background: var(--ingreso); }
.leyenda-out { background: var(--egreso); }
.punto { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; vertical-align: baseline; flex-shrink: 0; }

/* --- Cuadro de resultado (Resumen) --- */
.cuadro { overflow: hidden; }
.cuadro-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 8rem); align-items: center; gap: .75rem;
  padding: .55rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.cuadro summary { list-style: none; cursor: pointer; }
.cuadro summary::-webkit-details-marker { display: none; }
.cuadro summary:hover { background: var(--bs-tertiary-bg); }
.cuadro-nombre { display: flex; align-items: center; gap: .45rem; min-width: 0; overflow-wrap: anywhere; }
.cuadro summary .cuadro-nombre::before { content: "▸"; color: var(--bs-secondary-color); width: .8rem; }
.cuadro details[open] > summary .cuadro-nombre::before { content: "▾"; }
.cuadro-importe { text-align: right; font-variant-numeric: tabular-nums; }
.cuadro-pct { font-size: .8rem; color: var(--bs-secondary-color); }
.cuadro-total { background: var(--bs-tertiary-bg); font-weight: 700; }
.cuadro-resultado { font-weight: 700; font-size: 1.15rem; border-top: 2px solid var(--bs-body-color); border-bottom: 0; }
.cuadro-cat > summary { font-weight: 700; }
.cuadro-cta > summary, .cuadro-hoja { padding-left: 2rem; font-weight: 400; }
.cuadro-hoja .cuadro-nombre { padding-left: 1.25rem; }
.cuadro-sub { padding-left: 3.5rem; font-size: .92rem; }

/* --- Libro y Mayor: filas marcables para el control (ver app.js) --- */
.fila-marcable { cursor: pointer; }
.fila-marcable:focus-visible { outline-offset: -3px; }
.tilde-fila { display: none; font-weight: 700; }
.fila-marcada .tilde-fila { display: inline; }
.filas-suma th, .filas-suma td { font-weight: 700; background: var(--bs-secondary-bg); border-top: 2px solid var(--bs-body-color); }
.btn-desmarcar { min-width: 2rem; min-height: 2rem; margin-right: .5rem; padding: .1rem .4rem; line-height: 1; vertical-align: middle; }
.fila-saldo td, .fila-saldo th { font-weight: 700; background: var(--bs-tertiary-bg); }

/* --- Conciliación --- */
.concil-lado { display: flex; flex-direction: column; gap: .1rem; min-width: 9rem; overflow-wrap: anywhere; }
.concil-dif { background: color-mix(in srgb, #f59e0b 30%, var(--bs-body-bg)); border-radius: .25rem; padding: 0 .25rem; align-self: flex-start;
  text-decoration: underline wavy; text-underline-offset: .2em; }

/* --- Pivot --- */
.tabla-pivot td, .tabla-pivot th { white-space: nowrap; }
.pivot-cat th, .pivot-cat td { font-weight: 700; background: color-mix(in srgb, var(--color) 14%, var(--bs-body-bg)); }
.pivot-cat th { border-left: 5px solid var(--color); }
.pivot-total th, .pivot-total td { font-weight: 700; background: var(--bs-secondary-bg); border-top: 2px solid var(--bs-body-color); }

/* --- Cuentas --- */
.arbol-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.arbol-nombre { display: flex; align-items: center; gap: .45rem; }
.arbol-subs { padding-left: 1.75rem; display: grid; gap: .35rem; }
.form-control-color { width: 2.6rem; height: 2.1rem; padding: .2rem; }