/* ═══ view-results.css ═══
   Vista de resultados (.rv-*) + mockups de canal (.mk-*) +
   avisos del canal (v14.1).
   Depende de: tokens.css, base.css, layout.css, components.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Results View v6 — Sidebar + Mockup (sesión 7) ─── */

/* Property bar */
.rv-prop-bar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  padding: 8px 18px; font-size: 13px; color: var(--c-text-muted);
  margin-bottom: 20px; box-shadow: var(--shadow-sm);
}

/* Layout: sidebar + main */
.rv-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 200px);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ── Sidebar ── */
.rv-sidebar {
  width: 80px;
  background: var(--c-bg);
  border-right: 1px solid var(--c-border);
  padding: 12px 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.rv-sidebar-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-text-light);
  text-align: center; padding: 10px 4px 6px;
}

.rv-sb-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; cursor: pointer; border-radius: var(--radius-sm);
  margin: 2px 6px; transition: all .15s; position: relative;
  border: 2px solid transparent;
}
.rv-sb-item:hover { background: var(--c-bg2); }
.rv-sb-item.active {
  background: var(--c-primary-light);
  border-color: var(--c-primary);
}

.rv-sb-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}

.rv-sb-name {
  font-size: 9px; font-weight: 500; color: var(--c-text-muted);
  text-align: center; line-height: 1.1;
}
.rv-sb-item.active .rv-sb-name { color: var(--c-primary); font-weight: 600; }

.rv-sb-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-success);
  transition: opacity .2s ease;
}

.rv-sb-divider {
  height: 1px; background: var(--c-border); margin: 8px 12px;
}

/* ── Main content ── */
.rv-main {
  flex: 1; display: flex; flex-direction: column;
  padding: 24px 32px; overflow-y: auto; min-width: 0;
}

/* Toolbar: tones */
.rv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.rv-tones { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-tone {
  padding: 6px 16px; border-radius: var(--radius-pill); font-size: 13px;
  font-weight: 500; border: 1.5px solid var(--c-border); background: #fff;
  color: var(--c-text-muted); cursor: pointer; transition: all .15s;
  font-family: var(--font);
}
.rv-tone:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rv-tone.active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  box-shadow: 0 2px 8px rgba(194,106,74,.25);
}

/* Mockup area */
.rv-mockup-area {
  flex: 1; transition: opacity .15s, transform .15s;
  max-width: 680px;
}

/* Action bar */
.rv-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; margin-top: 20px;
  border-top: 1px solid var(--c-border); gap: 12px;
}
.rv-chars {
  font-size: 13px; color: var(--c-text-muted);
  display: flex; align-items: center; gap: 8px;
}
.rv-chars strong { color: var(--c-text); }
.rv-charbar {
  width: 80px; height: 4px; background: var(--c-bg3);
  border-radius: 2px; overflow: hidden;
}
.rv-charbar-fill {
  height: 100%; background: var(--c-primary);
  border-radius: 2px; transition: width .3s;
}
.rv-actions { display: flex; gap: 8px; }

.rv-btn-regen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: #fff;
  color: var(--c-text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: var(--font); transition: .15s;
}
.rv-btn-regen:hover { border-color: var(--c-primary); color: var(--c-primary); }

.rv-btn-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-primary); background: var(--c-primary);
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: .15s;
}
.rv-btn-copy:hover {
  background: var(--c-primary-hover);
  box-shadow: 0 2px 8px rgba(194,106,74,.3);
}

/* ─── v9: Edit inline ─── */
.rv-btn-edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--c-border); background: var(--c-bg);
  color: var(--c-text-muted); transition: all .15s;
}
.rv-btn-edit:hover { border-color: var(--c-secondary); color: var(--c-secondary); }

.rv-edit-wrap { display: flex; flex-direction: column; gap: 8px; }
.rv-edit-label {
  font-size: 12px; font-weight: 600; color: var(--c-primary);
  text-transform: uppercase; letter-spacing: .5px;
}
.rv-edit-textarea {
  width: 100%; min-height: 200px; padding: 16px;
  font-family: var(--font); font-size: 14px; line-height: 1.6;
  color: var(--c-text); background: #fff;
  border: 2px solid var(--c-primary); border-radius: var(--radius);
  resize: vertical; outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.rv-edit-textarea:focus { border-color: var(--c-primary-hover); box-shadow: 0 0 0 3px var(--c-primary-subtle); }

.rv-edit-badge {
  display: inline-block; padding: 3px 10px; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; color: var(--c-secondary);
  background: var(--c-secondary-light); border-radius: var(--radius-pill);
}

/* ═══════════════════════════════════════
   CHANNEL MOCKUPS — shared
═══════════════════════════════════════ */

.mk-empty {
  padding: 60px 20px; text-align: center;
  color: var(--c-text-light); font-size: 15px;
}

.mk-plain {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--c-border); padding: 24px;
  font-size: 14.5px; line-height: 1.75; white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}

/* ── Idealista / Fotocasa ── */
.mk-idealista, .mk-fotocasa, .mk-kyero {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--c-border); overflow: hidden;
  box-shadow: var(--shadow);
}

.mk-id-topbar {
  background: #E2F46E; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
}
.mk-id-logo { font-weight: 700; font-size: 15px; color: #1a1a1a; letter-spacing: -.3px; }
.mk-id-tag {
  background: rgba(0,0,0,.12); color: #1a1a1a;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500;
}

.mk-fc-topbar {
  background: #2B46A8; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
}
.mk-fc-logo { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.3px; }
.mk-fc-tag {
  background: rgba(255,255,255,.2); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500;
}

.mk-ky-topbar {
  background: #1A8B9D; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
}
.mk-ky-logo { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.3px; }
.mk-ky-tag {
  background: rgba(255,255,255,.2); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500;
}

.mk-ky-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #1A8B9D;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
}

.mk-id-imgarea {
  width: 100%; height: 180px;
  background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-bg3) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-light); font-size: 13px; gap: 6px; position: relative;
}
.mk-id-price {
  position: absolute; bottom: 12px; left: 16px;
  background: rgba(0,0,0,.75); color: #fff;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 20px; font-weight: 700;
}

.mk-id-details {
  padding: 16px 18px; border-bottom: 1px solid var(--c-border);
}
.mk-id-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; color: var(--c-text); }
.mk-id-loc { font-size: 13px; color: var(--c-text-muted); margin-bottom: 8px; }
.mk-id-specs { font-size: 13px; color: var(--c-text); font-weight: 500; }

.mk-id-desc {
  padding: 16px 18px 20px; font-size: 14.5px;
  line-height: 1.75; color: var(--c-text); white-space: pre-wrap;
}

.mk-id-agent {
  padding: 12px 18px; background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--c-text-muted);
}
.mk-id-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #E2F46E;
  display: flex; align-items: center; justify-content: center;
  color: #1a1a1a; font-weight: 700; font-size: 12px;
}
.mk-fc-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #2B46A8;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
}

/* ── Facebook ── */
.mk-fb {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--c-border); overflow: hidden;
  box-shadow: var(--shadow); max-width: 560px;
}
.mk-fb-header {
  padding: 12px 16px 10px; display: flex; align-items: center; gap: 10px;
}
.mk-fb-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1877F2;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.mk-fb-avatar svg { width: 22px; height: 22px; }
.mk-fb-name { font-weight: 600; font-size: 15px; color: #050505; }
.mk-fb-time {
  font-size: 12px; color: #65676B;
  display: flex; align-items: center; gap: 4px;
}
.mk-fb-body {
  padding: 4px 16px 12px; font-size: 15px;
  line-height: 1.4; color: #050505; white-space: pre-wrap;
}
.mk-fb-img {
  width: 100%; height: 220px;
  background: linear-gradient(135deg, #F0F2F5 0%, #E4E6EB 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #8a8d91; font-size: 13px; gap: 8px;
  border-top: 1px solid #E4E6EB; border-bottom: 1px solid #E4E6EB;
}
.mk-fb-link {
  padding: 12px 16px; background: #F0F2F5;
  border-bottom: 1px solid #E4E6EB;
}
.mk-fb-link-domain {
  font-size: 12px; color: #65676B; text-transform: uppercase; margin-bottom: 2px;
}
.mk-fb-link-title {
  font-size: 15px; font-weight: 600; color: #050505;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-fb-actions {
  display: flex; padding: 4px 8px;
}
.mk-fb-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; font-size: 13px; font-weight: 600;
  color: #65676B; border-radius: var(--radius-sm); cursor: default;
}
.mk-fb-action svg { stroke: #65676B; }

/* ── Instagram ── */
.mk-ig {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--c-border); overflow: hidden;
  box-shadow: var(--shadow); max-width: 480px;
}
.mk-ig-header {
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--c-border);
}
.mk-ig-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex; align-items: center; justify-content: center;
}
.mk-ig-user { font-weight: 600; font-size: 13px; color: var(--c-text); }
.mk-ig-img {
  width: 100%; aspect-ratio: 1; max-height: 300px;
  background: linear-gradient(135deg, #fef3f2, #fce7f3, #ede9fe);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-light); font-size: 13px;
}
.mk-ig-actions {
  padding: 10px 14px 4px; display: flex; gap: 14px;
  font-size: 20px; color: var(--c-text);
}
.mk-ig-caption {
  padding: 4px 14px 16px; font-size: 13.5px;
  line-height: 1.7; color: var(--c-text); white-space: pre-wrap;
}
.mk-ig-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 0 14px 14px;
}
.mk-ig-tag {
  background: var(--c-primary-light); color: var(--c-primary);
  font-size: 12px; padding: 3px 9px; border-radius: 12px; font-weight: 500;
}

/* ── WhatsApp ── */
.mk-wa {
  background: #e5ddd5; border-radius: var(--radius);
  border: 1px solid var(--c-border); overflow: hidden;
  box-shadow: var(--shadow); max-width: 480px;
}
.mk-wa-topbar {
  background: #075e54; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; color: #fff;
}
.mk-wa-ava {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.mk-wa-name { font-weight: 600; font-size: 14px; }
.mk-wa-status { font-size: 11px; opacity: .8; }
.mk-wa-chat {
  padding: 16px 14px; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mk-wa-bubble {
  background: #dcf8c6; border-radius: 8px 8px 8px 0;
  padding: 10px 14px; max-width: 88%;
  font-size: 14px; line-height: 1.65; color: #111;
  box-shadow: 0 1px 1px rgba(0,0,0,.08); white-space: pre-wrap;
}
.mk-wa-time {
  text-align: right; font-size: 11px; color: #667781;
  margin-top: 4px; display: flex; align-items: center;
  justify-content: flex-end; gap: 4px;
}
.mk-wa-input {
  background: #f0f0f0; padding: 8px 10px;
  display: flex; align-items: center;
}
.mk-wa-inputbox {
  flex: 1; background: #fff; border-radius: 20px;
  padding: 8px 14px; font-size: 13px; color: var(--c-text-light);
}

/* ─── Responsive (reglas .rv-* y .mk-* disueltas del @media global L986-1064) ─── */
@media (max-width: 640px) {
  /* ── Results view ── */
  .rv-prop-bar {
    font-size: 12px; padding: 6px 12px;
    border-radius: var(--radius-sm);
    gap: 6px; line-height: 1.4;
  }
  .rv-layout {
    flex-direction: column; min-height: auto;
    border-radius: var(--radius); /* tighter radius on mobile */
  }

  /* Sidebar → rejilla que envuelve (sin scroll lateral) */
  .rv-sidebar {
    width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; border-right: none; border-bottom: 1px solid var(--c-border);
    padding: 8px;
  }
  .rv-sidebar-label { display: none; }
  /* El divisor ocupa toda la fila y fuerza el salto entre secciones,
     dejando 3 canales por fila que envuelven solos si crecen a 5/7. */
  .rv-sb-divider { grid-column: 1 / -1; width: auto; height: 1px; margin: 4px 0; }
  .rv-sb-item {
    flex-direction: row; gap: 6px; padding: 6px 8px;
    margin: 0; white-space: nowrap; justify-content: center;
  }
  .rv-sb-icon { width: 28px; height: 28px; font-size: 11px; }
  .rv-sb-name { font-size: 11px; }

  /* Main content */
  .rv-main { padding: 14px; }
  .rv-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .rv-tones { gap: 5px; }
  .rv-tone { padding: 6px 12px; font-size: 12px; }
  .rv-mockup-area { max-width: 100%; }

  /* Action bar */
  .rv-action-bar { flex-direction: column; gap: 10px; align-items: stretch; margin-top: 14px; }
  .rv-chars { justify-content: center; font-size: 12px; }
  .rv-actions { display: flex; gap: 6px; }
  .rv-btn-regen, .rv-btn-edit, .rv-btn-copy {
    flex: 1; justify-content: center;
    padding: 10px 8px; font-size: 12px;
    min-height: 44px; /* touch target */
  }

  /* ── Mockups: all constrained ── */
  .mk-idealista, .mk-fotocasa, .mk-kyero,
  .mk-ig, .mk-wa, .mk-fb { max-width: 100%; }

  .mk-id-imgarea { height: 100px; }
  .mk-id-details { padding: 10px 14px; }
  .mk-id-title { font-size: 14px; }
  .mk-id-desc { padding: 12px 14px; font-size: 13px; line-height: 1.65; }
  .mk-id-agent { padding: 10px 14px; gap: 8px; }

  .mk-fb-img { height: 140px; }
  .mk-fb-body { font-size: 13px; padding: 0 14px 10px; }
  .mk-fb-header { padding: 10px 14px 8px; }

  .mk-ig-caption { font-size: 13px; padding: 8px 14px; }
  .mk-ig-tags { padding: 4px 14px 12px; }
  .mk-ig-img { height: 220px; }

  .mk-wa-bubble { font-size: 13px; }
}

/* ═══ Avisos del canal en la vista de resultados (14.1, mayo 2026) ═══
   Banda informativa pegada bajo el mockup central cuando un canal
   tiene un aviso del sistema. Dos tipologías:

     - rv-aviso-fail: canal no entregado (el sistema falló al generar
       este texto). Gris neutro, sin alarma — no es responsabilidad
       del usuario, es un fallo nuestro.

     - rv-aviso-warn: contenido problemático (FORBIDDEN_HARD colado al
       texto final, sobreinferencia grosera, contradicción con el
       brief). Amarillo cálido — invita al usuario a revisar antes de
       publicar sin alarmar.

   No hay tercer caso de "longitud excedida": los portales no publican
   un límite duro de caracteres en la descripción y los canales sociales
   no tienen restricción dura por longitud, así que avisar al usuario
   por excederse de nuestros rangos calibrados sería desinformación.
   El preCheck interno sigue regenerando textos fuera de rango como
   parte del control de calidad, sin comunicárselo al usuario.

   Variantes paralelas del dot del sidebar (rv-sb-dot-warn /
   rv-sb-dot-fail) para indicar antes de clicar qué canales tienen
   aviso. Decisión: las dots de aviso son persistentes — el código JS
   de switchChannel solo desvanece el dot base (verde "no leído"
   estándar) al clicar el canal, dejando intactas las variantes con
   modificador.
   ═══════════════════════════════════════════════════════════ */

.rv-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
}

.rv-aviso-fail {
  background: var(--c-bg2);
  color: var(--c-text-muted);
  border-color: var(--c-border);
}

.rv-aviso-warn {
  background: var(--c-warning-light);
  color: #8B5E1A;
  border-color: #E8C896;
}

.rv-aviso-icon {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.3;
  margin-top: 1px;
}

.rv-aviso-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rv-aviso-text strong {
  font-weight: 600;
}

.rv-aviso-sub {
  font-size: 12px;
  opacity: 0.85;
}

/* Dots de aviso en el sidebar — sobreescriben solo el background
   del .rv-sb-dot base. Position, tamaño y radius vienen de la regla
   original que ya vive arriba en esta hoja. */

.rv-sb-dot-warn {
  background: var(--c-warning);
}

.rv-sb-dot-fail {
  background: var(--c-text-light);
}

@media (max-width: 640px) {
  .rv-aviso {
    font-size: 12.5px;
    padding: 9px 12px;
  }
  .rv-aviso-sub {
    font-size: 11.5px;
  }
}