/* 🎁 Recompensas del canal (05/10/2026) — panel de Twitch y Kick. Componente: /assets/comun/js/recompensas.js */
#sectionRecompensas { --cz-rc-acento: #9147ff; --cz-rc-acento-claro: #bf94ff; }
#sectionRecompensas.cz-rc-kick { --cz-rc-acento: #53fc18; --cz-rc-acento-claro: #7ffe4a; }

.cz-rc-intro { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.cz-rc-aviso { font-size: 13px; line-height: 1.6; padding: 11px 13px; border-radius: 10px; margin-bottom: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--text); }
.cz-rc-aviso.cz-rc-falta { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
.cz-rc-aviso.cz-rc-info  { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.28); }
.cz-rc-aviso.cz-rc-mal   { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.28); }
.cz-rc-aviso .btn { margin-left: 6px; }
.cz-rc-maestro { margin-bottom: 14px; }

.cz-rc-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cz-rc-sub { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cz-rc-vacio { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 14px; border: 1px dashed var(--border); border-radius: 10px; }

.cz-rc-lista { display: flex; flex-direction: column; gap: 8px; }
.cz-rc-fila { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.02); }
.cz-rc-fila.con { border-color: color-mix(in srgb, var(--cz-rc-acento) 35%, transparent); }
.cz-rc-fila-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; user-select: none; }
.cz-rc-fila-cab:hover { background: rgba(255,255,255,0.03); }
.cz-rc-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cz-rc-tit { font-size: 14px; font-weight: 600; flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.cz-rc-coste { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cz-rc-n { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.05); color: var(--muted); white-space: nowrap; }
.cz-rc-fila.con .cz-rc-n { background: color-mix(in srgb, var(--cz-rc-acento) 15%, transparent); color: var(--cz-rc-acento-claro); }
.cz-rc-flecha { color: var(--muted); font-size: 12px; }
.cz-rc-tag { font-size: 10px; padding: 1px 7px; border-radius: 20px; background: rgba(245,158,11,0.12); color: var(--yellow); white-space: nowrap; font-weight: 600; }
.cz-rc-tag-mal { background: rgba(248,113,113,0.12); color: var(--red); }

.cz-rc-fila-cuerpo { padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cz-rc-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.cz-rc-mini-campo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cz-rc-num { width: 76px !important; padding: 7px 8px !important; font-size: 13px !important; }
.cz-rc-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-right: 12px; }
.cz-rc-chk input { accent-color: var(--cz-rc-acento); }

.cz-rc-accion { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; background: rgba(0,0,0,0.15); }
.cz-rc-accion-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cz-rc-accion-btns { display: inline-flex; gap: 4px; }
.cz-rc-mini { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); border-radius: 7px;
  width: 28px; height: 28px; cursor: pointer; font-size: 12px; }
.cz-rc-mini:hover { background: rgba(255,255,255,0.1); }
.cz-rc-quitar:hover { color: var(--red); border-color: rgba(248,113,113,0.4); }
.cz-rc-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cz-rc-accion .form-input, .cz-rc-accion .form-select { width: 100%; font-size: 13px; padding: 9px 10px; }
.cz-rc-modo, .cz-rc-sonidos { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.cz-rc-sonidos { max-height: 150px; overflow: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.cz-rc-rango { width: 100%; accent-color: var(--cz-rc-acento); }
.cz-rc-vol { color: var(--text); font-weight: 600; }
.cz-rc-nota { font-size: 11px; color: var(--muted); line-height: 1.6; }
.cz-rc-pro { color: var(--yellow); }

.cz-rc-anadir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cz-rc-anadir .form-select { flex: 1 1 180px; width: auto; font-size: 13px; padding: 8px 10px; }

.cz-rc-vars { font-size: 11px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.cz-rc-vars b { color: var(--cz-rc-acento-claro); font-weight: 600; }
.cz-rc-ultimos { margin-top: 10px; font-size: 12px; color: var(--muted); }
.cz-rc-ultimos summary { cursor: pointer; }
.cz-rc-ultimos ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.8; }
.cz-rc-hora { opacity: .7; }
.cz-rc-ultimos ul { max-height: 260px; overflow-y: auto; }
.cz-rc-res { font-size: 11px; margin-left: 4px; }
.cz-rc-res-enfriamiento, .cz-rc-res-limite, .cz-rc-res-sin_acciones { opacity: .85; }
.cz-rc-res-error { color: #f87171; }
.cz-rc-accion-sobra { opacity: .6; border-style: dashed; }
.cz-rc-sobra { color: #fbbf24; }

@media (max-width: 600px) {
  .cz-rc-fila-cab { padding: 10px; }
  .cz-rc-opts { flex-direction: column; align-items: flex-start; }
  .cz-rc-anadir .btn { width: 100%; justify-content: center; }
}