/* cerebro */

/* ───────── Análisis y rentabilidad (an-) ───────── */
/* Series validadas (revisor de daltonismo, superficie clara): ingresos oro, gastos azul, insumos aqua. Cartera: gris neutro + rampa de un solo tono. */
.an-page { --an-ing: #E09B00; --an-gas: #3A64C8; --an-ins: #1BAF7A; --an-a0: #C9CDD4; --an-a1: #F2B48C; --an-a2: #E5824A; --an-a3: #C9531F; --an-a4: #8F2F0B; }
.an-page.is-loading .an-kpis, .an-page.is-loading .an-sec, .an-page.is-loading .an-rules { opacity: .55; transition: opacity .2s; }
.an-hero { align-items: center; gap: 20px 28px; }
.an-hero .hero-txt p { max-width: 560px; }
.an-hero-fig { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 220px; }
.an-hero-lbl { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B4BAC4; }
.an-hero-fig b { font-family: var(--titulo); font-weight: 800; font-size: clamp(36px, 5vw, 52px); line-height: 1; letter-spacing: -.03em; color: var(--oro); white-space: nowrap; }
.an-hero-fig b.neg { color: #FF8A80; }
.an-hero-sub { font-size: 0.8438rem; color: #D5D9E0; }
.an-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.an-period .chips { flex-wrap: wrap; }
.an-range { display: flex; align-items: center; gap: 8px; }
.an-range .input { width: auto; min-width: 0; }
.an-prev { margin-left: auto; }
.an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-kpis > :last-child { grid-column: span 2; }
.an-kpi .an-val { font-size: 1.75rem; white-space: nowrap; }
.an-kpi .sub { line-height: 1.35; }
.an-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; width: max-content; max-width: 100%; white-space: nowrap; }
.an-delta.is-good { color: var(--vc-ok, #1D7A4B); background: var(--vc-ok-bg, #E7F4EC); }
.an-delta.is-bad { color: var(--vc-error, #B42318); background: var(--vc-error-bg, #FCEDEB); }
.an-delta.is-flat { color: var(--acero-500); background: var(--acero-50); font-weight: 600; }
.an-delta-vs { font-weight: 500; opacity: .8; }
.an-neg { color: var(--vc-error, #B42318); }
.an-pos { color: var(--vc-ok, #1D7A4B); }
.an-warn { color: var(--vc-aviso, #A65A08); }
.an-strong { font-weight: 650; }
.an-go { display: block; font-size: 0.75rem; color: var(--oro-texto, #8A5A00); font-weight: 600; }
.an-foot { text-align: center; }

.an-sec-head { align-items: flex-start; }
.an-sec-head h3 { margin: 0; }
.an-sec-head p { margin-top: 2px; max-width: 680px; }
.an-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 18px 12px; }
.an-search { flex: 1; min-width: 200px; max-width: 420px; }
.an-filters .an-sel { width: auto; flex: 0 0 auto; min-width: 190px; }
.an-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 18px 14px; }
.an-mini div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--acero-50); min-width: 0; }
.an-mini span { font-size: 0.7813rem; font-weight: 600; color: var(--acero-500); }
.an-mini b { font-family: var(--titulo); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* Tablas y tarjetas */
.an-table-wrap { border-top: 1px solid var(--vc-linea, #ECE7DC); }
.an-tbl th, .an-tbl td { padding-left: 10px; padding-right: 10px; }
.an-tbl th { letter-spacing: .05em; }
.an-tbl td:first-child { min-width: 170px; }
.an-sub { display: block; font-size: 0.7813rem; color: var(--acero-500); }
.an-tbl td.num, .an-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-tbl tfoot td { background: #FAF8F3; border-top: 1px solid var(--vc-linea, #ECE7DC); }
.an-cards { display: grid; gap: 10px; padding: 4px 14px 14px; }
.an-card { display: grid; gap: 8px; width: 100%; padding: 12px 14px; border: 1px solid var(--acero-100); border-radius: 14px; background: #fff; font: inherit; color: inherit; text-align: left; }
button.an-card { cursor: pointer; }
button.an-card:hover { background: var(--oro-50); }
.an-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-card-t { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-card-go { color: var(--acero-400); flex: none; }
.an-card-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; }
.an-card-kv div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; font-size: 0.8125rem; }
.an-card-kv dt { color: var(--acero-500); }
.an-card-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leyenda, muestras y tooltip */
.an-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.7813rem; color: var(--acero-600); margin-bottom: 10px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend-u { margin-left: auto; color: var(--acero-500); }
.an-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.an-sw.s-ing, .an-lbar.s-ing { background: var(--an-ing); }
.an-sw.s-gas, .an-lbar.s-gas, .an-hbar-fill.s-gas { background: var(--an-gas); }
.an-sw.s-ins, .an-lbar.s-ins { background: var(--an-ins); }
.an-sw.a0, .an-aseg.a0 { background: var(--an-a0); }
.an-sw.a1, .an-aseg.a1 { background: var(--an-a1); }
.an-sw.a2, .an-aseg.a2 { background: var(--an-a2); }
.an-sw.a3, .an-aseg.a3 { background: var(--an-a3); }
.an-sw.a4, .an-aseg.a4 { background: var(--an-a4); }
.an-tip { position: absolute; z-index: 3; top: calc(100% - 2px); left: calc(10em + 22px); width: 210px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(20, 21, 25, .95);
  color: #fff; font-size: 0.7813rem; box-shadow: var(--sombra-3); pointer-events: none; }
.an-tip.sm { width: 190px; }
.an-tip b { font-size: 0.8125rem; }
.an-tip span { display: flex; align-items: center; gap: 6px; color: #D5D9E0; }
.an-tip em { font-style: normal; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; margin-left: auto; }
.an-tip-sep { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 4px; margin-top: 2px; }

/* Por línea: tres barras por línea en la misma escala, utilidad a la derecha */
.an-lines { margin: 0; display: grid; gap: 6px; }
.an-lrow { position: relative; display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) minmax(7.5em, auto); align-items: center; gap: 14px; padding: 8px 8px; border-radius: 12px; outline: none; }
.an-lrow.hov, .an-lrow:focus-visible { background: #F7F3EA; }
.an-lrow:focus-visible { box-shadow: inset 0 0 0 1.5px var(--oro); }
.an-lname { display: flex; align-items: center; gap: 8px; font-weight: 650; min-width: 0; }
.an-ldot, .an-lcell .an-ldot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); flex: none; display: inline-block; }
.an-lcell { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.an-lbars { display: grid; gap: 2px; min-width: 0; }
.an-ltrack { height: 8px; min-width: 0; }
.an-lbar { display: block; height: 100%; border-radius: 0 4px 4px 0; transform-origin: left; animation: anGrow .7s var(--vc-ease, ease) backwards; }
.an-lu { display: grid; justify-items: end; gap: 0; font-variant-numeric: tabular-nums; }
.an-lu b { font-size: 0.9688rem; white-space: nowrap; }
.an-lu small { font-size: 0.7188rem; color: var(--acero-500); white-space: nowrap; }
@keyframes anGrow { from { transform: scaleX(0); } }

/* Cartera: barras apiladas por antigüedad (2 px de separación entre tramos) */
.an-aging { margin: 0; display: grid; gap: 4px; }
.an-arow { position: relative; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 0; }
.an-arow .an-tip { top: 100%; left: 30%; right: auto; }
.an-aname { text-align: left; font-weight: 600; justify-self: start; max-width: 100%; color: inherit; }
.an-aname:disabled { cursor: default; text-decoration: none; }
.an-astack { display: flex; gap: 2px; height: 12px; min-width: 0; }
.an-astack:has(+ .an-atotal) { justify-self: start; }
.an-aseg { min-width: 3px; height: 100%; outline: none; }
.an-aseg:first-child { border-radius: 0; }
.an-aseg:last-child { border-radius: 0 4px 4px 0; }
.an-aseg:focus-visible { box-shadow: 0 0 0 2px var(--grafito); }
.an-atotal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-meter-cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.an-meter { width: 54px; height: 6px; border-radius: 3px; background: var(--acero-100); overflow: hidden; display: inline-block; }
.an-meter span { display: block; height: 100%; background: var(--oro); border-radius: 3px; }

/* Barras de una sola serie */
.an-hbars { display: grid; gap: 10px; }
.an-hbar { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 0.8438rem; }
.an-hbar-lbl { color: var(--acero-700); font-weight: 600; }
.an-hbar-track { height: 10px; min-width: 0; }
.an-hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transform-origin: left; animation: anGrow .7s var(--vc-ease, ease) backwards; }
.an-hbar-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-hbar .an-delta-vs { display: none; }

/* Recurrentes y técnicos */
.an-months { display: inline-flex; align-items: center; gap: 3px; }
.an-months i { width: 10px; height: 10px; border-radius: 3px; background: var(--acero-100); display: inline-block; }
.an-months i.on { background: var(--vc-ok, #1D7A4B); }
.an-months span { margin-left: 6px; font-size: 0.7813rem; color: var(--acero-600); }
.an-rej { display: block; font-size: 0.7188rem; color: var(--vc-error, #B42318); font-weight: 600; }
.an-bono { color: var(--grafito); }
.an-rules { display: grid; gap: 14px; }
.an-rules-head { display: flex; align-items: flex-start; gap: 14px; }
.an-rules-head h3 { margin: 0 0 4px; }
.an-rules-head p { margin: 0; line-height: 1.5; max-width: 760px; }
.an-rules-form { display: grid; gap: 12px; border-top: 1px solid var(--acero-100); padding-top: 14px; }
.an-rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.an-unit { position: relative; }
.an-unit .input { padding-left: 34px; }
.an-unit-u { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--acero-500); pointer-events: none; }
.an-rules-btns { justify-content: flex-end; }

@media (max-width: 1100px) { .an-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .an-hero { gap: 14px; }
  .an-hero-fig { min-width: 0; }
  .an-prev { margin-left: 0; }
  .an-range { width: 100%; }
  .an-range .input { flex: 1; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .an-kpi { padding: 12px 12px 14px; }
  .an-kpi .an-val { font-size: 1.3125rem; }
  .an-kpi .kpi-3d { width: 30px; height: 30px; }
  .an-delta { font-size: 0.6875rem; padding: 2px 6px; }
  .an-delta-vs { display: none; }
  .an-mini { grid-template-columns: minmax(0, 1fr); padding: 4px 14px 12px; }
  .an-filters { padding: 4px 14px 12px; }
  .an-lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'n u' 'b b'; gap: 6px 10px; }
  .an-lname { grid-area: n; } .an-lu { grid-area: u; } .an-lbars { grid-area: b; }
  .an-legend-u { margin-left: 0; }
  .an-arow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'n t' 's s'; gap: 4px 10px; }
  .an-aname { grid-area: n; } .an-atotal { grid-area: t; } .an-astack { grid-area: s; }
  .an-arow .an-tip, .an-lrow .an-tip { left: 0; }
  .an-hbar { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; }
  .an-hbar .an-delta { grid-column: 2 / -1; justify-self: end; }
  .an-rules-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .an-rules-head > .btn { grid-column: 1 / -1; justify-self: start; }
  .an-rules-grid { grid-template-columns: minmax(0, 1fr); }
  .an-card-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) { .an-lbar, .an-hbar-fill { animation: none; } }
@media print { .an-period, .an-filters, .tabs { display: none; } }

/* ───────── Cliente 360 (c360-) ───────── */
.c360-page { --c360-bar: #E09B00; }
.c360-search { flex: 1; max-width: 520px; }
.c360-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.c360-pick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.c360-pick:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(16, 18, 22, .3); }
.c360-pick-name { font-weight: 700; }
.c360-go { color: var(--acero-400); flex: none; }
.c360-mark { display: inline-grid; place-items: center; flex: none; border-radius: 14px; background: var(--c); color: #fff; font-family: var(--titulo); font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

.c360-head { position: relative; padding: 20px 22px; display: grid; gap: 16px; overflow: hidden; }
.c360-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.c360-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.c360-kicker { font-size: 0.7188rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-texto, #8A5A00); }
.c360-name { font-size: 1.875rem; letter-spacing: -.025em; margin: 2px 0 4px; overflow-wrap: anywhere; }
.c360-contact { margin-top: 4px; color: var(--acero-700); overflow-wrap: anywhere; }
.c360-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.c360-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding-top: 14px; border-top: 1px solid var(--acero-100); }
.c360-dl { margin: 0; display: grid; gap: 6px; align-content: start; }
.c360-dl-t { font-family: var(--titulo); font-weight: 800; font-size: 0.7813rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acero-500); }
.c360-dl div:not(.c360-dl-t) { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; font-size: 0.8438rem; }
.c360-dl dt { color: var(--acero-500); }
.c360-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.c360-nofiscal { margin: 0; padding-top: 12px; border-top: 1px solid var(--acero-100); }

.c360-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c360-kpi .c360-val { font-size: 1.625rem; white-space: nowrap; }
/* Las tarjetas bajan la pantalla hasta su lista: margen para que la barra de arriba no la tape. */
.c360-anchor { scroll-margin-top: 84px; }
#c360-tabs { height: 0; }
.c360-late { color: var(--vc-error, #B42318); font-weight: 650; }
.c360-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--acero-100); color: var(--acero-600); font-size: 0.7188rem; font-weight: 700; text-align: center; margin-left: 4px; }
.tab[aria-selected="true"] .c360-n { background: var(--oro-100, #FFE9B0); color: var(--grafito); }

.c360-months { position: relative; margin: 0; display: grid; gap: 10px; }
.c360-mhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.c360-mhead b { color: var(--grafito); font-variant-numeric: tabular-nums; }
.c360-cols { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 170px; border-bottom: 1px solid #D6CFC0; }
.c360-col { display: grid; grid-template-rows: minmax(0, 1fr) 22px; align-items: end; outline: none; cursor: default; border-radius: 8px; }
.c360-col.hov, .c360-col:focus-visible { background: #F7F3EA; }
.c360-col:focus-visible { box-shadow: inset 0 0 0 1.5px var(--oro); }
.c360-bar-area { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.c360-bar { width: min(28px, 70%); background: var(--c360-bar); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: c360Grow .7s var(--vc-ease, ease) backwards; }
.c360-mlbl { font-size: 0.6875rem; color: var(--acero-500); text-align: center; align-self: start; padding-top: 4px; white-space: nowrap; overflow: hidden; }
.c360-col.cur .c360-mlbl { color: var(--grafito); font-weight: 700; }
.c360-tip { position: absolute; top: -6px; z-index: 3; display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(20, 21, 25, .95); color: #fff; font-size: 0.7813rem;
  box-shadow: var(--sombra-3); pointer-events: none; white-space: nowrap; }
.c360-tip span { font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes c360Grow { from { transform: scaleY(0); } }

.c360-list { overflow: hidden; }
.c360-row { min-width: 0; }
.c360-right { display: flex; align-items: center; gap: 10px; flex: none; font-variant-numeric: tabular-nums; }
.c360-right b { white-space: nowrap; }
.c360-empty { padding: 14px 18px; margin: 0; }
.c360-stars { color: #C98E00; letter-spacing: 1px; }
.c360-stars .off { color: var(--acero-200); }
.c360-tl { list-style: none; margin: 0; padding: 6px 0; }
.c360-tl-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; }
.c360-tl-item:hover { background: var(--oro-50); }
.c360-tl li + li .c360-tl-item::before { content: ''; position: absolute; left: 33px; top: -10px; height: 18px; width: 2px; background: var(--acero-100); }
.c360-tl-dot { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.c360-tl-item .grow { display: grid; gap: 2px; }
.c360-tl-k { font-size: 0.75rem; font-weight: 600; color: var(--acero-500); }
.c360-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.c360-foot { text-align: center; }

@media (max-width: 900px) { .c360-facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .c360-head { padding: 16px 16px 16px 20px; }
  .c360-id { flex-wrap: wrap; }
  .c360-name { font-size: 1.5rem; }
  .c360-acts { width: 100%; justify-content: flex-start; }
  .c360-dl div:not(.c360-dl-t) { grid-template-columns: minmax(0, 8em) minmax(0, 1fr); }
  .c360-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .c360-kpi { padding: 12px 12px 14px; }
  .c360-kpi .c360-val { font-size: 1.25rem; }
  .c360-kpi .kpi-3d { width: 30px; height: 30px; }
  .c360-cols { gap: 3px; height: 140px; }
  .c360-mlbl { font-size: 0.625rem; }
  .c360-row { flex-wrap: wrap; }
  .c360-row > .grow { flex: 1 1 calc(100% - 80px); }
  .c360-right { flex-wrap: wrap; justify-content: flex-end; }
  .c360-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .c360-bar { animation: none; } }

/* ═════════ Buzón (bz-), Reportes de voz (vz-), Correo (co-) y Facturación demo (fx-) ═════════ */
/* Hojas anchas en escritorio (en el celular siguen siendo hoja inferior). */
@media (min-width: 641px) { .drawer.fin-sheet.bz-wide, .drawer.fin-sheet.vz-wide { width: min(720px, 100vw); } }

/* ───────── Buzón único ───────── */
.bz-kpis { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.bz-card { overflow: hidden; }
.bz-filters { display: grid; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--acero-100); min-width: 0; }
.bz-chan { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bz-chip { display: inline-flex; align-items: center; gap: 6px; }
.bz-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; }
.bz-sel { width: auto; min-width: 150px; min-height: 42px; height: 42px; }
.bz-search { flex: 1 1 240px; min-width: 0; max-width: 460px; }
.bz-ch { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--acero-50); color: var(--acero-700); border: 1px solid var(--acero-100); }
.bz-ch-whatsapp { background: #E3F6EA; color: #178A45; border-color: transparent; }
.bz-ch-web { background: var(--oro-100); color: var(--oro-texto); border-color: transparent; }
.bz-ch-qr { background: var(--error-50); color: var(--error); border-color: transparent; }
.bz-ch-llamada { background: var(--info-50); color: var(--info); border-color: transparent; }
.bz-ch-correo { background: var(--azul-50, #E3EAFB); color: var(--azul, #2A55C5); border-color: transparent; }
.kpi-top .bz-ch { width: 40px; height: 40px; }
.bz-row { align-items: flex-start; cursor: pointer; }
.bz-row:hover, .bz-row.sel { background: var(--oro-50); }
.bz-row.urgent { box-shadow: inset 3px 0 0 var(--error); }
.bz-row-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bz-row-top .t { min-width: 0; }
.bz-when { margin-left: auto; flex: none; }
.bz-msg { margin: 2px 0 4px; color: var(--acero-700); font-size: 0.875rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bz-row-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.bz-links { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.bz-link { padding: 1px 8px; border-radius: 999px; background: var(--acero-50); border: 1px solid var(--acero-100); color: var(--acero-700); font-size: 0.75rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-row-side { display: grid; justify-items: end; gap: 6px; flex: none; }
.bz-full { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.5; }
.bz-convert { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-more summary { cursor: pointer; font-weight: 600; color: var(--acero-700); }
@media (max-width: 640px) {
  .bz-filters { padding: 12px 14px; }
  .bz-chan { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .bz-chan::-webkit-scrollbar { display: none; }
  .bz-chan .chip { flex: none; }
  .bz-sel { flex: 1 1 140px; min-width: 0; }
  .bz-row { padding: 12px 14px; gap: 10px; }
  .bz-ch { width: 34px; height: 34px; border-radius: 10px; }
  .bz-row-side { position: static; }
  .bz-row-side .pill { font-size: 0.7188rem; padding: 2px 8px; }
  .bz-convert .btn { flex: 1 1 100%; }
}

/* ───────── Reportes de voz ───────── */
.vz-kpis { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.vz-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--acero-100); }
.vz-sel { width: auto; min-width: 180px; max-width: 100%; min-height: 40px; height: 40px; }
.vz-row { align-items: flex-start; cursor: pointer; }
.vz-row:hover, .vz-row.sel { background: var(--oro-50); }
.vz-row.unread .t { font-weight: 800; }
.vz-row-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vz-when { margin-left: auto; flex: none; }
.vz-row-sum { color: var(--acero-700); font-size: 0.875rem; line-height: 1.4; margin: 2px 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vz-row.unread .vz-row-sum { color: var(--texto, #0B0C0E); }
.vz-row-side { display: grid; justify-items: end; gap: 6px; flex: none; }
.vz-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--acero-200); }
.vz-dot.vz-urgente { background: var(--error); }
.vz-dot.vz-atencion { background: var(--aviso); }
.vz-new { font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-texto); }
.vz-detail .card { box-shadow: none; }
.vz-sumcard p { margin: 4px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.vz-md { font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.vz-md h4 { font-family: var(--titulo); font-size: 0.875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--acero-600); margin: 14px 0 6px; }
.vz-md h4:first-child { margin-top: 0; }
.vz-md p { margin: 0 0 8px; }
.vz-md ul, .vz-md ol { margin: 0 0 8px; padding-left: 22px; }
.vz-md li { margin: 2px 0; }
.vz-plain { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; line-height: 1.5; }
.vz-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.vz-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--grafito); flex: none; }
.vz-check .done { text-decoration: line-through; color: var(--acero-400); }
.vz-audio { width: 100%; }
.vz-transcript summary { cursor: pointer; font-weight: 600; }
.vz-transcript .vz-plain { margin-top: 8px; color: var(--acero-700); }
/* Celular del técnico */
.vz-tech { max-width: 640px; margin: 0 auto; width: 100%; }
.vz-stage { display: grid; justify-items: center; gap: 14px; padding: 8px 0 4px; text-align: center; }
.vz-rec { --ring: 8px; width: 148px; height: 148px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--oro); color: var(--grafito);
  box-shadow: 0 0 0 var(--ring) rgba(253, 178, 7, .22), 0 14px 30px -12px rgba(16, 18, 22, .45); transition: box-shadow .12s linear, transform .15s ease; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vz-rec:active { transform: scale(.97); }
.vz-rec.on { background: var(--error); color: #fff; box-shadow: 0 0 0 var(--ring) rgba(180, 35, 24, .2), 0 14px 30px -12px rgba(16, 18, 22, .45); }
.vz-rec-core { display: grid; place-items: center; width: 100%; height: 100%; }
.vz-rec-stop { width: 40px; height: 40px; border-radius: 8px; background: #fff; }
.vz-time { font-size: 0.9375rem; min-height: 22px; }
.vz-time b { font-family: var(--titulo); font-size: 1.625rem; font-variant-numeric: tabular-nums; }
.vz-meter { width: min(280px, 80%); height: 8px; border-radius: 8px; background: var(--acero-100); overflow: hidden; }
.vz-meter span { display: block; height: 100%; background: var(--grafito); transform-origin: left center; transition: transform .08s linear; }
.vz-live { margin: 0; max-width: 100%; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.vz-take { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--acero-50); border: 1px solid var(--acero-100); font-weight: 600; }
.vz-take audio { width: 100%; max-width: 100%; height: 40px; }
.vz-send-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.vz-summary { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.45; }
.vz-acts { margin: 0; padding-left: 20px; }
.vz-mine { align-items: center; }
.vz-mine-open { background: var(--acero-50); border-top: 1px solid var(--acero-100); display: grid; gap: 8px; }
@media (max-width: 640px) {
  .vz-filters { padding: 12px 14px; }
  .vz-sel { flex: 1 1 100%; }
  .vz-row { padding: 12px 14px; gap: 10px; }
  .vz-row-side .pill { font-size: 0.7188rem; padding: 2px 8px; }
  .vz-rec { width: 132px; height: 132px; }
  .vz-send-row { grid-template-columns: 1fr; }
}

/* ───────── Correo ───────── */
.co-account { gap: 8px; min-width: 0; }
.co-account > span { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; }
.co-guide h2 { font-family: var(--titulo); }
.co-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.co-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.co-steps p { margin: 4px 0 0; color: var(--acero-700); line-height: 1.5; overflow-wrap: anywhere; }
.co-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grafito); color: var(--oro); font-weight: 800; font-family: var(--titulo); }
.co-uri { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.co-uri code, .co-guide code { background: var(--acero-50); border: 1px solid var(--acero-100); border-radius: 8px; padding: 4px 8px; font-size: 0.8125rem; overflow-wrap: anywhere; word-break: break-all; }
.co-connect { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.co-connect .grow { min-width: 220px; }
.co-accounts summary { cursor: pointer; }
.co-acc-list { display: grid; gap: 4px; margin-top: 6px; }
.co-acc-list li { padding: 8px 0; border-top: 1px solid var(--acero-100); }
.co-split { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.co-list-card { overflow: hidden; min-width: 0; }
.co-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--acero-100); }
.co-search { flex: 1 1 200px; min-width: 0; }
.co-list { max-height: calc(100vh - 260px); overflow-y: auto; }
.co-row { align-items: flex-start; cursor: pointer; }
.co-row:hover, .co-row.sel { background: var(--oro-50); }
.co-row.unread .t, .co-row.unread .co-subj { font-weight: 800; }
.co-row-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.co-when { margin-left: auto; flex: none; }
.co-subj { font-size: 0.875rem; color: var(--texto, #0B0C0E); }
.co-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.co-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--info); flex: none; margin-top: 6px; }
.co-pager { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--acero-100); }
.co-read { padding: 18px 20px; display: grid; gap: 14px; min-width: 0; }
.co-read-head { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.co-read-subj { font-family: var(--titulo); font-size: 1.25rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.co-back { display: none; }
.co-read-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.co-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.co-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--acero-200); color: inherit; text-decoration: none; }
.co-file:hover { background: var(--acero-50); }
.co-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.6; border-top: 1px solid var(--acero-100); padding-top: 14px; }
.co-empty-read { min-height: 300px; display: grid; place-items: center; }
@media (max-width: 899px) {
  .co-back { display: inline-flex; flex: none; }
  .co-read { padding: 14px; }
  .co-list { max-height: none; }
}
@media (max-width: 640px) {
  .co-tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .co-tools .chips::-webkit-scrollbar { display: none; }
  .co-tools .chip { flex: none; }
  .co-account > span { max-width: 190px; }
  .co-connect .btn { width: 100%; }
}

/* ───────── Facturación (demo) ───────── */
.fx-demo { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--error-50); color: var(--error); font-size: 0.8125rem; letter-spacing: .1em; font-weight: 800; }
.fx-banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 16px; border: 1.5px dashed var(--oro); background: var(--oro-50); line-height: 1.45; }
.fx-cols { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.fx-cols .fx-preview { position: sticky; top: 14px; }
.fx-form { min-width: 0; }
.fx-form h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.fx-step { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grafito); color: var(--oro); font-size: 0.8125rem; font-weight: 800; }
.fx-warn { display: flex; gap: 8px; align-items: flex-start; color: var(--aviso); line-height: 1.4; }
.fx-line { border: 1px solid var(--acero-100); border-radius: 14px; padding: 12px; display: grid; gap: 10px; min-width: 0; }
.fx-line-head { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.fx-line-head .grow { min-width: 0; }
.fx-line-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-top: 8px; border-radius: 8px; background: var(--acero-50); font-weight: 700; font-size: 0.8125rem; }
.fx-line-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fx-line-imp { text-align: right; }
.fx-preview { min-width: 0; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-xml { margin: 0; padding: 14px; border-radius: 14px; background: #14151A; color: #E9E5DA; font: 0.75rem/1.55 var(--mono, ui-monospace, monospace); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; max-height: 640px; overflow-y: auto; }
.fx-paper { --fx: #FDB207; position: relative; overflow: hidden; background: #fff; color: #0B0C0E; border: 1px solid var(--acero-200); border-radius: 14px; padding: 22px; display: grid; gap: 16px;
  box-shadow: 0 18px 40px -26px rgba(16, 18, 22, .45); border-top: 6px solid var(--fx); min-width: 0; }
.fx-wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 800 2.75rem/1 var(--titulo); letter-spacing: .08em; color: rgba(180, 35, 24, .07); transform: rotate(-24deg); white-space: nowrap; }
.fx-p-top { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.fx-p-top .grow { min-width: 0; }
.fx-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--fx); color: #0B0C0E; font: 800 1.25rem/1 var(--titulo); flex: none; }
.fx-p-name { display: block; font: 800 0.9375rem/1.25 var(--titulo); overflow-wrap: anywhere; }
.fx-p-folio { display: grid; justify-items: end; text-align: right; flex: none; }
.fx-p-folio > span:first-child { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acero-500); }
.fx-p-folio b { font: 800 1.25rem/1.1 var(--titulo); }
.fx-p-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding: 12px 14px; border-radius: 12px; background: #F7F7F5; min-width: 0; }
.fx-p-grid > div { min-width: 0; overflow-wrap: anywhere; }
.fx-lbl { display: block; font-size: 0.6563rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acero-500); font-weight: 700; margin-bottom: 2px; }
.fx-p-table { overflow-x: auto; }
.fx-p-table table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.fx-p-table th { text-align: left; font-size: 0.6563rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acero-500); border-bottom: 2px solid var(--fx); padding: 6px; }
.fx-p-table td { padding: 7px 6px; border-bottom: 1px solid var(--acero-100); vertical-align: top; overflow-wrap: anywhere; }
.fx-p-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-p-tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.fx-p-tot dl { display: grid; grid-template-columns: auto auto; gap: 4px 18px; margin: 0; font-variant-numeric: tabular-nums; }
.fx-p-tot dt { color: var(--acero-600); }
.fx-p-tot dd { margin: 0; text-align: right; font-weight: 600; }
.fx-p-tot .big { font: 800 1.125rem/1.2 var(--titulo); color: #0B0C0E; border-top: 1px solid var(--acero-200); padding-top: 4px; }
.fx-letra { font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.fx-leyenda { margin: 0; color: var(--acero-700); }
.fx-p-stamp { display: flex; gap: 14px; align-items: flex-start; padding-top: 12px; border-top: 1px dashed var(--acero-200); min-width: 0; }
.fx-p-stamp .grow { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.fx-qr { flex: none; border: 1px solid var(--acero-200); border-radius: 6px; }
.fx-sello { font-family: var(--mono, ui-monospace, monospace); font-size: 0.6563rem; color: var(--acero-600); word-break: break-all; }
.fx-p-foot { text-align: center; color: var(--acero-500); letter-spacing: .04em; }
.fx-color { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--acero-200); border-radius: 10px; background: #fff; }
.fx-recv-amt { font-variant-numeric: tabular-nums; flex: none; }
@media (max-width: 1179px) { .fx-preview { position: static; } }
@media (max-width: 640px) {
  .fx-banner { align-items: flex-start; padding: 12px 14px; font-size: 0.875rem; }
  .fx-line-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-paper { padding: 14px; gap: 12px; }
  .fx-p-top { flex-wrap: wrap; }
  .fx-p-folio { justify-items: start; text-align: left; width: 100%; }
  .fx-p-grid { grid-template-columns: 1fr; }
  .fx-p-tot { grid-template-columns: 1fr; }
  .fx-p-stamp { flex-direction: column; }
  .fx-wm { font-size: 1.625rem; }
  .fx-actions .btn { flex: 1 1 calc(50% - 8px); }
}
@media print {
  body.fx-printing * { visibility: hidden !important; }
  body.fx-printing .fx-paper, body.fx-printing .fx-paper * { visibility: visible !important; }
  body.fx-printing .fx-paper { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; border-top: 6px solid var(--fx); }
}

/* Ajustes tras revisar las capturas (bz-, vz-, co-, fx-) */
select.input.bz-sel, select.input.vz-sel { width: auto; flex: 0 0 auto; height: 42px; min-height: 42px; }
.bz-filter-row .bz-search { flex: 1 1 260px; }
.fx-p-table td.mono { white-space: nowrap; }
.fx-wm { font-size: 1.875rem; }
.kv.fx-co-kv { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.kv.fx-co-kv dd { margin: 0; }
@media (max-width: 640px) {
  select.input.bz-sel, select.input.vz-sel { flex: 1 1 140px; width: auto; }
  .bz-kpis, .vz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vz-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bz-kpis .bz-kpi-ch { display: none; }
  .bz-kpis .kpi, .vz-kpis .kpi { padding: 10px 12px; gap: 4px; }
  .bz-kpis .kpi-top, .vz-kpis .kpi-top { gap: 8px; }
  .bz-kpis .kpi-3d, .vz-kpis .kpi-3d { width: 28px !important; height: 28px !important; }
  .bz-kpis .kpi-go, .vz-kpis .kpi-go, .bz-kpis .sub, .vz-kpis .sub { display: none; }
  .bz-kpis .lbl, .vz-kpis .lbl { font-size: 0.75rem; }
  .bz-kpis .val, .vz-kpis .val { font-size: 1.5rem; }
  .fx-c-sat { display: none; }
  .fx-p-table table { font-size: 0.75rem; }
  .fx-p-table th, .fx-p-table td { padding: 6px 4px; }
  .fx-wm { font-size: 1.25rem; }
  .co-account { width: 100%; justify-content: space-between; }
  .co-account > span { max-width: none; flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 640px) { .vz-kpis > .kpi, .bz-kpis > .kpi { grid-column: auto !important; } }

/* Calidad (encuestas): barras de 0 a 5 en una tinta y cuadrícula técnico × pregunta en 5 pasos de la misma tinta */
.an-page { --an-q1: #86b6ef; --an-q2: #5598e7; --an-q3: #2a78d6; --an-q4: #1c5cab; --an-q5: #104281; --an-qbar: #2a78d6; --an-qgrid: #e1e0d9; }
.an-qbars { margin: 0; display: grid; gap: 10px; }
.an-qaxis, .an-qrow { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 6.5em; align-items: center; gap: 10px; font-size: 0.8438rem; position: relative; }
.an-qticks { position: relative; height: 14px; }
.an-qticks i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 0.6875rem; color: #898781; font-variant-numeric: tabular-nums; }
.an-qticks i:first-child { transform: none; }
.an-qticks i:last-child { transform: translateX(-100%); }
.an-qrow { border-radius: 8px; outline: none; padding: 2px 0; }
.an-qrow.hov, .an-qrow:focus-visible { background: var(--acero-50); }
.an-qtrack { position: relative; height: 12px; min-width: 0; }
.an-qgrid { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--an-qgrid); }
.an-qfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--an-qbar); border-radius: 0 4px 4px 0; transform-origin: left; animation: anGrow .7s var(--vc-ease, ease) backwards; }
.an-qrow .an-hbar-val small { font-weight: 500; }
.an-qrow .an-tip { left: calc(9.5em + 10px); }
.an-qgridwrap { margin: 0; display: grid; gap: 10px; }
.an-qlegend { flex-wrap: wrap; }
.an-sw.q1, .an-qcell.q1, .an-qbadge.q1 { background: var(--an-q1); color: #0b0b0b; }
.an-sw.q2, .an-qcell.q2, .an-qbadge.q2 { background: var(--an-q2); color: #0b0b0b; }
.an-sw.q3, .an-qcell.q3, .an-qbadge.q3 { background: var(--an-q3); color: #fff; }
.an-sw.q4, .an-qcell.q4, .an-qbadge.q4 { background: var(--an-q4); color: #fff; }
.an-sw.q5, .an-qcell.q5, .an-qbadge.q5 { background: var(--an-q5); color: #fff; }
.an-qcell.q0, .an-qbadge.q0 { background: var(--acero-50); color: #898781; }
.an-qtable { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 520px; font-size: 0.8125rem; }
.an-qtable th { font-weight: 600; color: var(--acero-700); text-align: center; padding: 4px 6px; font-size: 0.75rem; }
.an-qtable th[scope="row"] { text-align: left; max-width: 12em; }
.an-qcell { position: relative; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; height: 38px; min-width: 64px; border-radius: 4px; outline: none; cursor: default; }
.an-qcell.on, .an-qcell:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--grafito); }
.an-qcell .an-tip { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); text-align: left; font-weight: 400; }
.an-qrecent { display: grid; }
.an-qrecent li + li { border-top: 1px solid var(--acero-100); }
.an-qitem { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 18px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.an-qitem:hover { background: var(--acero-50); }
.an-qbadge { flex: none; min-width: 42px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-qcomment { display: block; margin-top: 2px; color: var(--acero-700); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .an-qaxis, .an-qrow { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) 5.5em; } .an-qrow .an-tip { left: 0; } }
@media (prefers-reduced-motion: reduce) { .an-qfill { animation: none; } }