/* AMT Journal — estilos de analytics (Estadísticas avanzadas). Prefijo .an- */

/* ---------- pestañas y cuerpo ---------- */
.an-tabs { margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs .tabs { min-width: max-content; }
.an-tabs .tabs button { flex: none; white-space: nowrap; }

.an-pane { display: grid; gap: 16px; }
.an-pane.is-enter { animation: fade-in .28s ease both; }

/* ---------- cabecera de card con conclusión ---------- */
.an-head { align-items: flex-start; flex-wrap: wrap; row-gap: 10px; }
.an-head-txt { min-width: 0; flex: 1 1 240px; }
.an-take { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.an-take b { font-weight: 500; color: var(--text-2); }
.an-take .num { font-weight: 500; }
.an-link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.an-link:hover { color: var(--text); }
.an-chart { width: 100%; min-width: 0; }
.an-foot { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.an-note { margin-right: 9px; font-size: 12px; font-weight: 400; color: var(--text-3); }

/* ---------- KPIs: 6 celdas, 3 × 2 en anchos intermedios ---------- */
.an-kpis .kpi-value { font-size: 22px; }
@media (min-width: 921px) and (max-width: 1360px) {
  .an-kpis { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-kpis > .kpi:nth-child(3n + 1) { border-left: none; }
  .an-kpis > .kpi:nth-child(-n + 3) { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 920px) {
  .an-kpis > .kpi:nth-last-child(-n + 2) { border-bottom: none; }
}

/* ---------- números del periodo ---------- */
.an-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-nums-col { min-width: 0; padding: 0 22px; border-left: 1px solid var(--line-soft); }
.an-nums-col:first-child { padding-left: 0; border-left: none; }
.an-nums-col:last-child { padding-right: 0; }
.an-nums-col > .cap { display: block; padding-bottom: 4px; color: var(--text-3); }
.an-nums .stat-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-nums .stat-row > span:last-child { flex: none; white-space: nowrap; }

/* ---------- Long vs. Short ---------- */
.an-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.an-side { min-width: 0; }
.an-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.an-side-head .an-note { margin-right: 0; white-space: nowrap; }
.an-side .meter { margin-bottom: 6px; }

/* ---------- barra divergente y celda de P&L ---------- */
.an-net { display: inline-flex; align-items: center; justify-content: flex-end; gap: 14px; }
.an-net > .num { display: inline-block; min-width: 84px; text-align: right; }
.an-div { position: relative; flex: none; width: 104px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .05); }
.an-div.is-sm { width: 60px; }
.an-div::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.an-div i { position: absolute; top: 0; bottom: 0; min-width: 1px; }
.an-div i.is-pos { left: 50%; border-radius: 0 3px 3px 0; background: var(--pos); }
.an-div i.is-neg { right: 50%; border-radius: 3px 0 0 3px; background: var(--neg); }

/* ---------- tablas ---------- */
.an-cap1 { display: inline-block; }
.an-cap1::first-letter { text-transform: uppercase; }
.an-months tfoot td { border-top: 1px solid var(--line); border-bottom: none; background: rgba(255, 255, 255, .015); }
.an-months tbody tr:last-child td { border-bottom: none; }
.an-hold { min-width: 400px; }
.an-hold tr.is-off td { color: var(--text-4); }

/* tablas por grupo: columnas fijas (alineadas entre cards) que se compactan según el ancho del contenedor */
.an-gt-wrap { container-type: inline-size; }
.an-gt { table-layout: fixed; min-width: 980px; }
.an-gt col.c-count { width: 124px; }
.an-gt col.c-wr { width: 100px; }
.an-gt col.c-pf { width: 132px; }
.an-gt col.c-exp { width: 124px; }
.an-gt col.c-r { width: 96px; }
.an-gt col.c-net { width: 248px; }
@container (max-width: 979px) {
  .an-gt { min-width: 880px; }
  .an-gt col.c-count { width: 118px; }
  .an-gt col.c-wr { width: 92px; }
  .an-gt col.c-pf { width: 128px; }
  .an-gt col.c-exp { width: 112px; }
  .an-gt col.c-r { width: 88px; }
  .an-gt col.c-net { width: 190px; }
  .an-gt .an-div { width: 56px; }
}
@container (max-width: 879px) {
  .an-gt { min-width: 790px; }
  .an-gt col.c-count { width: 112px; }
  .an-gt col.c-wr { width: 90px; }
  .an-gt col.c-pf { width: 126px; }
  .an-gt col.c-exp { width: 108px; }
  .an-gt col.c-r { width: 84px; }
  .an-gt col.c-net { width: 120px; }
  .an-gt .an-div { display: none; }
  .an-gt .an-net > .num { min-width: 0; }
}
.an-name { overflow: hidden; text-overflow: ellipsis; }
.an-share { display: inline-block; min-width: 38px; margin-left: 8px; font-size: 12px; color: var(--text-3); text-align: right; }
.an-th {
  display: flex; align-items: center; gap: 3px; width: 100%;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.tbl th.r .an-th { flex-direction: row-reverse; }
.an-th svg { flex: none; color: var(--text-2); }

/* ---------- coste de los errores ---------- */
.an-cost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.an-cost-cell { min-width: 0; padding: 16px 18px; border-left: 1px solid var(--line-soft); }
.an-cost-cell:first-child { border-left: none; }
.an-cost-val { margin-top: 9px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.an-cost-sub { margin-top: 6px; font-size: 12px; color: var(--text-3); }

/* ---------- riesgo ---------- */
.an-callout { display: grid; justify-items: end; text-align: right; }
.an-callout-val { margin-top: 5px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.an-callout-sub { margin-top: 3px; font-size: 12px; color: var(--text-3); }

.an-ratio { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.an-ratio-val { flex: none; font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.an-ratio-txt { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.an-hbar + .an-hbar { margin-top: 13px; }
.an-hbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.an-hbar-top > span:first-child { color: var(--text-2); }
.an-hbar-top > .num { font-weight: 500; }
.an-hbar-track { height: 5px; margin-top: 7px; border-radius: 3px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.an-hbar-track i { display: block; height: 100%; min-width: 2px; border-radius: 3px; }
.an-hbar-track i.is-neg { background: var(--neg); }
.an-hbar-track i.is-pos { background: var(--pos); }
.an-loss-stats { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.an-loss-stats .card-link { flex: none; }

.an-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); }
.an-keys span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.an-key { flex: none; width: 14px; height: 0; border-top: 1px dashed var(--text-3); }
.an-key.is-warn { border-top-color: var(--warn); }

.an-risk { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 28px; align-items: start; }
.an-risk-stats { padding-left: 28px; border-left: 1px solid var(--line-soft); }

/* ---------- estado vacío ---------- */
.an-empty .empty { padding-bottom: 22px; }
.an-empty-progress { display: flex; align-items: center; gap: 12px; width: min(280px, 100% - 48px); margin: 0 auto 30px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.an-empty-progress .meter { flex: 1; }
.an-empty-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
.an-empty-item { display: flex; gap: 12px; min-width: 0; padding: 18px; border-left: 1px solid var(--line-soft); }
.an-empty-item:first-child { border-left: none; }
.an-empty-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .025); color: var(--text-2); }
.an-empty-name { font-size: 13px; font-weight: 600; }
.an-empty-item p { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .an-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .an-nums-col:nth-child(odd) { padding-left: 0; border-left: none; }
  .an-nums-col:nth-child(even) { padding-right: 0; }
  .an-empty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-empty-item:nth-child(odd) { border-left: none; }
  .an-empty-item:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 860px) {
  .an-risk { grid-template-columns: minmax(0, 1fr); gap: 16px 0; }
  .an-risk-stats { padding-left: 0; border-left: none; border-top: 1px solid var(--line-soft); padding-top: 4px; }
}
@media (max-width: 640px) {
  .an-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .an-nums { grid-template-columns: minmax(0, 1fr); }
  .an-nums-col { padding: 0; border-left: none; }
  .an-sides { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .an-cost { grid-template-columns: minmax(0, 1fr); }
  .an-cost-cell { border-left: none; border-top: 1px solid var(--line-soft); }
  .an-cost-cell:first-child { border-top: none; }
  .an-callout { justify-items: start; text-align: left; }
  .an-empty-grid { grid-template-columns: minmax(0, 1fr); }
  .an-empty-item { border-left: none; border-top: 1px solid var(--line-soft); }
  .an-empty-item:first-child { border-top: none; }
  .an-div { width: 64px; }
  .an-months .an-div, .an-hold .an-div { display: none; }
  .an-months .an-net > .num, .an-hold .an-net > .num { min-width: 0; }
  .an-hold { min-width: 0; }
}