:root {
  --bg: #030a1f;
  --glass: rgba(255, 255, 255, .055);
  --glass-strong: rgba(255, 255, 255, .09);
  --glass-border: rgba(255, 255, 255, .16);
  --glass-highlight: rgba(255, 255, 255, .35);
  --panel-3: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .08);
  --text: #ffffff;
  --text-dim: #d3d3da;
  --muted: #9797a3;
  --pink: #fe2c55;
  --pink-2: #ff5c7c;
  --cyan: #25f4ee;
  --violet: #a78bfa;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #ff5470;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --blur: blur(26px) saturate(180%);
  --font-display: 'Archivo Black', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Fondo: luces azules sobre azul oscuro. El logo va solo en la marca, no de fondo.
   Sin backdrop-filter: en Chrome, el desenfoque en vivo dejaba franjas rectas al pasar el mouse.
   El vidrio de .panel y .topbar pinta esta misma escena ya desenfocada, fija a la pantalla. */
:root {
  --scene:
    radial-gradient(min(40vmin, 380px) circle at 50% 55%, rgba(96, 165, 250, .06), transparent 70%),
    radial-gradient(40rem 34rem at 12% 8%, rgba(37, 99, 235, .42), transparent 62%),
    radial-gradient(36rem 32rem at 88% 12%, rgba(14, 165, 233, .26), transparent 60%),
    radial-gradient(44rem 38rem at 50% 100%, rgba(67, 56, 202, .34), transparent 64%),
    radial-gradient(30rem 28rem at 95% 85%, rgba(29, 78, 216, .3), transparent 60%),
    linear-gradient(180deg, #030a1c, #01040e);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--scene);
  z-index: -2;
  pointer-events: none;
}

.panel, .topbar { isolation: isolate; overflow: hidden; }
.panel { position: relative; }
.panel::before, .topbar::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: var(--scene);
  background-attachment: fixed;
  filter: blur(32px) saturate(160%);
  pointer-events: none;
}
.panel::after, .topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(235, 242, 255, .13), rgba(220, 230, 250, .05) 55%, rgba(235, 242, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
  pointer-events: none;
}

h1, h2, h3, p { margin: 0; }
h1 { font-family: var(--font-display); font-size: 19px; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
h2 { font-family: var(--font-display); font-size: 15px; font-weight: 400; letter-spacing: -.005em; }

.muted { color: var(--muted); font-size: 12px; }

::selection { background: var(--pink); color: #fff; }
* { scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; border: 2px solid var(--bg); }

/* Brillo solo al apretar un botón: se ilumina y un destello lo cruza mientras está presionado */
.btn, .chip, .account, .clip, .q-item, .tag, .dropzone, .distribute summary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after, .chip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .1) 70%, transparent);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.btn:active::after, .chip:active::after {
  opacity: 1;
  transform: translateX(420%) skewX(-18deg);
  transition: transform .45s var(--ease), opacity .08s;
}
.btn:active, .chip:active { filter: brightness(1.2); box-shadow: 0 0 22px 2px rgba(147, 197, 253, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.primary:active { box-shadow: 0 0 26px 4px rgba(254, 44, 85, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Topbar — frosted glass bar */
/* Tres zonas: marca a la izquierda, solapas al centro, quién entró a la derecha. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: rgba(4, 11, 30, .9);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.topbar-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
button.brand { padding: 4px 8px 4px 4px; margin: -4px -8px -4px -4px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color .15s ease-out, transform .12s ease-out; }
button.brand:hover { background: rgba(255, 255, 255, .07); }
button.brand:active { transform: scale(.97); }
button.brand:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.brand h1 { font-size: 15px; white-space: nowrap; }
.brand .beta {
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(37, 244, 238, .35);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Quién entró: foto, nombre y etiqueta. Abre Mi cuenta. */
.topbar-yo {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 260px;
}
.topbar-yo:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.topbar-yo .avatar { width: 28px; height: 28px; font-size: 12px; }
.topbar-yo .tag { align-self: center; font-size: 9px; padding: 2px 7px; line-height: 1.3; }
.topbar-yo .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { display: block; width: 40px; height: auto; flex: none; filter: drop-shadow(0 0 14px rgba(147, 197, 253, .55)); }
.provider { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }

/* Dialog — liquid glass card */
.dialog {
  width: min(460px, calc(100% - 32px));
  background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 30px 70px -20px rgba(0, 0, 0, .75);
}
.dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }

/* Entran creciendo apenas y aclarándose, y salen por el mismo camino (más rápido). Donde el
   navegador no entiende @starting-style, simplemente aparecen como antes. */
.dialog {
  opacity: 0;
  transform: translateY(10px) scale(.965);
  transition: opacity .16s ease-in, transform .2s ease-in, overlay .2s allow-discrete, display .2s allow-discrete;
}
.dialog[open] {
  opacity: 1;
  transform: none;
  transition: opacity .22s ease-out, transform .34s var(--ease), overlay .34s allow-discrete, display .34s allow-discrete;
}
.dialog::backdrop { opacity: 0; transition: opacity .2s ease-in, overlay .2s allow-discrete, display .2s allow-discrete; }
.dialog[open]::backdrop { opacity: 1; transition: opacity .28s ease-out, overlay .28s allow-discrete, display .28s allow-discrete; }
@starting-style {
  .dialog[open] { opacity: 0; transform: translateY(10px) scale(.965); }
  .dialog[open]::backdrop { opacity: 0; }
}
.dialog form { position: relative; display: grid; gap: 14px; padding: 24px; }
.dialog-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}
.dialog-cerrar:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.dialog-cerrar:active { transform: scale(.92); }
.dialog-cerrar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.dialog h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.dialog h2::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--pink); box-shadow: 0 0 14px rgba(254, 44, 85, .7); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* Banner */
.banner {
  position: relative;
  margin: 16px 24px 0;
  padding: 13px 18px 13px 32px;
  border: 1px solid rgba(251, 191, 36, .3);
  background: rgba(251, 191, 36, .08);
  color: #f5dc9a;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
}
.banner::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); transform: translateY(-50%); }
.banner.real { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); color: #bdf5cf; }
.banner.real strong { color: var(--ok); }
.banner.real::before { background: var(--ok); box-shadow: 0 0 10px rgba(74, 222, 128, .8); }
.banner strong { color: var(--warn); font-weight: 800; }

/* Layout */
.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr) 310px; gap: 18px; padding: 22px 24px 48px; align-items: start; }
@media (max-width: 1150px) {
  .layout { grid-template-columns: 264px minmax(0, 1fr); }
  .layout > :last-child { grid-column: 1 / -1; }
}
/* Con menos de 1000px no entran la marca, las solapas y el chip: queda solo el logo. */
@media (max-width: 1000px) { .brand h1, .brand .beta { display: none; } }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; padding: 14px 16px 40px; gap: 14px; }
  /* En pantalla angosta las solapas bajan a una segunda fila y el chip queda solo con la foto. */
  .topbar { grid-template-columns: 1fr auto; padding: 10px 14px; row-gap: 10px; }
  /* Con .topbar adelante para ganarle a la regla base de .tabs, que está más abajo en el archivo. */
  .topbar .tabs { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
  .topbar-yo { grid-row: 1; grid-column: 2; }
  .topbar .tabs button { padding: 7px 4px; font-size: 11px; }
  .topbar-yo { padding-right: 4px; }
  .topbar-yo .nombre, .topbar-yo .tag { display: none; }
  .brand h1 { font-size: 14px; }
  .banner { margin: 12px 16px 0; }
  .panel-clips { order: 1; }
  .panel-accounts { order: 2; }
  .panel-queue { order: 3; }
}

.panel {
  background: linear-gradient(160deg, rgba(22, 34, 68, .84), rgba(8, 14, 34, .88));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 60px -28px rgba(0, 0, 0, .7);
}
.panel-accounts { border-color: rgba(167, 139, 250, .4); }
.panel-clips { border-color: rgba(254, 44, 85, .4); }
.panel-queue { border-color: rgba(37, 244, 238, .4); }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Fields */
input, select, textarea {
  width: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: inherit;
  color-scheme: dark;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
input:hover, select:hover, textarea:hover { background: rgba(255, 255, 255, .08); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37, 244, 238, .18); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
textarea { resize: vertical; }
label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Lista desplegable a tono con la página. Regla general: TODO <select> la hereda, no hay que
   hacer nada por cada uno. Primero el piso para cualquier navegador (lista oscura, nunca blanca)… */
select option, select optgroup { background-color: #0c1a3d; color: #fff; }

/* …y donde el navegador deja vestir la lista (Chrome/Edge 135+), vidrio oscuro translúcido. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  /* El texto se corta en la caja de contenido: un nombre largo no se mete debajo de la flecha. */
  select:not([multiple]):not([size]) { display: block; min-width: 0; white-space: nowrap; overflow: clip; overflow-clip-margin: content-box; cursor: pointer; }
  select::picker-icon { display: none; } /* la flecha ya va como fondo */
  select selectedcontent, select > button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  select::picker(select) {
    margin: 6px 0;
    padding: 6px;
    max-height: min(320px, 50vh);
    max-width: min(520px, 92vw);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(24, 40, 92, .78), rgba(9, 17, 46, .86));
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
    opacity: 0;
    transition: opacity .16s var(--ease), overlay .16s allow-discrete, display .16s allow-discrete;
  }
  select::picker(select):popover-open { opacity: 1; }
  @starting-style { select::picker(select):popover-open { opacity: 0; } }

  select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s var(--ease);
  }
  select option + option { margin-top: 2px; }
  select option:hover, select option:focus-visible { background: rgba(255, 255, 255, .10); outline: none; }
  select option:checked { background: rgba(37, 244, 238, .14); color: #fff; font-weight: 700; }
  select option:disabled { opacity: .4; cursor: not-allowed; }
  select option::checkmark { order: 1; margin-left: auto; color: var(--cyan); font-size: 11px; }
  select optgroup { padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 700; background: transparent; }
}

.provider select { width: auto; }
.check { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 12px; color: var(--muted); font-weight: 500; }
.check input { width: auto; accent-color: var(--pink); }

/* Buttons — frosted by default, solid pink only for the primary action */
.btn {
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--text);
  text-decoration: none; /* en la portada los "Entrar" son enlaces a /entrar, no botones */
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .15s var(--ease), background-color .15s, border-color .15s;
}
.btn:hover { transform: translateY(-2px) scale(1.02); border-color: rgba(255, 255, 255, .3); background: var(--glass-strong); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); border-radius: 4px; }
.btn.small { padding: 7px 13px; font-size: 12px; }
.btn.primary { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 8px 24px -6px rgba(254, 44, 85, .65), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.primary:hover { background: var(--pink-2); border-color: var(--pink-2); }
.btn.ghost { background: rgba(255, 255, 255, .03); }
.btn.ghost:hover { background: var(--glass); }
.btn.ok { color: var(--ok); border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .14); }
.btn.ai { border-color: rgba(167, 139, 250, .4); color: var(--violet); background: rgba(167, 139, 250, .14); }
.btn:disabled { opacity: .4; cursor: default; transform: none !important; box-shadow: none !important; }

.icon { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 5px 8px; border-radius: 999px; transition: color .15s, background-color .15s, transform .15s; }
.icon:hover { color: var(--err); background: rgba(255, 84, 112, .15); transform: scale(1.1); }

.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }

/* Cuentas */
.account {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .15s, background-color .15s;
}
.account:hover { background: rgba(255, 255, 255, .065); }
.account:has(.btn.ok) { border-color: rgba(74, 222, 128, .5); }
.account-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.account .handle { background: transparent; border-color: transparent; font-weight: 800; padding: 4px 5px; }
.account .handle:hover, .account .handle:focus { background: rgba(255, 255, 255, .08); border-radius: 8px; }
.account .niche { font-size: 12px; background: rgba(255, 255, 255, .05); }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Portada de ingreso: mientras no haya sesión, no se muestra nada de la aplicación. */
body.sin-sesion > header.topbar,
body.sin-sesion > main,
body.sin-sesion > .banner { display: none !important; }
.portada {
  position: relative;
  z-index: 60;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Barra de arriba: marca a la izquierda, secciones al centro, entrar a la derecha. */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(3, 10, 31, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.landing-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  text-decoration: none;
}
.landing-links { display: flex; gap: 22px; }
.landing-links a { color: var(--text-dim); font-size: 13px; font-weight: 500; text-decoration: none; }
.landing-links a:hover { color: var(--text); }
.landing-entrar { justify-self: end; background: #fff; color: #0a1020; border-color: #fff; padding: 8px 18px; font-size: 13px; }
.landing-entrar:hover { background: #f1f3f4; border-color: #f1f3f4; }

/* Un solo mensaje al centro de la pantalla. */
.landing-hero {
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 44px;
  position: relative;
  padding: 48px 20px 90px;
}

/* La única entrada de la página: el mensaje y la demo suben una vez, en escalera. */
.landing-centro > *, .demo {
  animation: landing-entrada .9s var(--ease) both;
}
.landing-centro > :nth-child(2) { animation-delay: .05s; }
.landing-centro > :nth-child(3) { animation-delay: .1s; }
.landing-centro > :nth-child(n + 4) { animation-delay: .16s; }
.demo { animation-delay: .28s; }
@keyframes landing-entrada {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* La demo: un VOD con el pico del chat marcado, y el clip vertical que sale de ahí. */
.demo { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.demo-vod {
  position: relative;
  width: 300px;
  height: 170px;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  background: linear-gradient(160deg, #13224a, #0a1330 60%, #070d22);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.demo-etiqueta, .demo-pie { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.demo-pie { color: var(--cyan); }
.demo-chat { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.demo-chat i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(37, 244, 238, .35); }
.demo-chat i:nth-child(7), .demo-chat i:nth-child(8) { background: var(--pink); box-shadow: 0 0 14px rgba(254, 44, 85, .6); }
.demo-linea { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.demo-linea b { position: absolute; left: 43%; width: 12%; top: -2px; bottom: -2px; border-radius: 4px; background: var(--pink); }
.demo-flecha { color: var(--muted); flex: none; }
.demo-clip {
  width: 176px;
  height: 352px;
  padding: 8px;
  border-radius: 30px;
  background: #0b0f1c;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.demo-pantalla {
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(70% 45% at 50% 38%, rgba(254, 44, 85, .35), transparent 70%),
    linear-gradient(180deg, #1b2a5c, #0c1636 55%, #05091a);
}
.demo-titulo {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  color: #0a1020;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.demo-sub {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 86px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 3px 0 #000, 0 0 12px rgba(0, 0, 0, .8);
}
.demo-sub em { font-style: normal; color: #ffe600; }
.demo-cuenta { position: absolute; left: 12px; bottom: 16px; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .85); }

/* Planes: tres columnas con el del medio adelantado; sin precios hasta que existan. */
.planes-intro { margin: -10px 0 26px; max-width: 62ch; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.plan {
  position: relative;
  padding: 24px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
}
.plan.destacado {
  background: linear-gradient(170deg, rgba(37, 244, 238, .12), rgba(254, 44, 85, .08));
  border-color: rgba(37, 244, 238, .35);
  box-shadow: 0 24px 50px -30px rgba(37, 244, 238, .5);
  transform: translateY(-10px);
}
.plan h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.plan-para { margin: 4px 0 16px; font-size: 13px; color: var(--muted); }
.plan-precio { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.plan-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.plan-precio small { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.plan-precio strong { font-family: Inter, system-ui, sans-serif; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-precio span { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan-precio em { flex-basis: 100%; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--cyan); }
/* Mensual / Anual: las dos versiones del precio están en la página y se muestra una. */
.periodo { position: relative; display: flex; width: fit-content; gap: 4px; margin: 0 auto 34px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
/* La pastilla blanca se desliza de una opción a la otra; su lugar y su ancho los pone app.js. */
.periodo-pastilla { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--ancho, 0); border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); transform: translateX(var(--x, 4px)); transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1); }
.periodo:not(.medida) .periodo-pastilla { transition: none; }
.periodo button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-dim); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; transition: color .3s ease-out, transform .16s ease-out; }
.periodo button:hover { color: var(--text); }
.periodo button:active { transform: scale(.97); }
.periodo button.activo, .periodo button.activo:hover { color: #0a1020; }
.periodo button i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet)); color: #0a1020; }
/* Los centavos del precio mensualizado van chicos y arriba, como en una etiqueta de precio. */
.plan-precio strong sup { font-size: .42em; font-weight: 700; letter-spacing: 0; vertical-align: top; position: relative; top: .18em; margin-left: 1px; }
.plan-precio em u { text-decoration: none; font-weight: 800; color: var(--text); }
.plan .plan-precio.anual { display: none; }
.plan.anual .plan-precio.anual { display: flex; }
.plan.anual .plan-precio.mensual { display: none; }

/* Al cambiar de período cada tarjeta se da vuelta: gira hasta quedar de canto, ahí cambia el
   precio y vuelve a abrirse desde el otro lado. El giro lo mueve un resorte en app.js, no un
   @keyframes: así, si tocan de nuevo a mitad de camino, la tarjeta vuelve desde donde está y con
   la velocidad que traía, sin saltos. Se usa `rotate` para no pisar el `transform` de la
   tarjeta destacada. */
.planes { perspective: 1600px; }

/* El plan que se está mirando pasa al frente: crece un poco y los de los costados se achican y
   se apagan apenas. Se usa `scale` (no `transform`) para convivir con el adelantado de la
   tarjeta destacada y con el giro. La transición sale siempre del valor que tiene en pantalla,
   así que pasar rápido de una tarjeta a otra no pega saltos. En una columna (celular) no aplica. */
@media (min-width: 761px) {
  .plan { transition: scale .5s var(--ease), opacity .3s ease-out, box-shadow .4s ease-out; cursor: pointer; }
  .planes.con-activa .plan { scale: .955; opacity: .78; }
  .planes.con-activa .plan.activa { scale: 1.055; opacity: 1; z-index: 2; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .9); }
  .planes.con-activa .plan.destacado.activa { box-shadow: 0 34px 70px -30px rgba(37, 244, 238, .55); }
  .planes.con-activa .plan.oferta.activa { box-shadow: 0 34px 70px -30px rgba(240, 165, 0, .5); }
}
.plan.girando { will-change: rotate; }

/* Oferta de lanzamiento: el precio de lista tachado y el de los primeros al lado, en dorado. */
.plan-precio s { align-self: center; margin-right: 4px; font-size: 17px; font-weight: 700; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: var(--pink, #ff4d8d); }
.plan.oferta { border-color: rgba(255, 200, 80, .45); }
.plan.oferta .plan-precio strong { background: linear-gradient(135deg, #ffd66b, #f0a500); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.oferta .plan-precio em { color: #ffd66b; }
.plan.oferta .plan-precio em b { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.plan-chapa.dorada { background: linear-gradient(135deg, #ffd66b, #f0a500); color: #2a1c00; }
.plan.destacado .plan-precio strong { background: linear-gradient(90deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.plan li svg { flex: none; margin-top: 2px; color: var(--cyan); }

/* Lo que el plan no trae se muestra apagado y con cruz; lo que lo distingue, resaltado. */
.plan li.no { color: var(--muted); opacity: .75; }
.plan li.no svg { color: var(--muted); }
.plan li.fuerte span { color: var(--text); font-weight: 600; }

/* "5 clips por día" con una flechita que abre el equivalente mensual. */
.plan-desglose { min-width: 0; }
.plan-desglose summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 6px; }
.plan-desglose summary::-webkit-details-marker { display: none; }
.plan-desglose summary:hover { color: var(--text); }
.plan li .plan-flecha { margin-top: 0; color: var(--muted); transition: transform .18s ease-out; }
.plan-desglose[open] .plan-flecha { transform: rotate(180deg); }
.plan-desglose p { margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 12px; line-height: 1.45; color: var(--muted); }
.plan.destacado li svg { color: var(--cyan); }
.plan-chapa {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  color: #0a1020;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .planes { grid-template-columns: 1fr; }
  .plan.destacado { transform: none; }
}

/* Preguntas frecuentes: acordeones, una por línea. */
/* El contenido de los <details> crece hasta su alto en vez de aparecer de golpe. Es mejora
   progresiva: sin `::details-content` e `interpolate-size` se abren como siempre. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content, .plan-desglose::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition: block-size .3s var(--ease), opacity .18s ease-out, content-visibility .3s allow-discrete;
}
.faq details[open]::details-content, .plan-desglose[open]::details-content { block-size: auto; opacity: 1; }

.faq { display: grid; gap: 8px; }
.faq details {
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 0 18px;
}
.faq details[open] { border-color: rgba(37, 244, 238, .35); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--cyan); }
.faq p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.faq a { color: var(--cyan); }

/* ---------- Face tracking: tarjeta con interruptor ---------- */

.tracking {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 12px 0 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(37, 244, 238, .25);
  background:
    linear-gradient(135deg, rgba(37, 244, 238, .10), rgba(254, 44, 85, .08)),
    rgba(255, 255, 255, .04);
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.tracking:hover { border-color: rgba(37, 244, 238, .5); }
.tracking:has(input:checked) { border-color: rgba(37, 244, 238, .6); box-shadow: 0 0 0 1px rgba(37, 244, 238, .25), 0 12px 32px -18px rgba(37, 244, 238, .6); }
.tracking-icono {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(37, 244, 238, .12);
  border: 1px solid rgba(37, 244, 238, .3);
}
.tracking:has(input:checked) .tracking-icono { color: #0a1020; background: linear-gradient(135deg, var(--cyan), var(--violet)); border-color: transparent; }
.tracking-texto { display: grid; gap: 3px; min-width: 0; }
.tracking-texto strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tracking-texto strong em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  color: #0a1020;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
}
.tracking-texto > span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.tracking-nota { color: var(--cyan) !important; min-height: 0; }
.tracking-nota:empty { display: none; }
.tracking input { position: absolute; opacity: 0; width: 0; height: 0; }

/* El interruptor. */
.switch {
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  position: relative;
  transition: background-color .2s, border-color .2s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .2s var(--ease);
}
.tracking input:checked ~ .switch { background: linear-gradient(90deg, var(--cyan), var(--violet)); border-color: transparent; }
.tracking input:checked ~ .switch::after { transform: translateX(20px); }
.tracking input:focus-visible ~ .switch { box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }

/* ---------- Auto zoom: tarjeta y línea de tiempo ---------- */

.zoomcard { border-color: rgba(167, 139, 250, .3); background: linear-gradient(135deg, rgba(167, 139, 250, .12), rgba(37, 244, 238, .06)), rgba(255, 255, 255, .04); }
.zoomcard:hover, .zoomcard:has(input:checked) { border-color: rgba(167, 139, 250, .65); box-shadow: 0 0 0 1px rgba(167, 139, 250, .25), 0 12px 32px -18px rgba(167, 139, 250, .7); }
.zoomcard .tracking-icono { color: var(--violet); background: rgba(167, 139, 250, .14); border-color: rgba(167, 139, 250, .35); }
.zoomcard:has(input:checked) .tracking-icono { color: #0a1020; background: linear-gradient(135deg, var(--violet), var(--pink)); border-color: transparent; }
.zoomcard input:checked ~ .switch { background: linear-gradient(90deg, var(--violet), var(--pink)); }

.zoom-linea {
  display: grid;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 12px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}
.zoom-intensidad { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.zoom-intensidad span { color: var(--violet); min-width: 42px; }
.zoom-intensidad input { width: 120px; accent-color: var(--violet); }
/* Interruptor chico del sonido: amarillo con sonido, rojo sin. */
.mini-switch { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.mini-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch.chico { width: 38px; height: 22px; }
.switch.chico::after { width: 16px; height: 16px; top: 2px; left: 2px; }
.mini-switch .switch { background: rgba(255, 84, 112, .55); border-color: rgba(255, 84, 112, .5); }
.mini-switch input:checked ~ .switch { background: linear-gradient(90deg, #fbbf24, #f59e0b); border-color: transparent; }
.mini-switch input:checked ~ .switch::after { transform: translateX(16px); }
.mini-switch input:focus-visible ~ .switch { box-shadow: 0 0 0 3px rgba(251, 191, 36, .4); }
.mini-switch .si { color: var(--warn); }
.mini-switch .no { color: var(--err); }
.mini-switch input:checked ~ .no { display: none; }
.mini-switch input:not(:checked) ~ .si { display: none; }

/* Transporte: play con sonido, tiempo, y una regla para moverse por el clip. */
.zoom-transporte { display: flex; align-items: center; gap: 12px; }
.zoom-transporte .hint { margin: 0; }
.zoom-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  color: #0a1020;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(167, 139, 250, .8);
}
.zoom-play:hover { filter: brightness(1.1); }
.zoom-play .ico-pause { display: none; }
.zoom-play.sonando .ico-play { display: none; }
.zoom-play.sonando .ico-pause { display: block; }
.zoom-tiempo { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--text); min-width: 92px; }
.zoom-regla {
  position: relative;
  height: 20px;
  margin-bottom: -6px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.zoom-regla span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.zoom-regla span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 13px;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, .3);
}

/* La pista: curva de volumen atrás, marcadores encima, aguja que sigue al video. */
.zoom-pista {
  position: relative;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(3, 10, 31, .6);
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.zoom-pista canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.zoom-marcas { position: absolute; inset: 0; }
/* Los zooms: amarillos cuando llevan sonido, rojos cuando no. Los puestos a mano, con borde punteado. */
.zoom-marca {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: rgba(251, 191, 36, .32);
  border: 2px solid var(--warn);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .35);
  cursor: grab;
  min-width: 10px;
}
.zoom-marca.sin { background: rgba(255, 84, 112, .32); border-color: var(--err); }
.zoom-marca.manual { border-style: dashed; }
.zoom-marca button.sonido { left: -1px; right: auto; border-radius: 6px 0 6px 0; display: grid; place-items: center; }
/* El borde derecho se agarra para alargar o acortar el zoom. */
.zoom-marca .zoom-borde {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5px;
  width: 10px;
  cursor: ew-resize;
}
.zoom-marca .zoom-borde::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
}
.zoom-marca:active { cursor: grabbing; }
.zoom-marca button {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0 6px 0 6px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.zoom-marca:hover button { opacity: 1; }
/* Recorte de los costados: sombra sobre lo que queda afuera y una manija en cada punta. */
.zoom-sombra { position: absolute; top: 0; bottom: 0; background: rgba(3, 10, 31, .72); pointer-events: none; }
#zoom-sombra-izq { left: 0; width: 0; }
#zoom-sombra-der { right: 0; width: 0; }
.zoom-corte {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  background: var(--cyan);
  cursor: ew-resize;
  z-index: 2;
}
.zoom-corte.izq { left: 0; border-radius: 10px 0 0 10px; transform: translateX(-100%); }
.zoom-corte.der { right: 0; border-radius: 0 10px 10px 0; transform: translateX(100%); }
.zoom-corte::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  width: 4px;
  height: 22px;
  margin-top: -11px;
  border-radius: 2px;
  background: rgba(3, 10, 31, .55);
}
.zoom-pista { overflow: visible; }
.zoom-pista canvas, .zoom-marcas { border-radius: 10px; overflow: hidden; }
.zoom-recorte-nota { align-self: center; font-size: 12px; }
.zoom-recorte-nota:empty { display: none; }

/* El banderín de la aguja: sobresale por arriba de la pista, encima de todo, y se arrastra. */
.zoom-bandera {
  position: absolute;
  top: -12px;
  left: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 6px 6px 9px 9px;
  background: linear-gradient(135deg, #fff, var(--cyan));
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(3, 10, 31, .6);
  cursor: grab;
  z-index: 6;
  touch-action: none;
}
.zoom-bandera::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--cyan);
  transform: rotate(45deg);
  border-radius: 1px;
}
.zoom-bandera:active { cursor: grabbing; }

.zoom-aguja {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .8);
  pointer-events: none;
}

/* Cierre: la misma puerta de entrada, para quien llegó hasta abajo. */
.landing-cierre { text-align: center; display: grid; justify-items: center; gap: 12px; }
.landing-cierre h2 { margin-bottom: 0; }
.landing-cierre p { margin: 0 0 6px; color: var(--text-dim); }
.landing-cierre .btn.google { min-width: 240px; padding: 13px 26px; font-size: 15px; }
.landing-centro {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(720px, 100%);
  text-align: center;
}
.landing-pill {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 244, 238, .35);
  background: rgba(37, 244, 238, .08);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.landing-titulo {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(36px, 6.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-transform: none;
}
.landing-degrade {
  background: linear-gradient(90deg, var(--cyan), var(--violet) 55%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.landing-sub {
  max-width: 520px;
  margin: 4px 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
}
.landing-centro .btn.google { min-width: 240px; padding: 13px 26px; font-size: 15px; }
.landing-nota { margin: 0; font-size: 12px; color: var(--muted); }
.landing-centro label { display: grid; gap: 6px; width: min(300px, 100%); font-size: 12px; text-align: left; }
.landing-link { font-size: 12px; color: var(--muted); }
.landing-link:hover { color: var(--cyan); }
.landing-flecha {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  transition: color .2s, transform .3s var(--ease);
}
.landing-flecha:hover { color: var(--text); transform: translate(-50%, 4px); }

/* Abajo: qué hace y cómo, en bloques cortos. */
.landing-seccion {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 88px 20px 40px;
}
.landing-seccion h2 { font-size: 22px; margin: 0 0 26px; text-transform: uppercase; }

/* Funciones: una grilla con ritmo (2+1 / 1+2) y dos tarjetas con algo para mirar. */
.landing-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-grilla article {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  min-height: 150px;
}
.landing-grilla article.ancha { grid-column: span 2; }
.landing-grilla article.con-chat { background: linear-gradient(160deg, rgba(37, 244, 238, .12), rgba(255, 255, 255, .03) 70%); border-color: rgba(37, 244, 238, .25); }
.landing-grilla article.con-subs { background: linear-gradient(160deg, rgba(254, 44, 85, .14), rgba(255, 255, 255, .03) 70%); border-color: rgba(254, 44, 85, .25); }
.landing-grilla h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.landing-grilla p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); max-width: 52ch; }
.mini-chat { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 64px; margin: 0 0 18px; }
.mini-chat i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(37, 244, 238, .35); }
.mini-chat i:nth-child(7), .mini-chat i:nth-child(8) { background: var(--pink); box-shadow: 0 0 14px rgba(254, 44, 85, .55); }
.mini-chat-pico {
  position: absolute;
  top: -4px;
  left: 42%;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(3, 10, 31, .85);
  border: 1px solid rgba(254, 44, 85, .5);
  color: var(--pink);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.mini-subs {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 3px 0 #000, 0 0 12px rgba(0, 0, 0, .8);
}
.mini-subs em { font-style: normal; color: #ffe600; }
.landing-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.landing-pasos li { display: flex; align-items: flex-start; gap: 14px; }
.landing-pasos span {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: #0a1020;
  background: linear-gradient(135deg, var(--cyan), var(--pink));
}
.landing-pasos strong { display: block; font-size: 14px; }
.landing-pasos p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.landing-pie {
  margin-top: auto;
  padding: 24px 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.landing-pie .portada-legal { margin: 0; }
.portada-error { font-size: 13px; color: var(--err); text-align: center; }

@media (max-width: 900px) { .landing-grilla { grid-template-columns: repeat(2, 1fr); } .landing-grilla article.ancha { grid-column: span 2; } }
@media (max-width: 720px) {
  .landing-nav { grid-template-columns: 1fr auto; }
  .landing-links { display: none; }
}
@media (max-width: 600px) {
  .landing-titulo br { display: none; }
  .demo { flex-direction: column; gap: 14px; }
  .demo-flecha { transform: rotate(90deg); }
  .demo-vod { width: min(300px, 100%); }
}
@media (max-width: 480px) { .landing-grilla { grid-template-columns: 1fr; } .landing-grilla article.ancha { grid-column: auto; } }

.btn.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #1f1f1f;
  border: 0;
  font-weight: 600;
}
.btn.google:hover { background: #f1f3f4; }
.portada-legal { text-align: center; font-size: 12px; color: var(--muted); }
.portada-legal a { color: var(--muted); }
.portada-legal a:hover { color: var(--cyan); }
.quien { font-size: 13px; color: var(--muted); }

/* ---------- Menú de tres líneas ---------- */

.menu-btn {
  display: grid;
  gap: 4px;
  padding: 10px 9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  cursor: pointer;
  flex: none;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .18s ease, opacity .18s ease;
}
.menu-btn:hover { background: rgba(255, 255, 255, .12); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed;
  top: 68px;
  left: 16px;
  z-index: 50;
  width: 236px;
  display: grid;
  padding: 8px;
  border-radius: 16px;
  background: rgba(20, 24, 34, .97);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  /* Nace del botón de las tres rayas (arriba a la izquierda) y vuelve a él. */
  transform-origin: 20px -16px;
  transition: opacity .2s ease-out, transform .3s var(--ease), display .3s allow-discrete;
}
.menu[hidden] {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .12s ease-in, transform .16s ease-in, display .16s allow-discrete;
}
@starting-style {
  .menu:not([hidden]) { opacity: 0; transform: scale(.94); }
}
.menu-item {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: rgba(255, 255, 255, .08); }
.menu-item.peligro { color: var(--err); }
.menu-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.menu-usuario .nombre { display: grid; gap: 3px; min-width: 0; }
.menu-usuario strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Foto de perfil ---------- */

.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(135deg, #25f4ee, #fe2c55);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #0a1020;
  cursor: default;
  padding: 0;
}
.avatar.grande { width: 76px; height: 76px; font-size: 28px; cursor: pointer; }
.avatar.grande:hover { border-color: var(--cyan); }
.perfil { display: flex; align-items: center; gap: 16px; }
.perfil-datos { display: grid; gap: 4px; min-width: 0; }
.cuenta-bloque { display: grid; gap: 10px; }

/* Lo que no tiene vuelta atrás va plegado y en rojo. */
details.peligro summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--err);
  list-style: none;
}
details.peligro summary::-webkit-details-marker { display: none; }
details.peligro summary::before { content: '▸'; display: inline-block; width: 14px; }
details.peligro[open] summary::before { content: '▾'; }
details.peligro > div {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 84, 112, .35);
  background: rgba(255, 84, 112, .06);
}
.btn.peligro { color: var(--err); border-color: rgba(255, 84, 112, .4); }
.btn.peligro:hover { background: rgba(255, 84, 112, .12); }

/* ---------- Etiquetas de cuenta ---------- */

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  justify-self: start;
}
.tag.rojo { background: #fe2c55; color: #fff; }
.tag.violeta { background: #a855f7; color: #fff; }
.tag.gris { background: rgba(255, 255, 255, .16); color: var(--text); }
.tag.amarillo { background: var(--warn); color: #221a00; }
.tag.cian { background: var(--cyan); color: #04202a; }
.tag.dorado { background: linear-gradient(135deg, #ffd66b, #f0a500); color: #2a1c00; }
.tag.azul { background: #3b82f6; color: #fff; }
.tag.verde { background: var(--ok); color: #062611; }

/* Tu plan, en Mi cuenta: tres barras y una línea con los topes. */
.uso { display: grid; gap: 8px; }
.uso-fila { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.uso-nombre { color: var(--muted); font-weight: 600; }
.uso-barra { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.uso-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.uso-fila.lleno .uso-barra i { background: var(--err); }
.uso-valor { font-variant-numeric: tabular-nums; font-weight: 700; }
.ia-plan { color: var(--warn) !important; }

/* Funciones que el plan no incluye: la tarjeta se ve, apagada, y dice desde qué plan. */
.tracking .tracking-plan { display: none; color: var(--warn) !important; font-weight: 600; }
.tracking.bloqueada { opacity: .6; cursor: not-allowed; }
.tracking.bloqueada .tracking-plan { display: block; }
.tracking.bloqueada:hover { border-color: rgba(255, 255, 255, .15); box-shadow: none; }

/* ---------- Panel de administración ---------- */

.dialog.ancho form { max-width: 640px; }
.admin-lista { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.admin-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.admin-fila .nombre { display: grid; gap: 3px; flex: 1; min-width: 0; }
.admin-fila .nombre strong { font-size: 13px; }
.admin-fila .nombre span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-fila select { width: auto; padding: 6px 8px; font-size: 12px; }
.admin-fila .check.multi { margin: 0; font-size: 11px; white-space: nowrap; }

/* Páginas de privacidad y términos */
body.legal { padding: 0; }
.hoja {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  display: grid;
  gap: 14px;
}
.hoja h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 26px; }
.hoja h2 { font-size: 16px; margin-top: 18px; color: var(--cyan); }
.hoja .tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.hoja .tabla th, .hoja .tabla td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.hoja .tabla th { color: var(--muted); font-weight: 600; font-size: 12px; }
.hoja .tabla code { color: var(--cyan); }
.hoja p, .hoja li { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .86); }
.hoja ul { display: grid; gap: 6px; padding-left: 20px; margin: 0; }
.volver { font-size: 13px; color: var(--muted); text-decoration: none; }
.volver:hover { color: var(--cyan); }
[data-completar] {
  background: rgba(251, 191, 36, .2);
  border: 1px dashed rgba(251, 191, 36, .6);
  color: var(--warn);
  padding: 1px 6px;
  border-radius: 6px;
}
.quien strong { color: var(--text); font-weight: 700; }

/* Dropzone */
.dropzone {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 32px 20px;
  border: 3px dashed rgba(254, 44, 85, .55);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  color: var(--text);
  margin-bottom: 16px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .2s, background-color .2s, transform .15s;
}
.dropzone svg { width: 30px; height: 30px; color: var(--pink); transition: transform .2s; position: relative; z-index: 2; }
.dropzone strong { font-size: 15px; font-weight: 800; position: relative; z-index: 2; }
.dropzone span { color: var(--muted); font-size: 12px; position: relative; z-index: 2; }
.dropzone:hover { transform: scale(1.01); }
.dropzone:hover svg { transform: translateY(-3px); }
.dropzone.over { border-color: var(--cyan); background: linear-gradient(135deg, rgba(37, 244, 238, .16), rgba(254, 44, 85, .12)); }
.dropzone.over svg { color: var(--cyan); transform: scale(1.15) translateY(-3px); }

/* Repartir */
.distribute {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .04);
}
.distribute summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; align-items: center; gap: 9px; }
.distribute summary::-webkit-details-marker { display: none; }
.distribute summary::before { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--pink); color: #fff; font-size: 14px; font-weight: 800; transition: transform .2s var(--ease); position: relative; z-index: 2; }
.distribute[open] summary::before { transform: rotate(135deg); }
.distribute[open] summary { margin-bottom: 13px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; margin-bottom: 11px; }
.grid-form label { min-width: 0; }
.grid-form input { min-width: 0; }

/* Clips */
.clip {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 13px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .15s, background-color .15s;
}
.clip:hover { background: rgba(255, 255, 255, .065); }
.clip.scheduled { border-color: rgba(37, 244, 238, .6); }
.clip.published { opacity: .68; }
.clip.failed { border-color: rgba(255, 84, 112, .6); }
@media (max-width: 520px) { .clip { grid-template-columns: 1fr; } }

.thumb { aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); overflow: hidden; max-height: 230px; position: relative; z-index: 2; }
.thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-preview { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 11px; padding: 8px; background: rgba(255, 255, 255, .04); }

.clip-body { display: grid; gap: 9px; align-content: start; min-width: 0; position: relative; z-index: 2; }
.clip-head { display: flex; align-items: center; gap: 8px; }
.clip-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; font-weight: 800; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 5px 5px 12px; font-size: 12px; font-weight: 600; }
/* El rango de la cuenta usa la misma clase pero no lleva ✕: relleno parejo y texto centrado. */
.tag.rango { justify-content: center; gap: 0; padding: 3px 11px; border: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em; line-height: 1.4; text-align: center; }
.topbar-yo .tag.rango { font-size: 9px; padding: 2px 8px; line-height: 1.3; }
.tag button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 50%; position: relative; z-index: 2; }
.tag button:hover { color: #fff; background: var(--err); }
.tag-input { width: 120px; padding: 6px 12px; font-size: 12px; border-radius: 999px; }
.tag-count { font-size: 11px; color: var(--muted); font-weight: 700; }

.chip { border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: var(--cyan); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .12s, background-color .12s; }
.chip:hover { transform: translateY(-1px) scale(1.03); }
.chip.all { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.chip.virales { color: #ff8aa1; background: rgba(254, 44, 85, .18); border-color: rgba(254, 44, 85, .35); }
.chip.categoria { color: var(--cyan); background: rgba(37, 244, 238, .16); border-color: rgba(37, 244, 238, .35); }
.chip.nicho { color: var(--warn); background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .35); }
.chip.formato { color: var(--violet); background: rgba(167, 139, 250, .18); border-color: rgba(167, 139, 250, .35); }

.warn { margin: 0; padding-left: 18px; color: var(--warn); font-size: 12px; display: grid; gap: 2px; font-weight: 600; }
.error { color: var(--err); font-size: 12px; font-weight: 600; }
.clip-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.badge {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 800;
  border: 1px solid transparent;
}
.badge.draft { background: rgba(255, 255, 255, .08); color: var(--muted); border-color: rgba(255, 255, 255, .1); }
.badge.scheduled { background: rgba(37, 244, 238, .18); color: var(--cyan); border-color: rgba(37, 244, 238, .35); }
.badge.publishing { background: rgba(251, 191, 36, .2); color: var(--warn); border-color: rgba(251, 191, 36, .4); animation: pulseBadge 1.2s ease-in-out infinite; }
.badge.published { background: rgba(74, 222, 128, .18); color: var(--ok); border-color: rgba(74, 222, 128, .35); }
.badge.failed { background: rgba(255, 84, 112, .2); color: var(--err); border-color: rgba(255, 84, 112, .4); }
@keyframes pulseBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.empty { color: var(--muted); text-align: center; padding: 34px 12px; font-size: 13px; font-weight: 600; }

/* Análisis */
.analysis { display: grid; gap: 9px; padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255, 255, 255, .03); }
.analysis-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.analysis-head .spacer { flex: 1; }
.kind { font-weight: 800; }
.conf { font-size: 12px; color: var(--muted); font-weight: 700; }
.source { font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.source.local { background: rgba(255, 255, 255, .08); color: var(--muted); }
.source.ai { background: rgba(167, 139, 250, .2); color: var(--violet); }
.working { color: var(--cyan); font-size: 13px; font-weight: 700; }
.summary { font-size: 13px; line-height: 1.5; }
.signals { display: flex; flex-wrap: wrap; gap: 6px; }
.signals span { font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.group, .mix, .caption-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.group-label { font-size: 11px; color: var(--muted); min-width: 84px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.group-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.group-label.virales::before { background: var(--pink); }
.group-label.categoria::before { background: var(--cyan); }
.group-label.nicho::before { background: var(--warn); }
.group-label.formato::before { background: var(--violet); }
.mix { padding-top: 9px; border-top: 1px solid var(--line-soft); }
.mix-tags { font-size: 13px; font-weight: 800; flex: 1; min-width: 0; background: linear-gradient(90deg, var(--pink), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Cola */
.day { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 16px 0 8px; font-weight: 800; }
.day:first-child { margin-top: 0; }
.q-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 8px;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.q-item:hover { border-color: var(--line); background: rgba(255, 255, 255, .07); }
.q-item time { font-variant-numeric: tabular-nums; font-weight: 800; width: 46px; flex: none; font-size: 13px; }
.q-main { display: grid; min-width: 0; flex: 1; gap: 1px; }
.q-main strong, .q-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-main strong { font-weight: 800; }

/* Solapas */
[hidden] { display: none !important; } /* .layout usa display:grid y pisaba al atributo hidden */
/* Las solapas van juntas en una sola pastilla; la activa se pinta de rosa. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.tabs button {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .07); }

/* Con el auto zoom apagado la línea de tiempo igual sirve para moverse y recortar; se esconde
   solo lo que es del zoom. */
.zoom-linea.sin-zoom .solo-zoom { display: none; }
.zoom-linea.sin-zoom .zoom-pista { cursor: default; }

/* ---------- Solapa Clips ---------- */
.clips-layout { grid-template-columns: 1fr !important; }
.clips-link { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: end; }
.clips-subir { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.clips-link label { margin: 0; }
.clips-barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 18px 0 16px; }
.clips-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.clips-filtros .chip.active { color: #04202a; background: var(--cyan); border-color: var(--cyan); }
.clips-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.clips-vacio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 46px 20px; text-align: center; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 16px; }
.clips-vacio p { margin: 0 0 8px; max-width: 46ch; color: var(--text-dim); font-size: 13px; }
.clip-tarjeta {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .2s ease-out, background-color .2s ease-out, box-shadow .3s ease-out;
}
.clip-tarjeta.elegido { border-color: rgba(37, 244, 238, .7); background: rgba(37, 244, 238, .07); box-shadow: 0 18px 40px -26px rgba(37, 244, 238, .7); }
.clip-video { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #000; }
.clip-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.clip-tipo { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(10, 16, 32, .8); color: #fff; pointer-events: none; }
.clip-tipo.vertical { background: var(--violet); }
.clip-tipo.subtitulado { background: var(--pink); }
.clip-pie { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.clip-datos { display: grid; gap: 2px; min-width: 0; }
.clip-datos strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-datos .muted { font-size: 11px; }
.clip-elegir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: var(--text-dim);
  font: 700 12px Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out, transform .12s ease-out;
}
.clip-elegir svg { opacity: .35; transition: opacity .18s ease-out; }
.clip-elegir:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }
.clip-elegir:active { transform: scale(.95); }
.clip-elegir[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: #04202a; }
.clip-elegir[aria-pressed="true"] svg { opacity: 1; }
.clip-elegir:focus-visible, .clip-mini:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.clip-acciones { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.clip-mini { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; color: var(--muted); font: 600 11px Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: color .15s ease-out; }
.clip-mini:hover { color: var(--text); }
.clip-mini.peligro:hover { color: var(--err); }
@media (max-width: 560px) {
  .clips-link { grid-template-columns: 1fr; }
}

/* ---------- Siguiente: acompaña todo el recorrido, fija abajo ---------- */
.paso-barra {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(14, 20, 38, .92);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9);
  transform: translateX(-50%);
}
.paso-info { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso-barra .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.paso-barra .btn small { font-size: 11px; font-weight: 600; opacity: .85; }
.paso-barra .btn small::before { content: '· '; }
.paso-barra .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Lugar para que la barra no tape el final de cada solapa. */
.vods-layout { padding-bottom: 90px; }
@media (max-width: 640px) {
  .paso-barra { left: 12px; right: 12px; bottom: 12px; transform: none; justify-content: space-between; }
}

/* Los dos pasos del Editor: una barra más chica, centrada, debajo de las solapas. */
.subtabs {
  display: flex;
  width: fit-content;
  gap: 2px;
  margin: 18px auto 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
}
.subtabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, transform .12s ease-out;
}
.subtabs button span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  font-size: 11px;
  font-weight: 800;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.subtabs button:hover { color: var(--text); }
.subtabs button:active { transform: scale(.97); }
.subtabs button.active { background: rgba(255, 255, 255, .12); color: #fff; }
.subtabs button.active span { background: var(--cyan); color: #04202a; }
.subtabs button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.tabs button.active { background: var(--pink); color: #fff; box-shadow: 0 6px 18px -6px rgba(254, 44, 85, .7); }
.tabs button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }

/* VODS KICK */
.vods-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .vods-layout { grid-template-columns: 1fr; } }
.kick-search { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.kick-search label { flex: 1; min-width: 180px; }
.vod-item, .vod-clip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 8px;
}
.vod-main, .vod-clip-main { display: grid; min-width: 0; flex: 1; }
.vod-main strong, .vod-clip-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vod-clip-main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vod-pick { display: flex; }
.chat-frases {
  font-size: 12px;
  color: var(--cyan);
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  border: 1px solid transparent;
}
.pill.chat { background: rgba(37, 244, 238, .16); color: var(--cyan); border-color: rgba(37, 244, 238, .4); }
.pill.ambos { background: rgba(74, 222, 128, .16); color: var(--ok); border-color: rgba(74, 222, 128, .4); }
.pill.sentido { background: rgba(255, 255, 255, .08); color: var(--text); border-color: rgba(255, 255, 255, .18); }
.pill.riesgo { background: rgba(251, 191, 36, .18); color: var(--warn); border-color: rgba(251, 191, 36, .45); }
.pill.riesgo.alto { background: rgba(255, 84, 112, .18); color: var(--err); border-color: rgba(255, 84, 112, .45); }
.dicho {
  font-size: 12px;
  color: var(--text);
  opacity: .7;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid transparent;
}
.score.alto { background: rgba(74, 222, 128, .2); color: var(--ok); border-color: rgba(74, 222, 128, .45); }
.score.medio { background: rgba(37, 244, 238, .16); color: var(--cyan); border-color: rgba(37, 244, 238, .4); }
.score.flojo { background: rgba(251, 191, 36, .18); color: var(--warn); border-color: rgba(251, 191, 36, .4); }
.score.bajo { background: rgba(255, 84, 112, .18); color: var(--err); border-color: rgba(255, 84, 112, .4); }

.btn.done {
  background: rgba(74, 222, 128, .22);
  border-color: var(--ok);
  color: var(--ok);
  opacity: 1;
  letter-spacing: .05em;
}
.vod-clip .progress { margin-top: 6px; }
.progress-bar.buscando i {
  width: 35%;
  animation: buscando 1.2s ease-in-out infinite;
}
@keyframes buscando {
  0% { margin-left: -35%; }
  100% { margin-left: 100%; }
}

/* ---------- Lectura IA (BETA) y comparación de los dos detectores ---------- */

.beta {
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(167, 139, 250, .45);
  color: var(--violet);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.beta-caja {
  margin-top: 18px;
  padding: 12px 14px 4px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: var(--radius);
  background: rgba(167, 139, 250, .07);
}
.beta-caja .panel-head { margin-bottom: 6px; }

/* Los dos métodos, uno al lado del otro. El tanteo es el punto: se ve de un vistazo cuál
   viene acertando más sobre las VODs que ya se juzgaron. */
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.metodo {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.metodo strong { color: var(--text); font-size: 14px; font-weight: 700; }
.metodo .muted { font-size: 12px; }
.metodo-tanteo { font-size: 12px; font-weight: 600; color: var(--cyan); }
.metodo.activa { border-color: rgba(254, 44, 85, .55); background: rgba(254, 44, 85, .12); }
.metodo.activa .metodo-tanteo { color: var(--pink-2); }
@media (max-width: 760px) { .metodos { grid-template-columns: 1fr; } }

/* La línea del clip corta con puntos suspensivos, pero el aviso de "revisalo" no se puede
   perder: si el clip trae una marca de riesgo, esa línea se deja pasar a dos renglones. */
.vod-clip-main strong:has(.pill.riesgo) { white-space: normal; }

/* El puntaje ahora también abre la previsualización: sigue siendo la misma chapita, pero
   es un <button>, que trae su propia tipografía y su propio cursor. */
button.score { font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }

/* Ventana para mirar el tramo y decidir sin salir de la lista. */
.dialog.previa { width: min(560px, 94vw); }
.previa-video {
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}
.previa-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* El <form> ya separa todo: los textos de la ventana no suman márgenes propios. */
.previa form > p { margin: 0; }
.previa-acciones { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; }
.previa-si.activo { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .18); color: var(--ok); }
.previa-no.activo { border-color: rgba(255, 84, 112, .6); background: rgba(255, 84, 112, .18); color: var(--err); }

/* Pegar los momentos leídos por afuera: entra JSON, así que fuente de ancho fijo y sin
   corrector, que en un JSON solo subraya todo de rojo. */
.export-ia { display: grid; gap: 6px; margin: 10px 0; }
.export-ia textarea {
  width: 100%;
  resize: vertical;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

/* El título que propuso la IA para el clip: es lo primero que se mira para decidir. */
.clip-titulo { font-size: 13px; font-weight: 600; color: var(--violet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sirve / no sirve. Sin efectos al pasar el mouse: solo cambia al quedar marcado. */
.veredicto { display: flex; gap: 4px; flex: none; }
.veredicto .vd {
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  padding: 4px 7px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1);
  opacity: .5;
}
.veredicto.bien .si, .veredicto.mal .no { filter: none; opacity: 1; }
.veredicto.bien .si { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .18); }
.veredicto.mal .no { border-color: rgba(255, 84, 112, .6); background: rgba(255, 84, 112, .18); }

.btn.viral {
  border-color: rgba(251, 191, 36, .55);
  background: linear-gradient(120deg, rgba(251, 191, 36, .22), rgba(254, 44, 85, .22));
  color: #ffd98a;
  letter-spacing: .03em;
}
.btn.viral:hover { border-color: var(--warn); color: #fff; }

/* Selección múltiple */
.pick { width: auto; accent-color: var(--cyan); flex: none; cursor: pointer; }
.bulk {
  border: 1px solid rgba(37, 244, 238, .4);
  background: rgba(37, 244, 238, .07);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: grid;
  gap: 10px;
}
.bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.bulk-row { display: flex; align-items: center; gap: 8px; }
.bulk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.bulk-row input[type="time"] { width: auto; flex: none; padding: 5px 9px; font-size: 12px; }

/* Títulos con IA */
.caption-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.caption-tools .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.contexto-pasos {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selector Lista / Calendario */
.seg { display: flex; gap: 4px; }
.seg .btn.active { background: rgba(37, 244, 238, .16); border-color: rgba(37, 244, 238, .45); color: var(--cyan); }
.btn.demo { border-color: rgba(74, 222, 128, .45); color: var(--ok); background: rgba(74, 222, 128, .14); }

/* Calendario */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.cal-head strong { font-size: 13px; }
.cal-head .icon { font-size: 18px; line-height: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 14px; }
.cal-wd { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal-pad { aspect-ratio: 1; }
.cal-day {
  aspect-ratio: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s, border-color .15s;
}
.cal-day:hover { background: rgba(255, 255, 255, .1); }
.cal-day.has { color: #fff; background: rgba(37, 244, 238, .1); }
.cal-day.today { border-color: rgba(254, 44, 85, .7); }
.cal-day.sel { background: rgba(37, 244, 238, .26); border-color: var(--cyan); }
.cal-dots { display: flex; align-items: center; gap: 2px; min-height: 6px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; }
.cal-dots em { font-size: 9px; font-style: normal; color: var(--muted); }

/* Progreso de subida */
.progress { display: grid; gap: 4px; margin-top: 4px; }
.progress-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.progress-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .15s linear; }
.progress-label { font-size: 11px; color: var(--cyan); font-weight: 700; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px) scale(.9);
  background: rgba(20, 20, 24, .55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  max-width: calc(100% - 32px);
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 20px 50px -15px rgba(0, 0, 0, .6);
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.chip:focus-visible, .icon:focus-visible, .tag button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); border-radius: 10px; }

@media (max-width: 480px) {
  .provider { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  .provider select { width: 100%; }
}

/* "Reducir movimiento" no es "sin respuesta": se sacan los desplazamientos, los rebotes y lo que
   se repite, y quedan los fundidos de opacidad y color, que no marean y dicen que algo pasó.
   Importa más de lo que parece: mucha gente que juega apaga las animaciones de Windows por
   rendimiento, y el navegador lo informa así. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    /* Las transiciones siguen, pero solo las que no mueven nada de lugar. */
    transition-property: opacity, color, background-color, border-color, box-shadow, filter, overlay, display, content-visibility !important;
    /* Al reemplazar la lista de propiedades, `display` y `overlay` pierden su `allow-discrete` (las
       listas se emparejan por posición) y las salidas se cortan en seco; así lo conservan. */
    transition-behavior: allow-discrete !important;
  }
  /* La entrada de la portada: aparece, sin subir ni desenfocarse. */
  .landing-centro > *, .demo { animation-name: solo-aparecer !important; animation-duration: .5s !important; }
  /* El barrido de luz del botón de descarga es un cambio de brillo, no un desplazamiento. */
  .btn.download.bajando::after { animation-duration: 1.4s !important; }
  /* Excepción pedida por el dueño: el selector Mensual/Anual se desliza igual, y la vuelta de
     las tarjetas (que mueve app.js) también. Son cortas y solo pasan al tocar. */
  .periodo-pastilla { transition-property: transform, width !important; }
  /* Y el plan que se mira crece igual: es un cambio de tamaño chico, en el lugar. */
  .plan { transition-property: scale, opacity, box-shadow, border-color !important; }
}
@keyframes solo-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* Quien pide menos transparencia recibe superficies sólidas; quien pide más contraste, bordes
   definidos y textos secundarios más claros. */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .panel, .dialog, .toast, .menu, .plan, .btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #0c1a3d;
  }
}
@media (prefers-contrast: more) {
  .panel, .plan, .dialog, .menu, .faq details, input, select, textarea { border-color: rgba(255, 255, 255, .6); }
  .muted, .hint, .plan-para, .plan li.no { color: var(--text-dim); opacity: 1; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .panel, .dialog, .btn, .distribute, .dropzone, .toast, input, select, textarea {
    background-color: #0c1a3d;
  }
}

/* Vista previa del reencuadre */
.preview-box { display: grid; place-items: center; min-height: 240px; }
.preview-box img { max-width: 100%; max-height: 70vh; border-radius: var(--radius); border: 1px solid var(--line); }

/* Reencuadre en vivo */
.source-wrap { position: relative; display: grid; place-items: center; background: #000; border-radius: var(--radius); overflow: hidden; margin: 10px 0; min-height: 160px; }
.source-wrap video { width: 100%; display: block; }
.crop-rect {
  position: absolute;
  border: 2px solid var(--zona, #fff);
  background: color-mix(in srgb, var(--zona, #fff) 14%, transparent);
  opacity: .75;
  cursor: move;
  touch-action: none;
  pointer-events: none;
}
.crop-rect.active { opacity: 1; border-width: 3px; box-shadow: 0 0 18px color-mix(in srgb, var(--zona, #fff) 55%, transparent); }
.crop-rect .zone-tag {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--zona, #fff);
  font-size: 10px;
  font-weight: 800;
  color: #04121f;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.crop-rect .zone-tag svg { width: 11px; height: 11px; flex: none; }
#cam-canvas { display: block; height: min(64vh, 620px); width: auto; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: #000; }

/* Tarjetas de estilo y zonas (inspiradas en el selector de Nexus Clips) */
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.style-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.style-card:hover { background: rgba(255, 255, 255, .09); }
.style-card.active { border-color: var(--cyan); background: rgba(37, 244, 238, .14); color: #fff; }
.style-map { position: relative; aspect-ratio: 9 / 16; background: #05070f; border-radius: 6px; overflow: hidden; }
.style-map i {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #04121f;
  border: 1px solid transparent;
}
.style-map i svg { width: 11px; height: 11px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.style-map i b { font-weight: 800; }
/* Estilos con fondo difuminado: la tarjeta lo insinúa con una mancha suave detrás de las zonas. */
.style-map.difuminado { background: radial-gradient(120% 60% at 50% 18%, rgba(96, 165, 250, .55), rgba(96, 165, 250, .12) 70%), #05070f; }
.style-name { text-align: center; line-height: 1.2; }
/* Los tiradores van por dentro (sobre el borde del video quedaban fuera de alcance) y solo
   aparecen en la zona activa: si se ven todos a la vez, los de dos zonas vecinas se pisan. */
/* El borde que se está agarrando se marca con una línea rosa (con Shift, también el de enfrente;
   con Control, los cuatro). Solo mientras se agarra: no es un efecto de pasar el mouse. */
.crop-rect .lado { position: absolute; display: none; background: var(--pink); border-radius: 3px; box-shadow: 0 0 10px rgba(255, 92, 156, .9), 0 0 2px rgba(0, 0, 0, .6); pointer-events: none; z-index: 1; }
.crop-rect .lado.n, .crop-rect .lado.s { left: -3px; right: -3px; height: 5px; }
.crop-rect .lado.w, .crop-rect .lado.e { top: -3px; bottom: -3px; width: 5px; }
.crop-rect .lado.n { top: -4px; }
.crop-rect .lado.s { bottom: -4px; }
.crop-rect .lado.w { left: -4px; }
.crop-rect .lado.e { right: -4px; }
.crop-rect.agarra-n .lado.n, .crop-rect.agarra-s .lado.s, .crop-rect.agarra-w .lado.w, .crop-rect.agarra-e .lado.e { display: block; }
.crop-rect .handle { display: none; }
.crop-rect.active .handle {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--zona, #fff);
  border: 2px solid rgba(4, 11, 30, .6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.crop-rect .zone-tag { opacity: .7; }
.crop-rect.active .zone-tag { opacity: 1; }
.crop-rect .handle.nw { left: 3px; top: 3px; cursor: nwse-resize; }
.crop-rect .handle.ne { right: 3px; top: 3px; cursor: nesw-resize; }
.crop-rect .handle.sw { left: 3px; bottom: 3px; cursor: nesw-resize; }
.crop-rect .handle.se { right: 3px; bottom: 3px; cursor: nwse-resize; }

/* Botón de descarga: blanco, grande y con brillo arcoíris */
.download-wrap { display: grid; justify-items: center; gap: 8px; margin-top: 16px; }
.btn.siguiente {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(37, 244, 238, .14);
  border: 1px solid rgba(37, 244, 238, .45);
  color: var(--cyan);
}
/* Blanco por dentro, con el brillo de colores solo por fuera. Orden de pintado: el halo (::before)
   abajo, la cara blanca (::after) encima, y el texto (span) arriba de todo. Al tocar Descargar, la
   cara blanca deja pasar un barrido de luces que la cruza. */
.btn.download {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 15px 34px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #0a1020;
  background: transparent;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: none;
}
.btn.download > span { position: relative; z-index: 2; }
.btn.download::before {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: 0;
  border-radius: 999px;
  background: conic-gradient(from 0deg, #ff2d55, #ffb020, #4ade80, #25f4ee, #6366f1, #d946ef, #ff2d55);
  filter: blur(9px);
  opacity: .9;
  animation: arcoiris 4s linear infinite;
}
.btn.download::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Pisa el brillo genérico de .btn::after (ancho 45 %, inclinado y transparente). */
  width: auto;
  height: auto;
  transform: none;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  border-radius: 999px;
  background:
    linear-gradient(110deg, transparent 0%, #ff2d55 20%, #ffb020 32%, #4ade80 44%, #25f4ee 56%, #6366f1 68%, #d946ef 80%, transparent 100%) no-repeat -100% 0 / 250% 100%,
    #fff;
  background-blend-mode: multiply;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .06);
}
.btn.download:hover { transform: translateY(-2px); }
.btn.download:hover::before { filter: blur(13px); opacity: 1; }
.btn.download.bajando::after { animation: luces-adentro 1.4s ease-in-out 1; }
.btn.download.bajando { transform: scale(.98); }
.btn.download:active { transform: translateY(0) scale(.98); }
@keyframes luces-adentro {
  0% { background-position: -100% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}
@keyframes arcoiris { to { transform: rotate(1turn); } }

/* Acciones centradas en las solapas CÁMARA y SUBTÍTULOS */
#camara-view .bulk-actions, #subtitulos-view .bulk-actions { justify-content: center; }

/* Las mismas fuentes que usa el render, servidas desde la carpeta de trabajo */
@font-face { font-family: 'Poppins Black'; src: url('/trabajo/fonts/Poppins-Black.ttf'); font-display: swap; }
@font-face { font-family: 'Poppins ExtraBold'; src: url('/trabajo/fonts/Poppins-ExtraBold.ttf'); font-display: swap; }
@font-face { font-family: 'Poppins SemiBold'; src: url('/trabajo/fonts/Poppins-SemiBold.ttf'); font-display: swap; }
@font-face { font-family: 'Anton'; src: url('/trabajo/fonts/Anton-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('/trabajo/fonts/Bangers-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Luckiest Guy'; src: url('/trabajo/fonts/LuckiestGuy-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('/trabajo/fonts/PermanentMarker-Regular.ttf'); font-display: swap; }

/* Tarjetas de estilo de subtítulo: muestran el texto tal como va a quedar */
.caption-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.caption-sample {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: #05070f;
  overflow: hidden;
  padding: 4px;
}
.caption-sample span { font-size: 13px; line-height: 1.15; text-align: center; }
#subs-canvas { display: block; height: min(58vh, 560px); width: auto; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: #000; cursor: ns-resize; }
.check.apagado { opacity: .45; }

/* ===================== Editor: una mesa de trabajo que entra en la pantalla ===================== */
@font-face { font-family: 'Bebas Neue'; src: url('/trabajo/fonts/BebasNeue-Regular.ttf'); font-display: swap; }

.editor { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
.ed-tira { display: flex; align-items: flex-end; gap: 14px; padding: 10px 14px; flex-wrap: wrap; }
.ed-clip { flex: 0 1 300px; margin: 0; min-width: 200px; }
.ed-secuencia { flex: 1 1 200px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.ed-salida { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ed-salida .btn { white-space: nowrap; }
.siguiente-ed { display: inline-flex; align-items: center; gap: 6px; }

.sec-clip { display: inline-flex; align-items: center; flex: none; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); transition: border-color .18s ease-out, background-color .18s ease-out; }
.sec-clip.activo { border-color: var(--cyan); background: rgba(37, 244, 238, .12); }
.sec-clip button { border: 0; background: transparent; color: var(--text-dim); font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; padding: 6px 8px; border-radius: 999px; }
.sec-clip button:first-child { display: inline-flex; align-items: center; gap: 7px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 5px; color: var(--text); }
.sec-clip b { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 10px; }
.sec-clip.activo b { background: var(--cyan); color: #04202a; }
.sec-mini:hover { color: #fff; }
.sec-agregar { flex: none; margin: 0; }
.sec-agregar select { width: auto; max-width: 190px; padding: 6px 30px 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--cyan); }

.ed-centro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
.ed-lado { display: grid; align-content: start; gap: 8px; padding: 14px; }
.ed-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; font: 800 11px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ed-titulo:first-child { margin-top: 0; }
/* El botón de encuadre automático vive en el renglón del título: márgenes negativos para que no le
   sume alto a una columna que está calculada al píxel. */
.ed-auto { display: inline-flex; align-items: center; gap: 5px; margin: -6px 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(37, 244, 238, .45); background: rgba(37, 244, 238, .1); color: var(--cyan); font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.ed-auto:hover { background: rgba(37, 244, 238, .18); }
.ed-auto:active { background: rgba(37, 244, 238, .3); box-shadow: 0 0 14px rgba(37, 244, 238, .45); }
.ed-auto:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.ed-auto:disabled { opacity: .55; cursor: progress; }
.ed-plan { padding: 1px 7px; border-radius: 999px; background: rgba(251, 191, 36, .16); color: var(--warn); font-size: 9px; letter-spacing: .04em; }
.ed-lado .style-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin: 0; }
.ed-lado .style-card { padding: 6px; gap: 5px; font-size: 11px; border-radius: 11px; }
.ed-lado .style-name { font-size: 11px; line-height: 1.15; }
.ed-lado .tracking { margin: 0; padding: 8px 10px; gap: 10px; border-radius: 12px; }
.ed-lado .tracking-icono { width: 32px; height: 32px; border-radius: 9px; }
.ed-lado .tracking-icono svg { width: 18px; height: 18px; }
.ed-lado .tracking-texto strong { font-size: 13px; }
.ed-lado .tracking-nota { font-size: 11px; }
/* Texto, música y marca de agua: secciones plegables, una abierta por vez, para que la columna
   entre siempre sin barra y todo quede a un toque. */
.ed-acordeon { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.ed-acordeon[open] { border-color: rgba(37, 244, 238, .32); }
.ed-acordeon summary { list-style: none; margin: 0; padding: 10px 12px; cursor: pointer; border-radius: 12px; }
.ed-acordeon summary::-webkit-details-marker { display: none; }
.ed-acordeon summary:hover { color: var(--text); }
.ed-acordeon .ed-plan { margin-left: auto; margin-right: 8px; }
.ed-flecha { flex: none; transition: transform .2s ease-out; }
.ed-acordeon[open] .ed-flecha { transform: rotate(180deg); }
/* minmax(0, 1fr): sin esto una fila ancha (botones que no cortan renglón) estira la columna entera
   y todo el panel se sale por la derecha. */
.ed-acordeon-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 12px 12px; }
.ed-acordeon::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .28s var(--ease), opacity .18s ease-out, content-visibility .28s allow-discrete; }
.ed-acordeon[open]::details-content { block-size: auto; opacity: 1; }
.ed-marca { display: grid; gap: 8px; }
.ed-marca-ayuda { margin: 0; font-size: 11px; }
/* Con marca de agua, la vista previa se puede tocar para arrastrarla (sin que la página se mueva). */
#cam-canvas.con-marca { touch-action: none; }
.ed-marca[hidden] { display: none; }
.ed-sombra { margin: 2px 0 0; }
.ed-sombra .switch { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
.ed-sombra input:checked ~ .switch { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.ed-sombra .si, .ed-sombra .no { color: var(--text-dim); }
.ed-sombra[hidden] { display: none; }
/* Las opciones del zoom, en Efectos y junto a los interruptores que las gobiernan. Aparece sola
   en cuanto el zoom se usa, sea por la propuesta automática o poniendo uno a mano. */
.zoom-ajustes-caja { display: grid; gap: 12px; margin: -4px 0 4px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255, 255, 255, .02); }
.zoom-ajustes-caja[hidden] { display: none; }
.zoom-ajustes-caja .hint { margin: 0; }
/* Dos renglones: el rótulo arriba y la barra abajo a todo el ancho. En una sola fila, el texto
   más la barra no entran y la barra se salía de la caja. */
.zoom-ajustes-caja .zoom-intensidad { display: grid; gap: 7px; margin: 0; font-size: 12px; color: var(--muted); }
.zoom-ajustes-caja .zoom-intensidad input { width: 100%; min-width: 0; }
.zoom-ajustes-caja .zoom-intensidad span { color: var(--text); font-weight: 700; }

/* Las muestras de color del destello en Efectos. El estilo de antes estaba atado a .edit-menu
   (la paleta de la línea de tiempo), así que acá salían como botones pelados de 16x6 px:
   se veían como rayitas y era imposible acertarles. */
.destello-colores .muestra { width: 24px; height: 24px; padding: 0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; background: var(--color); cursor: pointer; box-shadow: 0 0 10px color-mix(in srgb, var(--color) 55%, transparent); transition: transform .12s ease; }
.destello-colores .muestra:hover { transform: scale(1.12); }
.destello-colores .muestra.activa { border-color: #fff; box-shadow: 0 0 0 2px #0a1020, 0 0 0 4px #fff; }
.ed-lado input[type="text"], .ed-lado select { padding: 8px 10px; font-size: 13px; }
.ed-lado label { margin: 0; font-size: 11px; }
.ed-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* El verificado de la marca de agua: un botón con el sello, pegado al campo del canal. Apagado se
   ve gris; prendido toma el color del verificado de esa plataforma. */
.marca-canal { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.marca-canal input[type="text"] { flex: 1; min-width: 0; }
.marca-verificado { flex: none; display: grid; place-items: center; width: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, .05); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.marca-verificado input { position: absolute; opacity: 0; pointer-events: none; }
.marca-verificado .sello { fill: rgba(255, 255, 255, .28); transition: fill .15s var(--ease); }
.marca-verificado:has(input:checked) { border-color: var(--sello, #53fc18); background: color-mix(in srgb, var(--sello, #53fc18) 14%, transparent); }
.marca-verificado:has(input:checked) .sello { fill: var(--sello, #53fc18); }
.marca-verificado:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ed-musica { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ed-musica-subir { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; cursor: pointer; }
.ed-musica-subir span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ed-fuente, .ed-previa { display: grid; padding: 12px; min-height: 0; }
.ed-fuente { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.ed-caja { display: grid; place-items: center; min-width: 0; min-height: 0; }
.ed-fuente .source-wrap { width: 100%; margin: 0; aspect-ratio: var(--ar, 16 / 9); min-height: 0; }
.ed-fuente .source-wrap video { width: 100%; height: 100%; }
/* Debajo del video: el reloj a la izquierda, los controles justo en el medio, la ayuda a la derecha. */
.ed-bajo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.ed-transporte { display: flex; align-items: center; gap: 10px; }
.ed-salto { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: var(--text-dim); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, transform .12s ease-out; }
.ed-salto:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ed-salto:active { transform: scale(.92); }
.ed-salto:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.ed-ayuda { margin: 0; text-align: right; font-size: 11px; min-width: 0; }

.ed-linea { display: grid; gap: 8px; padding: 10px 14px 12px; }
.ed-linea .zoom-linea { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; gap: 6px; }
.ed-linea .zoom-transporte { flex-wrap: wrap; row-gap: 6px; }
.ed-herramientas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ed-herramientas .btn { display: inline-flex; align-items: center; gap: 6px; }
.ed-nota { margin-left: auto; font-size: 12px; color: var(--text-dim) !important; text-align: right; }
.zoom-linea.sin-clip .zoom-pista, .zoom-linea.sin-clip .edit-carril { opacity: .45; pointer-events: none; }
.ed-pie { display: flex; justify-content: space-between; gap: 12px; min-height: 0; }
.ed-pie span:empty { display: none; }
.ed-resultado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ed-resultado > div:empty { display: none; }
.ed-resultado .download-wrap { margin: 0; }

/* Escenas: las partes del clip, cada una con su encuadre. La activa es la que se está editando. */
.escena-carril { position: relative; height: 26px; touch-action: none; user-select: none; }
.escena-carril[hidden] { display: none; }
.escena { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--color) 55%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--color) 16%, transparent); color: var(--text-dim); font: 700 11px Inter, system-ui, sans-serif; cursor: pointer; overflow: hidden; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out; }
.escena b { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--color); color: #04121f; font-size: 10px; }
.escena span { overflow: hidden; text-overflow: ellipsis; }
.escena:hover { color: var(--text); }
.escena.activa { background: color-mix(in srgb, var(--color) 34%, transparent); border-color: var(--color); color: #fff; }
.escena-corte { position: absolute; top: -3px; bottom: -3px; width: 14px; margin-left: -7px; z-index: 3; cursor: ew-resize; display: grid; place-items: center; }
.escena-corte::before { content: ''; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.escena-corte button { position: relative; z-index: 1; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0a1020; font-size: 9px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease-out; }
.escena-corte:hover button, .escena-corte button:focus-visible { opacity: 1; }

/* Carril de edición: tramos que se quitan (rojo) y tramos con otra velocidad (verde). */
.edit-sombras { position: absolute; inset: 0; pointer-events: none; border-radius: 10px; overflow: hidden; }
.edit-sombras i { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(254, 44, 85, .5) 0 6px, rgba(8, 12, 28, .78) 6px 12px); }
/* Imágenes sobre el clip: su carril (aparece cuando hay alguna) y su panel */
/* El carril de imágenes no le saca alto al resto del editor (regla: nada de bajar para buscar una
   opción): mientras está a la vista, la tira de fotogramas se achica lo mismo que él ocupa. */
/* Las tres pistas comparten un alto fijo (el que antes usaba la tira sola) que crece en ventanas
   más altas: así ni el audio ni las imágenes le sacan lugar al resto del editor. */
.pistas { --total: calc(72px + clamp(0px, (100vh - 900px) * .45, 64px)); --audio: 22px; --imagenes: 0px; --aire: 2px; display: grid; gap: var(--aire); position: relative; }
.pistas:has(.img-carril:not([hidden])) { --imagenes: 20px; --audio: 18px; }
.pistas .zoom-pista { height: calc(var(--total) - var(--audio) - var(--imagenes) - var(--aire) * 2); border-radius: 6px; }
.pistas:has(.img-carril:not([hidden])) .zoom-pista { height: calc(var(--total) - var(--audio) - var(--imagenes) - var(--aire) * 2); }
.pistas .zoom-pista canvas, .pistas .zoom-marcas { border-radius: 6px; }
/* La aguja cruza las tres pistas, como en un editor de video; el banderín queda arriba de todo. */
.pistas .zoom-aguja { top: calc(-1 * (var(--imagenes) + var(--aire))); bottom: calc(-1 * (var(--audio) + var(--aire))); }
.pistas:not(:has(.img-carril:not([hidden]))) .zoom-aguja { top: 0; }
.pistas:has(.img-carril:not([hidden])) .zoom-bandera { top: calc(-12px - var(--imagenes) - var(--aire)); }
.pista-nombre { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); z-index: 4; padding: 1px 4px; border-radius: 4px; background: rgba(3, 10, 31, .72); color: rgba(255, 255, 255, .75); font: 800 9px Inter, system-ui, sans-serif; letter-spacing: .04em; pointer-events: none; }
.audio-carril { position: relative; height: var(--audio); border-radius: 6px; overflow: hidden; background: rgba(16, 60, 44, .55); border: 1px solid rgba(74, 222, 128, .28); }
.audio-carril canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zoom-linea.sin-clip .audio-carril { opacity: .45; }
.img-carril { position: relative; height: var(--imagenes); border-radius: 8px; background: rgba(167, 139, 250, .07); border: 1px dashed rgba(167, 139, 250, .3); touch-action: none; user-select: none; }
.img-carril[hidden] { display: none; }
.img-tramo { position: absolute; top: 1px; bottom: 1px; display: flex; align-items: center; gap: 5px; padding: 0 12px 0 3px; border-radius: 6px; cursor: grab; overflow: hidden; background: rgba(167, 139, 250, .26); border: 1px solid rgba(167, 139, 250, .8); color: #ece4ff; font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.img-tramo:active { cursor: grabbing; }
.img-tramo.elegida { background: rgba(37, 244, 238, .22); border-color: var(--cyan); color: #fff; box-shadow: 0 0 12px rgba(37, 244, 238, .35); }
.img-tramo img { height: 14px; width: 14px; object-fit: contain; border-radius: 4px; background: rgba(0, 0, 0, .35); flex: none; pointer-events: none; }
.img-tramo .zoom-borde { position: absolute; top: 0; bottom: 0; right: 0; width: 8px; cursor: ew-resize; background: rgba(255, 255, 255, .35); }
.img-tramo .edit-x { margin-left: auto; }
.img-biblioteca { display: flex; gap: 5px; min-width: 0; overflow: hidden; }
.img-mini { flex: none; width: 32px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .3); cursor: pointer; transition: border-color .15s var(--ease); }
.img-mini:hover, .img-mini:focus-visible { border-color: var(--cyan); outline: none; }
.img-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-ajustes { display: grid; gap: 6px; }
.img-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.img-tres select { padding: 7px 22px 7px 8px; font-size: 12px; background-position: right 7px center; background-size: 9px; }
#img-acordeon .ed-acordeon-cuerpo { gap: 5px; padding-bottom: 10px; }
#img-acordeon .hint { margin: 0; }
.img-ajustes[hidden] { display: none; }
/* Ventana baja: los dos renglones de abajo van en uno solo y se va lo que tiene otro camino (la ✕ del
   carril ya borra la imagen). Con ventana alta cada renglón va por su lado: ver el @media de abajo. */
.img-filas { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.img-filas .mini-switch { font-size: 11px; white-space: nowrap; }
.img-filas .img-fondo { padding: 4px 8px; letter-spacing: .02em; }
.img-fondo .largo { display: none; }
.img-filas .img-fila { display: contents; }
.img-filas .img-borrar, .img-filas .img-cual { display: none; }
.img-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; font-size: 11px; color: var(--muted); }
.img-fila .img-cual { margin-left: auto; white-space: nowrap; }
.img-fila .mini-switch { min-width: 0; }
.img-fila .img-borrar { margin-left: auto; white-space: nowrap; }
/* Compacto (ventana baja, 204 px útiles de ancho): los dos deslizadores van lado a lado y finitos. */
.img-deslizadores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 8px; }
.img-deslizadores:has(#img-fuerza-caja:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.img-deslizadores label { gap: 3px; min-width: 0; }
.img-deslizadores .img-rotulo { white-space: nowrap; overflow: hidden; }
.img-deslizadores input[type="range"] { margin: 0; padding: 0; height: 20px; border: 0; background: none; }
.img-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.img-rotulo b { font-weight: 700; color: var(--text); }
/* Con una ventana alta sobra lugar en la columna: los controles se abren en vez de ir apretados.
   En una ventana baja (la de 900 px, que está calculada al píxel) siguen compactos. */
@media (min-height: 1000px) {
  .img-ajustes { gap: 12px; }
  #img-acordeon .ed-acordeon-cuerpo { gap: 10px; padding-bottom: 14px; }
  .img-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .img-tres .img-anim { grid-column: 1 / -1; }
  .img-tres select { padding: 9px 30px 9px 12px; font-size: 13px; background-position: right 12px center; background-size: 11px; }
  .img-deslizadores { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .img-filas { display: grid; gap: 12px; }
  .img-filas .img-fila { display: flex; font-size: 12px; }
  .img-filas .img-borrar, .img-filas .img-cual { display: inline-block; }
  .img-filas .img-fondo { padding: 6px 12px; font-size: 11px; letter-spacing: .04em; }
  .img-fondo .largo { display: inline; }
  .img-fondo .corto { display: none; }
  .img-deslizadores:has(#img-fuerza-caja:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .img-deslizadores input[type="range"] { height: 28px; }
  .img-mini { width: 38px; height: 38px; }
  /* Las miniaturas bajan a su propio renglón y se ven todas, en vez de cortarse al lado del botón. */
  #img-acordeon .ed-musica { flex-wrap: wrap; }
  #img-acordeon .img-biblioteca { flex-wrap: wrap; width: 100%; overflow: visible; }
}
.img-fondo { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(37, 244, 238, .45); background: rgba(37, 244, 238, .1); color: var(--cyan); font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease); }
.img-fondo:hover { background: rgba(37, 244, 238, .18); }
.img-fondo:active { background: rgba(37, 244, 238, .3); box-shadow: 0 0 14px rgba(37, 244, 238, .45); }
.img-fondo:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 244, 238, .4); }
.img-fondo:disabled { opacity: .55; cursor: progress; }
.img-fondo.hecho { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: var(--text-dim); }

.edit-carril { position: relative; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .12); touch-action: none; user-select: none; }
.edit-vacio { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; }
.edit-tramo { position: absolute; top: 2px; bottom: 2px; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 6px; border-radius: 6px; cursor: grab; overflow: hidden; font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.edit-tramo:active { cursor: grabbing; }
.edit-tramo.quitar { background: rgba(254, 44, 85, .3); border: 1px solid rgba(254, 44, 85, .85); color: #ffd3dc; }
.edit-tramo.velocidad { background: rgba(74, 222, 128, .24); border: 1px solid rgba(74, 222, 128, .8); color: #d6ffe4; }
.edit-tramo.destello { z-index: 2; padding: 0 9px 0 2px; background: color-mix(in srgb, var(--color, #fff) 88%, transparent); border: 1px solid var(--color, #fff); color: #0a1020; box-shadow: 0 0 14px color-mix(in srgb, var(--color, #fff) 60%, transparent); }
.edit-color { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; padding: 2px 4px; cursor: pointer; }
.edit-menu.paleta { border-color: rgba(255, 255, 255, .35); }
.edit-menu.paleta span { width: auto; margin-right: 4px; }
.edit-menu button.muestra { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--color); border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 0 10px color-mix(in srgb, var(--color) 55%, transparent); }
.edit-menu button.muestra:hover { background: var(--color); transform: scale(1.12); }
.edit-menu button.muestra.activa { background: var(--color); border-color: #fff; box-shadow: 0 0 0 2px #0a1020, 0 0 0 4px #fff; }
.edit-tramo.destello .zoom-borde { background: rgba(10, 16, 32, .35); width: 6px; }
.edit-etiqueta { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.edit-factor { border: 0; border-radius: 999px; padding: 2px 7px; background: #4ade80; color: #04220f; font: inherit; cursor: pointer; }
/* Menú de velocidad: se abre hacia arriba, sobre la línea de tiempo. */
.edit-menu { position: absolute; bottom: calc(100% + 8px); z-index: 30; display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(14, 20, 38, .97); border: 1px solid rgba(74, 222, 128, .45); box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .9); white-space: nowrap; }
.edit-menu div { display: flex; align-items: center; gap: 6px; }
.edit-menu span { width: 78px; font: 700 11px Inter, system-ui, sans-serif; color: var(--text-dim); }
.edit-menu button { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: var(--text); border-radius: 999px; padding: 5px 11px; font: 800 12px Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, transform .12s ease-out; }
.edit-menu button:hover { background: rgba(255, 255, 255, .14); }
.edit-menu button:active { transform: scale(.94); }
.edit-menu button.activa { background: #4ade80; border-color: #4ade80; color: #04220f; }
.edit-x { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; opacity: .75; padding: 2px 4px; }
.edit-x:hover { opacity: 1; }
.edit-tramo .zoom-borde { position: absolute; top: 0; bottom: 0; right: 0; width: 8px; cursor: ew-resize; background: rgba(255, 255, 255, .35); }

/* Con pantalla de escritorio, todo entra sin bajar: tira arriba, tres columnas al medio y la
   línea de tiempo abajo. El alto lo mide montaje.js (--ed-arriba = dónde empieza el editor). */
@media (min-width: 1100px) and (min-height: 620px) {
  #camara-view.editor:not([hidden]) {
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100dvh - var(--ed-arriba, 128px));
    padding: 10px 20px 12px;
    align-items: stretch;
  }
  .editor .ed-centro { grid-template-columns: 330px minmax(0, 1fr) auto; grid-template-rows: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "lado fuente previa" "extra fuente previa"; }
  .editor .ed-lado { grid-area: lado; }
  .editor .ed-extra { grid-area: extra; }
  .editor .ed-fuente { grid-area: fuente; }
  .editor .ed-previa { grid-area: previa; }
  .editor .ed-lado { overflow-y: auto; scrollbar-width: thin; }
  .editor .ed-lado::before { inset: 0; }
  .editor .ed-previa .ed-caja { height: 100%; }
  /* El alto lo mide montaje.js: un porcentaje acá no se resuelve y el lienzo (1080x1920) se desborda. */
  .editor #cam-canvas { height: var(--previa-alto, 320px); width: auto; max-width: none; }
  .editor .ed-tira { align-items: center; padding: 8px 14px; }
  .editor .ed-clip { display: flex; align-items: center; gap: 10px; }
  .editor .ed-clip select { flex: 1; }
  .editor .ed-fuente .source-wrap { width: var(--fuente-ancho, 100%); }
}
/* Con pantalla bien ancha, cuatro columnas: nada queda escondido detrás de una barra. */
@media (min-width: 1500px) and (min-height: 620px) {
  .editor .ed-centro { grid-template-columns: 440px minmax(0, 1fr) auto 270px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "lado fuente previa extra"; }
  /* Si la pantalla es baja, todo un poco más apretado para que siga entrando sin barra. */
  @media (max-height: 940px) {
    .editor .ed-centro { grid-template-columns: 380px minmax(0, 1fr) auto 270px; }
    .editor .ed-lado .style-grid { gap: 5px; }
    .editor .ed-lado .style-card { padding: 4px; gap: 3px; }
    .editor .ed-lado .style-name { font-size: 10px; }
    .editor .ed-lado .tracking { padding: 6px 10px; }
  }
}

/* Columna derecha del editor: el nombre de cada deslizador y su valor van en un mismo renglón
   ("Tamaño ........ 100%"), no uno abajo del otro. */
.ed-extra label:has(> input[type="range"]) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; }
.ed-extra label:has(> input[type="range"]) > input[type="range"] { grid-column: 1 / -1; margin: 0; }
.ed-extra label:has(> input[type="range"]) > span { color: var(--text); font-weight: 700; }
/* Ventana baja: con cuatro paneles en la columna, el de Marca de agua no entraba. Los deslizadores
   van finitos y la ayuda de "arrastrala" se va (el cursor de manito sobre la vista previa ya lo dice). */
@media (max-height: 999px) {
  .ed-extra label:has(> input[type="range"]) { row-gap: 3px; }
  .ed-extra input[type="range"] { padding: 0; height: 20px; border: 0; background: none; }
  .ed-marca { gap: 6px; }
  .ed-marca-ayuda { display: none; }
}


/* Menú de un zoom suelto: intensidad propia y sobre qué capa cae. Se abre con el botón del
   marcador, no al tocarlo, para no pelear con el arrastre. */
.zoom-marca .ajuste { color: var(--text-dim); }
#zoom-menus { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.zoom-menu-sitio { position: absolute; bottom: 100%; }
.zoom-menu {
  position: absolute;
  bottom: 8px;
  left: 0;
  transform: translateX(-50%);
  pointer-events: auto;
  display: grid;
  gap: 8px;
  width: 210px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(10, 16, 32, .97);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8);
  cursor: default;
}
.zoom-menu-fuerza { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; font-size: 11px; color: var(--text-dim); }
.zoom-menu-fuerza input { grid-column: 1 / -1; margin: 0; }
.zoom-menu-fuerza b { font-size: 11px; color: var(--cyan); }
.zoom-menu-capas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zoom-menu-capas button {
  padding: 6px 4px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}
.zoom-menu-capas button.activa { border-color: rgba(167, 139, 250, .6); background: rgba(167, 139, 250, .18); color: var(--violet); }

/* La solapa de automatización se ve distinta a las cuatro del camino a mano: no es un paso más,
   es el atajo que se los saltea.
   Cara OPACA en el azul de la barra —las otras dejan ver el vidrio, esta no— y el arcoíris del
   botón de descarga puesto en el anillo y en el resplandor de afuera, que es el lenguaje que ya
   usa el proyecto para "esto es lo bueno". El destello apunta al mouse cuando el puntero está
   cerca (`.apuntando`, lo maneja app.js) y gira solo cuando está lejos.
   Va en CSS y no en WebGL: es una pastilla de 13 px, no un titular. */
@property --giro-auto {
  syntax: '<angle>';
  initial-value: 0deg;
  /* HEREDA a propósito: el anillo y el resplandor son ::before y ::after del botón, y el ángulo
     que escribe app.js al seguir el mouse se pone en el botón. Sin herencia, esas dos capas se
     quedaban en 0deg y pegaban un salto mientras la cara sí seguía al puntero. */
  inherits: true;
}
.tabs .tab-auto {
  position: relative;
  color: #ffd98a;
  font-weight: 700;
  /* Opaca, pero el arcoíris se ve ADENTRO: es el mismo degradado del anillo, tapado con un velo.
     Como gira con la misma variable, el color de adentro acompaña al del borde.
     El velo es gris violáceo oscuro (el blanco de la referencia, bajado hasta acá) y no el azul
     de la barra: así la pastilla se despega del vidrio de atrás en vez de confundirse con él. */
  background:
    linear-gradient(rgba(32, 30, 46, .86), rgba(22, 21, 33, .88)),
    conic-gradient(from var(--giro-auto), #ff2d55 0deg, #ffb020 50deg, #4ade80 153deg, #25f4ee 190deg, #6366f1 250deg, #d946ef 304deg, #ff2d55 360deg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
  animation: giro-auto 4s linear infinite;
  animation-delay: var(--giro-desde, 0s);
}
/* El anillo: el arcoíris recortado al borde, con el corte girando.
   Los grados de cada color NO son parejos a propósito: están puestos según la distancia real de
   tono entre uno y el siguiente. Repartidos de a 60° —que es lo obvio— el barrido frena entre
   verde y cian (36° de tono) y se dispara entre naranja y verde (103°), y esa diferencia de
   velocidad se ve como si el bucle tuviera un corte. Con estas posiciones el color avanza a
   ritmo parejo y la vuelta no tiene costura. */
.tabs .tab-auto::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--giro-auto), #ff2d55 0deg, #ffb020 50deg, #4ade80 153deg, #25f4ee 190deg, #6366f1 250deg, #d946ef 304deg, #ff2d55 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* sin animación propia: hereda el ángulo del botón */
  pointer-events: none;
}
/* El resplandor: el mismo arcoíris desenfocado, solo por fuera de la cara. */
.tabs .tab-auto::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--giro-auto), #ff2d55 0deg, #ffb020 50deg, #4ade80 153deg, #25f4ee 190deg, #6366f1 250deg, #d946ef 304deg, #ff2d55 360deg);
  filter: blur(9px);
  opacity: var(--cerca-auto, .3);
  /* sin animación propia: hereda el ángulo del botón */
  transition: opacity .2s;
  pointer-events: none;
}
/* Con el puntero cerca, el arcoíris deja de girar solo y se orienta hacia el mouse. La
   transición sobre la propiedad registrada hace el suavizado sola, sin bucle de cuadros. */
.tabs .tab-auto.apuntando,
.tabs .tab-auto.apuntando::before,
.tabs .tab-auto.apuntando::after {
  animation: none;
  transition: --giro-auto .18s linear, opacity .2s;
}
.tabs .tab-auto:hover { color: #ffe9b8; }
.tabs .tab-auto:hover, .tabs .tab-auto.active {
  background:
    linear-gradient(rgba(40, 37, 56, .74), rgba(28, 26, 41, .78)),
    conic-gradient(from var(--giro-auto), #ff2d55 0deg, #ffb020 50deg, #4ade80 153deg, #25f4ee 190deg, #6366f1 250deg, #d946ef 304deg, #ff2d55 360deg);
}
.tabs .tab-auto.active { color: #fff; }
@keyframes giro-auto { to { --giro-auto: 360deg; } }

/* El destello es el pedido, no un adorno: se exceptúa de la regla de movimiento reducido, igual
   que el giro de los planes. (Las animaciones de Windows del dueño están apagadas.) */
@media (prefers-reduced-motion: reduce) {
  .tabs .tab-auto { animation: giro-auto 4s linear infinite !important; animation-delay: var(--giro-desde, 0s) !important; }
  .tabs .tab-auto.apuntando, .tabs .tab-auto.apuntando::before, .tabs .tab-auto.apuntando::after { animation: none !important; }
}

.auto-pasos { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.auto-pasos strong { color: var(--text); }

/* ---------- Panel del modo Automático ---------- */
.dialog.automatico { width: min(660px, 94vw); }
.auto-buscar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: end; gap: 8px; }
.auto-buscar label { min-width: 0; }
@media (max-width: 620px) { .auto-buscar { grid-template-columns: 1fr; } }

.auto-vod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 6px;
}
.auto-vod-datos { display: grid; min-width: 0; flex: 1; }
.auto-vod-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.auto-vod-datos .muted { font-size: 11.5px; }

/* La barra por tramos: cada etapa ocupa lo que pesa y se llena por dentro, como la barra de
   experiencia de Minecraft. De un vistazo se ve en qué etapa está y cuánto falta de esa etapa. */
/* Los cuatro tramos, todos del mismo ancho: se lee como cuatro casilleros que se completan.
   Verde, y con el mismo destello que recorre el botón Automático — acá pasa de izquierda a
   derecha por la parte ya llena, en vez de dar la vuelta. */
.auto-barra { display: flex; gap: 3px; height: 26px; }
.auto-tramo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .05);
  display: grid;
  place-items: center;
}
.auto-tramo i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, #46c46a, #2f9a4e);
  transition: width .25s ease-out;
}
/* El destello: una franja clara que cruza lo que ya está lleno. */
.auto-tramo i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(210, 255, 220, .75) 45%, transparent 70%);
  background-size: 260% 100%;
  animation: auto-destello 1.8s linear infinite;
}
.auto-tramo.listo i {
  background: linear-gradient(180deg, #52d97a, #35ab58);
  box-shadow: 0 0 12px rgba(74, 222, 128, .45);
}
/* Terminado deja de destellar: el brillo dice "esto está trabajando". */
.auto-tramo.listo i::after { animation: none; opacity: 0; }
@keyframes auto-destello { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* El destello es la señal de que algo está corriendo, así que se exceptúa del movimiento
   reducido igual que el resto de lo que informa estado. */
@media (prefers-reduced-motion: reduce) {
  .auto-tramo i::after { animation: auto-destello 1.8s linear infinite !important; }
  .auto-tramo.listo i::after { animation: none !important; }
}
.auto-tramo span {
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-dim);
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-tramo.listo span, .auto-tramo.andando span { color: var(--text); }

.auto-titulo { font-size: 13px; margin: 6px 0 0; }
.auto-clip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 6px;
}
.auto-clip-datos { display: grid; min-width: 0; flex: 1; }
.auto-clip-datos strong { font-size: 13px; }
.auto-clip-datos .muted { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-etiqueta {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 6px;
}
.auto-etiqueta.camara { color: var(--warn); background: rgba(251, 191, 36, .16); }
.auto-etiqueta.juego { color: var(--cyan); background: rgba(37, 244, 238, .14); }

.auto-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auto-pie .hint { margin: 0; }

/* La alerta del panel Automático: el .banner de la página, pero sin su margen (el diálogo ya
   trae el suyo) y con el punto arriba, que centrado en un texto de tres renglones queda raro. */
.auto-alerta { margin: 0; }
.auto-alerta::before { top: 19px; transform: none; }

/* Las pistas se reparten solas la altura disponible en vez de restarse a mano unas a otras.
   Antes .zoom-pista calculaba su alto como "el total menos el audio menos las imágenes menos los
   huecos", y cada pista nueva obligaba a corregir esa cuenta. Ahora las chicas miden lo suyo y el
   video se queda con lo que sobra, así agregar V2 o FX no rompe nada. */
/* La altura NO es fija: el bloque crece cuando aparecen V2, FX o A2. Con una altura fija, cada
   pista nueva le robaba alto al video hasta dejarlo en su mínimo, que es justo la pista que hay
   que poder ver. En un editor la línea de tiempo se hace más alta cuando tiene más capas. */
.pistas { height: auto; display: flex; flex-direction: column; }
.pistas > .img-carril,
.pistas > .zoom-todo-carril,
.pistas > .edit-carril,
.pistas > .audio-carril,
.pistas > .musica-carril { flex: none; }
/* El video conserva el alto que tenía calculado; las demás pistas se suman abajo y arriba. */
.pistas .zoom-pista,
.pistas:has(.img-carril:not([hidden])) .zoom-pista {
  flex: none;
  height: calc(var(--total) - var(--audio) - var(--imagenes) - var(--aire) * 2);
  min-height: 64px;
}

/* El carril de edición vive ahora entre V2 y V1, así que se alinea con las otras pistas. */
.pistas > .edit-carril { height: 26px; margin: 0 0 var(--aire); border-radius: 6px; }

/* El encuadre que se repite entre clips, para editar en tanda. */
.plantilla { display: grid; gap: 8px; margin-top: 4px; }
.plantilla-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid rgba(37, 244, 238, .28); border-radius: var(--radius-sm); background: rgba(37, 244, 238, .07); font-size: 11px; color: var(--text-dim); }
.plantilla-estado[hidden] { display: none; }

/* A2: la música. Va en bucle todo el clip, así que la barra ocupa el ancho entero. */
.musica-carril {
  position: relative; height: 20px; margin-top: var(--aire);
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; overflow: hidden;
  background: rgba(37, 244, 238, .10); border: 1px solid rgba(37, 244, 238, .30);
}
.musica-carril[hidden] { display: none; }
.musica-carril .pista-nombre { color: var(--cyan); }
.musica-titulo { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .7); }

/* La pista V2: el zoom que va POR ENCIMA del clip. Se distingue de V1 a propósito —otro tinte y
   un borde violeta— porque la diferencia entre "agranda todo" y "agranda la cámara" es
   justamente lo que costaba entender cuando los dos vivían en la misma franja. */
.zoom-todo-carril {
  position: relative;
  height: 30px;
  margin-bottom: var(--aire);
  border: 1px solid rgba(167, 139, 250, .38);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(115deg, rgba(167, 139, 250, .10) 0 9px, transparent 9px 18px),
    rgba(167, 139, 250, .07);
  overflow: hidden;
}
.zoom-todo-carril .zoom-marcas { position: absolute; inset: 0; }
.zoom-todo-carril .pista-nombre { color: var(--violet); }
/* Un marcador de V2 lleva el violeta de su pista, esté donde esté. */
.zoom-marca.sobre-todo { --zoom-tinte: var(--violet); }

/* La solapa del destello, debajo de su interruptor. */
.destello-ajustes { display: grid; gap: 10px; margin: -4px 0 4px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255, 255, 255, .02); }
.destello-colores { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.destello-colores > div { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- Censura, volumen y lo nuevo de Clips ---------- */

.censura-ajustes { display: grid; gap: 10px; margin: -4px 0 4px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255, 255, 255, .02); }
.censura-ajustes label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.censura-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .censura-fila { grid-template-columns: 1fr; } }

.censura-hallazgos { display: grid; gap: 4px; max-height: 210px; overflow: auto; padding-right: 4px; }
.censura-hallazgo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px; cursor: pointer; }
.censura-hallazgo:hover { background: rgba(255, 255, 255, .05); }
.censura-cuando { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }
.censura-dicho { font-size: 12px; font-weight: 600; color: var(--err); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Destildado = no se tapa: se ve apagado y sin el rojo de "esto sale del clip". */
.censura-hallazgo:has(input:not(:checked)) .censura-dicho { color: var(--muted); font-weight: 500; text-decoration: line-through; }

/* El volumen vive al lado del reproductor, no en Efectos: es donde la mano lo busca. */
.ed-volumen { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ed-volumen svg { flex: none; }
.ed-volumen input[type="range"] { width: 96px; }
.ed-volumen output { min-width: 42px; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--text); }
/* Fuera de 100 % se remarca: es fácil dejarlo movido sin querer y no entender por qué suena mal.
   Va por clase y no por :has([value]), porque el atributo no cambia al arrastrar: solo lo hace
   la propiedad, y el selector se quedaría mirando el 100 de siempre. */
.ed-volumen.movido output { color: var(--warn); }

/* Una tarjeta de Efectos que es una acción y no un interruptor. */
.tracking.accion { cursor: default; }
.tracking.accion .tracking-plan { white-space: normal; }

/* El nombre del clip es el botón de renombrar: el lápiz aparece al pasar el mouse. */
.clip-nombre { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.clip-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-lapiz { flex: none; opacity: 0; transition: opacity .15s ease; }
.clip-nombre:hover .clip-lapiz, .clip-nombre:focus-visible .clip-lapiz { opacity: .75; }
.clip-nombre:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.chip.peligro { color: var(--err); border-color: rgba(255, 84, 112, .4); }
.chip.peligro:hover { background: rgba(255, 84, 112, .12); }
.chip svg { vertical-align: -2px; margin-right: 4px; }

.borrar-lista { margin: 0; padding-left: 18px; display: grid; gap: 3px; max-height: 200px; overflow: auto; font-size: 12px; color: var(--muted); }
.borrar-lista li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El aviso de no cerrar. La cadena la orquesta el navegador, así que cerrar la ventana la corta:
   por eso avisa fuerte mientras trabaja, y afloja el tono cuando ya falta poco. */
.auto-aguante {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .1);
  animation: aguante 2.4s ease-in-out infinite;
}
.auto-aguante.casi {
  color: var(--ok);
  border-color: rgba(74, 222, 128, .4);
  background: rgba(74, 222, 128, .12);
  animation: none;
}
@keyframes aguante { 50% { opacity: .55; } }

/* Es un aviso de que algo está corriendo: se exceptúa del movimiento reducido, como el resto
   de lo que informa estado. */
@media (prefers-reduced-motion: reduce) {
  .auto-aguante { animation: aguante 2.4s ease-in-out infinite !important; }
  .auto-aguante.casi { animation: none !important; }
}