/* ============================================================
   CLICMURAL — Páginas públicas · piel "Líneas final" (v26.50, sep-26)
   La cargan guia.html (Guía de uso, la ven clientes y distribuidores)
   y descarga.html (descarga del álbum, la ven los invitados), DESPUÉS
   de css/cm-skin.css (base compartida con los 3 paneles y las
   herramientas del operador). Solo presentación: vivowall.css, el
   <style> de cada página y su lógica quedan intactos.
   Reglas (ver 05-Marca/ClicMural-Sistema-Diseno.html): fondo #141418 ·
   superficie #1A1A23 · bordes neutros · morado = acción (UN sólido por
   pantalla) · cian = detalle · ámbar = atención · verde = OK · coral =
   error. Color en relleno tenue, nunca en contorno. Sin degradados,
   sin sombras, sin brillos. El énfasis del texto es blanco, no de color.
   ============================================================ */

/* ---------- Estructura común ---------- */
.vw-container { padding-top: 20px; }
.vw-header .vw-logo { font-size: 22px; }
.vw-badge {
  margin-left: auto; border: 0; background: rgba(34,211,238,.12); color: var(--vw-cyan);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 5px 12px;
}
.vw-badge .cm-em { width: 13px; height: 13px; vertical-align: -2px; stroke: var(--vw-cyan); margin-right: 3px; }
.vw-title { font-weight: 600; letter-spacing: -.015em; }
.vw-subtitle { font-size: 15px; line-height: 1.6; }
.vw-card h2 { font-family: var(--vw-font-display); font-weight: 600; letter-spacing: -.01em; }
code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .88em;
  background: rgba(255,255,255,.06); border: 0; border-radius: 5px; padding: 1px 6px; color: var(--vw-text);
}
/* avisos flotantes sin contorno de color */
.vw-toast { background: var(--vw-card-2); border-color: var(--vw-border-2); font-family: var(--vw-font); }
.vw-toast.ok, .vw-toast.err { border-color: var(--vw-border-2); }
.vw-toast.err { color: var(--vw-coral); }

/* ============================================================
   GUÍA DE USO (guia.html)
   ============================================================ */
.g-section { margin-top: 38px; }
.g-section h2 {
  font-family: var(--vw-font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--vw-border);
}
.g-section h2 .cm-em { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; }
.g-section > p { color: var(--vw-text); margin-bottom: 14px; }
/* el color ya no pinta texto: los énfasis van en blanco (incluidos los que
   traían color en línea) */
.g-section b, .g-section b[style] { color: var(--vw-text) !important; font-weight: 600; }
.g-step { gap: 14px; margin-bottom: 12px; }
.g-step p { font-size: 15px; line-height: 1.6; padding-top: 4px; color: #D6D6DE; }
.g-step .num {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--vw-card-2); border: 1px solid var(--vw-border);
  font-family: var(--vw-font-display); font-weight: 600; font-size: 14px;
  color: var(--vw-violet-t); font-variant-numeric: tabular-nums;
}
.g-step .num .cm-em { width: 17px; height: 17px; margin: 0; vertical-align: 0; stroke: var(--vw-text); }
/* Tips: caja con tinte (cian = detalle), sin contorno; Avisos: tinte ámbar */
.g-tip {
  background: rgba(34,211,238,.07); border: 0; border-radius: var(--vw-radius);
  padding: 13px 16px; font-size: 14px; line-height: 1.6; color: #D6D6DE; margin: 16px 0;
}
.g-warn {
  background: rgba(245,196,81,.10); border: 0; border-radius: var(--vw-radius);
  padding: 13px 16px; font-size: 14px; line-height: 1.6; margin: 16px 0;
}
.g-tip .cm-em, .g-warn .cm-em { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
/* pie */
.vw-container > p.vw-muted.vw-center { font-size: 13px; border-top: 1px solid var(--vw-border); padding-top: 18px; }

/* ============================================================
   DESCARGA DEL ÁLBUM (descarga.html)
   ============================================================ */
#main.vw-card, #bad.vw-card { border-radius: var(--vw-radius); }
.dl-hero { padding: 18px 0 4px; }
.dl-hero .emoji { font-size: 0; line-height: 0; }
.dl-hero .emoji .cm-em { width: 46px; height: 46px; margin: 0; stroke: var(--vw-text); stroke-width: 1.4; }
.dl-hero .vw-title { font-size: 25px !important; margin-top: 12px; }
.dl-pin {
  border-radius: var(--vw-radius); border: 1px solid var(--vw-border-2);
  background: var(--vw-bg); font-weight: 600; font-variant-numeric: tabular-nums;
}
.dl-pin:focus { border-color: var(--vw-violet-t); }
.dl-pin.err { border-color: var(--vw-coral); }
.dl-pin::placeholder { color: var(--vw-dim); }
/* barra de progreso: cian sólido, fina, sin degradado */
.dl-bar { height: 6px; background: rgba(255,255,255,.08); }
.dl-bar .fl { background: var(--vw-cyan); }
.dl-ok .big { font-size: 0; line-height: 0; margin-bottom: 8px; }
.dl-ok .big .cm-em { width: 40px; height: 40px; margin: 0; stroke-width: 1.5; stroke: var(--vw-text); }
.dl-ok h2 { font-family: var(--vw-font-display); font-weight: 600; font-size: 20px; }
/* correo opcional: superficie neutra, sin contorno cian; su botón va teñido
   (el único sólido de la pantalla es "Descargar el álbum") */
#mailbox {
  border: 0 !important; background: var(--vw-card-2) !important; border-radius: var(--vw-radius) !important;
}
#mailbox > p:first-child { font-family: var(--vw-font-display); font-weight: 600 !important; font-size: 15px !important; }
#mailbox .vw-input { background: var(--vw-bg); }
#mail-go { background: rgba(124,58,237,.14); color: var(--vw-violet-t); }
#mail-go:hover { background: rgba(124,58,237,.22); }
#mail-go .cm-em { stroke: var(--vw-violet-t); }
#copy-link .cm-em { stroke: var(--vw-muted); }
#main > p.vw-muted:last-child { line-height: 1.55; }

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  .vw-container { padding: 14px 14px 50px; }
  .vw-title { font-size: 25px; }
  .g-section { margin-top: 30px; }
  .g-section h2 { font-size: 19px; }
  .g-step p { font-size: 14.5px; }
  #main.vw-card { padding: 20px 16px 24px !important; }
  .dl-hero .vw-title { font-size: 22px !important; }
}