/* site/app/app.css — panel REAKTIVA. Login/operador centrados; base del cliente full-width. */
:root { --bg:#0D1117; --card:#161B22; --fg:#E6EDF3; --sub:#8B949E; --accent:#FF7A1A; --err:#F85149; --line:#21262D; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:"Hanken Grotesk",system-ui,sans-serif; }
.topbar { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); }
.brand { font-weight:800; letter-spacing:-0.5px; font-size:1.5rem; color:var(--fg); line-height:1; }
.brand-k { color:var(--accent); }
.who { margin-left:auto; color:var(--sub); font-size:14px; }
.logout { background:transparent; color:var(--sub); border:1px solid #30363D; border-radius:999px; padding:6px 14px; cursor:pointer; }
.logout:hover { color:var(--fg); }
.wrap { max-width:760px; margin:0 auto; padding:48px 20px; }
body.dash-mode .wrap { display:none; }  /* cliente: el login va oculto, no dejar su padding como banda vacía */
/* Operador: consola de datos con tablas de muchas columnas (Campañas todas = 8 cols).
   El ancho de login (760) las corta → ensanchamos SOLO en modo operador. El login no
   tiene esta clase, así que sigue angosto/centrado. */
body.op-mode .wrap { max-width:1180px; }
.card, .panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px; }
h1 { margin:0 0 8px; font-weight:700; }
.sub { color:var(--sub); margin:0 0 16px; }
.login .g_id_signin { margin-top:8px; }
.empty { border:1px dashed #30363D; border-radius:12px; padding:32px; text-align:center; margin-top:16px; }
.empty-title { font-weight:600; margin:0 0 6px; }
.empty-sub { color:var(--sub); margin:0; }
.err { color:var(--err); margin-top:16px; }

/* ===== Dashboard del cliente (full-width) ===== */
.dashboard { padding:18px 28px 28px; }
.dash-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:14px; }
.dash-head h1 { margin:0; font-size:1.5rem; }

/* Importar = collapsible compacto */
.import-details { background:var(--card); border:1px solid var(--line); border-radius:12px; max-width:520px; }
.import-details > summary { cursor:pointer; padding:10px 16px; font-weight:600; font-size:.92rem; list-style:none; user-select:none; }
.import-details > summary::-webkit-details-marker { display:none; }
.import-details > summary::before { content:"＋ "; color:var(--accent); }
.import-details[open] > summary::before { content:"－ "; }
.import-body { padding:0 16px 16px; }
.upload-row { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.btn-primary { background:var(--accent); color:#08090c; border:0; border-radius:999px; padding:.5rem 1.2rem; font-weight:700; cursor:pointer; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; color:var(--sub); border:1px solid #30363D; border-radius:8px; padding:.45rem .8rem; cursor:pointer; }
.btn-ghost:hover { color:var(--fg); }
.import-result { margin-top:.8rem; font-size:.9rem; line-height:1.5; }
.import-result details { margin-top:.4rem; }
.import-result li { color:#caa; }

/* Toolbar de filtros */
.toolbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:12px; }
.search { flex:0 1 340px; width:340px; max-width:100%; background:#11151c; color:var(--fg); border:1px solid #2a313c; border-radius:10px; padding:.55rem .9rem; font-size:.95rem; }
.search:focus, .toolbar select:focus { outline:none; border-color:var(--accent); }
.toolbar select { background:#11151c; color:#dfe6ee; border:1px solid #2a313c; border-radius:10px; padding:.55rem .7rem; font-size:.9rem; }
.count { margin-left:auto; color:var(--sub); font-size:.9rem; white-space:nowrap; }

/* Barra de tags */
.tag-bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:12px; max-height:64px; overflow-y:auto; padding:2px; }
.tag-bar-label { color:var(--sub); font-size:.82rem; margin-right:.2rem; }
.tag-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:8px; }
.tag-search { display:block; width:340px; max-width:100%; background:#11151c; color:var(--fg); border:1px solid #2a313c; border-radius:10px; padding:.55rem .9rem; font-size:.95rem; }
/* "Limpiar filtros" alineado bajo Operación+Tipo (mismo ancho combinado + gap de la toolbar) */
#f_operacion, #f_tipo_propiedad { width:150px; }
.clear-filters { box-sizing:border-box; width:calc(300px + .6rem); flex:0 0 auto; text-align:center; }
.tag-search:focus { outline:none; border-color:var(--accent); }
.tag-bar-empty { color:var(--sub); font-size:.8rem; font-style:italic; }
.camp-view-body { display:flex; flex-direction:column; gap:.5rem; margin:.6rem 0 1rem; }
.cv-row { display:flex; gap:.8rem; font-size:.9rem; line-height:1.4; }
.cv-k { flex:0 0 130px; color:var(--sub); }
.cv-v { flex:1 1 auto; color:var(--fg); }

/* Nombre de campaña clickeable (abre el detalle) */
.camp-name-link { background:none; border:none; color:var(--fg); font:inherit; font-weight:600; cursor:pointer; padding:0; text-align:left; }
.camp-name-link:hover { color:var(--accent); text-decoration:underline; }

/* Tooltip arriba del botón al hacer hover */
.row-act { position:relative; }
.row-act[data-tip]:hover::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#000; color:#fff; font-size:.72rem; padding:3px 7px; border-radius:5px; white-space:nowrap; z-index:20; pointer-events:none;
}

/* Preview estilo WhatsApp */
.wa-preview-card { max-width:430px; }
.wa-chat { background:#0b141a; border-radius:12px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; }
.wa-bubble { background:#202c33; border-radius:8px; padding:8px 8px 6px; max-width:330px; box-shadow:0 1px 1px rgba(0,0,0,.3); overflow:hidden; }
.wa-flyer { width:100%; border-radius:6px; display:block; margin-bottom:6px; }
.wa-flyer-missing { background:#11181d; color:#8696a0; padding:22px; text-align:center; border-radius:6px; margin-bottom:6px; border:1px dashed #2a3942; font-size:.85rem; }
.wa-flyer-loading { background:#11181d; color:#8696a0; padding:22px; text-align:center; border-radius:6px; margin-bottom:6px; border:1px dashed #2a3942; font-size:.85rem; }
.wa-body { color:#e9edef; font-size:.9rem; line-height:1.38; }
.wa-footer { color:#8696a0; font-size:.64rem; margin-top:6px; opacity:.85; }
.wa-buttons { max-width:330px; width:100%; }
.wa-btn { background:#202c33; color:#53bdeb; text-align:center; padding:9px; border-radius:8px; margin-top:4px; font-size:.85rem; }
.wa-meta { color:var(--sub); font-size:.78rem; margin-top:12px; }

/* Editor de texto del mensaje (control total del wording) */
.camp-body-input { width:100%; box-sizing:border-box; background:#0c0f14; color:#dfe6ee; border:1px solid #2a313c; border-radius:8px; padding:.55rem .7rem; font-size:.92rem; font-family:inherit; resize:vertical; line-height:1.4; margin-top:4px; }
.camp-body-input:focus { outline:none; border-color:var(--accent); }
.tag-chip { background:rgba(255,122,26,.08); color:#ffb784; border:1px solid rgba(255,122,26,.28); border-radius:999px; padding:.25rem .6rem; font-size:.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; }
.tag-chip:hover { border-color:rgba(255,122,26,.55); }
.tag-chip .n { color:#c98a5a; font-size:.7rem; }
.tag-chip.on { background:var(--accent); border-color:var(--accent); color:#08090c; font-weight:600; }
.tag-chip.on .n { color:#4a2200; }

/* Tabla full-width con header sticky */
.table-scroll { border:1px solid var(--line); border-radius:12px; overflow:auto; max-height:calc(100vh - 250px); }

/* ===== Panel del cliente: UN SOLO scroll (el de la página) =====
   Diana veía 3 barras apiladas (tags / tabla / página). Sacamos los scrolls INTERNOS
   del panel del cliente: las tablas y la barra de tags crecen naturalmente y scrollea
   solo la página. El thead ya es position:sticky → al no haber contenedor interno con
   overflow, se pega al tope del viewport (no de la cajita) → no se pierden las columnas. */
#panel_client .table-scroll { overflow:visible; max-height:none; }
#panel_client .tag-bar { overflow:visible; max-height:none; }
.pager { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:12px; }
.pager .count { margin-left:0; }
.pager .btn-ghost:disabled { opacity:.4; cursor:default; }
.pager .btn-ghost:disabled:hover { color:var(--sub); }
table.contacts { width:100%; border-collapse:collapse; font-size:.9rem; }
table.contacts thead th { position:sticky; top:0; background:#0f141b; color:#9aa6b2; font-weight:600; text-align:left; padding:.7rem .8rem; border-bottom:1px solid #283040; white-space:nowrap; z-index:2; }
table.contacts th.sortable { cursor:pointer; user-select:none; }
table.contacts th.sortable:hover { color:var(--fg); }
table.contacts th .arrow { color:var(--accent); font-size:.7rem; }
table.contacts td { padding:.55rem .8rem; border-bottom:1px solid #1a212b; vertical-align:top; }
table.contacts tbody tr:nth-child(even) { background:rgba(255,255,255,.015); }
table.contacts tbody tr:hover { background:rgba(255,122,26,.06); }
table.contacts tr.is-optout { opacity:.5; }
td.nombre { font-weight:600; max-width:280px; }
td.mono, .mono { font-family:ui-monospace,monospace; color:#cbd5e1; }
.contacts td.mono { color:var(--accent); }
.tags-col { max-width:420px; }
.badge { font-size:.72rem; padding:.15rem .5rem; border-radius:999px; white-space:nowrap; }
.badge.ok { background:#11331f; color:#7fe6a3; }
.badge.optout { background:#3a1414; color:#ff8a8a; }
.tag { display:inline-block; background:rgba(255,122,26,.10); color:#ffb784; border:1px solid rgba(255,122,26,.28); font-size:.72rem; padding:.1rem .45rem; border-radius:6px; margin:1px 1px; }

.btn-primary { background:var(--accent); color:#08110a; border:none; border-radius:8px; padding:.45rem .9rem; font-weight:600; cursor:pointer; }
.btn-primary:hover { filter:brightness(1.08); }
.acciones-col { width:104px; }
.row-act { background:transparent; border:1px solid #30363D; border-radius:6px; padding:.2rem .45rem; cursor:pointer; color:var(--sub); margin-right:4px; }
.row-act:hover { color:var(--fg); border-color:var(--accent); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal[hidden] { display:none; }
.modal-card { background:#11151c; border:1px solid var(--line); border-radius:14px; padding:22px; width:min(420px,92vw); display:flex; flex-direction:column; gap:10px; max-height:90vh; overflow-y:auto; }
.modal-card h3 { margin:0 0 6px; }
.modal-card label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--sub); }
.modal-card input, .modal-card select { background:#0c0f14; color:#dfe6ee; border:1px solid #2a313c; border-radius:8px; padding:.5rem .6rem; font-size:.95rem; }
.modal-error { color:#ff6b6b; font-size:.85rem; margin:0; }
.modal-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:8px; }
.radio-row { display: flex; gap: 16px; margin: 8px 0; font-size: 0.9rem; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Badges de estado de campaña ===== */
.badge.camp-borrador   { background:#2a2a2a; color:#9aa6b2; }
.badge.camp-curaduria  { background:rgba(255,122,26,.15); color:#ff9648; border:1px solid rgba(255,122,26,.35); }
.badge.camp-aprobada   { background:#11331f; color:#7fe6a3; }
.badge.camp-rechazada  { background:#3a1414; color:#ff8a8a; cursor:help; }

/* ===== Botones GO / NO-GO ===== */
/* Mismo molde para los dos: igual ancho, texto en una sola línea, centrado. */
.btn-go, .btn-nogo, .btn-pausar, .btn-reanudar {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:76px; box-sizing:border-box; white-space:nowrap; text-align:center;
  border-radius:6px; padding:.3rem .6rem; font-weight:700; cursor:pointer; font-size:.82rem;
  line-height:1; letter-spacing:.02em;
}
.btn-go  { background:#145a2e; color:#7fe6a3; border:1px solid #1f7a40; }
.btn-go:hover  { filter:brightness(1.15); }
.btn-nogo { background:#3a1414; color:#ff8a8a; border:1px solid #5a2020; }
.btn-nogo:hover { filter:brightness(1.15); }
.btn-pausar { background:#3a2e14; color:#ffd27f; border:1px solid #7a5e1f; }
.btn-pausar:hover { filter:brightness(1.15); }
.btn-reanudar { background:#145a2e; color:#7fe6a3; border:1px solid #1f7a40; }
.btn-reanudar:hover { filter:brightness(1.15); }
.badge.camp-pausada { background:#3a2e14; color:#ffd27f; }

/* Acciones dentro de la fila: apiladas, mismo ancho exacto. */
.held-actions { display:flex; flex-direction:column; gap:5px; align-items:stretch; }
.held-actions .btn-go, .held-actions .btn-nogo { width:100%; }

/* ===== Panel de decisión del operador ===== */
.decision-panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:16px; }
.decision-preview { background:#0b141a; border:1px solid #2a313c; border-radius:8px; padding:14px 12px; margin-bottom:8px; font-size:.85rem; line-height:1.6; }
/* Token «nombre» resaltado en la preview del operador (se sustituye por contacto al enviar). */
.wa-token { background:rgba(255,182,132,.16); color:#ffb784; border:1px solid rgba(255,122,26,.35); border-radius:4px; padding:0 3px; font-weight:600; white-space:nowrap; }

/* ===== Tabla campañas (reutiliza .contacts) ===== */
.held-row:hover { background:rgba(255,122,26,.06); }

/* ===== P4: Selección de contactos ===== */
.cb-col { width:36px; text-align:center; padding-left:.5rem !important; }
.sel-checkbox { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

.selection-bar {
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  background:rgba(255,122,26,.07);
  border:1px solid rgba(255,122,26,.22);
  border-radius:10px;
  padding:.55rem 1rem;
  margin-bottom:10px;
}
.sel-all-label {
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.88rem;
  color:var(--sub);
  cursor:pointer;
  user-select:none;
}
.sel-all-label:hover { color:var(--fg); }
.sel-count {
  font-size:.85rem;
  color:var(--accent);
  font-weight:600;
  min-width:100px;
}
.btn-create-campaign {
  margin-left:auto;
  white-space:nowrap;
}
.btn-create-campaign:disabled {
  opacity:.45;
  cursor:default;
  filter:none;
}

/* ===== P4: Audience info en el wizard ===== */
.camp-audience-info {
  background:rgba(255,122,26,.10);
  border:1px solid rgba(255,122,26,.28);
  border-radius:8px;
  padding:.5rem .8rem;
  font-size:.88rem;
  color:#ffb784;
  margin:0;
}
.field-hint {
  font-size:.75rem;
  color:var(--sub);
  font-weight:400;
  margin-left:.3rem;
}
.camp-modal-card {
  width:min(560px,96vw) !important;
}

/* ===== P4: Flyer upload / drag-drop ===== */
.flyer-label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.85rem;
  color:var(--sub);
}
.flyer-dropzone {
  position:relative;
  border:2px dashed #2a313c;
  border-radius:10px;
  padding:18px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
  background:#0c0f14;
  min-height:90px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.flyer-dropzone:hover, .flyer-dropzone.dragover {
  border-color:var(--accent);
  background:rgba(255,122,26,.06);
}
.flyer-file-input {
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
  /* hide visually but keep accessible; actual click is routed via dropzone click handler */
  pointer-events:none;
}
.flyer-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  pointer-events:none;
}
.flyer-icon { font-size:1.8rem; line-height:1; }
.flyer-placeholder span { font-size:.85rem; color:var(--sub); }
.flyer-hint { font-size:.75rem !important; color:#555f6d !important; }
.flyer-preview {
  max-width:100%;
  max-height:160px;
  border-radius:6px;
  object-fit:contain;
  border:1px solid #2a313c;
}
.flyer-remove {
  background:transparent;
  border:1px solid #3a1414;
  color:#ff8a8a;
  border-radius:6px;
  padding:.2rem .55rem;
  font-size:.8rem;
  cursor:pointer;
  margin-top:4px;
}
.flyer-remove:hover { background:#3a1414; }

/* ===== P4: Datetime picker moderno ===== */
.datetime-picker-wrap {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:2px;
}
.datetime-picker-label {
  font-size:.85rem;
  color:var(--sub);
}
.datetime-picker-row {
  display:flex;
  align-items:flex-end;
  gap:.6rem;
  flex-wrap:wrap;
}
.date-picker-group, .time-picker-group {
  display:flex;
  flex-direction:column;
}
.dt-sublabel {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.8rem;
  color:var(--sub);
}
.dt-input {
  background:#0c0f14;
  color:#dfe6ee;
  border:1px solid #2a313c;
  border-radius:8px;
  padding:.45rem .6rem;
  font-size:.9rem;
  min-width:140px;
}
.dt-input:focus { outline:none; border-color:var(--accent); }
.time-picker-inner {
  display:flex;
  align-items:center;
  gap:4px;
}
.dt-select {
  background:#0c0f14;
  color:#dfe6ee;
  border:1px solid #2a313c;
  border-radius:8px;
  padding:.45rem .5rem;
  font-size:.9rem;
  min-width:68px;
  cursor:pointer;
}
.dt-select:focus { outline:none; border-color:var(--accent); }
.time-sep { color:var(--sub); font-size:1.1rem; font-weight:600; }
.btn-clear-dt {
  font-size:.8rem;
  padding:.35rem .6rem;
  color:#ff8a8a;
  border-color:#3a1414;
  margin-bottom:2px;
}
.btn-clear-dt:hover { color:#ff8a8a; background:#3a1414; }

/* ===== Banner de salud del número ===== */
.health-banner { border-radius:12px; padding:.8rem 1rem; margin:14px 0 4px; font-size:.9rem; line-height:1.4; border:1px solid; }
.health-banner b { font-weight:700; }
.health-banner.health-red { background:#2a0f0f; border-color:#5a1d1d; color:#ffb3b3; }
.health-banner.health-amber { background:#2a230d; border-color:#5a4a1d; color:#ffe08a; }

/* ===== Stats de entrega de campaña (modal de detalle) ===== */
.camp-stats { margin-top:6px; border-top:1px solid var(--line); padding-top:12px; }
.cs-title { font-size:.8rem; color:var(--sub); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.cs-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.cs-cell { display:flex; flex-direction:column; align-items:center; gap:2px; background:#0c0f14; border:1px solid var(--line); border-radius:10px; padding:.6rem .3rem; }
.cs-n { font-size:1.3rem; font-weight:700; color:var(--fg); }
.cs-l { font-size:.68rem; color:var(--sub); text-align:center; }
.cs-cell.cs-deliv .cs-n { color:#7fe6a3; }
.cs-cell.cs-read .cs-n { color:#6db3ff; }
.cs-cell.cs-fail .cs-n { color:#ff8a8a; }
.cs-empty, .cs-loading { font-size:.85rem; color:var(--sub); }
@media (max-width:560px) { .cs-grid { grid-template-columns:repeat(3,1fr); } }

/* ===== Fase A — tarjeta de conectar número (operador) ===== */
.connect-card { background:var(--card); border:1px solid var(--line); border-radius:12px; margin:16px 0 8px; padding:0; }
.connect-card > summary { cursor:pointer; padding:14px 18px; font-weight:600; font-size:.95rem; list-style:none; }
.connect-card > summary::-webkit-details-marker { display:none; }
.connect-body { padding:0 18px 18px; display:flex; flex-direction:column; gap:10px; }
.connect-status { font-size:.85rem; line-height:1.5; border-radius:10px; padding:.7rem .9rem; border:1px solid var(--line); background:#0c0f14; word-break:break-word; }
.connect-status.connect-ok { border-color:#2a5a3a; }
.connect-status.connect-err { border-color:#5a1d1d; color:#ffb3b3; }
.connect-vals { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.connect-vals > div { display:flex; flex-direction:column; gap:2px; }
.connect-vals span { font-size:.7rem; color:var(--sub); text-transform:uppercase; letter-spacing:.03em; }
.connect-vals code { font-size:.8rem; background:#11151c; border:1px solid var(--line); border-radius:6px; padding:.35rem .5rem; overflow-x:auto; white-space:nowrap; }

/* ===== Conectar mi número (cliente, self-service) ===== */
.connect-card-client { background:linear-gradient(180deg,#161d2b,#12161d); border:1px solid #2a3a52; border-radius:14px; padding:18px 20px; margin:14px 0 6px; display:flex; flex-direction:column; gap:8px; }
.connect-card-client.cc-connected { background:#0e1a13; border-color:#2a5a3a; }
.cc-head { font-size:1.05rem; font-weight:700; color:var(--fg); }
.cc-head.cc-ok { color:#7fe6a3; }
.connect-card-client .btn-primary { align-self:flex-start; margin-top:4px; }
.connect-card-client .connect-status { margin-top:6px; }
/* Dos opciones de conexión (API oficial vs solo QR) — lado a lado, apilan en mobile. */
.cc-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.cc-opt { background:#0e131c; border:1px solid #243349; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.cc-opt-title { font-weight:700; color:var(--fg); font-size:.98rem; }
.cc-opt-desc { color:var(--sub); font-size:.85rem; line-height:1.45; margin:0; flex:1; }
.cc-opt .btn-primary { align-self:flex-start; margin-top:2px; }
@media (max-width:560px){ .cc-options { grid-template-columns:1fr; } }
/* Popup de conexión por QR (Plan B) */
.qr-modal { position:fixed; inset:0; background:rgba(4,7,12,.78); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.qr-modal[hidden] { display:none; }
.qr-box { position:relative; background:#12161d; border:1px solid #2a3a52; border-radius:16px; padding:24px; max-width:340px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.qr-close { position:absolute; top:10px; right:14px; background:none; border:none; color:var(--sub); font-size:1.6rem; line-height:1; cursor:pointer; }
.qr-title { font-size:1.1rem; font-weight:700; color:var(--fg); margin-bottom:8px; }
.qr-steps { font-size:.85rem; color:var(--sub); line-height:1.5; margin-bottom:16px; }
.qr-canvas-wrap { min-height:240px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:8px; }
.qr-canvas-wrap canvas { display:block; }
.qr-spinner { display:flex; flex-direction:column; align-items:center; gap:12px; color:#333; font-size:.9rem; }
.qr-spinner::before { content:""; width:38px; height:38px; border:3px solid #e3e3e3; border-top-color:var(--accent); border-radius:50%; animation:qr-spin .8s linear infinite; }
@keyframes qr-spin { to { transform:rotate(360deg); } }
.flyer-req-hint { color:var(--sub); font-weight:400; font-size:.82rem; }
.brazo-status { margin:0 0 12px; font-size:.9rem; color:var(--sub); display:flex; align-items:center; gap:8px; }
.brazo-ago { color:var(--sub); font-size:.82rem; }
.qr-tick { font-size:4rem; }
.qr-status { margin-top:14px; font-size:.88rem; color:var(--fg); min-height:1.2em; }