/* Proyección (js/views/projection.js). */

/* UX Proyección: a bar per month, what each month costs and how it changes from the
   previous one, when money gets freed, and how far along each plan is. */
.proj-currency { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.proj-summary .bars { margin-top: 8px; }
.proj-release { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: .9rem; }
.proj-empty { display: grid; gap: 10px; }
.proj-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-bottom: 6px; }
.proj-total .amount { font-size: 1.5rem; font-weight: 780; letter-spacing: -0.02em; }
.proj-change { flex-basis: 100%; font-size: .85rem; font-weight: 650; color: var(--muted); }
.proj-change.down { color: var(--good); }
.proj-usd { display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.proj-usd h3 { font-size: .85rem; color: var(--muted); }
.proj-ends { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.proj-items > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 650; }
.proj-plans .item { align-items: flex-start; }
.proj-plans .main { display: grid; gap: 6px; }
.proj-plans .progress { height: 8px; }
.proj-plan-amount { display: grid; justify-items: end; text-align: right; }

/* UX Proyección: 6 o 12 meses, barras apiladas por tipo que llevan a cada mes, "este mes" y botones de 40 px. */
.proj-horizon { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel-2); }
.proj-horizon button { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 11px; background: none; color: var(--muted); font-weight: 650; font-size: .9rem; cursor: pointer; }
.proj-horizon button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.proj-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--muted); font-size: .82rem; }
.proj-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.proj-bars { gap: 4px; }
.proj-bar { min-height: 44px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.proj-bar:hover { background: var(--panel-2); }
.proj-bar .label b { font-variant-numeric: tabular-nums; }
.proj-stack { display: flex; gap: 2px; }
.proj-stack > span { display: block; height: 100%; flex: none; }
.month-card { scroll-margin-top: 12px; }
.month-card h2:focus { outline: none; }
.month-card h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.month-card h2 .badge { vertical-align: 2px; }
.proj-plans .btn.small { min-height: 40px; justify-self: start; }

/* Proyección: the variable spending still to come is an estimate, drawn striped. */
.seg-estimate { background: repeating-linear-gradient(135deg, var(--seg-variable) 0 4px, color-mix(in srgb, var(--seg-variable) 35%, transparent) 4px 8px); }
.proj-estimate { color: var(--muted); }

/* Proyección: opening a month's list does not spread out the card beside it. */
.proj-months { align-items: start; }
.month-card { align-content: start; }

/* UX Proyección: quiet months folded into one short card (and a plain row in the
   summary), and the quota / variable colors of the bars per palette, so quotas never
   look like the accent (Lavanda's violet, Celeste's blue). Same tokens Inicio uses. */
.proj-quiet { gap: 2px; padding-top: 14px; padding-bottom: 14px; }
.proj-quiet h2 { font-size: 1rem; }
.proj-bar-quiet { cursor: default; }
.proj-bar-quiet:hover { background: none; }
.proj-bar-quiet .label .muted { font-size: .85rem; }
:root[data-palette="rosa"] { --seg-installments: #6f7fd6; --seg-variable: #a8979f; }
:root[data-palette="lavanda"] { --seg-installments: #3f9a8f; --seg-variable: #a39fb3; }
:root[data-palette="celeste"] { --seg-installments: #8a6fd0; --seg-variable: #93a6b1; }
@media (prefers-color-scheme: dark) {
  :root[data-palette="rosa"]:not([data-theme="light"]) { --seg-installments: #9aa6ff; --seg-variable: #6e5c66; }
  :root[data-palette="lavanda"]:not([data-theme="light"]) { --seg-installments: #6fcfc1; --seg-variable: #5f5a70; }
  :root[data-palette="celeste"]:not([data-theme="light"]) { --seg-installments: #b9a3f2; --seg-variable: #586a74; }
}
:root[data-palette="rosa"][data-theme="dark"] { --seg-installments: #9aa6ff; --seg-variable: #6e5c66; }
:root[data-palette="lavanda"][data-theme="dark"] { --seg-installments: #6fcfc1; --seg-variable: #5f5a70; }
:root[data-palette="celeste"][data-theme="dark"] { --seg-installments: #b9a3f2; --seg-variable: #586a74; }

/* UX Proyección: próximos vencimientos with the urgent ones as a badge at the start,
   a visible focus ring on the month bars and the 6/12 switch, and tap feedback on the
   bars without a hover that sticks on touch screens. */
.proj-upcoming .meta .badge { margin-right: 6px; vertical-align: 1px; }
.proj-bar:focus-visible, .proj-horizon button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.proj-bar:not(.proj-bar-quiet):active { background: var(--panel-2); }
@media (hover: none) { .proj-bar:hover { background: none; } }
/* UX Proyección: «Volver al resumen» en el mes al que se llegó desde una barra, y los
   meses iguales al anterior en una tarjeta corta (como los meses sin nada). */
.btn.proj-back { justify-self: start; min-height: 40px; margin-left: -10px; }

/* UX Proyección: las acciones de cada plan en una fila que se acomoda (con «Revisar» a 40 px
   en vez del badge enlazado), el enlace a Inicio en Próximos vencimientos y el «Sin pagar»
   de las tarjetas de cada mes, que dice el estado una sola vez. */
.proj-plan-actions { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-left: -10px; }
.proj-plans .proj-plan-actions .btn.small { min-height: 40px; }
.btn.proj-twin { color: var(--warn); }
.btn.proj-upcoming-go { min-height: 40px; margin: 4px 0 -6px -10px; }
.month-card .proj-items .meta .badge { margin-right: 6px; vertical-align: 1px; }