/* ================================================================
   follow-system.css — v2.2
   ================================================================ */

/* ── Botón tema: estado siguiendo ── */
div.bookmark.msg-following,
div.bookmark.marked {
    background: linear-gradient(135deg,#00c897,#00a87e) !important;
    color:#fff !important;
    border-color:#00a87e !important;
    box-shadow:0 2px 8px rgba(0,200,151,.35) !important;
}
div.bookmark.msg-following i,
div.bookmark.marked i { color:#fff !important; }

/* ── Carga ── */
div.bookmark.msg-loading,
.msg-follow-btn.msg-loading { pointer-events:none; opacity:.62; }
div.bookmark.msg-loading::after,
.msg-follow-btn.msg-loading::after {
    content:""; display:inline-block;
    width:11px; height:11px; margin-left:7px;
    border:2px solid currentColor; border-top-color:transparent;
    border-radius:50%; animation:msg-spin .65s linear infinite; vertical-align:middle;
}
@keyframes msg-spin { to { transform:rotate(360deg); } }

/* ── Toast ── */
.msg-toast {
    position:fixed; bottom:28px; right:28px;
    padding:13px 22px; border-radius:10px;
    font-size:14px; font-weight:600; z-index:999999;
    box-shadow:0 6px 24px rgba(0,0,0,.35);
    opacity:0; transform:translateY(10px);
    transition:opacity .33s,transform .33s;
    max-width:320px; pointer-events:none; line-height:1.4;
}
.msg-toast--visible { opacity:1; transform:translateY(0); }
.msg-toast--success { background:#1db954; color:#fff; }
.msg-toast--info    { background:#2d2d3a; color:#ddd; border:1px solid #555; }
.msg-toast--warning { background:#f59e0b; color:#111; }
.msg-toast--error   { background:#e53e3e; color:#fff; }

/* ════════════════════════════════════════
   PÁGINA DE FAVORITOS
════════════════════════════════════════ */

#msg-favorites-page {
    max-width:1200px;
    margin:0 auto;
    padding:28px 20px 64px;
}

/* ── Cabecera ── */
.msg-fav-header { text-align:center; margin-bottom:24px; }
.msg-fav-header h1 { font-size:26px; font-weight:800; margin-bottom:6px; }
.msg-fav-count { opacity:.6; font-size:13px; }

/* ── Barra de controles ── */
.msg-fav-controls {
    display:flex;
    gap:10px;
    margin-bottom:22px;
    flex-wrap:wrap;
    align-items:center;
}

/* Campo de búsqueda */
.msg-fav-search {
    flex:1; min-width:180px;
    padding:10px 16px;
    border:2px solid rgba(255,255,255,.12);
    border-radius:25px;
    background:rgba(255,255,255,.06);
    color:inherit; font-size:14px; outline:none;
    transition:border-color .2s;
}
.msg-fav-search:focus { border-color:#00d4aa; }
.msg-fav-search::placeholder { opacity:.4; }

/* Filtro/orden */
.msg-fav-sort {
    padding:10px 14px;
    border:2px solid rgba(255,255,255,.12);
    border-radius:25px;
    background:rgba(255,255,255,.06);
    color:inherit; font-size:13px; cursor:pointer; outline:none;
    transition:border-color .2s;
}
.msg-fav-sort:focus { border-color:#00d4aa; }

/* Botón de notificaciones */
.msg-notif-toggle-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px;
    border-radius:25px;
    border:2px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
    color:inherit; font-size:13px; font-weight:600;
    cursor:pointer; outline:none;
    transition:border-color .2s, background .2s;
    white-space:nowrap;
}
.msg-notif-toggle-btn:hover { border-color:#00d4aa; }
.msg-notif-toggle-btn .msg-notif-icon { font-size:16px; }
.msg-notif-toggle-btn.active {
    border-color:#1db954;
    background:rgba(29,185,84,.12);
    color:#1db954;
}
.msg-notif-toggle-btn.inactive {
    border-color:rgba(255,255,255,.2);
    color:rgba(255,255,255,.4);
}

/* ── Grid ── */
.msg-fav-grid {
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:16px;
}

/* ── Card — estilo póster con degradado ── */
.msg-fav-card {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    background:#111;
    aspect-ratio:2/3;          /* proporción fija igual que imagen de referencia */
    cursor:pointer;
    transition:transform .22s ease, box-shadow .22s ease;
    animation:msg-card-in .35s ease both;
}
.msg-fav-card:hover {
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 14px 32px rgba(0,0,0,.55);
}

/* Imagen de fondo que ocupa toda la card */
.msg-fav-card-img {
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.msg-fav-card:hover .msg-fav-card-img { transform:scale(1.06); }

/* Degradado negro en la parte inferior */
.msg-fav-card-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        transparent 35%,
        rgba(0,0,0,.55) 60%,
        rgba(0,0,0,.92) 100%
    );
    pointer-events:none;
}

/* Contenido sobre el degradado */
.msg-fav-card-body {
    position:absolute;
    bottom:0; left:0; right:0;
    padding:10px 12px 12px;
    z-index:2;
}
.msg-fav-card-title {
    font-size:13px; font-weight:700;
    line-height:1.3; color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.8);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:8px;
}

/* Botón quitar — aparece sobre el degradado */
.msg-fav-remove {
    width:100%;
    padding:6px 0;
    background:rgba(229,62,62,.18);
    border:1px solid rgba(229,62,62,.35);
    border-radius:6px;
    color:#ff7b7b;
    font-size:11.5px; font-weight:600;
    cursor:pointer;
    transition:background .18s;
    backdrop-filter:blur(4px);
}
.msg-fav-remove:hover { background:rgba(229,62,62,.38); }
.msg-fav-remove:disabled { opacity:.4; pointer-events:none; }

/* Badge "Nuevo" */
.msg-new-badge {
    position:absolute; top:8px; left:8px; z-index:3;
    background:#e53e3e; color:#fff;
    font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:20px;
    letter-spacing:.4px; text-transform:uppercase;
}

/* Badge "Notif desactivada" */
.msg-notif-off-badge {
    position:absolute; top:8px; right:8px; z-index:3;
    background:rgba(0,0,0,.6); color:rgba(255,255,255,.5);
    font-size:11px;
    padding:3px 7px; border-radius:20px;
    backdrop-filter:blur(4px);
}

/* ── Estado vacío ── */
.msg-fav-empty { text-align:center; padding:80px 20px; }
.msg-fav-empty-icon { font-size:52px; opacity:.22; margin-bottom:16px; display:block; }
.msg-fav-empty h3 { font-size:18px; margin-bottom:8px; opacity:.8; }
.msg-fav-empty p  { opacity:.5; margin-bottom:22px; font-size:14px; }
.msg-fav-empty a {
    display:inline-block; padding:11px 26px;
    background:linear-gradient(135deg,#00d4aa,#00b894);
    color:#fff; text-decoration:none;
    border-radius:8px; font-weight:700; font-size:14px;
    transition:opacity .2s;
}
.msg-fav-empty a:hover { opacity:.88; }

/* Sin resultados de búsqueda */
.msg-fav-no-results {
    grid-column:1/-1;
    text-align:center; padding:40px;
    opacity:.5; font-size:15px;
}

/* ── Paginación ── */
.msg-fav-pagination {
    display:flex; justify-content:center;
    align-items:center; gap:8px;
    margin-top:36px; flex-wrap:wrap;
}
.msg-fav-page-btn {
    min-width:38px; height:38px; padding:0 10px;
    border:2px solid rgba(255,255,255,.15);
    border-radius:8px; background:transparent;
    color:inherit; font-size:13px; font-weight:600;
    cursor:pointer; transition:border-color .18s,background .18s;
}
.msg-fav-page-btn:hover:not(:disabled) { border-color:#00d4aa; color:#00d4aa; }
.msg-fav-page-btn.active { background:#00d4aa; border-color:#00d4aa; color:#000; }
.msg-fav-page-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── Animaciones ── */
@keyframes msg-card-in {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}
.msg-fav-card:nth-child(1)  { animation-delay:.03s; }
.msg-fav-card:nth-child(2)  { animation-delay:.06s; }
.msg-fav-card:nth-child(3)  { animation-delay:.09s; }
.msg-fav-card:nth-child(4)  { animation-delay:.12s; }
.msg-fav-card:nth-child(5)  { animation-delay:.15s; }
.msg-fav-card:nth-child(n+6){ animation-delay:.18s; }

/* ── Responsive ── */
/* Tablet: hasta 900px → 3 columnas */
@media (max-width:900px) {
    .msg-fav-grid {
        grid-template-columns:repeat(3,1fr) !important;
        gap:14px !important;
    }
}
/* Móvil: hasta 600px → 2 columnas */
@media (max-width:600px) {
    .msg-fav-grid {
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
    }
    .msg-fav-card-title { font-size:12px; }
    .msg-fav-remove { font-size:11px; padding:5px 0; }
    .msg-fav-controls { gap:8px; }
    .msg-fav-search { min-width:100%; order:-1; }
    .msg-toast { bottom:14px; right:14px; left:14px; max-width:none; font-size:13px; }
}
/* Móvil pequeño: hasta 380px → 2 columnas compactas */
@media (max-width:380px) {
    .msg-fav-grid {
        grid-template-columns:repeat(2,1fr) !important;
        gap:8px !important;
    }
    .msg-fav-card-title { font-size:11px; }
    #msg-favorites-page { padding:16px 12px 48px; }
}

/* ════════════════════════════════════════
   CAMPANA POR SERIE (card de favoritos)
════════════════════════════════════════ */
.msg-fav-bell {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 4;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, background .18s;
    /* fondo semi-transparente para que se lea sobre cualquier imagen */
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    line-height: 1;
    padding: 0;
}
.msg-fav-bell:hover { transform: scale(1.18); background: rgba(0,0,0,.78); }
.msg-fav-bell:disabled { opacity: .5; cursor: not-allowed; }

/* Estado: notificaciones ON */
.msg-fav-bell.bell-on  { box-shadow: 0 0 0 1.5px rgba(29,185,84,.7); }
/* Estado: notificaciones OFF */
.msg-fav-bell.bell-off { box-shadow: 0 0 0 1.5px rgba(255,255,255,.18); opacity: .65; }

/* ════════════════════════════════════════
   PANEL DE NOTIFICACIONES (user-menu)
════════════════════════════════════════ */
.msg-notif-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 8px;
}
.msg-notif-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.msg-notif-header-actions {
    display: flex; gap: 6px; align-items: center;
}

/* Botones de acción del header */
.msg-notif-action-btn {
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15);
    background: transparent;
    color: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .18s;
}
.msg-notif-action-btn:hover { background: rgba(255,255,255,.1); }
.msg-notif-delete-btn:hover { background: rgba(229,62,62,.2); border-color: rgba(229,62,62,.4); color: #ff7b7b; }

.msg-notif-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.08);
    color: inherit; font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s;
    flex-shrink: 0;
}
.msg-notif-close:hover { background: rgba(229,62,62,.3); }

/* Lista */
.msg-notif-list { overflow-y: auto; max-height: 370px; }

.msg-notif-item {
    display: flex; align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
    position: relative;
}
.msg-notif-item:hover { background: rgba(255,255,255,.04); }
.msg-notif-item.unread { background: rgba(0,212,170,.06); }
.msg-notif-item.unread::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #00d4aa;
    border-radius: 3px 0 0 3px;
}

/* Link principal */
.msg-notif-link {
    display: flex; align-items: center;
    gap: 11px;
    padding: 11px 12px;
    text-decoration: none; color: inherit;
    flex: 1; min-width: 0;
}

/* Thumbnail */
.msg-notif-thumb {
    width: 44px; height: 56px;
    object-fit: cover; border-radius: 5px;
    flex-shrink: 0; display: block;
}
.msg-notif-thumb--empty {
    width: 44px; height: 56px;
    border-radius: 5px;
    background: rgba(255,255,255,.07);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}

/* Texto */
.msg-notif-text { min-width: 0; }
.msg-notif-text strong {
    display: block; font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}
.msg-notif-text p {
    font-size: 12px; opacity: .7; margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-notif-time { font-size: 11px; opacity: .45; }

/* Botones individuales (✓ y ✕) */
.msg-notif-actions {
    display: flex; flex-direction: column;
    justify-content: center; gap: 4px;
    padding: 8px 10px 8px 4px;
    flex-shrink: 0;
}
.msg-notif-btn {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.msg-notif-read:hover { background: rgba(29,185,84,.25); border-color: rgba(29,185,84,.5); color: #1db954; }
.msg-notif-del:hover  { background: rgba(229,62,62,.25);  border-color: rgba(229,62,62,.5);  color: #ff7b7b; }

.msg-notif-empty, .msg-notif-loading {
    text-align: center; padding: 36px 20px;
    opacity: .5; font-size: 14px;
}