/* Tipografía de las plantillas de vídeo (Crónicas usa Montserrat ExtraBold). */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('fonts/montserrat-800.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 800; src: url('fonts/FiraSans-ExtraBold.ttf') format('truetype'); }
/* Tipografías de las plantillas de miniatura. Van empaquetadas a propósito: si se dejaran al
   sistema, el texto salía en Futura o Avenir y la portada dejaba de ser la misma.
   Neopotencial usa Arame —hoy en su grosor BOLD, con archivo propio para que el navegador no
   engorde la regular— y Biopotencial el pincel «Good Looking Karma». */
@font-face { font-family: 'Arame'; font-style: normal; font-weight: 400; src: url('fonts/Arame.woff2') format('woff2'); }
@font-face { font-family: 'Arame'; font-style: normal; font-weight: 700; src: url('fonts/ArameBold.woff2') format('woff2'); }
@font-face { font-family: 'Good Looking Karma'; font-style: normal; font-weight: 400; src: url('fonts/GoodLookingKarma.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --ink: #141316;
  --muted: #77737e;
  --faint: #a8a4ae;
  --line: #e8e5eb;
  --line-strong: #d8d4dd;
  --canvas: #f8f7fb;
  --surface: #ffffff;
  --soft: #f2f0f7;
  --lilac: #f1efff;
  --pink: #fff0f6;
  --green: #1faa66;
  --amber: #e9a61a;
  --red: #d94b52;
  --shadow: 0 18px 48px rgba(38, 31, 48, .08);
  --shadow-small: 0 8px 24px rgba(38, 31, 48, .08);
  --radius: 18px;
  /* Separación única entre bloques apilados: la usan todas las secciones para que el
     ritmo vertical sea el mismo en Inicio, Texto, Vídeo, Social y Ajustes. */
  --section-gap: 22px;
  --sidebar: 238px;
  --topbar: 82px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 100%; min-height: 100%; background: var(--canvas); color: var(--ink); }
body { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { -webkit-app-region: no-drag; }

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--muted);
}

.spinner {
  width: 26px;
  height: 26px;
  border: 2px solid #ded9e5;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.app-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  background: var(--canvas);
  /* Red de seguridad: ninguna pantalla puede empujar la aplicación de lado. Sin esto, una
     barra superior con más pastillas de las que caben desplazaba TODO el marco y la
     ventana aparecía cortada por los lados aunque estuviera ajustada a la pantalla. */
  overflow: hidden;
}

.sidebar {
  position: relative;
  z-index: 10;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 26px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -.03em;
}
.brand-button { width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; border-radius: 13px; }
.brand-button:hover { background: #f6f4f8; }

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

.brand-mark--large { width: 54px; height: 54px; border-radius: 17px; font-size: 23px; }

.side-nav { display: grid; gap: 7px; }
.side-nav__label { padding: 0 12px 9px; color: var(--faint); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.nav-button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, transform .18s ease;
}
.nav-button:hover { background: #f6f4f8; }
.nav-button:active { transform: translateY(1px); }
.nav-button.is-active { background: #efedf8; }
.nav-button svg { width: 19px; height: 19px; stroke-width: 1.9; }

.workspace {
  height: 100vh;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--topbar) minmax(0, 1fr);
  /* La columna hay que declararla: sin ella la columna implícita se estiraba hasta el
     contenido más ancho (la barra superior con sus pastillas) y la barra y la página se
     salían de la ventana por la derecha. Con `minmax(0, 1fr)` mandan los límites de la
     ventana y es el contenido el que cede. */
  grid-template-columns: minmax(0, 1fr);
  /* Las ventanas flotantes van en `position: fixed`, así que siguen viéndose enteras. */
  overflow: hidden;
}

/* Con el aviso de saldo hay una fila más. Sin declararla, el aviso caía en la fila
   elástica y el contenido en una fila implícita `auto`: el aviso se aplastaba hasta
   quedar en una franja ilegible en cuanto la página era alta. */
.workspace--alert { grid-template-rows: var(--topbar) auto minmax(0, 1fr); }

.topbar {
  position: relative;
  z-index: 9;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  -webkit-app-region: drag;
}

.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__right { justify-content: flex-end; }
/* La barra tiene que caber SIEMPRE, lleve los nombres de modelo que lleve: los grupos y las
   pastillas ceden ancho y el texto se recorta con puntos suspensivos en vez de empujar la
   ventana hacia fuera. Los iconos y los puntos de estado nunca encogen. */
.topbar__left { flex: 0 1 auto; }
.topbar__right { flex: 1 1 auto; }
/* Cada botón de dentro también tiene que poder ceder ancho: si alguno se niega a encoger,
   su grupo se desborda y las pastillas de modelo acaban encima del buscador, tapándolo. */
.topbar__left > *, .topbar__right > * { flex: 0 1 auto; min-width: 0; }
.topbar__left > .icon-button, .topbar__right > .flag-button { flex: 0 0 auto; }

.project-button, .model-chip, .flag-button, .icon-button, .quiet-button, .primary-button, .secondary-button, .danger-button {
  border: 0;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.project-button:active, .model-chip:active, .flag-button:active, .icon-button:active, .primary-button:active { transform: translateY(1px); }

.project-button {
  /* Ancho de partida, no ancho intocable: en una ventana estrecha cede sitio y el nombre
     del proyecto se recorta con puntos suspensivos en vez de empujar la barra. */
  flex: 0 1 220px;
  min-width: 0;
  max-width: 360px;
  height: 46px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  box-shadow: 0 3px 10px rgba(30, 20, 40, .03);
}
.project-button__avatar { width: 27px; height: 27px; border-radius: 9px; background: #111; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.project-button__copy { min-width: 0; flex: 1; }
.project-button__copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-button__copy strong { font-size: 14px; }
.project-button > svg { width: 16px; height: 16px; flex: 0 0 auto; }

.model-chip {
  height: 42px;
  padding: 0 13px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}
.model-chip:hover, .project-button:hover, .flag-button:hover { border-color: var(--line-strong); background: #fbfafc; }
/* Cada texto de la pastilla se recorta antes de que la barra desborde. */
.model-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.provider-glyph { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; background: #f1eff5; font-size: 10px; font-weight: 850; flex: 0 0 auto; }
/* Marca de origen: el verde de la pastilla viene de la suscripción, no de la sesión propia. */
.status-dot { width: 8px; height: 8px; border-radius: 99px; background: #bbb6c1; box-shadow: 0 0 0 3px rgba(187, 182, 193, .14); flex: 0 0 auto; }
.status-dot.is-online { background: var(--green); box-shadow: 0 0 0 3px rgba(31, 170, 102, .13); }
.status-dot.is-busy { background: var(--amber); box-shadow: 0 0 0 3px rgba(233, 166, 26, .14); }
/* Rojo = esa cuenta no tiene sesion abierta. Solo se pinta cuando consta cerrada. */
.status-dot.is-offline { background: var(--red); box-shadow: 0 0 0 3px rgba(217, 75, 82, .14); }
.flag-button { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-size: 21px; display: grid; place-items: center; }

.content-scroll { overflow: auto; min-width: 0; padding: 36px 40px 70px; overflow-anchor: none; }
.content-wrap { width: min(1380px, 100%); margin: 0 auto; }
/* Suelo común de separación entre bloques apilados de CUALQUIER pantalla: sin esto, una
   sección nueva que no traiga su propio margen queda pegada a la anterior y cada página
   respira distinto. Los márgenes contiguos se funden, así que quien ya separa más, manda. */
.content-wrap > * + * { margin-top: var(--section-gap); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 670; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(31px, 3vw, 48px); line-height: 1.05; letter-spacing: -.047em; }
h2 { letter-spacing: -.035em; }
.subtitle { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 224px;
  border-radius: 26px;
  padding: 38px 40px;
  background:
    radial-gradient(circle at 85% 25%, rgba(220, 214, 255, .9), transparent 34%),
    radial-gradient(circle at 65% 110%, rgba(255, 216, 235, .82), transparent 42%),
    linear-gradient(135deg, #f7f5ff, #fff8fc);
  border: 1px solid #e9e4f6;
  margin-bottom: 28px;
}
.hero::after { content: ''; position: absolute; right: -45px; top: -82px; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.18), 0 0 0 66px rgba(255,255,255,.1); }
.hero__copy { position: relative; z-index: 1; max-width: 760px; }
.hero__copy h1 { font-size: clamp(36px, 4vw, 57px); }
.hero__copy p { max-width: 610px; margin: 15px 0 23px; color: #635f69; font-size: 16px; line-height: 1.55; }

.primary-button, .secondary-button, .danger-button, .quiet-button {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.primary-button { background: #111; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
/* El botón se levanta un poco al pasar por encima: sin ese gesto no se notaba que fuera
   pulsable, y un guardado que no se ve parece que no ha ocurrido. */
.primary-button:hover:not(:disabled) { background: #29282b; transform: translateY(-1px); box-shadow: 0 11px 24px rgba(0,0,0,.22); }
.primary-button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.primary-button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.secondary-button { background: #fff; color: #111; border: 1px solid var(--line-strong); }
.secondary-button:hover { background: #f7f6f8; }
/* Bloqueado mientras dura un proceso: tiene que verse MÁS apagado que el botón principal
   que en ese momento dice «Generando…», o parece que se puede pulsar y no se puede. */
.secondary-button.is-locked { background: #fbfafc; color: #a29cad; border-color: #ebe8f0; }
.secondary-button.is-locked svg { color: #bdb7c6; }
.secondary-button.is-locked:hover { background: #fbfafc; }
.danger-button { background: #fff3f3; color: #af2f37; border: 1px solid #f1d6d8; }
.quiet-button { background: transparent; color: var(--muted); padding-inline: 10px; }
.quiet-button:hover { background: #f2f0f4; color: #111; }
.small-button { min-height: 34px; border-radius: 9px; padding-inline: 12px; font-size: 12px; box-shadow: none; }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: transparent; color: var(--muted); }
.icon-button:hover { background: #f2f0f4; color: #111; }
.icon-button:disabled { opacity: .34; cursor: not-allowed; transform: none; }
.icon-button:disabled:hover { background: transparent; color: var(--muted); }
.icon-button.is-syncing svg { animation: spin .8s linear infinite; }
.icon-button svg, .primary-button svg, .secondary-button svg, .danger-button svg, .quiet-button svg { width: 17px; height: 17px; }

.section-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: var(--section-gap) 0 15px; }
.section-kicker h2 { margin: 0; font-size: 22px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Icono y título comparten fila y la descripción ocupa el ancho completo debajo: así todas
   las tarjetas de la aplicación quedan al mismo nivel aunque un título ocupe dos líneas.
   El borde mide siempre lo mismo (el estado activo solo cambia el color) para que la
   tarjeta seleccionada no desplace su contenido respecto a las demás. */
.content-card {
  min-height: 136px;
  padding: 20px;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: 13px;
  row-gap: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  position: relative;
}
/* Punto intermitente de la tarjeta, con el MISMO código de color que la ventana de Tareas:
   verde = se está haciendo ahora mismo, naranja = está en cola esperando turno. */
.content-card__pulse {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #17a34a;
  box-shadow: 0 0 0 3px rgba(23,163,74,.16);
  animation: card-pulse 1.25s ease-in-out infinite;
}
.content-card__pulse.is-queued { background: #f0a233; box-shadow: 0 0 0 3px rgba(240,162,51,.18); }
/* Aparcado por el usuario: naranja pero QUIETO. Latir prometería que algo avanza. */
.content-card__pulse.is-paused { background: #f0a233; box-shadow: 0 0 0 3px rgba(240,162,51,.18); animation: none; }
@keyframes card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .content-card__pulse { animation: none; } }
.content-card:hover { transform: translateY(-2px); border-color: #cfc8d9; box-shadow: var(--shadow-small); }
.content-card.is-active { border-color: #151319; background: #f4f2ff; box-shadow: inset 0 0 0 1px rgba(21,19,25,.03); }
.content-card__icon { grid-column: 1; grid-row: 1; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #111; color: #fff; margin-bottom: 0; }
.content-card__icon svg { width: 19px; height: 19px; }
.content-card strong { grid-column: 2; grid-row: 1; align-self: center; display: block; font-size: 16px; margin-bottom: 0; }
.content-card p { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: var(--section-gap); }
.stat-card { min-height: 132px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; display: grid; align-content: center; gap: 7px; }
.stat-card > span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat-card > strong { font-size: 27px; letter-spacing: -.03em; }
.stat-card > small { color: var(--muted); font-size: 11px; }
.usage-panel { margin-bottom: var(--section-gap); }
.usage-panel .panel-body { display: grid; gap: 9px; }
.usage-row { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.usage-summary { width: 100%; min-height: 68px; padding: 11px 15px; border: 0; background: #fff; display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px 130px; gap: 13px; align-items: center; text-align: left; cursor: pointer; }
.usage-summary:hover { background: #faf9fb; }
.usage-summary > span:first-child svg { width: 17px; height: 17px; transition: transform .18s ease; }
.usage-row.is-open .usage-summary > span:first-child svg { transform: rotate(180deg); }
.usage-summary span:not(.usage-title) strong, .usage-summary span:not(.usage-title) small { display: block; text-align: right; }
.usage-summary small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.usage-title { min-width: 0; }
.usage-title strong, .usage-title small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-detail { padding: 12px 54px 15px; border-top: 1px solid var(--line); background: #faf9fb; display: grid; gap: 8px; }
.usage-detail > div:not(.usage-detail__note) { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; }
.usage-detail > div span { color: var(--muted); }
.usage-detail__note { color: var(--muted); font-size: 10px; line-height: 1.45; margin-bottom: 4px; }

.video-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.channel-list, .video-jobs { display: grid; gap: 10px; }
.channel-row { min-height: 76px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 13px; align-items: center; }
.channel-row > div strong, .channel-row > div small { display: block; }
.channel-row > div small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.channel-row > div small.channel-hint { margin-top: 6px; line-height: 1.45; }
.channel-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.upload-drop { min-height: 260px; margin-top: 18px; border: 1.5px dashed #cfc9d7; border-radius: 18px; background: #fbfaff; display: grid; place-content: center; justify-items: center; text-align: center; padding: 36px; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.upload-drop.is-dragging { border-color: #111; background: #f3efff; transform: scale(.995); }
.upload-drop.is-disabled { opacity: .55; }
.upload-drop h3 { margin: 0 0 7px; }
.upload-drop p { margin: 0 0 17px; color: var(--muted); font-size: 12px; }
.video-jobs { margin-top: 18px; }
.video-job { border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; }
.video-job strong, .video-job small { display: block; }
.video-job small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.doodle-list { display: grid; gap: 13px; }
.doodle-video { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.doodle-video__summary { min-height: 82px; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.doodle-video__copy { min-width: 0; }
.doodle-video__controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.doodle-video__copy strong, .doodle-video__copy small, .doodle-history__row strong, .doodle-history__row small { display: block; }
.doodle-video__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doodle-video__copy small, .doodle-history__row small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.doodle-current { padding: 13px 16px; border-top: 1px solid var(--line); background: var(--lilac); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.doodle-current strong, .doodle-current small { display: block; }
.doodle-current small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.doodle-current .progress { grid-column: 1 / -1; margin-top: 2px; }
/* En pausa la franja se apaga: se ve que sigue ahí, pero que ahora mismo no avanza. */
.doodle-current.is-paused { background: #faf7f2; }
.doodle-current.is-paused .progress span { background: #f0a233; }
.doodle-history { border-top: 1px solid var(--line); background: #fbfafc; }
.doodle-history__row { min-height: 65px; padding: 11px 16px 11px 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); }
.doodle-history__row:last-child { border-bottom: 0; }
.doodle-history__row > div { min-width: 0; }
.doodle-history__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.doodle-history__row > .doodle-history__actions { min-width: 184px; display: grid; gap: 8px; }
.doodle-history__actions .primary-button, .doodle-history__actions .secondary-button { width: 100%; }
/* La papelera va pegada a «Mostrar carpeta», no suelta en una fila propia debajo. */
.doodle-history__line { display: flex; align-items: center; gap: 8px; }
.doodle-history__line .secondary-button { flex: 1 1 auto; }
.doodle-history__line .icon-button { flex: 0 0 auto; }
/* Doodle TERMINADO: sus botones se leen mejor en una sola línea horizontal debajo del
   texto y pegados a la izquierda que en una columna estrecha a la derecha. Un Doodle con
   error conserva la columna de antes, que es donde se espera ver «Reanudar». */
.doodle-history__row.is-complete { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
.doodle-history__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
.doodle-history__toolbar .primary-button, .doodle-history__toolbar .secondary-button { width: auto; }
.doodle-empty { padding: 13px 16px 15px 68px; border-top: 1px solid var(--line); color: var(--muted); background: #fbfafc; font-size: 11px; }
.title-set { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.title-set summary { min-height: 62px; padding: 14px 17px; display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer; }
.title-set summary span { color: var(--muted); font-size: 11px; }
.title-set ol { margin: 0; padding: 5px 44px 20px; display: grid; gap: 8px; }
.title-set li { padding-left: 5px; font-size: 13px; line-height: 1.4; }
.credential-input { width: 100%; min-height: 180px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 14px; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; outline: none; }
.credential-input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(20,19,22,.08); }
.template-header-actions { min-width: min(520px, 52vw); margin-left: auto; display: grid; grid-template-columns: minmax(210px, 1fr) auto; gap: 12px; align-items: end; }
.template-header-actions.is-solo { min-width: 0; grid-template-columns: auto; justify-content: end; }
.template-selector { position: relative; min-width: 0; display: grid; gap: 5px; }
.template-selector > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.template-select-button {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30, 20, 40, .03);
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.template-select-button:hover { border-color: var(--line-strong); background: #fbfafc; }
.template-select-button:active { transform: translateY(1px); }
.template-select-button__copy { min-width: 0; flex: 1; }
.template-select-button__copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.template-select-button > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.template-selector__menu.popover {
  position: absolute;
  inset: calc(100% + 8px) auto auto 0;
  z-index: 90;
  width: 100%;
  min-width: 100%;
  max-width: none;
  max-height: min(420px, calc(100vh - 150px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.template-importer { margin-bottom: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: #fbfaff; }
.template-drop { min-height: 116px; border: 1.5px dashed #cfc9d7; border-radius: 13px; background: #fff; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted); transition: border-color .18s ease, background .18s ease; }
.template-drop .source-badge { width: 38px; height: 38px; margin-bottom: 2px; border-radius: 11px; }
.template-drop .source-badge svg { width: 19px; height: 19px; }
.template-drop .secondary-button { margin-top: 5px; }
.template-drop strong { color: var(--ink); font-size: 13px; }
.template-drop span { font-size: 10px; letter-spacing: .05em; }
.template-drop.is-dragging { border-color: #111; background: #f3efff; }
.template-preview { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fbfafc; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
.template-composite { min-width: 0; background: #211f25; }
.template-preview__stage { min-height: 350px; padding: 20px; display: grid; place-items: center; background: #211f25; }
.template-preview__stage .tpl-stage::after { content: ''; position: absolute; inset: 0; z-index: 999; background: #000; opacity: 0; pointer-events: none; transition: opacity .08s linear; }
.template-preview__stage.is-tail-preview .tpl-stage::after { opacity: 1; }
.tpl-stage { position: relative; overflow: hidden; width: 100%; max-height: 520px; background: #fff; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.2); container-type: inline-size; }
.tpl-stage--cronicas { max-width: 100%; color: #111; border-radius: 0; background: transparent; }
/* «Sin nada» no tiene capa de fondo: mientras se edita se pinta negro para ver el encuadre
   real del episodio. La captura del episodio NO es editable, así que sigue transparente y
   conserva el alfa que necesita el montaje por capas. */
.tpl-stage--cronicas.is-editable[data-template-variant="cronicas-sin-nada"] { background: #000; }
.tpl-cronicas__background { position: absolute; inset: 0; background: #fff; }
.tpl-cronicas__sidebar { position: absolute; inset: 0; background: #000; clip-path: polygon(83.8% 0, 100% 0, 100% 100%, 71.8% 100%); }
.tpl-el { position: absolute; }
.tpl-cronicas__title { z-index: auto; height: 3.25em; color: #fff; font-family: 'Fira Sans', sans-serif; font-size: 3.05cqw; font-weight: 800; line-height: .96; letter-spacing: -.035em; text-align: left; }
.tpl-cronicas__title-line { position: absolute; left: 0; right: 0; display: block; }
.tpl-cronicas__title-line[data-tpl-layer="titleLead"] { top: 0; }
.tpl-cronicas__title-line[data-tpl-layer="titleName"] { top: .96em; color: #f4c013; }
.tpl-cronicas__title .tpl-cronicas__number { top: 1.92em; text-align: right; }
.tpl-cronicas__social { height: auto; }
.tpl-cronicas__land { height: auto; }
.tpl-transformable-image { transform: rotate(var(--tpl-base-rotation, 0deg)) scaleX(var(--tpl-base-flip-x, 1)) scaleY(var(--tpl-base-flip-y, 1)) rotate(var(--tpl-rotation, 0deg)) scaleX(var(--tpl-flip-x, 1)) scaleY(var(--tpl-flip-y, 1)); transform-origin: center; }
.tpl-cronicas__arrow { --tpl-base-rotation: 180deg; height: 10.8%; overflow: visible; fill: none; stroke: #ffc20d; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tpl-cronicas__arrow--asset { object-fit: contain; }
/* El espejo horizontal de la flecha es propio de la composición de Crónicas: se aplica
   igual en «sin cara» y en «con cara» para que la copia quede idéntica al original. */
.tpl-stage[data-template-variant="cronicas-sin-cara"] .tpl-cronicas__arrow,
.tpl-stage[data-template-variant="cronicas-con-cara"] .tpl-cronicas__arrow { --tpl-base-flip-x: -1; }
/* El faldón toca el fondo del vídeo: más bajo y fino que antes para dar aire a la columna derecha. */
.tpl-cronicas__banner { z-index: auto; height: 7.6%; overflow: hidden; white-space: nowrap; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.9cqw; font-style: normal; font-weight: 800; line-height: 1; letter-spacing: .04em; }
.tpl-cronicas__banner-bg { position: absolute; inset: 0; display: block; background: #000; }
.tpl-cronicas__banner-copy { position: absolute; inset: 0; padding: 0 1.9%; display: flex; align-items: center; justify-content: center; gap: .5cqw; }
.tpl-cronicas__banner-copy em { color: #f4c013; font-style: normal; }
.tpl-cronicas__banner-copy small { font: inherit; font-size: .82em; }
.tpl-num { display: inline-block; min-width: 1ch; outline: none; cursor: text; }
.tpl-stage.is-editable .tpl-num { border-bottom: 1px dashed rgba(255,255,255,.45); }
.tpl-num:focus { border-bottom-color: #f4c013; }
.tpl-stage.is-editable [data-tpl-el] { cursor: grab; }
.tpl-stage.is-editable [data-tpl-el]:hover { outline: 1px dashed rgba(140,120,200,.55); outline-offset: 2px; }
.tpl-stage.is-editable [data-tpl-el].is-moving { cursor: grabbing; outline: 1px dashed rgba(140,120,200,.9); }
.tpl-rotation-handle { position: absolute; z-index: 80; width: 28px; height: 28px; padding: 0; transform: translate(-50%, -135%); border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; background: #151319; color: #fff; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 0 0 1px #151319, 0 3px 9px rgba(0,0,0,.38); }
.tpl-rotation-handle:hover { background: #55456f; }
.tpl-rotation-handle:focus-visible { outline: 3px solid #c9b8ff; outline-offset: 3px; }
.tpl-rotation-handle.is-rotating { cursor: grabbing; background: #6f58a1; }
.tpl-rotation-handle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Marco de la imagen seleccionada: solo aparece al pulsarla y lleva sus cuatro puntos de
   escala y el tirador de giro. Contraste garantizado sobre fondos claros y oscuros. */
.tpl-selection { position: absolute; pointer-events: none; transform: rotate(var(--tpl-rotation, 0deg)); transform-origin: center; outline: 1px dashed rgba(255,255,255,.9); outline-offset: 2px; box-shadow: 0 0 0 1px rgba(21,19,25,.85); }
.tpl-selection .tpl-resize, .tpl-selection .tpl-rotation-handle { pointer-events: auto; touch-action: none; }
.tpl-selection .tpl-resize { position: absolute; z-index: 6; width: 14px; height: 14px; border-radius: 50%; background: #151319; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.tpl-selection .tpl-rotation-handle { left: 50%; top: 0; }
.tpl-image-context-menu button[disabled] { color: var(--faint); cursor: default; }
.title-set-row { padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.title-set-row + .title-set-row { margin-top: 10px; }
.title-set-row__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.title-set-row__head strong, .title-set-row__head small { display: block; }
.title-set-row__head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
/* Gestión › Notas del episodio. Misma tarjeta y mismos márgenes que Título; lo único propio
   es la cita del vídeo y el sello de seguridad, que se lee de un vistazo por su color. */
.episode-notes-list { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 10px; }
.episode-note { padding-left: 4px; }
.episode-note__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.episode-note__head strong { font-size: 13px; }
.episode-note__score { font-size: 11px; font-weight: 690; color: var(--muted); }
.episode-note.is-strong .episode-note__score { color: #117345; }
.episode-note.is-medium .episode-note__score { color: #8a6a10; }
.episode-note p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.episode-note blockquote { margin: 7px 0 0; padding: 8px 11px; border-left: 2px solid var(--line); border-radius: 0 8px 8px 0; background: #faf9fc; color: #3a3441; font-size: 12px; }
.episode-note__at { color: var(--muted); font-variant-numeric: tabular-nums; }
.episode-note > small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.opus-record .ig-history { margin-top: 10px; display: grid; gap: 8px; }
.tpl-image-context-menu { position: fixed; z-index: 300; min-width: 205px; padding: 6px; border: 1px solid #d9d4df; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 15px 38px rgba(22,18,28,.22); backdrop-filter: blur(14px); }
.tpl-image-context-menu button { width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; display: flex; align-items: center; gap: 9px; background: transparent; color: #25212a; font: 650 12px Inter, sans-serif; text-align: left; cursor: pointer; }
.tpl-image-context-menu button:hover, .tpl-image-context-menu button:focus-visible { outline: none; background: #eee8f8; }
.tpl-image-context-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tpl-video-slot { min-height: 10%; background: #fff; display: grid; place-items: center; }
.tpl-video-slot.is-dragging { outline: 2px dashed #8f76d6; outline-offset: 2px; }
/* «Sin nada»: el área ocupa el fotograma entero y el vídeo se encaja dentro conservando su
   proporción; lo que sobra queda negro, exactamente como sale el episodio generado. */
.tpl-video-slot--blank.has-video, .tpl-video-slot--blank.has-video video { background: transparent; }
.tpl-video-slot--blank video { object-fit: contain; }
/* El área llega al borde superior del lienzo, que recorta lo que sobresale: el botón de
   quitar el vídeo se mete dentro para que siga estando a mano. */
.tpl-video-slot--blank .tpl-slot-clear { top: 12px; left: auto; right: 12px; transform: none; }
.tpl-video-slot video { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; pointer-events: auto; cursor: inherit; }
.tpl-video-slot .tpl-resize { position: absolute; z-index: 6; width: 16px; height: 16px; border-radius: 50%; background: #151319; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tpl-resize--nw { left: -8px; top: -8px; cursor: nwse-resize; }
.tpl-resize--ne { right: -8px; top: -8px; cursor: nesw-resize; }
.tpl-resize--se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.tpl-resize--sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.tpl-slot-clear { position: absolute; top: -11px; left: 50%; z-index: 7; width: 22px; height: 22px; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #151319; color: #fff; font-size: 10px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
/* Círculo de la cara (variante «con cara»): el vídeo queda siempre recortado dentro
   del círculo, así que agrandarlo nunca invade el resto de la plantilla. */
.tpl-face-cam { aspect-ratio: 1 / 1; border-radius: 50%; }
.tpl-face-cam__frame { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0d0c10; }
.tpl-face-cam__media { position: absolute; left: 50%; top: 50%; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translate(-50%, -50%); transform-origin: center; pointer-events: auto; cursor: move; }
.tpl-face-cam:not(.has-media) { border: 2px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.08); display: grid; place-items: center; }
.tpl-face-cam__empty { width: 44%; height: 44%; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #151319; font: 700 2cqw Inter, sans-serif; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.tpl-face-cam .tpl-resize { position: absolute; z-index: 6; width: 14px; height: 14px; border-radius: 50%; background: #151319; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); touch-action: none; }
.tpl-face-cam__clear { position: absolute; top: -11px; left: 50%; z-index: 7; width: 22px; height: 22px; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #151319; color: #fff; font-size: 10px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tpl-face-cam.media-selected .tpl-face-cam__frame { box-shadow: inset 0 0 0 2px #8f76d6; }
.tpl-face-cam__move { position: absolute; z-index: 5; cursor: move; touch-action: none; }
.tpl-face-cam__move--top, .tpl-face-cam__move--bottom { left: 18%; width: 64%; height: 10px; }
.tpl-face-cam__move--top { top: -5px; }
.tpl-face-cam__move--bottom { bottom: -5px; }
.tpl-face-cam__move--left, .tpl-face-cam__move--right { top: 18%; width: 10px; height: 64%; }
.tpl-face-cam__move--left { left: -5px; }
.tpl-face-cam__move--right { right: -5px; }
.tpl-face-resize { position: absolute; z-index: 8; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #8f76d6; box-shadow: 0 2px 6px rgba(0,0,0,.35); touch-action: none; }
.tpl-face-resize--nw { left: 14%; top: 14%; cursor: nwse-resize; }
.tpl-face-resize--ne { right: 14%; top: 14%; cursor: nesw-resize; }
.tpl-face-resize--se { right: 14%; bottom: 14%; cursor: nwse-resize; }
.tpl-face-resize--sw { left: 14%; bottom: 14%; cursor: nesw-resize; }
.tpl-video-empty { display: grid; justify-items: center; gap: 8px; padding: 4cqw 2cqw; text-align: center; color: var(--muted); }
.tpl-video-empty strong { color: #3d3945; font-size: 1.9cqw; }
.tpl-video-empty span { font-size: 1.35cqw; }
.tpl-video-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.template-player { min-height: 58px; padding: 10px 16px; border-top: 1px solid #3a373f; display: grid; grid-template-columns: auto auto auto auto minmax(90px, 1fr) auto auto minmax(64px, 110px) auto; gap: 10px; align-items: center; background: #17151a; color: #fff; }
.template-player__button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; color: #fff; cursor: pointer; }
.template-player__button:hover { background: rgba(255,255,255,.1); }
.template-player__button:focus-visible, .template-player input:focus-visible { outline: 2px solid #b9a7ee; outline-offset: 2px; }
.template-player__button svg { width: 19px; height: 19px; }
.template-player__time { min-width: 35px; color: #ddd9e2; font: 650 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.template-player input[type="range"] { height: 18px; margin: 0; accent-color: #b9a7ee; cursor: pointer; }
.template-player__seek { width: 100%; }
.template-player__volume { width: 100%; }
.template-player audio { display: none; }
.template-cue-controls { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #343139; display: flex; justify-content: center; gap: 9px; }
.template-cue-button { min-width: 150px; min-height: 40px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; display: grid; gap: 1px; background: #5f86f7; color: #fff; cursor: pointer; }
.template-cue-button:hover { background: #7597fa; }
.template-cue-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.template-cue-button:disabled { background: #2d2a31; color: #77717f; cursor: not-allowed; }
.template-cue-button strong { font-size: 11px; }
.template-cue-button small { font-size: 9px; opacity: .82; }
.template-composite:fullscreen { display: grid; align-content: center; background: #211f25; }
.template-composite:fullscreen .template-preview__stage { min-height: 0; }
.template-audio-editor { padding: 15px 18px 17px; border-top: 1px solid var(--line); display: grid; gap: 11px; background: #fff; }
.template-audio-editor__heading strong, .template-audio-editor__heading small { display: block; }
.template-audio-editor__heading strong { font-size: 13px; }
.template-audio-editor__heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.template-audio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.template-audio-slot { min-width: 0; min-height: 68px; padding: 11px; border: 1.5px dashed #cfc9d7; border-radius: 13px; display: flex; align-items: center; gap: 10px; background: #fbfaff; transition: border-color .18s ease, background .18s ease; }
.template-audio-slot.is-dragging { border-color: #111; background: #f3efff; }
.template-audio-slot__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: #17151a; color: #fff; }
.template-audio-slot__icon svg { width: 17px; height: 17px; }
.template-audio-slot__copy { min-width: 0; flex: 1; }
.template-audio-slot__copy strong, .template-audio-slot__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-audio-slot__copy strong { font-size: 12px; }
.template-audio-slot__copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.tpl-clip--audio-cue { background: #efa91a; color: #352300; }
.tpl-layer { position: absolute; transform: translate(-50%, -50%); }
.tpl-layer--image { height: auto; }
.tpl-layer--video { aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(135deg, #232128, #37343d); color: #d8d4de; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 4cqw; }
.tpl-layer--video.is-full { border-radius: 0; }
.tpl-layer--video svg { width: 6cqw; height: 6cqw; opacity: .85; }
.tpl-layer--video small { max-width: 60cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.9cqw; color: #b6b1bd; }
.tpl-layer--text { display: grid; justify-items: center; text-align: center; color: #151319; line-height: 1.18; max-width: 84cqw; }
.tpl-text-big { font-size: 4.6cqw; letter-spacing: .01em; }
.tpl-text-small { font-size: 2.1cqw; margin-top: .6cqw; opacity: .82; }
.tpl-preview-unavailable { max-width: 320px; padding: 14px 18px; border: 1px solid #ddd8e3; border-radius: 12px; background: #faf9fc; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.tpl-timeline { padding: 13px 15px 6px; border-top: 1px solid var(--line); background: #fff; display: grid; gap: 5px; }
.tpl-track { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; }
.tpl-track--sortable { position: relative; border-radius: 7px; cursor: grab; transition: background .14s ease, opacity .14s ease; }
.tpl-track--sortable:hover { background: #f8f5fc; }
.tpl-track--sortable:focus-visible { outline: 2px solid #8f76d6; outline-offset: 2px; }
.tpl-track--sortable.is-layer-dragging { opacity: .42; cursor: grabbing; }
.tpl-track--sortable.is-layer-drop-before::before, .tpl-track--sortable.is-layer-drop-after::after { content: ''; position: absolute; z-index: 4; left: 0; right: 0; height: 2px; border-radius: 2px; background: #8f76d6; }
.tpl-track--sortable.is-layer-drop-before::before { top: -3px; }
.tpl-track--sortable.is-layer-drop-after::after { bottom: -3px; }
.tpl-track__label { color: var(--faint); font: 700 10px ui-monospace, monospace; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.tpl-track__grip { font-size: 12px; letter-spacing: -3px; color: #aaa3b1; transform: translateX(-2px); }
.tpl-track__lane { position: relative; height: 22px; border-radius: 6px; background: #f3f1f6; overflow: hidden; }
.tpl-clip { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; padding: 0 7px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; font-weight: 650; color: #fff; background: #6f6a78; }
.tpl-clip--video { background: #4c76c8; }
.tpl-clip--image { background: #1faa66; }
.tpl-clip--graphic { background: #a262c9; }
.tpl-clip--matte { background: #b6b1bd; color: #3d3945; }
.tpl-clip--audio { background: #e9a61a; color: #4a3a08; }
.tpl-clip--other { background: #6f6a78; }
.tpl-timeline__scale { display: flex; justify-content: space-between; padding: 2px 0 4px 38px; color: var(--faint); font-size: 9px; }
.template-preview__meta { min-height: 70px; padding: 13px 15px; border-top: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.template-preview__meta strong, .template-preview__meta small { display: block; }
.template-preview__meta small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.template-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Los botones de la plantilla van ARRIBA, justo debajo de la cabecera del panel: es lo
   primero que se busca al entrar en «Generar vídeos», no algo que haya que ir a buscar al
   final después de bajar por todo el editor. */
.template-toolbar { display: flex; justify-content: flex-start; padding: 0 0 14px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.template-toolbar .template-actions { width: 100%; }
.template-history-actions { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 12px; background: #faf9fb; }
.template-history-actions .icon-button { width: 32px; height: 32px; border-radius: 9px; }
.template-generate { margin-top: 18px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Constancia de que este borrador ya tiene su episodio en local, con acceso a su carpeta. */
.episode-generated { flex-basis: 100%; margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.episode-generated span { display: inline-flex; align-items: center; gap: 6px; }
.episode-generated svg { width: 14px; height: 14px; }
.episode-generated .icon-button { width: 26px; height: 26px; }
.doodle-pick-list { display: grid; gap: 9px; }
.doodle-pick { width: 100%; min-height: 64px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: center; text-align: left; cursor: pointer; }
.doodle-pick:hover { background: #faf9fb; border-color: var(--line-strong); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 4px 18px rgba(32,25,40,.025); }
.panel-header { min-height: 72px; padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel-header h2, .panel-header h3 { margin: 0; }
.panel-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.panel-body { padding: 22px; }
/* Todas las secciones apilan sus tarjetas con la misma separación: si el detalle solo
   trae una, el hueco no se ve; si trae varias, nunca quedan pegadas unas a otras. */
.content-detail { margin-top: var(--section-gap); display: grid; gap: var(--section-gap); min-width: 0; }
.empty-state { min-height: 270px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 50px; color: var(--muted); }
.empty-state__icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #111; background: var(--soft); margin-bottom: 16px; }
.empty-state__icon svg { width: 26px; height: 26px; }
.empty-state h3 { color: var(--ink); font-size: 20px; margin-bottom: 7px; }
.empty-state p { max-width: 440px; line-height: 1.55; }
.empty-state.compact { min-height: 110px; padding: 24px; }

/* Historias de Instagram */
.ig-stories-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(420px, .75fr); gap: 22px; align-items: start; }
.ig-stories-main { display: grid; gap: 22px; min-width: 0; }
.ig-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 18px; }
.ig-channel-list, .ig-history { display: grid; gap: 10px; }
.ig-channel-row { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ig-channel-copy { min-width: 0; flex: 1; }
.ig-channel-copy strong, .ig-channel-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-channel-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.ig-history-row { min-height: 64px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; }
.ig-history-row > div { min-width: 0; }
.ig-history-row strong, .ig-history-row small { display: block; }
.ig-history-row strong { font-size: 13px; }
.ig-history-row small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.badge.is-error { background: #fff0f1; color: var(--red); }
.prototype-warning { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 13px 14px; border: 1px solid #eadcb9; border-radius: 13px; background: #fffaf0; color: #705820; }
.prototype-warning > svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.prototype-warning strong { display: block; font-size: 12px; }
.prototype-warning p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; }
.ig-api-note { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; padding: 13px 14px; border: 1px solid #d9d3e3; border-radius: 13px; background: #faf8fc; color: #51495b; }
.ig-api-note > svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.ig-api-note strong { display: block; font-size: 12px; }
.ig-api-note p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; }
.ig-connection-status { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 11px; background: #fff; }
.ig-connection-status.is-connected { border-color: #b9dcca; background: #effaf4; color: #147745; }
.ig-connection-status.is-error { border-color: #efd1d4; background: #fff4f5; color: var(--red); }
.ig-credentials-panel { overflow: hidden; }
.ig-credentials-summary { margin: 0; }
.ig-credentials-toggle {
  width: 100%;
  border: 0;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
.ig-credentials-toggle:hover { background: #fbfafc; }
.ig-credentials-toggle:focus-visible { outline: 2px solid #b9a7ee; outline-offset: -3px; }
.ig-credentials-heading { min-width: 0; flex: 1; }
.ig-credentials-title,
.ig-credentials-heading > span { display: block; }
.ig-credentials-title { font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.ig-credentials-heading > span:not(.ig-credentials-title) { margin-top: 10px; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: normal; }
.ig-credentials-chevron { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--muted); transition: transform .18s ease, background .18s ease; }
.ig-credentials-toggle:hover .ig-credentials-chevron { background: #f2f0f4; color: #111; }
.ig-credentials-chevron svg { width: 18px; height: 18px; }
.ig-credentials-panel.is-open .ig-credentials-chevron { transform: rotate(180deg); }
.ig-credentials-panel .panel-body[hidden] { display: none; }
.ig-credentials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ig-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; flex-wrap: wrap; }
.ig-credentials-grid > .modal-toggle-row, .news-bot-sources { grid-column: 1 / -1; }
.news-bot-sources > span:first-child { font-size: 12px; font-weight: 690; }
/* Horas de revisión: una fila por hora, con su papelera, y el botón de añadir debajo. */
.news-hours-field { grid-column: 1 / -1; }
.news-hours-field > span:first-child { font-size: 12px; font-weight: 690; }
.news-hours-list { display: flex; flex-wrap: wrap; gap: 9px; }
.news-hour-row { display: flex; align-items: center; gap: 6px; }
.news-hour-row .text-input { width: 96px; }
.news-hour-suffix { color: var(--muted); font: 650 12px ui-monospace, monospace; }
.news-hours-field > .small-button { justify-self: start; }
.news-hours-empty { margin: 0; }
/* Aviso del huso: las horas escritas son las de España, no las del reloj del ordenador. */
.news-hours-zone { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; color: #635f69; font-size: 12px; font-weight: 620; }
.news-hours-zone svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Una hora ya guardada se ve cerrada; la que se está escribiendo, todavía en el aire. */
.news-hour-row { padding: 3px 7px 3px 3px; border: 1px solid transparent; border-radius: 12px; transition: background .16s ease, border-color .16s ease; }
.news-hour-row.is-saved { background: #f2faf4; border-color: #cfe9d6; }
.news-hour-row.is-draft { background: #fdf8ec; border-color: #f0e0b8; }
.news-hour-flag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.news-hour-row.is-saved .news-hour-flag { color: #1c7a3d; background: #e3f5e9; }
.news-hour-row.is-draft .news-hour-flag { color: #8a6512; background: #fbeecb; }
/* Estado del guardado, a la izquierda de los botones del formulario. */
.form-save-state { margin-right: auto; align-self: center; font-size: 12px; font-weight: 650; color: var(--muted); }
.form-save-state[data-state="dirty"] { color: #8a6512; }
.form-save-state[data-state="saved"] { color: #1c7a3d; }
.primary-button.is-saved { background: #1c7a3d; box-shadow: 0 8px 20px rgba(28,122,61,.22); }
.primary-button.is-saved:hover { background: #176a34; }
.news-bot-pick { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.news-bot-pick:hover { border-color: #c9c6d0; background: #faf9fb; }
.news-bot-pick input { width: 17px; height: 17px; accent-color: #111; flex: 0 0 auto; }
.news-bot-pick strong, .news-bot-pick small { display: block; }
.news-bot-pick small { color: var(--muted); margin-top: 2px; font-size: 12px; }
.ig-designer-panel { position: sticky; top: 0; }
.ig-designer-stage { display: grid; grid-template-columns: minmax(230px, 300px) minmax(120px, 1fr); gap: 14px; align-items: start; }
.ig-story-canvas { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; border: 8px solid #201e23; box-shadow: 0 18px 42px rgba(30,24,36,.2); background: #000; }
/* Fondo «miniatura difuminada»: capa desenfocada y velo oscuro por detrás de todo. */
.ig-story-canvas.is-blur::before { content: ''; position: absolute; inset: -8%; z-index: 0; background-image: var(--story-blur-image); background-position: center; background-size: cover; filter: blur(4cqw); }
.ig-story-canvas.is-blur::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.38); }
.ig-story-el { position: absolute; transform: translate(-50%, -50%); z-index: 2; max-width: 96%; outline: 1px dashed rgba(255,255,255,.55); outline-offset: 2px; cursor: grab; touch-action: none; user-select: none; }
.ig-story-el.is-moving { cursor: grabbing; outline: 2px solid var(--story-accent); }
.ig-story-label { position: absolute; top: 1px; left: 1px; z-index: 4; padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.64); color: #fff; font-size: 7px; font-weight: 750; line-height: 1; }
.ig-story-grip { position: absolute; right: 1px; bottom: 1px; z-index: 5; width: 13px; height: 13px; border: 1.5px solid #fff; border-radius: 3px; background: var(--story-accent); cursor: nwse-resize; }
.ig-story-channel { display: flex; align-items: center; justify-content: center; gap: 1.82cqw; color: #fff; font-size: 4.36cqw; font-weight: 700; white-space: nowrap; }
.ig-story-dot { width: 3.27cqw; height: 3.27cqw; border-radius: 50%; background: var(--story-accent); }
.ig-story-title { display: grid; place-items: center; overflow: hidden; padding: 2.55cqw; color: #fff; font-weight: 800; line-height: 1.12; text-align: center; text-shadow: 0 2px 7px rgba(0,0,0,.45); }
.ig-story-title-text { display: block; max-width: 100%; line-height: 1.12; text-wrap: balance; }
.ig-story-sticker { color: var(--story-accent); font-size: 8.73cqw; font-weight: 900; letter-spacing: .73cqw; text-align: center; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); animation: ig-bounce .9s ease-in-out infinite; }
.ig-story-sticker.is-gif { animation: none; filter: none; }
.ig-story-gif { width: 100%; display: block; border-radius: 3.64cqw; pointer-events: none; }
@keyframes ig-bounce { 50% { transform: translate(-50%, calc(-50% + 5px)); } }
.ig-story-thumb { overflow: hidden; border-radius: 4.73cqw; box-shadow: 0 8px 22px rgba(0,0,0,.42); background: #23212a; }
.ig-story-thumb.is-square { border-radius: 0; }
.ig-story-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.ig-story-placeholder { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 7px; color: #aaa5b1; }
.ig-story-placeholder svg { width: 30px; height: 30px; }
.ig-story-placeholder small { font-size: 9px; }
.ig-story-cta { max-width: 88%; padding: 2.91cqw 6.18cqw; border-radius: 99px; background: #fff; color: #111; font-size: 4cqw; font-weight: 800; text-align: center; white-space: nowrap; box-shadow: 0 6px 17px rgba(0,0,0,.34); }
.ig-story-cta.is-accent { background: var(--story-accent); color: #fff; }
.ig-story-cta-text { display: flex; align-items: center; justify-content: center; gap: .5em; }
/* La cadena del sticker de enlace es un SVG sin tamaño intrínseco: sin estas reglas el
   navegador le daría el tamaño por defecto de un elemento reemplazado (300×150) y
   reventaría la pastilla. Se dimensiona con la tipografía y se pinta a trazo. */
.ig-story-cta-glyph { flex: none; width: 1.02em; height: 1.02em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ig-story-cta-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Una dirección larga (enlace personalizado) no debe salirse de la pastilla blanca: se
   recorta dentro en vez de derramarse sobre el fondo de la Historia. */
.ig-story-cta-url { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-top: .73cqw; font-size: .78em; font-weight: 700; opacity: .66; letter-spacing: .01em; }
.ig-story-palette { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #faf9fb; }
.ig-story-palette > strong { margin-bottom: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ig-story-palette button { justify-content: flex-start; }
.ig-story-palette button.is-selected { border-color: #b9dcca; background: #effaf4; color: #147745; }
.ig-design-controls { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.ig-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ig-control-grid input[type="color"] { width: 100%; height: 46px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }

.source-list { display: grid; gap: 12px; }
.source-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.source-summary { min-height: 88px; padding: 15px 18px; display: flex; align-items: center; gap: 14px; }
.source-expand { width: 35px; height: 35px; border: 0; background: transparent; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: transform .18s ease; }
.source-expand svg { width: 18px; height: 18px; }
.source-card.is-open .source-expand { transform: rotate(180deg); }
.source-badge { width: 47px; height: 47px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; background: #f5f1f8; color: #111; }
.source-badge svg { width: 23px; height: 23px; }
/* El icono de la fuente es además su acceso directo: abre el canal o el blog original. */
.source-badge-link { border: 0; padding: 0; cursor: pointer; box-shadow: none; transition: background .16s ease, transform .16s ease; }
.source-badge-link:hover, .source-badge-link:focus-visible { background: #ebe4f2; transform: translateY(-1px); }

/* Los botones de carpeta se leen de un vistazo: el mismo tamaño grande que los de la
   barra de Fuentes, con el icono algo más marcado para que no parezcan secundarios. */
.folder-nav-button { min-height: 48px; padding-inline: 19px; border-radius: 13px; white-space: nowrap; }
.folder-nav-button svg { width: 20px; height: 20px; stroke-width: 2.2; }
.folder-nav-back { display: inline-grid; place-items: center; transform: rotate(90deg); }

/* Desplegable con buscador: el catálogo de OpenRouter no cabe en una lista sin filtro. */
.search-select { position: relative; }
.search-select__button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.search-select__button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select__button svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .55; }
.search-select__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 0; max-width: none; padding: 8px; }
.search-select__search { margin-bottom: 8px; }
.search-select__list { max-height: 280px; overflow-y: auto; display: grid; gap: 2px; }
.search-select__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 13px; cursor: pointer; box-shadow: none; }
.search-select__option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select__option svg { width: 16px; height: 16px; flex: 0 0 auto; }
.search-select__option:hover, .search-select__option:focus-visible { background: var(--soft); }
.search-select__option.is-active { background: var(--soft); font-weight: 600; }
.search-select__empty { padding: 14px 11px; color: var(--muted); font-size: 12px; text-align: center; }
.source-copy { min-width: 0; flex: 1; }
.source-copy strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-meta { margin-top: 5px; color: var(--muted); font-size: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.source-actions { display: flex; align-items: center; gap: 8px; }
.source-actions .icon-button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #9199a8; box-shadow: none; transition: color .16s ease, background .16s ease; }
.source-actions .icon-button:not(:disabled):hover, .source-actions .icon-button:not(:disabled):focus-visible { background: #f2f0f4; color: #39404e; }
.source-actions .icon-button svg { width: 22px; height: 22px; }
.source-items { border-top: 1px solid var(--line); max-height: 420px; overflow: auto; }
.source-warning { margin: 14px 18px; padding: 13px 14px; border: 1px solid #f0d3d6; border-radius: 12px; background: #fff4f4; color: #842d35; display: flex; align-items: flex-start; gap: 10px; }
.source-warning > svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.source-warning strong { display: block; font-size: 12px; }
.source-warning p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; }
/* Salida honesta cuando falta una de las dos casas: el usuario decide seguir con una sola. */
.source-warning__actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.source-warning__actions small { font-size: 11px; opacity: .85; }
.source-warning details { margin-top: 8px; font-size: 11px; }
.source-warning ul { margin: 7px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.source-item { min-height: 58px; padding: 12px 20px 12px 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.source-item:last-child { border-bottom: 0; }
.source-item strong { font-size: 13px; font-weight: 570; }
.source-item time { color: var(--muted); font-size: 12px; }
.load-more { width: 100%; border: 0; border-top: 1px solid var(--line); background: #fbfafc; padding: 13px; color: var(--muted); cursor: pointer; }

.switch { position: relative; width: 46px; height: 26px; display: inline-block; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__track { position: absolute; inset: 0; background: #d7d3dc; border-radius: 99px; cursor: pointer; transition: background .18s ease; }
.switch__track::after { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.16); transition: transform .18s ease; }
.switch input:checked + .switch__track { background: #111; }
.switch input:checked + .switch__track::after { transform: translateX(20px); }

.tabs { display: flex; gap: 5px; padding: 5px; background: #f1eff4; border-radius: 13px; width: fit-content; }
.tab-button { min-height: 37px; border: 0; border-radius: 9px; background: transparent; padding: 0 14px; font-weight: 660; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.tab-button.is-active { background: #fff; color: #111; box-shadow: 0 3px 9px rgba(30,25,36,.08); }
.tab-button svg { width: 16px; height: 16px; }
.description-tabs { margin-bottom: 16px; }
.description-editor { display: grid; gap: 8px; margin-top: 10px; }
.public-description-actions { margin-bottom: 12px; }

.create-form { padding: 17px; display: flex; gap: 10px; background: linear-gradient(135deg, #f4f1ff, #fff2f8); border: 1px solid #ebe5f4; border-radius: 18px; margin-bottom: 18px; }
.text-input, .select-input, .modal-input, .url-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
select.select-input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 42px 0 14px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2377737e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}
select.select-input:disabled { background-color: #faf9fb; color: var(--muted); cursor: default; opacity: .72; }
@media (forced-colors: active) {
  select.select-input { -webkit-appearance: auto; appearance: auto; background-image: none; }
}
.text-input:focus, .select-input:focus, .modal-input:focus, .url-input:focus, .editor-textarea:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(20,19,22,.08); }
.create-form .text-input { border: 0; box-shadow: none; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { height: 48px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 750; text-align: left; border-bottom: 1px solid var(--line); padding: 0 16px; }
.data-table td { height: 70px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.table-title { min-width: 240px; }
.table-title strong { display: block; max-width: 560px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-title small { display: block; margin-top: 4px; color: var(--muted); max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
.table-date { color: var(--muted); white-space: nowrap; }

.library-page { width: min(1540px, 100%); }
.library-toolbar { position: relative; z-index: 3; margin-bottom: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.ig-gif-grid { margin-top: 14px; max-height: 380px; overflow: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ig-gif-option { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #f2f0f5; cursor: pointer; }
.ig-gif-option img { width: 100%; height: 110px; object-fit: cover; display: block; }
.ig-gif-option:hover, .ig-gif-option.is-selected { border-color: var(--ink); }
.form-hint { color: var(--muted); font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.library-toolbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.library-main-button { min-height: 48px; padding-inline: 19px; border-radius: 13px; }
.library-export-control { position: relative; display: grid; grid-template-columns: minmax(0, auto) 46px; }
.library-export-control > .library-main-button { border-radius: 13px 0 0 13px; }
.library-export-toggle { width: 46px; min-height: 48px; padding: 0; border-left: 0; border-radius: 0 13px 13px 0; }
.library-export-toggle svg { transition: transform .16s ease; }
.library-export-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.library-export-menu.popover { position: absolute; inset: calc(100% + 8px) 0 auto auto; z-index: 95; width: 310px; }
.library-total { min-height: 48px; padding: 0 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; display: grid; place-items: center; color: var(--muted); font-size: 10px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.library-table-panel { overflow: hidden; }
.library-table-wrap { width: 100%; overflow-x: hidden; }
.library-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.library-table th { height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #fbfafc; color: var(--muted); font-size: 10px; font-weight: 820; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.library-table th:first-child, .library-table td:first-child { width: 46px; padding-right: 0; text-align: center; }
.library-table th:nth-child(3), .library-table td:nth-child(3) { width: 174px; }
.library-table th:nth-child(4), .library-table td:nth-child(4) { width: 124px; }
.library-table th:nth-child(5), .library-table td:nth-child(5) { width: 82px; }
.library-table th:nth-child(6), .library-table td:nth-child(6) { width: 209px; }
.library-table th.has-actions { text-align: right; }
.library-table td { height: 96px; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.library-table tbody tr:last-child td { border-bottom: 0; }
.library-row { transition: background .16s ease; }
.library-row:hover { background: #fcfbfd; }
.library-row.is-selected { background: #f6f3ff; }
.library-check { width: 26px; height: 26px; padding: 0; border: 1.5px solid #cbc6d0; border-radius: 7px; background: #fff; color: #fff; display: inline-grid; place-items: center; cursor: pointer; opacity: .28; transition: opacity .16s ease, border-color .16s ease, background .16s ease; }
.library-row:hover .library-check, .library-check:focus-visible, .library-check.is-checked { opacity: 1; }
.library-check.is-checked { border-color: #111; background: #111; }
.library-check svg { width: 15px; height: 15px; }
.library-autosync-head { display: inline-flex; align-items: center; gap: 6px; }
.library-autosync-all { width: 22px; height: 22px; padding: 0; border: 1px solid #ddd8e2; border-radius: 6px; background: #fff; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; transition: color .16s ease, border-color .16s ease; }
.library-autosync-all:hover, .library-autosync-all:focus-visible { border-color: #111; color: #111; }
.library-autosync-all svg { width: 13px; height: 13px; }
.library-source-cell { min-width: 0; display: flex; align-items: center; gap: 12px; }
.library-source-cell > span:last-child { min-width: 0; }
.library-source-cell strong, .library-source-cell small, .library-date strong, .library-date small { display: block; }
.library-source-cell strong { max-width: 100%; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.library-source-cell small, .library-date small { margin-top: 6px; color: var(--muted); font-size: 11px; }
.library-date { min-width: 0; }
.library-date strong { margin-top: 2px; font-size: 13px; }
.library-date small:first-child { margin-top: 0; letter-spacing: .06em; text-transform: uppercase; font-size: 9px; font-weight: 800; }
.library-status { width: fit-content; min-height: 30px; padding: 0 12px; border: 1px solid #ddd8e2; border-radius: 99px; background: #f8f7f9; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 740; white-space: nowrap; }
.library-status i { width: 7px; height: 7px; border-radius: 50%; background: #aba6b0; }
.library-status.is-completed { border-color: #bce7ce; background: #effbf4; color: #159052; }
.library-status.is-completed i { background: #1fba69; }
.library-status.is-running { border-color: #c9d8f0; background: #f1f6ff; color: #3a6fa8; }
.library-status.is-running i { background: #4c83bc; animation: pulse-dot 1.1s ease-in-out infinite; }
.library-status.is-warning { border-color: #efddae; background: #fff9e9; color: #9b7414; }
.library-status.is-warning i { background: #d49a12; }
.library-status.is-error { border-color: #f0c9cd; background: #fff3f4; color: #a23943; }
.library-status.is-error i { background: #d84d57; }
@keyframes pulse-dot { 50% { opacity: .35; } }
.library-switch { width: 52px; height: 30px; }
.library-switch .switch__track::after { width: 24px; height: 24px; }
.library-switch input:checked + .switch__track::after { transform: translateX(22px); }
.library-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.library-action { width: 29px; height: 36px; flex: 0 0 29px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #989ead; display: grid; place-items: center; cursor: pointer; box-shadow: none; transition: color .16s ease, background .16s ease; }
.library-action:not(:disabled):hover, .library-action:not(:disabled):focus-visible { background: #f2f0f4; color: #626977; }
.library-action.is-danger:not(:disabled):hover { background: #fff1f2; color: #c23c45; }
.library-action:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.library-action.is-syncing svg { animation: spin .8s linear infinite; }
.library-action svg { width: 23px; height: 23px; stroke-width: 2.35; }
@media (max-width: 1180px) {
  .library-table th, .library-table td { padding-inline: 10px; }
  .library-table th:nth-child(3), .library-table td:nth-child(3) { width: 148px; }
  .library-table th:nth-child(4), .library-table td:nth-child(4) { width: 112px; }
  .library-table th:nth-child(5), .library-table td:nth-child(5) { width: 70px; }
  .library-table th:nth-child(6), .library-table td:nth-child(6) { width: 193px; }
  .library-source-cell .source-badge { width: 40px; height: 40px; }
  .library-source-cell strong { font-size: 13px; }
  .library-actions { gap: 4px; }
}
.library-empty { min-height: 340px; }
/* .modal--wide y .modal--tall viven DESPUÉS de la regla base .modal (misma especificidad):
   aquí arriba la base les pisaba el ancho y dejaba el modal en 560px con scroll externo. */
/* Separador «o» entre las dos formas de traer el guión. */
.modal-separator { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 12px; }
.modal-separator::before, .modal-separator::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.library-preview-list { max-height: 520px; overflow: auto; gap: 8px; }
.library-preview-item { width: 100%; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.library-preview-item:hover { border-color: #cbc5d1; background: #faf8fc; }
.library-preview-item > span:nth-child(2) { min-width: 0; }
.library-preview-item strong, .library-preview-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-preview-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.library-preview-item > svg { width: 18px; height: 18px; color: var(--muted); }
.library-item-content { max-height: 560px; overflow: auto; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fbfafc; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.library-date-grid { grid-template-columns: 1fr 1fr; }

.job-list { display: grid; gap: 9px; }
.job-row { border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; }
.job-row strong { display: block; font-size: 13px; }
.job-row small { color: var(--muted); }
.job-row.is-linked { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.job-row.is-linked:hover { border-color: #bdb6ca; box-shadow: 0 7px 20px rgba(35,28,45,.08); transform: translateY(-1px); }
.is-job-focus { animation: job-focus 1.6s ease both; }
@keyframes job-focus { 0%, 100% { box-shadow: none; } 25%, 70% { box-shadow: 0 0 0 3px rgba(119,86,210,.24); } }
.job-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.job-controls .secondary-button:disabled { opacity: .5; cursor: wait; }
.progress { height: 4px; background: #ece9ef; border-radius: 99px; overflow: hidden; margin-top: 9px; }
.progress span { display: block; height: 100%; background: #111; border-radius: inherit; transition: width .35s ease; }
.job-status { font-size: 11px; font-weight: 720; padding: 5px 8px; border-radius: 99px; background: #f0eef3; color: var(--muted); }
.job-status.is-failed { background: #fff0f1; color: var(--red); }
.job-error-text { display: inline-flex; align-items: center; gap: 5px; color: var(--red); margin-top: 6px; }
.job-error-text svg { width: 13px; height: 13px; flex: none; }
.job-status.is-completed { background: #eaf8f1; color: #147745; }

/* GOOD y BAD se comparan como dos mitades del mismo estudio. En ancho normal se leen lado a
   lado; en una ventana estrecha se apilan sin encoger los campos ni provocar scroll lateral. */
#teach-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#teach-form .form-grid > * { min-width: 0; }
@media (max-width: 900px) {
  #teach-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Aprendiendo una corrección. Mismos márgenes, radios y tipografía que el resto de avisos
   de la aplicación: es una fila más dentro de la tarjeta, no un cartel aparte. */
.learning-state { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #faf9fc; }
.learning-state__copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.learning-state__copy strong { font-size: 12px; font-weight: 720; }
.learning-state__copy small { font-size: 11px; color: var(--muted); }
.learning-state .progress { margin-top: 6px; }
.learning-state svg { width: 14px; height: 14px; flex: none; }
.learning-state.is-done { background: #f4fbf7; border-color: #cdeadb; }
.learning-state.is-done svg { color: #147745; }
.learning-state.is-failed { background: #fff7f7; border-color: #f6d8db; }
.learning-state.is-failed svg { color: var(--red); }
.learned-rules__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.learned-rule { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.learned-rule__copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.learned-rule__copy span { font-size: 12px; line-height: 1.45; }
.learned-rule__copy small { font-size: 11px; color: var(--muted); }

.skill-viewer { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 600px; }
.skill-toolbar { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.skill-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border-radius: 99px; background: #efedf4; color: #514b58; font-size: 11px; font-weight: 690; }
.badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.badge.is-green { background: #eaf8f1; color: #117345; }
/* Pastilla de «casa» (qué modelo hace este trabajo). Va en la cabecera de un panel, junto a
   su título, así que necesita el mismo peso visual que el resto de controles de la cabecera
   y no el de una etiqueta suelta: una sola línea, borde propio y sin partirse en dos. */
.badge--house { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: #2a2630; font-size: 11.5px; font-weight: 720; letter-spacing: .01em; white-space: nowrap; align-self: center; }
.badge--house svg { width: 13px; height: 13px; color: var(--muted); }
.skill-code { margin: 0; padding: 24px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: #17161a; color: #e9e5ec; font: 12px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }

/* Memoria del proyecto: índice a la izquierda, documento a la derecha. En pantalla estrecha el
   índice pasa arriba y se queda con su propio alto, para que el documento siga siendo lo grande. */
.memory-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.memory-index { display: flex; flex-direction: column; gap: 4px; max-height: 620px; overflow: auto; padding-right: 4px; }
.memory-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.memory-item:hover { background: #f4f2f8; }
.memory-item.is-active { background: #efedf4; border-color: var(--line); }
.memory-item__kind { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.memory-item__title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.memory-doc { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 560px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.memory-doc .skill-code { max-height: 620px; }
@media (max-width: 900px) {
  .memory-layout { grid-template-columns: minmax(0, 1fr); }
  .memory-index { max-height: 220px; }
}

.popover {
  position: fixed;
  z-index: 80;
  top: 70px;
  min-width: 310px;
  max-width: 390px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  animation: pop .14s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.popover--project { left: calc(var(--sidebar) + 34px); }
/* Un panel de modelo NUNCA puede desbordarse: lo que escupe una CLI trae rutas larguísimas
   sin espacios. Se acota en alto y en ancho y el contenido rompe palabra si hace falta. */
.popover--model { right: 80px; width: 360px; max-height: min(76vh, 760px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.popover--model * { min-width: 0; }
.popover--subscription { right: 78px; }
.subscription-mode { margin-top: 7px; font-weight: 600; color: var(--text); }
.subscription-status { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; }
.subscription-providers { display: grid; gap: 7px; }
.subscription-provider { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.subscription-provider strong { color: var(--muted); }
.popover--tasks { right: 30px; width: 400px; max-height: 60vh; overflow-y: auto; }
.popover--cards { left: calc(var(--sidebar) + 34px); width: 340px; max-height: 60vh; overflow-y: auto; }
.card-search-input { width: calc(100% - 22px); margin: 0 11px 8px; }
.popover--flag { right: 30px; width: 220px; min-width: 220px; }
.popover-empty { padding: 16px 12px; color: var(--muted); font-size: 13px; }

/* Cupo real de la suscripción. El color avisa ANTES de que llegue a ser un problema. */
.quota-block { border-top: 1px solid var(--line); margin: 4px 0 2px; padding-top: 12px; display: grid; gap: 12px; }
.quota-bar { display: grid; gap: 5px; }
.quota-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.quota-bar__head strong { font-size: 17px; color: var(--ink, #17161a); }
.quota-bar__track { height: 6px; border-radius: 99px; background: #eceaf1; overflow: hidden; }
.quota-bar__fill { display: block; height: 100%; border-radius: 99px; background: #37b26a; transition: width .5s ease; }
.quota-bar__fill.is-warning { background: #e0a11d; }
.quota-bar__fill.is-critical { background: #d64545; }
.quota-bar small { font-size: 11px; color: var(--muted); }

/* Acceso en curso: el enlace de reserva NO puede desaparecer del panel. */
.login-block { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #f7f6fa; display: grid; gap: 6px; }
.login-block p { margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.login-block p svg { width: 15px; height: 15px; flex: 0 0 auto; }
.login-block__link { font-size: 11px; color: #4b3bd6; text-decoration: underline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
/* Casilla del código del acceso: una sola línea, con el mismo borde y radio que el resto de
   campos del panel para que no desentone dentro del bloque de acceso. */
.login-code { display: flex; gap: 6px; align-items: center; }
.login-code-input { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: inherit; font-family: inherit; }
.login-code-input:focus { outline: none; border-color: #4b3bd6; }
.login-block.is-error { background: #fdf1f1; border-color: #f0cfcf; }
.login-block.is-error p { color: #a5322f; }
/* Semáforo de tareas. En el chip de la barra: verde parado, naranja latiendo mientras haya
   trabajo, rojo si algo ha fallado. En cada FILA de la lista se distingue además lo que se
   está haciendo ahora (verde latiendo) de lo que espera turno (naranja latiendo), porque con
   varios procesos pendientes era imposible saber cuál era el que trabajaba de verdad. */
.task-chip .provider-glyph svg { width: 17px; height: 17px; }
.task-dot.is-idle { background: #37b26a; }
.task-dot.is-done { background: #37b26a; }
.task-dot.is-running { background: #17a34a; box-shadow: 0 0 0 3px rgba(23,163,74,.16); animation: task-blink 1.1s ease-in-out infinite; }
.task-dot.is-pending { background: #f0a233; animation: task-blink 1.1s ease-in-out infinite; }
/* Pausa pedida por el usuario: el mismo naranja de «pendiente», sin parpadeo, porque no
   avanza solo hasta que lo retomen. */
.task-dot.is-paused { background: #f0a233; box-shadow: 0 0 0 3px rgba(240,162,51,.14); animation: none; }
.task-dot.is-cancelled { background: #bbb6c1; }
.task-dot.is-failed { background: #e0524c; }
@keyframes task-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .task-dot { animation: none; } }
/* Arrastrar una fila de la cola cambia su prioridad. El hueco se marca en directo mientras
   se arrastra y el orden se aplica al soltar. */
.task-item.is-movable { cursor: grab; }
.task-item.is-movable:active { cursor: grabbing; }
.task-item.is-dragging { opacity: .45; }
.task-item.is-drop-before { box-shadow: inset 0 2px 0 0 #7756d2; }
.task-item.is-drop-after { box-shadow: inset 0 -2px 0 0 #7756d2; }
.task-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; }
.task-item[disabled] { opacity: .6; cursor: default; }
.task-item__state { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.popover-title { padding: 11px 11px 8px; font-size: 12px; color: var(--muted); font-weight: 720; text-transform: uppercase; letter-spacing: .06em; }
.popover-title--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.popover-title--row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-title__action { flex: 0 0 auto; width: 28px; height: 28px; }
.popover-title__action svg { width: 15px; height: 15px; }
/* Aviso de un modelo: recortado a tres líneas y siempre dentro de la tarjeta. Desplegarlo
   enseña el volcado completo, que sigue sin poder salirse porque parte la palabra. */
.model-notice { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; background: #f7f6fa; display: grid; gap: 6px; justify-items: start; max-width: 100%; }
.model-notice.is-error { background: #fdf1f1; border-color: #f0cfcf; }
.model-notice__text { margin: 0; font-size: 11px; line-height: 1.45; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.model-notice__text.is-expanded { display: block; max-height: 190px; overflow-y: auto; }
.model-notice.is-error .model-notice__text { color: #a5322f; }
.model-notice__toggle { min-height: 26px; padding-inline: 9px; font-size: 11px; }
.model-popover-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.model-priority { display: flex; align-items: center; gap: 9px; padding: 2px 1px 0 0; }
.model-priority > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.model-priority .small-button { min-height: 32px; padding-inline: 11px; white-space: nowrap; }
.popover-item { width: 100%; min-height: 46px; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left; }
.popover-item:hover, .popover-item.is-active { background: #f3f1f6; }
.popover-item > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.popover-item__copy { min-width: 0; flex: 1; }
.popover-item__copy strong, .popover-item__copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popover-item__copy small { color: var(--muted); margin-top: 2px; font-size: 10px; }
.popover-divider { height: 1px; background: var(--line); margin: 7px 3px; }
.model-form { padding: 8px 10px 12px; display: grid; gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field label { font-size: 12px; font-weight: 690; }
.form-help { color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
.range-row input { accent-color: #111; }
.range-label { min-height: 30px; border-radius: 8px; background: #f0edf3; display: grid; place-items: center; font: 700 11px ui-monospace, monospace; }
.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-option { position: relative; }
.role-option input { position: absolute; opacity: 0; }
.role-option span { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.role-option input:checked + span { border-color: #111; background: #f2f0f5; color: #111; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.auth-state { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 12px; }
.auth-state > .status-dot { margin-top: 4px; flex: 0 0 auto; }
.auth-state__copy { display: grid; gap: 2px; min-width: 0; }
.auth-account { max-width: 155px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.auth-actions { display: flex; flex: 0 0 auto; gap: 6px; }
/* Cuenta suplente de Codex: un bloque secundario dentro del panel de Codex, nunca una
   pastilla propia en la barra de modelos. */
.backup-account { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #faf9fc; }
.backup-account__head { display: grid; gap: 3px; }
.backup-account__head strong { font-size: 12px; }
.backup-account .auth-row { border-top: 0; padding-top: 0; }
.timestamp-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 150px auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.timestamp-row + .timestamp-row { margin-top: 10px; }
.timestamp-thumb { width: 92px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: #f1eef5; display: grid; place-items: center; }
.timestamp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.timestamp-copy { min-width: 0; display: grid; gap: 4px; }
.timestamp-copy strong, .timestamp-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timestamp-copy small { color: var(--muted); font-size: 11px; }
.timestamp-mode { min-height: 42px; }
.timestamp-script-input { min-height: 280px; font-family: inherit; }
.timestamp-editor-toolbar { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.timestamp-editor-toolbar .secondary-button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.timestamp-rich-editor { min-height: 340px; max-height: 55vh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); line-height: 1.65; outline: none; }
.timestamp-rich-editor:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22, 22, 22, .08); }
.timestamp-rich-editor h2 { font-size: 24px; margin: 24px 0 10px; }
.timestamp-rich-editor h3 { font-size: 19px; margin: 20px 0 8px; }
.timestamp-rich-editor blockquote { border-left: 3px solid var(--ink); margin-left: 0; padding-left: 16px; color: var(--muted); }
.timestamp-html-input { min-height: 340px; max-height: 55vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.timestamp-review { grid-column: 2 / -1; width: 100%; }
.timestamp-review textarea { margin: 12px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* El guardado ahora es negro, pero conserva el píxel de borde que tenía el botón blanco:
   así no cambia ni dos píxeles de ancho ni su posición al lado del resto de controles. */
.timestamp-save-button { border: 1px solid transparent; }
.release-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.release-checks .badge { display: inline-flex; align-items: center; gap: 5px; }
.release-checks svg { width: 14px; height: 14px; }

/* Gestión › Título: la lista votada, el ganador guardado y la memoria de la sección. */
.title-option-list { padding: 5px 17px 16px; }
.title-option { display: block; padding: 7px 0; list-style: none; }
.title-option__main { display: flex; align-items: center; gap: 12px; }
.title-option + .title-option { border-top: 1px solid var(--line); }
/* La versión reescrita se queda DEBAJO del original, nunca en su lugar: verlas juntas es
   lo que deja claro qué se cambió y por qué. */
.title-option__edited { margin: 6px 0 2px 14px; padding-left: 12px; border-left: 2px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.title-option__edited strong { font-size: 13px; }
.title-option__edited small { color: var(--muted); font-size: 11px; line-height: 1.45; flex-basis: 100%; }
.title-option__edit { margin: 8px 0 4px 14px; padding-left: 12px; border-left: 2px solid #7658c9; display: grid; gap: 10px; }
.title-notes textarea, .doodle-directions textarea { width: 100%; margin: 0 17px 12px; max-width: calc(100% - 34px); }
.title-notes .panel-header-actions, .doodle-directions .panel-header-actions { padding: 0 17px 14px; justify-content: space-between; }
.doodle-directions { margin-bottom: 16px; }
.doodle-directions > .form-help { padding: 0 17px 10px; }
.title-option__text { flex: 1; font-size: 13px; line-height: 1.4; }
.title-option.is-winner .title-option__text { font-weight: 700; }
/* El título elegido es la conclusión de la tarjeta: manda él. «Ver títulos» y las notas
   quedan por debajo, en su papel de secciones secundarias. */
.title-winner {
  margin: 14px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 17px;
  line-height: 1.35;
  padding: 13px 16px;
  border-radius: 14px;
  background: #f4f2ff;
  border: 1.5px solid #d9d3ef;
}
.title-winner strong { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); flex: none; font-weight: 700; }
.title-winner svg { width: 16px; height: 16px; flex: none; align-self: center; color: #17a34a; }
.title-winner__text { font-weight: 600; flex: 1; min-width: 0; }
.title-winner .badge { font-size: 11px; align-self: center; }
.title-set-row .title-set > summary { min-height: 50px; padding: 11px 15px; }
.title-set-row .title-set > summary strong { font-size: 13px; font-weight: 600; color: var(--muted); }
.title-custom { display: flex; align-items: flex-end; gap: 12px; padding: 0 17px 16px; }
.title-custom .form-field { flex: 1; margin: 0; }
.title-memory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.title-memory-stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.title-memory-stat strong { display: block; font-size: 19px; }
.title-memory-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.title-memory-notes { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.doodle-default-style { max-width: 420px; margin-bottom: 18px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(16, 14, 19, .36); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 30px; animation: fade .14s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: min(760px, calc(100vh - 60px)); overflow-y: auto; overflow-x: hidden; background: #fff; border-radius: 22px; box-shadow: 0 28px 90px rgba(16,14,20,.22); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal__header { padding: 23px 25px 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.modal__header h2 { margin: 0 0 6px; font-size: 24px; }
.modal__header p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* El título cede el espacio, nunca los botones: con nombres de vídeo largos el aspa de
   cerrar se quedaba fuera de la ventana y no se podía pulsar. */
.modal__heading { min-width: 0; }
.modal__heading h2 { overflow-wrap: anywhere; }
.modal__header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.modal--transcript { width: min(1040px, 100%); }
.modal--wide { width: min(820px, 100%); }
/* El editor de guión necesita sitio de verdad: es donde se pega un texto largo. El modal
   entero cabe SIEMPRE en pantalla — cabecera, botones y pie quedan a la vista y lo único
   que hace scroll es el propio guión. */
.modal--tall { width: min(1280px, calc(100vw - 60px)); height: min(880px, calc(100vh - 60px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; overflow: hidden; }
.modal--tall .modal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal--tall .timestamp-rich-editor, .modal--tall .timestamp-html-input { flex: 1; min-height: 160px; overflow-y: auto; resize: none; }
.chat-page { max-width: 1100px; }
.chat-panel { min-height: calc(100vh - 210px); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.chat-history { overflow-y: auto; align-content: start; }
.chat-turn { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; }
.chat-turn__user { justify-self: end; max-width: 76%; padding: 10px 13px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; line-height: 1.5; white-space: pre-wrap; }
.chat-turn__answer { max-width: 82%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--lilac); line-height: 1.55; white-space: pre-wrap; }
.chat-turn small { color: var(--muted); }
.chat-composer { border-top: 1px solid var(--line); padding: 16px 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.chat-model-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.chat-model-fields .form-field { gap: 5px; }
.chat-composer__message { padding: 12px 14px; }
.chat-composer textarea { min-height: 76px; resize: vertical; }
.thumbnail-compose-modal { width: min(940px, calc(100vw - 48px)); }
.thumbnail-compose-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto 130px; gap: 14px; align-items: end; }
.thumbnail-asset-actions, .thumbnail-asset-list { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbnail-library-grid { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.thumbnail-asset-list .badge { display: inline-flex; align-items: center; gap: 5px; }
.thumbnail-asset-list .icon-button { width: 22px; height: 22px; padding: 3px; }
/*
  Capturas pegadas en la ventana de enseñar. Mismos radios, borde y separación que las demás
  listas de la aplicación: la ventana es la misma en todas las tarjetas y tiene que verse igual.
*/
/* El hueco fijo donde se refresca «está aprendiendo» sin repintar la ventana entera. Vacío no
   ocupa nada: el cuerpo del diálogo es una rejilla con separación, así que un div vacío dejaba
   un escalón de más entre las capturas y los botones que no tiene ninguna otra ventana. */
.teach-learning:empty { display: none; }
.teach-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.teach-shot { position: relative; display: inline-flex; width: 96px; height: 60px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--soft); }
.teach-shot img { width: 100%; height: 100%; object-fit: cover; }
.teach-shot--broken { border-color: color-mix(in srgb, var(--red, #d94b52) 45%, var(--line)); }
.teach-shot__broken { width: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px; color: var(--red, #d94b52); text-align: center; }
.teach-shot__broken svg { width: 18px; height: 18px; }
.teach-shot__broken small { font-size: 9px; line-height: 1.15; }
.teach-shot .icon-button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.teach-paste-zone { min-height: 68px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 13px; background: var(--soft); display: flex; align-items: center; gap: 11px; color: var(--muted); }
.teach-paste-zone > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.teach-paste-zone strong, .teach-paste-zone small { display: block; }
.teach-paste-zone strong { color: var(--ink); font-size: 13px; }
.teach-paste-zone small { margin-top: 3px; }
.teach-paste-zone.is-full { border-style: solid; opacity: .72; }
.teach-counter { justify-self: end; margin-top: -3px; }
.thumbnail-reference-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.thumbnail-reference-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.thumbnail-reference-list .badge { display: inline-flex; align-items: center; gap: 6px; }
.thumbnail-reference-list .icon-button { width: 22px; height: 22px; padding: 3px; }
.modal--sketch { width: min(1120px, calc(100vw - 40px)); max-height: calc(100vh - 40px); }
#thumbnail-sketch-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #fff; border: 1px solid var(--line); border-radius: 12px; touch-action: none; cursor: crosshair; }
.modal__body { padding: 5px 25px 24px; display: grid; gap: 16px; }
/* Sin este `min-width: 0` un texto largo sin punto de corte (la dirección de la fuente
   detectada) fija el ancho mínimo de la columna y saca una barra horizontal. Se aplica a
   los hijos, no a `.modal__body`, para no pisar las columnas de `.library-date-grid`. */
.modal__body > * { min-width: 0; }
.modal__footer { padding: 17px 25px 23px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }
/* «Mejorar» puede contener seis capturas y dos rutas largas. Cabecera y acciones permanecen
   visibles; solo el contenido central hace scroll y los botones pueden envolver en el mínimo. */
#teach-form { display: flex; flex-direction: column; overflow: hidden; }
#teach-form .modal__header, #teach-form .modal__footer { flex: 0 0 auto; }
#teach-form .modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#teach-form .modal__footer { flex-wrap: wrap; }
#teach-form .modal__footer button { max-width: 100%; white-space: normal; }
.url-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.detected-source { padding: 14px; border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; gap: 12px; background: #faf9fb; }
.detected-source__icon { width: 40px; height: 40px; border-radius: 11px; background: #111; color: #fff; display: grid; place-items: center; }
.detected-source__icon svg { width: 20px; height: 20px; }
.detected-source__copy { min-width: 0; }
.detected-source__copy strong, .detected-source__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detected-source__copy small { color: var(--muted); margin-top: 3px; }
.detected-source > svg { width: 22px; height: 22px; flex: 0 0 auto; margin-left: auto; }
.modal-toggle-row { min-height: 76px; border: 1px solid var(--line); border-radius: 13px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.modal-toggle-row strong, .modal-toggle-row small { display: block; }
.modal-toggle-row small { color: var(--muted); margin-top: 4px; line-height: 1.4; }
.bulk-toggle { justify-self: start; border: 0; background: none; padding: 0; color: var(--muted); font-size: 12px; font-weight: 690; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .16s ease; }
.bulk-toggle:hover { color: var(--ink); }
.bulk-toggle:disabled { opacity: .45; cursor: default; }
.modal-inline-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bulk-input { width: 100%; min-height: 190px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; padding: 12px 14px; color: var(--ink); outline: none; resize: vertical; line-height: 1.65; transition: border-color .16s ease, box-shadow .16s ease; }
.bulk-input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(20,19,22,.08); }
.bulk-input:disabled { background: #faf9fb; color: var(--muted); }
.bulk-progress { display: grid; gap: 7px; }
.bulk-progress__bar { height: 6px; border-radius: 999px; background: #efedf2; overflow: hidden; }
.bulk-progress__bar i { display: block; height: 100%; border-radius: 999px; background: #141316; transition: width .25s ease; }
.bulk-progress small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .source-warning { margin: 0; }
.danger-copy { padding: 14px; background: #fff3f3; border: 1px solid #f1d7d9; border-radius: 13px; color: #873038; line-height: 1.55; }

.toast-region { position: fixed; z-index: 200; right: 24px; bottom: 24px; display: grid; gap: 9px; pointer-events: none; }
.toast { width: min(380px, calc(100vw - 48px)); min-height: 54px; border-radius: 13px; background: #171619; color: #fff; box-shadow: var(--shadow); padding: 13px 15px; display: flex; align-items: center; gap: 11px; animation: toast-in .2s ease-out; /* El aviso no come clics: si cae encima de un botón, el botón sigue funcionando. */ pointer-events: none; }
.toast > svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* El aviso corta la palabra si hace falta: una ruta `file:///…` sin espacios lo sacaba de
   la pantalla por la derecha. Y se acota en alto para que nunca tape media ventana. */
.toast > span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; max-height: 40vh; overflow: hidden; }
.toast.is-error { background: #8f2830; }
.toast.is-success { background: #176d46; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.editor-shell { width: 100vw; height: 100vh; display: grid; grid-template-columns: 76px 350px minmax(0, 1fr); background: #fff; }
.editor-nav { border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; background: #fff; }
.editor-nav .brand-mark { width: 42px; height: 42px; }
.editor-nav .icon-button { width: 42px; height: 42px; }
/* `min-height: 0` es lo que hace que estas dos columnas SE PUEDAN DESPLAZAR con la rueda. Sin
   él, una casilla de rejilla crece hasta el alto de todo su contenido: medían lo que medía el
   artículo entero, nunca aparecía barra de desplazamiento y el sobrante caía en el `body`, que
   está tapado. Sólo se movían con las flechas, arrastrando el cursor línea a línea. */
.notes-rail { border-right: 1px solid var(--line); background: #faf9fb; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.notes-header { padding: 22px 20px 17px; border-bottom: 1px solid var(--line); }
.notes-header h2 { font-size: 18px; margin-bottom: 6px; }
.notes-header p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.notes-list { overflow: auto; padding: 14px; display: grid; align-content: start; gap: 10px; }
.note-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }
.note-card__type { display: inline-flex; padding: 4px 7px; border-radius: 99px; background: #eeeaf2; color: #625b68; text-transform: uppercase; letter-spacing: .05em; font-size: 9px; font-weight: 760; margin-bottom: 9px; }
.note-card p { margin: 0; font-size: 12px; line-height: 1.5; }
.note-card details { margin-top: 9px; color: var(--muted); font-size: 11px; }
.note-card details p { margin-top: 7px; font-size: 11px; }
.article-editor { min-width: 0; min-height: 0; display: grid; grid-template-rows: 74px 56px minmax(0, 1fr); }
.editor-header { border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.editor-title { min-width: 0; }
.editor-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-title small { color: var(--muted); display: block; margin-top: 4px; }
.version-toggle { display: flex; gap: 4px; padding: 4px; background: #f0eef3; border-radius: 11px; }
.version-toggle button { border: 0; background: transparent; border-radius: 8px; padding: 8px 11px; color: var(--muted); font-size: 12px; font-weight: 670; cursor: pointer; }
.version-toggle button svg { width: 15px; height: 15px; }
.version-toggle button.is-active { background: #fff; color: #111; box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.editor-toolbar { border-bottom: 1px solid var(--line); padding: 0 22px; display: flex; align-items: center; gap: 4px; }
.toolbar-divider { width: 1px; height: 23px; background: var(--line); margin: 0 5px; }
.save-state { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.editor-body { min-height: 0; overflow: auto; background: #f7f6f8; padding: 30px; }
.editor-page { width: min(900px, 100%); min-height: calc(100vh - 220px); margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 13px 40px rgba(30,24,36,.06); padding: 46px 58px; }
.editor-textarea { width: 100%; min-height: calc(100vh - 310px); resize: none; border: 0; outline: none; color: #242126; background: transparent; font: 17px/1.78 Georgia, "Times New Roman", serif; tab-size: 2; }
.editor-textarea[readonly] { color: #3f3b42; cursor: default; }
/* El editor visual ocupa EXACTAMENTE la misma caja que el textarea al que sustituye: misma
   anchura, mismo alto mínimo y la misma tipografía de lectura. Así cambiar de pestaña no
   mueve la página ni un píxel. Los títulos y las citas heredan el aire de la aplicación. */
.editor-rich { width: 100%; min-height: calc(100vh - 310px); border: 0; outline: none; color: #242126; background: transparent; font: 17px/1.78 Georgia, "Times New Roman", serif; }
.editor-rich[contenteditable="false"] { color: #3f3b42; cursor: default; }
.editor-rich > * { margin: 0 0 18px; }
.editor-rich > *:last-child { margin-bottom: 0; }
.editor-rich h1 { font-size: 31px; line-height: 1.25; margin: 30px 0 14px; }
.editor-rich h2 { font-size: 26px; line-height: 1.28; margin: 30px 0 12px; }
.editor-rich h3 { font-size: 21px; line-height: 1.35; margin: 24px 0 10px; }
.editor-rich h4, .editor-rich h5, .editor-rich h6 { font-size: 18px; margin: 20px 0 8px; }
.editor-rich blockquote { border-left: 3px solid var(--ink); margin: 0 0 18px; padding-left: 16px; color: var(--muted); }
.editor-rich ul, .editor-rich ol { padding-left: 24px; }
.editor-rich li { margin-bottom: 6px; }
.editor-rich code { font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f4f2f6; border-radius: 5px; padding: 1px 5px; }
/* El enlace se ve como un enlace: hasta ahora se leía el `[texto](dirección)` en crudo dentro
   del folio, que es justo la clase de marca que este recuadro venía a quitar de delante. */
.editor-rich a { color: #4b3fa8; text-decoration: underline; text-underline-offset: 2px; }
/* La línea en blanco del Markdown SIGUE SIENDO un párrafo (hay que devolverla al guardar),
   pero ocupando un renglón entero abría un boquete entre párrafo y párrafo y el folio no se
   leía como el artículo publicado. Se queda como aire, no como línea. */
.editor-rich > p:has(> br:only-child) { margin: 0; line-height: .9; }
/* La superficie de escritura no lleva recuadro de foco: el recuadro negro general encerraba
   el folio entero en cuanto se pinchaba dentro. El cursor ya dice dónde se está escribiendo. */
.editor-rich:focus-visible, .editor-textarea:focus-visible { outline: none; }
/* «H2» y «H3» son texto, no dibujos: sin esto salían más grandes y más negros que el resto
   de la barra y parecían de otra herramienta. Se igualan al tamaño de los iconos. */
.article-editor .editor-toolbar .icon-button { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
/* Botón encendido: el formato que hay AHORA MISMO bajo el cursor, como en cualquier editor. */
.article-editor .editor-toolbar .icon-button.is-active { background: #e7e3ee; color: #100f14; box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .12); }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* En un portátil (1440-1512 px de ancho) las tres pastillas de modelo más la de tareas ya no
   caben con el nombre del proveedor escrito: la inicial del icono (CL/CX/GM) lo dice igual,
   así que se suelta ese texto antes de tener que recortar el nombre del modelo. */
@media (max-width: 1540px) {
  .model-chip:not(.task-chip) .model-chip__provider { display: none; }
}

@media (max-width: 1260px) {
  :root { --sidebar: 210px; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-chip__provider { display: none; }
  .content-scroll { padding-inline: 28px; }
  .editor-shell { grid-template-columns: 70px 300px minmax(0, 1fr); }
  .ig-stories-layout { grid-template-columns: 1fr; }
  .ig-designer-panel { position: static; }
  .library-toolbar { align-items: flex-start; flex-direction: column; }
  .library-toolbar__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 980px) {
  :root { --sidebar: 78px; }
  .brand > span:last-child, .nav-button span, .side-nav__label { display: none; }
  .sidebar { padding-inline: 12px; align-items: center; }
  .brand { padding: 0; }
  .nav-button { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: 1fr; }
  .video-card-grid { grid-template-columns: 1fr; }
  .doodle-video__summary { grid-template-columns: auto minmax(0, 1fr); }
  .doodle-video__controls { grid-column: 1 / -1; justify-content: flex-end; }
  .template-panel__header { align-items: flex-start; flex-direction: column; }
  .template-header-actions { width: 100%; min-width: 0; margin-left: 0; }
  .usage-summary { grid-template-columns: 22px minmax(0, 1fr) 90px; }
  .usage-summary > span:last-child { display: none; }
  .project-button { flex-basis: 180px; }
  .popover--project { left: 96px; }
  .editor-shell { grid-template-columns: 68px minmax(230px, 30vw) minmax(0, 1fr); }
  .editor-page { padding: 36px; }
  .ig-credentials-grid, .ig-control-grid { grid-template-columns: 1fr; }
  .ig-inline-form { grid-template-columns: 1fr; }
  .library-date-grid { grid-template-columns: 1fr; }
}

/* --- Vídeo › Transcripciones --------------------------------------------- */
.transcript-row + .transcript-row { margin-top: 10px; }
.transcript-row__open {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.transcript-row__open:hover { border-color: var(--line-strong); background: #fbfafc; }
.transcript-row__copy { min-width: 0; }
.transcript-row__copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.transcript-row__copy small { display: block; color: var(--muted); font-size: 12px; }
.transcript-row__hint { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.transcript-row__hint svg { width: 16px; height: 16px; }
.transcript-view { display: grid; gap: 10px; max-height: 58vh; overflow-y: auto; padding-right: 6px; }
.transcript-line { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.transcript-view--plain .transcript-line { grid-template-columns: minmax(0, 1fr); }
.transcript-line__at { color: #e0674f; font-variant-numeric: tabular-nums; }
/* Buscador de la transcripción (⌘F): barra encima del texto, con contador y saltos. */
.transcript-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; margin-bottom: 14px; }
.transcript-search__count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.transcript-hit { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.transcript-hit.is-active { background: #ffb020; box-shadow: 0 0 0 2px rgba(255, 176, 32, .35); }
/* Vídeo › Descripción: fila sin desplegable, y la vista previa sí ocupa varias líneas. */
.timestamp-row--wide { grid-template-columns: 92px minmax(0, 1fr) auto; }
.description-preview { margin: 8px 0 0; white-space: pre-wrap; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
/* Plantilla de la descripción: editor de texto plano e índice de shortcodes. */
.description-template-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; min-height: 260px; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.shortcode-legend { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.shortcode-legend__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shortcode-row { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.shortcode-row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ink); background: #f5f4f7; border-radius: 6px; padding: 3px 7px; }
.shortcode-copy { display: grid; gap: 3px; min-width: 0; }
.shortcode-copy span { font-size: 13px; line-height: 1.5; }
.shortcode-copy small { color: var(--muted); font-size: 11px; }

/* --- Vídeo › Miniaturas --------------------------------------------------- */
/* Cuatro columnas: nombre · botones · modelo que piensa · plantilla. El desplegable de
   modelo es estrecho a propósito (solo dos opciones) y reutiliza el bloque de plantillas. */
.thumbnail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 132px 210px; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.thumbnail-row + .thumbnail-row { margin-top: 10px; }
.thumbnail-row.is-style-open { position: relative; z-index: 5; }
.thumbnail-row__copy { min-width: 0; }
.thumbnail-row__copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thumbnail-row__copy small { display: block; color: var(--muted); font-size: 12px; }
.thumbnail-style { position: relative; display: grid; gap: 5px; }
.thumbnail-style__label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.thumbnail-style__button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.thumbnail-style__button > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thumbnail-style__menu { position: absolute; top: calc(100% + 6px); right: 0; width: 260px; }

/* --- Contactos de una tanda de miniaturas --------------------------------- */
/* La fila de arriba tiene tres columnas; la galería ocupa el ancho entero debajo. */
/* Siempre CUATRO por fila, en cualquier ancho: es la retícula que se pidió. `minmax(0,1fr)`
   hace que encojan en vez de romper la fila, y en pantallas estrechas solo se aprieta el
   hueco y se afinan los botones (más abajo), nunca el número de columnas. */
.thumb-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
@media (max-width: 1180px) { .thumb-gallery { gap: 8px; } }
/* Lo que se hace con la tanda entera, no con una variación suelta: ocupa el ancho completo
   de la tarjeta, debajo de los contactos, con los mismos botones pequeños del resto. */
.thumbnail-batch-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.thumb-cell { display: grid; gap: 7px; min-width: 0; margin: 0; }
.thumb-cell__surface { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0d0c10; cursor: zoom-in; }
.thumb-cell.is-winner .thumb-cell__surface { border-color: #37b26a; box-shadow: 0 0 0 2px rgba(55,178,106,.28); }
.thumb-cell__surface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-cell__missing { display: grid; place-items: center; width: 100%; height: 100%; color: #6d6a76; }
/* Al pasar el ratón salen los DOS botones (visualizar y editar). Mientras está oculto no
   puede recibir clics: si no, un botón invisible se comería la pulsación sobre la imagen. */
/* Las dos filas de botones van pegadas: el hueco de 7px sigue separando en horizontal, pero
   entre filas basta con 4px para que se lean como un solo bloque. */
.thumb-cell__hover { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 7px; row-gap: 4px; padding: 8px; background: rgba(12,11,16,.55); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.thumb-cell__surface:hover .thumb-cell__hover,
.thumb-cell__surface:focus-within .thumb-cell__hover,
.thumb-cell__surface:focus-visible .thumb-cell__hover { opacity: 1; pointer-events: auto; }
.thumb-cell__hover-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 99px; background: #fff; color: #171619; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }
.thumb-cell__hover-button:hover { background: #ecebf1; }
.thumb-cell__hover-button svg { width: 15px; height: 15px; }
.thumb-cell figcaption { display: grid; gap: 6px; min-width: 0; }
.thumb-cell__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.thumb-cell__actions { display: flex; gap: 6px; }
.thumb-cell__actions .small-button { flex: 1; min-height: 30px; padding-inline: 8px; }

/* --- Visor de una miniatura ----------------------------------------------- */
/* VISOR DE MINIATURA. Antes crecía hasta empujar los botones fuera de la pantalla y había que
   desplazar la ventana entera para llegar a «Editar». Ahora la cabecera y el pie quedan
   siempre fijos y lo único que se desplaza es la propia imagen. */
.modal--viewer { width: min(980px, calc(100vw - 80px)); max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; }
.modal--viewer .modal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal--viewer .thumb-viewer { flex: 1; min-height: 0; }
.thumb-viewer { max-height: min(56vh, 560px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #0d0c10; display: grid; place-items: start center; padding: 10px; }
.thumb-viewer img { display: block; max-width: none; height: auto; }
.thumb-viewer__zoom { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.thumb-viewer__zoom .range-label { min-width: 58px; }

/* --- Editor por capas ------------------------------------------------------ */
/* La base NUNCA lleva `data-thumb-layer`: no se puede seleccionar ni arrastrar. */
.modal--editor { width: min(1280px, calc(100vw - 60px)); height: min(820px, calc(100vh - 60px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; overflow: hidden; }
.modal--editor .modal__body { flex: 1; min-height: 0; overflow: auto; }
.modal--editor .modal__header, .modal--editor .modal__footer { flex: 0 0 auto; }
.thumb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .thumb-editor { grid-template-columns: minmax(0, 1fr); } }
/* La vista previa tiene prohibido inventarse una negrita engordando la regular, igual que la
   captura final: si no, el editor enseñaba una letra y la portada guardaba otra. */
.thumb-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #000; touch-action: none; user-select: none; font-synthesis: none; }
.thumb-stage__base { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.thumb-layer { position: absolute; cursor: grab; transform-origin: center center; }
.thumb-layer--art img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
/* La familia por defecto es la de Neopotencial; una capa con `fontFamily` propio la pisa con
   un estilo en línea, igual que hace el documento que se captura. */
.thumb-layer--text { font-family: "Arame", "Arame Regular", "Futura", "Avenir Next Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: pre-wrap; overflow-wrap: break-word; }
.thumb-layer.is-selected { outline: 2px dashed #6f5bff; outline-offset: 2px; }
/* TIRADOR EN LAS CUATRO ESQUINAS. Con uno solo había que rodear el elemento para alcanzarlo,
   y un dibujo pegado al borde derecho dejaba su tirador fuera del lienzo. */
.thumb-layer__handle { position: absolute; width: 14px; height: 14px; border-radius: 4px; border: 2px solid #fff; background: #6f5bff; opacity: 0; pointer-events: none; }
.thumb-layer__handle[data-thumb-corner="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.thumb-layer__handle[data-thumb-corner="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.thumb-layer__handle[data-thumb-corner="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.thumb-layer__handle[data-thumb-corner="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.thumb-layer.is-selected .thumb-layer__handle { opacity: 1; pointer-events: auto; }
.thumb-editor__panel { display: grid; gap: 14px; align-content: start; min-width: 0; }
.thumb-editor__toolbar { display: flex; gap: 8px; }
.thumb-editor__fields { display: grid; gap: 11px; min-width: 0; }
.thumb-editor__hint { border: 1px dashed var(--line); border-radius: 12px; padding: 12px; }

/* --- Saldo de OpenRouter -------------------------------------------------- */
.credit-balance { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fbfafc; }
.credit-balance.is-low { border-color: #f0c3b6; background: #fdf3f0; }
.credit-balance__figures { display: grid; gap: 3px; }
.credit-balance__figures small { color: var(--muted); font-size: 12px; }
.credit-balance__figures strong { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.credit-balance__error { color: #b4442b; font-size: 12px; max-width: 320px; }
.credit-alert { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #fdf1ed; border-bottom: 1px solid #f0c3b6; color: #8c3620; }
.credit-alert svg { width: 20px; height: 20px; flex: 0 0 auto; }
.credit-alert div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.credit-alert span { font-size: 12px; color: #9c5340; }
.credit-alert .secondary-button { flex: 0 0 auto; }

/* --- Desglose de costes ---------------------------------------------------- */
.cost-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: end; margin: 0 0 18px; }
.cost-filter .ig-form-actions { grid-column: 1 / -1; }
.cost-amount { display: grid; gap: 2px; justify-items: end; text-align: right; flex: 0 0 auto; margin-left: auto; }
.cost-amount strong { font-size: 15px; }
.cost-amount small { color: var(--muted); font-size: 11px; }

/* --- Fichas de resumen (Newsletter) --------------------------------------- */
.summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 16px; }
.summary-list div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.summary-list dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.summary-list dd { margin: 5px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.form-field--wide { grid-column: 1 / -1; }
.form-field--wide .credential-input { min-height: 132px; }
/* Las instrucciones de la carpeta son un texto largo: se lee entero sin hacer scroll dentro. */
.news-prompt-input { min-height: 380px; line-height: 1.55; white-space: pre-wrap; resize: vertical; }

/* ——— Piezas de Texto ————————————————————————————————————————————————————————————— */
/* Mismos radios, líneas y espaciados que el resto de tarjetas: una sección nueva no se tiene
   que notar. Las acciones van en fila para que quepan sin desbordar el panel. */
.piece-card { display: block; padding: 12px 14px; }
.piece-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.piece-card__head .subtitle { margin: 2px 0 0; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.piece-checks { margin-top: 10px; }
.piece-check-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.piece-check-list li { display: flex; align-items: center; gap: 7px; }
.piece-check-list li span { color: var(--muted); font-size: 12px; }
.piece-check-list .is-ok svg { color: var(--ok, #2f855a); }
.piece-check-list .is-fail, .piece-check-list .is-warn { color: var(--muted); }
.piece-question-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.piece-question-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.piece-question-list li p { margin: 3px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.piece-question-list li.is-empty { justify-content: flex-start; border-style: dashed; }
.form-error { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0 0 10px; font-size: 13px; color: #b23c3c; overflow-wrap: anywhere; }