/* ============================================================
   Dashboard Soliplast SAS — styles.css
   Identidad visual: Algedi & Antares Legacy
   ============================================================ */

@import url('./shared/brand.css');

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --bg:            var(--aa-bg);
  --bg-alt:        var(--aa-bg-alt);
  --card:          var(--aa-surface);
  --card-soft:     var(--aa-bg);
  --card-dark:     var(--aa-bg-alt);
  --text:          var(--aa-text);
  --text-muted:    var(--aa-text-muted);
  --primary:       var(--aa-accent);
  --primary-hover: var(--aa-accent-hover);
  --primary-light: rgba(139,111,71,0.10);
  --border:        var(--aa-border);
  --success:       var(--aa-success);
  --danger:        var(--aa-danger);
}

:root.dark, body.dark {
  --bg:            #1A1208;
  --bg-alt:        #231A0E;
  --card:          #2C2010;
  --card-soft:     #332614;
  --card-dark:     #1A1208;
  --text:          #EDE8DC;
  --text-muted:    #A08060;
  --primary:       #C4A265;
  --primary-hover: #D4B275;
  --primary-light: rgba(196,162,101,0.15);
  --border:        #4A3520;
  --success:       #7AAF78;
  --danger:        #C06060;
}

/* ── BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 28px 32px 92px;
  font-family: var(--aa-font-body);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-padding-bottom: 92px;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3 { font-family: var(--aa-font-heading); font-weight: 500; }
h1 { margin: 0; color: var(--primary); font-size: 1.4rem; letter-spacing: 0.06em; }

.subtitle {
  font-family: var(--aa-font-body);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* ── HEADER ──────────────────────────────────────────────────── */
.header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.header-brand__sep {
  display: block;
  width: 1px;
  height: 34px;
  background-color: var(--aa-gold);
  opacity: 0.45;
  flex-shrink: 0;
}

.header-brand__title {
  margin: 0;
  font-family: var(--aa-font-heading);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── LOGO ────────────────────────────────────────────────────── */
.aa-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 0.1rem;
  text-decoration: none;
  cursor: pointer;
}
.aa-logo__name {
  font-family: var(--aa-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--aa-text, #2C2416);
  white-space: nowrap;
  transition: color 0.2s;
}
.aa-logo:hover .aa-logo__name { color: var(--primary); }
.aa-logo__sub {
  font-family: var(--aa-font-body);
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.20em;
  color: var(--aa-text-muted, #7A6A52);
}
.aa-logo__amp { color: var(--aa-gold); }

body.dark .aa-logo__name { color: var(--text); }
body.dark .aa-logo__sub  { color: var(--text-muted); }

/* ── HEADER ACTIONS ──────────────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ── BOTONES (dark mode + carga) ─────────────────────────────── */
.theme-toggle,
.btn-upload {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--aa-radius, 6px);
  padding: 7px 16px;
  font-family: var(--aa-font-heading);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover,
.btn-upload:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
body.dark .theme-toggle,
body.dark .btn-upload { background: var(--card); border-color: var(--border); color: var(--text-muted); }
body.dark .theme-toggle:hover,
body.dark .btn-upload:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  margin: 20px 0 28px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 20px 10px;
  margin-bottom: -1px;
  font-family: var(--aa-font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
body.dark .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-content         { display: none; }
.tab-content.active  { display: block; }

/* ── PLACEHOLDER DE CONTENIDO ────────────────────────────────── */
.tab-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 72px 32px;
  border: 1px dashed var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  background: var(--card);
  text-align: center;
  color: var(--text-muted);
}
.tab-placeholder__icon { font-size: 2.4rem; opacity: 0.6; }
.tab-placeholder__title {
  font-family: var(--aa-font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.tab-placeholder__desc {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 400px;
}

/* ── STATUS BAR ──────────────────────────────────────────────── */
#statusBox {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 7px 32px;
  font-family: var(--aa-font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  min-height: 34px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
body.dark #statusBox {
  background: var(--card-dark);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}

/* ── MODAL CARGA ─────────────────────────────────────────────── */
.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.upload-modal__box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: min(540px, 94vw);
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body.dark .upload-modal__box { background: var(--card); border-color: var(--border); }

.upload-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-modal__title {
  margin: 0;
  font-family: var(--aa-font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.upload-modal__close {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.upload-modal__close:hover { background: var(--border); color: var(--text); }

/* Drop zone */
.upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.upload-dropzone__icon { font-size: 2.2rem; margin-bottom: 10px; }
.upload-dropzone__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.upload-dropzone__text strong { color: var(--text); }

/* Nombre de archivo seleccionado */
.upload-filename {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  min-height: 1.2em;
}
.upload-filename.ready { color: var(--success); font-style: normal; font-weight: 500; }

/* Footer del modal */
.upload-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.btn-upload-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--aa-radius, 6px);
  padding: 7px 18px;
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-upload-cancel:hover { border-color: var(--danger); color: var(--danger); }

.btn-upload-confirm {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  border-radius: var(--aa-radius, 6px);
  padding: 7px 22px;
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-upload-confirm:hover:not(:disabled) { background: var(--primary-hover); }
.btn-upload-confirm:disabled { opacity: 0.35; cursor: not-allowed; }
body.dark .btn-upload-confirm { color: var(--bg); }

/* ══════════════════════════════════════════════════════════════
   ESTADOS FINANCIEROS — ef-* components
   ══════════════════════════════════════════════════════════════ */

/* ── TOOLBAR ─────────────────────────────────────────────────── */
.ef-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.ef-mode-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--aa-radius, 6px);
  overflow: hidden;
}

.ef-mode-btn {
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  padding: 7px 18px;
  font-family: var(--aa-font-heading);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.ef-mode-btn:last-child { border-right: none; }
.ef-mode-btn:hover { background: var(--primary-light); color: var(--text); }
.ef-mode-btn.active {
  background: var(--primary);
  color: #fff;
}
body.dark .ef-mode-btn.active { color: var(--bg); }

.ef-refresh-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--aa-radius, 6px);
  padding: 7px 16px;
  font-family: var(--aa-font-heading);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.ef-refresh-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* ── LOADING / ERROR STATES ──────────────────────────────────── */
.ef-loading,
.ef-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 32px;
  border: 1px dashed var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  background: var(--card);
  text-align: center;
}
.ef-loading { color: var(--text-muted); font-style: italic; font-size: 0.9rem; }
.ef-error   { color: var(--danger); font-size: 0.88rem; }
.ef-error strong {
  font-family: var(--aa-font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

/* ── CONTENT CARDS ───────────────────────────────────────────── */
.ef-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ef-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .ef-row { grid-template-columns: 1fr; } }

.ef-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ef-card--full {
  grid-column: 1 / -1;
}

.ef-card__title {
  font-family: var(--aa-font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

/* ── P&G TABLE ───────────────────────────────────────────────── */
.ef-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.ef-table {
  width: max-content;         /* por defecto: tabla toma su ancho natural */
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
}

/* ── Tabla Ingresos: se estira al 100% del contenedor.
   Los KPIs y gráficos ya son 100% → los tres objetos quedan
   alineados a izquierda y derecha. Si hay muchos períodos
   y la tabla natural supera el contenedor, el wrapper hace
   scroll horizontal (min-width en <col> lo garantiza). ──────── */
#ingresosTable .ef-table-wrap,
#costosTable   .ef-table-wrap,
#cgDetalleSection .ef-table-wrap,
#cvDetalleSection .ef-table-wrap,
#gaDetalleSection .ef-table-wrap,
#gvDetalleSection .ef-table-wrap,
#gnoDetalleSection .ef-table-wrap,
#ingDetalleSection .ef-table-wrap {
  width: 100%;
}
#ingresosTable .ef-table,
#costosTable   .ef-table,
#cgDetalleSection .ef-table,
#cvDetalleSection .ef-table,
#gaDetalleSection .ef-table,
#gvDetalleSection .ef-table,
#gnoDetalleSection .ef-table,
#ingDetalleSection .ef-table {
  width: 100%;
  min-width: max-content;     /* scroll si las columnas no caben */
}

/* ── Tabla Estados Financieros: ocupa el 100% interior del
   recuadro .ef-card (que tiene padding 20px 22px). Así el
   margen derecho de la tabla coincide con el borde del card,
   igual que el izquierdo. Scroll horizontal si hay muchos
   períodos. ─────────────────────────────────────────────────── */
#efContent .ef-table-wrap {
  width: 100%;
}
#efContent .ef-table {
  width: 100%;
  min-width: max-content;     /* scroll si las columnas no caben */
}
#fcContent .ef-table-wrap {
  width: 100%;
}
#fcContent .ef-table {
  width: 100%;
  min-width: max-content;
}
.ef-table th,
.ef-table td {
  padding: 7px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

/* ── Columna Concepto: sticky izquierda ─────────────────────── */
.ef-table th:first-child,
.ef-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-family: var(--aa-font-heading);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--card);
}
/* En filas totales el fondo sticky debe coincidir con el fondo de fila
   z-index explícito asegura que la celda sticky tape las celdas de datos
   al hacer scroll horizontal (evita que los números se superpongan al título) */
.ef-row--total td:first-child  {
  background: var(--bg-alt);
  position: sticky;
  left: 0;
  z-index: 2;
}
.ef-row--neta  td:first-child  {
  position: sticky;
  left: 0;
  z-index: 2;
}

#fcTable .fc-row--check td {
  background: var(--bg-alt);
}
#fcTable .fc-row--check td:first-child {
  background: var(--bg-alt);
  position: sticky;
  left: 0;
  z-index: 2;
}

/* ── Columnas de datos: ancho controlado por <col style="width/min-width"> ──
   Con table-layout:fixed el colgroup es la única fuente de verdad.
   min-width en <col> garantiza que al agregar más períodos las columnas
   no se compriman — el wrapper overflow-x:auto absorbe el scroll. ─── */

.ef-table th {
  font-family: var(--aa-font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-alt);
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Header de la columna Concepto: sticky en X e Y */
.ef-table th:first-child {
  z-index: 3;   /* encima del resto de headers al hacer scroll diagonal */
  background: var(--bg-alt);
}

/* Row variants */
.ef-row--header td:first-child {
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 14px;
}
.ef-row--sub td { color: var(--text-muted); font-size: 0.79rem; background: var(--card); border-bottom: 1px solid rgba(139,111,71,0.08); }
.ef-row--sub td:first-child { padding-left: 24px; font-family: var(--aa-font-body); letter-spacing: 0; }
.ef-row--sub td:first-child,
.ef-row--drilled td:first-child {
  border-bottom: 1px solid rgba(139,111,71,0.08);
  background-clip: padding-box;
}

/* ── EF Drill-down ──────────────────────────────────────────── */
.ef-row--drillable { cursor: pointer; }
.ef-row--drillable:hover td { background: rgba(139,111,71,0.07) !important; }
.ef-drill-caret {
  display: inline-block;
  font-size: 1em;
  opacity: 0.55;
  margin-left: 5px;
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.ef-row--expanded .ef-drill-caret { transform: rotate(90deg); opacity: 0.9; }
.ef-row--drilled td { background: rgba(139,111,71,0.03) !important; font-size: 0.77rem; border-bottom: 1px solid rgba(139,111,71,0.08); }
.ef-row--drilled:last-child td { border-bottom: 1px solid rgba(139,111,71,0.08); }
.ef-drilled__label              { padding-left: 2.8em !important; font-style: italic; opacity: 0.82; }
.ef-drilled__label--l4          { padding-left: 2.8em !important; }
.ef-drilled__label--l6          { padding-left: 4.4em !important; font-size: 0.74rem; opacity: 0.75; }
.ef-drilled--l6 td              { background: rgba(139,111,71,0.015) !important; }

.ef-row--total td {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
}
.ef-row--total td:first-child {
  font-family: var(--aa-font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ef-row--neta td {
  font-weight: 700;
  color: var(--primary);
  background: #F2ECE4;
  border-top: 2px solid var(--primary);
  border-bottom: none !important;
}
.ef-row--neta td:first-child {
  background: #F2ECE4;
  font-family: var(--aa-font-heading);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Percent column */
.ef-table__pct {
  display: block;
  font-size: 0.70rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 1px;
  line-height: 1.2;
}

/* Value wrapper */
.ef-table__val {
  display: block;
  line-height: 1.3;
}

/* ── Tablas Ingresos y CyG: totales con pct a la izquierda del valor ── */
#ingTable .ef-row--neta td,
#ingTable .ef-row--total td,
#cgTable  .ef-row--neta td,
#cgTable  .ef-row--total td {
  white-space: nowrap;
}
#ingTable .ef-row--total td {
  color: var(--primary);
}
#ingTable .ef-row--neta td .ef-table__pct,
#ingTable .ef-row--total td .ef-table__pct,
#cgTable  .ef-row--neta td .ef-table__pct,
#cgTable  .ef-row--total td .ef-table__pct {
  display: inline-block;
  font-size: 0.70rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.3;
  margin-right: 5px;
  vertical-align: baseline;
}
#ingTable .ef-row--neta td .ef-table__val,
#ingTable .ef-row--total td .ef-table__val,
#cgTable  .ef-row--neta td .ef-table__val,
#cgTable  .ef-row--total td .ef-table__val {
  display: inline-block;
  line-height: 1.3;
  vertical-align: baseline;
}

/* Negative values */
.ef-val--neg { color: var(--danger) !important; }

/* ── Tabla CyG: fila % sobre ingresos ───────────────────────── */
/* Fila secundaria de % s/Ingresos — visual subordinada a la fila de valor */
/* Quitar borde inferior del ítem cuando le sigue su fila % */
#cgTable tr.ef-row--sub:has(+ tr.cg-row--pct-ing) td { border-bottom: none; }
#cgTable .cg-row--pct-ing td {
  padding-top: 1px;
  padding-bottom: 6px;
  border-bottom: none;
}
/* Restaurar separador después del %, antes del siguiente ítem */
#cgTable .cg-row--pct-ing + tr td {
  border-top: 1px solid var(--border);
}
#cgTable .cg-pct-label {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  padding-left: 8px;
}
#cgTable .cg-ing-pct {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  font-weight: 400;
}
#cgTable .cg-no-data {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Tabla detalle Costo de Ventas ───────────────────────────── */
.cg-detalle-section {
  margin-top: 2.5rem;
}
.cg-detalle-toolbar {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-bottom: 10px;
}
.cg-detalle-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Nombres de categoría (primera celda) en mayúsculas */
#cvDetalleTable tbody tr.ef-row--sub:not(.cg-row--pct-ing) td:first-child {
  text-transform: uppercase;
}

/* Fila de total en la tabla detalle */
#cvDetalleTable .cg-cv-total td {
  font-weight: 600;
  border-top: 2px solid var(--border);
  background: var(--bg-alt);
}
#cvDetalleTable .cg-cv-total td .ef-table__val {
  font-size: 0.85rem;
}

/* Porcentaje debajo del valor en la fila total de cvDetalleTable */
#cvDetalleTable .ef-row--neta td {
  white-space: nowrap;
}
#cvDetalleTable .cg-cv-total-pct {
  display: block;
  font-size: 0.70rem;
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin-top: 1px;
}
#cvDetalleTable .ef-row--neta td .ef-table__val {
  display: block;
  line-height: 1.3;
}

/* Hereda estilos de filas subordinadas del cgTable */
#cvDetalleTable tr.ef-row--sub:has(+ tr.cg-row--pct-ing) td { border-bottom: none; }
#cvDetalleTable .cg-row--pct-ing td {
  padding-top: 1px;
  padding-bottom: 6px;
  border-bottom: none;
}
#cvDetalleTable .cg-row--pct-ing + tr td {
  border-top: 1px solid var(--border);
}
#cvDetalleTable .cg-pct-label {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  padding-left: 8px;
}
#cvDetalleTable .cg-ing-pct {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  font-weight: 400;
}
#cvDetalleTable .cg-no-data {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Tablas detalle Gastos Admin, Ventas y No Operacionales ────── */
#cgDetalleTable .cg-cv-total td,
#gaDetalleTable .cg-cv-total td,
#gvDetalleTable .cg-cv-total td,
#gnoDetalleTable .cg-cv-total td {
  font-weight: 700;
  border-top: 2px solid var(--primary);
  background: #F2ECE4;
  color: var(--primary);
}
#cgDetalleTable .cg-cv-total td .ef-table__val,
#gaDetalleTable .cg-cv-total td .ef-table__val,
#gvDetalleTable .cg-cv-total td .ef-table__val,
#gnoDetalleTable .cg-cv-total td .ef-table__val {
  font-size: 0.85rem;
  display: block;
  line-height: 1.3;
  color: inherit;
}
#cgDetalleTable .cg-cv-total td:first-child,
#gaDetalleTable .cg-cv-total td:first-child,
#gvDetalleTable .cg-cv-total td:first-child,
#gnoDetalleTable .cg-cv-total td:first-child {
  background: #F2ECE4;
}
#cgDetalleTable .ef-row--neta td,
#gaDetalleTable .ef-row--neta td,
#gvDetalleTable .ef-row--neta td,
#gnoDetalleTable .ef-row--neta td {
  white-space: nowrap;
}
#cgDetalleTable .cg-cv-total-pct,
#gaDetalleTable .cg-cv-total-pct,
#gvDetalleTable .cg-cv-total-pct,
#gnoDetalleTable .cg-cv-total-pct {
  display: block;
  font-size: 0.70rem;
  font-style: italic;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 1px;
}
#gaDetalleTable tr.ef-row--sub:has(+ tr.cg-row--pct-ing) td,
#gvDetalleTable tr.ef-row--sub:has(+ tr.cg-row--pct-ing) td,
#gnoDetalleTable tr.ef-row--sub:has(+ tr.cg-row--pct-ing) td { border-bottom: none; }
#gaDetalleTable .cg-row--pct-ing td,
#gvDetalleTable .cg-row--pct-ing td,
#gnoDetalleTable .cg-row--pct-ing td {
  padding-top: 1px;
  padding-bottom: 6px;
  border-bottom: none;
}
#gaDetalleTable .cg-row--pct-ing + tr td,
#gvDetalleTable .cg-row--pct-ing + tr td,
#gnoDetalleTable .cg-row--pct-ing + tr td {
  border-top: 1px solid var(--border);
}
#gaDetalleTable .cg-pct-label,
#gvDetalleTable .cg-pct-label,
#gnoDetalleTable .cg-pct-label {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  padding-left: 8px;
}
#gaDetalleTable .cg-ing-pct,
#gvDetalleTable .cg-ing-pct,
#gnoDetalleTable .cg-ing-pct {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  font-weight: 400;
}
#gaDetalleTable .cg-no-data,
#gvDetalleTable .cg-no-data,
#gnoDetalleTable .cg-no-data {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Drill-down GNO: filas clickeables L4 ───────────────────── */
#gnoDetalleTable tbody tr.ef-row--sub,
#gaDetalleTable tbody tr.ef-row--sub,
#gvDetalleTable tbody tr.ef-row--sub {
  cursor: pointer;
  transition: background 0.15s;
}
#gnoDetalleTable tbody tr.ef-row--sub:hover td,
#gaDetalleTable tbody tr.ef-row--sub:hover td,
#gvDetalleTable tbody tr.ef-row--sub:hover td {
  background: var(--primary-light);
}
#gnoDetalleTable tbody tr.cg-row--pct-ing,
#gaDetalleTable tbody tr.cg-row--pct-ing,
#gvDetalleTable tbody tr.cg-row--pct-ing {
  cursor: default;
}

/* ── Barra de navegación breadcrumb (Opción B) ──────────────── */
.cg-drill-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  flex-wrap: wrap;
}

.cg-drill-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--aa-radius, 6px);
  padding: 5px 14px;
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  white-space: nowrap;
}
.cg-drill-back:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
body.dark .cg-drill-back { color: var(--text-muted); border-color: var(--border); }
body.dark .cg-drill-back:hover { color: var(--primary); background: var(--primary-light); }

.cg-drill-breadcrumb {
  font-family: var(--aa-font-body);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Vistas L6/L8: filas clickeables ───────────────────────── */
.cg-drill-table tbody tr.ef-row--sub {
  cursor: pointer;
  transition: background 0.15s;
}
.cg-drill-table tbody tr.ef-row--sub:hover td {
  background: var(--primary-light);
}
.cg-drill-table tbody tr.cg-row--pct-ing {
  cursor: default;
}

/* L8 es solo lectura — sin interacción */
.cg-drill-table--l8 tbody tr.ef-row--sub {
  cursor: default;
}
.cg-drill-table--l8 tbody tr.ef-row--sub:hover td {
  background: inherit;
}

/* Herencia de estilos de celda para tablas drill */
.cg-drill-table .cg-no-data   { color: var(--text-muted); font-style: italic; }
.cg-drill-table .cg-ing-pct   { font-size: 0.72rem; font-style: italic; color: var(--text-muted); font-weight: 400; }
.cg-drill-table .cg-pct-label { font-size: 0.68rem; font-style: italic; color: var(--text-muted); padding-left: 8px; }
.cg-drill-table .cg-cv-total td {
  font-weight: 600;
  border-top: 2px solid var(--border);
  background: var(--bg-alt);
}
.cg-drill-table .cg-cv-total td .ef-table__val {
  font-size: 0.85rem;
  display: block;
  line-height: 1.3;
}
.cg-drill-table .cg-cv-total-pct {
  display: block;
  font-size: 0.70rem;
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin-top: 1px;
}
.cg-drill-table tr.ef-row--sub:has(+ tr.cg-row--pct-ing) td { border-bottom: none; }
.cg-drill-table .cg-row--pct-ing td {
  padding-top: 1px;
  padding-bottom: 6px;
  border-bottom: none;
}
.cg-drill-table .cg-row--pct-ing + tr td { border-top: 1px solid var(--border); }

/* width para tablas drill dentro de gnoDetalleSection */
#gnoDetalleSection .cg-drill-table {
  width: 100%;
  min-width: max-content;
}


/* ── Separador entre P&G y Balance ──────────────────────────── */
/* Ya no hay fila separadora — el espacio lo da ef-row--section--balance */

/* Fila repetición de headers (fechas) justo antes del Balance */
.ef-row--repeat-head td {
  font-family: var(--aa-font-heading);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding-top: 7px;      /* misma altura que el thead original */
  padding-bottom: 7px;
  border-top: 28px solid var(--card);   /* espacio de separación con fondo neutro */
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.ef-row--repeat-head td:first-child {
  text-align: left;
  background: var(--bg-alt);
  border-top-color: var(--card);        /* mismo fondo que la celda sticky */
  position: sticky;
  left: 0;
  z-index: 2;
}
body.dark .ef-row--repeat-head td             { background: var(--bg-alt); border-top-color: var(--card); }
body.dark .ef-row--repeat-head td:first-child { background: var(--bg-alt); border-top-color: var(--card); }

/* ── Balance: fila de cabecera de sección ───────────────────── */
.ef-row--section td {
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--card);
  padding-top: 18px;
  border-bottom: 2px solid var(--primary);
}
.ef-row--section td:first-child {
  background: var(--card);
}
body.dark .ef-row--section td:first-child { background: var(--card); }

/* Separador visual entre P&G y Balance: margen superior extra */
.ef-row--section--balance td {
  padding-top: 8px;
}

/* Dark mode: sticky column backgrounds */
body.dark .ef-table td:first-child                 { background: var(--card); }
body.dark .ef-table .ef-row--sub  td               { background: var(--card); }
body.dark .ef-table .ef-row--total td              { background: var(--bg-alt); }
body.dark .ef-table .ef-row--total td:first-child  { background: var(--bg-alt); position: sticky; left: 0; z-index: 2; }
/* Color opaco = blend de rgba(196,162,101,0.15) sobre --card(#2C2010) */
body.dark .ef-table .ef-row--neta  td              { background: #43341D; }
body.dark .ef-table .ef-row--neta  td:first-child  { background: #43341D; position: sticky; left: 0; z-index: 2; }
body.dark .ef-table th:first-child                 { background: var(--bg-alt); }
/* Dark mode: tablas detalle CyG — filas total con fondo opaco equivalente */
body.dark #cgDetalleTable .cg-cv-total td,
body.dark #gaDetalleTable .cg-cv-total td,
body.dark #gvDetalleTable .cg-cv-total td,
body.dark #gnoDetalleTable .cg-cv-total td             { background: #43341D; }
body.dark #cgDetalleTable .cg-cv-total td:first-child,
body.dark #gaDetalleTable .cg-cv-total td:first-child,
body.dark #gvDetalleTable .cg-cv-total td:first-child,
body.dark #gnoDetalleTable .cg-cv-total td:first-child { background: #43341D; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  body { padding: 16px 14px 60px; }
  .tab-btn { padding: 8px 12px 10px; font-size: 0.62rem; }
  .ef-toolbar { gap: 8px; }
  .ef-mode-btn { padding: 6px 12px; font-size: 0.6rem; }
  .ef-table th, .ef-table td { padding: 6px 8px; font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════════
   INGRESOS — KPI Cards
   ══════════════════════════════════════════════════════════════ */

/* Grid: 5 cards en una fila */
.ing-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* Costos y Gastos: 6 KPI en una sola fila (desktop amplio) */
#costosKpiGrid.ing-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1100px) { .ing-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ing-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .ing-kpi-grid { grid-template-columns: 1fr; } }

/* ── Card base ─────────────────────────────────────────────── */
.ing-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: box-shadow 0.2s;
  min-width: 0;
}
.ing-kpi-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* ── Label superior ────────────────────────────────────────── */
.ing-kpi-card__label {
  margin: 0;
  font-family: var(--aa-font-heading);
  font-size: 0.59rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Valor principal ───────────────────────────────────────── */
.ing-kpi-card__value {
  margin: 5px 0 1px;
  font-family: var(--aa-font-heading);
  font-size: 1.38rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
}
.ing-kpi--pos { color: var(--success) !important; }
.ing-kpi--neg { color: var(--danger)  !important; }

/* ── Sub-label (período) ───────────────────────────────────── */
.ing-kpi-card__sub {
  margin: 0;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badge wrapper ─────────────────────────────────────────── */
.ing-kpi-card__badge-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ing-kpi-card__badge-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}
#kpiTotalCgVsLabel,
#kpiCvVsLabel,
#kpiMpVsLabel,
#kpiEeVsLabel,
#kpiMoVsLabel,
#kpiGpVsLabel,
#kpiTotalCgVsHistLabel,
#kpiCvVsHistLabel,
#kpiMpVsHistLabel,
#kpiEeVsHistLabel,
#kpiMoVsHistLabel,
#kpiGpVsHistLabel {
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 500;
}
.cg-kpi-card__badge-wrap--secondary {
  margin-top: 2px;
}
.ing-kpi-card__detail {
  margin: 2px 0 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
}
.ing-kpi-card__detail.ing-kpi--pos { color: var(--success); }
.ing-kpi-card__detail.ing-kpi--neg { color: var(--danger);  }

/* ── % principal KPI 1 CyG ─────────────────────────────────── */
.ing-kpi-card__pct-main {
  margin: 4px 0 2px;
  font-family: var(--aa-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.1;
}

/* ── Badge de variación / margen ───────────────────────────── */
.ing-kpi-badge {
  display: inline-block;
  font-family: var(--aa-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-muted);
  white-space: nowrap;
}
.ing-kpi-badge--pos { background: rgba(122,175,120,0.15); color: var(--success); }
.ing-kpi-badge--neg { background: rgba(192,96,96,0.12);  color: var(--danger);  }
body.dark .ing-kpi-badge--pos { background: rgba(122,175,120,0.18); }
body.dark .ing-kpi-badge--neg { background: rgba(192,96,96,0.18);  }

/* ── KPI 1 CyG: card con sparkbar histórico ─────────────────── */
.cg-kpi1-spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 10px;
  height: 56px;
}
.cg-kpi1-spark__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
}
.cg-kpi1-spark__bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.cg-kpi1-spark__bar {
  width: 100%;
  background: var(--border);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}
.cg-kpi1-spark__bar--curr { background: var(--primary); }
.cg-kpi1-spark__col--curr .cg-kpi1-spark__label,
.cg-kpi1-spark__col--curr .cg-kpi1-spark__val { color: var(--primary); font-weight: 600; }
.cg-kpi1-spark__label {
  font-size: 0.58rem;
  color: var(--text-muted);
  line-height: 1.1;
  white-space: nowrap;
}
.cg-kpi1-spark__val {
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1.1;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   INGRESOS — Tabla detalle operacional / no operacional
   ══════════════════════════════════════════════════════════════ */

.ing-table-section {
  margin-bottom: 32px;
}

.ing-table-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ing-table-title {
  margin: 0;
  font-family: var(--aa-font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-left: auto;
}

/* Fila subtotal de grupo (nivel 3) — entre sub y total */
.ef-row--subtotal td {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: 0.80rem;
}
.ef-row--subtotal td:first-child {
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding-left: 12px;
  background: var(--bg);
}
body.dark .ef-row--subtotal td            { background: var(--bg-alt); }
body.dark .ef-row--subtotal td:first-child { background: var(--bg-alt); }

/* ══════════════════════════════════════════════════════════════
   INGRESOS — Gráficos de barras (Chart.js)
   ══════════════════════════════════════════════════════════════ */

.ing-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 800px) { .ing-charts-row { grid-template-columns: 1fr; } }

.ing-chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg, 10px);
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ing-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ing-chart-card__title {
  margin: 0;
  font-family: var(--aa-font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
}

.ing-chart-card__sub {
  margin: 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
}

.ing-chart-wrap {
  position: relative;
  height: 220px;
  margin-top: 8px;
}

/* ── Selector Q ────────────────────────────────────────────── */
.ing-q-selector {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--aa-radius, 6px);
  overflow: hidden;
}
.ing-q-btn {
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  padding: 4px 12px;
  font-family: var(--aa-font-heading);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ing-q-btn:last-child { border-right: none; }
.ing-q-btn:hover { background: var(--primary-light); color: var(--text); }
.ing-q-btn.active {
  background: var(--primary);
  color: #fff;
}
body.dark .ing-q-btn.active { color: var(--bg); }

/* =====================================================================
   COSTOS Y GASTOS — Graficos de componentes (4 charts 2x2)
   ===================================================================== */
.cg-charts-grid {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}
@media (max-width: 900px) { .cg-charts-grid { grid-template-columns: 1fr; } }

.cg-subtotal-chart-section {
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}

.cg-chart-wrap {
  position: relative;
  height: 260px;
  margin-top: 8px;
}

.cg-chart-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.cg-chart-legend__item {
  font-family: var(--aa-font-body, 'EB Garamond', serif);
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  white-space: nowrap;
}
.cg-chart-legend__item--avg5 { color: #C4A265; }
.cg-chart-legend__item--hist  { color: #7AAF78; }
body.dark .cg-chart-legend__item--avg5 { color: #D4B275; }
body.dark .cg-chart-legend__item--hist  { color: #8FBF8D; }

/* =====================================================================
   RENTABILIDAD — Variables de color para leyendas HTML
   ===================================================================== */
:root {
  --rent-bruto:  #5E8C4A;
  --rent-ebitda: #8B6F47;
  --rent-op:     #4A7A8A;
  --rent-neto:   #3A7FA8;
  --rent-roa:    #A85C3A;
  --rent-roic:   #8A4AA8;
  --rent-roe:    #B87020;
}
body.dark {
  --rent-bruto:  #9AB88A;
  --rent-ebitda: #C4A265;
  --rent-op:     #7AB8C8;
  --rent-neto:   #7AABCF;
  --rent-roa:    #CF9A7A;
  --rent-roic:   #B884C8;
  --rent-roe:    #E0A060;
}

/* =====================================================================
   ING-SPARK — Sparkbars de KPI (usadas en Ingresos, CyG y Rentabilidad)
   ===================================================================== */

/* El contenedor .cg-kpi1-spark ya actúa de wrapper; cada columna: */
.ing-spark__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.ing-spark__col--current .ing-spark__bar   { background: var(--primary); }
.ing-spark__col--current .ing-spark__label,
.ing-spark__col--current .ing-spark__val   { color: var(--primary); font-weight: 600; }

.ing-spark__col--na .ing-spark__bar { background: var(--border); opacity: 0.4; }

.ing-spark__bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

.ing-spark__bar {
  width: 100%;
  background: var(--border);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}
.ing-spark__bar--current { background: var(--primary); }
.ing-spark__bar--na      { background: var(--border); opacity: 0.35; }

.ing-spark__label {
  font-family: var(--aa-font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
}

.ing-spark__val {
  font-family: var(--aa-font-body, 'EB Garamond', serif);
  font-size: 0.60rem;
  color: var(--text-muted);
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
}

.ing-spark__var {
  font-family: var(--aa-font-heading);
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  display: block;
  text-align: center;
}
.ing-spark__var--pos { color: var(--success); }
.ing-spark__var--neg { color: var(--danger);  }

.ing-spark__empty {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

/* =====================================================================
   RENTABILIDAD — Ajustes de estilo para igualar Ingresos / CyG
   ===================================================================== */

/* KPI grid responsive igual que CyG */
#rentKpiGrid.ing-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1200px) { #rentKpiGrid.ing-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { #rentKpiGrid.ing-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { #rentKpiGrid.ing-kpi-grid { grid-template-columns: 1fr; } }

/* Valor % — misma tipografía que .ing-kpi-card__value, tamaño ligeramente menor para caber */
.rent-kpi-pct {
  font-family: var(--aa-font-heading) !important;
  font-size: 1.30rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
}

/* Nota cursiva pequeña en el label ("aprox.", "Ut. Neta / Activos", etc.) */
.rent-kpi-note {
  font-family: var(--aa-font-body, 'EB Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.72em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

/* Sparkbar: valores negativos en rojo */
.rent-spark__bar--neg {
  background: var(--danger) !important;
  opacity: 0.70;
}

/* Tabla de rentabilidad */
#rentTable .ef-table-wrap  { width: 100%; overflow-x: auto; }
#rentTable .ef-table       { width: 100%; min-width: max-content; }

/* Filas de indicadores: estilo plano unificado (formato ROIC) */
#rentTableEl .ef-table__val { font-size: 0.88rem; }
#rentTableEl .ef-row--total .ef-table__val,
#rentTableEl .ef-row--neta .ef-table__val,
#rentTableEl .ef-row--sub .ef-table__val {
  font-size: 0.88rem;
  font-weight: 500;
}

/* Colores de filas: todas con el mismo tratamiento visual que ROIC */
#rentTableEl .ef-row--sub td,
#rentTableEl .ef-row--total td,
#rentTableEl .ef-row--neta td {
  color: var(--text-muted);
  font-size: 0.82rem;
  background: var(--card);
  font-weight: 500;
}
/* Alinear nombres de indicadores en una sola columna visual */
#rentTableEl .ef-row--sub td:first-child,
#rentTableEl .ef-row--total td:first-child,
#rentTableEl .ef-row--neta td:first-child {
  padding-left: 12px;
  font-family: var(--aa-font-heading);
  letter-spacing: 0.04em;
  text-transform: none;
}

body.dark #rentTableEl .ef-row--sub td,
body.dark #rentTableEl .ef-row--total td,
body.dark #rentTableEl .ef-row--neta td {
  background: var(--card);
}

/* Separadores uniformes entre items: mismo grosor y mismo tipo de linea */
#rentTableEl tbody tr td {
  border-top: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Delta YoY en tabla */
.rent-delta {
  display: block;
  font-size: 0.70rem;
  font-family: var(--aa-font-body, 'EB Garamond', serif);
  font-style: italic;
  opacity: 0.82;
  line-height: 1.2;
  margin-top: 1px;
}
.rent-delta--pos { color: var(--success) !important; opacity: 1; }
.rent-delta--neg { color: var(--danger)  !important; opacity: 1; }

/* Gráficos: 3 columnas para 7 gráficos individuales */
.rent-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 640px)  { .rent-charts-grid { grid-template-columns: 1fr; } }

.rent-chart-card--wide { min-width: 0; }

/* Leyenda líneas de referencia */
.rent-ref-avg5 { color: #C4A265; }
.rent-ref-hist { color: #7AAF78; }
body.dark .rent-ref-avg5 { color: #D4B275; }
body.dark .rent-ref-hist { color: #8FBF8D; }
.rent-chart-card--wide .ing-chart-wrap { height: 260px; }