/* Phase 3 additions: Mensajes, Analíticas, money block of Informes. New rules only; tokens come from app.css. */

/* ---------- change vs the period before ---------- */
.dl-up{color:var(--ok-ink);font-weight:600}
.dl-down{color:var(--verm-ink);font-weight:600}
.dl-eq{color:var(--mute)}
.dl-was{color:var(--mute);white-space:nowrap}

/* ---------- money tiles (Informes, Analíticas) ---------- */
.inf3-h{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.02em;margin:18px 0 8px}
.inf3-h:first-of-type{margin-top:4px}
.kcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kc{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.kc-l{font-size:12.5px;color:var(--mute);font-weight:500}
.kc-v{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.kc-d{font-size:12.5px;line-height:1.35;min-height:17px}
.kc-n{font-size:12px;color:var(--faint)}
.kc-big{grid-column:1/-1;background:var(--ink);border-color:var(--ink);color:#fff}
.kc-big .kc-l,.kc-big .kc-n,.kc-big .dl-was,.kc-big .dl-eq{color:#C4CCD8}
.kc-big .kc-v{font-size:30px}
.kc-big .dl-up{color:#8FE0B5}.kc-big .dl-down{color:#FFB4A5}
.kc-wide{grid-column:1/-1}
.sp-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--tint);margin:6px 0 2px}
.sp-bar i{display:block;height:100%}
.sp-d{background:var(--ink)}.sp-o{background:var(--faint)}
.sp-legend,.or-l{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--mute)}
.sp-lg{display:inline-flex;align-items:center;gap:6px}
.sp-lg i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
@media (min-width:560px){.kcs{grid-template-columns:repeat(3,minmax(0,1fr))}.kc-wide{grid-column:span 2}}
@media (min-width:560px){.kc-big{grid-column:auto}}
@media (min-width:1024px){.kcs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.inf3-grid{margin-top:14px}
.inf3-grid .card{align-self:stretch}
.inf3-line{margin-top:10px;font-size:14px}
.inf3-warn{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:var(--sand);color:var(--sand-ink);font-size:13px}
.an-per{font-size:14px;font-weight:600;margin:0 0 4px}
.an-wide{min-width:0}
@media (min-width:860px){.an-wide{grid-column:1/-1}}

/* ---------- tables ---------- */
.p3-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p3-tbl{width:100%;border-collapse:collapse;font-size:14px}
.p3-tbl th,.p3-tbl td{padding:9px 8px;text-align:left;border-top:1px solid var(--line);vertical-align:baseline;overflow-wrap:anywhere}
.p3-tbl thead th{border-top:0;font-size:12px;font-weight:600;color:var(--mute);padding-top:0}
.p3-tbl tbody th,.p3-tbl tfoot th{font-weight:500}
.p3-tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.p3-tbl tfoot th,.p3-tbl tfoot td{font-weight:600;border-top:1px solid var(--line2)}
.p3-tbl tr.grp th{background:var(--tint);font-size:12.5px;font-weight:600;color:var(--mute);padding:7px 8px;border-radius:6px}

/* ---------- funnel + origin + attention ---------- */
.fn{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fn li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l n" "t t" "p p";gap:4px 10px;align-items:baseline;font-size:14px}
.fn-l{grid-area:l}.fn-n{grid-area:n;text-align:right}
.fn-t{grid-area:t;height:10px;border-radius:5px;background:var(--tint);overflow:hidden}
.fn-t i{display:block;height:100%;border-radius:5px;background:var(--ink)}
.fn-p{grid-area:p;font-size:12.5px;color:var(--mute)}
@media (min-width:560px){.fn li{grid-template-columns:minmax(0,12em) minmax(0,1fr) 3em;grid-template-areas:"l t n" ". p p"}.fn-p{padding-left:0}}
.or{display:grid;gap:16px}
.or-h{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:6px}
.or-b{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--tint);min-width:4px}
.or-b i{display:block;height:100%}
.or-l{margin-top:6px}
.at{display:grid;gap:0}
.at-r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "d d";gap:2px 10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.at-r:first-child{border-top:0;padding-top:0}
.at-r b{grid-area:v;font-size:16px;text-align:right}
.at-d{grid-area:d;font-size:12.5px}

/* ---------- charts ---------- */
.p3-chart{display:block;width:100%;height:auto;max-height:260px}
.p3-chart .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.p3-chart .ax{font-size:11.5px;fill:var(--mute);font-family:var(--font);font-variant-numeric:tabular-nums}
.p3-chart .bar{fill:var(--ink)}.p3-chart .bar.fut{fill:var(--line2)}
.p3-chart .bar:hover{opacity:.8}
@media (max-width:640px){.p3-chart .ax{font-size:21px}}

/* ---------- Mensajes ---------- */
.content:has(>.v-mensajes){display:flex;flex-direction:column;overflow:hidden;padding:12px 12px 12px}
.v-mensajes{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.msg-wrap{flex:1;min-height:min(520px,calc(100dvh - 200px));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:14px}
.msg-wrap[data-pane=list] .msg-thread{display:none}
.msg-wrap[data-pane=thread] .msg-list{display:none}
.msg-list,.msg-thread{display:flex;flex-direction:column;min-height:0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.msg-lh{flex:none;padding:10px 12px;border-bottom:1px solid var(--line)}
.msg-seg{display:flex}.msg-seg button{flex:1}
.msg-lbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.msg-lbody>.empty,.msg-lbody>.skel-wrap{margin:12px;border-radius:12px}
.msg-ul{list-style:none;margin:0;padding:0}
.msg-ul li+li{border-top:1px solid var(--line)}
.msg-row{display:flex;flex-direction:column;gap:5px;width:100%;padding:12px 14px;border:0;background:#fff;text-align:left;border-radius:0;position:relative;min-height:72px}
.msg-row:hover{background:#F8F9FB}
.msg-row.is-open{background:var(--tint)}
.msg-row.is-unread::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--ink)}
.msg-row:focus-visible{outline-offset:-2px}
.msg-r1,.msg-r3{display:flex;align-items:center;gap:10px;min-width:0}
.msg-r1 b{flex:1;min-width:0;font-size:15px;font-weight:600}
.msg-row:not(.is-unread) .msg-r1 b{font-weight:500}
.msg-age{flex:none;font-size:12px;color:var(--mute)}
.msg-r2{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.msg-pv{flex:1;min-width:0;font-size:13.5px;color:var(--mute)}
.msg-row.is-unread .msg-pv{color:var(--ink);font-weight:500}
.msg-pv i{font-style:normal;color:var(--faint)}
.msg-un{flex:none}
.msg-room{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--tint);font-size:12px;font-weight:600;color:var(--ink)}
.msg-room.lobby{background:#fff;border:1px solid var(--line2);font-weight:500;color:var(--mute)}
.msg-ch-whatsapp{background:var(--ok);border-color:var(--ok-line);color:var(--ok-ink)}
.msg-ch-email{background:var(--blue);border-color:var(--blue-line);color:var(--blue-ink)}
.msg-th-h{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.msg-who{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px}
.msg-who b{font-size:16px;font-weight:600}
.msg-whoSub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
.msg-hacts{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.msg-wa{flex:none;display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 14px;background:var(--sand);color:var(--sand-ink);font-size:13px;border-bottom:1px solid var(--sand-line)}
.msg-wa .ic{flex:none;margin-top:2px}
.msg-bubbles{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:14px 12px;background:var(--bg)}
.msg-bubbles:focus-visible{outline-offset:-3px}
.msg-b{max-width:86%;padding:9px 12px 6px;border-radius:14px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.msg-b p{margin:0;white-space:pre-wrap}
.msg-b.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-b.out{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;margin-top:3px;font-size:11.5px;color:var(--mute)}
.msg-b.out .msg-meta{color:#C4CCD8}
.msg-meta time{font-variant-numeric:tabular-nums}
.msg-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;background:var(--tint);color:var(--mute)}
.msg-b.out .msg-tag{background:rgba(255,255,255,.16);color:#fff}
.msg-tag.warn{background:var(--sand);color:var(--sand-ink)}
.msg-tk{font-size:12px;letter-spacing:-2px;line-height:1;color:#C4CCD8}
.msg-tk.read{color:#7FD1FF}
.msg-wa.ok{background:var(--ok);color:var(--ok-ink);border-bottom-color:var(--ok-line)}
.msg-tpl{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.msg-tpl .form-err{margin:0}
.msg-hint2{margin:0;font-size:12px}
.msg-sys{align-self:center;max-width:90%;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--mute);font-size:12.5px;text-align:center}
.msg-none{text-align:center;margin:auto}
.msg-comp{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.msg-comp textarea{min-height:60px;max-height:180px;resize:none;line-height:1.45}
.msg-cacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.msg-cacts .grow{flex:1;min-width:0}
.msg-hint{display:none;font-size:12px}
.msg-note{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--blue-ink);background:var(--blue);border:1px solid var(--blue-line);border-radius:10px;padding:6px 10px}
.msg-note .ic{flex:none}
.msg-comp .form-err{margin:0}
.msg-ro{padding:12px 14px;border-top:1px solid var(--line)}
.msg-pick{flex:1;min-height:0;padding:12px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.msg-pick .empty{border-style:solid;border-color:var(--line)}
.msg-back{flex:none}
@media (min-width:900px){
  .content:has(>.v-mensajes){padding:16px 24px 20px}
  .msg-wrap{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}
  .msg-wrap[data-pane=list] .msg-thread,.msg-wrap[data-pane=thread] .msg-list{display:flex}
  .msg-back{display:none}
  .msg-b{max-width:72%}
  .msg-hint{display:inline}
  .msg-pick{align-items:stretch}
}
@media (max-width:640px){.msg-hacts{flex-basis:100%;justify-content:flex-start;padding-left:46px}}

@media (prefers-reduced-motion:no-preference){.msg-row,.msg-lbody{transition:background .12s}}
@media print{.msg-comp,.msg-list{display:none}}