/* stock/financials/financials-academy.css
   FINANCIALS (income statement, balance sheet, cash flow) — Academy style (oct 2026).
   Loaded after each page's own CSS. Light touch: cards, kickers and controls; the chart,
   slider and table logic are untouched. */
:root { --ink: #16242a; --line: rgba(22, 36, 42, 0.09); --shadow-card: 0 8px 24px rgba(22, 36, 42, 0.04); }

/* tabs */
@media (min-width: 769px) {
  .paginas { background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-card); padding: 6px 8px; gap: 4px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .paginas .elementoNav { border-radius: 999px; padding: 9px 18px; color: rgba(22, 36, 42, 0.62); background: transparent; border-color: transparent; }
  .paginas .elementoNav h3 { font-size: 14px; font-weight: 600; }
  .paginas .elementoNav:hover { background: rgba(84, 140, 146, 0.08); border-color: transparent; color: var(--ink); transform: none; box-shadow: none; }
  .paginas .elementoNav[aria-current="page"],
  .paginas .financials { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
}

/* company card */
.identidad { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow-card) !important; }
.identidad .logo, .identidad .logoEmpresa { background: #fff; border: 1px solid var(--line); border-radius: 14px !important; padding: 8px; box-sizing: border-box; }
.identidad .nombreEmpresa, .nombreEmpresa { font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; }
.identidad .tickerEmpresa { background: var(--ink) !important; color: #fff !important; border-radius: 8px !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; }

/* statement switch: segmented control, active in ink */
.menuFinancialsContenedor { gap: 4px !important; padding: 4px !important; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-card); width: auto !important; max-width: none !important; }
.menuFinancialsContenedor .menuFinancial { border: 0 !important; border-radius: 999px !important; background: transparent !important; color: rgba(22, 36, 42, 0.62) !important; font-size: 14px !important; font-weight: 600 !important; padding: 9px 20px !important; box-shadow: none !important; transform: none !important; }
.menuFinancialsContenedor .menuFinancial:hover { background: rgba(84, 140, 146, 0.08) !important; color: var(--ink) !important; }

/* section title as a kicker */
.tituloDeSeccionContenedor { padding: 14px 0 18px !important; }
.tituloDeSeccionContenedor .tituloDeSeccion, .tituloDeSeccion { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--color-azul-medio, #548C92) !important; }

/* chart card, slider */
.contenedorCanvasGraficaPirincipal { border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow-card) !important; }
.contenedroSlider { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }

/* controls: period / currency / units / decimals */
.contenedorAjustes { color: rgba(22, 36, 42, 0.45) !important; }
.contenedorAjustes .cajaAjustes { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; }
.contenedorAjustes .labelAjuste { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(22, 36, 42, 0.45) !important; }
.contenedorAjustes button, .contenedorAjustes .seleccion { border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; color: rgba(22, 36, 42, 0.62) !important; font-weight: 600 !important; box-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; }
.contenedorAjustes .seleccion:hover { background: rgba(84, 140, 146, 0.08) !important; color: var(--ink) !important; transform: none !important; box-shadow: none !important; }
.contenedorAjustes .botonActivo, .contenedorAjustes .botonesHorizontales .botonActivo { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.contenedorAjustes #puntosDecimales { color: var(--ink) !important; font-weight: 800 !important; }

/* download CSV */
.excelDowloadBtn.secondary { background: var(--color-azul-oscuro, #285260) !important; border-radius: 12px !important; font-weight: 700 !important; padding: 0.5rem 1rem !important; box-shadow: 0 10px 24px rgba(40, 82, 96, 0.22) !important; }
.excelDowloadBtn.secondary:hover { background: #1f4450 !important; box-shadow: 0 14px 30px rgba(40, 82, 96, 0.28) !important; }

/* statement table */
.contenedorTablaCompleta { border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow-card) !important; }
.contenedorTablaCompleta table thead th, tr.trFechas > th, tr.trFechas > td, .trFechas .tituloTabla { background: #F6F9F9 !important; color: rgba(22, 36, 42, 0.55) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--line) !important; }
.contenedorTablaCompleta tbody th, .titulosTabla tbody th { color: var(--ink) !important; font-weight: 500 !important; }
.contenedorTablaCompleta tbody td, .tablaMovil tbody td { color: var(--ink) !important; font-weight: 500 !important; }
.contenedorTablaCompleta th, .contenedorTablaCompleta td { border-color: var(--line) !important; }
.subrayar, .subrayar th, .subrayar td { background-color: #F3F7F7 !important; }
.subrayar th, .subrayar td { font-weight: 800 !important; color: var(--ink) !important; }
.tablaMovil tr.rowEnGrafica td { background-color: rgba(84, 140, 146, 0.12) !important; }
.chartToggleBtn { border-color: rgba(40, 82, 96, 0.35) !important; border-radius: 6px !important; }
.chartToggleBtn svg rect { fill: var(--color-azul-oscuro, #285260) !important; }
.chartToggleBtn.active { background-color: var(--color-azul-oscuro, #285260) !important; border-color: var(--color-azul-oscuro, #285260) !important; }
.chartToggleBtn.active svg rect { fill: #fff !important; }
.infoBtn { background: rgba(84, 140, 146, 0.12) !important; color: var(--color-azul-oscuro, #285260) !important; font-weight: 800 !important; }
/* the active statement button is set per page (inline <style> in each index.html) */
.menuFinancialsContenedor .menuFinancial.is-academy-active { background: var(--ink) !important; color: #fff !important; }
/* dates row: the page CSS targets it by id, so match that specificity */
#trFechas th, #trFechas td, .trFechas .tituloTabla { background: #F6F9F9 !important; color: rgba(22, 36, 42, 0.55) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--line) !important; }
.menuFinancialsContenedor .menuFinancial { white-space: nowrap !important; height: auto !important; }
/* same row highlight in the label column (titulosTabla) and the data table (tablaMovil) */
.titulosTabla tr.rowEnGrafica th, .tablaMovil tr.rowEnGrafica td, .titulosTabla tr.subrayar.rowEnGrafica th, .tablaMovil tr.subrayar.rowEnGrafica td { background: rgba(84, 140, 146, 0.12) !important; }
.titulosTabla tr.subrayar th, .tablaMovil tr.subrayar td { background: #F3F7F7 !important; }
.titulosTabla tr:not(.subrayar):not(.rowEnGrafica):not(.trFechas) th, .tablaMovil tr:not(.subrayar):not(.rowEnGrafica):not(.trFechas) td { background: transparent !important; }
/* BS/CF mark key rows with subrayarImportante only in the data table: treat them like any row so both tables match */
.tablaMovil tr.subrayarImportante { background: inherit !important; }
.titulosTabla tr.trFechas th { background: #F6F9F9 !important; }
/* no zebra rows: the two tables count rows differently and got out of step; only highlights remain */
.titulosTabla tr:not(.trFechas), .tablaMovil tr:not(.trFechas) { background: #fff !important; }
/* thin separators so rows read well on white; soft hover on the whole row */
.titulosTabla tr:not(.trFechas) th, .tablaMovil tr:not(.trFechas) td { border-bottom: 1px solid rgba(22, 36, 42, 0.08) !important; }
.titulosTabla tr:last-child th, .tablaMovil tr:last-child td { border-bottom: 0 !important; }
.titulosTabla tr:not(.trFechas):not(.rowEnGrafica):not(.subrayar):hover th, .tablaMovil tr:not(.trFechas):not(.rowEnGrafica):not(.subrayar):hover td { background: #F6F9F9 !important; }

/* phone: segmented control scrolls sideways from the left instead of clipping both ends */
@media (max-width: 768px) {
  .menuFinancialsContenedor { justify-content: flex-start !important; overflow-x: auto !important; max-width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .menuFinancialsContenedor::-webkit-scrollbar { display: none; }
  .menuFinancialsContenedor .menuFinancial { flex: 0 0 auto !important; width: auto !important; font-size: 13px !important; padding: 8px 14px !important; }
}
@media (max-width: 420px) { .menuFinancialsContenedor .menuFinancial { font-size: 12.5px !important; padding: 8px 11px !important; } }