:root {
  --mtg-color: #7a1f2b;
  /* Antes un verde azulado (#0d9488); ahora el mismo azul que la barra lateral, para que los
     botones y acentos de toda la app hagan juego con el menú. */
  --mtg-active: #012169;
  --mtg-active-rgb: 1, 33, 105;
  --onepiece-color: #b3121c;
  --onepiece-active: #ea580c;
  --onepiece-accent: #1f2937;
  --bg: #f5f4f0;
  --panel-bg: #ffffff;
  --sidebar-bg: #012169;
  --sidebar-text: #ffffff;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --text: #1c1c1c;
  --muted: #6b6b6b;
  --radius: 12px;
  --shadow-soft: 0 2px 10px rgba(1, 33, 105, 0.07);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.07);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: width 0.2s ease, padding 0.2s ease;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  /* Altura fija a la ventana y pegada arriba: si el contenido de la derecha es más alto que
     la pantalla (p. ej. la de Perfil), la barra lateral no debe estirarse con él. */
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  padding-left: 8px;
  padding-right: 8px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  gap: 12px;
}

.sidebar.collapsed .brand-name {
  display: none;
}

.app-mode-switch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.app-mode-item {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-mode-item.hidden {
  display: none;
}

.app-mode-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-text);
}

.app-mode-item.active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--sidebar-text);
}

.tcg-switch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tcg-switch.hidden {
  display: none;
}

.tcg-select {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-text);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tcg-select:hover {
  background: rgba(255, 255, 255, 0.16);
}

.tcg-select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 1px;
}

.tcg-select option {
  color: var(--text);
  background: var(--panel-bg);
}

.item-icon {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.item-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .item-icon {
  display: flex;
}

.sidebar.collapsed .item-label {
  display: none;
}

.sidebar.collapsed .section-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.section-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 18px;
}

.section-menu.hidden {
  display: none;
}

.section-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.section-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-text);
}

.section-item.active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--sidebar-text);
  font-weight: 600;
}

/* ---------- Sidebar toggle ---------- */

.sidebar-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
}

.sidebar-toggle span {
  display: block;
  width: 14px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* ---------- Content ---------- */

.content {
  flex: 1;
  padding: 72px 32px 48px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.tcg-panel,
.app-mode-panel {
  display: none;
}

.tcg-panel.active,
.app-mode-panel.active {
  display: block;
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-hero {
  border-radius: 16px;
  padding: 40px 32px;
  color: #fff;
  margin-bottom: 24px;
}

.panel-hero h1 {
  margin: 0 0 8px;
  font-size: 2rem;
}

.panel-hero p {
  margin: 0;
  opacity: 0.9;
}

.mtg-hero {
  background: linear-gradient(135deg, var(--mtg-color), #3a0d14);
}

.onepiece-hero {
  background: linear-gradient(135deg, var(--onepiece-color), var(--onepiece-accent));
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.panel-card {
  background: var(--panel-bg);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}

.panel-card h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.panel-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---------- Utilidades ---------- */

.hidden {
  display: none !important;
}

/* ---------- Login ---------- */

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-bg);
  z-index: 1000;
}

.login-card {
  background: #fff;
  border-radius: 18px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  color: var(--text);
}

.login-subtitle {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.9rem;
}

.login-card label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 14px;
}

.login-card input {
  margin-top: 6px;
  padding: 11px 13px;
  border: 1px solid #ddd;
  border-radius: 9px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card input:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.login-error {
  min-height: 18px;
  color: #b3261e;
  font-size: 0.82rem;
  margin: 10px 0 0;
}

.login-card .btn-primary {
  margin-top: 14px;
  width: 100%;
  padding: 11px;
}

.login-card .btn-primary:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ---------- Pie de la barra lateral (usuario / logout) ---------- */

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-user-email {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout-btn,
.sidebar-profile-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.sidebar-logout-btn:hover,
.sidebar-profile-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.sidebar.collapsed .sidebar-user-email {
  display: none;
}

.sidebar.collapsed .sidebar-logout-btn,
.sidebar.collapsed .sidebar-profile-btn {
  text-align: center;
  padding: 8px 4px;
}

/* ---------- Pantalla de Perfil ---------- */

#profileView {
  flex-direction: column;
  gap: 20px;
}

/* #profileView es un id, con más especificidad que ".tcg-panel"; sin este añadido se veía
   siempre en pantalla (display:flex) aunque no tuviera la clase "active". */
#profileView.active {
  display: flex;
}

.profile-view-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-view-header h2 {
  margin: 0;
}

/* Perfil se organiza por categorías (TCGs, Seguridad, y las que se añadan más adelante):
   un submenú a la izquierda y, a la derecha, solo el contenido de la categoría activa. */
.profile-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.profile-categories {
  flex-shrink: 0;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-category-item {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.profile-category-item:hover {
  background: rgba(var(--mtg-active-rgb), 0.07);
  color: var(--text);
}

.profile-category-item.active {
  background: var(--mtg-active);
  color: #fff;
  box-shadow: 0 2px 8px rgba(1, 33, 105, 0.25);
}

.profile-content {
  flex: 1;
  min-width: 0;
}

.profile-category-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.profile-category-panel.active {
  display: flex;
}

.profile-section h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

/* Cuando un apartado agrupa más de un bloque de configuración (por ejemplo, TCGs junto con la
   preferencia de Biblioteca), este separador marca dónde empieza el siguiente bloque. */
.profile-section h3:not(:first-child) {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-section-subtitle {
  margin: 0 0 48px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.profile-tcg-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 46px;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.profile-tcg-option {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  box-sizing: border-box;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  border: 1px solid #e3e3e8;
  border-radius: 8px;
  padding: 0 14px;
  transition: border-color 0.15s ease;
}

.profile-tcg-option:hover {
  border-color: rgba(var(--mtg-active-rgb), 0.5);
}

/* Checkbox redondo con marca de verificación en vez del cuadrado nativo del navegador. Solo
   para listas de opciones donde se elige entre varias (TCGs, Funcionalidades); un ajuste suelto
   tipo interruptor (como "añadir a la biblioteca automáticamente") usa .profile-toggle-option. */
.profile-tcg-option input {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #d7d7dd;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.profile-tcg-option input:checked {
  border-color: var(--mtg-active);
  background-color: var(--mtg-active);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}

/* Ajuste suelto tipo on/off (no es parte de una lista de opciones): checkbox normal, sin caja. */
.profile-toggle-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  cursor: pointer;
}

.profile-toggle-option input {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--mtg-active);
}

.profile-section label:not(.profile-tcg-option) {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}

.profile-section label:not(.profile-tcg-option):not(:first-child) {
  margin-top: 16px;
}

.profile-section select,
.profile-section input[type="password"],
.profile-section input[type="text"] {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 9px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-section input[type="password"],
.profile-section select {
  width: 33%;
}

.profile-section input[type="text"] {
  width: 50%;
}

.profile-section select:focus,
.profile-section input[type="password"]:focus,
.profile-section input[type="text"]:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.profile-section .btn-primary {
  margin-top: 18px;
}

.profile-success {
  min-height: 18px;
  color: #1a7f37;
  font-size: 0.82rem;
  margin: 10px 0 0;
}

.empty-msg {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 16px;
}

.btn-primary {
  background: var(--mtg-active);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(1, 33, 105, 0.15);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(1, 33, 105, 0.25);
}

.btn-primary:active {
  transform: translateY(0);
  filter: brightness(1.05);
}

.btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border: none;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.09);
}

.btn-danger {
  background: #a33636;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.btn-danger:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-link {
  background: none;
  border: none;
  color: var(--mtg-active);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  transition: opacity 0.15s ease;
}

.btn-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* ---------- Constructor de mazos ---------- */

.deck-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.deck-list-header h2 {
  margin: 0;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.deck-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--panel-bg);
  border: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.deck-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(1, 33, 105, 0.14);
}

.deck-card-thumb {
  width: 100%;
  aspect-ratio: 5 / 4;
  background: #e8e6e0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.deck-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.deck-card-thumb-placeholder {
  font-size: 2rem;
  color: var(--muted);
}

.deck-card-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.deck-card-info h3 {
  margin: 0;
  font-size: 0.85rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-type-badge {
  display: inline-block;
  background: var(--mtg-active);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.deck-card-count {
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: 8px;
}

.deck-card-count.complete {
  color: var(--mtg-active);
  font-weight: 700;
}

/* Modal: nuevo mazo */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}

.modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 60px rgba(1, 33, 105, 0.2);
}

.modal h3 {
  margin: 0 0 6px;
}

.modal label {
  font-size: 0.85rem;
  font-weight: 600;
}

.modal input[type="text"] {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal input[type="text"]:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.modal textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal textarea:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

/* ---------- Libros: modal "Editar datos" (título, autor, portada, ISBN, idioma, páginas, sinopsis) ---------- */

.book-edit-modal {
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
}

.book-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.book-edit-form label {
  display: block;
  margin-bottom: 4px;
}

.book-edit-form input,
.book-edit-form textarea {
  width: 100%;
}

.book-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.book-edit-cover-preview-wrap {
  display: flex;
  justify-content: center;
}

.book-edit-cover-preview {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(1, 33, 105, 0.15);
}

.book-edit-cover-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.book-edit-cover-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

.book-edit-cover-row .btn-secondary {
  flex-shrink: 0;
  white-space: nowrap;
}

.deck-type-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Botón "Marcar como finalizado" del modal de páginas de lectura: en su propia fila a todo lo
   ancho (el modal es demasiado estrecho para meterlo junto a Cancelar/Guardar sin que se rompa),
   con un estilo de contorno para que se note que es una acción distinta (y más importante) que
   Cancelar, pero sin competir con el Guardar (relleno) como acción principal del modal. */
.btn-finish-reading {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--mtg-active);
  color: var(--mtg-active);
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-finish-reading:hover {
  background: rgba(var(--mtg-active-rgb), 0.08);
}

.btn-finish-reading:active {
  transform: translateY(0);
}

/* Detalle de mazo */

.deck-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.deck-detail-header h2 {
  margin: 0 0 6px;
  display: inline;
}

.commander-slot {
  margin-bottom: 24px;
}

.commander-slot:empty {
  margin-bottom: 0;
}

.commander-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mtg-active);
  font-weight: 700;
}

.commander-missing {
  background: #fff3e6;
  border: 1px dashed #e0a458;
  border-radius: 12px;
  padding: 16px;
}

.commander-missing .commander-label {
  color: #b5651d;
}

.commander-missing p {
  margin: 6px 0 0;
  color: #7a5230;
  font-size: 0.9rem;
}

.deck-card-search {
  margin-bottom: 24px;
}

.deck-card-search label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.search-row {
  display: flex;
  gap: 10px;
}

.search-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-row input:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.card-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.search-result-card {
  border: none;
  background: var(--panel-bg);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: outline 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.search-result-card img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.search-result-card span {
  font-size: 0.75rem;
  line-height: 1.2;
}

.search-result-card:hover {
  outline: 2px solid var(--mtg-active);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 33, 105, 0.15);
}

.search-status {
  color: var(--muted);
  font-size: 0.9rem;
  grid-column: 1 / -1;
}

.search-status-detail {
  font-size: 0.75rem;
  font-style: italic;
  margin-top: -8px;
}

.deck-card-group {
  margin-bottom: 20px;
}

.deck-card-list-title {
  margin: 0 0 10px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.commander-change-link {
  background: none;
  border: none;
  color: var(--mtg-active);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.commander-change-link:hover {
  text-decoration: underline;
}

.deck-card-rows {
  display: flex;
  flex-direction: column;
}

.deck-card-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 4px;
}

.deck-card-row-qty,
.deck-card-row-mana,
.row-menu {
  margin-top: 1px;
}

.deck-card-row-qty {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}

/* Campo numérico editable para tierras básicas: mismo tamaño de letra que el resto de
   cantidades (el "font: inherit" que tenía antes se lo cargaba, por eso se veía más grande). */
.deck-card-row-qty--land {
  font-family: inherit;
  border: none;
  background: transparent;
  padding: 1px 0;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.deck-card-row-qty--land:hover,
.deck-card-row-qty--land:focus {
  background: rgba(var(--mtg-active-rgb), 0.12);
  color: var(--mtg-active);
  outline: none;
}

.deck-card-row-qty--land::-webkit-inner-spin-button,
.deck-card-row-qty--land::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.deck-card-row-qty--land {
  -moz-appearance: textfield;
}

.deck-card-row-name {
  position: relative;
  font-weight: 600;
  font-size: 0.74rem;
  color: #4a4a4a;
  flex: 1;
  overflow-wrap: break-word;
}

.deck-card-row-mana {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.deck-card-row-price {
  flex-shrink: 0;
  width: 52px;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.foil-star {
  display: inline-flex;
  vertical-align: -2px;
}

.foil-star-icon {
  width: 13px;
  height: 13px;
  fill: #ffcc22;
  stroke: #e0a300;
  stroke-width: 0.6;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}

.mana-symbol {
  width: 13px;
  height: 13px;
  display: block;
}

.mana-symbol-fallback {
  font-size: 0.75rem;
  color: var(--muted);
}

.mana-face-separator {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 2px;
}

.row-menu {
  position: relative;
  flex-shrink: 0;
}

/* Arriba a la derecha, sobre la imagen. Como el botón se queda oculto hasta que se pasa el ratón
   por la carta (o si su desplegable está abierto, para que no desaparezca de golpe mientras se
   está usando), ya no tapa la información de la esquina cuando no se está usando. */
.row-menu--grid {
  position: absolute;
  top: 6px;
  right: 6px;
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.deck-grid-card:hover .row-menu--grid,
.media-result-card:hover .row-menu--grid,
.row-menu--grid:focus-within,
.row-menu--grid:has(.row-menu-dropdown:not(.hidden)) {
  opacity: 1;
}

.row-menu-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.row-menu--grid .row-menu-btn {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.row-menu-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.row-menu--grid .row-menu-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.row-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  min-width: 130px;
  z-index: 40;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.row-menu-dropdown.hidden {
  display: none;
}

.row-menu-item {
  border: none;
  background: none;
  text-align: left;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.row-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.row-menu-item.danger {
  color: #a33;
}

.row-menu-item-foil {
  display: flex;
  align-items: center;
  gap: 6px;
}

.foil-menu-star-icon {
  width: 15px;
  height: 15px;
  fill: #c7c7c7;
  stroke: #9a9a9a;
  stroke-width: 1;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.foil-menu-star-icon.active {
  fill: #ffcc22;
  stroke: #e0a300;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
}

.deck-card-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.deck-card-list-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deck-zone-hint {
  margin: -6px 0 14px;
  font-size: 0.8rem;
  color: var(--muted);
  background: rgba(var(--mtg-active-rgb), 0.06);
  border: 1px solid rgba(var(--mtg-active-rgb), 0.15);
  border-radius: 8px;
  padding: 8px 12px;
}

.view-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.view-toggle-btn {
  border: none;
  background: var(--panel-bg);
  color: var(--muted);
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.view-toggle-btn.active {
  background: var(--mtg-active);
  color: #fff;
}

.deck-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.deck-grid-card {
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
}

.deck-grid-card:hover {
  box-shadow: 0 6px 16px rgba(1, 33, 105, 0.14);
}

/* Contenedor de la imagen: el menú de tres puntos (.row-menu--grid) se ancla a esta caja, no a
   la carta entera, para que quede pegado a la esquina de la ilustración y no se mueva según haya
   o no fila de precio/cantidad debajo. */
.deck-grid-card-img-wrap {
  position: relative;
}

.deck-grid-card img {
  width: 100%;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.deck-grid-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px 2px;
}

.deck-grid-card-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.deck-grid-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-grid-card-qty {
  font-size: 0.72rem;
  color: var(--muted);
  flex-shrink: 0;
}

.deck-grid-card-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 2px 6px 2px 8px;
  flex-shrink: 0;
}

.deck-grid-card-qty-x {
  font-size: 0.72rem;
  color: var(--muted);
}

/* Campo numérico editable: mismo tamaño de letra que el resto ("font: inherit" se lo
   cargaba antes, igual que en la vista de tabla). */
.deck-grid-card-qty--land {
  width: 26px;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--muted);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.deck-grid-card-qty--land:focus {
  color: var(--mtg-active);
  outline: none;
}

.deck-grid-card-qty--land::-webkit-inner-spin-button,
.deck-grid-card-qty--land::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.deck-grid-card-qty--land {
  -moz-appearance: textfield;
}

/* ---------- Modal de versiones de carta ---------- */

.version-modal {
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.version-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.version-modal-header h3 {
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.modal-close-btn:hover {
  color: var(--text);
}

.version-search-input {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  width: 100%;
}

.version-modal-body {
  overflow-y: auto;
  margin-top: 12px;
}

.version-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.version-option {
  border: none;
  background: var(--panel-bg);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: outline 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.version-option img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.version-option span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.2;
}

.version-option:hover {
  outline: 2px solid var(--mtg-active);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 33, 105, 0.15);
}

/* ---------- Layout de dos columnas: vista previa + listado ---------- */

.deck-list-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.deck-preview-panel {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

.deck-preview-panel img {
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.deck-preview-image-wrap {
  position: relative;
}

/* Botón para cartas de doble cara: cambia entre la cara delantera y la trasera. */
.deck-preview-flip-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(1, 33, 105, 0.85);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.15s ease;
}

.deck-preview-flip-btn:hover {
  background: var(--mtg-active);
  transform: translateX(-50%) scale(1.06);
}

.deck-preview-price {
  margin-top: 10px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.deck-preview-placeholder {
  aspect-ratio: 63 / 88;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 0.85rem;
}

.deck-list-main {
  flex: 1;
  min-width: 0;
}

.deck-list-layout.grid-mode .deck-preview-panel {
  display: none;
}

/* El listado en vista de tabla se reparte en columnas para aprovechar el ancho disponible;
   cada grupo de tipo se mantiene entero dentro de una columna. */
.deck-card-list.multi-column {
  column-width: 320px;
  column-count: 2;
  column-gap: 28px;
}

.deck-card-list.multi-column .deck-card-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ---------- Biblioteca ---------- */

.library-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.library-header h2 {
  margin: 0;
}

.library-total {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mtg-active);
  background: rgba(var(--mtg-active-rgb), 0.08);
  padding: 4px 12px;
  border-radius: 999px;
}

.library-header .btn-primary {
  margin-left: auto;
}

.library-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.library-search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.library-search-input:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.library-color-filter {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.color-filter-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  opacity: 0.45;
  color: #2a2a2a;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.color-filter-btn:hover {
  opacity: 0.75;
}

.color-filter-btn.active {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mtg-active);
}

.color-filter-btn--w { background: #f8f6ce; }
.color-filter-btn--u { background: #a7d0ea; }
.color-filter-btn--b { background: #b0a89e; }
.color-filter-btn--r { background: #eba490; }
.color-filter-btn--g { background: #a3c9a0; }

.library-type-select {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #ddd;
  font-size: 0.85rem;
  background: #fff;
  min-width: 160px;
  flex-shrink: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.library-type-select:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

/* Grid responsivo (no un número fijo de columnas): con el ancho de la app tal cual, encajan 8
   por fila (32 cartas de LIBRARY_PAGE_SIZE en library.js quedan en 4 filas), pero en pantallas
   más anchas o más estrechas el número de columnas se ajusta solo. */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

/* Todas las cartas con el mismo tamaño, aunque el arte original de cada edición tenga
   proporciones ligeramente distintas (se recorta para llenar el hueco, no se deforma). */
.library-grid .deck-grid-card img {
  aspect-ratio: 63 / 88;
  object-fit: cover;
}

.library-card-name {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En Biblioteca, después del nombre viene la fila de cantidad (.deck-grid-card-info), que ya
   aporta espacio hasta el borde inferior. En Favoritos el nombre es lo último de la tarjeta, así
   que necesita su propio hueco para no quedar pegado al borde. */
#wishlistGrid .library-card-name {
  padding-bottom: 14px;
}

/* Fila de cantidad+importe de Biblioteca: a diferencia de .deck-grid-card-info de Mis mazos (que
   centra la cantidad con "justify-content: space-between" y un span vacío delante), aquí va todo
   pegado a la izquierda, debajo del nombre. Selector más específico que el de Mis mazos para no
   afectarle (mismo truco que usa el resto de la hoja: misma especificidad, pero declarado después
   en el archivo, así que gana la cascada). */
.library-card-info {
  justify-content: flex-start;
  gap: 8px;
  padding-bottom: 10px;
}

.library-card-total-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Libros / Películas / Series (buscadores, sin biblioteca propia todavía) ---------- */

.media-search-view h2 {
  margin: 0 0 20px;
}

.media-search-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.media-search-toolbar input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 9px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.media-search-toolbar input[type="text"]:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.media-search-toolbar input[type="text"]:disabled {
  background: #f2f2f2;
  cursor: not-allowed;
}

.media-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.media-result-card {
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding-bottom: 10px;
}

.media-result-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.media-result-card .search-result-placeholder {
  aspect-ratio: 2 / 3;
}

.media-result-title {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 10px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* En Películas (Pendientes/Vistas), Series (Pendientes/Viendo/Vistas) y Libros (Pendientes/
   Leyendo/Leídos) el título se corta siempre a una sola línea, para que todas las tarjetas
   queden a la misma altura aunque el nombre sea largo. */
#peliculasGridPendiente .media-result-title,
#peliculasGridVista .media-result-title,
#seriesGridPendiente .media-result-title,
#seriesGridViendo .media-result-title,
#seriesGridVista .media-result-title,
#librosGridPendiente .media-result-title,
#librosGridLeyendo .media-result-title,
#librosGridLeido .media-result-title {
  -webkit-line-clamp: 1;
}

.media-result-subtitle {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0 10px 4px;
}

/* Dónde se puede ver: logo circular de cada plataforma (o una claqueta si TMDB no tiene ninguna
   plataforma para España, se entiende que de momento solo está en cines). Puede haber varias
   plataformas, van una al lado de otra. Se usa tanto debajo de la fecha en la tarjeta (más
   pequeño) como dentro de la ficha/modal "Ver ficha" (más grande, con texto). */
.media-result-availability {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.media-result-availability-slot {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 6px;
  margin: 6px 10px 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 26px;
}

.media-result-availability-slot .media-provider-logo,
.media-result-availability-slot .media-cinema-badge {
  width: 26px;
  height: 26px;
}

.media-result-availability-slot .media-cinema-badge .cinema-icon {
  width: 14px;
  height: 14px;
}

.media-provider-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Claqueta de "solo en cines": mismo tratamiento circular que los logos de plataforma, para que
   quede integrada al lado de ellos en vez de verse como un icono suelto. */
.media-cinema-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #2b2b2b;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.cinema-icon {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

/* ---------- Ficha de película (modal "Ver ficha") ---------- */

/* Tamaño fijo siempre (no depende de cuánto texto tenga cada película), así el cartel queda
   igual de grande en todas las fichas; si el contenido no cabe, se desplaza dentro del modal. */
.movie-details-modal {
  width: 100%;
  max-width: 640px;
  height: 560px;
  display: flex;
  flex-direction: column;
}

.movie-details-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.movie-details-layout {
  display: flex;
  gap: 20px;
}

/* Ancho Y alto fijos (no solo el ancho): antes el alto era "auto", así que un cartel de película
   (proporción 2:3, siempre igual en TMDB) y una portada de libro (proporción muy variable en Open
   Library, según la edición) salían con un tamaño distinto cada vez. Con "object-fit: cover" la
   imagen se recorta para llenar siempre la misma caja, sea cual sea su proporción original. */
.movie-details-poster {
  width: 200px;
  height: 300px;
  flex-shrink: 0;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  background: #e6e6ea;
}

/* Misma caja pero vacía, para cuando no hay cartel/portada: así la ficha no cambia de forma según
   tenga imagen o no. */
.movie-details-poster-placeholder {
  width: 200px;
  height: 300px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #e6e6ea;
}

/* En la tarjeta de una película, el cartel se puede clicar para abrir la ficha (igual que el
   menú de tres puntos). */
.media-result-card .deck-grid-card-img-wrap {
  cursor: pointer;
}

.movie-details-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.movie-details-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.movie-details-overview {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.movie-details-availability-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

/* ---------- Ficha de película "grande" (media-sheet) ----------
   Sustituye al modal.movie-details-modal de arriba SOLO en Películas (movieDetailsModal en
   index.html). Los nombres de clase son genéricos ("media-sheet-*", no "movie-*") a propósito:
   la idea es reutilizar este mismo componente en Series/Libros más adelante, cuando encaje igual
   de bien; por ahora solo está conectado desde js/features/movies/movies-view.js.
   Estructura: overlay (.modal-overlay, ya existente) > .modal.media-sheet > .media-sheet-body,
   con dos bloques dentro del body: .media-sheet-hero (póster+dónde verla / título+sinopsis /
   acciones+valoración) y, debajo, .media-sheet-cast (solo el reparto; ver comentario de
   .media-sheet-pill-grid más abajo sobre por qué se recorta siempre a dos filas). */

.media-sheet {
  width: 100%;
  max-width: 920px;
  max-height: 88vh;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.media-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.media-sheet-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

.media-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 32px 26px;
}

/* Fila principal: póster+dónde verla / título+sinopsis / acciones+valoración, en tres columnas
   (como una ficha de Letterboxd); en pantallas estrechas se apilan en una sola columna. */
.media-sheet-hero {
  display: grid;
  grid-template-columns: 190px 1fr 230px;
  gap: 28px;
}

@media (max-width: 720px) {
  .media-sheet-hero {
    grid-template-columns: 1fr;
  }
}

.media-sheet-poster-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.media-sheet-poster {
  width: 190px;
  height: 285px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  background: #e6e6ea;
  box-shadow: var(--shadow-card);
}

.media-sheet-poster-placeholder {
  width: 190px;
  height: 285px;
  border-radius: 10px;
  background: #e6e6ea;
}

.media-sheet-where h4 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.media-sheet-where-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-sheet-where-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.media-sheet-main {
  min-width: 0;
}

.media-sheet-title {
  margin: 0 0 4px;
  font-size: 1.6rem;
  line-height: 1.2;
}

.media-sheet-subtitle {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.media-sheet-subtitle strong {
  color: var(--text);
}

.media-sheet-tagline {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mtg-active);
}

.media-sheet-overview {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.media-sheet-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  /* El botón de cerrar (.media-sheet-close) flota en la esquina superior derecha de TODA la
     ficha, justo encima de esta columna (es la que queda debajo de esa esquina); sin este hueco
     se solapaba con el primer botón de .media-sheet-actions ("Marcar como vista"). */
  padding-top: 26px;
}

.media-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-sheet-actions .btn-primary,
.media-sheet-actions .btn-secondary,
.media-sheet-actions .btn-danger {
  width: 100%;
}

.media-sheet-watched-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  background: rgba(1, 33, 105, 0.08);
  color: var(--mtg-active);
  font-size: 0.85rem;
  font-weight: 600;
}

.media-sheet-rating-box {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.media-sheet-rating-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--mtg-active);
}

.media-sheet-rating-box .star-rating {
  justify-content: center;
  margin: 6px 0 0;
  padding: 0;
  border-top: none;
}

/* En la ficha, las estrellas centradas a su propio tamaño dejaban mucho hueco vacío a los lados
   de .media-sheet-rating-box (que ocupa toda la columna lateral, 230px en escritorio). En vez de
   centrar un bloque estrecho, .star-picker pasa a ocupar el 100% del ancho y reparte las 10
   estrellas con space-between: así llegan de borde a borde sea cual sea el ancho real de la caja
   (incluido en responsive, cuando .media-sheet-hero pasa a una sola columna y esta caja se
   ensancha mucho más, ver el media query de .media-sheet-hero), sin depender de un ancho fijo en
   píxeles. El tamaño de cada estrella también sube, a juego con lo grande que queda la caja. */
.media-sheet-rating-box .star-picker {
  width: 100%;
  justify-content: space-between;
  gap: 0;
}

.media-sheet-rating-box .star-picker-star {
  font-size: 1.3rem;
  padding: 0;
}

.media-sheet-rating-count {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}

.media-sheet-cast {
  margin-top: 26px;
}

.media-sheet-cast-title {
  margin: 0 0 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* Reparto en pills de altura fija (.media-sheet-pill), recortado siempre a dos filas exactas:
   como cada pill mide siempre lo mismo (42px), dos filas + su separación son siempre 92px
   (2 × 42px + 8px de gap) sea cual sea el reparto que traiga la película, así la ficha no cambia
   de tamaño de una película a otra. Los nombres/personajes muy largos se cortan con "…" en vez de
   ensanchar la pill (max-width + text-overflow), para no romper el recuento de filas. */
.media-sheet-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 92px;
  overflow: hidden;
}

.media-sheet-pill {
  height: 42px;
  box-sizing: border-box;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  background: var(--bg);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.85rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-sheet-pill-role {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Ficha de libro: lista de datos ----------
   Sustituye al subtítulo + línea de meta + bloque de fechas: una línea por dato ("Etiqueta:
   valor"), con la etiqueta en negrita (.media-sheet-info-row strong) y el valor en peso normal.
   Solo la usa la ficha de Libros por ahora, con nombre genérico por si hiciera falta en otra ficha
   más adelante. */
.media-sheet-info-list {
  margin: 0 0 12px;
}

.media-sheet-info-row {
  margin: 0 0 6px;
  font-size: 0.88rem;
}

.media-sheet-info-row strong {
  font-weight: 700;
}

/* ---------- Películas: pestañas Pendientes / Vistas ---------- */

.media-status-panel {
  display: none;
}

.media-status-panel.active {
  display: block;
  animation: fade-in 0.2s ease;
}

.media-status-panel h2 {
  margin: 0 0 20px;
}

/* Cantidad editable de cada carta de la biblioteca (aquí se puede editar en cualquier carta,
   no solo en las tierras básicas como en los mazos). Ancho fijo para dos dígitos (nunca se llega
   a tener 100 copias de una carta): así el campo no ocupa más de lo necesario. */
.library-card-qty {
  width: 18px;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--muted);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.library-card-qty:hover,
.library-card-qty:focus {
  color: var(--mtg-active);
  outline: none;
}

.library-card-qty::-webkit-inner-spin-button,
.library-card-qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.library-card-qty {
  -moz-appearance: textfield;
}

.library-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 20px;
}

.library-page-btn {
  min-width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.library-page-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}

.library-page-btn.active {
  background: var(--mtg-active);
  color: #fff;
  border-color: var(--mtg-active);
}

.library-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- Favoritos: modal "Marcar como comprada" / ficha de Biblioteca ---------- */
/* Formulario compartido por el modal de compra (Favoritos) y la ficha de una carta (Biblioteca):
   cantidad, precio, "sin precio"/"de un sobre" y fecha. */

.purchase-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Fila de "Páginas de lectura": el input de páginas leídas y, a su derecha, el total del libro
   como texto suelto (no es un input: el total no se edita aquí, se corrige cambiando de edición). */
.pages-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pages-progress-row input[type="number"] {
  flex: 1;
  min-width: 0;
}

.pages-progress-total {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.modal input[type="number"],
.modal input[type="date"] {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal input[type="number"]:focus,
.modal input[type="date"]:focus {
  outline: none;
  border-color: var(--mtg-active);
  box-shadow: 0 0 0 3px rgba(var(--mtg-active-rgb), 0.15);
}

.modal input[type="number"]:disabled {
  background: #f2f2f2;
  color: var(--muted);
  cursor: not-allowed;
}

.purchase-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.purchase-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--mtg-active);
  cursor: pointer;
}

/* Ficha de una carta de Biblioteca ("Ver ficha"): imagen + formulario de compra al lado, tamaño
   flexible (no fijo como el de las películas, porque aquí no hace falta encajar un cartel). */
.library-details-modal {
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.library-details-layout {
  display: flex;
  gap: 20px;
}

.library-details-poster {
  width: 160px;
  height: auto;
  flex-shrink: 0;
  border-radius: 10px;
  display: block;
}

.library-details-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.library-details-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Selector de mazo al añadir una carta de la Biblioteca ("Añadir a mazo"): lista sencilla de
   botones, uno por mazo, con el nombre y cuántas cartas tiene ya. */
.deck-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deck-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e3e3e8;
  background: var(--panel-bg);
  cursor: pointer;
  font-size: 0.9rem;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.deck-picker-item:hover {
  border-color: var(--mtg-active);
  background: rgba(var(--mtg-active-rgb), 0.05);
}

.deck-picker-item-name {
  font-weight: 600;
}

.deck-picker-item-count {
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* ---------- Libros: progreso de lectura y valoración ---------- */
/* Barra de progreso de un libro "Leyendo" (tarjeta y ficha), con el % y un lápiz para actualizar
   las páginas leídas. Mismo sitio que ocupa la disponibilidad en Películas/Series. */
.book-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.book-progress--details {
  margin: 0;
  padding: 0;
  border-top: none;
}

.book-progress-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #e6e6ea;
  overflow: hidden;
}

.book-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #34c77a;
  transition: width 0.2s ease;
}

.book-progress-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1f9d5f;
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

.book-progress-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.book-progress-edit-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.book-progress-edit-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Contenedor de una fila de valoración en estrellas (borde superior + tamaño de letra): lo
   reutilizan tanto valoraciones de solo lectura (Películas/Series, con <span class="star">, ver
   más abajo) como la de un libro "Leído" (con el selector clicable .star-picker, ver más abajo),
   que va de 0 a 10 estrellas y se puede cambiar en cualquier momento. */
.star-rating {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 6px 10px 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #d8d8de;
  font-size: 0.85rem;
}

.movie-details-info .star-rating {
  margin: 0;
  padding: 0;
  border-top: none;
  font-size: 1.1rem;
}

.star--filled {
  color: #f5b544;
}

.star-rating-value {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

/* Temporadas vistas de una serie (solo si tiene más de una): misma barra que .book-progress-bar
   de Libros (mismo tamaño/forma, para que se vea coherente con el resto de la web), pero clicable
   en vez de con un botón aparte, y con el color del propio site (--mtg-active) para no confundirla
   con el progreso de lectura. Un único control, del mismo ancho tenga la serie 2 o 20 temporadas. */
.season-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.season-progress-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #e6e6ea;
  overflow: hidden;
  cursor: pointer;
}

/* Amarillo suave mientras no estén todas las temporadas vistas (a medias); en cuanto se llega a
   la última, cambia a verde (.season-progress--complete), igual que el resto de "completado". */
.season-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #f0b93e;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.season-progress-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: #a97917;
  flex-shrink: 0;
  white-space: nowrap;
}

.season-progress--complete .season-progress-fill {
  background: #34c77a;
}

.season-progress--complete .season-progress-pct {
  color: #1f9d5f;
}

/* Selector interactivo de estrellas: mismas 10 estrellas de siempre, pero clicables (se resaltan
   las anteriores a la que se pasa el ratón/se pulsa). Se usa tanto en el modal "Marcar como
   leído" (tamaño grande, ver más abajo) como, ya en la tarjeta de Leídos y en la ficha del libro,
   para poder cambiar la valoración sin abrir ningún modal (ver .star-rating .star-picker más
   abajo, que las deja más pequeñas a juego con el resto de esa fila). */
.star-picker {
  display: flex;
  gap: 4px;
}

.star-picker-star {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #d8d8de;
  cursor: pointer;
  padding: 2px;
  transition: color 0.1s ease;
}

.star-picker-star:hover,
.star-picker-star.active {
  color: #f5b544;
}

/* El modal "Marcar como leído" es estrecho (360px): con el gap fijo de .star-picker las 10
   estrellas grandes no llegaban al ancho del modal y quedaban pegadas a la izquierda, dejando
   hueco vacío a la derecha. Mismo arreglo que en la ficha (.media-sheet-rating-box.star-picker) y
   la tarjeta de Leídos (.media-result-card .star-picker): width:100% + space-between para que se
   repartan de borde a borde, con un tamaño más pequeño para que quepan las 10 sin desbordar. */
#bookRatingPicker.star-picker {
  width: 100%;
  justify-content: space-between;
  gap: 0;
}

#bookRatingPicker .star-picker-star {
  font-size: 1.2rem;
  padding: 0;
}

/* Tamaño compacto del selector de estrellas cuando va dentro de .star-rating (tarjeta de Leídos y
   ficha del libro), en vez del tamaño grande pensado para el modal. */
.star-rating .star-picker {
  gap: 1px;
}

.star-rating .star-picker-star {
  font-size: 0.85rem;
  padding: 0 1px;
}

/* La tarjeta de la rejilla de Leídos es bastante más estrecha que la ficha (la rejilla admite
   columnas de hasta 150px, ver .media-search-grid), así que ahí las 10 estrellas necesitan ser
   más pequeñas todavía para no desbordar la tarjeta (además, en la tarjeta no se ve la etiqueta
   "X/10" al lado: solo queda como title/tooltip, ver bookCardHtml en books-view.js). */
.media-result-card .star-rating {
  margin: 6px 8px 0;
  padding: 6px 0 0;
  flex-wrap: nowrap;
}

/* width:100% + space-between (en vez de un gap fijo) reparte las 10 estrellas de borde a borde de
   la tarjeta sea cual sea su ancho real, igual que en la ficha (ver
   .media-sheet-rating-box .star-picker más abajo): así no dejan hueco vacío en tarjetas anchas, y
   con font-size pequeño tampoco desbordan en el ancho mínimo de la rejilla (150px). */
.media-result-card .star-picker {
  width: 100%;
  justify-content: space-between;
  gap: 0;
}

.media-result-card .star-picker-star {
  font-size: 0.72rem;
  padding: 0;
}

/* ---------- Inicio (Home) ---------- */
/* Sin max-width propio: igual que el resto de pantallas (Biblioteca, Películas...), que no lo
   llevan, así que Inicio ocupa el mismo ancho y con los mismos márgenes laterales (los de
   ".content", ya iguales para toda la web) en vez de quedarse más estrecho y descuadrado. */
.home-view h2 {
  margin: 0 0 20px;
}

.home-section {
  margin-top: 24px;
}

.home-section h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

/* Varias tarjetas por fila (si no caben más, pasan a una fila nueva) en vez de una lista vertical
   de una sola columna: así ocupan mucho menos alto. Responsive: 1 columna en pantallas estrechas
   (móvil), 2 en tablet, hasta 3 en pantallas grandes y hasta 4 en muy grandes — mismo número de
   columnas en Leyendo/Viendo/Jugando ahora, para que las tarjetas midan siempre lo mismo entre
   secciones (ver también la altura fija en .home-reading-item más abajo). */
/* auto-fit + minmax en vez de @media por ancho de viewport: así el número de columnas depende del
   ancho real del propio contenedor (funciona igual de bien a ancho completo, en Inicio, que metido
   dentro de una columna de .dashboard-grid a mitad de ancho, en el Dashboard de Libros). */
.home-reading-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.home-reading-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #e3e3e8;
  background: var(--panel-bg);
  /* Altura fija para que todas las tarjetas midan lo mismo, tengan o no barra de progreso
     (Leyendo la tiene, Viendo/Jugando no): sin esto, las de Leyendo salían más altas. */
  min-height: 118px;
}

/* En "Viendo ahora" la tarjeta entera se puede clicar para abrir la ficha de la serie (en
   "Leyendo ahora" no: ahí solo el lápiz hace algo, así que no lleva cursor de mano). */
#homeWatchingList .home-reading-item {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#homeWatchingList .home-reading-item:hover {
  border-color: var(--mtg-active);
  background: rgba(var(--mtg-active-rgb), 0.05);
}

.home-reading-item-cover {
  width: 64px;
  height: 92px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.home-reading-item-cover-placeholder {
  width: 64px;
  height: 92px;
  border-radius: 6px;
  flex-shrink: 0;
  background: #e6e6ea;
}

.home-reading-item-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-reading-item-title {
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-reading-item-author {
  font-size: 0.85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-reading-item .book-progress {
  margin: 4px 0 0;
  padding: 0;
  border-top: none;
}

/* ---------- Dashboard (genérico) ----------
   Piezas reutilizables de js/lib/dashboard.js y js/lib/charts.js: por ahora solo las usa el
   Dashboard de Libros (#librosDashboardBody, ver books-dashboard-view.js), pero con nombres
   genéricos ("dashboard-*", "chart-*", no "book-*") a propósito, para poder montar el mismo
   patrón en Películas/Series/TCGs más adelante. Las tarjetas de "Leyendo ahora"/"Últimos leídos"
   del dashboard NO reutilizan .home-reading-list/.home-reading-item de Inicio: usan la variante
   compacta "solo portada" de aquí abajo (.dashboard-cover-grid/.dashboard-cover-item). */

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Filtro de año: metido en la cabecera de la propia tarjeta de la gráfica (headerExtraHtml de
   dashboardSectionHtml, ver js/lib/dashboard.js), junto al título — no suelto en medio del
   dashboard, para que quede claro qué es lo que controla. */
.dashboard-year-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  flex-shrink: 0;
}

.dashboard-year-filter select {
  min-width: 90px;
  padding: 6px 10px;
}

/* Tarjeta "solo portada": usada en "Leyendo ahora" y "Últimos libros leídos" del Dashboard, donde
   el título no aporta nada que la propia portada no diga ya (a diferencia de Inicio, aquí se prima
   la vista rápida por encima del detalle). Nombres genéricos a propósito: el mismo patrón sirve
   para carteles de película/serie en futuros dashboards, no solo portadas de libro. Ancho de
   portada fijo vía minmax + auto-fit (igual que .home-reading-list, arriba): tantas columnas como
   quepan según el ancho real del contenedor. */
/* "dashboard-cover-grid--fill-row" (p.ej. Últimos libros leídos) es solo un gancho para JS, sin
   estilos propios: se pintan de sobra tarjetas y fitCoverGridsToOneRow() (js/lib/dashboard.js)
   esconde con display:none, en el mismo turno de JS antes de que el navegador pinte, las que no
   caben en una fila según el ancho real del contenedor. */
.dashboard-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 14px;
}

.dashboard-cover-item-cover,
.dashboard-cover-item-cover-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dashboard-cover-item-cover-placeholder {
  background: #e6e6ea;
}

.dashboard-cover-item .book-progress {
  margin: 6px 0 0;
  padding: 0;
  border-top: none;
}

/* Sin lápiz aparte en el Dashboard: toda la barra de progreso es clicable (abre el mismo modal de
   actualizar páginas). Un poco de feedback visual al pasar el ratón para que se note. */
.book-progress-clickable {
  cursor: pointer;
}

.book-progress-clickable:hover .book-progress-bar {
  background: #d5d5da;
}

.book-progress-clickable:hover .book-progress-pct {
  color: #16653f;
}

.dashboard-cover-item-caption {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.dashboard-stat-card {
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--mtg-active);
  line-height: 1.1;
}

.dashboard-stat-label {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Dos tarjetas por fila cuando hay sitio: mitad y mitad por defecto (Leyendo ahora / Últimos
   leídos), o 1/3-2/3 con el modificador .dashboard-grid--thirds (Autores más leídos / gráfica,
   que necesita más ancho para que se lea bien). */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-grid--thirds {
    grid-template-columns: 1fr 2fr;
  }
}

.dashboard-card {
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.dashboard-card-title {
  margin: 0;
  font-size: 1rem;
}

.dashboard-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Barra de fondo proporcional al máximo de la lista (position:absolute detrás del texto, ver
   .dashboard-top-list-item con position:relative), como una mini gráfica de barras horizontal
   integrada en la lista, sin necesitar SVG para algo tan sencillo. */
.dashboard-top-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.9rem;
}

.dashboard-top-list-bar {
  position: absolute;
  inset: 0;
  right: auto;
  background: rgba(var(--mtg-active-rgb), 0.1);
  border-radius: 8px;
  z-index: 0;
}

.dashboard-top-list-label {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-top-list-count {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--mtg-active);
  flex-shrink: 0;
}

/* ---------- Gráfica de dos líneas (chart-svg, ver js/lib/charts.js) ---------- */

.chart-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.chart-wrap {
  width: 100%;
  position: relative;
}

/* Tooltip propio de las bolitas (ver attachChartTooltips() en js/lib/charts.js): más fiable que
   el <title> nativo de SVG, que tarda en salir o directamente no aparece según el navegador.
   Posicionado a partir de la posición del ratón dentro de .chart-wrap (position:relative). */
.chart-tooltip {
  display: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: rgba(20, 20, 24, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-grid-line {
  stroke: #e3e3e8;
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  stroke: var(--panel-bg);
  stroke-width: 1.5;
  cursor: pointer;
}

.chart-dot:hover {
  r: 5.5;
}

.chart-axis-label {
  font-size: 10px;
  fill: var(--muted);
}

.chart-axis-label--left {
  text-anchor: end;
  dominant-baseline: middle;
}

.chart-axis-label--right {
  text-anchor: start;
  dominant-baseline: middle;
}

.chart-axis-label--x {
  text-anchor: middle;
}