/* Inteligencia de Mercado › «Qué hacer hoy» y «Salud del dato» (12/10). Lo dibuja web/js/mercado-inteligente.js. Todo
   lleva el prefijo `mi-`. Láminas: sesiones/2026-10-12-analisis-inteligente/mockups. Los colores salen de los tokens de
   Central (central-tokens.css): acá no se define ningún color propio. */
#page-mercado-hoy, #page-mercado-salud { --font-serif: var(--sans); } .mi-pag { overflow: auto; display: block; }
/* botones, chips y datos sueltos */
.mi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.mi-btn:hover { border-color: var(--ink-2); } .mi-btn:focus-visible, .mi-fila:focus-visible, .mi-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mi-btn.ch { min-height: 32px; padding: 5px 12px; font-size: 12.5px; } .mi-btn.pri { background: var(--go); border-color: var(--go); color: var(--card); }
.mi-r { display: inline-flex; align-items: center; font: 700 11px var(--sans); border-radius: 99px; padding: 2px 9px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.mi-r.go { color: var(--go-ink); background: var(--go-soft); border-color: transparent; } .mi-r.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.mi-r.bad { color: var(--bad); background: var(--bad-soft); border-color: transparent; } .mi-r.info { color: var(--dom-mercado); background: var(--dom-mercado-soft); border-color: transparent; }
.mi-dato { display: inline-flex; gap: 5px; align-items: center; font: 600 12px var(--sans); color: var(--ink-2); }
.mi-pie { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.mi-nada { margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px dashed var(--line-2); border-radius: 14px; padding: 16px; font-size: 13px; color: var(--ink-2); }
.mi-nada svg { color: var(--go); flex: none; } .mi-nada.err { border-color: var(--bad); color: var(--ink); justify-content: space-between; }
/* el estado del dato, antes que cualquier precio */
.mi-salud { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 14px; padding: 12px 14px; margin: 4px 0 14px; }
.mi-salud.leve { background: var(--card); } .mi-salud.ok { border-color: var(--line); background: var(--card); } .mi-salud.ok .mi-salud-i { color: var(--go); }
.mi-salud-i { color: var(--warn); flex: none; padding-top: 2px; } .mi-salud-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .mi-salud-b > b { font: 800 15px var(--sans); color: var(--ink); }
.mi-salud-b p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); } .mi-salud-l { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .mi-salud-a { flex: none; align-self: center; }
/* la portada */
.mi-dos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; } .mi-dos.par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 12px; } .mi-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mi-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.mi-fil { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .mi-tot { font-size: 12.5px; color: var(--ink-2); } .mi-tot b { font: 800 14px var(--sans); color: var(--ink); margin-right: 6px; }
.mi-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; } .mi-seg button { border: 0; background: var(--card); color: var(--ink-2); font: 700 12.5px var(--sans); padding: 7px 12px; min-height: 34px; cursor: pointer; }
.mi-seg button + button { border-left: 1px solid var(--line-2); } .mi-seg button[aria-pressed="true"] { background: var(--go-soft); color: var(--go-ink); }
.mi-gr { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; } h2.mi-gr { margin: 0; font: 800 15px var(--sans); color: var(--ink); } h2.mi-gr:focus { outline: none; } .mi-gr h2, .mi-gr h3 { margin: 0; font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.mi-gr.sub h3 { letter-spacing: 0; text-transform: none; font-size: 13px; } .mi-gr small { font-size: 11.5px; color: var(--ink-2); }
.mi-card { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mi-card-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .mi-card-h b { font: 800 14px var(--sans); color: var(--ink); display: inline-flex; gap: 6px; align-items: center; } .mi-card-h small { font-size: 11.5px; color: var(--ink-2); }
/* un aviso */
.mi-av { border: 1px solid var(--line); border-left: 4px solid var(--line-2); background: var(--card); border-radius: 12px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mi-av.alta { border-left-color: var(--bad); } .mi-av.extrema { border-color: var(--bad); border-left-width: 6px; } .mi-av.media { border-left-color: var(--warn); } .mi-av.info { border-left-color: var(--dom-mercado); }
.mi-av-h { display: flex; gap: 8px; align-items: center; } .mi-av-h small { font-size: 11.5px; color: var(--ink-2); }
.mi-sev { font: 800 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 2px 9px; } .mi-sev.alta { color: var(--bad); background: var(--bad-soft); } .mi-sev.media { color: var(--warn); background: var(--warn-soft); }
.mi-sev.info { color: var(--dom-mercado); background: var(--dom-mercado-soft); } .mi-av h3 { margin: 0; font: 800 15px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.mi-nums { display: flex; gap: 6px 18px; flex-wrap: wrap; } .mi-n { display: flex; flex-direction: column; gap: 1px; } .mi-n small { font-size: 10.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.mi-n b { font: 700 13.5px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.mi-av-p { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .mi-conf, .mi-acc { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* el estado de un aviso y el formulario de descarte */
.mi-estado { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; } .mi-estado.volvio { color: var(--warn); font-weight: 700; } .mi-desc { border-style: dashed; color: var(--ink-2); }
.mi-seg b { font-weight: 800; margin-left: 2px; } .mi-err { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--bad); } .mi-btn[disabled] { opacity: .55; cursor: default; }
.mi-form { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; } .mi-form label { font: 800 12.5px var(--sans); color: var(--ink); }
.mi-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); font: 500 13px/1.45 var(--sans); padding: 8px 10px; resize: vertical; } .mi-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* cajas compactas: lo que no es un aviso firme */
.mi-caja { border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; } .mi-caja.info { border-color: var(--dom-mercado); }
.mi-caja-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; } .mi-caja-h b { font: 800 13px var(--sans); color: var(--ink); } .mi-caja-h small { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.mi-fila { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 36px; padding: 4px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 500 12.5px var(--sans); text-align: left; cursor: pointer; }
.mi-fila > b { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .mi-fila > span, .mi-linea > span { font-variant-numeric: tabular-nums; white-space: nowrap; } .mi-fila > small, .mi-linea > small { font-size: 11.5px; color: var(--ink-2); }
.mi-fila:hover > b { text-decoration: underline; } .mi-che { color: var(--ink-2); display: inline-flex; flex: none; } .mi-fila[aria-expanded="true"] .mi-che { transform: rotate(90deg); } .mi-fila .mi-r { white-space: normal; text-align: right; }
.mi-dentro { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 8px 12px; border-left: 2px solid var(--line); margin-left: 2px; }
.mi-linea { display: flex; gap: 10px; align-items: center; min-height: 28px; font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--line); padding: 4px 0; } .mi-linea > b { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.mi-dentro .mi-linea { border-top: 0; padding: 0; } .mi-caja-a { align-self: flex-start; margin-top: 6px; }
/* la semana y dónde estamos parados */
.mi-tf { display: grid; grid-template-columns: minmax(0, 1fr) 46px 50px 46px 104px; gap: 6px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; } .mi-tf > b { font-weight: 700; color: var(--ink); } .mi-tf .mi-bar { grid-column: 1 / -1; }
.mi-bar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); } .mi-bar i { display: block; height: 100%; width: 0; } .mi-bar .b { background: var(--go); } .mi-bar .i { background: var(--line-2); } .mi-bar .s { background: var(--bad); }
.mi-tn { display: inline-flex; gap: 3px; align-items: center; font: 700 12px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .mi-tn.baja { color: var(--go-ink); } .mi-tn.sube { color: var(--bad); } .mi-tn.nc { font-weight: 500; justify-self: end; }
.mi-bf { display: grid; grid-template-columns: minmax(0, 1fr) auto 66px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); } .mi-bf b { font-weight: 700; color: var(--ink); }
.mi-bp { font: 800 12.5px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; justify-self: end; white-space: nowrap; } .mi-bp.arr { color: var(--warn); } .mi-bp.aba { color: var(--go-ink); }
.mi-aria { border-style: dashed; border-color: var(--dom-mercado); } .mi-aria p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); } .mi-aria .mi-card-h b { color: var(--dom-mercado); }
/* el informe de la semana */
.mi-inf p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); } .mi-inf .mi-card-h .mi-r { margin-left: auto; } .mi-inf .mi-btn { align-self: flex-start; }
.mi-inf-c { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; } .mi-inf-c > b { font: 800 12.5px var(--sans); color: var(--ink); } .mi-inf-c > small { font-size: 11.5px; color: var(--ink-2); }
.mi-inf-c .mi-linea { border-top: 0; padding: 2px 0; } .mi-inf-sem { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; } .mi-inf-sem .mi-seg { flex-wrap: wrap; }
/* un aviso por dentro */
.mi-volver { margin: 0 0 10px; } .mi-det { max-width: 900px; gap: 12px; } .mi-det h2 { margin: 0; font: 800 19px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .mi-det h2:focus { outline: none; } .mi-det-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.mi-regla { padding: 10px 8px 0; } .mi-regla-l { position: relative; height: 6px; border-radius: 99px; background: var(--line); margin: 0 4px; }
.mi-regla-m { position: absolute; top: -6px; left: 0; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--ink-2); } .mi-regla-m.med { background: var(--ink); } .mi-regla-m.nos { width: 6px; margin-left: -3px; top: -8px; height: 22px; background: var(--warn); z-index: 1; }
.mi-regla-t { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; } .mi-regla-t span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mi-regla-t span:last-child { text-align: right; }
.mi-regla-t small { font-size: 10.5px; color: var(--ink-2); } .mi-regla-t b { font: 700 12.5px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .mi-regla-t .nos b, .mi-regla-t .nos small { color: var(--warn); }
.mi-ttb { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .mi-tt { display: grid; grid-template-columns: minmax(0, 1.1fr) 100px minmax(0, 1fr) minmax(0, 0.9fr) 160px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.mi-tt.cab { border-top: 0; background: var(--bg); } .mi-tt.cab small { font: 700 10.5px var(--sans); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; } .mi-tt.nos { background: var(--warn-soft); } .mi-tt b { font-weight: 700; overflow-wrap: anywhere; } .mi-tt a { color: var(--link); }
.mi-tt .mi-r { justify-self: start; } .mi-pr { font: 700 13px var(--sans); font-variant-numeric: tabular-nums; } .mi-ant { color: var(--ink-2); font-size: 12px; }
.mi-conf-b { border-top: 1px solid var(--line); padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .mi-conf-b > .mi-pie { flex-basis: 100%; margin: 2px 0 0; } .mi-conf-b > b { font: 800 12.5px var(--sans); color: var(--ink); margin-right: 4px; }
.mi-acc-b { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .mi-det .mi-acc-b { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 0; } .mi-acc-b .mi-pie { flex: 1; min-width: 200px; margin: 0; }
/* salud del dato */
.mi-pt { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--line-2); } .mi-pt.ok { background: var(--go); } .mi-pt.atrasada, .mi-pt.viejo, .mi-pt.salteada { background: var(--warn); } .mi-pt.fallo { background: var(--bad); }
.mi-et { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .mi-et b { font: 700 13px var(--sans); color: var(--ink); display: block; }
.mi-et small { font-size: 11.5px; color: var(--ink-2); display: block; line-height: 1.4; overflow-wrap: anywhere; } .mi-et-c { text-align: right; }
.mi-fr { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink); } .mi-fr b { font-weight: 700; } .mi-fr span { grid-column: 2; color: var(--ink-2); }
.mi-fr small { grid-row: 1; grid-column: 3; font-size: 11.5px; color: var(--ink-2); }
/* las cuatro columnas «Nosotros contra el mercado» de las grillas de Análisis (las dibuja app.js) */
.ap-group-mi { background: var(--go-soft); color: var(--go-ink); font-weight: 700; text-align: center; } th.ap-mi-col { color: var(--go-ink); }
.mi-gc { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .mi-gc-med { font-weight: 700; } .mi-gc-nd { color: var(--ink-2); font-size: 11.5px; }
.mi-gc-arr { color: var(--warn); font-weight: 800; } .mi-gc-sube { color: var(--bad); font-weight: 800; } .mi-gc.mi-gc-ten { color: var(--ink-2); font-weight: 500; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } .mi-gc-aba, .mi-gc-baja { color: var(--go-ink); font-weight: 800; } .mi-gc-rev { color: var(--ink-2); font-weight: 700; }
.mi-gc-n { font: 700 10.5px var(--sans); color: var(--warn); background: var(--warn-soft); border-radius: 99px; padding: 1px 7px; margin-left: 4px; } tr.mi-gc-foco > td { box-shadow: inset 0 2px 0 var(--go), inset 0 -2px 0 var(--go); }
/* las grillas de Análisis en el celular: tarjetas, sólo para mirar (las dibuja app.js en `<prefijo>-mobile`) */
.mi-gm { padding: 0 12px 16px; } .mi-gm-fil { display: flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; margin: 8px 0 10px; }
.mi-gm-fil button { flex: 1 1 0; min-height: var(--tap, 44px); border: 0; border-left: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 700 12.5px var(--sans); padding: 6px 8px; cursor: pointer; }
.mi-gm-fil button:first-child { border-left: 0; } .mi-gm-fil button[aria-pressed="true"] { background: var(--go-soft); color: var(--go-ink); } .mi-gm-fil b { font-weight: 800; margin-left: 2px; } .mi-gm-fil button:focus-visible, .mi-gm-mas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mi-gm-s { margin: 12px 0 6px; font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); }
.mi-gm-t { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; } .mi-gm-t.fuera { border-color: var(--warn); }
.mi-gm-t > b { font: 800 14px var(--sans); color: var(--ink); overflow-wrap: anywhere; } .mi-gm-n, .mi-gm-p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font: 700 13px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.mi-gm-p { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 8px; } .mi-gm-t small { display: block; font: 600 10.5px var(--sans); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.mi-gm-t .mi-gc-ten { color: var(--ink-2); font-weight: 500; } .mi-gm-m, .mi-gm-pie, .mi-gm-nada { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); } .mi-gm-pie { text-align: center; margin-top: 10px; } .mi-gm-nada { padding: 16px 0; font-size: 13px; }
.mi-gm-mas { width: 100%; min-height: var(--tap, 44px); border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
/* los números por categoría, con pinzas (lámina 10a): cuántos modelos sobre, en línea y bajo, y de cuántos sale */
.mi-ag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 500 12.5px var(--sans); text-align: left; cursor: pointer; }
.mi-ag:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .mi-ag[aria-expanded="true"] .mi-che { transform: rotate(90deg); } .mi-ag-c { display: flex; gap: 2px 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; } .mi-ag-c b { font-weight: 700; } .mi-ag:hover .mi-ag-c b { text-decoration: underline; }
.mi-ag-c small { font-size: 11.5px; color: var(--ink-2); } .mi-ag-bar { grid-column: 1 / -1; display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); } .mi-ag-bar i { display: block; height: 100%; width: 0; }
.mi-ag-bar .s { background: var(--warn); } .mi-ag-bar .l { background: var(--line-2); } .mi-ag-bar .b { background: var(--go); } .mi-ag-n { grid-column: 1 / -1; display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mi-ag-n b { font-weight: 800; color: var(--ink); } .mi-ag-n .s b { color: var(--warn); } .mi-ag-n .b b { color: var(--go-ink); }
/* el historial de un modelo (láminas 11a a 11m): la frase, el gráfico, la tira del semáforo y la lista de una categoría */
.mi-hi { gap: 10px; } .mi-hi .mi-card-h, .mi-hi-l .mi-card-h { align-items: center; } .mi-hi .mi-card-h .mi-seg, .mi-hi-l .mi-card-h .mi-seg { margin-left: auto; } .mi-hi-t { margin: 0; font: 800 17px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .mi-hi-t:focus { outline: none; }
.mi-hi-f { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .mi-hi-f b.s, .mi-hi-f b.g { color: var(--warn); } .mi-hi-f b.g { color: var(--bad); } .mi-hi-f b.b { color: var(--go-ink); } .mi-hi-f small { font-size: 12px; color: var(--ink-2); } .mi-hi-f .mi-r { margin-left: 4px; }
.mi-hi-svg { width: 100%; height: auto; display: block; } .mi-hi-svg .hg { stroke: var(--line); stroke-width: 1; } .mi-hi-svg .ht { font: 500 10.5px var(--sans); fill: var(--ink-2); } .mi-hi-svg .hb { fill: var(--line); opacity: .55; stroke: none; }
.mi-hi-svg .hm { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-dasharray: 4 3; } .mi-hi-svg .hmp { fill: var(--ink-2); } .mi-hi-svg .hn { fill: none; stroke: var(--warn); stroke-width: 2.4; stroke-linejoin: round; } .mi-hi-svg .hnp, .mi-hi-svg .hntp { fill: var(--warn); }
.mi-hi-svg .hnt { fill: none; stroke: var(--warn); stroke-width: 2.2; stroke-dasharray: 1.5 4; stroke-linecap: round; } .mi-hi-svg .hnr { fill: none; stroke: var(--dom-mercado); stroke-width: 1.2; } .mi-hi-svg .hnrp { fill: var(--dom-mercado); } .mi-hi-svg .hr { fill: none; stroke: var(--dom-mercado); stroke-width: 1.5; }
.mi-hi-svg .hs { fill: var(--line); } .mi-hi-svg .hs.s { fill: var(--warn); } .mi-hi-svg .hs.b { fill: var(--go); } .mi-hi-svg .hs.l { fill: var(--line-2); } .mi-hi-svg .hs.t { opacity: .45; } .mi-hi-svg .hs.r { fill: var(--dom-mercado); opacity: .6; }
.mi-hi-svg .hx { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 3; } .mi-hi-svg .hxt { font: 700 10.5px var(--sans); fill: var(--warn); }
.mi-hi-ley { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); } .mi-hi-ley span { display: inline-flex; gap: 5px; align-items: center; } .mi-hi-ley .k { width: 18px; height: 0; border-top: 2.4px solid var(--warn); display: inline-block; }
.mi-hi-ley .k.m { border-top: 1.3px dashed var(--ink-2); } .mi-hi-ley .k.t { border-top: 2.4px dotted var(--warn); } .mi-hi-ley .k.b { height: 8px; border: 0; background: var(--line); } .mi-hi-ley .k.r { width: 8px; height: 8px; border: 1.5px solid var(--dom-mercado); border-radius: 50%; }
.mi-hi-ley .q { width: 10px; height: 9px; display: inline-block; background: var(--line); } .mi-hi-ley .q.s { background: var(--warn); } .mi-hi-ley .q.l { background: var(--line-2); } .mi-hi-ley .q.b { background: var(--go); } .mi-hi-ley .q.t { opacity: .45; }
.mi-hi-l .mi-fila > small { flex: 1; min-width: 0; } .mi-hi-l .mi-fila .mi-bp { flex: none; width: 70px; text-align: right; } .mi-hi-q { flex: none; width: 170px; font-size: 12px; color: var(--ink-2); white-space: normal !important; }
.mi-sel { min-height: 34px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font: 800 13.5px var(--sans); padding: 5px 10px; max-width: 100%; } .mi-sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mi-desde { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* el historial abierto desde la grilla: un diálogo, sin salir de la grilla */
.mi-hi-dlg { margin: auto; width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: auto; }
.mi-hi-dlg::backdrop { background: var(--bg); opacity: .82; } .mi-hi-dc { padding: 14px; } .mi-hi-dc .mi-volver { display: flex; justify-content: flex-end; }
td.mi-gc-hi { cursor: pointer; } td.mi-gc-hi:hover, td.mi-gc-hi:focus-visible { text-decoration: underline; outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
/* >>> renovación visual de las grillas */
/* 13/10, láminas 09a a 09d. Dueño: «no quiero que se vaya mi estructura… una renovación visual, como para yo ver mejor la tabla
   y no perder espacios, y explorar mejor». Mismas secciones, filas y columnas, en su orden: acá sólo cambia cuánto lugar ocupa
   cada cosa. La clase `mi-rg` la pone app.js en las seis grillas de la fábrica; sin ella, la grilla queda como estaba. */
.mi-rg-ex { display: none; } .mi-rg tr.mi-rg-oc { display: none !important; }
@media (min-width: 821px) {
    /* la cabecera, en dos renglones: nada desaparece, se junta */
    .mi-rg .ap-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px !important; }
    .mi-rg .ap-header::before { content: ""; flex: 0 0 100%; height: 0; order: 5; } .mi-rg .ap-header-top, .mi-rg .mi-rg-ex { display: contents; }
    .mi-rg .ap-header-top > div:first-child { order: 1; } .mi-rg .ap-eyebrow { display: none !important; } .mi-rg .ap-header-top > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .mi-rg .apu-switcher, .mi-rg .ap-tipo-tabs { order: 2; margin: 0 !important; padding: 2px !important; } .mi-rg .apu-tab, .mi-rg .ap-tipo-tab { padding: 4px 12px !important; min-height: 0 !important; font-size: 12px !important; }
    .mi-rg .ap-kpis { order: 3; display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 14px !important; margin: 0 !important; }
    .mi-rg .ap-kpi { flex-direction: row !important; align-items: baseline; gap: 5px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; min-width: 0 !important; }
    .mi-rg .ap-kpi-label { font-size: 10.5px !important; } .mi-rg .ap-kpi-value { font-size: 12.5px !important; font-weight: 800 !important; } .mi-rg .ap-kpi-hint { display: none !important; }
    .mi-rg .mi-rg-cta { order: 3; font: 600 12px var(--sans); color: var(--ink-2); white-space: nowrap; }
    .mi-rg .mi-rg-bus { order: 4; flex: 1 1 120px; max-width: 200px; min-width: 0; height: 30px; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 9px; padding: 0 10px; background: var(--card); color: var(--ink); font: 500 12.5px var(--sans); }
    .mi-rg .mi-rg-bus:focus-visible, .mi-rg .mi-rg-ch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .mi-rg .mi-rg-bus:not(:placeholder-shown) { border-color: var(--go); }
    .mi-rg .ap-actions { order: 4; margin: 0 0 0 auto !important; gap: 6px !important; align-items: center; } .mi-rg .ap-actions .ap-btn-primary, .mi-rg .ap-actions .ap-btn-icon { height: 30px !important; min-height: 0 !important; padding: 0 10px !important; font-size: 12px !important; }
    .mi-rg .mi-rg-ex > small { order: 6; font: 700 10.5px var(--sans); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
    .mi-rg .mi-rg-ir { order: 6; flex: 1 1 60px; min-width: 0; display: flex; gap: 5px; align-items: center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .mi-rg .mi-rg-ir::-webkit-scrollbar { display: none; }
    .mi-rg .mi-rg-nota { font: 500 11.5px var(--sans); color: var(--ink-2); }
    .mi-rg .mi-rg-ch { order: 7; flex: none; font: 700 11.5px var(--sans); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 9px; background: var(--card); cursor: pointer; white-space: nowrap; }
    .mi-rg .mi-rg-ch:hover { border-color: var(--ink-2); } .mi-rg .mi-rg-ch[aria-pressed="true"] { color: var(--go-ink); background: var(--go-soft); border-color: transparent; }
    .mi-rg .ap-odoo-toolbar:not([hidden]) { display: contents; } .mi-rg .ap-odoo-toolbar > * { order: 8; flex: none; }
    .mi-rg .ap-odoo-toolbar .ap-odoo-fil { height: 28px; padding: 0 6px; font-size: 12px; } .mi-rg .ap-odoo-sel-count { margin-left: auto !important; white-space: nowrap; }
    .mi-rg .ap-odoo-toolbar .ap-btn-sm { height: 28px; min-height: 0 !important; padding: 0 10px !important; font-size: 12px !important; white-space: nowrap; } .mi-rg .ap-odoo-fil-lbl { white-space: nowrap; }
    .mi-rg .ap-odoo-gate-banner { order: 9; flex: none; margin: 0 !important; padding: 3px 9px !important; border-radius: 99px !important; font-size: 0 !important; white-space: nowrap; cursor: help; } .mi-rg .ap-odoo-gate-banner::before { content: "Aplicar deshabilitado"; font: 700 11.5px var(--sans); }
    .mi-rg .ap-candidatos-toggle > span:first-child { font-size: 0; } .mi-rg .ap-candidatos-toggle > span:first-child::before { content: "Fuera de taxonomía"; font: 700 11.5px var(--sans); }
    .mi-rg .ap-candidatos-wrap { order: 10; margin: 0 !important; border: 0 !important; background: none !important; padding: 0 !important; } .mi-rg .ap-candidatos-wrap.open { flex: 1 1 100%; }
    .mi-rg .ap-candidatos-toggle { width: auto !important; min-height: 0 !important; padding: 3px 9px !important; gap: 6px; border: 1px solid var(--line-2) !important; border-radius: 99px !important; background: var(--card) !important; font: 700 11.5px var(--sans) !important; color: var(--ink-2) !important; white-space: nowrap; }
    /* la tabla: filas más bajas, las cuatro editables más angostas y los títulos de serie más finos */
    .mi-rg { --ap-col1-w: 196px; } .mi-rg .ap-table-scroll { max-height: calc(100vh - var(--mi-rg-arriba, 230px) - 26px) !important; border-radius: 10px !important; }
    .mi-rg .ap-table { font-size: 11.5px !important; } .mi-rg .ap-table thead th { padding: 4px 7px !important; line-height: 1.15 !important; }
    .mi-rg .ap-table .ap-row-supergroup th { height: 20px; padding: 0 7px !important; box-sizing: border-box; } .mi-rg .ap-table .ap-row-head th { top: 20px !important; cursor: pointer; user-select: none; }
    .mi-rg .ap-table .ap-row-supergroup th.ap-col-modelo { cursor: pointer; user-select: none; } .mi-rg .ap-table th.mi-rg-desc::after { content: " ▼"; color: var(--go-ink); } .mi-rg .ap-table th.mi-rg-asc::after { content: " ▲"; color: var(--go-ink); }
    .mi-rg .ap-table tbody td { height: 28px; padding: 0 7px !important; font-size: 11.5px !important; line-height: 1.15 !important; box-sizing: border-box; } .mi-rg .ap-table tbody td.ap-col-modelo { padding: 0 10px !important; }
    .mi-rg .ap-table tbody tr.ap-row-serie td { height: 22px; padding: 0 10px !important; font-size: 10.5px !important; line-height: 1.1 !important; }
    .mi-rg .ap-table td.ap-col-edit, .mi-rg .ap-table th.ap-col-edit { min-width: 0 !important; } .mi-rg .ap-table thead th.ap-col-edit { background-color: var(--card) !important; } .mi-rg .ap-table .ap-escasez-badge { display: inline-block !important; margin: 0 0 0 4px !important; vertical-align: middle; } .mi-rg .ap-table .ap-input { width: 84px !important; min-width: 0 !important; height: 22px; padding: 0 5px !important; box-sizing: border-box; }
    .mi-rg .ap-table td .ap-btn-sm { min-height: 0 !important; height: 22px; padding: 0 8px !important; font-size: 10.5px !important; line-height: 1 !important; }
}
/* <<< renovación visual de las grillas */
/* celular */
@media (max-width: 820px) {
    .mi-linea { flex-wrap: wrap; gap: 2px 10px; } .mi-linea > b { flex: 1 1 55%; } .mi-linea > small { flex: 1 1 100%; } .mi-fil .mi-seg, .mi-inf-sem .mi-seg { display: flex; width: 100%; } .mi-fil .mi-seg button, .mi-inf-sem .mi-seg button { flex: 1 1 auto; padding: 6px 4px; font-size: 12px; }
    .mi-gm-pag .ap-odoo-toolbar, .mi-gm-pag .ap-odoo-gate-banner, .mi-gm-pag .ap-candidatos-wrap, .mi-gm-pag .ap-kpi-hint, .mi-gm-pag .ap-add-row { display: none !important; }
    .mi-hi .mi-card-h .mi-seg, .mi-hi-l .mi-card-h .mi-seg { margin-left: 0; display: flex; width: 100%; } .mi-hi .mi-card-h .mi-seg button, .mi-hi-l .mi-card-h .mi-seg button { flex: 1 1 auto; } .mi-hi-f { font-size: 13.5px; } .mi-sel { min-height: var(--tap, 44px); width: 100%; } .mi-hi-q { width: auto; flex: 1 1 100%; }
    .mi-hi-dlg { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; } .mi-hi-dc { padding: 10px; }
    .mi-dos, .mi-tres { grid-template-columns: minmax(0, 1fr); } .mi-btn, .mi-btn.ch { min-height: var(--tap, 44px); } .mi-seg button { min-height: var(--tap, 44px); } .mi-fila { min-height: var(--tap, 44px); flex-wrap: wrap; gap: 4px 10px; }
    .mi-salud { flex-wrap: wrap; } .mi-salud-a { width: 100%; } .mi-av-p { flex-direction: column; align-items: stretch; } .mi-acc .mi-btn { flex: 1 1 auto; } .mi-caja-a { align-self: stretch; }
    .mi-tf { grid-template-columns: minmax(0, 1fr) 40px 46px 40px; } .mi-tf .nc { grid-column: 1 / -1; justify-self: start; } .mi-det h2 { font-size: 17px; } .mi-regla-t b { font-size: 11px; }
    .mi-tt { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .mi-tt.cab { display: none; } .mi-tt .mi-ant { grid-column: 1; } .mi-tt .mi-pr, .mi-tt .mi-r { justify-self: end; } .mi-acc-b .mi-btn { flex: 1 1 100%; } .mi-tt b a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
}
/* el informe de la semana, en el teléfono: una sola columna (`.mi-dos.par` le gana por especificidad a la regla de arriba) */
@media (max-width: 600px) { .mi-dos.par { grid-template-columns: minmax(0, 1fr); } .mi-caja > .mi-fila[data-mi="informe-cat"] { flex-wrap: wrap; } .mi-caja > .mi-fila[data-mi="informe-cat"] > b { flex: 1 1 100%; } }
/* ARIA (13/10): un chat en un cajón al costado, que corre el contenido (en el celular, a pantalla completa); «Lo conversado»; y
   la entrada de una respuesta. Mockup `mockup-aria-chat`, variante A. Todo lleva `mi-ar-`. */
.mi-ar-cj { position: fixed; top: var(--topbar-h, 56px); right: 0; bottom: 0; width: 430px; z-index: 240; box-sizing: border-box; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line-2); color: var(--ink); font-family: var(--sans); padding-bottom: 78px; }          /* abajo quedan a la vista los botones flotantes de la app */
.mi-ar-cj[hidden], .mi-ar-fab[hidden], .mi-ar-abre[hidden] { display: none; } .mi-ar-in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mi-ar-corre > div { margin-right: 430px; }
.mi-ar-ch { flex: none; display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .mi-ar-t { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font: 800 14px var(--sans); color: var(--dom-mercado); }
.mi-ar-hb { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 12px var(--sans); white-space: nowrap; cursor: pointer; }
.mi-ar-hb:hover:not(:disabled) { background: var(--bg); color: var(--ink); } .mi-ar-hb:disabled { opacity: .5; cursor: not-allowed; }
.mi-ar-so { flex: none; display: flex; gap: 6px; align-items: baseline; padding: 6px 12px; font-size: 12px; color: var(--ink-2); background: var(--dom-mercado-soft); } .mi-ar-so b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .mi-ar-so .mi-ar-lk { margin-left: auto; flex: none; }
.mi-ar-cu { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 14px; } .mi-ar-tr { display: flex; flex-direction: column; min-width: 0; }
.mi-ar-hola { padding-top: 10px; } .mi-ar-hola p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .mi-ar-hola p b { color: var(--ink); } .mi-ar-hola .mi-ar-sug { flex-direction: column; align-items: flex-start; }
.mi-ar-dv { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 11.5px; color: var(--ink-2); } .mi-ar-dv::before, .mi-ar-dv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mi-ar-lk { border: 0; background: none; padding: 0; min-height: 24px; font: 700 11.5px var(--sans); color: var(--link); text-decoration: underline; cursor: pointer; } .mi-ar-lk.fin { margin-left: auto; }
.mi-ar-lk:focus-visible, .mi-ar-s:focus-visible, .mi-ar-rg:focus-visible, .mi-ar-hb:focus-visible, .mi-ar-env:focus-visible, .mi-ar-fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mi-ar-yo { align-self: flex-end; max-width: 88%; margin: 12px 0 8px; background: var(--dom-mercado-soft); border-radius: 14px 14px 4px 14px; padding: 8px 12px; }
.mi-ar-yo p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.mi-ar-ella { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mi-ar-gl { border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; background: var(--bg); padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; } .mi-ar-gl.warn { border-color: var(--warn); background: var(--warn-soft); } .mi-ar-gl.bad { border-color: var(--bad); background: var(--bad-soft); }
.mi-ar-gl > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); } .mi-ar-gl > p + p { margin-top: 6px; } .mi-ar-gl > p + .mi-ar-vi { margin-top: 10px; }
.mi-ar-vi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .mi-ar-vi small { display: block; font: 600 10.5px var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.mi-ar-vi b { font: 800 14.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); } .mi-ar-vs { grid-column: 1 / -1; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-2); }
.mi-ar-rn { display: flex; flex-direction: column; padding: 5px 0; border-top: 1px solid var(--line); } .mi-ar-rn:first-child, .mi-ar-vi + .mi-ar-rn { border-top: 0; } .mi-ar-rn small { font-size: 11.5px; color: var(--ink-2); } .mi-ar-rn b { font: 700 13.5px/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.mi-ar-gl .mi-ar-si, .mi-ar-gl .mi-ar-no { margin-top: 10px; } .mi-ar-gl .mi-ar-si > b, .mi-ar-gl .mi-ar-no > b { display: flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: .02em; font-size: 11.5px; } .mi-ar-gl .mi-ar-si > b svg, .mi-ar-gl .mi-ar-no > b svg { width: 13px; height: 13px; flex: none; }
.mi-ar-gl li { color: var(--ink-2); } .mi-ar-gl li b { color: var(--ink); font-weight: 600; } .mi-ar-pie { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); } .mi-ar-pie small { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.mi-ar-gl .mi-ar-acc { margin-top: 8px; flex-direction: column; align-items: flex-start; } .mi-ar-gl .mi-ar-acc .mi-btn { white-space: normal; text-align: left; justify-content: flex-start; }
.mi-ar-quien { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font: 800 11.5px var(--sans); color: var(--dom-mercado); }
.mi-ar-si, .mi-ar-no { display: flex; flex-direction: column; min-width: 0; } .mi-ar-si > b, .mi-ar-no > b { font: 800 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; padding-bottom: 3px; } .mi-ar-si > b { color: var(--go-ink); } .mi-ar-no > b { color: var(--warn); }
.mi-ar-no ul, .mi-ar-si ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; } .mi-ar-no li, .mi-ar-si li { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.mi-ar-acc { display: flex; gap: 8px; flex-wrap: wrap; } .mi-btn.mi-ar-off[disabled] { opacity: 1; color: var(--ink-2); border-style: dashed; cursor: not-allowed; }
.mi-ar-nota { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.mi-ar-sug { display: flex; gap: 6px; flex-wrap: wrap; } .mi-ar-s { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 14px; min-height: 36px; padding: 6px 12px; font: 600 13px var(--sans); text-align: left; cursor: pointer; } .mi-ar-s:hover:not(:disabled) { border-color: var(--dom-mercado); } .mi-ar-s:disabled { opacity: .5; cursor: not-allowed; }
.mi-ar-bd { flex: none; margin: 0; padding: 7px 12px; font-size: 12px; line-height: 1.4; border-top: 1px solid var(--line); } .mi-ar-bd.warn { background: var(--warn-soft); color: var(--warn); } .mi-ar-bd.bad { background: var(--bad-soft); color: var(--bad); }
.mi-ar-q { flex: none; position: relative; display: block; border-top: 1px solid var(--line); padding: 10px 12px 8px; } .mi-ar-qc { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--line-2); border-radius: 12px; padding: 6px 6px 6px 12px; background: var(--bg); } .mi-ar-qc:focus-within { border-color: var(--focus); }
.mi-ar-q textarea, .mi-ar-q textarea:focus { flex: 1 1 auto; min-width: 0; box-sizing: border-box; border: 0; border-radius: 0; box-shadow: none; background: none; resize: none; outline: none; padding: 5px 0; max-height: 112px; color: var(--ink); font: 500 14px/1.4 var(--sans); } .mi-ar-q textarea::placeholder { color: var(--ink-2); }
.mi-ar-env { flex: none; width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--go); color: var(--card); display: grid; place-items: center; cursor: pointer; } .mi-ar-env:disabled { background: var(--line-2); color: var(--ink-2); cursor: not-allowed; }
.mi-ar-qp { display: flex; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--ink-2); } .mi-ar-cta { margin-left: auto; font-variant-numeric: tabular-nums; } .mi-ar-cta.warn { color: var(--warn); font-weight: 700; } .mi-ar-cta.bad { color: var(--bad); font-weight: 700; }
.mi-ar-abre { color: var(--dom-mercado); border-color: var(--dom-mercado); } .mi-ar-fab { display: none; }
.mi-ar-oc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* lo conversado */
.mi-ar-rg { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 2px; color: var(--ink); font: inherit; cursor: pointer; }
.mi-ar-rg:hover b { text-decoration: underline; } .mi-ar-rg b { font: 700 13.5px/1.4 var(--sans); overflow-wrap: anywhere; } .mi-ar-rg small { font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-ar-rg-m { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); } .mi-ar-cu > .mi-fil { margin: 8px 0; } .mi-ar-cu > .mi-btn { margin-top: 10px; } .mi-ar-bd .mi-btn { color: var(--dom-mercado); border-color: var(--dom-mercado); }
/* «escribiendo» y la entrada de una respuesta: sólo visual, menos de un segundo en total, y quieta si la persona pidió menos movimiento */
@keyframes mi-ar-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes mi-ar-punto { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@keyframes mi-ar-sacude { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .mi-ar-sac { animation: mi-ar-sacude 260ms; }
.mi-ar-esc { align-self: flex-start; margin: 0; display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; background: var(--bg); padding: 9px 12px; font-size: 13px; color: var(--ink-2); } .mi-ar-pts { display: inline-flex; gap: 3px; }
.mi-ar-pts i { width: 5px; height: 5px; border-radius: 50%; background: var(--dom-mercado); animation: mi-ar-punto 1.1s infinite; } .mi-ar-pts i + i { animation-delay: .18s; } .mi-ar-pts i + i + i { animation-delay: .36s; }
.mi-ar-ent { animation: mi-ar-entra 240ms ease-out both; }
.mi-ar-p1 { animation-delay: 60ms; } .mi-ar-p2 { animation-delay: 120ms; } .mi-ar-p3 { animation-delay: 180ms; } .mi-ar-p4 { animation-delay: 240ms; } .mi-ar-p5 { animation-delay: 300ms; } .mi-ar-p6 { animation-delay: 360ms; }
.mi-ar-p7 { animation-delay: 420ms; } .mi-ar-p8 { animation-delay: 480ms; } .mi-ar-p9 { animation-delay: 540ms; } .mi-ar-p10 { animation-delay: 600ms; } .mi-ar-p11 { animation-delay: 660ms; }
@media (prefers-reduced-motion: reduce) { .mi-ar-ent, .mi-ar-sac { animation: none; } .mi-ar-pts i { animation: none; opacity: .6; } }
/* con el cajón abierto el aviso queda más angosto: en la tabla de tiendas la columna de la semana y la de modalidad bajan de línea en vez de encimarse */
@media (min-width: 1100px) { .mi-ar-corre .mi-tt { grid-template-columns: minmax(0, 1.1fr) 92px minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr); } .mi-ar-corre .mi-tt .mi-tn, .mi-ar-corre .mi-tt .mi-r { white-space: normal; } }
@media (max-width: 1099px) { .mi-ar-corre > div { margin-right: 0; } .mi-ar-cj { width: 400px; } }          /* sin lugar para correr el contenido: el cajón va encima */
@media (max-width: 820px) {
    .mi-ar-yo { max-width: 92%; } .mi-ar-lk, .mi-ar-s { min-height: var(--tap, 44px); }
    .mi-ar-acc .mi-btn { flex: 1 1 auto; } .mi-ar-rg { min-height: var(--tap, 44px); }
    .mi-ar-cj { top: 0; left: 0; width: auto; z-index: 1200; border-left: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }          /* a pantalla completa, por encima de la barra de abajo */
    .mi-ar-abre { display: none; } .mi-ar-hb { min-width: var(--tap, 44px); min-height: var(--tap, 44px); justify-content: center; } .mi-ar-hb span, .mi-ar-tecla { display: none; } .mi-ar-vi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-ar-q textarea { font-size: 16px; } .mi-ar-env { width: var(--tap, 44px); height: var(--tap, 44px); } .mi-ar-gl .mi-ar-acc { align-items: stretch; }
    .mi-ar-fab { display: inline-flex; position: fixed; left: 12px; bottom: calc(var(--tab-h, 58px) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 240; align-items: center; gap: 7px; height: 48px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--dom-mercado); color: var(--card); font: 800 14px var(--sans); cursor: pointer; }
}