/* =====================================================================
   MADRE SELVA · ms-visual-polish.css · v1 · 08/10/2026
   Capa final de calidad visual (se carga al final de <body>, después de
   ms-palette.css). Solo color, contraste, tipografía de cifras y
   superficies del tema oscuro. No toca lógica, datos, rutas, layout
   estructural, logo, landing ni portada.
   Medido con la matriz visual automática (contraste WCAG AA ≥ 4,5:1
   para texto normal, ≥ 3:1 para texto grande).
   ===================================================================== */

/* 1 · Tokens de texto secundario con contraste AA ------------------- */
html:not([data-theme="dark"]){
  --faint:#6B6357;          /* antes #9A9184 (3,1:1) → 5,6:1 sobre crema */
  --muted:#625A50;          /* antes #6D655B (4,4:1 en fondos tintados) */
  --detect-muted:#5E584F;   /* notas del Centro operativo (3,6:1 → 6,6:1) */
  --msp-dis-text:#6B6357;   /* texto de botones deshabilitados legible */
}
html[data-theme="dark"]{
  --faint:#A0968A;          /* antes #8C8376 (4,2:1) → 5,4:1 */
}

/* Eyebrows y etiquetas doradas: el dorado de marca queda como acento,
   el texto pequeño usa el dorado profundo (5,4:1). */
html:not([data-theme="dark"]) .ms-main .eyebrow,
html:not([data-theme="dark"]) .ms-main .tut-badge,
html:not([data-theme="dark"]) .ms-main .ms-detect-kicker{ color:#7A5C22; }

/* La portada de login no se modifica: conserva sus tokens originales */
html:not([data-theme="dark"]) .login{
  --muted:#6D655B; --faint:#9A9184; --detect-muted:#6F6960; --msp-dis-text:#9A9184;
}

/* Insignia «N días» de la prueba PRO: blanco sobre azul 4,1:1 → 5,9:1 */
.pro-days.k-trial{ background:#1F63BE; }

/* Etiquetas de la barra inferior móvil: 9,5px era demasiado chico */
.bottombar a, .bottombar button{ font-size:10.5px; }

/* 2 · Tema oscuro: superficies que quedaban blancas ------------------ */
html[data-theme="dark"] aside.summary{
  background:var(--surface); border-color:var(--line); color:var(--text);
}
html[data-theme="dark"] aside.summary .label{ color:var(--gold-600); }
html[data-theme="dark"] aside.summary .muted,
html[data-theme="dark"] aside.summary .placeholder{ color:var(--muted); }
html[data-theme="dark"] aside.summary .sum-top{
  background:linear-gradient(var(--surface-2), var(--surface)); border-color:var(--line);
}
html[data-theme="dark"] aside.summary .sum-top .metric{ background:transparent; }
/* Grilla de métricas: el fondo hace de línea divisoria entre celdas */
html[data-theme="dark"] .metrics{ background:var(--line-2); }

/* 3 · HOY · Clientes recientes: nombre ilegible en oscuro ------------ */
html[data-theme="dark"] .recent-row strong{ color:var(--ink); }
html[data-theme="dark"] .home-panel-head a{ color:var(--blue); }

/* 4 · Cifras de métricas: mismo tamaño en todos los módulos ------------
   Un solo tamaño base para todas las tarjetas de métricas (HOY, PRO,
   Ventas, Productos, Costos, Control). Las cifras nunca se parten ni se
   recortan (sin overflow:hidden). Si una cifra no entra en su tarjeta,
   ms-visual-polish.js reduce TODA la fila por igual, nunca una sola
   tarjeta. Los separadores y el símbolo los sigue formateando la app según
   la moneda y el país del negocio. */
:root{ --ms-kpi-fig:26px; }
/* --ms-fit: tamaño reducido de una fila, lo escribe ms-visual-polish.js en cada cifra de la fila */
@media (max-width:520px){ :root{ --ms-kpi-fig:24px; } }
.home-metric > div{ min-width:0; }
.home-metric strong,
.ev .ev-value,
.metrics .metric .fig,
.metric .fig.md,
.ms-stock-fig strong,
.sum-row .fig{
  display:block; max-width:100%; white-space:nowrap; overflow-wrap:normal;
  font-size:var(--ms-fit, var(--ms-kpi-fig)); line-height:1.15; font-variant-numeric:tabular-nums;
}
.ev td, .ev th{ font-variant-numeric:tabular-nums; }

/* 5 · PRO · gráficos legibles en oscuro ------------------------------ */
html[data-theme="dark"] .ev svg path[stroke="#123844"],
html[data-theme="dark"] .ev svg circle[stroke="#123844"]{ stroke:#9CC2EE; }
html[data-theme="dark"] .ev svg path[stroke="#509b80"]{ stroke:#8FC9B1; }
html[data-theme="dark"] .ev svg line[stroke="#bcc"]{ stroke:#5E7A80; }
html[data-theme="dark"] .ev-bar[style*="#123844"]{ background:#9CC2EE !important; }
.ev-legend span:first-child{ color:#123844; }
html[data-theme="dark"] .ev-legend span:first-child{ color:#9CC2EE; }
html[data-theme="dark"] .ev-legend span[style*="34775f"]{ color:#8FC9B1 !important; }
.ev svg text.ms-axis-compact{ font-variant-numeric:tabular-nums; }

/* 6 · HOY · notas con color fijo que no alcanzaban AA en claro -------- */
html:not([data-theme="dark"]) .ms-detect-note,
html:not([data-theme="dark"]) .ms-sec-head p{ color:var(--muted); }

/* 7 · Resúmenes laterales (Nuevo producto / Nuevo pedido) en claro ---- */
html:not([data-theme="dark"]) aside.summary .sum-top > .label{ color:#7A5C22; }

/* 8 · PRO / logo del negocio: botones secundarios blancos en oscuro --- */
html[data-theme="dark"] .ev button:not(.primary){
  background:var(--surface-2); color:var(--text); border-color:var(--line-2);
}

/* 9 · Productos: el precio no se aplasta contra el título en móvil ----- */
.prod-card .top > div:first-child{ flex:1 1 auto; min-width:0; }
.prod-card .top > .metric{ flex:0 0 auto; text-align:right; }

/* 10 · PRO en móvil: los 12 indicadores en una columna, como HOY, para que las
   cifras mantengan el mismo tamaño que en el resto de los módulos (24px). */
@media (max-width:520px){ .ev-grid{ grid-template-columns:minmax(0,1fr); } }

/* 11 · HOY en escritorio (4 tarjetas por fila): el ícono va arriba y la cifra usa
   todo el ancho de la tarjeta, así «Ventas del mes» conserva el tamaño común (26px)
   con importes de millones. Con 2 o 1 columna (≤980px) queda el diseño original. */
@media (min-width:981px){
  .home-metric{ flex-direction:column; gap:12px; }
  .home-metric > div{ width:100%; }
  .home-metric .hm-icon{ width:44px; height:44px; }
  .home-metric .hm-icon svg{ width:24px; height:24px; }
}

/* =====================================================================
   12 · LEGIBILIDAD Y JERARQUÍA TIPOGRÁFICA (Prompt Maestro, corrección
   obligatoria). Escala única para todo el contenido de la app (no el
   sidebar, el logo, la landing ni la portada):
     texto y descripciones .... 15px · 400–500 · interlineado 1,45
     metadatos secundarios .... 14px
     títulos de tarjeta ....... 17px · 600
     etiquetas ................ 13px · 600 · espaciado ≤ .06em
   ===================================================================== */
:root{
  --ms-t-body:15px; --ms-t-meta:14px; --ms-t-title:17px; --ms-t-label:13px; --ms-t-btn:14px;
  --ms-lh:1.45;
}

/* Etiquetas: mínimo 13px, peso 600, sin espaciado exagerado */
.ms-main :is(.eyebrow, .label, .ms-detect-kicker, .tut-badge, .ms-kind, .ev-eyebrow,
             .sum-top > .label, .metric .label, .ms-stock-fig .label){
  font-size:var(--ms-t-label); font-weight:600; letter-spacing:.06em; line-height:1.35;
}
.ms-main .field label, .ms-main .ms-ctl-inline label{
  font-size:var(--ms-t-label); font-weight:600; letter-spacing:.04em; line-height:1.35;
}
.ms-main :is(th, th.r){ font-size:var(--ms-t-label); font-weight:650; letter-spacing:.02em; line-height:1.35; }
.ms-main :is(.chip, .st, .ms-role-chip, .ms-arca-chip, .ms-tut-pill, .home-plan-note span){
  font-size:var(--ms-t-label); font-weight:600; letter-spacing:.01em;
}
.ms-main .ms-detect-legend span{ font-size:var(--ms-t-label); font-weight:700; letter-spacing:.06em; }
.ms-main .sig-kind{ font-size:var(--ms-t-label); font-weight:700; letter-spacing:.06em; line-height:1.35; }

/* Texto normal y descripciones: 15px, interlineado cómodo */
html body .ms-main :is(.desc, .hint, .sub, .page-head .sub, .muted, .ctx, .legend span, .sum-body .muted, .note, .note > div, .empty, .empty > span, .act-empty,
             .ev-muted, .ms-field-hint, .placeholder, .home-empty, .ms-detect-note, .ms-sec-head p,
             .tut-copy p, .ms-tut-copy p, .home-module-copy span, .facts span, .hm-label,
             .ms-arca-muted, .ev-logo-tools label, .ms-check span, .bar span){
  font-size:var(--ms-t-body); line-height:var(--ms-lh); letter-spacing:0;
}
.ms-main :is(.card, section.card, .ev, .ev-card, .ev-hero, .plan-card, .ms-arca-intro, .onb-foot) > p:not(.plan-lead):not(.ev-eyebrow),
.ms-main .ms-detect-brand p, .ms-main .plan-card p:not(.plan-lead){
  font-size:var(--ms-t-body); line-height:var(--ms-lh);
}
.ms-main .sig-text{ font-size:var(--ms-t-body); font-weight:500; line-height:var(--ms-lh); }
.ms-main .hm-label{ font-weight:500; }
.ms-main td{ font-size:var(--ms-t-body); line-height:1.4; }
.ms-main .ev table td, .ms-main .ev table th{ padding-top:10px; padding-bottom:10px; }

/* Metadatos secundarios: 14px */
html body .ms-main :is(.ev-card small, .home-metric small, .recent-row small, td small, .tut-dur, .tut-meta span,
             .ev-legend span, .field small, .field small.muted, .ms-choice small, .pm){
  font-size:var(--ms-t-meta); line-height:1.4;
}

/* Títulos de tarjeta: 17px · 600 */
.ms-main :is(.ev-card > h3, section.ev > h3, .tut-copy h3, .home-panel-head h2){
  font-size:var(--ms-t-title); font-weight:600; line-height:1.3;
}
.ms-main .home-module.v49 .home-module-copy strong{ font-size:var(--ms-t-title); line-height:1.25; }
.ms-main .recent-row strong{ font-size:var(--ms-t-body); font-weight:600; }
.ms-main .recent-row{ min-height:60px; }
.ms-main .recent-row .recent-avatar{ font-size:var(--ms-t-label); }

/* «Lo que necesita atención hoy»: PRODUCIR · COMPRAR · COBRAR · VOLVER A VENDER */
.ms-main .act-head h2{ font-size:var(--ms-t-title); font-weight:700; letter-spacing:.05em; line-height:1.25; }
.ms-main .act-head .desc{ font-size:var(--ms-t-body); line-height:var(--ms-lh); margin-top:4px; }
.ms-main .act-head .count{ font-size:var(--ms-t-meta); font-weight:700; min-width:34px; height:34px; }
.ms-main .act-empty{ font-size:var(--ms-t-body); line-height:var(--ms-lh); }

/* Botones, enlaces y controles internos */
.ms-main :is(.btn, .ev button, .ev-filters button){ font-size:var(--ms-t-btn); letter-spacing:.01em; }
.ms-main .btn.lg{ font-size:var(--ms-t-body); }
.ms-main :is(.home-panel-head a, a.link, .ms-group-tools a.link, .ev-card > a, .ev-card summary){
  font-size:var(--ms-t-meta); font-weight:600;
}
.ms-main .ev-filters label{ font-size:var(--ms-t-meta); }
.ms-main nav.ms-ctl-nav a{ font-size:var(--ms-t-meta); }

/* Gráficos PRO: textos del eje legibles */
.ms-main .ev svg text{ font-size:var(--ms-axis, 15px); }

/* 13 · HOY · «Tus módulos»: tarjetas homogéneas -------------------------
   Con 5 columnas (≥981px) el ícono y la flecha van en la primera línea, y
   título y descripción debajo, alineados arriba: todos los títulos quedan
   en la misma línea base aunque las descripciones tengan distinto largo. */
.ms-main .home-module.v49 .home-module-copy span{ font-size:var(--ms-t-body); line-height:1.4; }
.ms-main .home-module.v49 .home-module-copy{ gap:4px; }
@media (min-width:981px){
  .ms-main .home-module.v49{ justify-content:flex-start; }
  .ms-main .home-module.v49 .home-module-body{
    grid-template-columns:auto 1fr auto; grid-template-areas:"icon . arrow" "copy copy copy";
    align-items:center; row-gap:14px; column-gap:12px; padding:18px 18px 20px; height:100%; align-content:start;
  }
  .ms-main .home-module.v49 .home-module-icon{ grid-area:icon; }
  .ms-main .home-module.v49 .home-module-arrow{ grid-area:arrow; align-self:center; }
  .ms-main .home-module.v49 .home-module-copy{ grid-area:copy; align-self:start; }
}
@media (max-width:980px){
  .ms-main .home-module.v49 .home-module-body{ align-items:center; }
}

/* 14 · Panel lateral según el módulo -------------------------------------
   Verde MADRE SELVA en los módulos generales, azul petróleo en PRO y bordó
   con champagne en PREMIUM. Usa las mismas variables animadas del sidebar
   (transición suave, sin parpadeo). El logo oficial no se toca. */
body.ms-mode-pro .ms-sidebar,
html[data-ms-section="pro"] .ms-sidebar{ --ms-sb1:#1A4A58; --ms-sb2:#123844; --ms-sb3:#0B2A33; }
html[data-ms-section="premium"] .ms-sidebar{ --ms-sb1:#56303F; --ms-sb2:#422330; --ms-sb3:#2E1721; }
body.ms-mode-pro .bottombar, html[data-ms-section="pro"] .bottombar{ box-shadow:inset 0 3px 0 #123844 !important; }
html[data-ms-section="premium"] .bottombar{ box-shadow:inset 0 3px 0 #422330 !important; }
html[data-ms-section="premium"] .ms-sidebar .side-nav a[href="#/premium"]{
  background:linear-gradient(90deg, rgba(198,165,106,.30), rgba(198,165,106,.07)) !important;
  border-color:rgba(198,165,106,.55) !important; color:#F2DDB0 !important; box-shadow:inset 3px 0 0 #C6A56A !important;
}

/* PREMIUM en el menú: mismas letras que PRO; «Próximamente» como etiqueta discreta */
.ms-sidebar .side-nav a[href="#/premium"] .ms-nav-premium{ letter-spacing:inherit; }
.ms-sidebar .side-nav a[href="#/premium"] .ms-soon{
  margin-left:auto; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.01em;
  color:#E7D3AA; background:rgba(198,165,106,.14); border:1px solid rgba(198,165,106,.35); white-space:nowrap;
}
/* Si la altura no alcanza, el menú se desplaza (no se oculta ningún módulo) */
.ms-sidebar .side-nav{ min-height:0; overflow-y:auto; scrollbar-width:thin; }

/* 15 · PRO · encabezado «Evolución de mi negocio» ------------------------
   El logo del negocio tiene su propio espacio: ya no tapa «MADRE SELVA · PRO». */
.ms-main .ev-hero:has(> .ev-logo){
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:24px; align-items:start;
}
.ms-main .ev-hero:has(> .ev-logo) > .ev-logo{ grid-row:1 / span 5; width:72px; height:72px; border:1px solid #D9C7A6; box-shadow:0 6px 18px -12px rgba(0,0,0,.6); }
.ms-main .ev-hero:has(> .ev-logo) > :not(.ev-logo){ grid-column:2; }
.ms-main .ev-hero .ev-eyebrow{ display:block; color:#E3CC9C; font-size:var(--ms-t-label); font-weight:600; letter-spacing:.12em; }
.ms-main .ev-hero h2{ margin:8px 0 10px; line-height:1.2; overflow-wrap:anywhere; }
.ms-main .ev-hero p{ margin:0 0 6px; color:#E8EEF0; overflow-wrap:anywhere; }
@media (max-width:520px){
  .ms-main .ev-hero:has(> .ev-logo){ grid-template-columns:minmax(0,1fr); row-gap:4px; }
  .ms-main .ev-hero:has(> .ev-logo) > .ev-logo{ grid-row:auto; width:60px; height:60px; margin-bottom:10px; }
  .ms-main .ev-hero:has(> .ev-logo) > :not(.ev-logo){ grid-column:1; }
}

/* 12b · Textos secundarios con tamaño fijado en línea por la app (13px o menos) */
html body .ms-main :is(.muted, p.muted, div.muted, span.muted)[style*="font-size"]{ font-size:var(--ms-t-body) !important; line-height:var(--ms-lh); }
html body .ms-main .field small[style*="font-size"]{ font-size:var(--ms-t-meta) !important; }
/* PRO · nombre del indicador en cada tarjeta: 15px; «Anterior» queda como metadato de 14px */
html body .ms-main .ev-card > small:first-child{ font-size:var(--ms-t-body); font-weight:500; color:var(--text, #1E2228); }
html[data-theme="dark"] body .ms-main .ev-card > small:first-child{ color:#E6EEF0; }
.sheet a[href="#/premium"] .ms-nav-premium{ font:inherit; }
.sheet a[href="#/premium"] .ms-soon{
  margin-left:auto; padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:#6E3A4C; background:#F6ECEF; border:1px solid #E5CDD5; white-space:nowrap;
}
html[data-theme="dark"] .sheet a[href="#/premium"] .ms-soon{ color:#E7D3AA; background:rgba(198,165,106,.14); border-color:rgba(198,165,106,.35); }

/* 16 · Oscuro: íconos de «Tus módulos» sin círculos blancos */
html[data-theme="dark"] .ms-main .home-module.v49 .home-module-icon{ background:var(--surface-2); color:#9FD3BD; }
html[data-theme="dark"] .ms-main .home-module.v49.is-pro .home-module-icon{ background:#17344A; color:#9CC2EE; }

/* 17 · ARCA fuera de Argentina: solo una reseña informativa */
.ms-main .ms-arca-foreign{ max-width:720px; padding:24px 28px; border-left:3px solid #C6A56A; }
.ms-main .ms-arca-foreign p{ margin:0; font-size:16px; line-height:1.5; color:var(--text, #1E2228); }
html[data-theme="dark"] .ms-main .ms-arca-foreign p{ color:var(--ink); }

/* 18 · Barra inferior (móvil/tablet): etiquetas legibles, sin mayúsculas forzadas ni espaciado exagerado */
.bottombar a, .bottombar button{ font-size:12.5px; letter-spacing:.01em; text-transform:none; font-weight:600; }
@media (min-width:521px){ .bottombar a, .bottombar button{ font-size:13px; } }
/* 18b · Columnas según la cantidad real de botones (PREMIUM tiene 4, DIRECCIÓN 2): sin hueco a la derecha.
   Etiquetas de hasta dos líneas, centradas y parejas, debajo del ícono. */
html .bottombar{ grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
html .bottombar :is(a,button){ justify-content:flex-start; min-width:0; padding:8px 3px; gap:5px; text-align:center; line-height:1.15; text-wrap:balance; overflow-wrap:normal; hyphens:none; }
html .bottombar :is(a,button) svg{ flex:none; }

/* 19 · Asistente abierto (SELVA IA / IA PRO) ------------------------------
   Con el panel abierto el contenido se angosta 400px: la barra superior pasa a
   íconos (como ya hace la app por debajo de 1280px) y los botones del asistente
   no se encogen, así «IA PRO» ya no tapa «Ayuda». */
body.ms-assist-open .ms-topzone.v6 .top-assist{ flex:0 0 auto; }
@media (max-width:1700px){
  body.ms-assist-open .ms-topzone.v6 .utility-btn span{ display:none; }
  body.ms-assist-open .ms-topzone.v6 .utility-btn{ width:44px; height:44px; padding:0; justify-content:center; }
}
/* Encabezado de IA PRO: la insignia de la prueba va debajo del título, sin superponerse */
.ms-assist.mode-pro .ms-assist-titles h2{ padding-right:0; }
.ms-assist.mode-pro .ms-assist-titles .pro-ia-status{ position:static; margin-top:6px; height:22px; }
.ms-assist-head .pro-ia-status{ font-size:12px; }
.ms-assist-head p{ font-size:13px; }

/* 20 · Asistente (SELVA IA / IA PRO): misma escala de legibilidad */
.ms-assist .pro-qs-title{ font-size:var(--ms-t-label); font-weight:700; letter-spacing:.06em; line-height:1.35; }
.ms-assist .pro-q{ font-size:var(--ms-t-meta); line-height:1.35; }
.ms-assist .ms-assist-foot, .ms-assist .ms-assist-foot *{ font-size:13px; line-height:1.4; }
.ms-assist .ms-assist-foot > button, .ms-assist .ms-assist-foot > a{ font-size:var(--ms-t-meta); }

/* 21 · PRO · encabezado ejecutivo (reemplaza el bloque azul) ---------------
   Un solo título (el de la página). Debajo, una franja marfil con borde
   champagne fino: logo del establecimiento + datos del negocio, alineados.
   El azul petróleo queda para el sidebar, botones, gráficos y métricas. */
html[data-ms-section="pro"] .ms-main .page-head{ margin-bottom:14px; }
@media screen{ .ms-main .ev-hero h2{ display:none; } }
.ms-main .ev-hero{
  background:#FCFAF6; color:var(--text, #1E2228); border:1px solid #D9C7A6; border-radius:14px;
  padding:14px 20px; box-shadow:0 1px 0 rgba(198,165,106,.18); position:relative; overflow:hidden;
}
.ms-main .ev-hero::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:#C6A56A; }
.ms-main .ev-hero:has(> .ev-logo){ column-gap:16px; align-items:center; }
.ms-main .ev-hero:has(> .ev-logo) > .ev-logo{ grid-row:1 / span 3; width:56px; height:56px; border:1px solid #D9C7A6; box-shadow:none; border-radius:12px; }
.ms-main .ev-hero .ev-eyebrow{ color:#8A6A2E; font-size:13px; letter-spacing:.08em; margin:0 0 2px; }
.ms-main .ev-hero p{ margin:0; color:var(--muted); font-size:var(--ms-t-body); line-height:1.45; }
.ms-main .ev-hero p:first-of-type{ color:var(--text, #1E2228); font-weight:600; }
html[data-theme="dark"] .ms-main .ev-hero{ background:var(--surface); color:var(--text); border-color:rgba(198,165,106,.38); box-shadow:none; }
html[data-theme="dark"] .ms-main .ev-hero .ev-eyebrow{ color:#E3CC9C; }
html[data-theme="dark"] .ms-main .ev-hero p{ color:var(--muted); }
html[data-theme="dark"] .ms-main .ev-hero p:first-of-type{ color:var(--ink); }
.ms-main .ev .ev-filters{ margin-top:14px; margin-bottom:14px; }
@media (max-width:520px){
  .ms-main .ev-hero{ padding:12px 14px 12px 16px; }
  .ms-main .ev-hero:has(> .ev-logo){ grid-template-columns:auto minmax(0,1fr); row-gap:0; }
  .ms-main .ev-hero:has(> .ev-logo) > .ev-logo{ grid-row:1 / span 3; width:48px; height:48px; margin:0; }
  .ms-main .ev-hero:has(> .ev-logo) > :not(.ev-logo){ grid-column:2; }
}
/* «Exportar PDF» comparte fila con el período analizado (una fila menos antes de los indicadores) */
.ms-main #ev-results{ display:flex; flex-wrap:wrap; align-items:center; column-gap:16px; row-gap:0; }
.ms-main #ev-results > *{ flex:1 1 100%; order:2; min-width:0; }
.ms-main #ev-results > button:first-child{ flex:0 0 auto; order:1; margin:0 0 12px; }
.ms-main #ev-results > button:first-child + .ev-muted{ flex:1 1 0; order:0; margin:0 0 12px; }