/* ===================================================================
   REDES SOCIALES APP — Premium Rewrite v51
   Social Media Management · Multi-Platform
   Accent: Pink #ec4899  |  Background: White
   =================================================================== */

/* -- 1. Variables -------------------------------------------------- */
#win-redes-sociales {
  --rs-bg: #ffffff;
  --rs-bg-alt: #f8fafc;
  --rs-bg-ter: #f1f5f9;
  --rs-hover: #fdf2f8;
  --rs-accent: #ec4899;
  --rs-accent-dark: #db2777;
  --rs-accent-light: #fce7f3;
  --rs-text: #1e293b;
  --rs-text-sec: #64748b;
  --rs-text-mut: #94a3b8;
  --rs-border: #e2e8f0;
  --rs-success: #059669;
  --rs-warning: #d97706;
  --rs-danger: #dc2626;
  --rs-info: #2563eb;
  --rs-r-sm: 8px;
  --rs-r-md: 12px;
  --rs-r-lg: 16px;
  --rs-shadow-xs: 0 1px 3px rgba(0,0,0,.04);
  --rs-shadow-sm: 0 4px 12px rgba(0,0,0,.06);
  --rs-shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --rs-shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --rs-t: 200ms ease;
}

/* -- 2. Animations ------------------------------------------------- */
@keyframes rsFadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rsSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rsModalIn {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,.4); }
  50% { box-shadow: 0 0 0 6px rgba(236,72,153,0); }
}
@keyframes rsBadgePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes rsBarGrow {
  from { width: 0; }
}

/* -- 3. Shell Layout ----------------------------------------------- */
#win-redes-sociales .content.rs-app {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  height: 100%;
  background: var(--rs-bg);
}

/* -- 4. Sidebar ---------------------------------------------------- */
.rs-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rs-border);
  background: var(--rs-bg);
  overflow: hidden;
}
.rs-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 12px;
  flex-shrink: 0;
}
.rs-sidebar-brand svg { color: var(--rs-accent); stroke: var(--rs-accent); }
.rs-sidebar-brand span {
  font-size: 16px;
  font-weight: 700;
  color: var(--rs-text);
}

/* -- 5. Sidebar Nav ------------------------------------------------ */
.rs-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 12px;
  flex-shrink: 0;
}
.rs-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 40px;
  border-radius: var(--rs-r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--rs-text-sec);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--rs-t);
  position: relative;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.rs-nav-btn:hover {
  background: var(--rs-bg-ter);
  color: var(--rs-text);
}
.rs-nav-btn.rs-nav-active {
  background: linear-gradient(135deg, var(--rs-accent-light), #fbcfe8);
  color: #9d174d;
  border-color: var(--rs-accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(236,72,153,.12);
}
.rs-nav-btn svg { flex-shrink: 0; }
.rs-nav-btn span:first-of-type { flex: 1; }

/* -- 6. Nav Badges ------------------------------------------------- */
.rs-nav-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--rs-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  animation: rsBadgePop .3s ease-out;
}
.rs-nav-badge.rs-badge-visible { display: inline-block; }

/* -- 7. Stats Section ---------------------------------------------- */
.rs-stats-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-top: 1px solid var(--rs-border);
}
.rs-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  flex-shrink: 0;
}
.rs-stats-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--rs-text-mut);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.rs-stats-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 8px;
}
.rs-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.rs-stat-row .rs-sl { font-size: 11px; color: var(--rs-text-sec); }
.rs-stat-row .rs-sv { font-size: 12px; font-weight: 600; color: var(--rs-text); }

/* -- 8. Filter Pills ----------------------------------------------- */
.rs-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.rs-pill {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  color: var(--rs-text-mut);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--rs-t);
  white-space: nowrap;
  font-family: inherit;
}
.rs-pill:hover {
  color: var(--rs-text-sec);
  border-color: #cbd5e1;
  background: var(--rs-bg-alt);
  transform: translateY(-1px);
}
.rs-pill.rs-pill-active {
  background: linear-gradient(135deg, var(--rs-accent-light), #fbcfe8);
  color: #9d174d;
  border-color: var(--rs-accent);
  font-weight: 600;
}

/* -- 9. Sidebar Footer --------------------------------------------- */
.rs-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--rs-border);
  background: var(--rs-bg-alt);
  flex-shrink: 0;
}
.rs-footer-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--rs-text-mut);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rs-footer-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--rs-success);
}

/* -- 10. Toolbar --------------------------------------------------- */
.rs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rs-border);
  background: var(--rs-bg);
  flex-shrink: 0;
}
.rs-toolbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--rs-text);
}
.rs-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* -- 11. Content Body ---------------------------------------------- */
.rs-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rs-bg-alt);
}
.rs-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* -- 12. Buttons --------------------------------------------------- */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--rs-t);
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.rs-btn:disabled { opacity: .4; cursor: default; transform: none !important; box-shadow: none !important; }

.rs-btn-primary {
  background: linear-gradient(135deg, var(--rs-accent), var(--rs-accent-dark));
  color: #fff;
  box-shadow: 0 3px 10px rgba(236,72,153,.2);
}
.rs-btn-primary:hover:not(:disabled) {
  box-shadow: 0 5px 16px rgba(236,72,153,.3);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f472b6, var(--rs-accent));
}

.rs-btn-secondary {
  background: var(--rs-bg);
  color: #475569;
  border: 1px solid var(--rs-border);
}
.rs-btn-secondary:hover {
  background: var(--rs-bg-alt);
  border-color: #cbd5e1;
  color: var(--rs-text);
}

.rs-btn-danger {
  background: rgba(220,38,38,.08);
  color: var(--rs-danger);
}
.rs-btn-danger:hover { background: rgba(220,38,38,.15); }

.rs-btn-ghost {
  background: transparent;
  color: var(--rs-text-sec);
  padding: 6px 12px;
  min-height: 32px;
  font-weight: 500;
}
.rs-btn-ghost:hover { background: var(--rs-bg-ter); color: var(--rs-text); }

.rs-btn-sm { min-height: 30px; padding: 5px 12px; font-size: 12px; border-radius: 7px; }

.rs-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--rs-border);
  background: var(--rs-bg-alt);
  color: var(--rs-text-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--rs-t);
  padding: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-family: inherit;
}
.rs-icon-btn:hover {
  background: var(--rs-accent-light);
  color: var(--rs-accent-dark);
  border-color: var(--rs-accent);
}

/* -- 13. Forms ----------------------------------------------------- */
.rs-form-group { margin-bottom: 14px; }
.rs-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--rs-text-sec);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rs-input, .rs-textarea, .rs-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  color: var(--rs-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.rs-input:focus, .rs-textarea:focus, .rs-select:focus {
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px rgba(236,72,153,.12);
}
.rs-input::placeholder, .rs-textarea::placeholder { color: var(--rs-text-mut); }
.rs-textarea { resize: vertical; min-height: 80px; }
.rs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rs-form-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* -- 14. Modals ---------------------------------------------------- */
.rs-modal {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.rs-modal.rs-modal-open { display: flex; }
.rs-modal-box {
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-lg);
  width: 92%;
  box-shadow: 0 20px 50px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.03);
  overflow: hidden;
  animation: rsModalIn .2s ease-out;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.rs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rs-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--rs-text);
  background: var(--rs-bg-alt);
  flex-shrink: 0;
}
.rs-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.rs-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--rs-border);
  background: var(--rs-bg-alt);
  flex-shrink: 0;
}
.rs-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--rs-bg-ter);
  color: var(--rs-text-mut);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.rs-modal-close:hover { background: #fef2f2; color: #ef4444; }

/* Modal sizes */
.rs-modal-xs { max-width: 400px; }
.rs-modal-sm { max-width: 500px; }
.rs-modal-md { max-width: 580px; }
.rs-modal-lg { max-width: 700px; }

/* -- 15. Platform Badges ------------------------------------------- */
.rs-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.rs-platform.facebook  { background: rgba(24,119,242,.08);  color: #1877f2; }
.rs-platform.instagram { background: rgba(225,48,108,.08);  color: #e1306c; }
.rs-platform.twitter   { background: rgba(29,155,240,.08);  color: #1da1f2; }
.rs-platform.linkedin  { background: rgba(10,102,194,.08);  color: #0a66c2; }
.rs-platform.tiktok    { background: rgba(255,0,80,.08);    color: #ff0050; }
.rs-platform.youtube   { background: rgba(255,0,0,.08);     color: #ff0000; }
.rs-platform.pinterest { background: rgba(230,0,35,.08);    color: #e60023; }
.rs-platform.threads   { background: var(--rs-bg-ter);      color: var(--rs-text-sec); }

/* -- 16. KPI Cards ------------------------------------------------- */
.rs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.rs-kpi-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--rs-border);
  border-left: 3px solid var(--rs-accent);
  background: var(--rs-bg);
  box-shadow: var(--rs-shadow-xs);
  transition: all .25s;
  animation: rsFadeInUp .35s ease-out both;
}
.rs-kpi-card:nth-child(2) { animation-delay: .05s; }
.rs-kpi-card:nth-child(3) { animation-delay: .1s; }
.rs-kpi-card:nth-child(4) { animation-delay: .15s; }
.rs-kpi-card:nth-child(5) { animation-delay: .2s; }
.rs-kpi-card:nth-child(6) { animation-delay: .25s; }
.rs-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rs-shadow-sm);
}
.rs-kpi-card.pink   { border-left-color: #ec4899; }
.rs-kpi-card.blue   { border-left-color: #3b82f6; }
.rs-kpi-card.green  { border-left-color: #10b981; }
.rs-kpi-card.purple { border-left-color: #8b5cf6; }
.rs-kpi-card.orange { border-left-color: #f97316; }
.rs-kpi-card.red    { border-left-color: #ef4444; }
.rs-kpi-label {
  font-size: 10px;
  color: var(--rs-text-sec);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  font-weight: 600;
}
.rs-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--rs-text);
  font-variant-numeric: tabular-nums;
}
.rs-kpi-sub { font-size: 11px; color: var(--rs-text-mut); margin-top: 4px; }

/* -- 17. Quick Actions --------------------------------------------- */
.rs-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.rs-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  min-height: 56px;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  cursor: pointer;
  transition: all var(--rs-t);
  text-align: center;
  font-family: inherit;
}
.rs-quick-action:hover {
  background: var(--rs-hover);
  border-color: var(--rs-accent);
  transform: translateY(-1px);
  box-shadow: var(--rs-shadow-sm);
}
.rs-quick-action svg { color: var(--rs-accent-dark); }
.rs-quick-action span { font-size: 11px; font-weight: 600; color: var(--rs-text-sec); }

/* -- 18. Post Cards ------------------------------------------------ */
.rs-post-card {
  padding: 14px 16px;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  margin-bottom: 8px;
  box-shadow: var(--rs-shadow-xs);
  transition: all var(--rs-t);
  animation: rsSlideIn .3s ease-out both;
}
.rs-post-card:hover {
  background: var(--rs-hover);
  border-color: #fbcfe8;
  transform: translateX(2px);
}
.rs-post-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rs-post-content {
  font-size: 13px;
  color: var(--rs-text-sec);
  line-height: 1.5;
  margin-bottom: 8px;
  max-height: 60px;
  overflow: hidden;
}
.rs-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--rs-text-mut);
}
.rs-post-metrics {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.rs-post-metric {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--rs-text-mut);
}
.rs-post-metric .val { color: var(--rs-text); font-weight: 600; }
.rs-post-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* -- 19. Post Status ----------------------------------------------- */
.rs-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.rs-status-draft     { background: var(--rs-bg-ter); color: var(--rs-text-mut); }
.rs-status-scheduled { background: rgba(37,99,235,.08); color: var(--rs-info); }
.rs-status-published { background: rgba(5,150,105,.08); color: var(--rs-success); }
.rs-status-failed    { background: rgba(220,38,38,.08); color: var(--rs-danger); }

/* -- 20. Account Cards --------------------------------------------- */
.rs-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  margin-bottom: 8px;
  box-shadow: var(--rs-shadow-xs);
  transition: all var(--rs-t);
  animation: rsSlideIn .3s ease-out both;
}
.rs-account-card:hover {
  background: var(--rs-hover);
  border-color: #fbcfe8;
  transform: translateX(2px);
}
.rs-account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.rs-account-info { flex: 1; min-width: 0; }
.rs-account-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--rs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-account-handle { font-size: 11px; color: var(--rs-text-mut); margin-top: 2px; }
.rs-account-bio { font-size: 11px; color: var(--rs-text-sec); margin-top: 4px; line-height: 1.4; }
.rs-account-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.rs-account-followers { font-size: 14px; font-weight: 700; color: var(--rs-text); }
.rs-account-growth {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
}
.rs-account-growth.positive { background: rgba(5,150,105,.08); color: var(--rs-success); }
.rs-account-growth.negative { background: rgba(220,38,38,.08); color: var(--rs-danger); }

/* -- 21. Calendar -------------------------------------------------- */
.rs-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.rs-cal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rs-text);
}
.rs-cal-nav { display: flex; gap: 6px; }
.rs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.rs-cal-day-header {
  font-size: 10px;
  color: var(--rs-text-mut);
  text-align: center;
  padding: 6px 0;
  font-weight: 600;
  text-transform: uppercase;
}
.rs-cal-day {
  min-height: 72px;
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-sm);
  padding: 4px 6px;
  font-size: 11px;
  color: var(--rs-text-sec);
  cursor: pointer;
  transition: all .15s;
}
.rs-cal-day:hover {
  border-color: #fbcfe8;
  background: var(--rs-hover);
}
.rs-cal-day.rs-cal-today {
  border-color: var(--rs-accent);
  background: var(--rs-hover);
  box-shadow: 0 2px 8px rgba(236,72,153,.1);
}
.rs-cal-day.rs-cal-other { opacity: .3; }
.rs-cal-day-num {
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--rs-text);
}
.rs-cal-today .rs-cal-day-num { color: var(--rs-accent-dark); }
.rs-cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.rs-cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* -- 22. Inbox Layout ---------------------------------------------- */
.rs-inbox-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  height: 100%;
  min-height: 400px;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-md);
  overflow: hidden;
  background: var(--rs-bg);
}
.rs-inbox-list {
  border-right: 1px solid var(--rs-border);
  overflow-y: auto;
}
.rs-inbox-detail {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rs-inbox-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--rs-text-mut);
  font-size: 13px;
}

/* -- 23. Inbox Items ----------------------------------------------- */
.rs-inbox-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rs-bg-ter);
  cursor: pointer;
  transition: background .15s;
}
.rs-inbox-item:hover { background: var(--rs-bg-alt); }
.rs-inbox-item.rs-inbox-selected { background: var(--rs-hover); border-left: 3px solid var(--rs-accent); }
.rs-inbox-item.rs-inbox-unread { font-weight: 600; }
.rs-inbox-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.rs-inbox-body { flex: 1; min-width: 0; }
.rs-inbox-from {
  font-size: 12px;
  color: var(--rs-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rs-inbox-msg {
  font-size: 11px;
  color: var(--rs-text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-weight: 400;
}
.rs-inbox-time { font-size: 10px; color: var(--rs-text-mut); }
.rs-inbox-priority {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rs-inbox-p-high   { background: #ef4444; }
.rs-inbox-p-medium { background: #f59e0b; }
.rs-inbox-p-low    { background: #94a3b8; }
.rs-inbox-sentiment {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}
.rs-sentiment-positive { background: rgba(5,150,105,.08); color: var(--rs-success); }
.rs-sentiment-neutral  { background: var(--rs-bg-ter); color: var(--rs-text-mut); }
.rs-sentiment-negative { background: rgba(220,38,38,.08); color: var(--rs-danger); }

/* -- 24. Chart Bars ------------------------------------------------ */
.rs-chart-section { margin-bottom: 24px; }
.rs-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rs-text);
  margin-bottom: 12px;
}
.rs-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rs-bar-label {
  font-size: 12px;
  color: var(--rs-text-sec);
  width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-bar-track {
  flex: 1;
  height: 10px;
  background: var(--rs-bg-ter);
  border-radius: 5px;
  overflow: hidden;
}
.rs-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .4s;
  animation: rsBarGrow .6s ease-out;
}
.rs-bar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--rs-text);
  width: 60px;
  text-align: right;
  flex-shrink: 0;
}

/* -- 25. Heatmap --------------------------------------------------- */
.rs-heatmap-wrap { overflow-x: auto; margin-bottom: 24px; }
.rs-heatmap {
  display: grid;
  grid-template-columns: 40px repeat(7, 1fr);
  gap: 3px;
}
.rs-heatmap-label {
  font-size: 9px;
  color: var(--rs-text-mut);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}
.rs-heatmap-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  min-width: 16px;
  cursor: pointer;
  transition: transform .1s;
}
.rs-heatmap-cell:hover { transform: scale(1.15); }
.rs-heatmap-0 { background: var(--rs-bg-ter); }
.rs-heatmap-1 { background: rgba(236,72,153,.15); }
.rs-heatmap-2 { background: rgba(236,72,153,.3); }
.rs-heatmap-3 { background: rgba(236,72,153,.5); }
.rs-heatmap-4 { background: rgba(236,72,153,.75); }
.rs-heatmap-5 { background: rgba(236,72,153,1); }
.rs-heatmap-day-header {
  font-size: 9px;
  color: var(--rs-text-mut);
  text-align: center;
  font-weight: 600;
}

/* -- 26. Campaign Cards -------------------------------------------- */
.rs-campaign-card {
  padding: 16px;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  margin-bottom: 10px;
  box-shadow: var(--rs-shadow-xs);
  transition: all var(--rs-t);
  animation: rsFadeInUp .35s ease-out both;
}
.rs-campaign-card:hover {
  border-color: #fbcfe8;
  transform: translateY(-1px);
  box-shadow: var(--rs-shadow-sm);
}
.rs-campaign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rs-campaign-name { font-size: 15px; font-weight: 600; color: var(--rs-text); }
.rs-campaign-goal {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(37,99,235,.08);
  color: var(--rs-info);
  font-weight: 600;
}
.rs-campaign-desc { font-size: 12px; color: var(--rs-text-sec); margin-bottom: 10px; line-height: 1.4; }
.rs-campaign-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--rs-text-mut);
  margin-bottom: 10px;
}
.rs-campaign-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-campaign-tag {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  background: var(--rs-bg-ter);
  color: var(--rs-text-sec);
}
.rs-campaign-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.rs-campaign-status.planning  { background: var(--rs-bg-ter); color: var(--rs-text-mut); }
.rs-campaign-status.active    { background: rgba(5,150,105,.08); color: var(--rs-success); }
.rs-campaign-status.paused    { background: rgba(245,158,11,.08); color: var(--rs-warning); }
.rs-campaign-status.completed { background: rgba(37,99,235,.08); color: var(--rs-info); }

/* -- 27. Hashtag Pills --------------------------------------------- */
.rs-hashtag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--rs-accent-light);
  color: var(--rs-accent-dark);
  font-size: 10px;
  font-weight: 500;
  margin: 1px 2px;
}

/* -- 28. Post Composer --------------------------------------------- */
.rs-composer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rs-composer-editor { min-width: 0; }
.rs-composer-preview { min-width: 0; }

/* -- 29. Preview Frame --------------------------------------------- */
.rs-preview-frame {
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-md);
  background: var(--rs-bg);
  overflow: hidden;
}
.rs-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rs-border);
  background: var(--rs-bg-alt);
}
.rs-preview-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.rs-preview-name { font-size: 12px; font-weight: 600; color: var(--rs-text); }
.rs-preview-handle { font-size: 10px; color: var(--rs-text-mut); }
.rs-preview-body {
  padding: 12px;
  font-size: 13px;
  color: var(--rs-text-sec);
  line-height: 1.5;
  min-height: 80px;
  white-space: pre-wrap;
  word-break: break-word;
}
.rs-preview-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--rs-border);
  display: flex;
  gap: 20px;
  font-size: 11px;
  color: var(--rs-text-mut);
}

/* -- 30. Template Cards -------------------------------------------- */
.rs-template-card {
  padding: 14px;
  border-radius: var(--rs-r-md);
  border: 1px solid var(--rs-border);
  background: var(--rs-bg);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--rs-t);
}
.rs-template-card:hover {
  background: var(--rs-hover);
  border-color: #fbcfe8;
}
.rs-template-name { font-size: 13px; font-weight: 600; color: var(--rs-text); margin-bottom: 4px; }
.rs-template-preview { font-size: 11px; color: var(--rs-text-sec); line-height: 1.4; max-height: 40px; overflow: hidden; }

/* -- 31. Guide Sections -------------------------------------------- */
.rs-guide-section { margin-bottom: 28px; }
.rs-guide-section h3 { font-size: 16px; font-weight: 700; color: var(--rs-text); margin: 0 0 8px; }
.rs-guide-section p { font-size: 13px; color: var(--rs-text-sec); line-height: 1.6; margin: 0 0 8px; }
.rs-guide-section ul { margin: 6px 0 0; padding-left: 20px; }
.rs-guide-section li { font-size: 12px; color: var(--rs-text-sec); line-height: 1.6; margin-bottom: 4px; }

/* -- 32. Tip Box --------------------------------------------------- */
.rs-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--rs-hover);
  border: 1px solid var(--rs-accent-light);
  border-left: 3px solid var(--rs-accent);
  margin-bottom: 16px;
}
.rs-tip-box svg { flex-shrink: 0; margin-top: 1px; color: var(--rs-accent); stroke: var(--rs-accent); }
.rs-tip-box span { font-size: 12px; color: var(--rs-text-sec); line-height: 1.45; }
.rs-tip-box strong { color: var(--rs-accent-dark); }

/* -- 33. Empty States ---------------------------------------------- */
.rs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 30px;
  text-align: center;
}
.rs-empty svg { margin-bottom: 14px; opacity: .3; color: var(--rs-text-mut); }
.rs-empty-title { font-size: 15px; font-weight: 600; color: var(--rs-text-sec); margin-bottom: 6px; }
.rs-empty-sub { font-size: 12px; color: var(--rs-text-mut); max-width: 300px; line-height: 1.5; }

/* -- 34. Search Input ---------------------------------------------- */
.rs-search {
  padding: 8px 12px;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-sm);
  background: var(--rs-bg);
  color: var(--rs-text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  width: 200px;
  transition: border-color .15s, box-shadow .15s;
}
.rs-search:focus {
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px rgba(236,72,153,.12);
}
.rs-search::placeholder { color: var(--rs-text-mut); }

/* -- 35. Badges ---------------------------------------------------- */
.rs-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.rs-badge-type {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--rs-bg-ter);
  color: var(--rs-text-mut);
  font-weight: 500;
}

/* -- 36. Scrollbars ------------------------------------------------ */
#win-redes-sociales ::-webkit-scrollbar { width: 5px; }
#win-redes-sociales ::-webkit-scrollbar-track { background: transparent; }
#win-redes-sociales ::-webkit-scrollbar-thumb { background: var(--rs-accent); border-radius: 3px; }
#win-redes-sociales ::-webkit-scrollbar-thumb:hover { background: var(--rs-accent-dark); }

/* -- 37. Progress Bars --------------------------------------------- */
.rs-progress { height: 6px; border-radius: 3px; background: var(--rs-bg-ter); overflow: hidden; }
.rs-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; animation: rsBarGrow .6s ease-out; }
.rs-progress-pink  { background: linear-gradient(90deg, var(--rs-accent), #f472b6); }
.rs-progress-green { background: linear-gradient(90deg, #059669, #10b981); }
.rs-progress-blue  { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.rs-progress-red   { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* -- 38. Platform Checks (Composer) -------------------------------- */
.rs-platform-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-platform-check {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-sm);
  cursor: pointer;
  font-size: 11px;
  color: var(--rs-text-sec);
  transition: all .15s;
  background: var(--rs-bg);
}
.rs-platform-check:hover { background: var(--rs-hover); }
.rs-platform-check.rs-check-selected {
  border-color: var(--rs-accent);
  background: var(--rs-accent-light);
  color: var(--rs-accent-dark);
}
.rs-platform-check input { display: none; }

/* -- 39. Reply Area ------------------------------------------------ */
.rs-reply-area {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--rs-border);
  background: var(--rs-bg-alt);
  margin-top: auto;
}
.rs-reply-area .rs-input { flex: 1; }

/* -- 40. Section Headers ------------------------------------------- */
.rs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.rs-section-title { font-size: 14px; font-weight: 700; color: var(--rs-text); }
.rs-section-sub { font-size: 11px; color: var(--rs-text-mut); margin-top: 2px; }

/* -- 41. Confirm Message ------------------------------------------- */
.rs-confirm-msg { color: #374151; line-height: 1.5; font-size: 14px; margin: 0; }

/* -- 42. Responsive ------------------------------------------------ */
@media (max-width: 700px) {
  #win-redes-sociales .content.rs-app { grid-template-columns: 1fr; }
  .rs-sidebar { display: none; }
}