/* ============================================================
   DANGOFE · Configuración → Correos · tarjeta «CORREOS QUE REBOTARON» con la columna «Qué hacer»
   (lo arma configuracion/correos.js: table.cfgx-rebotes con td.cfgx-rebote__hacer, .cfgx-rebote__ok,
   .cfgx-rebote__lugar, .cfgx-rebote__marca y botones .btn.btn--ghost.btn--sm). Pieza del chat de
   Diseño (1.0.285). Usa los tokens del sistema (--text-*, --accent-rgb, --glass-*): claro y oscuro salen solos.
   Con sitio (la tarjeta ancha) es una tabla; cuando la tarjeta es angosta (el panel de vista previa al lado,
   o el teléfono) cada rebote se vuelve una tarjetita con sus rótulos, para que «Qué hacer» nunca quede
   escondido a la derecha.
   ============================================================ */
div:has(> table.cfgx-rebotes) { container: cfgx-rebotes / inline-size; overflow-x: visible !important; }
.cfgx-rebotes { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.4; }
.cfgx-rebotes thead th {
  text-align: left; padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); border-bottom: 1px solid var(--glass-border, rgba(127, 127, 127, .25)); white-space: nowrap;
}
.cfgx-rebotes tbody td { padding: 11px 10px; vertical-align: top; border-bottom: 1px solid var(--glass-border, rgba(127, 127, 127, .18)); }
.cfgx-rebotes tbody tr:last-child td { border-bottom: 0; }
.cfgx-rebotes tbody td:nth-child(1) { white-space: nowrap; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cfgx-rebotes tbody td:nth-child(2) { font-weight: 700; overflow-wrap: anywhere; min-width: 150px; }
.cfgx-rebotes tbody td:nth-child(3) > span { display: block; margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }
.cfgx-rebotes tbody td:nth-child(4) { overflow-wrap: anywhere; }
.cfgx-rebotes td.cfgx-rebote__hacer { min-width: 230px; }
/* la columna «Qué hacer» */
.cfgx-rebote__hacer > * + * { margin-top: 5px; }
.cfgx-rebote__ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; overflow-wrap: anywhere; }
.cfgx-rebote__lugar { overflow-wrap: anywhere; }
.cfgx-rebote__lugar a { display: inline-flex; align-items: flex-start; gap: 5px; color: rgb(var(--accent-rgb)); font-weight: 600; text-decoration: none; }
.cfgx-rebote__lugar a::before {
  content: ''; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cfgx-rebote__lugar a:hover { text-decoration: underline; }
.cfgx-rebote__marca { color: var(--text-secondary); }
.cfgx-rebotes .cfgx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cfgx-rebotes .btn--sm {
  min-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 600; gap: 5px; white-space: nowrap;
  border: 1px solid var(--glass-border, rgba(127, 127, 127, .3)); background: var(--glass-bg-input, rgba(127, 127, 127, .08)); color: var(--text-primary);
}
.cfgx-rebotes .btn--sm:hover { background: var(--glass-bg-active, rgba(127, 127, 127, .14)); }
.cfgx-rebotes .btn--sm svg { width: 14px; height: 14px; flex: none; }
.cfgx-rebotes .btn--sm[href*='wa.me'] { color: #0b6b3a; border-color: rgba(37, 211, 102, .45); background: rgba(37, 211, 102, .14); }
.cfgx-rebotes .btn--sm[href*='wa.me']:hover { background: rgba(37, 211, 102, .22); }
[data-theme='dark'] .cfgx-rebotes .btn--sm[href*='wa.me'] { color: #6ee7b7; }
.cfgx-rebotes .btn--sm[data-cor-quitar] { color: var(--text-secondary); }
.cfgx-rebotes .btn--sm[data-cor-quitar]:hover { color: var(--text-primary); }
/* una fila ya resuelta (reenviado) se atenúa un poco para que destaquen las que faltan */
.cfgx-rebotes tbody tr:has(.cfgx-rebote__ok) td:not(.cfgx-rebote__hacer) { opacity: .72; }

/* ---------- tarjeta angosta (vista previa al lado, o teléfono): cada rebote es una tarjetita ---------- */
@container cfgx-rebotes (max-width: 719px) {
  .cfgx-rebotes thead { display: none; }
  .cfgx-rebotes, .cfgx-rebotes tbody, .cfgx-rebotes tr, .cfgx-rebotes td { display: block; min-width: 0; }
  .cfgx-rebotes tr {
    padding: 10px 12px 12px; margin: 0 0 10px; border-radius: 14px;
    border: 1px solid var(--glass-border, rgba(127, 127, 127, .25)); background: var(--glass-bg, rgba(127, 127, 127, .05));
  }
  .cfgx-rebotes tr:last-child { margin-bottom: 0; }
  .cfgx-rebotes tbody td { padding: 3px 0; border: 0; white-space: normal; }
  .cfgx-rebotes tbody td::before { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1px; }
  .cfgx-rebotes tbody td:nth-child(1) { display: flex; align-items: baseline; gap: 6px; }
  .cfgx-rebotes tbody td:nth-child(1)::before { content: 'Fecha'; margin: 0; }
  .cfgx-rebotes tbody td:nth-child(2) { font-size: 14px; }
  .cfgx-rebotes tbody td:nth-child(2)::before { content: 'Iba a'; }
  .cfgx-rebotes tbody td:nth-child(3)::before { content: 'Por qué rebotó'; }
  .cfgx-rebotes tbody td:nth-child(4)::before { content: 'Asunto'; }
  .cfgx-rebotes td.cfgx-rebote__hacer { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--glass-border, rgba(127, 127, 127, .3)); }
  .cfgx-rebotes td.cfgx-rebote__hacer::before { content: 'Qué hacer'; margin-bottom: 4px; }
}