/* MADRE SELVA · ms-modulos-v5.css · v1 · 10/10/2026
   Correcciones de legibilidad del Documento maestro v5 (30 áreas). Capa final de la cascada:
   se carga después de ms-visual-polish.css. No cambia la tipografía de marca, colores, logos,
   avatares, navegación en L ni identidades BASE/PRO/PREMIUM. Sin aumentos globales ciegos:
   cada regla apunta a un módulo o a un patrón (importes, estados, selectores) concreto. */

/* ── Regla transversal: cifras, porcentajes, estados y fechas se leen como una unidad ── */
.metric .fig,.fig,.legend b,.plist .pm,.chip.num,.table td.r,.table th.r,
.st,.ms-stock-fig strong,.home-metric strong,.delivery-date,.ev-value,
.sum-row .fig,.sum-row .num{white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.table .st{flex:0 0 auto}

/* ── 3 · Costos: panel CUESTA / SE VENDE A / TE DEJA ── */
.equation{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));align-items:start;row-gap:18px}
.equation .op{display:none}
.equation .metric{min-width:0}
.equation .metric .fig.xl{font-size:clamp(26px,2.7vw,40px);line-height:1.1}
.plist a > div{min-width:0}
.plist a .chip{flex:0 0 auto}
@media (max-width:720px){
  .equation{grid-template-columns:1fr;gap:12px}
  .equation .metric{display:grid!important;grid-template-columns:1fr;justify-items:start;gap:4px;padding-bottom:14px}
  .equation .metric .fig.xl{font-size:clamp(24px,7.4vw,32px)}
  .legend b{font-size:17px}
}

/* ── 5 · Ventas (y toda tabla financiera): desplazamiento dentro de la tabla, nunca cifras partidas ── */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:721px){
  .tbl > .table{min-width:max-content;width:100%}
  .table td{vertical-align:middle}
  .table td:not(.r):not(:has(.st)){white-space:normal;min-width:9ch;max-width:30ch;overflow-wrap:normal;word-break:normal}
}
.table th{font-size:11.5px;letter-spacing:.12em}
@media (max-width:720px){
  .table td::before{font-size:11px;letter-spacing:.1em;padding-top:2px}
  .table td{align-items:flex-start;flex-wrap:nowrap}
  .table td > *{min-width:0}
  .table td:not(.r){text-align:right;overflow-wrap:break-word}
}

/* ── 1 · Productos: acción «+ Nuevo producto» con ancho propio, sin apretarse ── */
.ms-group-tools{justify-content:flex-end}
.ms-group-tools .link{white-space:nowrap}
.ms-prod-group .section-title{flex-wrap:wrap;row-gap:10px}
.ms-prod-group .section-title > div:first-child{flex:1 1 260px;min-width:0}
.prod-card .top{gap:14px}
.prod-card .top > div:first-child{min-width:0}
.prod-card .top .label{line-height:1.6;margin-bottom:2px}
.prod-card .top .metric{flex:0 0 auto;text-align:right}

/* ── 2 · Nuevo producto y 6 · Nuevo pedido: selector a ancho completo, cantidad y quitar debajo ── */
@media (max-width:600px){
  .ms-line{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"sel sel" "qty del";row-gap:8px}
  .ms-line > select{grid-area:sel}
  .ms-line > input{grid-area:qty}
  .ms-line > .idel,.ms-line > .btn{grid-area:del;justify-self:end}
  .ms-line .ms-line-unit{display:none}
  .ms-lines .ms-line + .ms-line{padding-top:10px;border-top:1px dashed var(--line)}
}
#dtEcho{font-size:13.5px!important;color:var(--text)!important;font-weight:500}

/* ── 26 · Hoy: próximas entregas y alertas ── */
.delivery-row{font-size:13px}
.delivery-row .st{font-size:11.5px}
.home-attention .act-head h2{font-size:12.5px;letter-spacing:.14em}
.recent-row strong{font-size:13.5px}
.recent-row small{font-size:12px}
@media (max-width:600px){
  .delivery-row{grid-template-columns:72px minmax(0,1fr)!important;align-items:start;padding:10px 0}
  .delivery-order,.delivery-client{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:block!important;overflow-wrap:break-word}
  .delivery-client{grid-column:2;color:#4D5664;font-size:12.5px;margin-top:-6px}
}

/* ── 10 / 27 · Detalle de pedido y 11 / 28 · Stock de reventa: importes completos en celular ── */
@media (max-width:520px){
  #resaleDetail .metric .fig.xl,#order-detail .metric .fig.xl{white-space:nowrap!important;overflow-wrap:normal!important;font-size:clamp(19px,6vw,28px)!important}
}
#order-detail .card-head,#resaleDetail .card-head{flex-wrap:wrap;row-gap:12px}
#order-detail .card-head h3,#resaleDetail .card-head h3{overflow-wrap:break-word}

/* ── 4 / 29 · Producción y planificación: cantidades, unidades y fechas sin cortes ── */
.plan-row .what,.run-head .muted{overflow-wrap:break-word}
.plan-row .num,.plan-row .fig,.s-metrics .fig,.ing-row .num{white-space:nowrap}
.s-metrics .metric .label{font-size:10.5px}

/* ── 9 / 7 · Clientes: nombres largos parten por palabras sin invadir cifras ni chips ── */
.profile h1,.profile h2,.profile h3,.page-head h1{overflow-wrap:break-word;hyphens:manual}
.cust-card,.profile{min-width:0}

/* ── 30 · Avisos: no tapan Guardar / Cobrar ── */
@media (max-width:980px){
  .toast{top:calc(14px + env(safe-area-inset-top));bottom:auto!important;transform:translate(-50%,-16px)}
  .toast.show{transform:translate(-50%,0)}
}

/* ── 12 / 13 · Configuración y Nuevo negocio ── */
.ms-main .metric .ctx{overflow-wrap:break-word}
.onb-foot{flex-wrap:wrap;gap:12px}
@media (max-width:600px){
  .onb-form .note{margin-bottom:6px}
  .onb-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .onb-foot .btn{width:100%;justify-content:center}
  .onb-form .field label{font-size:12.5px}
}

/* ── 14 · Tutoriales: lectura rápida ── */
.tut-copy p{font-size:13.5px;line-height:1.5}
.tut-badge{font-size:11px}
.tut-dur{font-size:12.5px}
.tut-meta{gap:8px 12px}

/* ── 15 / 22 · Control del negocio: pestañas legibles y roles en frases breves ── */
.ms-ctl-nav{flex-wrap:wrap;row-gap:8px}
.ms-role-list{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:8px}
.ms-role-list li{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:4px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;line-height:1.45}
.ms-role-list b{color:var(--ink)}
.ms-role-list span{color:var(--muted)}
@media (max-width:600px){.ms-role-list li{grid-template-columns:1fr}}
#ctl-counts .note,#ctl-team .note,#ctl-activity .note{line-height:1.55}
.ms-ctl-inline{flex-wrap:wrap}

/* ── 16 · Importador: botones cómodos en celular ── */
@media (max-width:600px){
  .msi-body .card .btn,.msi-body .card label.btn{width:100%;justify-content:center;min-height:44px}
  .msi-choices{grid-template-columns:1fr!important}
}

/* ── 18 · Mi cuenta: superficie sólida y áreas táctiles en celular ── */
.account-menu{background:var(--surface);opacity:1}
@media (max-width:980px){
  .account-menu{max-width:calc(100vw - 24px)}
  .account-item{min-height:44px}
  .acct-theme-opt{padding:8px 12px;font-size:12.5px}
}

/* ── 23 / 24 / 25 · SELVA IA e IA PRO: campo de mensaje legible y encabezado sin solaparse ── */
@media (max-width:980px){
  .ms-assist-compose input{font-size:16px;height:44px}
  .ms-assist-head{flex-wrap:wrap}
  .ms-assist-head p{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ── PRO: cifras de los indicadores sin partirse (diseño PRO intacto) ── */
@media (max-width:520px){
  .ev-value{white-space:nowrap!important;overflow-wrap:normal!important;font-size:clamp(19px,6vw,24px)!important}
}

/* ── PRO (centro carbón): título de página legible. Solo color; respeta la identidad PRO aprobada ── */
html[data-theme="dark"][data-ms-section="pro"] .page-head h1{color:var(--pc-text,#EDEFF2)!important}
html[data-theme="dark"][data-ms-section="pro"] .page-head p,html[data-theme="dark"][data-ms-section="pro"] .page-head .sub{color:var(--pc-text-2,#B4BBC4)!important}

/* ── 31 · QA real del Preview (10/10/2026): cifras completas y texto con aire en todos los paneles ──
   Solo disposición y color de texto en tema oscuro. No cambia cantidades, cálculos, stock, reglas de negocio
   ni el tamaño tipográfico. */

/* Tarjetas de acción de Hoy (Reponer, Cobrar, Volver a vender, Producir, Comprar). La tarjeta decide por su
   propio ancho (container query): igual en celular y en la grilla de dos columnas de escritorio. */
.ms-main .act-card{container-type:inline-size;container-name:actcard}
.ms-main .act-item{grid-template-columns:minmax(0,1fr) max-content;column-gap:20px}
.ms-main .act-item .val{min-width:max-content;padding-right:8px}
.ms-main .act-item .val .fig{white-space:nowrap!important;overflow:visible;text-overflow:clip}
.ms-main .act-item .val .cap{white-space:normal;max-width:26ch;margin-left:auto;overflow-wrap:normal}
@container actcard (max-width:400px){
  .ms-main .act-item{grid-template-columns:minmax(0,1fr)}
  .ms-main .act-item .val{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;text-align:left;padding-right:0;min-width:0}
  .ms-main .act-item .val .cap{margin:0;max-width:none}
}

/* Próximas entregas: la etiqueta «Vencido · N días» nunca se parte; la columna de fecha crece lo necesario. */
.delivery-date{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.delivery-date .st{white-space:nowrap}
.delivery-row{grid-template-columns:minmax(82px,max-content) minmax(0,1.25fr) minmax(90px,.8fr) auto}
@media (max-width:980px){.delivery-row{grid-template-columns:minmax(72px,max-content) minmax(0,1fr) auto}}
@media (max-width:600px){.delivery-row{grid-template-columns:minmax(72px,max-content) minmax(0,1fr)!important}}

/* Tema oscuro: filas y métricas con fondo propio llevan margen interno; el texto nunca toca el borde. */
html[data-theme="dark"] .ms-main :is(.act-item,.act-empty,.delivery-row,.recent-row){padding-left:16px!important;padding-right:16px!important}
html[data-theme="dark"] .ms-main .act-item .val{padding-right:0}
@media (max-width:520px){
  html[data-theme="dark"] .ms-main :is(.act-item,.act-empty,.delivery-row,.recent-row){padding-left:14px!important;padding-right:14px!important}
}

/* Paneles sin huecos: ningún módulo queda solo junto a un espacio vacío. */
/* Métricas de 3 (Ventas, Control y demás .metrics.cols-3): 3 secciones también en tablet, en lugar de 2 + hueco. */
@media (min-width:641px) and (max-width:900px){
  .metrics.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .metrics.cols-3 .metric{border-top:0!important;border-left:1px solid var(--line)!important}
  .metrics.cols-3 .metric:first-child{border-left:0!important}
  .metrics:not(.cols-3)>.metric:last-child:nth-child(odd){grid-column:1/-1}
}
/* Hoy, escritorio: si la cantidad de tarjetas de acción es impar, la última ocupa todo el ancho. */
@media (min-width:981px){.ms-main .today-grid>:last-child:nth-child(odd){grid-column:1/-1}}
/* Costos · Cuesta / Se vende a / Te deja: flujo que se estira; si «Te deja» baja de renglón, ocupa todo el ancho. */
.ms-main .equation{display:flex!important;flex-wrap:wrap;gap:18px 18px}
.ms-main .equation .metric{flex:1 1 190px}
@media (max-width:640px){.ms-main .equation .metric{flex-basis:100%}}
/* Tutoriales: la última tarjeta se estira para cubrir la fila. */
.ms-main .tut-grid{display:flex!important;flex-wrap:wrap}
.ms-main .tut-grid>*{flex:1 1 280px;min-width:0}

/* Tema oscuro: textos que quedaban con colores del tema claro (contraste < 3:1). */
html[data-theme="dark"] .delivery-order{color:var(--text)!important}
html[data-theme="dark"] .delivery-date{color:var(--muted)!important}
html[data-theme="dark"] .chip.gold{color:var(--gold-600)!important}
html[data-theme="dark"] .ms-tag{color:var(--bordo-600)!important}
html[data-theme="dark"] .act-card.hot .act-head .count{color:#2A1418!important}

/* Importes dentro de celdas tipo ficha (Control, celular): el importe no se encoge ni se corta; el texto alrededor sí puede saltar. */
.ms-main td[data-label]>b,.ms-main td[data-label]>strong{flex-shrink:0;white-space:nowrap;overflow-wrap:normal}
.ms-main .chip{white-space:nowrap}

/* Mi plan · tema oscuro completo: nada claro cuando el cliente elige oscuro. Se conservan las identidades:
   BASE verde esmeralda + dorado, PRO azul noche + dorado, PREMIUM bordó + dorado. */
html[data-theme="dark"] .msp3,html[data-theme="dark"] .msp3-modal{--ink:#ECE5D9;--muted:#B5AB9C;--line:#3A332C;--card:#1F1C19}
html[data-theme="dark"] .msp3-tabs{background:#27231F;border-color:#3A332C}
html[data-theme="dark"] .msp3-tabs button[aria-checked="true"]{background:#1B5A49;color:#fff}
html[data-theme="dark"] .msp3-card.plan-standard{background:linear-gradient(180deg,#0F271F 0,#143628 100%);color:#EAF3EE;border-color:#24503F}
html[data-theme="dark"] .plan-standard .msp3-name,html[data-theme="dark"] .plan-standard .msp3-feats svg{color:#8FC9B1}
html[data-theme="dark"] .plan-standard .msp3-btn{background:#1B5A49;color:#fff;box-shadow:inset 0 0 0 1px #2E7A63}
html[data-theme="dark"] .msp3-status{background:#1F1C19;border-color:#3A332C;border-left-color:#8FC9B1}
html[data-theme="dark"] .msp3-status.k-warn{border-left-color:#D4B074}
html[data-theme="dark"] .msp3-st-eyebrow{color:#E0C38F}
html[data-theme="dark"] .msp3-st-chip{background:#1B2B25;color:#A7D6C2}
html[data-theme="dark"] .msp3-status.k-warn .msp3-st-chip{background:#2B2419;color:#E0C38F}
html[data-theme="dark"] .msp3-msg.k-pending,html[data-theme="dark"] .msp3-msg.k-warn{background:#2B2419;border-color:#5A4A2A;color:#E8D3A0}
html[data-theme="dark"] .msp3-msg.k-ok{background:#1B2B25;border-color:#2F5A48;color:#A7D6C2}
html[data-theme="dark"] .msp3-msg.k-err{background:#2E1D21;border-color:#5A2A35;color:#F0B4C1}
html[data-theme="dark"] .msp3-modal-card{background:#1F1C19;color:var(--ink);border:1px solid #3A332C}
html[data-theme="dark"] .msp3-trial{background:#2B2419;border-color:#4A3D22;color:#E8D3A0}
html[data-theme="dark"] .msp3-trial a{color:#A7D6C2}
html[data-theme="dark"] #planV3Host .plan-v3-manage .btn,html[data-theme="dark"] #billingPortal{background:#27231F;color:#A7D6C2;border-color:rgba(143,201,177,.45)}
html[data-theme="dark"] #planV3Host .plan-v3-manage .btn:hover:not(:disabled),html[data-theme="dark"] #billingPortal:hover:not(:disabled){background:#2E2924;border-color:#C9A24A}

/* Clientes · tarjetas: avatar siempre visible, nombre en hasta dos líneas, datos ordenados (todos los clientes). */
.cust-card .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.cust-card .facts span,.cust-card .chips .chip{white-space:nowrap}
@media (max-width:520px){
  .cust-card{gap:14px}
  .cust-card .avatar:not(.lg){width:46px;height:46px;font-size:17px}
}
/* Tema oscuro: el avatar neutro (.k) tenía iniciales oscuras sobre círculo oscuro; todos los avatares con anillo sutil. */
html[data-theme="dark"] .avatar.k{background:#4A4138;color:#F4EEE4}
html[data-theme="dark"] .avatar:not(.lg){box-shadow:0 0 0 1px rgba(244,238,228,.12)}
/* Tema oscuro (fuera de PRO, que conserva su carbón y grafito): tarjetas diferenciadas del fondo. */
html[data-theme="dark"]:not([data-ms-section="pro"]) .ms-main .card{border-color:var(--line-2)}
/* Tema oscuro: la píldora del acceso PRO activo en el menú lateral dejaba de ser blanca. */
html[data-theme="dark"] .side-nav a.nav-pro.active .pro-days{background:#1B3A66;color:#DDEBFF;border:1px solid rgba(156,200,255,.4)}
/* PRO · Evolución (escritorio): la última fila de indicadores se estira en lugar de dejar celdas vacías (10 en 4 columnas → 4·4·2). */
.ms-main .ev-grid{display:flex!important;flex-wrap:wrap}
.ms-main .ev-grid>.ev-card{flex:1 1 220px;min-width:0}
/* QA 10/10/2026 · H2 · Áreas táctiles en Hoy (móvil / puntero grueso): ≥44 px de alto sin cambiar el diseño.
   El área se amplía con un pseudo-elemento transparente; los enlaces conservan tamaño, posición, color y espaciado.
   · «Registrar cobro», «Nuevo pedido», «Ver perfil», «Reponer»…: 14 px → 44 px (−10 arriba, −20 abajo, dentro del
     espacio de la fila; −6 a los lados deja 6 px libres entre dos enlaces vecinos separados 18 px).
   · «Ver agenda» / «Ver todo» del encabezado del panel: 21 px → 45 px.
   · Píldora del plan (Hoy): 27 px → 45 px. */
@media (max-width:760px),(pointer:coarse){
  .ms-main .act-item .go>a.link{position:relative}
  .ms-main .act-item .go>a.link::after{content:"";position:absolute;inset:-10px -6px -20px}
  .ms-main .home-panel-head>a{position:relative}
  .ms-main .home-panel-head>a::after{content:"";position:absolute;inset:-12px -8px}
  .ms-main .home-plan-note{position:relative}
  .ms-main .home-plan-note::after{content:"";position:absolute;inset:-9px -4px}
}

/* ── 26 · Píldoras de estado sin cortes y Compras legible (QA 17/10) ──
   `.ms-main :is(.btn,.chip,.st)` (styles-v2) habilita el corte por letra para botones largos; en una píldora de estado
   partía «PLANIFICADA» en dos renglones. La tabla de Compras de Producción (≈660 px) no entraba en media columna. */
.ms-main .st{white-space:nowrap;overflow-wrap:normal;word-break:normal;flex:none}
@media (max-width:1500px){.ms-main .stack:has(.plan-row,.run) > .grid-2{grid-template-columns:minmax(0,1fr)}}

/* Avisos globales legibles en los dos temas: contraste independiente del fondo de pantalla. */
.toast,
.toast.show,
#msxToast.toast,
#msxToast.toast.show {
  background-color: #142c26 !important;
  color: #fffaf0 !important;
  border: 1px solid #c7a46b !important;
  text-shadow: none !important;
}
.toast.err,
.toast.show.err,
#msxToast.toast.err {
  background-color: #4a1f27 !important;
  color: #fffaf0 !important;
  border-color: #ebadad !important;
}
.toast *,
#msxToast.toast * { color: inherit !important; }