/* =========================================================
   VIDEOTECA — Sistema visual LuckStudio × YouTube

   Reglas heredadas de LuckStudio:
     · Negro #0a0a0a sobre blanco quirúrgico
     · Host Grotesk en pesos 300 / 400 / 700 / 800
     · Border-radius cero (excepción: avatares, convención YouTube)
     · Líneas de 0.5px con opacidad, nunca 1px sólido
     · Etiquetas en mayúsculas con letter-spacing amplio
     · Títulos grandes con letter-spacing negativo
     · Curva cubic-bezier(.25,.46,.45,.94); hover por opacidad

   Único acento cromático: el rojo de YouTube #ff0000.
   Nunca más del 10% de la superficie.
   ========================================================= */

/* ---------------------------------------------------------
   1 · Tokens
   --------------------------------------------------------- */

:root {
  /* Acento único */
  --rojo:       #ff0000;
  --rojo-suave: rgba(255, 0, 0, 0.08);
  --rojo-linea: rgba(255, 0, 0, 0.32);

  /* Curvas y ritmos */
  --curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pad-x: 5vw;

  /* Tipografía */
  --fuente: "Host Grotesk", "Inter", -apple-system, system-ui, sans-serif;
}

/* Modo oscuro — el de por defecto */
:root,
[data-tema="oscuro"] {
  --bg:         #0a0a0a;
  --superficie: #0f0f0f;
  --elevado:    #161616;
  --fg:         #ffffff;
  --muted:      rgba(255, 255, 255, 0.52);
  --faint:      rgba(255, 255, 255, 0.30);
  --line:       rgba(255, 255, 255, 0.12);
  --line-suave: rgba(255, 255, 255, 0.07);
  --inverso-bg: #ffffff;
  --inverso-fg: #0a0a0a;
}

/* Modo claro */
[data-tema="claro"] {
  --bg:         #ffffff;
  --superficie: #ffffff;
  --elevado:    #f5f4f0;
  --fg:         #0a0a0a;
  --muted:      rgba(10, 10, 10, 0.52);
  --faint:      rgba(10, 10, 10, 0.32);
  --line:       rgba(10, 10, 10, 0.12);
  --line-suave: rgba(10, 10, 10, 0.07);
  --inverso-bg: #0a0a0a;
  --inverso-fg: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.32s var(--curva), color 0.32s var(--curva);
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--rojo);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------
   2 · Patrón de etiqueta — el "lenguaje de metadatos"
   Todo lo que no es contenido principal se firma así.
   --------------------------------------------------------- */

.section-label,
.counter,
.card-duration,
.chip,
.rama-cuenta,
.ruta-lista,
.recuento,
.dato-cuenta,
.etiqueta-publica,
.comentario-pie,
.publico-eyebrow,
.publico-meta,
.publico-pie,
.sublista-cuenta,
.resumen-estado,
.status-line,
.nota-tiempo,
.redactor-tiempo label {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.section-label {
  color: var(--faint);
  margin: 0 0 1rem;
  letter-spacing: 0.2em;
}

.section-label::before { content: '◈ '; opacity: 0.4; }

/* ---------------------------------------------------------
   3 · Estructura — barra superior
   --------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 0.5px solid var(--line);
}

.topbar-interior {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.4rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* El cuadrado rojo es la firma: un pixel de YouTube
   dentro de la retícula rectangular de LuckStudio. */
.brand-mark {
  width: 9px;
  height: 9px;
  background: var(--rojo);
  flex-shrink: 0;
}

.brand-name {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 1.8rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav-item {
  position: relative;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1.3rem 0;
  transition: color 0.22s;
}

.nav-item:hover { color: var(--fg); }

/* Subrayado que crece desde la izquierda al activarse */
.nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--curva);
}

.nav-item:hover::after { transform: scaleX(1); opacity: 0.4; }

.nav-item.is-active { color: var(--fg); font-weight: 700; }
.nav-item.is-active::after { transform: scaleX(1); opacity: 1; }

.nav-dot { display: none; }

.topbar-fin {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.counter {
  color: var(--faint);
  white-space: nowrap;
}

.enlace-publico {
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  transition: color 0.22s;
}

.enlace-publico:hover { color: var(--rojo); }

.icono-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: none;
  border: 0.5px solid var(--line);
  border-radius: 0;
  color: var(--faint);
  font-family: var(--fuente);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s;
}

.icono-btn:hover { color: var(--fg); border-color: var(--fg); }

.tema-toggle {
  background: none;
  border: 0.5px solid var(--line);
  color: var(--muted);
  font-family: var(--fuente);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s, border-color 0.22s;
}

.tema-toggle:hover { color: var(--fg); border-color: var(--fg); }

.pista-atajos { display: none; }

.main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3.4rem var(--pad-x) 8rem;
  width: 100%;
}

/* ---------------------------------------------------------
   4 · Cabeceras
   --------------------------------------------------------- */

/* La cabecera de página es el escalón más alto de la jerarquía:
   eyebrow diminuto, título enorme, subtítulo discreto. */
.page-head {
  margin-bottom: 3rem;
  padding-bottom: 1.6rem;
  border-bottom: 0.5px solid var(--line);
}

.page-eyebrow {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.9rem;
}

.page-eyebrow::before { content: '◈ '; opacity: 0.4; }

.page-title {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin: 0 0 1rem;
}

.page-sub {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}

/* ---------------------------------------------------------
   5 · Formularios y botones
   --------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }

.field label {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

input[type="text"],
input[type="password"],
input[type="search"],
textarea {
  background: transparent;
  border: 0.5px solid var(--line);
  border-radius: 0;
  color: var(--fg);
  font-family: var(--fuente);
  font-size: 0.92rem;
  font-weight: 300;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.22s;
}

input:focus, textarea:focus { border-color: var(--fg); outline: none; }

input::placeholder, textarea::placeholder { color: var(--faint); }

/* Botón primario: rectángulo sólido invertido, hover por opacidad */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: none;
  border: 0.5px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font-family: var(--fuente);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s, border-color 0.22s, opacity 0.22s;
}

.btn:hover { color: var(--fg); border-color: var(--fg); }

.btn-primary {
  background: var(--inverso-bg);
  color: var(--inverso-fg);
  border-color: var(--inverso-bg);
}

.btn-primary:hover {
  opacity: 0.75;
  color: var(--inverso-fg);
  border-color: var(--inverso-bg);
}

.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-quiet { border-color: transparent; padding: 0.7rem 0.6rem; }
.btn-quiet:hover { border-color: transparent; }

.btn-danger:hover { color: var(--rojo); border-color: var(--rojo); }

.btn-sm { padding: 0.6rem 0.9rem; font-size: 0.66rem; }

.btn-ancho { width: 100%; }

.btn-mini {
  background: none;
  border: none;
  padding: 0;
  color: var(--faint);
  font-family: var(--fuente);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s;
}

.btn-mini:hover { color: var(--fg); }
.btn-mini-danger:hover { color: var(--rojo); }

.add-bar { display: flex; gap: 0.6rem; margin-bottom: 2.6rem; }
.add-bar input { flex: 1; }

/* ---------------------------------------------------------
   6 · Rejilla de vídeos
   --------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem 1.6rem;
}

.card {
  position: relative;
  background: var(--superficie);
  opacity: 0;
  transform: translateY(10px);
  animation: cardIn 0.4s var(--curva) forwards;
}

@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }

/* Riel de estado: rojo mientras esté por ver, apagado al verse.
   Es el único punto donde el color hace trabajo semántico. */
.card::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rojo);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.32s var(--curva), background 0.22s;
}

.card.is-done::before { background: var(--line); }

.card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--elevado);
  overflow: hidden;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.card:hover .card-thumb img { opacity: 0.82; }

.card-duration {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #0a0a0a;
  color: #fff;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.5rem;
}

.card-body { padding: 1rem 0 0; }

.card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 0.22s;
}

.card-title a:hover { opacity: 0.6; }

.card-channel {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 300;
  margin: 0 0 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 0.5px solid var(--line-suave);
}

.card-actions .btn { flex: 1; }

.card-listas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }

.mini-lista {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  border-left: 0.5px solid var(--line);
  padding-left: 0.5rem;
}

/* ---------------------------------------------------------
   7 · Chips de estado
   --------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0.5px solid var(--line);
  color: var(--faint);
  padding: 0.22rem 0.55rem;
  letter-spacing: 0.14em;
}

.chip-pending { color: var(--rojo); border-color: var(--rojo-linea); }
.chip-done    { color: var(--muted); }
.chip-noted   { color: var(--fg); border-color: var(--fg); }

/* Las etiquetas son contenido, no metadato: se salen del patrón */
.chip-auto,
.chip-propia {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
}

button.chip-auto { cursor: pointer; transition: color 0.22s, border-color 0.22s; }
button.chip-auto:hover { color: var(--rojo); border-color: var(--rojo-linea); }

.chip-propia { color: var(--fg); border-color: var(--line); padding-right: 0.3rem; }

.chip-quitar {
  background: none;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.2rem;
  transition: color 0.22s;
}

.chip-quitar:hover { color: var(--rojo); }

/* ---------------------------------------------------------
   8 · Estado vacío
   --------------------------------------------------------- */

.empty {
  border: 0.5px solid var(--line);
  padding: 4.5rem 2rem;
  text-align: center;
}

.empty h3 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.6rem;
}

.empty p {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  max-width: 48ch;
  margin: 0 auto;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 300;
  margin: -0.2rem 0 1rem;
}

.recuento { color: var(--faint); margin: 0 0 1.4rem; }

/* ---------------------------------------------------------
   9 · Paneles y guías
   --------------------------------------------------------- */

.panel {
  border: 0.5px solid var(--line);
  padding: 2rem 2.2rem;
  margin-bottom: 1.4rem;
  max-width: 820px;
}

.panel h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.panel-destacado { border-color: var(--rojo-linea); }

.panel-bloque { border: 0.5px solid var(--line); padding: 1.3rem 1.4rem; }

.panel-pendiente { border-style: dashed; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.5rem 3rem;
  border-left: 0.5px solid var(--line);
  margin-left: 0.7rem;
}

.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps li::before {
  content: counter(step, decimal-leading-zero) ".";
  position: absolute;
  left: 0.9rem;
  top: 0;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.steps li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.5rem;
  height: 0.5px;
  background: var(--line);
}

.steps strong { font-weight: 700; }

.steps span {
  color: var(--muted);
  font-size: 0.87rem;
  font-weight: 300;
  display: block;
  margin-top: 0.2rem;
}

.callout {
  border-left: 2px solid var(--rojo);
  background: var(--rojo-suave);
  padding: 1rem 1.2rem;
  font-size: 0.87rem;
  font-weight: 300;
  color: var(--muted);
  margin-top: 1.4rem;
}

.callout strong { color: var(--fg); font-weight: 700; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  background: var(--elevado);
  padding: 0.1rem 0.35rem;
  color: var(--fg);
}

.status-line { margin-top: 1rem; letter-spacing: 0.12em; }
.status-ok  { color: var(--fg); }
.status-bad { color: var(--rojo); }

.acciones-datos { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.dato-cuenta { color: var(--faint); }

/* ---------------------------------------------------------
   10 · Avisos flotantes
   --------------------------------------------------------- */

.toast-zone {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 60;
}

.toast {
  background: var(--inverso-bg);
  color: var(--inverso-fg);
  padding: 0.9rem 1.5rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  animation: cardIn 0.32s var(--curva) forwards;
}

.toast-bad { background: var(--rojo); color: #fff; }

/* ---------------------------------------------------------
   11 · Ficha de vídeo
   --------------------------------------------------------- */

.volver {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2rem;
  transition: color 0.22s, padding-left 0.28s var(--curva);
}

.volver:hover { color: var(--fg); }

.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 2.4rem;
  align-items: start;
}

.detalle-principal { min-width: 0; }

/* El reproductor y el título quedan anclados:
   solo hace scroll lo que viene a partir del canal. */
.detalle-fijo {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  padding-bottom: 1.2rem;
}

.player-caja {
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  border: 0.5px solid var(--line);
}

.player-caja iframe,
.player-caja > div { width: 100%; height: 100%; border: 0; display: block; }

.detalle-titulo {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 1.2rem 0 0;
}

.detalle-scroll { padding-top: 0.4rem; }

/* --- Canal --- */

.canal-fila {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 0;
  border-bottom: 0.5px solid var(--line-suave);
}

/* Única excepción circular del sistema: es la convención
   con la que YouTube identifica a un canal. */
.canal-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--elevado);
  overflow: hidden;
  flex-shrink: 0;
}

.canal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.canal-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.canal-nombre { font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; }

.canal-meta {
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Descripción --- */

.descripcion { padding: 1.4rem 0; border-bottom: 0.5px solid var(--line-suave); }

.descripcion-texto {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
}

.descripcion-texto.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-ver-mas {
  background: none;
  border: none;
  color: var(--fg);
  font-family: var(--fuente);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.8rem 0 0;
  transition: color 0.22s;
}

.btn-ver-mas:hover { color: var(--rojo); }

/* --- Comentarios --- */

.comentarios { padding-top: 2rem; }

.comentario {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 0;
  border-bottom: 0.5px solid var(--line-suave);
}

.comentario-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--elevado);
}

.comentario-cuerpo { min-width: 0; flex: 1; }

.comentario-cabecera { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }

.comentario-autor { font-weight: 700; font-size: 0.85rem; }

.comentario-fecha {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.comentario-texto {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.comentario-pie { display: flex; gap: 1.2rem; color: var(--faint); }

/* --- Panel derecho --- */

.detalle-panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------------------------------------------------------
   12 · Anotaciones
   --------------------------------------------------------- */

.nota-acciones { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.nota-acciones .btn { flex: 1; }

.nota-vacia { margin: 0; font-size: 0.82rem; }

.redactor { border: 0.5px solid var(--line); padding: 1rem; margin-bottom: 1rem; }

.redactor textarea { font-size: 0.88rem; resize: vertical; }

.redactor-pie { display: flex; gap: 0.5rem; margin-top: 0.8rem; }

.redactor-tiempo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }

.redactor-tiempo label { color: var(--faint); }

.campo-tiempo {
  width: 92px;
  padding: 0.45rem 0.6rem !important;
  font-size: 0.8rem !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.notas-lista { display: flex; flex-direction: column; }

.nota {
  padding: 0.9rem 0;
  border-bottom: 0.5px solid var(--line-suave);
}

.nota:first-child { padding-top: 0; }
.nota:last-child { border-bottom: none; padding-bottom: 0; }

.nota:hover .nota-pie { opacity: 1; }

.nota-editando { border-bottom-color: var(--line); }
.nota-editando textarea { font-size: 0.88rem; resize: vertical; }
.nota-editando .campo-tiempo { margin-bottom: 0.6rem; }

/* La marca de tiempo es lo que conecta la nota con el vídeo:
   se firma en rojo porque es la única acción que mueve el reproductor. */
.nota-tiempo {
  display: inline-block;
  background: none;
  border: 0.5px solid var(--rojo-linea);
  border-radius: 0;
  color: var(--rojo);
  font-family: var(--fuente);
  letter-spacing: 0.1em;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: background 0.22s, color 0.22s;
}

.nota-tiempo:hover { background: var(--rojo); color: #fff; }

.nota-texto {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.nota-pie {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.6rem;
  opacity: 0;
  transition: opacity 0.22s;
}

@media (hover: none) { .nota-pie { opacity: 1; } }

.resumen-bloque {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 0.5px solid var(--line-suave);
}

.resumen-bloque textarea { font-size: 0.86rem; resize: vertical; }

.resumen-pie { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }

.resumen-estado { color: var(--faint); }

/* ---------------------------------------------------------
   13 · Listas y sublistas
   --------------------------------------------------------- */

.arbol { border-top: 0.5px solid var(--line); }

.rama { border-bottom: 0.5px solid var(--line-suave); }

.rama-fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  /* La profundidad se lee en la sangría */
  padding-left: calc(var(--nivel) * 1.6rem);
  transition: padding-left 0.28s var(--curva);
}

.rama-fila:hover { padding-left: calc(var(--nivel) * 1.6rem + 0.5rem); }
.rama-fila:hover .rama-acciones { opacity: 1; }

.rama-fila::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rojo);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s var(--curva);
}

.rama-fila:hover::after { transform: scaleY(1); }

.rama-nombre {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  transition: letter-spacing 0.28s var(--curva);
}

.rama-fila:hover .rama-nombre { letter-spacing: 0.02em; }

.rama-cuenta { color: var(--faint); white-space: nowrap; }

.rama-acciones {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  opacity: 0;
  transition: opacity 0.22s;
}

@media (hover: none) { .rama-acciones { opacity: 1; } }

.etiqueta-publica {
  color: var(--rojo);
  border: 0.5px solid var(--rojo-linea);
  padding: 0.2rem 0.5rem;
}

.ruta-lista { color: var(--faint); margin: 0 0 0.6rem; }

.sublistas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.6rem;
}

.sublista-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 0.5px solid var(--line);
  padding: 1rem 1.1rem;
  transition: border-color 0.22s;
}

.sublista-tarjeta:hover { border-color: var(--fg); }

.sublista-nombre { font-weight: 700; font-size: 0.88rem; }
.sublista-cuenta { color: var(--faint); }

/* --- Selector de listas --- */

.selector-arbol { display: flex; flex-direction: column; }

.selector-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  padding-left: calc(var(--nivel) * 1.1rem);
}

.selector-fila:hover .btn-mini { opacity: 1; }

.selector-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 300;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.selector-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.selector-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 0.5px solid var(--line);
  border-radius: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.22s, border-color 0.22s;
}

.selector-check input:checked { background: var(--rojo); border-color: var(--rojo); }

.selector-check input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.selector-fila .btn-mini { opacity: 0; font-size: 0.9rem; width: 16px; }

@media (hover: none) { .selector-fila .btn-mini { opacity: 1; } }

.creador-lista {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 0.5px solid var(--line-suave);
}

.creador-lista input { font-size: 0.86rem; padding: 0.6rem 0.8rem; }

/* ---------------------------------------------------------
   14 · Filtros
   --------------------------------------------------------- */

.filtros { margin-bottom: 2rem; }

.filtro-busqueda { margin-bottom: 0.9rem; }

.filtros-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.segmentado { display: inline-flex; border: 0.5px solid var(--line); }

.seg-btn {
  background: none;
  border: none;
  border-right: 0.5px solid var(--line);
  color: var(--faint);
  font-family: var(--fuente);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--fg); }

.seg-btn.is-active {
  background: var(--inverso-bg);
  color: var(--inverso-fg);
  font-weight: 700;
}

.filtro-select {
  background: none;
  border: 0.5px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font-family: var(--fuente);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  max-width: 220px;
  transition: border-color 0.22s, color 0.22s;
}

.filtro-select:hover { color: var(--fg); border-color: var(--fg); }
.filtro-select:focus { outline: none; border-color: var(--fg); }
.filtro-select option { background: var(--bg); color: var(--fg); text-transform: none; }

/* --- Etiquetas propias --- */

.etiquetas-propias { margin-bottom: 0.9rem; }

.campo-etiqueta { font-size: 0.86rem; padding: 0.6rem 0.8rem; }

.sugerencias { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }

.sugerencia {
  background: none;
  border: 0.5px dashed var(--line);
  border-radius: 0;
  color: var(--faint);
  font-family: var(--fuente);
  font-size: 0.75rem;
  font-weight: 300;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s;
}

.sugerencia:hover { color: var(--fg); border-color: var(--fg); }

/* ---------------------------------------------------------
   15 · Página pública
   --------------------------------------------------------- */

.publico { display: block; }

.publico-ancho { max-width: 1240px; margin: 0 auto; padding: 0 6vw; width: 100%; }

.publico-cabecera {
  border-bottom: 0.5px solid var(--line);
  padding: 16vh 0 5rem;
  margin-bottom: 4rem;
}

.publico-eyebrow { color: var(--faint); margin: 0 0 1.6rem; letter-spacing: 0.22em; }
.publico-eyebrow::before { content: '◈ '; opacity: 0.4; }

/* El título es la única pieza que se permite ocupar espacio.
   Todo lo demás en esta página es deliberadamente sobrio. */
.publico-titulo {
  font-size: clamp(2.8rem, 9vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  margin: 0 0 1.8rem;
  max-width: 13ch;
}

.publico-intro {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  max-width: 52ch;
  margin: 0;
}

.publico-meta { color: var(--faint); margin: 2rem 0 0; }

.publico-pie {
  border-top: 0.5px solid var(--line);
  margin-top: 6rem;
  padding: 2.5rem 0 4rem;
  color: var(--faint);
}

.publico .detalle { margin-bottom: 4rem; }
.publico .nota-tiempo { cursor: pointer; }

/* Barra de tema flotante de la página pública */
.tema-flotante {
  position: fixed;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 50;
  width: auto;
}

/* ---------------------------------------------------------
   16 · Responsive
   --------------------------------------------------------- */

@media (max-width: 1080px) {
  .detalle { grid-template-columns: 1fr; }
  .detalle-panel { position: static; }
}

@media (max-width: 880px) {
  .topbar-interior {
    height: auto;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.9rem var(--pad-x);
  }

  .nav { order: 3; width: 100%; gap: 1.2rem; margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); }
  .nav-item { padding: 0.5rem 0; font-size: 0.68rem; }

  .topbar-fin { margin-left: auto; gap: 0.7rem; }
  .counter, .enlace-publico { display: none; }

  .main { padding: 2rem var(--pad-x) 5rem; }
  .add-bar { flex-direction: column; }
  .detalle-fijo { position: static; }
  .filtro-select { max-width: 100%; flex: 1; }
  .segmentado { flex: 1; }
  .seg-btn { flex: 1; padding: 0.6rem 0.4rem; }
  .publico-cabecera { padding: 8rem 0 3rem; margin-bottom: 2.5rem; }
  .panel { padding: 1.5rem 1.3rem; }
}

/* =========================================================
   Modales (fase 7)
   ========================================================= */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  background: rgba(10, 10, 10, 0.72);
  animation: modalFondo 0.22s var(--curva) forwards;
}

[data-tema="claro"] .modal-fondo { background: rgba(10, 10, 10, 0.42); }

.modal-fondo.is-cerrando { animation: modalFondoSale 0.18s var(--curva) forwards; }

@keyframes modalFondo     { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalFondoSale { from { opacity: 1; } to { opacity: 0; } }

.modal {
  background: var(--bg);
  border: 0.5px solid var(--line);
  padding: 2.2rem 2.2rem 1.8rem;
  width: 100%;
  max-width: 460px;
  animation: modalEntra 0.28s var(--curva) forwards;
}

.is-cerrando .modal { animation: none; }

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

.modal-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}

.modal-texto {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}

/* El aviso lleva la marca lateral roja: es la consecuencia
   irreversible de lo que se está a punto de aceptar. */
.modal-aviso {
  border-left: 2px solid var(--rojo);
  padding-left: 0.9rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 300;
}

.modal-campo { margin-top: 1.3rem; }

.modal-error {
  color: var(--rojo);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  margin: 0.6rem 0 0;
}

.modal-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.btn-peligro {
  background: var(--rojo);
  color: #fff;
  border-color: var(--rojo);
}

.btn-peligro:hover { opacity: 0.78; color: #fff; border-color: var(--rojo); }

/* --- Opciones --- */

.modal-opciones { display: flex; flex-direction: column; margin-top: 1.3rem; }

.modal-opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: none;
  border: none;
  border-top: 0.5px solid var(--line-suave);
  color: var(--fg);
  font-family: var(--fuente);
  text-align: left;
  padding: 1rem 0 1rem 0;
  cursor: pointer;
  transition: padding-left 0.28s var(--curva);
}

.modal-opcion:last-child { border-bottom: 0.5px solid var(--line-suave); }

.modal-opcion::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rojo);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s var(--curva);
}

.modal-opcion:hover { padding-left: 0.7rem; }
.modal-opcion:hover::before { transform: scaleY(1); }

.modal-opcion-titulo { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }

.modal-opcion-detalle {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .modal { padding: 1.6rem 1.4rem 1.3rem; }
  .modal-acciones { flex-direction: column-reverse; }
  .modal-acciones .btn { width: 100%; }
}

/* =========================================================
   Selección múltiple y atajos (fase 8)
   ========================================================= */

/* --- Casilla de la tarjeta --- */

.card-check {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 3;
  width: 20px;
  height: 20px;
  padding: 0;
  background: rgba(10, 10, 10, 0.72);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.22s, background 0.18s, border-color 0.18s;
}

.card:hover .card-check,
.card-check:focus-visible,
.card.is-marcada .card-check,
.hay-seleccion .card-check { opacity: 1; }

@media (hover: none) { .card-check { opacity: 1; } }

.card-check[aria-pressed="true"] {
  background: var(--rojo);
  border-color: var(--rojo);
}

.card-check[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* La tarjeta marcada se enmarca en rojo: es el mismo código
   que el riel de estado, aplicado al perímetro. */
.card.is-marcada { outline: 1px solid var(--rojo); outline-offset: 0; }
.card.is-marcada .card-thumb img { opacity: 0.6; }

/* --- Barra de acciones --- */

.barra-seleccion {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1rem 6vw;
  background: var(--bg);
  border-top: 0.5px solid var(--line);
  animation: barraEntra 0.26s var(--curva) forwards;
}

@keyframes barraEntra {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.sel-cuenta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sel-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Deja aire bajo la rejilla para que la barra no tape la última fila */
body.hay-seleccion .main { padding-bottom: 10rem; }

/* --- Ayuda de atajos --- */

.pista-atajos {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 1rem 0 0;
  color: var(--faint);
  font-family: var(--fuente);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s;
}

.pista-atajos:hover { color: var(--fg); }

kbd {
  font-family: var(--fuente);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  border: 0.5px solid var(--line);
  padding: 0.1rem 0.4rem;
  min-width: 1.4rem;
  display: inline-block;
  text-align: center;
}

.atajos-lista { margin-top: 1.4rem; }

.atajo-fila {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-top: 0.5px solid var(--line-suave);
}

.atajo-fila:last-child { border-bottom: 0.5px solid var(--line-suave); }

.atajo-tecla { justify-self: start; }

.atajo-que { font-size: 0.85rem; font-weight: 300; }

.atajo-donde {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}

.atajos-lista + .modal-acciones { margin-top: 1.4rem; }

@media (max-width: 880px) {
  .barra-seleccion { padding: 0.9rem 6vw; gap: 0.8rem; }
  .sel-acciones { width: 100%; }
  .sel-acciones .btn { flex: 1; }
  .atajo-fila { grid-template-columns: 3rem 1fr; }
  .atajo-donde { display: none; }
}

/* =========================================================
   Arrastrar y soltar (fase 9)
   ========================================================= */

.card[draggable="true"] { cursor: grab; }
.card.is-arrastrando { opacity: 0.4; cursor: grabbing; }

/* Mientras arrastras, todo lo que no es destino se apaga */
body.esta-arrastrando { cursor: grabbing; }

/* --- Cajón lateral de destinos --- */

.cajon-listas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  width: 300px;
  max-width: 82vw;
  background: var(--bg);
  border-left: 0.5px solid var(--line);
  padding: 2rem 1.6rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.24s var(--curva);
}

.cajon-listas.is-visible { transform: translateX(0); }

.cajon-titulo {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

.cajon-titulo::before { content: '◈ '; opacity: 0.4; }

.cajon-cuenta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  margin: 0.4rem 0 1.6rem;
}

.cajon-arbol { display: flex; flex-direction: column; }

.cajon-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 0.6rem;
  padding-left: calc(0.6rem + var(--nivel) * 1.1rem);
  border-bottom: 0.5px solid var(--line-suave);
  transition: background 0.16s, padding-left 0.2s var(--curva);
}

/* El destino bajo el cursor se marca en rojo sólido: no hay
   duda posible de dónde va a caer lo que llevas. */
.cajon-fila.esta-encima {
  background: var(--rojo);
  color: #fff;
  padding-left: calc(1.1rem + var(--nivel) * 1.1rem);
}

.cajon-fila.esta-encima .cajon-cont { color: rgba(255, 255, 255, 0.7); }

/* Los hijos del destino no deben capturar el evento */
.cajon-fila * { pointer-events: none; }

.cajon-nombre {
  font-size: 0.88rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cajon-cont {
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* --- Árbol de listas como destino --- */

.rama-fila[draggable="true"] { cursor: grab; }
.rama-fila.is-arrastrando { opacity: 0.4; }

.rama-fila.esta-encima {
  background: var(--rojo);
  color: #fff;
  padding-left: calc(var(--nivel) * 1.6rem + 0.7rem);
}

.rama-fila.esta-encima .rama-cuenta,
.rama-fila.esta-encima .btn-mini { color: rgba(255, 255, 255, 0.75); }

.rama-fila.esta-encima::after { transform: scaleY(0); }

.zona-raiz {
  display: none;
  border: 0.5px dashed var(--line);
  padding: 1rem;
  margin-bottom: 0.6rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  transition: border-color 0.18s, color 0.18s;
}

/* Solo aparece cuando hay algo que soltar */
body.esta-arrastrando .zona-raiz { display: block; }

.zona-raiz.esta-encima { border-color: var(--rojo); color: var(--rojo); }

@media (max-width: 880px) {
  /* En pantallas táctiles el arrastre nativo no existe:
     ahí se usa la selección múltiple. */
  .cajon-listas { display: none; }
  .card[draggable="true"] { cursor: default; }
}

/* =========================================================
   Papelera y deshacer (fase 10)
   ========================================================= */

/* --- Aviso con acción --- */

.toast {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.toast-texto { flex: 1; }

/* El botón de deshacer se separa con una línea vertical:
   es una salida, no parte del mensaje. */
.toast-accion {
  background: none;
  border: none;
  border-left: 0.5px solid rgba(128, 128, 128, 0.45);
  padding: 0 0 0 1.2rem;
  color: inherit;
  font-family: var(--fuente);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.22s;
}

.toast-accion:hover { opacity: 0.6; }

/* --- Lista de la papelera --- */

.papelera-lista { border-top: 0.5px solid var(--line); }

.papelera-fila {
  display: grid;
  grid-template-columns: 108px 1fr auto auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 0.5px solid var(--line-suave);
}

.papelera-fila:hover .papelera-acciones { opacity: 1; }

.papelera-mini {
  aspect-ratio: 16 / 9;
  background: var(--elevado);
  overflow: hidden;
}

.papelera-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.22s, filter 0.22s;
}

/* Al pasar por encima recupera el color: recordatorio de que
   todavía se puede rescatar. */
.papelera-fila:hover .papelera-mini img { opacity: 1; filter: grayscale(0); }

.papelera-datos { min-width: 0; }

.papelera-titulo {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 0.2rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.papelera-canal {
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 300;
  margin: 0;
}

.papelera-plazo {
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.papelera-acciones {
  display: flex;
  gap: 1.1rem;
  opacity: 0;
  transition: opacity 0.22s;
}

@media (hover: none) { .papelera-acciones { opacity: 1; } }

@media (max-width: 880px) {
  .papelera-fila {
    grid-template-columns: 84px 1fr;
    gap: 0.9rem;
  }
  .papelera-plazo { grid-column: 2; }
  .papelera-acciones { grid-column: 1 / -1; }
}

/* =========================================================
   Vista de lista y canales (fase 11)
   ========================================================= */

.barra-vista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.barra-vista .recuento { margin: 0; }

.vista-toggle .seg-btn { padding: 0.5rem 0.9rem; }

/* --- Filas --- */

.filas { border-top: 0.5px solid var(--line); }

.card-fila {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.2rem;
  padding: 0.9rem 0;
  border-bottom: 0.5px solid var(--line-suave);
  background: none;
  animation: none;
  opacity: 1;
  transform: none;
}

.card-fila:hover .fila-acciones { opacity: 1; }

/* El riel de estado se pega al borde izquierdo de la fila */
.card-fila::before { left: -0.7rem; }

.card-fila .card-check { top: 50%; left: -0.7rem; margin-top: -10px; }
.card-fila.is-marcada { outline-offset: 2px; }

.fila-mini {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--elevado);
  overflow: hidden;
}

.fila-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.card-fila:hover .fila-mini img { opacity: 0.82; }

.fila-datos { min-width: 0; }

.fila-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fila-titulo a { transition: opacity 0.22s; }
.fila-titulo a:hover { opacity: 0.6; }

.fila-canal {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 300;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila-chips { flex-wrap: nowrap; }

.fila-acciones {
  display: flex;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.22s;
}

@media (hover: none) { .fila-acciones { opacity: 1; } }

/* --- Canales --- */

.canales-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}

.canal-tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0.5px solid var(--line);
  padding: 1rem 1.2rem;
  transition: border-color 0.22s, padding-left 0.28s var(--curva);
  position: relative;
}

.canal-tarjeta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rojo);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s var(--curva);
}

.canal-tarjeta:hover { border-color: var(--fg); padding-left: 1.7rem; }
.canal-tarjeta:hover::before { transform: scaleY(1); }

.canal-avatar-lg {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Si el canal no tiene avatar descargado, su inicial hace de retrato */
.canal-inicial {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--faint);
}

.canal-tarjeta-datos { display: flex; flex-direction: column; min-width: 0; }

.canal-tarjeta-nombre {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canal-tarjeta-cuenta {
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.canal-cabecera { display: flex; align-items: center; gap: 1.2rem; }

@media (max-width: 880px) {
  .card-fila {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.9rem;
  }
  .fila-chips { grid-column: 2; }
  .fila-acciones { grid-column: 1 / -1; }
  .card-fila .card-check { left: 0.4rem; top: 0.4rem; margin-top: 0; }
  .canal-cabecera { gap: 0.9rem; }
}

/* =========================================================
   Página pública: filtros y compartir (fase 12)
   ========================================================= */

.publico-acciones {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.publico-acciones .publico-meta { margin: 0; }

.is-copiado { color: var(--rojo); border-color: var(--rojo); }

/* Las etiquetas de las tarjetas públicas filtran al pulsarlas */
.mini-lista-btn {
  background: none;
  font-family: var(--fuente);
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s;
}

.mini-lista-btn:hover { color: var(--rojo); border-left-color: var(--rojo); }

button.chip-propia { cursor: pointer; transition: color 0.22s, border-color 0.22s; }
button.chip-propia:hover { color: var(--rojo); border-color: var(--rojo-linea); }

.mas-zona {
  display: flex;
  justify-content: center;
  padding: 3rem 0 0;
}

.mas-zona .btn { min-width: 220px; }

/* La página pública no tiene barra lateral: los filtros necesitan
   su propio respiro por arriba. */
.publico .filtros { margin-bottom: 2.4rem; }

@media (max-width: 880px) {
  .publico-acciones { gap: 0.9rem; }
  .tema-flotante { top: 1rem; right: 1rem; }
}

/* =========================================================
   Selector de listas en la tarjeta
   ========================================================= */

.selector-lista {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.7rem;
  background: none;
  border: 0.5px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font-family: var(--fuente);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.22s, border-color 0.22s;
}

.selector-lista span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selector-lista:hover { color: var(--fg); border-color: var(--fg); }

/* Cuadrado apilado: señal de "esto va dentro de algo" */
.selector-lista-icono {
  width: 9px;
  height: 9px;
  border: 0.5px solid currentColor;
  box-shadow: 2px -2px 0 -0.5px var(--bg), 3px -3px 0 -1px currentColor;
  flex-shrink: 0;
  margin-top: 2px;
}

.fila-lista { width: auto; max-width: 190px; margin-top: 0; }

/* --- Menú flotante --- */

.menu-listas {
  position: fixed;
  z-index: 150;
  width: 260px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 0.5px solid var(--fg);
  animation: cardIn 0.16s var(--curva) forwards;
}

.menu-titulo {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
  padding: 0.9rem 1rem 0.6rem;
}

.menu-cuerpo { overflow-y: auto; padding: 0 0.4rem; }

.menu-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  padding-left: calc(0.6rem + var(--nivel) * 0.9rem);
  cursor: pointer;
  transition: background 0.16s;
}

.menu-fila:hover { background: var(--elevado); }

.menu-fila input {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border: 0.5px solid var(--line);
  border-radius: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.menu-fila input:checked { background: var(--rojo); border-color: var(--rojo); }

.menu-fila input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.menu-nombre {
  font-size: 0.82rem;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-nueva {
  background: none;
  border: none;
  border-top: 0.5px solid var(--line);
  color: var(--muted);
  font-family: var(--fuente);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.22s, background 0.16s;
}

.menu-nueva:hover { color: var(--fg); background: var(--elevado); }

/* =========================================================
   Barra de selección, ahora agrupada por tipo de cambio
   ========================================================= */

.barra-seleccion { padding: 1rem var(--pad-x); }

.sel-info { display: flex; align-items: baseline; gap: 0.5rem; }

.sel-cuenta {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.sel-rotulo {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.sel-acciones { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-end; }

/* Cada grupo lleva su rótulo: dice qué cambia, no solo qué hace */
.sel-grupo { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.sel-grupo-label {
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 0.2rem;
}

@media (max-width: 880px) {
  .barra-seleccion { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .sel-acciones { flex-direction: column; gap: 0.7rem; }
  .sel-grupo { width: 100%; }
  .sel-grupo .btn { flex: 1; }
  .menu-listas { width: 240px; }
  .fila-lista { max-width: 100%; }
}


/* =========================================================
   Separador entre bloques de una misma página
   ========================================================= */

.separador-seccion {
  max-width: 820px;
  margin: 3.4rem 0 1.6rem;
  padding-top: 1.6rem;
  border-top: 0.5px solid var(--line);
}

.separador-titulo {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 0.6rem;
}

.separador-texto {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}