/* LatinosCPA — sistema de diseño de marca (vanilla, mobile-first).
   Paleta oficial (Web Archive): crecimiento #7CC142 · acción #2FA35C ·
   contraste #1F5C7C · footer #2B2B2B. Tipografía: Titillium Web. */
:root {
  /* Tema OSCURO (fondo negro) — acentos de marca sobre negro. */
  --green:    #8FD055;   /* crecimiento, íconos, acentos (pop sobre negro) */
  --emerald:  #34b568;   /* botones de acción / login */
  --emerald-d:#4ecb83;   /* verde claro para TEXTO sobre oscuro + hover */
  --navy:     #1F5C7C;   /* barras oscuras (header dashboard) + bordes/acentos */
  --navy-t:   #6bb0dc;   /* navy claro para TEXTO/enlaces sobre oscuro */
  --navy-d:   #17475f;
  --ink:      #f3f6f8;   /* encabezados (casi blanco) */
  --body:     #c4ced4;   /* texto de párrafo */
  --muted:    #8a97a0;
  --line:     #262b30;   /* bordes oscuros */
  --bg:       #0a0a0a;   /* fondo casi negro */
  --bg-soft:  #141619;   /* secciones ligeramente más claras */
  --card:     #17191d;   /* fondo de tarjetas/inputs */
  --footer:   #050506;   /* footer más oscuro */
  --ok:       #34b568;
  --warn:     #e8a13a;
  --danger:   #e05a56;
  --radius:   14px;
  --shadow:   0 10px 30px rgba(0,0,0,.55);
  --shadow-sm:0 2px 12px rgba(0,0,0,.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--body);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--emerald); text-decoration: none; }
.hidden { display: none !important; }
h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.2; }
.brand-word { color: var(--emerald); }
.brand-word.alt { color: var(--green); }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 13px 26px; transition: .18s ease;
  background: var(--emerald); color: #fff; box-shadow: 0 6px 16px rgba(47,163,92,.28);
}
.btn:hover { background: var(--emerald-d); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.block { width: 100%; }
.btn.small { padding: 8px 16px; font-size: 14px; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--navy-t); box-shadow: none; border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--bg-soft); border-color: var(--navy-t); }
.btn.navy { background: var(--navy); box-shadow: 0 6px 16px rgba(31,92,124,.25); }
.btn.navy:hover { background: var(--navy-d); }

/* ── Navbar de marketing ─────────────────────────────────── */
.mkt-nav {
  position: sticky; top: 0; z-index: 30; background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 5vw, 48px);
}
.mkt-nav .logo { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 22px; color: var(--ink); letter-spacing: -.3px; }
.mkt-nav .logo b { color: var(--green); }
.isotype { flex: 0 0 auto; display: block; }
.mkt-nav .links { display: flex; align-items: center; gap: clamp(10px, 3vw, 30px); }
.mkt-nav .links a { color: var(--navy-t); font-weight: 700; font-size: 15px; }
.mkt-nav .links a:hover { color: var(--emerald); }
/* Tap targets de la navbar: mínimo 44px de alto (accesibilidad táctil) */
.mkt-nav .links .btn { min-height: 44px; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  padding: clamp(40px, 8vw, 84px) clamp(16px, 5vw, 48px) clamp(32px, 6vw, 64px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 56px);
  align-items: center; max-width: 1180px; margin: 0 auto;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px;
  color: var(--emerald-d); background: rgba(124,193,66,.14); border: 1px solid rgba(124,193,66,.3);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .5px;
}
.hero h1 { font-size: clamp(30px, 5.2vw, 52px); font-weight: 900; letter-spacing: -1px; }
.hero p.sub { font-size: clamp(16px, 2.2vw, 20px); color: var(--body); margin: 16px 0 26px; max-width: 34ch; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .trust { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 14px; font-weight: 600; }
.hero .trust b { color: var(--navy-t); font-weight: 900; font-size: 18px; display: block; }

/* Widget central (login / registro) */
.widget {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: clamp(22px, 4vw, 34px);
}
.widget .wtitle { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.widget .wsub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

/* ── Franja de features ──────────────────────────────────── */
.features { max-width: 1180px; margin: 0 auto; padding: clamp(28px,5vw,56px) clamp(16px,5vw,48px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.feature .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
  background: rgba(124,193,66,.14); color: var(--emerald-d); margin-bottom: 12px; }
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 14px; }

/* ── Footer ──────────────────────────────────────────────── */
.mkt-footer { background: var(--footer); color: #fff; padding: 40px 16px 28px; text-align: center; }
.mkt-footer .logo { font-weight: 900; font-size: 20px; margin-bottom: 6px; }
.mkt-footer .logo b { color: var(--green); }
.mkt-footer p { color: #b9b9b9; font-size: 13px; max-width: 46ch; margin: 0 auto 18px; }
.mkt-footer .social { display: flex; gap: 14px; justify-content: center; margin-bottom: 18px; }
.mkt-footer .social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: .18s;
}
.mkt-footer .social a:hover { background: var(--emerald); }
.mkt-footer .social svg { width: 18px; height: 18px; fill: currentColor; }
.mkt-footer .copy { color: #8a8a8a; font-size: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }

/* ── Formularios ─────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 700; color: var(--navy-t); margin: 12px 0 5px; }
input, select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 16px; color: var(--ink); background: var(--card); transition: .15s;
}
input:focus, select:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(47,163,92,.14); }

/* ── App / dashboard ─────────────────────────────────────── */
.wrap { max-width: 640px; margin: 0 auto; padding: 16px 14px 88px; }
header.app {
  position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px clamp(14px, 4vw, 20px);
}
header.app .logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: -.2px; }
header.app .logo b { color: var(--green); }
header.app .who { display: flex; align-items: center; gap: 10px; font-size: 13px; }
header.app .who .chip { background: rgba(255,255,255,.16); color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 700; }
header.app button { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }

/* nav.tabs: barra inferior original reemplazada por el sidebar/drawer de
   Fase 1A — ver sección "shell profesional" más abajo (nav.tabs.sidebar). */

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.h1 { font-size: 20px; font-weight: 900; margin-bottom: 10px; color: var(--ink); }
.h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.muted { color: var(--muted); font-size: 13px; }
.chip { display: inline-block; background: rgba(124,193,66,.14); color: var(--emerald-d); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.chip.cycle { background: rgba(31,92,124,.10); color: var(--navy-t); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.mt { margin-top: 12px; }
.center { text-align: center; }
.big { font-size: 26px; font-weight: 900; }

.balance { text-align: center; padding: 14px 6px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); }
.balance .amt { font-size: 19px; font-weight: 900; color: var(--ink); }
.balance .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.balance.avail { background: rgba(47,163,92,.10); border-color: rgba(47,163,92,.3); }
.balance.avail .amt { color: var(--emerald-d); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; padding: 8px 6px; border-bottom: 2px solid var(--line); }
td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.linkbox { background: var(--bg-soft); border: 1px dashed var(--navy); border-radius: 10px; padding: 12px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; margin: 10px 0; color: var(--navy-t); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.status-dot.ok { background: var(--ok); }
.status-dot.warn { background: var(--warn); }

#toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 50; max-width: 92%; text-align: center;
  box-shadow: var(--shadow); }
#toast.err { background: var(--danger); }

/* ── Responsive ──────────────────────────────────────────── */
/* En pantallas muy chicas, el logo colapsa a [isotipo] CPA para dar aire a los
   botones de conversión (Sign up / Login) sin saltos de línea. */
@media (max-width: 400px) {
  .logo .wordmark { display: none; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 32px; }
  .hero .cta-row, .hero .trust { justify-content: center; }
  .hero p.sub { margin-left: auto; margin-right: auto; }
  .features { grid-template-columns: 1fr; }
  .mkt-nav .links a.hide-sm { display: none; }
}

/* ══════════ Expansión de la home (secciones honestas) ══════════ */
/* Menú hamburguesa móvil */
.mkt-nav .hamb { display: none; background: none; border: 0; font-size: 26px; color: var(--navy-t); cursor: pointer; line-height: 1; }
@media (max-width: 760px) {
  .mkt-nav { flex-wrap: wrap; }
  .mkt-nav .hamb { display: block; }
  .mkt-nav .links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; }
  .mkt-nav .links.open { display: flex; }
  .mkt-nav .links a { padding: 8px 2px; border-bottom: 1px solid var(--line); }
  .mkt-nav .links a.hide-sm { display: block; }
  .mkt-nav .links .btn { width: 100%; }
}

/* Secciones genéricas */
.section { max-width: 1120px; margin: 0 auto; padding: clamp(36px,6vw,68px) clamp(16px,5vw,48px); }
.section.soft { background: var(--bg-soft); max-width: none; }
.section.soft > .inner { max-width: 1120px; margin: 0 auto; }
.section .kicker { text-align: center; color: var(--emerald-d); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 13px; margin-bottom: 8px; }
.section h2 { text-align: center; font-size: clamp(24px,3.6vw,36px); font-weight: 900; margin-bottom: 10px; }
.section .lead { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 34px; }

/* Cómo funciona — pasos */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.step { text-align: center; }
.step .n { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: rgba(124,193,66,.14); color: var(--emerald-d); font-weight: 900; border: 2px solid rgba(124,193,66,.35); }
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 14px; }

/* Categorías */
.cats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.cat .emoji { font-size: 28px; } .cat h3 { margin: 8px 0 4px; } .cat p { color: var(--muted); font-size: 14px; }

/* Pagos */
.pays { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
.pay { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); text-align: center; }
.pay .badge { font-weight: 900; font-size: 18px; color: var(--navy-t); }
.pay .badge .u { color: var(--green); }
.pay p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.pay-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Sub-afiliados */
.subs-box { max-width: 720px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); text-align: center; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--emerald); font-size: 22px; font-weight: 900; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); font-size: 14px; padding: 0 0 14px; }

/* CTA final */
.cta-final { background: linear-gradient(135deg, var(--navy) 0%, var(--emerald-d) 100%); color: #fff; text-align: center; padding: clamp(40px,7vw,72px) 20px; }
.cta-final h2 { color: #fff; font-size: clamp(24px,4vw,38px); font-weight: 900; }
.cta-final p { color: rgba(255,255,255,.85); max-width: 46ch; margin: 12px auto 24px; }
.cta-final .btn { background:#fff; color: var(--navy-d); }
.cta-final .btn:hover { background: #f0f0f0; }

/* Footer con columnas */
.mkt-footer .fcols { max-width: 1120px; margin: 0 auto 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 28px; text-align: left; }
.mkt-footer .fcols h4 { color: #fff; font-size: 14px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.mkt-footer .fcols a { display: block; color: #b9b9b9; font-size: 14px; padding: 4px 0; }
.mkt-footer .fcols a:hover { color: var(--green); }
.mkt-footer .fcols .about p { color: #b9b9b9; font-size: 13px; margin-top: 8px; }

@media (max-width: 860px) {
  .steps, .cats { grid-template-columns: 1fr 1fr; }
  .pays { grid-template-columns: 1fr; }
  .mkt-footer .fcols { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 480px) { .steps, .cats, .mkt-footer .fcols { grid-template-columns: 1fr; } }

/* Tema oscuro: pantalla del isotipo en claro para contraste sobre negro */
.isotype rect { fill: #cdd9e0; }

/* ══════════ Fase 1A — shell profesional del panel ══════════ */
:root {
  /* Alias semánticos consolidados (no reemplazan los existentes, solo dan
     nombres consistentes para el shell nuevo — ver auditoría Fase 1A). */
  --surface:    var(--card);
  --surface-2:  #1d2027;   /* superficie elevada: drawer, dropdown, skeleton */
  --success:    var(--ok);
}

/* ── Layout de dos columnas (sidebar + contenido) ───────────────────── */
.shell { display: flex; align-items: flex-start; }
.shell .content { flex: 1 1 auto; min-width: 0; }

nav.tabs.sidebar {
  /* Mobile-first: drawer oculto por defecto (fuera de pantalla a la izq). */
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: min(280px, 82vw); background: var(--surface-2);
  border-right: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
  transform: translateX(-100%); transition: transform .22s ease;
  overflow-y: auto;
}
nav.tabs.sidebar.open { transform: translateX(0); }
nav.tabs.sidebar button {
  background: none; border: 0; font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--body); display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  min-height: 44px; width: 100%;
}
nav.tabs.sidebar button .ico { font-size: 18px; line-height: 1; width: 22px; text-align: center; }
nav.tabs.sidebar button:hover { background: rgba(255,255,255,.05); color: var(--ink); }
nav.tabs.sidebar button.active { background: rgba(52,181,104,.14); color: var(--emerald-d); }
nav.tabs.sidebar button.active .ico { filter: none; }
.nav-count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:inline-grid; place-items:center;
  border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:900; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.55);
}

.nav-toggle {
  background: none; border: 0; cursor: pointer; padding: 8px; margin-right: 4px;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.nav-toggle:hover { background: rgba(255,255,255,.1); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative;
}
.nav-toggle .bars::before { content: ""; position: absolute; top: -6px; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
.nav-toggle .bars::after { content: ""; position: absolute; top: 6px; width: 20px; height: 2px; background: #fff; border-radius: 2px; }

header.app .hdr-balance {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-right: 4px;
}
header.app .hdr-balance-lbl { font-size: 10px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .3px; }
header.app .hdr-balance-amt { font-size: 15px; font-weight: 900; color: #fff; }
header.app .hdr-help {
  background: rgba(255,255,255,.16); min-width: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  font-size: 15px; padding: 0;
}

/* Desktop: sidebar fija y visible, sin drawer/backdrop/hamburguesa. */
@media (min-width: 900px) {
  .shell { max-width: 1180px; margin: 0 auto; gap: 28px; align-items: flex-start; }
  .shell.catalog-mode { max-width: 1540px; padding-left:20px; padding-right:20px; }
  .shell.community-mode, .shell.dashboard-mode { max-width: 1420px; padding-left:20px; padding-right:20px; }
  .shell.community-mode .content, .shell.dashboard-mode .content { flex:1 1 auto; }
  .shell.community-mode .wrap, .shell.dashboard-mode .wrap { max-width:none; width:100%; }
  .shell.catalog-mode .content { flex:1 1 auto; }
  .shell.catalog-mode .wrap { max-width:none; width:100%; }
  nav.tabs.sidebar {
    position: sticky; top: 64px; left: auto; transform: none; box-shadow: none;
    border-right: 1px solid var(--line); border-radius: var(--radius);
    height: calc(100vh - 96px); flex: 0 0 240px; padding: 16px 10px;
  }
  .nav-backdrop, .nav-toggle { display: none; }
  .wrap { max-width: 760px; margin: 0; padding: 16px 0 40px; }
}

/* ── Tarjetas del dashboard de Inicio ────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
.kpi-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.kpi-card .kpi-lbl { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.kpi-card .kpi-val { font-size: 22px; font-weight: 900; color: var(--ink); }
.kpi-card .kpi-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi-card.avail { background: rgba(52,181,104,.10); border-color: rgba(52,181,104,.3); }
.kpi-card.avail .kpi-val { color: var(--emerald-d); }

.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.action-row .btn { min-height: 44px; }

.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
}
.recent-item .ri-main { font-size: 14px; color: var(--ink); font-weight: 600; }
.recent-item .ri-sub { font-size: 12px; color: var(--muted); }
.recent-item .ri-amt { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Inicio integrado: rendimiento, comunidad y ofertas en una sola vista. */
.home-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 0 16px}.home-welcome h1{font-size:28px;margin-top:3px}.home-date{text-transform:capitalize;color:var(--muted);font-size:13px}
.home-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);gap:14px;align-items:start;margin-top:14px}.home-dashboard-grid .card.mt{margin-top:0}.home-dashboard-grid>div:last-child{display:grid;gap:14px}.home-dashboard-grid>div:last-child .card{margin:0}
.home-community{margin:0;min-height:405px;padding:0;overflow:hidden}.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid var(--line)}.home-section-head .h2{margin:0}.home-section-head p{font-size:12px;margin-top:2px}.home-community-state{padding:8px 17px;font-size:11px;border-bottom:1px solid var(--line)}.home-community-state .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--emerald-d);margin-right:6px}.home-community-messages{height:265px;overflow:hidden;padding:10px 17px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}.home-community-msg{display:grid;grid-template-columns:70px 1fr 40px;gap:8px;align-items:baseline;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.025)}.home-community-msg b{color:var(--navy-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-community-msg span{color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-community-msg time{font-size:10px;color:var(--muted);text-align:right}.home-community-msg.agent b{color:#bcaaf1}.home-community-msg.system b{color:var(--emerald-d)}.home-community-compose{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 34px);margin:0 17px 15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--muted);font:inherit;text-align:left;cursor:pointer}.home-community-compose span{color:var(--emerald-d);font-weight:800}.home-community-compose:hover{border-color:rgba(78,203,131,.35)}
.home-secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.home-secondary-grid>.card{margin:0}.home-offers{grid-column:1/-1}.home-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}.home-offer{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--bg-soft);color:var(--body);font:inherit;text-align:left;cursor:pointer;min-width:0}.home-offer:hover{border-color:rgba(143,208,85,.35);transform:translateY(-1px)}.home-offer-media{width:68px;height:48px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#162118,#233429);color:var(--green);font-size:10px;font-weight:900}.home-offer-media img{width:100%;height:100%;object-fit:cover}.home-offer-copy{display:flex;flex-direction:column;min-width:0}.home-offer-copy b{color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-offer-copy small{color:var(--muted);font-size:10px}.home-offer strong{color:var(--emerald-d);font-size:13px;white-space:nowrap}
@media(max-width:1050px){.home-dashboard-grid{grid-template-columns:1fr}.home-community{min-height:380px}.home-offer-grid{grid-template-columns:1fr}}
.home-offer-media{position:relative}.home-offer-media img{position:absolute;inset:0}
@media(max-width:640px){.home-welcome{align-items:flex-start;flex-direction:column}.home-date{display:none}.home-secondary-grid{grid-template-columns:1fr}.home-community-msg{grid-template-columns:64px 1fr 34px}.home-section-head{align-items:flex-start}.home-section-head .btn{padding:7px 10px}}

/* ── Estados de interfaz (cargando / vacío / error) ──────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%; animation: lcpa-sk 1.4s ease infinite; border-radius: 10px;
}
@keyframes lcpa-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-kpi { height: 78px; }
.skeleton-row { height: 44px; margin-bottom: 8px; }

.state-box {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
  padding: 20px 16px; text-align: center;
}
.state-box .state-icon { font-size: 24px; margin-bottom: 8px; }
.state-box .state-msg { color: var(--body); font-size: 14px; margin-bottom: 10px; }
.state-box .state-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.state-box.error { border-color: rgba(224,90,86,.35); background: rgba(224,90,86,.07); }
.state-box.error .state-msg { color: var(--ink); }

/* ── Accesibilidad: solo-lector + foco visible consistente ───────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--emerald-d); outline-offset: 2px;
}

/* ── Móvil: el FAB del chat vive en la esquina inferior derecha; el nuevo
   drawer sale por la IZQUIERDA, así que no compiten por el mismo espacio
   (antes el nav.tabs era una barra inferior fija que sí se solapaba con
   el FAB — hallazgo residual de Fase 0, resuelto por este cambio de patrón,
   no por un parche de posición). */
@media (max-width: 899px) {
  .wrap { padding-bottom: 32px; }
}
/* Header muy angosto: el saldo ya se repite como primera tarjeta del
   dashboard de Inicio — se oculta del header para no saturarlo. */
@media (max-width: 480px) {
  header.app .hdr-balance { display: none; }
}

/* ══════════ Fase 1B — directorio de ofertas profesional ══════════ */
.dir-head { margin-bottom: 4px; }
.dir-head p { margin-top: 4px; }

.dir-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dir-filters .field { flex: 1 1 140px; min-width: 130px; }
.dir-filters .field.field-search { flex: 2 1 220px; }
.dir-filters .field label { margin: 0 0 5px; }
.dir-filters .field select, .dir-filters .field input { margin: 0; }
.dir-filters .btn { min-height: 44px; white-space: nowrap; }

.dir-summary { padding: 2px 2px 10px; font-size: 13px; }

.offer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:14px; }
.offer-card { min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.14); transition:transform .18s ease,border-color .18s ease; }
.offer-card:hover { transform:translateY(-2px); border-color:rgba(151,216,82,.45); }
.offer-media { height:142px; position:relative; overflow:hidden; background:linear-gradient(135deg,#162118,#233429); }
.offer-media img { width:100%; height:100%; object-fit:cover; display:block; }
.offer-media img.offer-logo-media { object-fit:contain; padding:22px; background:#fff; }
.offer-media-fallback::before { content:"LatinosCPA"; position:absolute; inset:0; display:grid; place-items:center;
  color:#9cdb5d; font-size:24px; font-weight:900; letter-spacing:-.04em;
  background:radial-gradient(circle at 75% 20%,rgba(151,216,82,.22),transparent 42%); }
.offer-approved { position:absolute; top:10px; right:10px; padding:5px 9px; border-radius:999px;
  color:#13200d; background:#9cdb5d; font-size:11px; font-weight:900; box-shadow:0 4px 12px rgba(0,0,0,.28); }
.offer-card-body { padding:15px; }
.offer-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.offer-geo { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.offer-card-title { color:var(--ink); font-size:16px; line-height:1.3; min-height:42px; margin:12px 0 8px; }
.offer-card-payout { color:var(--emerald-d); font-size:19px; font-weight:900; }
.offer-card-cycle { color:var(--muted); font-size:12px; margin-top:4px; }
.offer-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.offer-card-actions .btn { width:100%; padding-left:8px; padding-right:8px; }

table.of-table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.of-table caption { text-align: left; padding: 12px 14px 0; font-size: 12px; color: var(--muted); }
table.of-table th, table.of-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.of-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
table.of-table tbody tr:last-child td { border-bottom: 0; }
table.of-table tbody tr:hover { background: var(--bg-soft); }
table.of-table td.payout-cell { color: var(--emerald-d); font-weight: 800; font-variant-numeric: tabular-nums; }
table.of-table th.num, table.of-table td.num { text-align: right; }
table.of-table td.actions { text-align: right; }
table.of-table .of-titulo { color: var(--ink); font-weight: 700; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.pagination button { min-height: 44px; min-width: 44px; }
.pagination .pg-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Móvil: la tabla se convierte en tarjetas — misma marcación semántica,
   sin scroll horizontal. */
@media (max-width: 760px) {
  .offer-grid { grid-template-columns:1fr; }
  table.of-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
  table.of-table, table.of-table tbody, table.of-table tr, table.of-table td { display: block; width: 100%; }
  table.of-table tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 4px 14px; }
  table.of-table td { border-bottom: 0; padding: 7px 0; display: flex; align-items: center;
    justify-content: space-between; gap: 10px; }
  table.of-table td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--muted); font-weight: 700; flex: 0 0 auto; }
  table.of-table td.actions { padding-top: 10px; padding-bottom: 10px; }
  table.of-table td.actions::before { content: none; }
  table.of-table td.actions .btn { width: 100%; }
}

/* Detalle de oferta */
.offer-detail .payout-hero { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.offer-detail .payout-hero .amt { font-size: 30px; font-weight: 900; color: var(--emerald-d); }
.offer-detail .payout-hero .cur { font-size: 13px; color: var(--muted); }
.offer-detail .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-top: 14px; }
.offer-detail .fact .fact-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.offer-detail .fact .fact-val { font-size: 14px; color: var(--ink); font-weight: 600; margin-top: 2px; }

/* Guía promocional curada (Fase 1D) — visualmente separada de los datos
   oficiales de la oferta mediante un acento azul informativo. */
.intel-card { border-left: 3px solid var(--navy-t); }
.intel-card p { margin-bottom: 8px; }
.intel-card p:last-child { margin-bottom: 0; }

/* ── Comunidad: conversación primero, controles bajo demanda ─────────── */
.cm-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 0 16px}
.cm-page-head .h1{font-size:28px;margin:3px 0 5px}.cm-page-head p{max-width:680px}
.cm-eyebrow{color:var(--emerald-d);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.cm-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cm-status{display:inline-flex;align-items:center;gap:7px;color:var(--body);font-size:12px;font-weight:700;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.cm-status i{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px rgba(232,161,58,.12)}
.cm-status.online i{background:var(--emerald-d);box-shadow:0 0 0 3px rgba(78,203,131,.12)}
.cm-status.closed i{background:var(--danger)}
.cm-banner{background:rgba(232,161,58,.09);border:1px solid rgba(232,161,58,.28);color:#efbd70;padding:10px 14px;border-radius:11px;margin-bottom:12px;font-size:13px}
#view-comunidad .cm-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.cm-main{display:flex;flex-direction:column;min-height:620px;padding:0;overflow:hidden}
.cm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);font-size:14px}
.cm-icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--body);font-size:18px;cursor:pointer}
.cm-icon-btn:hover{color:var(--emerald-d);border-color:rgba(78,203,131,.35)}
.cm-toolbar-actions{display:flex;align-items:center;gap:7px}.cm-toolbar-actions input{width:150px;height:34px;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:12px}.cm-toolbar-actions input:focus{border-color:var(--emerald);outline:0}.cm-filtered{display:none!important}
.cm-pinned{background:rgba(107,176,220,.08);border-bottom:1px solid rgba(107,176,220,.2);padding:10px 17px;color:var(--body)}
.cm-pin-title{font-weight:800;font-size:11px;color:var(--navy-t);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em}
.cm-pin{font-size:13px;margin:3px 0}
.cm-messages{flex:1;overflow-y:auto;height:470px;max-height:calc(100vh - 305px);min-height:340px;display:flex;flex-direction:column;gap:7px;padding:16px 17px;scrollbar-color:#343a42 transparent}
.cm-msg{position:relative;max-width:min(78%,680px);background:#20242a;border:1px solid #2b3038;border-radius:5px 15px 15px 15px;padding:9px 12px;color:var(--body)}
.cm-msg.mine{align-self:flex-end;background:rgba(52,181,104,.13);border-color:rgba(78,203,131,.28);border-radius:15px 5px 15px 15px}
.cm-msg.agent{background:rgba(109,75,208,.12);border-color:rgba(148,117,235,.27)}
.cm-msg.system{max-width:92%;align-self:center;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;color:var(--muted);text-align:center}
.cm-msg .muted,.cm-msg .cm-time{color:var(--muted)}
.cm-msg-head{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px}.cm-msg-head b{color:var(--ink)}
.cm-badge{background:var(--navy);color:#fff;border-radius:999px;padding:1px 7px;font-size:10px;font-weight:800}.cm-badge.sys{background:#4b535d}
.cm-time{font-size:10px;margin-left:auto}.cm-report,.cm-reply{background:none;border:0;cursor:pointer;font-size:10px;padding:0 0 0 7px;opacity:.7}.cm-report{color:#d77a77}.cm-reply{color:var(--navy-t)}.cm-report:hover,.cm-reply:hover{opacity:1;text-decoration:underline}
.cm-body{font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;margin-top:3px}.cm-conn{font-size:11px;min-height:18px;padding:0 17px;color:var(--warn)}
.cm-composer{display:flex;align-items:flex-end;flex-wrap:nowrap;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--line);background:#141619;margin:0}
.cm-composer textarea{flex:1 1 auto;min-width:0;resize:none;min-height:44px;max-height:120px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px;margin:0}
.cm-composer textarea:focus{border-color:var(--emerald);outline:2px solid rgba(52,181,104,.12)}.cm-composer .btn{min-height:44px;padding:10px 20px}.cm-agent-trigger{height:44px;padding:0 12px;border-radius:11px;border:1px solid rgba(148,117,235,.35);background:rgba(109,75,208,.13);color:#c6b7f4;font-weight:800;cursor:pointer;white-space:nowrap}
.cm-readonly{border-top:1px dashed var(--line);padding:14px;text-align:center}.cm-rail{display:grid;gap:12px}.cm-side-card{padding:15px;margin:0}.cm-side-title{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink);font-size:13px;font-weight:800;margin-bottom:11px}.cm-count,.cm-ai-mark{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:rgba(52,181,104,.13);color:var(--emerald-d);font-size:11px;font-weight:900}.cm-ai-mark{background:rgba(109,75,208,.16);color:#bcaaf1}.cm-presence-list{display:grid;gap:7px}.cm-person{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;color:var(--body)}.cm-person-dot{width:8px;height:8px;border-radius:50%;background:var(--emerald-d);box-shadow:0 0 0 3px rgba(78,203,131,.1);flex:0 0 auto}.cm-person-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cm-person-country{margin-left:auto;color:var(--muted);font-size:10px}.cm-rules{padding:5px 4px 0;color:var(--muted);font-size:11px}.cm-rules b{color:var(--body);font-size:12px}.cm-rules p{margin-top:3px}
.cm-agents{display:grid;gap:7px;margin:0}.cm-agent-card{display:flex;align-items:center;gap:9px;text-align:left;background:#1d2027;border:1px solid var(--line);border-radius:11px;padding:8px 9px;cursor:pointer;font:inherit;width:100%;min-width:0;color:var(--body)}.cm-agent-card:hover{border-color:rgba(148,117,235,.45);background:#22252d}.cm-agent-card.soon{opacity:.55;cursor:default}.cm-agent-meta{display:flex;flex-direction:column;min-width:0;flex:1}.cm-agent-meta b{font-size:12px;color:var(--ink)}.cm-agent-role{font-size:10px;color:#ad98ec;font-weight:700}.cm-agent-desc{display:none}.cm-agent-go{color:#bcaaf1;font-size:10px;white-space:nowrap}.cm-ai-note{font-size:10px;line-height:1.35;margin-top:9px}
.cm-dialog{border:0;padding:0;background:transparent;color:var(--body);width:min(540px,calc(100vw - 28px));max-width:none}.cm-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.cm-dialog-card{background:linear-gradient(180deg,#1b1e24,#131519);border:1px solid #30353d;border-radius:18px;padding:22px;box-shadow:0 28px 80px rgba(0,0,0,.65)}.cm-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.cm-dialog-head h2{font-size:21px;margin-top:3px}.cm-dialog-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--body);font-size:23px;cursor:pointer}.cm-dialog label:not(.cm-switch){display:block;margin-top:13px}.cm-dialog input,.cm-dialog select,.cm-dialog textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px 12px;font:inherit;margin-top:5px}.cm-dialog textarea{resize:vertical}.cm-switch{display:flex;align-items:flex-start;gap:10px;margin-top:12px;color:var(--body);font-size:14px;text-transform:none;letter-spacing:0}.cm-switch input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--emerald)}.cm-dialog-section{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.cm-dialog-section h3{font-size:15px}.cm-dialog-section p{font-size:12px;margin-top:3px}.cm-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:960px){#view-comunidad .cm-shell{grid-template-columns:minmax(0,1fr) 230px}.cm-agent-go{display:none}}
@media(max-width:760px){.cm-page-head{align-items:flex-start;flex-direction:column}.cm-head-actions{justify-content:flex-start}#view-comunidad .cm-shell{grid-template-columns:1fr}.cm-rail{grid-template-columns:1fr 1fr}.cm-rules{display:none}.cm-messages{max-height:54vh;min-height:330px}.cm-msg{max-width:90%}}
@media(max-width:520px){.cm-rail{grid-template-columns:1fr}.cm-main{min-height:560px}.cm-agent-trigger{padding:0 9px}.cm-composer textarea,.cm-composer .btn,.cm-agent-trigger{min-height:52px}.cm-composer .btn{padding-left:15px;padding-right:15px}.cm-dialog-card{padding:18px}.cm-page-head .h1{font-size:24px}.cm-toolbar-actions input{width:105px}body:has(#view-comunidad:not(.hidden)) #lcpa-fab{display:none!important}}

/* ── Ayuda: chat de soporte humano ─────────────────────────────────── */
.sup-msg{max-width:82%;border-radius:12px;padding:8px 12px;line-height:1.5}
.sup-team{align-self:flex-start;background:#f4f6f8;border:1px solid #e3e8ee;color:#1b2430}
.sup-mine{align-self:flex-end;background:#1F5C7C;border:1px solid #1a4f6b;color:#fff}
.sup-meta{font-size:11px;opacity:.75;margin-bottom:3px}
.sup-body{font-size:14px;white-space:pre-wrap;word-wrap:break-word}

/* ── Stats Overview (home, look CPAGrip) ───────────────────────────── */
.table-scroll{overflow-x:auto}
.stats-overview td{padding:10px 6px;border-bottom:1px solid var(--line)}
.stats-overview tbody tr:last-child td{border-bottom:0}
.stats-overview tbody tr:first-child td{font-weight:700}
.st-live{color:var(--green);font-size:11px;font-weight:700;letter-spacing:.3px}
/* Tarjeta de soporte (Account Manager) */
.sup-card{border-left:3px solid var(--green)}
.sup-card .btn{margin-top:6px}

/* ── Comunidad: agente IA Valentina (Fase 2C1) ───────────────────────── */
.cm-badge.ai{background:#6d4bd0}
.cm-avatar{font-size:18px;margin-right:2px}
#cm-ask-valentina{white-space:nowrap}
.acm-agent{border:1px solid #e3e8ee;border-radius:10px;padding:10px 12px;margin:8px 0}
.acm-agent .acm-next{color:#8a97a0;font-size:12px}

/* ── Comunidad 2C2: tarjetas de agentes IA ───────────────────────────── */
.cm-agent-ic{font-size:20px}

/* ── Comunidad 2E1: avatares de agentes (con fallback a inicial) ─────── */
.cm-ava-wrap{display:inline-block;position:relative;width:30px;height:30px;flex:0 0 auto}
.cm-ava{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#2a2340;display:block}
.cm-ava.fb{display:grid;place-items:center;color:#dff5c8;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,#6d4bd0,#8FD055)}
.cm-msg-head .cm-ava-wrap,.cm-msg-head .cm-ava{width:26px;height:26px}
.cm-agent-card .cm-ava-wrap,.cm-agent-card .cm-ava{width:34px;height:34px}