/* ── RESET Y BASE ───────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-base:       #0d0d0d;
    --bg-elevated:   #141414;
    --bg-card:       #1a1a1a;
    --bg-hover:      #242424;
    --bg-sidebar:    #080808;
    --accent:        #2d7ff9;
    --accent-hover:  #4d95ff;
    --accent-dark:   #1a5fd4;
    --text-primary:  #f0f0f0;
    --text-secondary:#a0a0a0;
    --text-muted:    #505050;
    --danger:        #ff4d6d;
    --success:       #2dca73;
    --sidebar-width: 250px;
    --player-height: 88px;
    --border:        #2a2a2a;
    --radius:        10px;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

/* ── UTILIDADES ─────────────────────────────────── */
.oculto { display: none !important; }

.mensaje { margin-top:12px; padding:10px 14px; border-radius:8px; font-size:0.85rem; font-weight:500; }
.mensaje.exito { background:#0d2e1a; border:1px solid var(--success); color:var(--success); }
.mensaje.error  { background:#2e0d15; border:1px solid var(--danger);  color:var(--danger);  }

/* ── LOADING SCREEN ──────────────────────────────── */
#loading-screen {
    position: fixed;
    inset: 0;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading-screen.fade-out { opacity: 0; visibility: hidden; }

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(45,127,249,.1);
    border: 1px solid rgba(45,127,249,.2);
    border-radius: 20px;
    font-size: 2.5rem;
}
.loading-logo-wrap img { width:60px; height:60px; object-fit:contain; border-radius:10px; }

.loading-nombre {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.5px;
}

.loading-spinner { margin-top: 8px; }
.spinner-ring {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── BOTONES ─────────────────────────────────────── */
.btn-primary {
    background: var(--accent); color:#fff; border:none;
    padding:11px 24px; border-radius:8px; font-size:0.9rem; font-weight:600;
    cursor:pointer; transition:all 0.18s;
}
.btn-primary:hover    { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 16px rgba(45,127,249,.35); }
.btn-primary:active   { transform:translateY(0); }
.btn-primary:disabled { background:#2a2a2a; color:#555; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-primary.btn-large { padding:14px 36px; font-size:1rem; border-radius:50px; }
.btn-full { width:100%; margin-top:8px; }

.btn-secondary {
    background:transparent; color:var(--text-primary); border:1px solid var(--border);
    padding:9px 20px; border-radius:8px; font-size:0.85rem; font-weight:600;
    cursor:pointer; transition:all 0.18s; display:inline-block; text-align:center;
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

.btn-ghost {
    background:transparent; color:var(--text-primary); border:none;
    padding:9px 18px; border-radius:8px; font-size:0.9rem; font-weight:600;
    cursor:pointer; transition:all 0.18s;
}
.btn-ghost:hover { background:var(--bg-hover); }

.btn-danger {
    background:transparent; color:var(--danger); border:1px solid var(--danger);
    padding:6px 14px; border-radius:8px; font-size:0.8rem; font-weight:600;
    cursor:pointer; transition:all 0.18s;
}
.btn-danger:hover { background:var(--danger); color:#fff; }

.btn-compartir {
    background:transparent; color:var(--text-muted); border:1px solid var(--border);
    padding:7px 16px; border-radius:8px; font-size:0.82rem; font-weight:600;
    cursor:pointer; transition:all 0.18s; display:inline-flex; align-items:center; gap:6px;
}
.btn-compartir:hover { border-color:var(--accent); color:var(--accent); }

/* ── CAMPOS ─────────────────────────────────────── */
.campo { margin-bottom:16px; }
.campo label { display:block; font-size:0.78rem; font-weight:700; color:var(--text-secondary); margin-bottom:7px; text-transform:uppercase; letter-spacing:0.6px; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="file"],
.campo textarea,
.campo select {
    width:100%; padding:11px 14px; background:var(--bg-hover); border:1px solid var(--border);
    border-radius:8px; color:var(--text-primary); font-size:0.9rem; transition:border-color 0.18s,box-shadow 0.18s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,127,249,.15); }
.campo textarea { height:90px; resize:vertical; }
.campo select option { background:var(--bg-card); }
.campo-fila { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ══════════════════════════════════════════════════
   PANTALLA PÚBLICA
══════════════════════════════════════════════════ */
#pantalla-publica {
    height: 100vh;
    overflow-y: auto;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
}

/* ── HEADER PÚBLICO ─────────────────────────────── */
.pub-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:0 40px; height:64px;
    background:rgba(8,8,8,0.97); backdrop-filter:blur(12px);
    position:sticky; top:0; z-index:100;
    border-bottom:1px solid var(--border); flex-shrink:0;
}
.pub-header-logo { display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }
.pub-logo-imagen { height:36px; width:auto; object-fit:contain; }
.pub-logo-emoji  { font-size:1.5rem; line-height:1; }
.pub-logo-nombre { font-size:1.1rem; font-weight:800; color:var(--accent); letter-spacing:-0.3px; }
.pub-nav { display:flex; gap:4px; align-items:center; }
.pub-nav-link { color:var(--text-secondary); text-decoration:none; font-size:0.9rem; font-weight:500; padding:7px 14px; border-radius:8px; transition:all 0.18s; cursor:pointer; }
.pub-nav-link:hover { color:var(--text-primary); background:var(--bg-hover); }
.pub-header-acciones { display:flex; gap:10px; align-items:center; }

/* ── HERO CARRUSEL ───────────────────────────────── */
.pub-hero-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    flex-shrink: 0;
}

.pub-hero-carrusel {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}

.pub-hero-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
}

.pub-hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}
.pub-hero-slide-bg.zoom { transform: scale(1.06); }

.pub-hero-slide-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a1628 0%, #1a2e4a 50%, #0d0d0d 100%);
}

/* Degradado sobre la imagen */
.pub-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13,13,13,0.1) 0%,
        rgba(13,13,13,0.3) 40%,
        rgba(13,13,13,0.85) 80%,
        rgba(13,13,13,1)   100%
    );
    pointer-events: none;
}

.pub-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 60px 80px;
    z-index: 2;
    pointer-events: none;
}
.pub-hero-overlay * { pointer-events: all; }

.pub-hero-texto h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0,0,0,.8);
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pub-hero-texto p { color:rgba(255,255,255,0.8); font-size:1.1rem; margin-bottom:24px; text-shadow:0 1px 8px rgba(0,0,0,.8); }

/* Dots */
.pub-hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.pub-hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none; cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}
.pub-hero-dot.activo { background:#fff; width:24px; border-radius:4px; }

/* Flechas */
.pub-hero-prev,
.pub-hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 3;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.pub-hero-prev { left: 20px; }
.pub-hero-next { right: 20px; }
.pub-hero-prev:hover,
.pub-hero-next:hover { background:rgba(45,127,249,.6); border-color:var(--accent); }

/* ── CONTENIDO Y FOOTER ──────────────────────────── */
.pub-contenido { padding:40px; max-width:1200px; margin:0 auto; width:100%; }

.pub-footer {
    margin-top:auto; padding:20px 40px;
    border-top:1px solid var(--border);
    display:flex; align-items:center; gap:12px;
    font-size:0.82rem; color:var(--text-muted); flex-shrink:0;
}
.footer-sep { color:var(--border); }
.footer-gq { color:var(--accent); text-decoration:none; font-weight:600; }
.footer-gq:hover { text-decoration:underline; }

/* ── DETALLE PÚBLICO ─────────────────────────────── */
#pub-vista-detalle { flex:1; overflow:hidden; }
.pub-detalle-layout { display:grid; grid-template-columns:1fr 360px; gap:0; height:calc(100vh - 64px); overflow:hidden; }
.pub-detalle-contenido { overflow-y:auto; padding:40px; }
.pub-detalle-sidebar { background:var(--bg-card); border-left:1px solid var(--border); overflow-y:auto; padding:32px 24px; }
.pub-registro-emoji { font-size:2.5rem; margin-bottom:12px; }
.pub-registro-card h3 { font-size:1.3rem; font-weight:700; margin-bottom:8px; }
.pub-registro-card p { color:var(--text-secondary); font-size:0.88rem; line-height:1.5; margin-bottom:12px; }
.pub-registro-gratis { background:#0d2e1a; border:1px solid var(--success); color:var(--success); padding:8px 12px; border-radius:8px; font-size:0.82rem; font-weight:600; margin-bottom:4px; }

/* ── CARD BLOQUEADO ──────────────────────────────── */
.card-bloqueado {
    position:absolute; inset:0; background:rgba(13,13,13,0.75);
    border-radius:var(--radius); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
    opacity:0; transition:opacity 0.2s; backdrop-filter:blur(2px);
}
.card:hover .card-bloqueado { opacity:1; }
.card-bloqueado span { font-size:0.78rem; color:#ccc; font-weight:600; }

/* ── MODAL ───────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.78); display:flex; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(4px); }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:40px; width:100%; max-width:400px; position:relative; text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.6); }
.modal-cerrar { position:absolute; top:14px; right:14px; background:transparent; border:none; color:var(--text-muted); font-size:1.1rem; cursor:pointer; padding:4px 8px; border-radius:6px; transition:all 0.18s; }
.modal-cerrar:hover { background:var(--bg-hover); color:var(--text-primary); }
.login-logo { font-size:2.5rem; margin-bottom:6px; }
.modal-titulo { font-size:1.4rem; font-weight:700; margin-bottom:4px; }
.registro-gratis { background:#0d2e1a; border:1px solid var(--success); color:var(--success); padding:8px 14px; border-radius:8px; font-size:0.85rem; font-weight:600; margin-bottom:16px; }

/* ── TABS ────────────────────────────────────────── */
.tabs { display:flex; margin-bottom:20px; border-bottom:1px solid var(--border); }
.tab { flex:1; background:transparent; color:var(--text-secondary); border:none; border-bottom:2px solid transparent; padding:10px; font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.18s; margin-bottom:-1px; }
.tab.activo { color:var(--accent); border-bottom-color:var(--accent); }
.tab:hover  { color:var(--text-primary); }

/* ══════════════════════════════════════════════════
   APP PRINCIPAL
══════════════════════════════════════════════════ */
#pantalla-app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr var(--player-height);
    height: 100vh;
}

/* ── TOPBAR DERECHA ──────────────────────────────── */
.topbar-derecha {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 16px;
    background: var(--bg-elevated);
    margin-bottom: 4px;
}
.topbar-usuario {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.topbar-foto {
    width: 28px; height: 28px;
    border-radius: 50%; object-fit:cover;
    border: 2px solid var(--accent);
}
.topbar-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.18s;
    display: flex; align-items:center; justify-content:center;
}
.topbar-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(45,127,249,.08); }
.topbar-btn-logout:hover { border-color:var(--danger); color:var(--danger); background:rgba(255,77,109,.08); }

/* ── SIDEBAR ─────────────────────────────────────── */
#sidebar {
    background:var(--bg-sidebar); grid-row:1/3;
    display:flex; flex-direction:column; overflow-y:auto;
    border-right:1px solid var(--border);
}
.sidebar-logo { display:flex; align-items:center; gap:8px; padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-logo-imagen { height:28px; width:auto; object-fit:contain; }
#sidebar-logo-emoji  { font-size:1.3rem; line-height:1; }
#sidebar-logo-nombre { font-size:1rem; font-weight:800; color:var(--accent); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-seccion { padding:6px 0; border-bottom:1px solid var(--border); }
.sidebar-titulo  { font-size:0.65rem; font-weight:700; color:var(--text-muted); letter-spacing:1.5px; padding:10px 20px 4px; text-transform:uppercase; }
.sidebar-item    { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none; border-left:3px solid transparent; color:var(--text-secondary); padding:9px 20px; font-size:0.87rem; font-weight:500; cursor:pointer; transition:all 0.15s; text-align:left; }
.sidebar-item:hover  { color:var(--text-primary); background:var(--bg-hover); }
.sidebar-item.activo { color:var(--accent); font-weight:700; border-left-color:var(--accent); background:rgba(45,127,249,.08); }
.sidebar-icon { font-size:0.93rem; width:18px; text-align:center; }
.sidebar-loading { padding:8px 20px; color:var(--text-muted); font-size:0.8rem; }
.sidebar-footer { margin-top:auto; padding:16px 20px; border-top:1px solid var(--border); }
.sidebar-usuario-info { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sidebar-foto { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); flex-shrink:0; }
.sidebar-usuario { font-size:0.83rem; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-logout { background:transparent; border:1px solid var(--border); color:var(--text-secondary); padding:7px 16px; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.18s; width:100%; }
.btn-logout:hover { border-color:var(--danger); color:var(--danger); }

/* ── CONTENIDO PRINCIPAL ────────────────────────── */
#contenido-principal { background:var(--bg-elevated); overflow-y:auto; padding:0 36px 28px; padding-bottom:calc(var(--player-height) + 28px); }
.buscador-wrapper { margin-bottom:24px; }
#buscador { width:100%; max-width:500px; padding:11px 20px; background:var(--bg-hover); border:1px solid var(--border); border-radius:50px; color:var(--text-primary); font-size:0.9rem; transition:all 0.18s; }
#buscador:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,127,249,.15); background:var(--bg-card); }
.seccion-titulo { font-size:1.3rem; font-weight:700; margin-bottom:18px; }

/* ── GRID CARDS ──────────────────────────────────── */
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:18px; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; }
.card:hover { background:var(--bg-hover); border-color:#3a3a3a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.card-imagen { width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px; margin-bottom:12px; background:var(--bg-hover); }
.card-imagen-placeholder { width:100%; aspect-ratio:1; border-radius:7px; margin-bottom:12px; background:linear-gradient(135deg,#0d1a2e,#1a2e4a); display:flex; align-items:center; justify-content:center; font-size:2.5rem; border:1px solid var(--border); }
.card-titulo    { font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.card-subtitulo { font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta      { font-size:0.74rem; color:var(--text-muted); margin-top:6px; }
.card-play { position:absolute; bottom:60px; right:14px; width:38px; height:38px; background:var(--accent); border:none; border-radius:50%; font-size:0.9rem; cursor:pointer; opacity:0; transform:translateY(6px); transition:all 0.2s; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; box-shadow:0 4px 14px rgba(45,127,249,.5); }
.card:hover .card-play { opacity:1; transform:translateY(0); }

/* ── ESTRELLAS ───────────────────────────────────── */
.estrellas { display:flex; gap:3px; margin-top:7px; align-items:center; }
.estrella { font-size:0.9rem; cursor:pointer; color:var(--text-muted); transition:color 0.1s,transform 0.1s; line-height:1; }
.estrella:hover,.estrella.activa { color:#fbbf24; }
.estrella:hover { transform:scale(1.2); }
.estrellas-promedio { font-size:0.75rem; color:var(--text-muted); margin-left:4px; }

/* ── ETIQUETAS ──────────────────────────────────── */
.etiquetas { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.etiqueta { background:rgba(45,127,249,.1); color:var(--accent); font-size:0.7rem; padding:3px 9px; border-radius:50px; border:1px solid rgba(45,127,249,.2); font-weight:500; }

/* ── SERIE HEADER ────────────────────────────────── */
.serie-header {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
    min-height: 260px;
}
.serie-header-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.4);
    transform: scale(1.1);
}
.serie-header-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a1628 0%, #1a2e4a 100%);
}
.serie-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(13,13,13,0.95) 40%, rgba(13,13,13,0.3) 100%);
}
.serie-header-contenido {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 32px;
    padding: 32px;
    align-items: flex-end;
}
.serie-header-imagen { width:180px; height:180px; border-radius:10px; object-fit:cover; flex-shrink:0; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.serie-header-placeholder { width:180px; height:180px; border-radius:10px; flex-shrink:0; background:rgba(45,127,249,.1); border:1px solid rgba(45,127,249,.2); display:flex; align-items:center; justify-content:center; font-size:4rem; }
.serie-header-tipo   { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-secondary); }
.serie-header-nombre { font-size:2.2rem; font-weight:800; margin:8px 0; line-height:1.1; }
.serie-header-autor  { color:var(--accent); font-size:0.95rem; font-weight:600; }

/* ── EPISODIO HEADER ────────────────────────────── */
.ep-header { display:flex; gap:28px; margin-bottom:28px; padding:28px; background:linear-gradient(180deg,#0a1628 0%,var(--bg-elevated) 100%); border-radius:12px; border:1px solid var(--border); }
.ep-header-imagen,.ep-header-placeholder { width:150px; height:150px; border-radius:10px; flex-shrink:0; }
.ep-header-imagen { object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.ep-header-placeholder { background:linear-gradient(135deg,#0d1a2e,#1a2e4a); display:flex; align-items:center; justify-content:center; font-size:3rem; border:1px solid var(--border); }
.ep-titulo-grande { font-size:1.8rem; font-weight:800; margin-bottom:8px; }
.ep-autor-grande  { color:var(--accent); font-size:0.95rem; font-weight:600; margin-bottom:8px; }

/* ── LISTA EPISODIOS ─────────────────────────────── */
.episodio-fila {
    display: grid;
    grid-template-columns: 48px 48px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}
.episodio-fila:hover { background:var(--bg-hover); }
.episodio-fila:last-child { border-bottom:none; }
.episodio-numero  { color:var(--text-muted); text-align:center; font-size:0.88rem; font-weight:500; }
.episodio-fila-img { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.episodio-fila-img-placeholder { width:40px; height:40px; border-radius:6px; background:linear-gradient(135deg,#0d1a2e,#1a2e4a); display:flex; align-items:center; justify-content:center; font-size:1rem; border:1px solid var(--border); }
.episodio-info    { overflow:hidden; }
.episodio-titulo  { font-size:0.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.episodio-meta    { font-size:0.78rem; color:var(--text-secondary); margin-top:2px; display:flex; gap:8px; align-items:center; }
.episodio-duracion{ color:var(--text-muted); font-size:0.82rem; white-space:nowrap; }
.episodio-progreso-mini { width:60px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.episodio-progreso-fill { height:100%; background:var(--accent); border-radius:2px; }
.episodio-fila.reproduciendo .episodio-numero,
.episodio-fila.reproduciendo .episodio-titulo { color:var(--accent); }

/* ── HISTORIAL ──────────────────────────────────── */
.historial-item { display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:10px; background:var(--bg-card); border:1px solid var(--border); margin-bottom:10px; cursor:pointer; transition:all 0.15s; }
.historial-item:hover { background:var(--bg-hover); border-color:#3a3a3a; }
.historial-imagen { width:54px; height:54px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.historial-info   { flex:1; overflow:hidden; }
.historial-titulo { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.historial-meta   { font-size:0.78rem; color:var(--text-secondary); margin-top:3px; }
.historial-badge  { background:var(--bg-hover); border:1px solid var(--border); color:var(--text-secondary); font-size:0.73rem; font-weight:600; padding:4px 10px; border-radius:50px; white-space:nowrap; }
.progreso-bar  { height:3px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
.progreso-fill { height:100%; background:var(--accent); border-radius:2px; }

/* ── PERFIL ──────────────────────────────────────── */
.perfil-layout { display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start; }
.perfil-foto-seccion { display:flex; flex-direction:column; align-items:center; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:28px 20px; }
.perfil-foto { width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--accent); }
.perfil-foto-placeholder { width:120px; height:120px; border-radius:50%; background:var(--bg-hover); border:3px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:3rem; }

/* ── COMENTARIOS ─────────────────────────────────── */
.comentarios-seccion { margin-top:32px; }
.comentario-item { display:flex; gap:14px; padding:16px; border-radius:10px; background:var(--bg-card); border:1px solid var(--border); margin-bottom:10px; }
.comentario-avatar { width:38px; height:38px; border-radius:50%; background:var(--bg-hover); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; overflow:hidden; }
.comentario-avatar img { width:100%; height:100%; object-fit:cover; }
.comentario-body  { flex:1; }
.comentario-autor { font-size:0.85rem; font-weight:700; margin-bottom:4px; }
.comentario-fecha { font-size:0.75rem; color:var(--text-muted); margin-left:8px; font-weight:400; }
.comentario-texto { font-size:0.88rem; color:var(--text-secondary); line-height:1.5; }
.comentario-form  { display:flex; gap:12px; margin-bottom:20px; }
.comentario-form input { flex:1; padding:11px 16px; background:var(--bg-hover); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:0.9rem; transition:all 0.18s; }
.comentario-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,127,249,.15); }

/* ── REACCIONES ─────────────────────────────────── */
.comentario-acciones { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.btn-reaccion { background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:4px 10px; border-radius:50px; font-size:0.78rem; cursor:pointer; transition:all 0.18s; display:inline-flex; align-items:center; gap:4px; }
.btn-reaccion:hover { border-color:var(--accent); color:var(--accent); }
.btn-reaccion.activo-like    { background:rgba(45,127,249,.15); border-color:var(--accent); color:var(--accent); }
.btn-reaccion.activo-dislike { background:rgba(255,77,109,.15); border-color:var(--danger);  color:var(--danger); }
.reacciones-com { display:inline-flex; gap:6px; }

/* ── ADMIN ───────────────────────────────────────── */
.tabla-admin { width:100%; border-collapse:collapse; font-size:0.88rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.tabla-admin th { text-align:left; padding:12px 16px; background:var(--bg-card); color:var(--text-muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; border-bottom:1px solid var(--border); }
.tabla-admin td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tabla-admin tr:last-child td { border-bottom:none; }
.tabla-admin tr:hover td { background:var(--bg-card); }
.badge { display:inline-block; padding:3px 10px; border-radius:50px; font-size:0.73rem; font-weight:700; }
.badge-admin    { background:rgba(45,127,249,.15);  color:var(--accent);          border:1px solid rgba(45,127,249,.3); }
.badge-oyente   { background:rgba(160,160,160,.1);  color:var(--text-secondary);  border:1px solid var(--border); }
.badge-activo   { background:rgba(45,202,115,.15);  color:var(--success);         border:1px solid rgba(45,202,115,.3); }
.badge-inactivo { background:rgba(255,77,109,.15);  color:var(--danger);          border:1px solid rgba(255,77,109,.3); }

/* ── HERO ADMIN LIST ─────────────────────────────── */
.hero-admin-item { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--bg-hover); border:1px solid var(--border); border-radius:8px; margin-bottom:8px; }
.hero-admin-img  { width:80px; height:40px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.hero-admin-info { flex:1; font-size:0.85rem; }
.hero-admin-titulo { font-weight:600; }
.hero-admin-orden  { font-size:0.75rem; color:var(--text-muted); }

/* ── FORM CARD ───────────────────────────────────── */
.form-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:28px 32px; max-width:680px; }
.vista { display:block; }
.vista.oculto { display:none !important; }

/* ── REPRODUCTOR ─────────────────────────────────── */
#reproductor {
    grid-column:2; background:var(--bg-card); border-top:1px solid var(--border);
    display:flex; align-items:center; padding:0 20px; gap:16px;
    height:var(--player-height); box-shadow:0 -4px 24px rgba(0,0,0,.3);
}
.reproductor-info { display:flex; align-items:center; gap:14px; min-width:200px; max-width:240px; }
#rep-imagen { width:52px; height:52px; border-radius:7px; object-fit:cover; flex-shrink:0; border:1px solid var(--border); }
.rep-titulo { font-size:0.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.rep-autor  { font-size:0.77rem; color:var(--text-secondary); margin-top:2px; }
.reproductor-controles { flex:1; display:flex; align-items:center; gap:14px; }
.rep-btn { background:var(--accent); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.18s; box-shadow:0 2px 10px rgba(45,127,249,.4); }
.rep-btn:hover { background:var(--accent-hover); transform:scale(1.06); }
.rep-progreso-wrapper { flex:1; display:flex; align-items:center; gap:10px; font-size:0.73rem; color:var(--text-muted); font-weight:500; }
#rep-progreso { flex:1; -webkit-appearance:none; height:4px; border-radius:2px; background:var(--border); cursor:pointer; accent-color:var(--accent); }
.rep-volumen { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text-muted); min-width:120px; }
#rep-volumen { width:80px; -webkit-appearance:none; height:4px; border-radius:2px; background:var(--border); cursor:pointer; accent-color:var(--accent); }
.rep-btn-album { background:transparent; border:1px solid var(--border); color:var(--text-secondary); width:30px; height:30px; border-radius:8px; font-size:0.85rem; cursor:pointer; transition:all 0.18s; display:flex; align-items:center; justify-content:center; }
.rep-btn-album:hover { border-color:var(--accent); color:var(--accent); }
.rep-cerrar { background:transparent; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:6px; border-radius:6px; transition:all 0.18s; }
.rep-cerrar:hover { color:var(--text-primary); background:var(--bg-hover); }

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#444; }