/* AMT Journal — Factores de análisis */
.fa { display: flex; flex-direction: column; }
.fa .page-sub { max-width: 620px; line-height: 1.55; }
.fa-tabs { margin-bottom: 20px; }

/* ============================================================
   Configuración
   ============================================================ */
.fa-config { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.fa-cats { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- categoría ---------- */
.fa-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 12px 10px 18px; }
.fa-cat-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.fa-cat-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.fa-cat-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.fa-cat-count { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* nombre editable: al pulsarlo se convierte en campo */
.fa-name {
  max-width: 100%;
  margin: -3px -6px; padding: 3px 6px;
  border-radius: var(--r-xs);
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  color: var(--text);
  text-align: left; overflow-wrap: anywhere;
  cursor: text;
  transition: background .12s;
}
.fa-name:hover { background: var(--active); }
.fa-cat-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.fa-input { height: 30px; padding: 0 9px; font-size: 13.5px; max-width: 440px; }
.fa-input-cat { height: 32px; font-weight: 600; }

/* ---------- escenarios ---------- */
.fa-list { padding-bottom: 2px; border-top: 1px solid var(--line-soft); }
.fa-list-head { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px 7px; }
.fa-row {
  position: relative;
  display: grid; grid-template-columns: 5px minmax(0, 1fr) auto 40px; align-items: center; gap: 12px;
  min-height: 38px; padding: 4px 18px;
  transition: background .12s;
}
.fa-row:hover, .fa-row:focus-within { background: rgba(255, 255, 255, .025); }
.fa-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.fa-row-main { min-width: 0; display: flex; }
/* sub-escenarios: sangría con línea guía bajo el punto de su escenario */
.fa-row-child { grid-template-columns: minmax(0, 1fr) auto 40px; min-height: 34px; padding-left: 42px; }
.fa-row-child::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.fa-row-child .fa-name { font-size: 13px; font-weight: 400; color: var(--text-2); }
.fa-row-new { grid-template-columns: minmax(0, 1fr); padding-right: 18px; }
.fa-row-new:hover, .fa-row-new:focus-within { background: none; }
.fa-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.fa-row:hover .fa-row-actions, .fa-row:focus-within .fa-row-actions { opacity: 1; }
.fa-row-actions .btn { color: var(--text-3); }
.fa-row-actions .btn:hover { color: var(--text); }
.fa-row-count { text-align: right; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.fa-row-count.is-zero { color: var(--text-4); }
.fa-none, .fa-limit, .fa-new-hint { padding: 14px 18px; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.fa-limit, .fa-new-hint { border-top: 1px solid var(--line-soft); padding: 11px 18px; font-size: 12.5px; }

/* ---------- añadir escenario ---------- */
.fa-add {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 8px 8px; padding: 0 4px 0 9px;
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.fa-add:hover { background: var(--hover); }
.fa-add:focus-within { background: var(--inset); border-color: rgba(61, 123, 255, .65); box-shadow: 0 0 0 3px rgba(61, 123, 255, .14); }
.fa-add.is-invalid, .fa-add.is-invalid:focus-within { border-color: rgba(240, 97, 109, .6); box-shadow: 0 0 0 3px rgba(240, 97, 109, .12); }
.fa-add-ic { flex: none; display: grid; place-items: center; color: var(--text-3); }
.fa-add:focus-within .fa-add-ic { color: var(--text-2); }
.fa-add-input { flex: 1; min-width: 0; height: 34px; background: none; border: none; font-size: 13.5px; color: var(--text); }
.fa-add-input:focus-visible { outline: none; }
.fa-add-input::placeholder { color: var(--text-3); }
.fa-add-btn { flex: none; height: 26px; }

/* ---------- lateral ---------- */
.fa-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fa-usage { padding-bottom: 14px; }
.fa-usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); }
.fa-usage-top .num { font-weight: 600; color: var(--text); }
.fa-aside .stat-list { border-top: 1px solid var(--line-soft); }
.fa-of-max { font-weight: 400; color: var(--text-3); }
.fa-steps { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fa-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.fa-step-n {
  width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-3);
}
.fa-aside-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* ---------- estado vacío ---------- */
.fa-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.fa-empty-main { padding: 44px 40px 46px; }
.fa-empty-title { margin-top: 2px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.fa-empty-text { max-width: 480px; margin: 8px 0 22px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.fa-empty-ex { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 32px 34px; border-left: 1px solid var(--line-soft); background: rgba(255, 255, 255, .012); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.fa-ex { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-1); padding: 4px 0; }
.fa-ex-row { position: relative; display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.fa-ex-row .cap { margin-left: auto; flex: none; color: var(--text-4); }
.fa-ex-name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.fa-ex-cat { margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.fa-ex-cat .fa-ex-name { font-weight: 600; }
.fa-ex-sub { padding-left: 38px; }
.fa-ex-sub::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.fa-ex-sub .fa-ex-name { font-size: 13px; font-weight: 400; color: var(--text-2); }

/* ============================================================
   Análisis
   ============================================================ */
.fa-sum { margin-bottom: 16px; }
.fa-of { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--text-3); }
.fa-kpi-name {
  margin-top: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fa-kpi-where { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.fa-kpi .kpi-foot { margin-top: 7px; }

.fa-ans { display: flex; flex-direction: column; gap: 16px; }
.fa-an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 4px; }
.fa-an-titles { min-width: 0; }
.fa-an-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fa-take { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--text-3); overflow-wrap: anywhere; }
.fa-take b { font-weight: 600; color: var(--text); }
.fa-take .num { white-space: nowrap; }
.fa-an-count { flex: none; padding-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.fa-an-chart { padding: 10px 18px 8px; }

/* columnas fijas: las tablas de todas las categorías quedan alineadas entre sí */
.fa-tbl { table-layout: fixed; min-width: 960px; }
.fa-tbl thead th { border-top: 1px solid var(--line-soft); }
.fa-tbl th:nth-child(2) { width: 114px; }
.fa-tbl th:nth-child(3) { width: 90px; }
.fa-tbl th:nth-child(4) { width: 128px; }
.fa-tbl th:nth-child(5) { width: 110px; }
.fa-tbl th:nth-child(6) { width: 88px; }
.fa-tbl th:nth-child(7) { width: 122px; }
.fa-td-name { position: relative; }
.fa-tbl td.fa-td-name { white-space: normal; line-height: 1.45; }
.fa-td-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px; }
.fa-td-label { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.fa-tr-child td.fa-td-name { padding-left: 40px; }
.fa-tr-child td.fa-td-name::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.fa-tr-child .fa-td-label { font-weight: 400; color: var(--text-2); }
.fa-mark {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px 0 5px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
.fa-small { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
/* muestra pequeña: los números se ven, pero sin peso */
.fa-tbl tr.is-small td:not(.fa-td-name) { opacity: .42; }
.fa-tbl tr.is-small .fa-td-label { color: var(--text-3); }

/* barra proporcional al P&L neto, divergente desde el centro */
.fa-tbl th.fa-th-bar { width: 116px; }
.fa-bar { position: relative; width: 84px; height: 6px; margin-left: auto; border-radius: 3px; background: rgba(255, 255, 255, .05); }
.fa-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.fa-bar i { position: absolute; top: 0; bottom: 0; }
.fa-bar i.pos { left: 50%; border-radius: 0 3px 3px 0; background: var(--pos); }
.fa-bar i.neg { right: 50%; border-radius: 3px 0 0 3px; background: var(--neg); }

.fa-an-foot { justify-content: flex-start; font-size: 12px; }
.fa-notes { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; max-width: 760px; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.fa-notes b { font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 921px) {
  .fa-sum { grid-auto-flow: row; grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
}
/* sin sitio para la barra de la tabla: el gráfico de arriba ya da la proporción */
@media (max-width: 1240px) {
  .fa-tbl { min-width: 790px; }
  .fa-th-bar, .fa-td-bar { display: none; }
  .fa-tbl th, .fa-tbl td { padding-left: 10px; padding-right: 10px; }
  .fa-tbl th:first-child, .fa-tbl td:first-child { padding-left: 18px; }
  .fa-tbl th:nth-child(7), .fa-tbl td:nth-child(7) { padding-right: 18px; }
  .fa-tbl th:nth-child(2) { width: 106px; }
  .fa-tbl th:nth-child(3) { width: 82px; }
  .fa-tbl th:nth-child(4) { width: 120px; }
  .fa-tbl th:nth-child(5) { width: 102px; }
  .fa-tbl th:nth-child(6) { width: 80px; }
  .fa-tbl th:nth-child(7) { width: 114px; }
  .fa-tr-child td.fa-td-name { padding-left: 40px; }
}
/* portátil estrecho: resumen en 2 × 2 para que quepan los nombres */
@media (min-width: 921px) and (max-width: 1240px) {
  .fa-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-sum > .kpi:nth-child(3) { border-left: none; }
  .fa-sum > .kpi:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 1180px) {
  .fa-config { grid-template-columns: minmax(0, 1fr); }
  .fa-aside { position: static; flex-direction: row; align-items: stretch; }
  .fa-aside > .card { flex: 1; min-width: 0; }
}
@media (max-width: 920px) {
  /* mejor y peor factor a todo el ancho: sus nombres son texto del usuario */
  .fa-sum > .kpi.fa-kpi { grid-column: 1 / -1; border-left: none; }
  .fa-sum > .kpi.fa-kpi:last-child { border-bottom: none; }
}
@media (max-width: 760px) {
  .fa-empty { grid-template-columns: minmax(0, 1fr); }
  .fa-empty-main { padding: 30px 22px 28px; }
  .fa-empty-ex { padding: 22px; border-left: none; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (max-width: 640px) {
  .fa-aside { flex-direction: column; }
  .fa-cat-head { padding-left: 14px; }
  .fa-cat-count { display: none; }
  .fa-list-head { padding-left: 14px; padding-right: 14px; }
  .fa-row { gap: 8px; padding-left: 14px; padding-right: 14px; grid-template-columns: 5px minmax(0, 1fr) auto 28px; }
  .fa-row-child { grid-template-columns: minmax(0, 1fr) auto 28px; padding-left: 34px; }
  .fa-row-child::before { left: 16px; }
  .fa-row-new { grid-template-columns: minmax(0, 1fr); }
  .fa-row-actions { opacity: 1; gap: 0; }
  .fa-none, .fa-limit, .fa-new-hint { padding-left: 14px; padding-right: 14px; }
  .fa-an-head { flex-direction: column; gap: 6px; }
}
@media (max-width: 480px) {
  /* dos líneas reservadas para que los valores de ambas celdas sigan alineados */
  .fa-sum > .kpi:not(.fa-kpi) .kpi-label { white-space: normal; min-height: 2.7em; line-height: 1.35; }
}
@media (hover: none) {
  .fa-row-actions { opacity: 1; }
}