/* Página: Analytics de Estados Contables (para empresas). Identidad propia: el libro contable.
   Verde de planilla contable, cifras tabulares, negativos entre paréntesis y totales con doble subrayado. */
.c-analytics-estados-contables { --ec: #1f7a55; --ec-soft: #9fd3b8; --ec-neg: #b23b2a; --ec-paper: color-mix(in srgb, #1f7a55 5%, var(--surface)); --ec-rule: color-mix(in srgb, #1f7a55 16%, transparent); --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
:root[data-theme="dark"] .c-analytics-estados-contables { --ec: #5fd0a0; --ec-soft: #2d6e52; --ec-neg: #f08a76; --ec-rule: color-mix(in srgb, #5fd0a0 14%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-analytics-estados-contables { --ec: #5fd0a0; --ec-soft: #2d6e52; --ec-neg: #f08a76; --ec-rule: color-mix(in srgb, #5fd0a0 14%, transparent); } }

.c-analytics-estados-contables .c-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.6rem); max-width: 17ch; }
.c-analytics-estados-contables h1 em, .c-analytics-estados-contables h2 em { color: var(--ec); }
/* Detalle tipográfico: el énfasis del título lleva el doble subrayado de un total */
.c-analytics-estados-contables .c-hero h1 em { text-decoration: underline double; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--ec) 60%, transparent); }
.c-solo-emp { display: inline-block; margin: 0; padding: 5px 12px; border: 1.5px solid var(--ec); border-radius: 4px; font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--ec); }
.c-analytics-estados-contables .cs-step-n { font-family: var(--mono); color: var(--ec); letter-spacing: 0; }
.c-analytics-estados-contables .unit-n { font-family: var(--mono); color: var(--ec); text-transform: none; letter-spacing: 0; }

/* ---------- Portada: Estado de Resultados ---------- */
.ec-sheet { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; font-size: .82rem; }
.ec-sheet-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--ec); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .ec-sheet-bar { color: #06281a; }
.ec-sheet-bar b { font-family: var(--mono); font-weight: 500; font-size: .72rem; opacity: .85; }
.ec-er { padding: 8px 16px; background-image: repeating-linear-gradient(transparent 0 33px, var(--ec-rule) 33px 34px); }
.ec-er > div { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); align-items: center; min-height: 34px; animation: c-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.ec-er > div:nth-child(2) { animation-delay: .25s; } .ec-er > div:nth-child(3) { animation-delay: .35s; } .ec-er > div:nth-child(4) { animation-delay: .45s; } .ec-er > div:nth-child(5) { animation-delay: .55s; } .ec-er > div:nth-child(6) { animation-delay: .65s; } .ec-er > div:nth-child(7) { animation-delay: .8s; }
.ec-er span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-er span:not(:first-child) { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ec-er .h { font-size: .7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ec-er .neg span:not(:first-child) { color: var(--ec-neg); }
.ec-er .sub { font-weight: 600; }
.ec-er .sub span:not(:first-child) { border-top: 1px solid var(--ink); }
.ec-er .tot { font-weight: 700; }
.ec-er .tot span:not(:first-child) { color: var(--ec); text-decoration: underline double; text-underline-offset: 4px; }
.ec-unit { margin: 0; padding: 6px 16px 10px; font-size: .68rem; color: var(--muted); }
.ec-ratio { position: absolute; left: -24px; bottom: -30px; display: grid; gap: 1px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: c-in .7s .9s both, c-bob 5s 1.6s ease-in-out infinite; }
.ec-ratio small { font-size: .74rem; color: var(--muted); }
.ec-ratio strong { font-family: var(--mono); font-size: 1.6rem; color: var(--ec); line-height: 1.1; }
.ec-ratio span { font-size: .7rem; font-weight: 600; color: var(--ec); }

/* ---------- Historia ---------- */
.ec-stage { font-size: .86rem; background: var(--ec-paper); }
.c-analytics-estados-contables .s1 { background: none; }
.c-analytics-estados-contables .s2, .c-analytics-estados-contables .s4 { display: block; }
.c-analytics-estados-contables .s5 { padding: 7%; }

/* Escena 1 */
.ec-file { position: absolute; width: 66%; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -20px rgba(16, 42, 67, .5); }
.ec-file header { padding: 7px 10px; font-family: var(--mono); font-size: .7rem; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg); }
.ec-file code { display: block; padding: 8px 10px; font-family: var(--mono); font-size: .68rem; line-height: 1.6; color: var(--ink); white-space: nowrap; overflow: hidden; }
.f1 { left: 6%; top: 7%; transform: rotate(-3deg); } .f2 { left: 18%; top: 27%; transform: rotate(2deg); --d: .12s; } .f3 { left: 28%; top: 47%; transform: rotate(-1deg); --d: .24s; }
.ec-cal { position: absolute; left: 7%; bottom: 7%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--deep); color: var(--on-deep); font-size: .78rem; --d: .45s; }
.ec-cal b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #c2462e; color: #fff; font-size: .72rem; text-align: center; line-height: 1.05; }
.cs-stage:not([data-step="1"]) .s1 .ec-file { opacity: 0; transform: translateY(24px); }
.cs-stage:not([data-step="1"]) .s1 .ec-cal { opacity: 0; transform: translateX(-16px); }

/* Escena 2: árbol del plan de cuentas */
.ec-tree { list-style: none; margin: 0; padding: 10px 12px; width: 60%; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 1px; font-size: .78rem; }
.ec-tree li { display: flex; gap: 10px; padding: 4px 6px; border-radius: 6px; transition: opacity .4s, transform .5s; }
.ec-tree b { min-width: 3.6em; font-family: var(--mono); font-weight: 600; color: var(--ec); }
.ec-tree .l1 { font-weight: 700; } .ec-tree .l2 { padding-left: 22px; font-weight: 600; } .ec-tree .l3 { padding-left: 42px; color: var(--muted); }
.ec-tree .l2::before, .ec-tree .l3::before { content: "└"; color: var(--faint); margin-right: -4px; }
.ec-tree li:nth-child(2) { transition-delay: .08s; } .ec-tree li:nth-child(3) { transition-delay: .16s; } .ec-tree li:nth-child(4) { transition-delay: .24s; } .ec-tree li:nth-child(5) { transition-delay: .32s; } .ec-tree li:nth-child(6) { transition-delay: .4s; } .ec-tree li:nth-child(7) { transition-delay: .48s; } .ec-tree li:nth-child(8) { transition-delay: .56s; } .ec-tree li:nth-child(9) { transition-delay: .64s; }
.cs-stage:not([data-step="2"]) .ec-tree li { opacity: 0; transform: translateX(-12px); transition-delay: 0s; }
.ec-calt { position: absolute; right: 7%; top: 30%; width: 28%; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--ec); display: grid; font-size: .74rem; --d: .7s; }
.ec-calt header { padding: 7px 10px; background: var(--ec); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .ec-calt header { color: #06281a; }
.ec-calt span { padding: 5px 10px; border-top: 1px solid var(--line); font-family: var(--mono); color: var(--muted); }
.cs-stage:not([data-step="2"]) .s2 .ec-calt { opacity: 0; transform: translateX(16px); }

/* Escena 3: Estado de Situación */
.ec-bs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; height: 58%; }
.ec-col { display: grid; grid-template-rows: auto 1fr; gap: 6px; height: 100%; }
.ec-col small { font-weight: 700; font-size: .78rem; text-align: center; }
.ec-col { --stack: 1; }
.ec-col i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .72rem; font-weight: 600; color: #fff; transition: transform .7s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom; }
.ec-col { grid-template-rows: auto var(--h1, 42fr) var(--h2, 58fr); }
.ec-col:last-child { --h1: 38fr; --h2: 62fr; }
.ec-col .a1 { background: var(--ec); border-radius: 8px 8px 0 0; } .ec-col .a2 { background: color-mix(in srgb, var(--ec) 65%, var(--ink)); border-radius: 0 0 8px 8px; }
.ec-col .p1 { background: var(--accent); border-radius: 8px 8px 0 0; } .ec-col .p2 { background: color-mix(in srgb, var(--accent) 65%, var(--ink)); border-radius: 0 0 8px 8px; }
:root[data-theme="dark"] .ec-col i { color: #06281a; }
.ec-eq { align-self: center; font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--ec); --d: .5s; }
.ec-dax { display: block; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--deep); color: var(--on-deep); font-family: var(--mono); font-size: .72rem; line-height: 1.5; --d: .3s; }
.ec-dax b { color: #7fe0b4; } .ec-dax i { font-style: normal; color: #f2c811; }
.ec-ok { margin: 10px 0 0; font-weight: 700; font-size: .82rem; color: var(--ec); --d: .7s; }
.cs-stage:not([data-step="3"]) .ec-col i { transform: scaleY(0); }
.cs-stage:not([data-step="3"]) .s3 .ec-dax, .cs-stage:not([data-step="3"]) .s3 .ec-ok, .cs-stage:not([data-step="3"]) .s3 .ec-eq { opacity: 0; transform: translateY(10px); }

/* Escena 4: cascada */
.ec-cap { display: block; font-weight: 600; font-size: .78rem; color: var(--muted); margin-bottom: 10px; }
.ec-wf { position: relative; display: flex; gap: 4%; height: 70%; margin-bottom: 22px; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(to top, var(--ec-rule) 0 1px, transparent 1px 25%); }
.ec-wf i { position: relative; flex: 1; }
.ec-wf i::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--b); height: var(--h); border-radius: 4px; background: var(--c); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: inherit; }
.ec-wf i:nth-child(2) { transition-delay: .15s; } .ec-wf i:nth-child(3) { transition-delay: .3s; } .ec-wf i:nth-child(4) { transition-delay: .45s; } .ec-wf i:nth-child(5) { transition-delay: .6s; } .ec-wf i:nth-child(6) { transition-delay: .75s; }
.ec-wf .up { --c: var(--ec); } .ec-wf .dn { --c: var(--ec-neg); } .ec-wf .st { --c: color-mix(in srgb, var(--ec) 55%, var(--surface)); } .ec-wf .tt { --c: var(--ec); }
.ec-wf .tt::before { outline: 3px double var(--ec); outline-offset: 3px; }
.ec-wf em { position: absolute; left: 50%; bottom: -20px; translate: -50% 0; font-style: normal; font-size: .66rem; color: var(--muted); white-space: nowrap; }
.cs-stage:not([data-step="4"]) .ec-wf i::before { transform: scaleY(0); transition-delay: 0s; }

/* Escena 5: ratios */
.ec-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-kpis div { display: grid; gap: 1px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ec-kpis small { font-size: .72rem; color: var(--muted); }
.ec-kpis b { font-family: var(--mono); font-size: clamp(1.1rem, 2vw, 1.5rem); text-decoration: underline double; text-decoration-color: color-mix(in srgb, var(--ec) 50%, transparent); text-underline-offset: 5px; }
.ec-kpis span { font-size: .7rem; font-weight: 600; color: var(--ec); }
.ec-kpis div:nth-child(2) { --d: .08s; } .ec-kpis div:nth-child(3) { --d: .16s; } .ec-kpis div:nth-child(4) { --d: .24s; }
.ec-kpis { --d: .1s; }
.ec-share { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; --d: .35s; }
.ec-share li { padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.ec-share li:nth-child(n+3) { border-style: dashed; }
.ec-sync { position: absolute; left: 7%; right: 7%; bottom: 6%; padding: 8px 12px; border-radius: 10px; background: var(--ec); color: #fff; font-weight: 600; font-size: .78rem; text-align: center; --d: .55s; }
:root[data-theme="dark"] .ec-sync { color: #06281a; }
.cs-stage:not([data-step="5"]) .s5 > * { opacity: 0; transform: translateY(14px); }

/* ---------- Programa y recorrido ---------- */
.c-analytics-estados-contables .unit li::before { background: var(--ec); border-radius: 0; height: 2px; top: .7em; }
.c-analytics-estados-contables .gain-list span { -webkit-text-stroke-color: var(--ec); font-family: var(--mono); }
.ec-road { grid-template-columns: 1.4fr 1fr 1fr; }
.ec-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 6px; }
.ec-dots i { height: 16px; border-radius: 2px; border-bottom: 3px double var(--line); background: color-mix(in srgb, var(--line) 50%, transparent); transition: background-color .3s, border-color .3s; }
.road-leg.on .ec-dots i { background: var(--ec); border-color: var(--ec-soft); }

@media (max-width: 900px) {
  .ec-ratio { left: -8px; }
  .ec-road { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ec-sheet { font-size: .64rem; } .ec-sheet-bar { padding: 8px 10px; } .ec-er { padding: 4px 10px; background-size: auto; } .ec-er > div { min-height: 26px; } .ec-er .h { font-size: .56rem; }
  .ec-er { background-image: repeating-linear-gradient(transparent 0 25px, var(--ec-rule) 25px 26px); }
  .ec-ratio { bottom: -22px; padding: 8px 12px; } .ec-ratio strong { font-size: 1.2rem; }
  .ec-stage { font-size: .72rem; }
  .ec-file { width: 74%; } .ec-file header { font-size: .58rem; padding: 4px 8px; } .ec-file code { font-size: .54rem; padding: 4px 8px; line-height: 1.5; }
  .f2 { left: 14%; top: 26%; } .f3 { left: 20%; top: 45%; }
  .ec-cal { font-size: .62rem; padding: 5px 8px; gap: 6px; bottom: 5%; } .ec-cal b { width: 30px; height: 30px; font-size: .56rem; }
  .ec-tree { width: 64%; padding: 4px 6px; font-size: .58rem; gap: 0; } .ec-tree li { padding: 1px 4px; gap: 6px; } .ec-tree .l2 { padding-left: 12px; } .ec-tree .l3 { padding-left: 22px; }
  .ec-calt { width: 30%; font-size: .56rem; right: 4%; top: 22%; } .ec-calt header { padding: 4px 6px; } .ec-calt span { padding: 2px 6px; }
  .ec-bs { height: 52%; gap: 6px; } .ec-col small { font-size: .6rem; } .ec-col i { font-size: .56rem; } .ec-eq { font-size: 1.3rem; }
  .ec-dax { margin-top: 8px; padding: 6px 8px; font-size: .54rem; } .ec-ok { margin-top: 6px; font-size: .64rem; }
  .ec-cap { margin-bottom: 4px; font-size: .62rem; } .ec-wf { height: 70%; margin-bottom: 16px; } .ec-wf em { font-size: .5rem; }
  .ec-kpis { gap: 5px; } .ec-kpis div { padding: 6px 8px; } .ec-kpis small { font-size: .56rem; } .ec-kpis b { font-size: .95rem; } .ec-kpis span { font-size: .56rem; }
  .ec-share { margin-top: 6px; gap: 4px; } .ec-share li { font-size: .58rem; padding: 3px 7px; }
  .ec-sync { font-size: .6rem; padding: 5px 8px; bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-er > div, .ec-ratio { animation: none !important; }
  .ec-tree li, .ec-col i, .ec-wf i::before, .ec-dots i { transition: none !important; }
}