:root {
  --bg: #12081f;
  --bg-elev: #1b1030;
  --card: #21123a;
  --text: #f7f0ff;
  --muted: #b6a8cf;
  --accent: #8b3dff;
  --accent-hover: #9d58ff;
  --accent-soft: #c59bff;
  --border: #34224f;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(6, 2, 18, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo hidden siempre gana sobre display:flex de .modal/.player-overlay */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(139, 61, 255, .2), transparent 28%),
    radial-gradient(circle at top right, rgba(76, 0, 255, .18), transparent 34%),
    linear-gradient(180deg, #1a0c2a 0%, #12081f 38%, #0d0717 100%);
  color: var(--text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===================== NAVBAR ===================== */
.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 40px;
  background: linear-gradient(180deg, rgba(16,9,28,.96), rgba(16,9,28,.74) 70%, transparent);
  backdrop-filter: blur(6px);
}
.nav-left { display: flex; align-items: center; gap: 32px; }
.logo {
  font-size: 26px; font-weight: 900; letter-spacing: -.08em; color: var(--text);
  text-transform: uppercase;
}
.logo span { color: var(--accent-soft); }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.search-box { display: flex; gap: 8px; }
.search-box input, .search-box select {
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px; border-radius: 8px; font-size: 14px; outline: none;
}
.search-box input { width: 220px; transition: border-color .15s, width .2s; }
.search-box input:focus { border-color: var(--accent); }
.search-box select { cursor: pointer; }
.search-box option { background: var(--bg-elev); }

/* ===================== BOTONES ===================== */
.btn {
  border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  transition: transform .06s, background .15s, opacity .15s; color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #6a2ed8); box-shadow: 0 10px 30px rgba(139, 61, 255, .28); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: rgba(255,255,255,.12); }
.btn-secondary:hover { background: rgba(255,255,255,.25); }
.btn-ghost { background: transparent; border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent-soft); }
.btn-small { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===================== HERO ===================== */
.hero {
  position: relative; height: 64vh; min-height: 460px; display: flex; align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18,8,31,.96) 0%, rgba(18,8,31,.62) 45%, rgba(18,8,31,.18) 70%, transparent 100%),
    linear-gradient(0deg, var(--bg), transparent 58%);
}
.hero-rail {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; pointer-events: none;
}
.hero-nav {
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(14,8,24,.46); color: var(--text); font-size: 28px; pointer-events: auto;
  backdrop-filter: blur(10px); transition: transform .18s, border-color .18s, background .18s;
}
.hero-nav:hover { transform: scale(1.05); border-color: rgba(197,155,255,.7); background: rgba(31,18,58,.72); }
.hero-content {
  /* El hueco de la izquierda es el de la flecha de «anterior»: la rail deja
     28 px de margen y el botón mide 48, así que con el padding de 40 el botón
     caía encima de la etiqueta y del título — se veía mal y, sobre todo, no
     había forma de pulsarlo sin darle al texto. */
  position: relative; z-index: 3; padding: 0 40px 56px 104px; max-width: 760px;
  animation: heroReveal .65s ease both;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 12px;
  border-radius: 999px; background: rgba(139,61,255,.18); border: 1px solid rgba(197,155,255,.28);
  color: #f0e6ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero-content h1 { font-size: 48px; font-weight: 900; line-height: 1.05; margin-bottom: 14px; }
.hero-meta { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.hero-desc { font-size: 16px; line-height: 1.5; color: #dcdce2; margin-bottom: 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-actions { display: flex; gap: 12px; }
.hero-dots { display: flex; gap: 10px; margin-top: 22px; }
.hero-dot {
  width: 10px; height: 10px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.28); transition: transform .18s, background .18s, width .18s;
}
.hero-dot.active { width: 30px; background: var(--accent-soft); }

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== CATÁLOGO ===================== */
.content { padding: 28px 40px 80px; }
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s; position: relative;
  border: 1px solid rgba(255,255,255,.04);
}
.card:hover { transform: translateY(-8px) scale(1.025); box-shadow: var(--shadow); border-color: rgba(197,155,255,.18); z-index: 2; }
.card-poster-wrap { position: relative; }
.card-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #222; }
.card-body { padding: 10px 12px 14px; }
.card-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-genres { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-rating { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.75);
  color: #ffd34e; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.card-type {
  position: absolute; top: 8px; left: 8px; background: rgba(18,8,31,.82);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 7px; border-radius: 6px; text-transform: uppercase;
}
.card-release-status {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 16px); padding: 5px 8px; border-radius: 999px;
  color: #fff; background: rgba(10, 8, 15, .84); backdrop-filter: blur(7px);
  font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .035em;
  text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.card-release-status i, .calendar-event-status i {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor;
}
.card-release-status.is-airing { color: #66eba2; border: 1px solid rgba(102,235,162,.38); }
.card-release-status.is-airing i { animation: statusPulse 1.8s ease-in-out infinite; }
.card-release-status.is-finished { color: #d1ccd9; border: 1px solid rgba(209,204,217,.24); }
.card-release-status.is-upcoming { color: #d4b5ff; border: 1px solid rgba(212,181,255,.34); }
.card-release-status.is-unknown { color: #ffd56a; border: 1px solid rgba(255,213,106,.32); }
@keyframes statusPulse {
  50% { opacity: .35; transform: scale(.75); }
}
.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  animation: revealUp .55s ease forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}
.empty { text-align: center; color: var(--muted); padding: 60px 0; font-size: 16px; }

/* ===================== CALENDARIO ===================== */
.calendar-view { max-width: 1500px; margin: 0 auto; }
.calendar-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 30px;
  margin-bottom: 24px; padding: 26px 28px;
  border: 1px solid rgba(197,155,255,.18); border-radius: 18px;
  background:
    radial-gradient(circle at 88% 15%, rgba(139,61,255,.2), transparent 35%),
    linear-gradient(135deg, rgba(40,23,68,.9), rgba(22,14,36,.9));
}
.calendar-eyebrow {
  display: block; margin-bottom: 7px; color: var(--accent-soft);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.calendar-head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.05; margin-bottom: 10px; }
.calendar-head p { max-width: 720px; color: #c9c3d1; font-size: 14px; line-height: 1.55; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; flex: none; color: var(--muted); font-size: 12px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); }
.calendar-dot.series { background: #68d8ff; }
.calendar-summary { color: var(--muted); font-size: 13px; margin: 0 0 12px 2px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.calendar-day {
  min-height: 220px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; background: rgba(27,16,48,.72);
}
.calendar-day.is-today { border-color: rgba(197,155,255,.64); box-shadow: inset 0 0 0 1px rgba(197,155,255,.12); }
.calendar-day > header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.025);
  text-transform: capitalize;
}
.calendar-day > header span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.calendar-day > header strong { font-size: 12px; }
.calendar-day.is-today > header span, .calendar-day.is-today > header strong { color: var(--accent-soft); }
.calendar-day-events { display: flex; flex-direction: column; gap: 7px; padding: 8px; }
.calendar-day-empty { display: grid; place-items: center; min-height: 145px; color: #716a7b; font-size: 12px; }
.calendar-event {
  width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px;
  position: relative; overflow: hidden; padding: 7px; text-align: left;
  border: 1px solid rgba(197,155,255,.13); border-radius: 10px;
  color: var(--text); background: rgba(139,61,255,.1); cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
.calendar-event.series { border-color: rgba(104,216,255,.14); background: rgba(104,216,255,.07); }
.calendar-event:hover, .calendar-pending-card:hover { transform: translateY(-2px); border-color: rgba(197,155,255,.5); }
.calendar-event img { width: 36px; height: 50px; object-fit: cover; border-radius: 6px; background: #21172d; }
.calendar-event-copy { min-width: 0; display: flex; flex-direction: column; }
.calendar-event-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.3; }
.calendar-event-copy > span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.calendar-event-copy .calendar-event-time { color: var(--accent-soft); font-weight: 700; }
.calendar-event-status {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px;
  width: max-content; color: var(--muted); font-size: 9px; font-weight: 800;
  letter-spacing: .035em; text-transform: uppercase;
}
.calendar-event-status.is-airing { color: #66eba2; }
.calendar-event-status.is-finished { color: #c7c0ce; }
.calendar-event-status.is-upcoming { color: #d4b5ff; }
.calendar-event-status.is-unknown { color: #ffd56a; }
.calendar-secondary { margin-top: 34px; }
.calendar-secondary h3 { font-size: 18px; margin-bottom: 7px; }
.calendar-secondary > p { color: var(--muted); font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.calendar-pending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.calendar-pending-card {
  display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 12px; align-items: center;
  width: 100%; padding: 10px; text-align: left; color: var(--text); cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: rgba(27,16,48,.72);
  transition: transform .15s, border-color .15s;
}
.calendar-pending-card img { width: 54px; height: 72px; object-fit: cover; border-radius: 7px; background: #21172d; }
.calendar-pending-card .calendar-event-copy strong { font-size: 13px; }
.calendar-pending-card .calendar-event-copy > span { font-size: 11px; }
.calendar-pending-card .calendar-event-status { grid-column: auto; white-space: nowrap; }
.calendar-loading { grid-column: 1 / -1; padding: 70px 0; color: var(--muted); text-align: center; }
.calendar-empty { padding: 60px 0; color: var(--muted); text-align: center; }

@media (max-width: 1180px) {
  .calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .calendar-head { align-items: flex-start; flex-direction: column; padding: 22px; }
  .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-pending-card { grid-template-columns: 48px minmax(0,1fr); }
  .calendar-pending-card img { width: 48px; height: 66px; }
  .calendar-pending-card .calendar-event-status { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-day { min-height: 0; }
  .calendar-day-empty { min-height: 62px; }
}

/* ===================== MODALES ===================== */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(2px); }
.modal-card { position: relative; background: var(--bg-elev); border-radius: 14px; width: 100%;
  max-width: 860px; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; }
.modal-close:hover { background: rgba(0,0,0,.85); }

/* Detalle serie */
.detail-hero { position: relative; height: 320px; }
.detail-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.detail-hero-fade { position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--bg-elev) 3%, transparent 60%),
             linear-gradient(90deg, rgba(27,16,48,.88), transparent 60%); }
.detail-hero-info { position: absolute; bottom: 22px; left: 28px; right: 28px; }
.detail-hero-info h2 { font-size: 34px; font-weight: 900; margin-bottom: 10px; }
.detail-meta { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.detail-actions { display: flex; gap: 12px; }
.detail-body { padding: 22px 28px 30px; }
.detail-desc { color: #d6d6dd; line-height: 1.6; margin-bottom: 22px; }
.season-select { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.season-select select { background: var(--card); color: var(--text); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 8px; }
.detail-audio-select { margin-top: -6px; }
.detail-audio-select label { min-width: 72px; color: var(--muted); font-weight: 700; }

/* Capítulos vistos: cuánto llevas de la temporada y los atajos para marcarla */
.season-watched { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); }
.season-watched-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.season-watched-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.season-watched-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.season-watched .btn:disabled { opacity: .4; cursor: default; }
.season-watched .btn:disabled:hover { border-color: var(--border); }
.season-watched-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.season-watched-track span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width .2s; }
.season-watched-upto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); }
.season-watched-upto input { width: 84px; font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }

.episode-list { display: flex; flex-direction: column; gap: 8px; }
.episode-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px;
  background: var(--card); cursor: pointer; transition: background .15s; }
.episode-row:hover { background: #2a1945; }
.episode-num { font-size: 20px; font-weight: 700; color: var(--muted); width: 28px; text-align: center; }
.episode-thumb { width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: #333; flex: none; }
.episode-info { flex: 1; min-width: 0; }
.episode-info h4 { font-size: 15px; margin-bottom: 4px; }
.episode-info p { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.episode-dur { font-size: 12px; color: var(--muted); flex: none; }
.episode-play { font-size: 22px; color: var(--text); flex: none; opacity: .0; transition: opacity .15s; }
.episode-row:hover .episode-play { opacity: 1; }
/* La marca de visto se ve siempre cuando está puesta: apagarla al quitar el
   ratón dejaría un capítulo tachado sin explicación de por qué lo está. */
.episode-watched { flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; line-height: 1;
  background: transparent; color: var(--muted); border: 1px solid var(--border); opacity: .45;
  transition: opacity .15s, background .15s, color .15s, border-color .15s; }
.episode-row:hover .episode-watched { opacity: 1; }
.episode-watched:hover { border-color: var(--accent-soft); color: var(--text); }
.episode-watched.is-on { opacity: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
.episode-row.is-watched { background: #1a0f2c; }
.episode-row.is-watched:hover { background: #241539; }
.episode-row.is-watched .episode-num { color: var(--accent-soft); }
.episode-row.is-watched .episode-thumb { opacity: .38; }
.episode-row.is-watched .episode-info h4 { color: var(--muted); }
.detail-episode-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; flex-wrap: wrap; }
.detail-episode-pagination .page-numbers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-episode-pagination .page-summary { color: var(--muted); font-size: 13px; }

/* ===================== AUTH ===================== */
.auth-card { max-width: 400px; padding: 34px 30px; }
.auth-card h2 { margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 11px 12px; border-radius: 8px; font-size: 15px; outline: none; }
.field input:focus { border-color: var(--accent); }
.auth-error { color: #ff6b6b; font-size: 13px; margin-bottom: 14px; }
.auth-switch { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 600; margin-left: 4px; }

/* Menú usuario */
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 34px; height: 34px; border-radius: 8px; background: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.user-name { font-size: 14px; font-weight: 600; }

/* ===================== REPRODUCTOR ===================== */
.player-overlay { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; }
.player-close { position: absolute; top: 18px; left: 18px; z-index: 5; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; }
.player-close:hover { background: rgba(0,0,0,.8); }
.player-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
.player-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Reproductor de terceros (Provider = 'embed') */
.player-stage .player-embed { width: 100%; height: 100%; border: 0; background: #000; }

.player-title-wrap { position: absolute; top: 22px; left: 74px; right: 74px; z-index: 3; }
.player-title { font-size: 18px; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,.9);
  pointer-events: none; opacity: 1; transition: opacity .3s; }
.player-audio-notice {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  max-width: min(620px, 100%); padding: 8px 12px; border-radius: 999px;
  background: rgba(34, 20, 54, .78); border: 1px solid rgba(184, 130, 255, .36);
  color: #f3e9ff; font-size: 13px; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); backdrop-filter: blur(12px);
}
.player-audio-notice::before {
  content: 'Audio'; padding: 2px 8px; border-radius: 999px;
  background: rgba(139, 92, 246, .24); color: #d9c3ff; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.player-stage.hide-ui .player-title,
.player-stage.hide-ui .player-audio-notice,
.player-stage.hide-ui .player-controls { opacity: 0; pointer-events: none; }
.player-stage.hide-ui { cursor: none; }

.skip-btn { position: absolute; bottom: 120px; right: 40px; z-index: 4;
  background: rgba(255,255,255,.92); color: #111; border: none; padding: 12px 22px;
  border-radius: 8px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.skip-btn:hover { background: #fff; }
.skip-btn.next-ep { background: var(--accent); color: #fff; }
.skip-btn.next-ep:hover { background: var(--accent-hover); }

/* ---- Boton "Ver en TV" de la barra superior ---- */
.btn-tv { display: inline-flex; align-items: center; gap: 7px; }
/* Transmitiendo, tiene que cantar desde cualquier pantalla: es el unico aviso
   de que lo que abras va a sonar en otra habitacion y no aqui. */
.btn-tv.is-casting {
  color: #fff;
  background: rgba(139, 92, 246, .3);
  border-color: rgba(184, 130, 255, .65);
}
@media (max-width: 900px) {
  /* En movil manda el icono: la barra no da para otra etiqueta al lado de
     Donar e Iniciar sesion. */
  .btn-tv .btn-tv-text { display: none; }
}

/* ---- Transmitir a un televisor ---- */
/* Hereda .ctrl, asi que en reposo es un icono mas de la barra. Al transmitir se
   tiñe del color de marca: es la unica pista en la barra de que el video no
   esta sonando aqui, y tiene que verse de un vistazo. */
.cast-btn.is-casting { color: var(--accent); opacity: 1; }
/* Apagado, no oculto: se ve que la funcion existe y al pulsarlo dice por que no
   puede usarse aqui. Un hueco no distingue "no disponible" de "roto". */
.cast-btn.is-unavailable { opacity: .38; }

/* Ocupa el hueco del video, que durante la transmision esta parado y en negro.
   Sin esto la web parece rota justo cuando mas esta funcionando. */
.cast-notice {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
  background: radial-gradient(circle at center, rgba(60, 30, 100, .5), rgba(0, 0, 0, .92));
  color: #fff;
}
.cast-notice svg { color: var(--accent); }
.cast-notice strong { font-size: 18px; font-weight: 600; }
.cast-notice span { font-size: 14px; color: #c9bde0; max-width: 34ch; }

.player-controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 20px 40px 22px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  transition: opacity .3s; }
.progress { position: relative; height: 6px; background: rgba(255,255,255,.25); border-radius: 4px;
  cursor: pointer; margin-bottom: 14px; }
.progress-buffer { position: absolute; height: 100%; background: rgba(255,255,255,.35); border-radius: 4px; }
.progress-played { position: absolute; height: 100%; width: 0; background: var(--accent); border-radius: 4px; }
.progress-played::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; background: var(--accent); border-radius: 50%; }
.progress-marker { position: absolute; top: 0; height: 100%; background: #ffd34e; opacity: .8; border-radius: 2px; }

.controls-row { display: flex; align-items: center; gap: 16px; }
.ctrl { background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1;
  padding: 4px; opacity: .9; transition: opacity .12s, transform .06s; }
.ctrl:hover { opacity: 1; transform: scale(1.12); }
/* En el último capítulo "siguiente" no lleva a ninguna parte: se apaga, porque
   un botón que responde igual estando muerto se pulsa dos veces. */
.ctrl:disabled { opacity: .3; cursor: default; }
.ctrl:disabled:hover { opacity: .3; transform: none; }
.ctrl-spacer { flex: 1; }
.time { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; }
.audio-quick-select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; min-width: 120px; }
.audio-quick-select.is-fallback {
  border-color: rgba(184, 130, 255, .6);
  box-shadow: 0 0 0 1px rgba(184, 130, 255, .22);
  background: rgba(90, 43, 145, .28);
}
.audio-quick-select option { background: #1b1030; }

/* ---- Lista de capítulos del reproductor ---- */
.ep-menu-wrap { position: relative; display: flex; }

.ep-menu-trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 13px; font-weight: 600; color: #fff;
}
/* .ctrl agranda al pasar por encima; en una píldora con texto eso baila. */
.ep-menu-trigger:hover { transform: none; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); }
.ep-menu-trigger[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); }
.ep-menu-caret { transition: transform .18s; }
.ep-menu-trigger[aria-expanded="true"] .ep-menu-caret { transform: rotate(180deg); }
.ep-menu-current { font-variant-numeric: tabular-nums; }

.ep-menu {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 6;
  width: 320px; max-height: min(52vh, 380px);
  display: flex; flex-direction: column; overflow: hidden;
  /* Opaco: por debajo está el mando central, y a poco que translúcido sea se
     le ven las flechas cruzando la lista. */
  background: #180e2c;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; box-shadow: 0 18px 46px rgba(0, 0, 0, .62);
  animation: epMenuIn .14s ease-out;
}
@keyframes epMenuIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ep-menu-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.ep-menu-count { font-size: 12px; font-weight: 500; color: var(--muted); }

.ep-menu-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.ep-menu-list::-webkit-scrollbar { width: 8px; }
.ep-menu-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 4px; }

.ep-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px;
  background: transparent; color: #e9e2f5; text-align: left; font-size: 13px;
  transition: background .12s;
}
.ep-menu-item:hover { background: rgba(255, 255, 255, .09); }
.ep-menu-item.is-current { background: rgba(139, 61, 255, .22); color: #fff; }

.ep-menu-num {
  flex: none; min-width: 26px; height: 26px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ep-menu-item.is-current .ep-menu-num { background: var(--accent); }
/* Un capítulo por línea: los títulos largos se cortan antes que descuadrar. */
.ep-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Barras animadas en el capítulo que suena: se ve de un vistazo dónde vas. */
.ep-menu-now { flex: none; display: none; align-items: flex-end; gap: 2px; height: 13px; }
.ep-menu-item.is-current .ep-menu-now { display: flex; }
.ep-menu-now::before, .ep-menu-now::after {
  content: ''; width: 3px; border-radius: 2px; background: var(--accent-soft);
  animation: epBar .9s ease-in-out infinite;
}
.ep-menu-now::before { height: 60%; }
.ep-menu-now::after { height: 100%; animation-delay: .3s; }
@keyframes epBar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .ep-menu { animation: none; }
  .ep-menu-now::before, .ep-menu-now::after { animation: none; }
}
.volume { display: flex; align-items: center; gap: 8px; }
.volume input[type=range] { width: 90px; accent-color: var(--accent); }

/* ===================== REPRODUCTOR: MANDO CENTRAL ===================== */
/* En escritorio manda la barra de abajo; esto es para el dedo, así que solo
   aparece donde el puntero es grueso o la pantalla es pequeña. */
/* Por debajo de .player-controls (3): el mando ocupa la pantalla entera, así que
   con más z-index sus botones atravesaban la lista de capítulos abierta. */
.player-center {
  position: absolute; inset: 0; z-index: 2; display: none;
  align-items: center; justify-content: center;
  /* Cuatro botones ya no caben con una separación fija: en un teléfono en
     vertical se salían de la pantalla. */
  gap: clamp(16px, 5.5vw, 34px);
  pointer-events: none;
}
.player-center .round-btn { pointer-events: auto; }
.round-btn {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, .45); color: #fff;
  display: grid; place-items: center;
  transition: background .15s, transform .06s;
}
.round-btn:active { transform: scale(.92); background: rgba(0, 0, 0, .7); }
.round-btn:disabled { opacity: .3; cursor: default; }
.round-btn:disabled:active { transform: none; background: rgba(0, 0, 0, .45); }
.round-btn.big { width: 74px; height: 74px; background: rgba(0, 0, 0, .55); }
/* El "10" va dentro de la flecha circular, como en cualquier reproductor. */
.round-btn-label {
  position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 700; letter-spacing: -.02em;
}
.player-stage.hide-ui .player-center { opacity: 0; pointer-events: none; }
.player-center { transition: opacity .3s; }

/* Indicador de carga: los segmentos duran 20 s, así que el primero tarda en
   llegar y sin esto parece que el reproductor se colgó. */
.player-spinner { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.spinner-ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--accent);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Aviso cuando el capítulo no se puede reproducir (normalmente, enlace
   caducado). Ocupa el centro porque es lo único que hay que mirar. */
.player-error {
  position: absolute; inset: 0; z-index: 6; margin: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: rgba(11, 11, 15, .82);
}
.player-error-title { font-size: 19px; font-weight: 700; }
.player-error-desc { font-size: 14px; color: var(--muted); max-width: 420px; line-height: 1.5; }
.player-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ===================== REPRODUCTOR EN MÓVIL ===================== */
@media (max-width: 900px), (pointer: coarse) {
  .player-center { display: flex; }

  /* Lo que se movió al centro sobra abajo, y el volumen lo llevan las teclas
     físicas del teléfono. */
  .player-controls #btnPlay,
  .player-controls #btnNext,
  .player-controls .volume input[type=range] { display: none; }

  .player-controls { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .controls-row { gap: 10px; }
  /* 44 px es el mínimo por debajo del cual el dedo empieza a fallar. */
  .controls-row .ctrl { min-width: 44px; min-height: 44px; font-size: 22px; }
  .time { font-size: 12px; }

  /* El icono basta: en una barra de 360 px, la etiqueta del capítulo empuja al
     resto de controles fuera. La lista abierta sí se ensancha, que es donde de
     verdad se lee el título. */
  .ep-menu-trigger { min-height: 40px; padding: 0 10px; }
  .ep-menu-trigger .ep-menu-current, .ep-menu-trigger .ep-menu-caret { display: none; }
  .ep-menu { width: min(78vw, 320px); max-height: min(56vh, 320px); }
  .ep-menu-item { padding: 11px 10px; }   /* dedo, no ratón */

  /* La barra de progreso es lo más difícil de acertar con el dedo: se engorda y
     se le da un área de toque mayor que su altura visible. */
  .progress { height: 5px; margin-bottom: 12px; }
  .progress::before { content: ''; position: absolute; inset: -14px 0; }
  .progress-played::after { width: 16px; height: 16px; right: -8px; }

  .player-title-wrap {
    top: max(14px, env(safe-area-inset-top)); left: 68px; right: 16px;
  }
  .player-title {
    font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .player-audio-notice {
    max-width: 100%; font-size: 12px; padding: 7px 10px;
  }
  .player-close {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }
  .skip-btn { bottom: 84px; right: max(14px, env(safe-area-inset-right)); padding: 11px 16px; font-size: 14px; }
  .settings-panel { font-size: 14px; }
  .settings-panel label { min-height: 34px; }
}

/* Móvil en horizontal: la pantalla es baja, así que todo se aprieta en vertical
   para que el vídeo siga siendo lo que más ocupa. */
@media (max-height: 480px) and (orientation: landscape) {
  .player-center { gap: 42px; }
  .round-btn { width: 46px; height: 46px; }
  .round-btn.big { width: 62px; height: 62px; }
  .player-controls { padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); }
  .progress { margin-bottom: 8px; }
  .skip-btn { bottom: 62px; }
  .player-title { font-size: 13px; }
}

/* ===================== FOCO / NAVEGACION CON MANDO ===================== */
/*
 * A tres metros de la tele, el foco tiene que verse de un vistazo: no hay
 * puntero que te recuerde donde estas, y perderlo obliga a barrer la pantalla
 * con las flechas hasta reencontrarlo. Por eso es un anillo grueso y del color
 * de marca, no el contorno fino del navegador.
 *
 * :focus-visible y no :focus: asi el anillo sale con teclado y mando pero no al
 * hacer clic con el raton, donde solo seria ruido.
 */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* En las tarjetas el anillo va pegado al borde y se acompaña de un realce: el
   contorno solo se pierde sobre una portada clara. */
.card:focus-visible,
.calendar-event:focus-visible,
.calendar-pending-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, .45);
}

/* Los controles del reproductor son claros sobre el video: el anillo necesita
   un halo oscuro detras para no perderse en una escena luminosa. */
.player-controls :focus-visible,
.player-center :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .55);
}

/* ===================== MODO TELEVISION ===================== */
/*
 * Se activa con ?tv=1 (lo pone tv.js en <html>). A tres metros, la interfaz de
 * escritorio se queda pequeña: no es cuestion de gusto, es que los titulos de
 * las fichas no se leen.
 *
 * Se escala la raiz en vez de reescribir tamaños porque la hoja esta en px de
 * punta a punta —cero rem en 749 medidas— y tocarlos uno a uno seria rehacerla
 * entera con riesgo de romper el diseño de escritorio, que funciona.
 */
/* Aleja en vez de acercar: el navegador del televisor ya dibuja grande de
   partida, asi que lo que falta es que quepa mas catalogo en una pantalla
   ancha. El valor se ajusta con ?zoom=N y queda guardado, porque el bueno
   depende de la tele y de la distancia y no se puede acertar a ciegas. */
html.tv { zoom: var(--tv-zoom, 0.8); }

/* Con la pantalla mas ancha y las portadas mas pequeñas, caben mas columnas.
   Sin esto, alejar solo dejaba franjas vacias a los lados. */
html.tv .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
html.tv .content { padding-left: 46px; padding-right: 46px; }

/* No hay raton que mover: el cursor solo estorba si el navegador lo dibuja. */
html.tv, html.tv * { cursor: none; }

/* El anillo de foco es LA referencia de donde estas, y a esa distancia el de
   escritorio se pierde. Aqui va mas grueso y con halo. */
html.tv :focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(139, 92, 246, .22);
}

/* Sin puntero no hay hover, asi que el realce tiene que venir del foco: sin
   esto la tarjeta enfocada se distingue del resto solo por el contorno. */
html.tv .card:focus-visible {
  transform: translateY(-6px) scale(1.04);
  z-index: 2;
}

/* Deja aire alrededor de lo enfocado al desplazarse, para que nunca quede
   pegado al borde de la pantalla. */
html.tv .grid, html.tv .carousel-track { scroll-padding: 80px; }

/* ===================== TOAST ===================== */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px;
  animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===================== RESPONSIVE ===================== */
/* Con seis accesos en la navegación, el tamaño de escritorio compacto
   necesita recuperar espacio antes de saltar al menú móvil. */
@media (min-width: 821px) and (max-width: 1320px) {
  .navbar { gap: 14px; padding-inline: 24px; }
  .nav-left { gap: 20px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .nav-right { gap: 10px; min-width: 0; }
  .search-box { gap: 6px; min-width: 0; }
  .search-box input { width: 150px; }
  .search-box select { max-width: 120px; }
  .auth-area .btn { padding-inline: 12px; }
}

@media (max-width: 820px) {
  .navbar { flex-wrap: wrap; padding: 12px 18px; gap: 12px; }
  .nav-left { gap: 18px; }
  .search-box input { width: 140px; }
  .hero-content h1 { font-size: 32px; }
  .content { padding: 20px 18px 70px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .carousel { --card-w: 140px; }
  .carousel-track { gap: 12px; }
  .episode-thumb { width: 84px; }
  .player-controls { padding: 14px 16px 16px; }
  .skip-btn { right: 16px; bottom: 100px; }
}

/* Panel de opciones del reproductor (saltos automáticos y auto-avance) */
.player-settings { position: relative; }
.settings-panel {
  position: absolute; bottom: 34px; right: 0; z-index: 5;
  background: rgba(20, 20, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.settings-panel[hidden] { display: none; }
.settings-panel label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #e6e6ea; cursor: pointer;
}
.settings-panel input { accent-color: var(--accent); cursor: pointer; }

/* Secciones por tipo en el inicio (anime / series / películas separados) */
.type-section { margin-bottom: 38px; }
.type-section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.type-section-head h3 { font-size: 21px; margin: 0; color: #f2f2f5; }
.type-count {
  font-size: 12px; color: #b6b6c0; background: rgba(255, 255, 255, 0.08);
  border-radius: 999px; padding: 2px 9px;
}
.type-section-all { margin-left: auto; font-size: 13px; padding: 5px 12px; flex: none; }

.continue-section .type-section-head h3 {
  background: linear-gradient(90deg, #fff, #d4bbff 72%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.continue-empty {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(197,155,255,.14);
  background: linear-gradient(135deg, rgba(35, 19, 60, .96), rgba(22, 12, 38, .96));
  box-shadow: 0 18px 44px rgba(7, 3, 22, .25);
}
.continue-empty-glow {
  position: absolute;
  inset: auto -10% -45px auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139,61,255,.34), transparent 68%);
  pointer-events: none;
}
.continue-empty h4 {
  position: relative;
  z-index: 1;
  font-size: 20px;
  margin-bottom: 8px;
}
.continue-empty p {
  position: relative;
  z-index: 1;
  max-width: 620px;
  color: var(--muted);
  line-height: 1.6;
}
.resume-card {
  background: linear-gradient(180deg, rgba(34,19,59,.95), rgba(27,16,48,.98));
  border: 1px solid rgba(197,155,255,.12);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.resume-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(7, 3, 22, .38);
  border-color: rgba(197,155,255,.28);
}
.resume-poster-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.resume-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(10, 6, 18, .15) 38%, rgba(10, 6, 18, .8) 100%);
}
.resume-type {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(18,8,31,.72); border: 1px solid rgba(197,155,255,.22);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.resume-progress {
  position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px;
  border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden;
}
.resume-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.resume-body { padding: 14px; }
.resume-body h4 { font-size: 15px; margin-bottom: 6px; }
.resume-body p { font-size: 12px; color: var(--muted); line-height: 1.45; }
.resume-meta { margin: 8px 0 14px; }

/* ===================== CARRUSELES DEL INICIO ===================== */
/* Cada tipo enseña sus 10 primeros en una fila que se desliza. La rejilla se
   reserva para el listado completo, donde sí hay que ver todo de golpe. */
.carousel { position: relative; --card-w: 180px; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
  gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* Hueco para que el hover de la tarjeta no quede cortado por el desbordamiento:
     al desplazarse en horizontal el navegador recorta también en vertical. */
  padding: 8px 2px 14px;
  /* Sin esto, al llegar al final del carrusel el gesto sigue en la página (y en
     iOS puede disparar el "volver atrás"). */
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .card { scroll-snap-align: start; }

.carousel-nav {
  position: absolute; top: 0; bottom: 14px; z-index: 3; width: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; color: var(--text); font-size: 30px; line-height: 1;
  background: linear-gradient(90deg, rgba(18,8,31,.92), rgba(18,8,31,0));
  opacity: 0; transition: opacity .18s;
}
.carousel-nav.next { right: 0; transform: scaleX(-1); }
.carousel-nav.prev { left: 0; }
.carousel:hover .carousel-nav { opacity: 1; }
.carousel-nav:hover { background: linear-gradient(90deg, rgba(18,8,31,.98), rgba(18,8,31,.2)); }
.carousel-nav:disabled { opacity: 0 !important; pointer-events: none; }
/* Si cabe entero no hay nada que desplazar. */
.carousel.no-scroll .carousel-nav { display: none; }

/* En táctil se arrastra con el dedo: las flechas sólo estorban. */
@media (hover: none) {
  .carousel-nav { display: none; }
}

/* ===================== LISTADO COMPLETO ===================== */
.browse-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.browse-head .section-title { margin-bottom: 0; min-width: 0; overflow-wrap: anywhere; }
.browse-count { font-size: 13px; color: var(--muted); }

.filter-bar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 14px; margin-bottom: 22px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field span { font-size: 12px; color: var(--muted); }
.filter-field select {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 14px; outline: none; cursor: pointer;
  min-width: 160px; max-width: 100%;
}
.filter-field select:focus { border-color: var(--accent); }
.filter-field option { background: var(--bg-elev); }
.filter-clear { margin-left: auto; font-size: 13px; }

/* ===================== PAGINACIÓN ===================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.page-numbers { display: flex; align-items: center; gap: 6px; }
.page-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.page-btn:hover:not(:disabled) { border-color: var(--text); }
.page-btn.active { background: var(--accent); border-color: var(--accent); }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-gap { color: var(--muted); padding: 0 2px; }
/* El resumen "3 / 12" sustituye a los números cuando no caben. */
.page-summary { display: none; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Teléfonos -------------------------------------------------------- */
/* El corte de 820px cubre tablets. En un móvil de 360px la rejilla sigue
   apretada, la portada se come media pantalla y la ficha se abre como un
   modal centrado, que ahí desperdicia justo el espacio que no sobra. */
@media (max-width: 560px) {
  .navbar { padding: 10px 14px; }
  .nav-left { width: 100%; justify-content: space-between; gap: 12px; }
  /* Las secciones no caben en una línea: se deslizan en vez de romperse. */
  .nav-links { gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-right { width: 100%; }
  .search-box { width: 100%; }
  .search-box input { width: auto; flex: 1; }

  .hero { height: 52vh; min-height: 300px; }
  /* En el móvil el choque era el mismo, pero ahí 104 px de sangrado se comen
     un cuarto de la pantalla: se encoge la flecha y se aparta menos. */
  .hero-rail { padding: 0 10px; }
  .hero-nav { width: 38px; height: 38px; font-size: 22px; }
  .hero-content { padding: 0 18px 28px 58px; max-width: none; }
  .hero-content h1 { font-size: 26px; }
  .hero-desc { font-size: 14px; margin-bottom: 16px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; }

  .content { padding: 18px 14px 64px; }
  .section-title { font-size: 18px; margin-bottom: 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .card-body { padding: 8px 8px 10px; }
  .card-title { font-size: 13px; }
  .card-genres { font-size: 11px; }

  .type-section { margin-bottom: 26px; }
  .type-section-head { gap: 8px; margin-bottom: 10px; }
  .type-section-head h3 { font-size: 17px; }
  .type-section-all { padding: 5px 10px; min-height: 34px; }
  .carousel { --card-w: 116px; }
  .carousel-track { gap: 10px; padding: 6px 2px 10px; }

  /* Los dos filtros ocupan media fila cada uno en vez de apilarse. */
  .filter-bar { gap: 10px; padding: 12px; margin-bottom: 16px; }
  .filter-field { flex: 1 1 140px; }
  .filter-field select { min-width: 0; width: 100%; min-height: 44px; }
  .filter-clear { flex: 1 1 100%; margin-left: 0; }

  /* Con los números no cabe: se deja el paso a paso y el contador. */
  .pagination { gap: 10px; margin-top: 24px; }
  .page-numbers { display: none; }
  .page-summary { display: inline; }
  .page-step { flex: 1 1 0; min-height: 44px; }

  /* La ficha pasa a pantalla completa. */
  .modal { padding: 0; }
  .modal-card { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .detail-hero { height: 200px; }
  .detail-hero-info { left: 16px; right: 16px; bottom: 16px; }
  .detail-hero-info h2 { font-size: 22px; }
  .detail-body { padding: 16px 16px 24px; }
  .detail-actions { flex-wrap: wrap; }
  .detail-actions .btn { flex: 1 1 140px; }

  /* 44 px es el mínimo por debajo del cual un dedo empieza a fallar el toque. */
  .btn { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; top: 10px; right: 10px; }
}

/* En pantalla táctil no hay puntero que "pase por encima": sin esto el efecto
   de hover se queda pegado en la tarjeta después de tocarla. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
}

/* --- iPhone con isla / notch ------------------------------------------ */
/* Dos cosas rompen aquí y no son cosméticas:
   1. En Safari de iOS, 100vh NO es la pantalla visible: incluye la barra del
      navegador, así que un elemento a 100vh se sale por abajo. dvh sí mide lo
      visible de verdad; el vh queda antes como respaldo para navegadores viejos.
   2. La isla dinámica y la barra inferior se comen contenido si no se respeta
      el área segura. */
@media (max-width: 560px) {
  .navbar { padding-top: max(10px, env(safe-area-inset-top)); }
  .content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .modal-card {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
  }
  .detail-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal-close { top: max(10px, env(safe-area-inset-top)); }

  .hero { height: 52dvh; }
}

/* --- Menú de móvil ----------------------------------------------------- */
/* En un teléfono la barra amontonaba buscador, dos filtros y el botón de
   sesión en el mismo renglón. Ahora arriba solo quedan dos iconos y todo eso
   se recoge en un panel que se desliza. */
.nav-icons { display: none; gap: 4px; }
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(0,0,0,.6);
  z-index: 69;
}
.nav-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text); cursor: pointer; border-radius: 8px;
}
.nav-icon:active { background: rgba(255,255,255,.12); }

@media (max-width: 560px) {
  .navbar { flex-wrap: nowrap; }
  .nav-icons { display: flex; }
  .nav-left { width: auto; flex: 1; min-width: 0; }
  .nav-links { display: none; }

  .nav-right {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 60%; max-width: 300px; min-width: 230px;
    flex-direction: column; align-items: stretch; gap: 18px;
    background: var(--bg-elev); border-left: 1px solid var(--border);
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    height: 100dvh;
    z-index: 70; overflow-y: auto;

    /* Cerrado se quita del todo, y esto es lo que de verdad mata la barra de
       desplazamiento horizontal. No basta con `visibility: hidden` ni con
       recortar en <html>: el panel es `fixed`, así que su bloque contenedor es
       el viewport y se escapa de cualquier recorte del documento. Estando
       desplazado un 100% a la derecha, seguía sumando su ancho al área
       desplazable de la página.
       De paso, cerrado tampoco lo alcanzan el tabulador ni el lector de
       pantalla. */
    display: none;
    transform: translateX(100%);
  }

  /* La transición se declara en el estado abierto a propósito: al cerrar
     desaparece con la clase, el panel se oculta en el acto y no queda ni un
     instante asomando fuera de la pantalla. Al abrir, `@starting-style` da el
     punto de partida para que entre deslizándose. */
  body.menu-open .nav-right {
    display: flex;
    transform: none;
    transition: transform .22s ease;
  }
  /* La barra superior crea un stacking context propio por su z-index. Cuando
     el overlay vive en body, si la navbar se queda en z=40 el fondo oscuro
     puede tapar al panel aunque este tenga z=70 dentro de la propia barra.
     Al elevar la navbar solo mientras el menu esta abierto, el drawer queda
     por encima del overlay y vuelve a ser interactivo en movil. */
  body.menu-open .navbar { z-index: 71; }
  @starting-style {
    body.menu-open .nav-right { transform: translateX(100%); }
  }

  /* Fondo oscuro detrás del panel como elemento real para que el cierre por
     toque no dependa de clicks globales, que en móvil eran frágiles. */
  body.menu-open .mobile-menu-backdrop { display: block; }

  /* Dentro del panel las secciones vuelven, en vertical y con sitio para el dedo. */
  /* Ya dentro del panel: en vertical y con sitio para el dedo. */
  .nav-right .nav-links {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
  }
  .nav-right .nav-links a { padding: 12px 6px; font-size: 16px; border-bottom: 1px solid var(--border); }

  .search-box { flex-direction: column; gap: 10px; width: 100%; }
  .search-box input, .search-box select { width: 100%; min-height: 44px; }
  .auth-area, .auth-area .btn { width: 100%; }
}

/* Red de seguridad contra el desbordamiento horizontal: aquí sólo caen los
   casos normales (un título largo sin espacios, una imagen ancha). Al panel del
   menú, que era la causa real de la barra horizontal en móvil, esto NO le
   afecta: es `fixed` y se escapa del recorte del documento, así que se resuelve
   en su propia regla ocultándolo del todo mientras está cerrado.

   El recorte va SOLO en <html>, y con `clip` por delante de `hidden`:
   - en <body>, `overflow-x: hidden` lo convierte en contenedor de scroll y eso
     rompe el `position: sticky` de la barra superior, que dejaba de quedarse
     arriba al bajar;
   - `clip` recorta sin crear contenedor de scroll, así que el sticky sigue
     funcionando. `hidden` queda de respaldo para navegadores sin `clip`.

   Los carruseles sí se desplazan en horizontal, pero cada uno dentro de su
   propia pista: la página en sí, nunca. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
body { max-width: 100%; }

/* ===================== SOLICITAR Y DONAR ===================== */
.nav-action { display: inline-flex; align-items: center; gap: 6px; }
.nav-action svg { flex: none; }

.btn-donate {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 15px; font-size: 14px; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-donate svg { color: var(--accent); transition: transform .15s; }
.btn-donate:hover { background: rgba(139, 61, 255, .14); border-color: var(--accent); }
.btn-donate:hover svg { transform: scale(1.15); }

/* Modal de solicitud */
.request-card, .donate-card { max-width: 460px; padding: 34px 30px; }
/* El reset quita el margen de todo, y la separación del título solo estaba
   definida para .auth-card: sin esto el h2 se comía el párrafo de debajo. */
.request-card h2, .donate-card h2 { margin-bottom: 10px; }
.request-intro, .donate-intro {
  color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 22px;
}
.field-hint { color: var(--muted); font-weight: 400; }
.field select, .field textarea {
  width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 11px 12px; border-radius: 8px; font-size: 15px; outline: none;
  font-family: inherit;
}
.field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.field select:focus, .field textarea:focus { border-color: var(--accent); }

.request-mine { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
.request-mine h3 { font-size: 15px; margin-bottom: 12px; }
.request-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; background: var(--card); margin-bottom: 8px;
}
.request-row-main { flex: 1; min-width: 0; }
.request-row-title {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.request-row-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* El motivo sí se lee entero: es una explicación, no una etiqueta, y cortarla
   con puntos suspensivos la deja inservible. */
.request-row-note {
  font-size: 12px; line-height: 1.45; color: var(--muted);
  margin-top: 6px; padding-left: 9px;
  border-left: 2px solid rgba(255, 255, 255, .16);
}
/* El estado es lo que se busca de un vistazo, así que va en color y no en texto suelto. */
.request-status {
  flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 4px 9px; border-radius: 999px;
}
.request-status[data-status="pendiente"] { background: rgba(255, 211, 78, .16); color: #ffd34e; }
.request-status[data-status="en curso"]  { background: rgba(139, 61, 255, .2);  color: var(--accent-soft); }
.request-status[data-status="listo"]     { background: rgba(80, 220, 140, .16); color: #63dd97; }
.request-status[data-status="rechazada"] { background: rgba(255, 107, 107, .14); color: #ff6b6b; }
.request-drop {
  flex: none; background: transparent; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.request-drop:hover { color: #ff6b6b; background: rgba(255, 107, 107, .1); }
.request-empty { color: var(--muted); font-size: 13px; }
/* Va centrado y sin caja para que se lea como el pie de la lista y no compita
   con «Enviar solicitud», que es el botón que importa en este modal. */
.request-more {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--accent-soft); font-size: 13px; font-weight: 600; cursor: pointer;
}
.request-more:hover { background: rgba(139, 61, 255, .12); }

/* Importes sugeridos */
.donate-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.donate-presets:empty { display: none; }
.donate-preset {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s;
}
.donate-preset:hover { border-color: var(--accent); }
.donate-preset.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.donate-legal { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 14px; text-align: center; }

@media (max-width: 820px) {
  /* En la barra estrecha el texto sobra: el corazón ya se entiende. */
  .btn-donate { padding: 8px 11px; }
  .btn-donate .btn-donate-text { display: none; }
}

/* ===================== MODAL DE BIENVENIDA ===================== */
.welcome-card { max-width: 520px; padding: 34px 30px 26px; }
.welcome-card h2 { margin-bottom: 10px; font-size: 26px; }
.welcome-brand { font-weight: 900; letter-spacing: -.06em; text-transform: uppercase; }
.welcome-brand span { color: var(--accent-soft); }
.welcome-intro { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 22px; }

.welcome-item { display: flex; gap: 14px; margin-bottom: 20px; }
.welcome-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(139, 61, 255, .16); color: var(--accent-soft);
  border: 1px solid rgba(197, 155, 255, .22);
}
.welcome-icon-heart { color: #ff7ba8; background: rgba(255, 123, 168, .13); border-color: rgba(255, 123, 168, .24); }
.welcome-text { flex: 1; min-width: 0; }
.welcome-text h3 { font-size: 15px; margin-bottom: 5px; }
.welcome-text p { font-size: 13.5px; line-height: 1.55; color: #d6d6dd; }
.welcome-text strong { color: var(--text); font-weight: 700; }
/* El matiz que evita la queja después: qué NO promete cada cosa. */
.welcome-note { margin-top: 5px; font-size: 12.5px; color: var(--muted); font-style: italic; }

.welcome-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}
.welcome-actions .btn { flex: 1; min-width: 150px; }

@media (max-width: 560px) {
  .welcome-card { padding: 28px 20px 22px; }
  .welcome-card h2 { font-size: 22px; }
  .welcome-actions .btn { min-width: 100%; }
}