/* ===== Social Publish - Legacy (compatibilidad con otras vistas) ===== */
.social-accordion{display:flex;flex-direction:column;gap:.75rem}
.social-acc-card{border-radius:12px;overflow:hidden;border:1px solid #e2e8f0}
.social-acc-header{padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.social-acc-header.youtube{background:linear-gradient(135deg,#FF0000,#CC0000)}
.social-acc-header.tiktok{background:linear-gradient(135deg,#010101,#333)}
.social-acc-header.instagram{background:linear-gradient(135deg,#833AB4,#E1306C 50%,#F77737)}
.social-acc-header.disabled{background:linear-gradient(135deg,#94a3b8,#64748b)}
.social-acc-header-left{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1}
.social-acc-header-info h4{margin:0;color:#fff;font-size:.95rem;font-weight:600}
.social-acc-summary{color:rgba(255,255,255,.75);font-size:.8rem;display:block;margin-top:.15rem}
.social-acc-chevron{color:rgba(255,255,255,.6);font-size:.85rem;transition:transform .3s;flex-shrink:0}
.social-acc-chevron.open{transform:rotate(180deg)}
.social-acc-body{padding:1.25rem;background:#fff;border-top:1px solid #e2e8f0}
.social-avatar-placeholder{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
.social-acc-action-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border-radius:8px;font-weight:500;text-decoration:none;font-size:.8rem;flex-shrink:0}
.social-form-group{margin-bottom:1rem}
.social-form-group label{display:block;font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.4rem}
.social-form-row{display:flex;gap:1rem}
.social-form-half{flex:1}
.social-input{width:100%;padding:.6rem .85rem;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.9rem;color:#1e293b;background:#f8fafc;box-sizing:border-box;font-family:inherit}
.social-input:focus{outline:none;border-color:#38bdf8;background:#fff}
textarea.social-input{resize:vertical;min-height:70px}
.social-hashtags{display:flex;flex-wrap:wrap;gap:.4rem}
.social-hashtag-chip{display:inline-flex;align-items:center;padding:.3rem .65rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:20px;font-size:.8rem;color:#475569;cursor:pointer}
.social-hashtag-chip.added{background:#22c55e;color:#fff;border-color:#22c55e}
.btn-publish{width:100%;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}
.btn-publish-youtube{background:#FF0000;color:#fff}
.btn-publish-tiktok{background:#010101;color:#fff}
.btn-publish-instagram{background:linear-gradient(135deg,#833AB4,#E1306C 50%,#F77737);color:#fff}
.social-alert{padding:.85rem 1rem;border-radius:8px;font-size:.85rem;display:flex;align-items:flex-start;gap:.5rem;line-height:1.5}
.social-alert a{color:inherit;text-decoration:underline}
.social-alert-warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.social-alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.social-alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.social-alert-danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.social-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .45rem;border-radius:4px;font-size:.65rem;font-weight:600}
.social-badge-sandbox{background:#fef3c7;color:#92400e}
.social-result{margin-top:.75rem;display:none}
.yt-studio-section{margin-top:.75rem;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
.yt-studio-section-header{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:#f8fafc;cursor:pointer;font-size:.85rem;font-weight:600;color:#475569}
.yt-studio-section-header.danger{color:#991b1b;background:#fef2f2}
.yt-section-chevron{font-size:.75rem;transition:transform .2s}
.yt-studio-section-body{padding:1rem;border-top:1px solid #e2e8f0}
.yt-comments-container{max-height:400px;overflow-y:auto}
.yt-comment{display:flex;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #f1f5f9}
.yt-comment:last-child{border-bottom:none}
.yt-comment-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.yt-comment-body{flex:1;min-width:0}
.yt-comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.yt-comment-header strong{font-size:.8rem;color:#1e293b}
.yt-comment-date{font-size:.7rem;color:#94a3b8}
.yt-comment-text{font-size:.85rem;color:#475569;line-height:1.4;word-break:break-word}
.yt-comment-meta{display:flex;gap:1rem;margin-top:.35rem;font-size:.75rem;color:#94a3b8}
.yt-comment-actions{display:flex;gap:.5rem;margin-top:.4rem}
.yt-comment-btn{background:none;border:1px solid #e2e8f0;border-radius:6px;padding:.25rem .6rem;font-size:.75rem;color:#64748b;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.yt-btn-delete-comment:hover{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.yt-reply-form{margin-top:.5rem;padding-top:.5rem;border-top:1px solid #f1f5f9}
.ai-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.ai-option-check{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;font-size:.8rem;color:#475569}
.ai-redes-checks{display:flex;flex-wrap:wrap;gap:.5rem}
.ai-red-check{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;background:#fff;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;font-size:.8rem}

/* ══════════════════════════════════════════════════════
   REDES SOCIALES v4 — Dashboard moderno con color
   ══════════════════════════════════════════════════════ */

/* ── Grid ── */
.rs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    width: 100%;
}

/* ── Card ── */
.rs-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
    border: 1px solid #f1f5f9;
    transition: box-shadow .2s ease;
}
.rs-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.06);
}

/* ── Header: borde superior grueso de color por plataforma ── */
.rs-card-header {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 3px solid transparent;
    background: #fff;
}
.rs-card-yt .rs-card-header  { border-bottom-color: #FF0000; }
.rs-card-tt .rs-card-header  { border-bottom-color: #111111; }
.rs-card-ig .rs-card-header  { border-image: linear-gradient(90deg, #833AB4, #E1306C, #F77737) 1; }

/* ── Avatar ── */
.rs-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.rs-avatar-yt { background: #FF0000; box-shadow: 0 4px 12px rgba(255,0,0,.35); }
.rs-avatar-tt { background: #111111; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.rs-avatar-ig { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); box-shadow: 0 4px 12px rgba(225,48,108,.35); }

/* ── Info plataforma ── */
.rs-header-info { flex: 1; min-width: 0; }
.rs-platform-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .rs-platform-name {
    color: white;
}

.rs-platform-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.dark-mode .rs-platform-sub { color: white; }
.textoParaOscuro {
    color: #64748b;
}

.dark-mode .textoParaOscuro {
    color: #D6D6D6;
}
/* ── Badges con color sólido ── */
.rs-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .2px;
}
.rs-badge-ok      { background: #16a34a; color: #fff; }
.rs-badge-warn    { background: #f59e0b; color: #fff; }
.rs-badge-off     { background: #e2e8f0; color: #64748b; }
.rs-badge-sandbox { background: #3b82f6; color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: 700; }

/* ── Body ── */
.rs-card-body { padding: 16px 18px; }

/* ── Sección con borde izquierdo de color plataforma ── */
.rs-section {
    margin-bottom: 16px;
    padding-left: 0;
}
.rs-section:last-child { margin-bottom: 0; }

.rs-section-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rs-card-yt .rs-section-title { color: #DC2626; border-left: 3px solid #FF0000; }
.rs-card-tt .rs-section-title { color: #111111; border-left: 3px solid #111111; }
.rs-card-ig .rs-section-title { color: #BE185D; border-left: 3px solid #E1306C; }

/* ── Formulario ── */
.rs-form-group { margin-bottom: 10px; }
.rs-form-group:last-child { margin-bottom: 0; }
.rs-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.rs-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.rs-label small {
    font-size: 10px;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: #94a3b8;
}

.rs-input {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}
.rs-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
textarea.rs-input { resize: vertical; min-height: 68px; }
select.rs-input   { cursor: pointer; }

/* ── Botones pequeños ── */
.rs-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }

.rs-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.rs-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }

/* Botón IA: morado sólido */
.rs-btn-ai {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
    font-weight: 700;
}
.rs-btn-ai:hover { background: #6d28d9; border-color: #6d28d9; }

/* Botón primario genérico */
.rs-btn-primary {
    background: var(--color-background-info);
    color: var(--color-text-info);
    border-color: var(--color-border-info);
}
.rs-btn-primary:hover { opacity: .9; }

/* ── Botón publicar: grande y con color de plataforma ── */
.rs-btn-publish {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    letter-spacing: .2px;
    margin-top: 4px;
    transition: opacity .15s, transform .1s;
}
.rs-btn-publish:hover  { opacity: .92; transform: translateY(-1px); }
.rs-btn-publish:active { transform: translateY(0); }
.rs-card-yt .rs-btn-publish { background: #FF0000; color: #fff; box-shadow: 0 4px 16px rgba(255,0,0,.3); }
.rs-card-tt .rs-btn-publish { background: #111111; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.rs-card-ig .rs-btn-publish {
    background: linear-gradient(90deg, #833AB4, #E1306C, #F77737);
    color: #fff;
    box-shadow: 0 4px 16px rgba(225,48,108,.3);
}

/* ── Panel IA ── */
.rs-ai-row { display: flex; gap: 7px; margin-bottom: 10px; }
.rs-ai-panel {
    display: none;
    margin-bottom: 12px;
    padding: 13px 14px;
    background: #faf5ff;
    border-radius: 10px;
    border: 1.5px solid #ddd6fe;
}
.rs-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.rs-ai-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #e9d5ff;
    background: #fff;
    font-weight: 500;
    transition: border-color .15s;
}
.rs-ai-check:hover { border-color: #7c3aed; }
.rs-redes-panel {
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1.5px solid #e9d5ff;
    margin-bottom: 10px;
}
.rs-redes-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rs-red-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #374151; cursor: pointer; font-weight: 500; }

/* ── Stats publicado con color de plataforma ── */
.rs-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.rs-stat {
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    border: 2px solid;
}
.rs-card-yt .rs-stat { background: #FFF1F1; border-color: #FECACA; }
.rs-card-tt .rs-stat { background: #F1F5F9; border-color: #E2E8F0; }
.rs-card-ig .rs-stat { background: #FDF2F8; border-color: #FBCFE8; }

.rs-stat-val { font-size: 20px; font-weight: 800; line-height: 1; }
.rs-card-yt .rs-stat-val { color: #DC2626; }
.rs-card-tt .rs-stat-val { color: #111111; }
.rs-card-ig .rs-stat-val { color: #BE185D; }
.rs-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; color: #94a3b8; }

/* ── Video thumb publicado ── */
.rs-video-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rs-thumb {
    width: 60px;
    height: 45px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.rs-card-yt .rs-thumb { background: #FFF1F1; border-color: #FECACA; }
.rs-card-tt .rs-thumb { background: #F1F5F9; border-color: #E2E8F0; }
.rs-card-ig .rs-thumb { background: #FDF2F8; border-color: #FBCFE8; }

.rs-video-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.rs-video-link  { font-size: 12px; color: #7c3aed; text-decoration: none; display: block; margin-top: 3px; font-weight: 600; }
.rs-video-link:hover { text-decoration: underline; }

/* ── Botón de acción (Studio, comentarios) con color de plataforma ── */
.rs-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid;
    background: transparent;
    transition: opacity .15s;
    text-decoration: none;
}
.rs-action-btn:hover { opacity: .8; }
.rs-card-yt .rs-action-btn { background: #FFF1F1; color: #DC2626; border-color: #FECACA; }
.rs-card-tt .rs-action-btn { background: #F1F5F9; color: #111111; border-color: #CBD5E1; }
.rs-card-ig .rs-action-btn { background: #FDF2F8; color: #BE185D; border-color: #FBCFE8; width: 100%; justify-content: center; }

/* ── Hashtags con color de plataforma ── */
.rs-hashtags { display: flex; flex-wrap: wrap; gap: 5px; }
.rs-hashtag-chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    border: 1.5px solid;
    font-weight: 600;
    transition: all .15s;
}
.rs-card-yt .rs-hashtag-chip { background: #FFF1F1; color: #DC2626; border-color: #FECACA; }
.rs-card-tt .rs-hashtag-chip { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
.rs-card-ig .rs-hashtag-chip { background: #FDF2F8; color: #BE185D; border-color: #FBCFE8; }
.rs-hashtag-chip.added        { background: #7c3aed !important; color: #fff !important; border-color: #7c3aed !important; }

/* ── Checks interacción ── */
.rs-checks { display: flex; flex-direction: column; gap: 6px; }
.rs-checks label {
    font-size: 12px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* ── Alertas ── */
.rs-alert {
    font-size: 12px;
    padding: 10px 13px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    border: 2px solid;
}
.rs-alert-warn { background: #fffbeb; color: #92400e; border-color: #f59e0b; }

/* ── Resultado publicación ── */
.rs-result { margin-top: 10px; font-size: 12px; }

/* ── No conectado ── */
.rs-not-connected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 18px;
    text-align: center;
}
.rs-not-connected p { font-size: 13px; color: #64748b; line-height: 1.6; max-width: 200px; font-weight: 500; }
.dark-mode .rs-not-connected p { color: white;}
/*.rs-not-connected a {
    font-size: 13px;
    padding: 9px 20px;
    border-radius: 8px;
    background: #7c3aed;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.rs-not-connected a:hover {
    font-size: 13px;
    padding: 9px 20px;
    border-radius: 8px;
    background: #7c3aed;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    border: none;
}
*/

/* ── Divider ── */
.rs-divider { border: none; border-top: 2px dashed #f1f5f9; margin: 14px 0; }

/* ── Tabs móvil ── */
.rs-mobile-tabs { display: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .rs-grid { grid-template-columns: 1fr; }
    .rs-mobile-tabs {
        display: flex;
        list-style: none;
        gap: 0;
        border-bottom: 2px solid #f1f5f9;
        margin-bottom: 16px;
        overflow-x: auto;
        padding: 0;
    }
    .rs-mobile-tab {
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: -2px;
    }
    .rs-mobile-tab.active { color: #0f172a; border-bottom-color: #7c3aed; }
    .rs-mobile-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .rs-card { display: none; }
    .rs-card.rs-mobile-active { display: block; }
}
/* Badge mostrado cuando el textarea se ha pre-rellenado desde Estudio IA */
.rs-ia-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, #ede9fe 0%, #f3f4f6 100%);
    color: #6d28d9;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 10px;
    margin-bottom: 4px;
    border: 1px solid #ddd6fe;
}
.rs-ia-source-badge a {
    color: #6d28d9;
    text-decoration: none;
    margin-left: 2px;
    opacity: 0.7;
    transition: opacity .15s;
}
.rs-ia-source-badge a:hover { opacity: 1; }