:root {
        color-scheme: dark;
        --bg: #070a24;
        --bg-2: #0c1132;
        --panel: #12173d;
        --panel-2: #1b2152;
        --line: #272e63;
        --ink: #ffffff;
        --ink-2: #aab1da;
        --ink-3: #7078a6;
        --accent: #8b7bff;
        --accent-ink: #ffffff;
        --accent-soft: rgba(139, 123, 255, 0.16);
        --grad: linear-gradient(120deg, #8b3dff 0%, #5f5cff 52%, #3d8bff 100%);
        --grad-text: linear-gradient(92deg, #38bdf8 0%, #818cf8 48%, #c084fc 100%);
        --ok: #3ddc84;
        --bad: #ff6b6b;
        --orange: #b18cff;
        --radius: 16px;
        --nav-bg: rgba(7, 10, 36, 0.88);
        --shadow-pop: 0 22px 48px rgba(0, 0, 0, 0.55);
        --shadow-frame: 0 26px 60px rgba(0, 0, 0, 0.55);
        --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.35);
        --err-ink: #ffb3b3;
        --ok-ink: #a9f0c8;
        --cz-bg: #070818;
        --cz-bg2: #090b24;
        /* portada1 (video del dueño 2026-10-31 12:02 — el FANTASMA
           al deslizar el panel derecho): estos dos tokens eran
           AUTORREFERENTES (var de sí mismos) = inválidos al
           computar, así que TODO fondo var(--cz-panel)/var(--cz-field)
           del tema OSCURO computaba TRANSPARENTE: el panel derecho
           no tenía superficie propia y al desplazarlo su contenido
           se leía DOBLE/translúcido sobre lo de detrás (el resumen
           clavado y el fondo de la pantalla). El panel 3 ya se había
           parcheado a mano con el literal; aquí se arregla la raíz
           con el mismo valor que el tema claro ya declaraba. */
        --cz-panel: #12173d;
        --cz-panel-hi: #12152f;
        --cz-panel-lo: #0a0c28;
        --cz-field: #12173d;
        --cz-line: rgba(255, 255, 255, 0.09);
        --warn-ink: #ffd23e;
        --warn-line: rgba(255, 210, 62, 0.55);
        --warn-bg: rgba(255, 197, 56, 0.13);
      }
      /* ---------- Tema claro: mismo diseño, fondos claros ---------- */
      [data-theme="light"] {
        color-scheme: light;
        /* ESPEC FINAL del dueño (2026-10-30 20:56): en claro SOLO
           cambia el fondo — a blanco — y todo lo demás se mantiene
           igual que en oscuro. Por eso las variables de COMPONENTE
           repiten los valores del tema oscuro; los textos que van
           directos sobre el fondo se oscurecen con reglas puntuales
           (cabecera, saludo, títulos, barra inferior). */
        --bg: #FCFBF9; /* interfaz2f: PALETA CLARA OFICIAL (04:19) — sustituye al blanco puro */
        /* interfaz2c: fondo en claro de MIS VIDEOS, parametrizado
           en una sola variable. ELECCIÓN DEL DUEÑO (2026-10-30
           23:34): opción A — gris lavanda suave PLANO #f1f0fa,
           SOLO para Mis videos; el resto del modo claro conserva
           el blanco #ffffff de su espec. */
        --lib-light-bg: #FCFBF9; /* interfaz2f (04:10): crema oficial, fuera el lavanda */
        --bg-2: #0c1132;
        --panel: #12173d;
        --panel-2: #1b2152;
        --line: #272e63;
        --ink: #ffffff;
        --ink-2: #aab1da;
        --ink-3: #7078a6;
        --accent: #8b7bff;
        --accent-ink: #ffffff;
        --accent-soft: rgba(139, 123, 255, 0.16);
        --grad: linear-gradient(120deg, #8b3dff 0%, #5f5cff 52%, #3d8bff 100%);
        --grad-text: linear-gradient(92deg, #38bdf8 0%, #818cf8 48%, #c084fc 100%);
        --ok: #3ddc84;
        --bad: #ff6b6b;
        --orange: #b18cff;
        --nav-bg: rgba(255, 255, 255, 0.92);
        --shadow-pop: 0 18px 40px rgba(23, 28, 10, 0.2);
        --shadow-frame: 0 22px 48px rgba(23, 28, 10, 0.22);
        --shadow-card: 0 10px 26px rgba(23, 28, 10, 0.1);
        --err-ink: #ffb3b3;
        --ok-ink: #a9f0c8;
        --cz-bg: #070818;
        --cz-bg2: #090b24;
        --cz-panel: #12173d;
        --cz-panel-hi: #12152f;
        --cz-panel-lo: #0a0c28;
        --cz-field: #12173d;
        --cz-line: rgba(255, 255, 255, 0.09);
        --warn-ink: #ffd23e;
        --warn-line: rgba(255, 210, 62, 0.55);
        --warn-bg: rgba(255, 197, 56, 0.13);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; scroll-padding-top: 84px; }
      html, body { margin: 0; padding: 0; }
      /* fixes71: red de seguridad en la raíz — ningún contenido puede crear
         scroll horizontal de página; `clip` (no `hidden`) para no crear un
         contenedor de scroll que rompa el position: sticky de .nav.
         touch-action: manipulation elimina el zoom por doble toque en CSS. */
      html, body { overflow-x: clip; touch-action: manipulation; }
      body {
        background: var(--bg);
        color: var(--ink);
        font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: 16px;
        line-height: 1.45;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3, p { margin: 0; }
      button { font: inherit; }

      /* ---------- (1) Navbar ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--nav-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }
      .nav-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .logo {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: 21px;
        font-weight: 800;
        color: var(--ink);
        text-decoration: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .logo .dot { color: var(--accent); }
      .nav-links { display: flex; align-items: center; gap: 4px; }
      .drop { position: relative; }
      .drop-btn {
        background: none;
        border: none;
        color: var(--ink);
        font-weight: 700;
        font-size: 15px;
        padding: 9px 12px;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .drop-btn:hover { background: var(--panel-2); }
      .drop-btn .caret { font-size: 10px; color: var(--ink-3); }
      .drop-panel {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 240px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 8px;
        box-shadow: var(--shadow-pop);
      }
      .drop.open .drop-panel { display: block; }
      @media (hover: hover) { .drop:hover .drop-panel { display: block; } }
      .drop-panel button, .drop-panel a {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        background: none;
        border: none;
        color: var(--ink);
        text-decoration: none;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
      }
      .drop-panel button:hover, .drop-panel a:hover { background: var(--panel-2); }
      .drop-panel .d-sub { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
      .nav-link {
        color: var(--ink);
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        padding: 9px 12px;
        border-radius: 999px;
      }
      .nav-link:hover { background: var(--panel-2); }
      .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
      .lang-select {
        background: var(--panel-2);
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 10px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        max-width: 132px;
        cursor: pointer;
      }
      .balance-chip {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-2);
        white-space: nowrap;
      }
      .balance-chip b { color: var(--accent); font-size: 15px; }
      .btn-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--accent);
        color: var(--accent-ink);
        border: none;
        border-radius: 999px;
        font-weight: 800;
        font-size: 15px;
        padding: 11px 22px;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        min-height: 44px;
      }
      .btn-pill:hover { filter: brightness(1.07); }
      .btn-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--panel-2);
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 999px;
        font-weight: 700;
        font-size: 15px;
        padding: 11px 22px;
        cursor: pointer;
        text-decoration: none;
        min-height: 44px;
      }
      .btn-ghost:hover { border-color: var(--accent); }
      .burger {
        display: none;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        width: 44px; height: 44px;
        font-size: 18px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
      }
      .mobile-panel { display: none; border-top: 1px solid var(--line); padding: 10px 16px 16px; }
      .nav.mobile-open .mobile-panel { display: block; }
      .mobile-panel .mp-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 6px; }
      .mobile-panel button, .mobile-panel a.mp-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: var(--ink);
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        padding: 9px 4px;
        cursor: pointer;
      }
      @media (max-width: 900px) {
        .nav-links, .nav .lang-select { display: none; }
        .burger { display: inline-flex; }
        .balance-chip { display: none; }
      }

      .wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 56px; }
      @media (min-width: 1024px) { .wrap { padding: 0 28px 72px; } }

      /* ---------- (2) Hero ---------- */
      .hero-sec { padding: 8px 0 2px; text-align: center; }
      .hero-sec h1 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(21px, 4vw, 34px);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.015em;
        max-width: 620px;
        margin: 0 auto 5px;
      }
      .hl {
        font-family: "Instrument Serif", Georgia, serif;
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0;
      }
      .hero-sub { color: var(--ink-2); font-size: 12px; line-height: 1.4; max-width: 480px; margin: 0 auto 8px; }
      .hero-sec .btn-pill { font-size: 13px; padding: 7px 18px; min-height: 36px; }

      /* Mostrador por pestañas */
      .showcase-box { max-width: 430px; margin: 10px auto 0; text-align: left; }
      .show-tabs {
        display: inline-flex;
        gap: 4px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px;
        margin-bottom: 14px;
      }
      .show-tab {
        background: none;
        border: none;
        color: var(--ink-2);
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 9px 18px;
        border-radius: 999px;
        cursor: pointer;
      }
      .show-tab.active { background: var(--accent); color: var(--accent-ink); }
      .show-frame {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: #000;
        box-shadow: var(--shadow-frame);
      }
      .show-frame video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
      .show-frame .show-panel { display: none; }
      .show-frame .show-panel.active { display: block; }
      .play-btn {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 74px; height: 74px;
        border-radius: 50%;
        border: none;
        background: var(--accent);
        color: var(--accent-ink);
        font-size: 26px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
        transition: opacity 0.2s ease;
      }
      .show-frame.playing .play-btn { opacity: 0; pointer-events: none; }
      .show-frame:hover .play-btn, .show-frame:focus-within .play-btn { opacity: 1; pointer-events: auto; }
      .show-caption {
        position: absolute;
        left: 14px; bottom: 14px;
        background: rgba(8, 8, 10, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 7px 14px;
        border-radius: 999px;
        pointer-events: none;
      }
      .show-caption b { color: var(--accent); }
      .platform-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 18px 0 4px;
      }
      .platform-lead { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
      .platform-chip {
        font-size: 13px; font-weight: 700; color: var(--ink);
        background: var(--panel-2); border: 1px solid var(--line);
        border-radius: 999px; padding: 5px 13px;
      }

      /* ---------- Secciones y filas ---------- */
      .sec { margin: 44px 0 0; }
      .sec-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .sec-head h2 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(22px, 3.4vw, 30px);
        font-weight: 800;
        letter-spacing: -0.01em;
        margin-bottom: 4px;
      }
      .sec-head h3 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 3px;
      }
      .sec-head p { color: var(--ink-2); font-size: 14px; }
      /* Lista vertical de tarjetas estilo catálogo: una por fila, a todo el ancho */
      .cat-head { max-width: 880px; margin-left: auto; margin-right: auto; }
      .cat-list { display: grid; gap: 26px; max-width: 880px; margin: 0 auto; }
      .ccard {
        display: block;
        width: 100%;
        text-align: left;
        font: inherit;
        color: var(--ink);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        overflow: hidden;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .ccard:hover { border-color: var(--accent); }
      .ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      .ccard-media { position: relative; display: block; background: #000; }
      .ccard-media video, .ccard-media img.card-poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
      .ccard-play {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 64px; height: 64px;
        border-radius: 50%;
        background: rgba(10, 10, 14, 0.55);
        color: #fff;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 5px;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .ccard.playing .ccard-play { opacity: 0; }
      .ccard-body { display: block; padding: 16px 18px 18px; }
      .ccard-body .c-name { display: block; font-size: 19px; font-weight: 800; line-height: 1.2; margin-bottom: 3px; }
      .ccard-body .c-sub { display: block; font-size: 15px; font-weight: 700; color: var(--orange); margin-bottom: 6px; }
      .ccard-body .c-desc { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 13px; }
      .c-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
      .c-pill {
        font-size: 12.5px; font-weight: 700; color: var(--ok);
        border: 1px solid rgba(61, 220, 132, 0.55);
        border-radius: 999px; padding: 4px 12px;
      }
      .mode-chip {
        width: 26px; height: 26px;
        border-radius: 7px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 800; color: #141603;
      }
      .mode-chip.p { background: #2fbf71; }
      .mode-chip.v { background: #f5b921; }
      .mode-chip.t { background: #ef5da8; }

      /* ---------- (6) Inspiraciones ---------- */
      .insp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
      .ipill {
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
      }
      .ipill:hover { border-color: var(--accent); color: var(--accent); }
      /* Familias de estilos: apiladas, una por fila */
      .family-grid { display: grid; gap: 12px; grid-template-columns: 1fr; max-width: 880px; margin: 14px auto 0; }
      .family-card {
        display: block;
        text-align: left;
        font: inherit;
        color: var(--ink);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 16px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .family-card:hover { border-color: var(--accent); }
      .family-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      .family-card .fam-name { display: block; font-size: 17px; font-weight: 800; margin-bottom: 2px; }
      .family-card .fam-count { display: block; font-size: 13px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
      .family-card .fam-desc { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
      .family-card .fam-cta { display: block; font-size: 13px; font-weight: 800; color: var(--accent); }

      /* ---------- (7) Cifras: una fila simple y discreta ---------- */
      .stats {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 10px 38px;
        max-width: 880px;
        margin: 48px auto 0;
        padding: 18px 4px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .stat { display: flex; align-items: baseline; gap: 8px; }
      .stat .s-num {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: 21px;
        font-weight: 800;
        color: var(--accent);
        line-height: 1.1;
      }
      .stat .s-label { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }

      /* ---------- (8) Pricing: paquetes apilados a todo el ancho ---------- */
      .pricing-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
      .pack {
        position: relative;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 22px 18px 18px;
        background: var(--panel);
        display: flex;
        flex-direction: column;
      }
      .pack.popular { border-color: var(--accent); }
      .pack .ribbon {
        position: absolute;
        top: -11px; left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: var(--accent-ink);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.07em;
        padding: 4px 12px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .pack .p-credits { font-size: 26px; font-weight: 800; line-height: 1.1; }
      .pack .p-credits small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
      .pack .p-price { font-size: 16px; color: var(--ink); font-weight: 700; margin-top: 2px; }
      .pack .p-per { font-size: 12px; color: var(--ink-3); }
      .pack .p-bonus { display: block; font-size: 12.5px; font-weight: 700; color: #7ea8ff; }

      /* ============ fixes102: menú de créditos (diseño de Siamel) ============
         Tarjeta compacta: pila de monedas + TOTAL grande (créditos
         + bono), desglose «base + bono de regalo», barra de precio
         degradada (en el móvil el precio va en la barra y compra el
         botón grande de abajo; en escritorio la barra se vuelve
         texto y cada tarjeta muestra su botón Comprar). */
      /* fixes111: tarjeta un poco más compacta (orden de Siamel:
         que saldo, franja de prueba y las 4 tarjetas quepan en
         UNA pantalla); el diseño no cambia, solo tamaños. */
      .pack2 {
        position: relative;
        border: 1px solid #262d63;
        border-radius: 18px;
        padding: 8px 9px 8px;
        background: linear-gradient(180deg, #12173f, #0c1030);
        text-align: center;
        cursor: default;
        -webkit-tap-highlight-color: transparent;
      }
      .pack2.popular { border-color: rgba(255, 217, 77, .45); }
      .pack2.selected { border-color: #ffd94d; box-shadow: 0 0 0 1.5px #ffd94d, 0 10px 30px rgba(255, 217, 77, .14); }
      .pack2 .ribbon {
        position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
        background: linear-gradient(90deg, #8b3dff, #6d5cff); color: #fff;
        font-size: 10px; font-weight: 800; letter-spacing: .07em;
        padding: 4px 11px; border-radius: 999px; white-space: nowrap;
        text-transform: uppercase;
      }
      .pack2 .ribbon .crown { color: #ffd94d; font-size: 16px; line-height: 1; vertical-align: 0px; }
      /* fixes104: la tarjeta TAL CUAL la foto de Siamel — el arte
         de monedas con la moneda del logo en dorado, grande y
         centrado; el total COMPLETO en dorado (número y palabra);
         el precio en texto blanco grande, sin barra; y el botón
         Comprar en cada tarjeta, también en el móvil. El arte
         lleva el fondo en transparencia (alfa por luminancia). */
      .pack2 .pk-art {
        display: block; height: 44px; width: auto; max-width: 96%;
        margin: 0 auto 2px; object-fit: contain;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
      }
      .pack2 .pk-total { text-align: center; line-height: 1.1; color: #ffffff; -webkit-text-fill-color: #ffffff; font-size: 14.5px; font-weight: 700; }
      .pack2 .pk-total b { font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: #ffc233; -webkit-text-fill-color: #ffc233; }
      .pack2 .pk-break {
        margin-top: 5px; background: #171c48; border: 1px solid #262d63;
        border-radius: 10px; padding: 4px; font-size: 11.8px;
        font-weight: 600; color: #c6cbec; white-space: nowrap;
      }
      .pack2 .pk-break b { color: #ffd94d; font-weight: 800; }
      /* fixes106: píldora V1 — la cajita de regalo dorada va entre
         el «+» y el bono; la palabra de regalo pasa a gris. */
      .pack2 .pk-break .pk-gift { width: 1.15em; height: 1.15em; color: #ffd94d; vertical-align: -0.18em; }
      .pack2 .pk-break .pk-gift-word { color: #a5abd6; font-weight: 600; }
      .pack2 .pk-price {
        margin-top: auto; padding-top: 5px; font-size: 19px;
        font-weight: 800; color: #fff; text-align: center;
      }
      .pack2 .pk-price small { font-size: 12px; font-weight: 600; color: #8a90b8; }
      .pack2 .pk-buy2 {
        display: block; width: 100%; margin-top: 7px; border: none;
        background: linear-gradient(90deg, #8b3dff, #3d8bff); color: #fff;
        font-size: 14px; font-weight: 800; padding: 7px 0;
        border-radius: 11px; cursor: pointer;
      }
      .pk-feats {
        display: flex; background: #10163c; border: 1px solid #232a5e;
        border-radius: 14px; padding: 6px; margin-top: 8px;
      }
      .pk-feat {
        flex: 1; display: flex; align-items: center; justify-content: center;
        gap: 7px; font-size: 12px; font-weight: 700; color: #d6daf5;
        text-align: center; padding: 0 4px; line-height: 1.25;
      }
      .pk-feat + .pk-feat { border-left: 1px solid #232a5e; }
      .pk-feat svg { width: 17px; height: 17px; stroke: #8b7bff; flex: none; }
      .pk-note {
        background: #10163c; border: 1px solid #232a5e; border-radius: 14px;
        padding: 7px 12px; font-size: 12px; line-height: 1.35;
        color: #a5abd6; margin-top: 7px; text-align: left;
      }
      .pk-note-ic { color: #5ea0ff; font-weight: 800; }
      .pk-cta {
        display: block; width: 100%; margin-top: 14px; border: none;
        background: linear-gradient(90deg, #8b3dff, #3d8bff); color: #fff;
        font-size: 17px; font-weight: 800; padding: 15px 0;
        border-radius: 14px; cursor: pointer;
      }
      .pack .p-videos {
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        margin: 14px 0 12px;
        font-size: 13.5px;
        font-weight: 700;
      }
      .pack .p-videos span { display: block; color: var(--ink-2); font-size: 12px; font-weight: 600; }
      .pack ul.feat { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
      .pack ul.feat li { display: flex; gap: 8px; align-items: baseline; }
      .pack ul.feat .ck { color: var(--accent); font-weight: 800; flex: none; }
      .pack ul.feat .cx { color: var(--ink-3); font-weight: 800; flex: none; }
      .pack ul.feat li.no { color: var(--ink-3); }
      .pack button {
        margin-top: auto;
        min-height: 48px;
        border: none;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-ink);
        font: inherit;
        font-weight: 800;
        font-size: 15px;
        cursor: pointer;
        width: 100%;
      }
      .pack button:active { transform: scale(0.98); }
      /* ---------- Flujo de crear (pasos) ---------- */
      .flow-wrap { max-width: 880px; margin: 0 auto; }
      section.step {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 18px;
        margin: 0 auto 16px;
        box-shadow: var(--shadow-card);
      }
      .step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
      .step-num {
        flex: none;
        width: 28px; height: 28px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 800;
        font-size: 14px;
        display: flex; align-items: center; justify-content: center;
      }
      .step-head h2 { font-size: 18px; font-weight: 700; }
      .step.done .step-num { background: var(--accent); color: var(--accent-ink); }
      .step p.hint { color: var(--ink-2); font-size: 14px; margin: 4px 0 14px; }
      .lede { color: var(--ink-2); font-size: 15px; margin: 0 auto 20px; }
      .lede strong { color: var(--ink); }

      .dropzone {
        display: block;
        width: 100%;
        border: 2px dashed var(--line);
        border-radius: var(--radius);
        padding: 22px 16px;
        text-align: center;
        cursor: pointer;
        background: var(--bg-2);
        color: var(--ink);
        font: inherit;
        transition: border-color 0.15s ease;
      }
      .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); }
      .dropzone .big { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
      .dropzone .small { display: block; font-size: 13px; color: var(--ink-3); }
      .preview { display: none; }
      .preview.show { display: block; }
      .preview video, .preview img {
        width: 100%;
        max-height: 340px;
        object-fit: contain;
        border-radius: var(--radius);
        background: #000;
        display: block;
      }
      .file-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
      .file-meta .fname { font-weight: 600; color: var(--ink); word-break: break-all; }
      .pill { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
      .pill.ok { background: rgba(61, 220, 132, 0.14); color: var(--ok); }
      .pill.bad { background: rgba(255, 107, 107, 0.14); color: var(--bad); }
      .change-btn {
        margin-left: auto;
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        padding: 8px 14px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        min-height: 40px;
      }
      .change-btn:hover { border-color: var(--accent); }
      .msg { display: none; margin-top: 12px; font-size: 14px; border-radius: 10px; padding: 10px 12px; }
      .msg.show { display: block; }
      .msg.err { background: rgba(255, 107, 107, 0.12); color: var(--err-ink); }
      .msg.okm { background: rgba(61, 220, 132, 0.12); color: var(--ok-ink); }

      .options { display: grid; gap: 10px; }
      .options.two { grid-template-columns: 1fr 1fr; }
      .options.three { grid-template-columns: repeat(3, 1fr); }
      .opt {
        position: relative;
        border: 2px solid var(--line);
        border-radius: var(--radius);
        padding: 14px;
        cursor: pointer;
        background: var(--bg-2);
        transition: border-color 0.15s ease, background 0.15s ease;
      }
      .opt:hover { border-color: var(--ink-3); }
      .opt input { width: 20px; height: 20px; margin: 0 0 8px; accent-color: var(--accent); cursor: pointer; display: block; }
      .options.three .opt input { margin-left: auto; margin-right: auto; }
      .opt.selected { border-color: var(--accent); background: var(--accent-soft); }
      .opt.disabled { opacity: 0.42; cursor: not-allowed; }
      .opt.disabled:hover { border-color: var(--line); }
      .opt .opt-provider { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
      /* Interruptor de tema claro / oscuro */
      .theme-toggle {
        background: var(--panel-2);
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 999px;
        width: 40px; height: 40px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        -webkit-tap-highlight-color: transparent;
      }
      .theme-toggle:hover { border-color: var(--accent); }
      .theme-toggle svg { width: 19px; height: 19px; display: block; }
      .theme-toggle .ic-moon { display: none; }
      [data-theme="light"] .theme-toggle .ic-sun { display: none; }
      [data-theme="light"] .theme-toggle .ic-moon { display: block; }
      .opt .opt-title { display: block; font-weight: 700; font-size: 16px; margin-bottom: 3px; }
      .opt .opt-desc { display: block; font-size: 13px; color: var(--ink-2); }
      .opt .opt-rate { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
      .options.three .opt { text-align: center; padding: 14px 8px; }
      .options.three .opt-title { font-size: 19px; }
      .group-label {
        font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
        color: var(--ink-3); margin: 0 0 8px;
      }
      .options.fmt { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
      .options.fmt .opt { text-align: center; padding: 14px 8px; }
      .options.fmt .opt input { margin-left: auto; margin-right: auto; }
      .options.fmt .opt-title { font-size: 15px; }
      .fmt-shape { display: block; margin: 2px auto 9px; border: 2px solid var(--ink-3); border-radius: 4px; }
      .opt.selected .fmt-shape { border-color: var(--accent); }
      .fmt-169 { width: 36px; height: 21px; }
      .fmt-916 { width: 15px; height: 26px; }
      .fmt-11 { width: 24px; height: 24px; }
      .options.fx { grid-template-columns: 1fr 1fr; }
      @media (max-width: 420px) {
        .options.two, .options.fx { grid-template-columns: 1fr; }
      }
      @media (min-width: 421px) { .options.fx .opt:last-child { grid-column: 1 / -1; } }

      .hidden-block { display: none !important; }
      #ai-image-block { margin-top: 16px; }
      #ai-image-generate { margin-top: 10px; }
      .idea-input {
        width: 100%;
        min-height: 96px;
        resize: vertical;
        background: var(--bg-2);
        border: 2px solid var(--line);
        border-radius: var(--radius);
        color: var(--ink);
        font: inherit;
        font-size: 15px;
        padding: 12px 14px;
      }
      .idea-input:focus { outline: none; border-color: var(--accent); }
      .script-panel { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
      /* portada2 · N2: sin guión real generado por el cliente, el
         bloque del guión (título + lista de escenas) no existe en
         pantalla; el selector de motor (control) se queda. */
      .script-panel:not(.has-script) > h3,
      .script-panel:not(.has-script) > .scene-list { display: none; }
      .script-panel h3 { font-size: 16px; margin: 0 0 4px; }
      .script-panel .sp-hint { color: var(--ink-2); font-size: 13px; margin: 0 0 12px; }
      .anchor-note {
        font-size: 13px; color: var(--ink-2);
        background: var(--accent-soft);
        border-radius: 10px;
        padding: 10px 12px;
        margin: 12px 0;
      }
      .anchor-note strong { color: var(--accent); }
      .scene-list {
        list-style: none; margin: 0; padding: 0;
        max-height: 288px; overflow-y: auto;
        display: grid; gap: 8px;
        scrollbar-width: thin; scrollbar-color: var(--line) transparent;
      }
      .scene-item {
        background: var(--bg-2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 9px 12px;
        font-size: 13px;
        color: var(--ink-2);
      }
      .scene-item .sc-head {
        display: block; font-weight: 800; font-size: 12px;
        letter-spacing: 0.05em; text-transform: uppercase;
        color: var(--accent); margin-bottom: 2px;
      }
      .script-totals {
        margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink);
        background: var(--bg-2); border: 1px solid var(--line);
        border-radius: 10px; padding: 10px 12px;
      }
      .script-totals span { color: var(--accent); }

      .cost-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
      .cost-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
      .cost-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
      .cost-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; }
      .cost-total .t-label { font-weight: 700; font-size: 15px; }
      .cost-total .t-credits { font-size: 26px; font-weight: 800; color: var(--accent); }
      .cost-total .t-usd { display: block; font-size: 13px; color: var(--ink-2); }

      .generate-btn {
        width: 100%;
        min-height: 58px;
        border: none;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-ink);
        font: inherit;
        font-size: 18px;
        font-weight: 800;
        cursor: pointer;
        margin-top: 16px;
        transition: opacity 0.15s ease, transform 0.1s ease;
      }
      .generate-btn:active { transform: scale(0.99); }
      .generate-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .gen-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 10px; }

      .progress-area { display: none; margin-top: 18px; }
      .progress-area.show { display: block; }
      .progress-status { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
      .progress-status .pct { color: var(--accent); }
      .progress-track { height: 12px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
      .progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
      .progress-stages { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
      .progress-stages span.active { color: var(--accent); }

      .result-area { display: none; margin-top: 18px; }
      .result-area.show { display: block; }
      .result-tag {
        display: inline-block;
        background: rgba(61, 220, 132, 0.14);
        color: var(--ok);
        font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
        border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
      }
      .result-tag[hidden] { display: none; }
      .result-area video { width: 100%; max-height: 380px; object-fit: contain; background: #000; border-radius: var(--radius); display: block; }
      .result-note { font-size: 13px; color: var(--ink-2); margin: 10px 0 12px; }
      .download-btn {
        display: block; width: 100%; min-height: 52px; line-height: 52px; text-align: center;
        background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
        border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none;
      }
      .download-btn:hover { border-color: var(--accent); }
      /* fixesshare1: botón «Compartir» del resultado — misma familia
         visual que Descargar, justo debajo; y acción de compartir
         junto a la descarga en cada video terminado de la galería. */
      .share-btn { margin-top: 10px; cursor: pointer; }
      .share-btn:disabled { opacity: 0.55; cursor: default; }
      .gallery-share {
        background: none; border: none; padding: 0; margin-left: 10px;
        color: var(--accent); font-weight: 700; cursor: pointer;
      }
      .gallery-share:disabled { opacity: 0.55; cursor: default; }

      .gallery { display: grid; gap: 12px; }
      .empty-gallery {
        border: 2px dashed var(--line); border-radius: var(--radius);
        padding: 22px 16px; text-align: center; color: var(--ink-3); font-size: 14px;
      }
      .g-item {
        display: flex; gap: 12px;
        background: var(--bg-2); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 10px; align-items: center;
      }
      .g-item video { width: 96px; height: 68px; object-fit: cover; border-radius: 10px; background: #000; flex: none; }
      .g-item .g-info { min-width: 0; font-size: 13px; }
      .g-item .g-title { font-weight: 700; font-size: 15px; color: var(--ink); }
      .g-item .g-meta { color: var(--ink-2); }
      .g-item .g-cost { color: var(--accent); font-weight: 700; }

      /* ---------- Cierre y pie ---------- */
      .closing { text-align: center; padding: 64px 0 8px; }
      .closing h2 {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(28px, 5vw, 46px);
        font-weight: 800;
        line-height: 1.08;
        max-width: 720px;
        margin: 0 auto 22px;
      }
      footer {
        border-top: 1px solid var(--line);
        margin-top: 48px;
        padding: 22px 0 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        align-items: center;
        font-size: 13px;
        color: var(--ink-3);
      }
      footer .f-fine { width: 100%; font-size: 12px; }

      /* ============================================================
         NUEVA PANTALLA PRINCIPAL — diseño de app de las maquetas
         (oscuro = foto nocturna, claro = foto diurna)
         ============================================================ */
      html { scroll-padding-top: 14px; scroll-padding-bottom: 112px; }
      html[data-theme="dark"] body {
        background-color: #04061a;
        background-image: radial-gradient(1100px 720px at 50% -140px, #1a2260 0%, #04061a 62%);
        background-attachment: fixed;
      }
      html[data-theme="light"] body {
        background-color: #ffffff;
        background-image: none;
        background-attachment: fixed;
      }
      .wrap {
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px 118px;
        background: var(--bg);
        min-height: 100vh;
        position: relative;
      }
      @media (min-width: 480px) {
        .wrap { box-shadow: 0 0 0 1px var(--line), 0 30px 90px rgba(2, 4, 20, 0.5); }
      }
      .btn-pill { background: var(--grad); color: #ffffff; }
      .generate-btn { background: var(--grad); color: #ffffff; }
      .pack button { background: var(--grad); color: #ffffff; }
      .grad-text {
        background-image: var(--grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      /* ---------- Barra superior de la app ---------- */
      .app-header {
        position: sticky;
        top: 0;
        z-index: 55;
        margin: 0 -18px;
        padding: 13px 18px 11px;
        background: var(--nav-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      /* Franja fina de referidos «Invite & Earn»: mismo degradado
         principal de la app (var(--grad), violeta -> azul, el del
         botón «Generar video», el logo y el botón «+»), letras
         blancas en negrita, ícono de regalo en contorno blanco
         junto al texto y botón «Invitar» PLANO con los colores
         medidos del Diseño 7 aprobado por el dueño (fixes37):
         relleno violeta vivo -> azul real y borde en degradado
         rosa -> violeta -> cian, solo con halo neón uniforme
         (sin relieve 3D). Ocupa muy poco alto y no desplaza el
         carrusel ni las secciones de estilos. */
      .invite-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin: 10px 0 2px;
        padding: 8px 10px 8px 16px;
        border: 0;
        border-radius: 14px;
        background: var(--grad);
        color: #ffffff;
        font-family: inherit;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(99, 80, 255, 0.4);
      }
      .invite-strip-main {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
      }
      .gift-ico {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .invite-strip-text {
        font-size: 14.5px;
        font-weight: 800;
        letter-spacing: 0.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      /* fixes77: solo el número de la recompensa, en el dorado de la
         píldora de saldo y con su mismo peso (800, ya el del texto);
         el resto de la frase queda blanco. */
      .invite-strip-text .invite-gold { color: #ffd94d; }
      .invite-strip-btn {
        flex: none;
        background:
          linear-gradient(100deg, #9e1ef5 0%, #7817fa 25%, #4a11fc 50%, #2743fc 75%, #1a74ff 100%) padding-box,
          linear-gradient(100deg, #ec7dff 0%, #a24df8 18%, #5c15ee 42%, #2743f4 68%, #1a6ef5 88%, #3fc9ff 100%) border-box;
        color: #ffffff;
        font-size: 14.5px;
        font-weight: 800;
        padding: 3.5px 16px;
        border: 2.5px solid transparent;
        border-radius: 999px;
        box-shadow:
          0 0 16px rgba(146, 62, 252, 0.38),
          0 0 34px rgba(120, 60, 250, 0.20);
      }
      .app-logo {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .logo-mark {
        /* fixes117 (orden del dueño): el logo crece un poco
           (35→40px la pastilla, 17→19px el glifo). */
        width: 40px; height: 40px;
        border-radius: 11px;
        background: var(--grad);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 6px 16px rgba(99, 80, 255, 0.45);
        flex: none;
      }
      .logo-mark svg { width: 19px; height: 19px; display: block; margin-left: 2px; }
      .logo-word {
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      /* Saludo en la barra superior (dueño 2026-10-31 04:25):
         junto al logo, separado por un divisor fino como en las
         ilustraciones aprobadas. Sin sesión queda oculto por el
         atributo hidden; el nombre se recorta con elipsis antes
         que empujar el grupo de acciones. */
      .header-greet {
        min-width: 0;
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 3px;
        padding-left: 13px;
        border-left: 1px solid var(--line);
        color: var(--ink);
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 16.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .header-greet[hidden] { display: none !important; }
      @media (max-width: 700px) {
        .header-greet { max-width: 104px; padding-left: 8px; font-size: 14px; }
      }
      .app-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
      /* Píldora de saldo en el encabezado de la principal (fixes32):
         reutiliza .balance-chip; el override de cabecera gana a la
         regla móvil vieja (@media 900px) que ocultaba .balance-chip.
         Oculta sin sesión (atributo hidden) y sin la palabra
         «créditos» en pantallas muy estrechas para no apretar el logo. */
      .app-header .balance-chip {
        display: inline-flex; align-items: center; gap: 3px;
        /* fixes117 (orden del dueño): la píldora MÁS ANCHA —
           solo crece el relleno horizontal; texto y contenido
           intactos. */
        padding: 4px 12px; font: inherit; font-size: 11.5px; cursor: pointer;
      }
      .app-header .balance-chip[hidden] { display: none; }
      .app-header .balance-chip svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
      .app-header .balance-chip b { font-size: 11px; }
      /* fixes73 · Opción 5 «Azul marino y dorado»: la píldora del
         encabezado es un color cerrado, igual en tema claro y oscuro:
         fondo marino, número dorado, moneda en círculo dorado con el
         símbolo marino, y el promo como sub-píldora dorada. La palabra
         «créditos» queda blanca (color del <b>). */
      .app-header .balance-chip {
        background: linear-gradient(135deg, #1b2a6b, #14204f);
        border: 1px solid #3d55c4;
        box-shadow: 0 4px 14px rgba(27, 42, 107, .6);
        color: #fff;
      }
      .app-header .balance-chip b { color: #fff; }
      .app-header .balance-chip .balance-coin {
        width: 14px; height: 14px; border-radius: 50%; flex: none;
        background: linear-gradient(135deg, #ffcf3f, #f5a301);
        display: inline-flex; align-items: center; justify-content: center;
      }
      .app-header .balance-chip .balance-coin svg { width: 10px; height: 10px; color: #14204f; }
      .app-header .balance-chip .balance-num { color: #ffd94d; font-weight: 800; }
      .app-header .balance-chip .balance-promo {
        background: linear-gradient(135deg, #ffcf3f, #f5a301);
        color: #231a00; border-radius: 999px; padding: 1px 3px;
        font-size: 9px; font-weight: 800; margin-left: 2px; white-space: nowrap;
      }
      .app-header .balance-chip .balance-promo[hidden] { display: none; }
      /* fixes92 (regla responsive del dueño): la palabra «créditos»
         (la del diccionario, clave credits) vuelve a la píldora SOLO
         donde hay espacio — tableta y escritorio (≥600px, reglas en
         sus capas de abajo, con un leve aumento del texto). En el
         teléfono (<600px) la píldora queda EXACTAMENTE como la dejó
         fixes83: moneda + número + sub-píldora promo, sin palabra. */
      .app-header .balance-chip .balance-word { display: none; }
      @media (max-width: 400px) {
        /* fixes74: sin pieza compresible dentro de la píldora, el
           grupo de acciones no se encoge en este rango y todo el
           ajuste lo absorbe la palabra del logo. (fixes83: la
           palabra «créditos» salió de la píldora por decisión del
           dueño a TODAS las anchuras — la píldora queda de ancho
           fijo: moneda + número + sub-píldora promo.) */
        .app-header .app-actions { flex-shrink: 0; }
      }
      /* fixes74: la fila del encabezado desbordaba con saldos largos
         (600 + 100 promo): la píldora no podía encogerse por debajo de
         su contenido (min-content) y empujaba la campana y el avatar
         fuera de la pantalla. Ahora la campana y el avatar quedan
         fijos (flex: none); la píldora puede encogerse (min-width: 0)
         y dentro de ella el <b> — que solo contiene el número y la
         sub-píldora promo, ambos fijos — tampoco se encoge; la única
         pieza que se comprime es la palabra «créditos», que para eso
         salió del <b> y es ítem flex directo de la píldora, con
         elipsis (mismo patrón que .invite-strip-text). El bloque del
         logo también cede (min-width: 0) sin tocar el ícono, y su
         palabra se recorta con elipsis antes que empujar la fila.
         fixes83: la palabra «créditos» se ELIMINÓ de la píldora por
         decisión del dueño (la clave i18n «credits» queda sin uso
         en los diccionarios): ya no hay pieza compresible dentro y
         la píldora es de ancho fijo; el único ajuste posible sigue
         siendo el nombre, que se parte en dos líneas (fixes77). */
      .app-header #bell-btn, .app-header #avatar-btn { flex: none; }
      .app-header .app-actions { min-width: 0; }
      /* El logo cede hasta el piso de su ícono (35 + 9 de gap = 44)
         y el ícono jamás se derrama. Su flex-shrink mayor hace que
         absorba más ajuste que el grupo de acciones, para que la
         píldora nunca se encoja más allá de lo que la palabra
         «créditos» puede absorber. (fixes77: la palabra ya no se
         elipsa; ver la regla siguiente.) */
      .app-header .app-logo { min-width: 45px; flex-shrink: 3; gap: 5px; }
      /* fixes77: el nombre vuelve a verse COMPLETO, como antes de
         fixes74: la palabra ya no se elipsa — si el espacio aprieta,
         se parte en dos líneas («Video» / «AI») en vez de recortarse
         a «V». El hueco lo hace la píldora, con la letra y los
         números más chicos (arriba), no el nombre. */
      .app-header .logo-word {
        min-width: 0; overflow: hidden; font-size: 18px;
        white-space: normal;
      }
      .app-header .balance-chip { flex: 0 1 auto; min-width: 0; }
      .app-header .balance-chip b { display: flex; align-items: center; flex: none; }
      .app-header .balance-chip .balance-num { flex: none; }
      .app-header .balance-chip .balance-promo { flex: none; }
      .icon-btn {
        width: 39px; height: 39px;
        border: none;
        background: none;
        color: var(--ink);
        border-radius: 50%;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .icon-btn svg { width: 22px; height: 22px; display: block; }
      .avatar-btn {
        width: 37px; height: 37px;
        border: none;
        border-radius: 50%;
        background: var(--grad);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(99, 80, 255, 0.4);
        -webkit-tap-highlight-color: transparent;
        flex: none;
      }
      .avatar-btn svg { width: 21px; height: 21px; display: block; }

      /* Panel de cuenta / ajustes (avatar y Configuración) */
      .acct-panel {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 14px;
        width: min(284px, calc(100vw - 28px));
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow-pop);
        padding: 14px;
        z-index: 70;
      }
      .acct-panel.open { display: block; }
      .acct-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-2);
      }
      .acct-row .balance-chip { display: inline-flex; }
      .acct-row .lang-select { max-width: 150px; }
      .acct-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--ink);
        text-decoration: none;
        font-size: 14.5px;
        font-weight: 700;
        padding: 10px 2px 2px;
        margin-top: 6px;
        border-top: 1px solid var(--line);
      }
      .acct-link span { color: var(--accent); }

      /* ---------- Tarjeta hero ---------- */
      .hero-card {
        position: relative;
        margin-top: 14px;
        border-radius: 22px;
        overflow: hidden;
        /* fixes88: la tarjeta adopta la proporción 16:9 de los
           nuevos videos horizontales del carrusel.
           fixes94 (carrusel descentrado en el teléfono, reporte del
           dueño): FUERA el antiguo piso de altura de 224px. En el
           teléfono la columna mide ≤394px, así que la altura 16:9
           natural (≤221,6px) quedaba SIEMPRE por debajo
           del piso: la altura se fijaba en 224px y el aspect-ratio
           derivaba el ANCHO desde esa altura (224×16/9 = 398,2px),
           desbordando la columna hacia la derecha — medido en el
           rig a 390×844: tarjeta de x=18 a x=416,2, centro corrido
           +22,1px y 26,2px fuera de la pantalla (el mismo mecanismo
           que fixes92 corrigió en escritorio). Sin el piso, la
           tarjeta llena la columna en 16:9 exacto (354×199,1px a
           390px) y el video se ve entero y centrado, sin recorte.
           En tableta y escritorio el piso nunca mandaba (alturas
           natural 362px y fija 420px, ambas > 224): no cambian. */
        aspect-ratio: 16 / 9;
        display: flex;
        align-items: stretch;
        box-shadow: var(--shadow-card);
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .hero-card { touch-action: pan-y; }
      .hero-carousel {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }
      .hero-track {
        display: flex;
        height: 100%;
        transition: transform 0.65s cubic-bezier(0.22, 0.9, 0.3, 1);
        will-change: transform;
      }
      .hero-track.dragging { transition: none; }
      .hero-slide {
        flex: 0 0 100%;
        width: 100%; height: 100%;
        /* fixes88: los videos del carrusel son horizontales 16:9 y
           LLENAN la tarjeta a todo ancho (cover), sin las bandas
           oscuras que dejaban pequeños a los verticales con
           «contain». La tarjeta ya es 16:9, así que en teléfono y
           tableta el video entra entero, sin recorte. */
        object-fit: cover;
        background: #05071c;
        pointer-events: none;
      }
      .hero-dots {
        position: absolute;
        right: 13px;
        bottom: 10px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .hero-dot {
        width: 7px; height: 7px;
        border-radius: 999px;
        border: none;
        padding: 0;
        background: rgba(255, 255, 255, 0.45);
        cursor: pointer;
        transition: width 0.3s ease, background 0.3s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .hero-dot.active { width: 20px; background: #fff; }
      @media (prefers-reduced-motion: reduce) {
        .hero-track { transition: none; }
      }
      /* fixes92 · variante D elegida por el dueño desde la maqueta:
         SIN degradado — la capa de sombra del hero no pinta nada
         (antes: degradado lateral 90deg + inferior 0deg). El chip
         conserva su propio fondo de píldora y el resto del hero
         (subtítulo, CTA, nota, posiciones) queda idéntico; no se
         añade ningún sustituto. */
      .hero-shade {
        position: absolute;
        inset: 0;
        background: none;
      }
      .hero-content {
        position: relative;
        padding: 16px 16px 15px;
        max-width: 71%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .hero-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(9, 11, 34, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 11px;
        border-radius: 999px;
      }
      .hero-chip .spark { color: #c4b5fd; font-size: 12px; }
      .hero-content h2 {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.14;
        letter-spacing: -0.01em;
        margin-top: 13px;
        text-shadow: 0 2px 14px rgba(3, 5, 20, 0.45);
      }
      .hero-content p {
        /* fixes117 (orden del dueño): la DESCRIPCIÓN del hero
           («Describe tu idea…») adopta la letra del título
           manuscrito «Tus ideas, en movimiento» (.hero-note:
           Caveat, 600, blanca con sombra) y se mueve a JUSTO
           ENCIMA del botón «Generar video»: el margin-top:auto
           pasa del botón a la descripción y ambos quedan
           pegados al fondo de la tarjeta. El título del chip
           («Genera con IA») no cambia. En el teléfono la
           descripción sigue oculta (orden de 2026-10-27). */
        font-family: "Caveat", cursive;
        color: #fff;
        font-size: 21px;
        font-weight: 600;
        line-height: 1.15;
        margin-top: auto;
        padding-top: 10px;
        max-width: 250px;
        text-shadow: 0 2px 10px rgba(3, 5, 20, 0.6);
      }
      .hero-btn {
        margin-top: 0;
        padding-top: 8px;
      }
      .hero-btn button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--grad);
        color: #fff;
        border: none;
        border-radius: 999px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 13.5px;
        font-weight: 600;
        padding: 11px 19px;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(80, 70, 255, 0.45);
        -webkit-tap-highlight-color: transparent;
      }
      .hero-btn button svg { width: 13px; height: 13px; display: block; }
      .hero-note {
        position: absolute;
        right: 13px;
        bottom: 52px;
        transform: rotate(-5deg);
        font-family: "Caveat", cursive;
        font-size: 21px;
        font-weight: 600;
        line-height: 1.02;
        color: #fff;
        text-align: center;
        text-shadow: 0 2px 10px rgba(3, 5, 20, 0.6);
        pointer-events: none;
      }
      .hero-note svg { display: block; width: 104px; height: 12px; margin: 1px auto 0; }

      /* ---------- Tarjetas de acción (4 modos) ---------- */
      .act-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
        margin-top: 16px;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .act-card {
        position: relative;
        text-align: left;
        font: inherit;
        border-radius: 16px;
        padding: 11px 10px 12px;
        min-height: 116px;
        cursor: pointer;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.07);
        -webkit-tap-highlight-color: transparent;
      }
      .act-card .act-ic { display: block; }
      .act-card .act-ic svg { width: 21px; height: 21px; display: block; }
      .act-card .act-title { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.18; margin-top: 9px; }
      .act-card .act-desc { display: block; font-size: 9.8px; font-weight: 500; line-height: 1.32; color: var(--ink-2); margin-top: 3px; }
      .act-card .act-arrow {
        position: absolute;
        right: 8px; bottom: 8px;
        width: 20px; height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .act-card .act-arrow svg { width: 11px; height: 11px; display: block; }
      .act-card.t1 { --ic: #a78bfa; --arw-bg: rgba(139, 123, 255, 0.22); --arw: #c4b5fd; }
      .act-card.t2 { --ic: #818cf8; --arw-bg: rgba(99, 102, 255, 0.22); --arw: #a5b4fc; }
      .act-card.t3 { --ic: #60a5fa; --arw-bg: rgba(59, 130, 246, 0.22); --arw: #93c5fd; }
      .act-card.t4 { --ic: #c084fc; --arw-bg: rgba(168, 85, 247, 0.22); --arw: #d8b4fe; }
      .act-card.t5 { --ic: #2dd4bf; --arw-bg: rgba(45, 212, 191, 0.20); --arw: #5eead4; }
      .act-card .act-ic { color: var(--ic); }
      .act-card .act-arrow { background: var(--arw-bg); color: var(--arw); }
      
      
      
      
      

      /* ---------- Secciones de inicio: plantillas y estilos ---------- */
      .home-sec { margin-top: 20px; font-family: "Poppins", "Archivo", sans-serif; }
      .home-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 11px;
      }
      .home-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
      .ver-todas {
        background: none;
        border: none;
        color: var(--accent);
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 0;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .tpl-card {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 14px;
        overflow: hidden;
        aspect-ratio: 0.94;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
      }
      .tpl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .tpl-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0) 42%, rgba(4, 6, 20, 0.85) 100%);
      }
      .tpl-dur {
        position: absolute;
        right: 6px; bottom: 31px;
        z-index: 2;
        background: rgba(3, 5, 16, 0.62);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 6px;
      }
      .tpl-meta { position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 2; text-align: left; }
      .tpl-meta .tpl-name { display: block; color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.15; }
      .tpl-meta .tpl-cat { display: block; color: rgba(255, 255, 255, 0.75); font-size: 9px; font-weight: 500; margin-top: 1px; }

      /* «Plantillas populares» en Inicio (fixeshome1): carrusel
         horizontal deslizable con snap; las tarjetas son SOLO FOTOS
         (las plantillas son fotos — los videos viven en «Estilos de
         video»). Cada tarjeta ocupa el 43 % del ancho y la siguiente
         asoma, invitando a deslizar. */
      .tpl-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .tpl-row::-webkit-scrollbar { display: none; }
      .tpl-row .tpl-card { flex: 0 0 43%; scroll-snap-align: start; }
      .tpl-row .tpl-card .tpl-name {
        position: absolute;
        left: 9px; right: 9px; bottom: 8px;
        z-index: 2;
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
        text-align: left;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
      }
      .tpl-row .tpl-card .tpl-topic {
        position: absolute;
        top: 8px; left: 8px;
        z-index: 2;
        background: rgba(3, 5, 16, 0.62);
        color: #dfe3ff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 999px;
      }
      .sty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .sty-card {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font: inherit;
        text-align: left;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .sty-card img {
        width: 100%;
        aspect-ratio: 4 / 3.1;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        background: #0a0d29;
      }
      .sty-card .sty-name { display: block; font-size: 11.5px; font-weight: 600; margin-top: 5px; }

      /* Inicio: las 6 carpetas de «Estilos de video» visibles de una vez
         en una sola cuadrícula (sin paginador): 3 columnas × 2 filas,
         con imágenes casi cuadradas, parecidas a las miniaturas de
         «Plantillas populares».
         Reglas acotadas al grid del inicio (.sty-grid--home dentro de
         .home-sec, para ganar a la regla compartida posterior de
         .sty-grid); las cuadrículas de la ventana de Estilos
         (#ss-family-list, #ss-style-list) no cambian. */
      .home-sec .sty-grid--home { grid-template-columns: repeat(3, 1fr); }
      .sty-grid--home .sty-card img { aspect-ratio: 0.94; }
      .sty-grid--home .sty-card[data-style="cinematico"] img,
      .sty-grid--home .sty-card[data-style="cinematico"] video.sty-vid { object-position: 50% 18%; }
      /* fixes93: la portada de Anime ya no es el retro de las dos
         colegialas (caras arriba) sino el Pastoral (niño y perro en
         el sendero, sujetos en la franja 24–90 % del alto): el foco
         pasa de 12% a 45% (banda ~18–78 %, medido sobre el fotograma
         aprobado) para que entren el niño entero y el perro en la
         tarjeta 0,94. */
      .sty-grid--home .sty-card[data-style="anime"] img,
      .sty-grid--home .sty-card[data-style="anime"] video.sty-vid { object-position: 50% 45%; }
      /* fixes104: la pantalla «Estilos de video» usa por fin las
         portadas que Siamel eligió (las del inicio, fixes93) en
         Anime, Animación, Cine, Realista y Animales — seguía con
         las viejas del catálogo. Mismos focos que en el inicio. */
      .sty-gcard--fam[data-fam="cine"] img { object-position: 50% 18%; }
      .sty-gcard--fam[data-fam="anime"] img { object-position: 50% 45%; }

      /* Carpetas del inicio con video en miniatura (fixeshome1): un
         <video> por tarjeta, sobre la portada elegida por el dueño
         (que queda como poster y capa base), con el nombre del estilo
         que esta sonando sobre el borde inferior del video.
         fixeshome2: DOS capas de video apiladas por tarjeta (la segunda
         la crea el JS) y la rotacion es un FUNDIDO CRUZADO: las capas
         nacen transparentes y la activa lleva la clase «on» (opacidad
         1); al rotar, la entrante — que ya precargo el siguiente video
         — sube a 1 mientras la saliente baja a 0 en 700 ms, sin pasar
         nunca por una tarjeta vacia u oscura. */
      .sty-grid--home .sty-card { position: relative; }
      .sty-grid--home .sty-card video.sty-vid {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        aspect-ratio: 0.94;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        background: #0a0d29;
        opacity: 0;
        transition: opacity 0.7s ease;
        pointer-events: none;
      }
      .sty-grid--home .sty-card video.sty-vid.on { opacity: 1; z-index: 1; }
      .sty-grid--home .sty-card .sty-vname {
        position: absolute;
        left: 6px; right: 6px; bottom: 25px;
        z-index: 2;
        color: #cfd4ff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .sty-grid--home .sty-card .sty-vname.lbl-dim { opacity: 0; }

      /* Paginador deslizable de «Estilos de video» en el inicio: las
         carpetas grandes van agrupadas en páginas de .sty-grid (2×2);
         deslizando a la izquierda se pasa a la página siguiente
         (scroll horizontal con snap; sin auto-avance). */
      .sty-pager {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .sty-pager::-webkit-scrollbar { display: none; }
      .sty-page {
        flex: 0 0 100%;
        scroll-snap-align: start;
      }

      /* Carrusel MANUAL de «Estilos de video» en el inicio: se ven
         exactamente 4 tarjetas y las demás se alcanzan deslizando
         el dedo (scroll horizontal con snap; sin auto-avance). */
      .sty-carousel {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .sty-carousel::-webkit-scrollbar { display: none; }
      .sty-carousel .sty-card {
        flex: 0 0 calc((100% - 24px) / 4);
        scroll-snap-align: start;
      }

      /* ---------- Biblioteca de plantillas (60) ---------- */
      .tpl-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
      .tf-chip {
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--ink-2);
        border-radius: 999px;
        padding: 7px 14px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        scroll-margin-bottom: 130px;
        -webkit-tap-highlight-color: transparent;
      }
      .tf-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
      .tplx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .tplx-card {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 9 / 16;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
      }
      .tplx-card[hidden] { display: none; }
      .tplx-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .tplx-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0) 46%);
      }
      .tplx-meta { position: absolute; left: 10px; right: 10px; top: 9px; z-index: 2; text-align: left; }
      .tplx-meta .tplx-name { display: block; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
      .tplx-meta .tplx-cat { display: block; color: rgba(255, 255, 255, 0.78); font-size: 10.5px; font-weight: 500; margin-top: 2px; }
      .tplx-card .play-badge {
        position: absolute; right: 8px; bottom: 8px; z-index: 2;
        width: 24px; height: 24px; border-radius: 999px;
        background: rgba(3, 5, 16, 0.55); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 9px;
      }

      /* Visor de plantilla a pantalla completa */
      /* fixesplayer3: el escenario llena EXACTAMENTE el viewport visible
         (100dvh con respaldo 100vh), nunca se desplaza ni se arrastra
         (overflow hidden + touch-action none: los arrastres son gestos,
         no scroll) y el video/portada se ven COMPLETOS con contain —
         sin el zoom/recorte de cover; las bandas negras son correctas. */
      .tpl-viewer {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        touch-action: none;
        z-index: 90;
        background: #000;
        display: none;
      }
      .tpl-viewer.open { display: block; }
      .tpl-viewer > img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
      .tpl-viewer > video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
      .tpl-viewer > img[hidden], .tpl-viewer > video[hidden] { display: none; }
      /* fixes83: arrastre hacia abajo para cerrar (tipo Fotos de
         iPhone) en AMBOS visores que comparten esta clase (videos de
         estilos y fotos de plantillas): el contenido sigue el dedo
         con un transform inline y el fondo se apaga con la variable
         --vp-drag (0 = negro opaco de siempre). Mientras se arrastra
         (.vp-dragging) no hay transición; al soltar, .vp-settle
         anima el cierre o el rebote. La interfaz se desvanece con
         el arrastre — salvo que ya esté oculta: las reglas
         .vp-hidden van más abajo y ganan el empate de especificidad. */
      .tpl-viewer { background: rgba(0, 0, 0, calc(1 - var(--vp-drag, 0))); }
      .tpl-viewer.vp-dragging > video, .tpl-viewer.vp-dragging > img,
      .tpl-viewer.vp-dragging > .sv-cover { transition: none !important; }
      .tpl-viewer.vp-settle { transition: background-color 0.28s ease; }
      .tpl-viewer.vp-settle > video, .tpl-viewer.vp-settle > img,
      .tpl-viewer.vp-settle > .sv-cover { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1); }
      .tpl-viewer.vp-dragging .tv-back, .tpl-viewer.vp-dragging .tv-close,
      .tpl-viewer.vp-dragging .tv-bar, .tpl-viewer.vp-dragging .vp-center,
      .tpl-viewer.vp-dragging .vp-progress { opacity: calc(1 - var(--vp-drag, 0)); }
      .tpl-play {
        position: absolute;
        top: 6px; left: 6px;
        z-index: 2;
        width: 20px; height: 20px;
        border-radius: 50%;
        background: rgba(3, 5, 16, 0.62);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tpl-play svg { width: 10px; height: 10px; display: block; margin-left: 1px; }
      .tv-close {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top));
        right: 14px;
        width: 42px; height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(5, 6, 18, 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-size: 19px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .tv-back {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top));
        left: 14px;
        width: 42px; height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(5, 6, 18, 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .tv-back svg { width: 19px; height: 19px; display: block; }
      .tv-bar {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: 52px 18px calc(18px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 55%);
        color: #fff;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .tv-bar .tv-name { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; }
      .tv-bar .tv-cat { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-top: 3px; }
      .tv-create {
        margin-top: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--grad);
        color: #fff;
        border: none;
        border-radius: 999px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 13px 24px;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(80, 70, 255, 0.45);
        -webkit-tap-highlight-color: transparent;
      }

      /* ---------- Reproductor limpio de los visores (fixesplayer1) ---------- */
      /* Toda la interfaz del visor (volver, cerrar, transporte central,
         barra inferior y progreso) es UNA sola capa que se muestra al
         abrir/tocar y se oculta tras 1 s sin interacción para que el
         video se reproduzca completamente limpio. */
      .tpl-viewer .tv-back, .tpl-viewer .tv-close, .tpl-viewer .tv-bar,
      .tpl-viewer .vp-center, .tpl-viewer .vp-progress,
      .ex-viewer .tv-back, .ex-viewer .tv-close, .ex-viewer .ex-bar,
      .ex-viewer .vp-center, .ex-viewer .vp-progress {
        transition: opacity 0.25s ease, visibility 0.25s ease;
      }
      .tpl-viewer.vp-hidden .tv-back, .tpl-viewer.vp-hidden .tv-close,
      .tpl-viewer.vp-hidden .tv-bar, .tpl-viewer.vp-hidden .vp-center,
      .tpl-viewer.vp-hidden .vp-progress,
      .ex-viewer.vp-hidden .tv-back, .ex-viewer.vp-hidden .tv-close,
      .ex-viewer.vp-hidden .ex-bar, .ex-viewer.vp-hidden .vp-center,
      .ex-viewer.vp-hidden .vp-progress {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      /* Visor de plantillas en modo foto permanente (fixeshome1): el
         transporte de video (−10 s / pausa / +10 s) y la barra de
         progreso NUNCA se pintan, y el <video> queda fuera de la
         vista: el visor muestra la foto, su nota y «Crear». */
      .tpl-viewer.vp-photo .vp-center,
      .tpl-viewer.vp-photo .vp-progress { display: none !important; }
      .tpl-viewer.vp-photo > video { display: none !important; }
      .vp-center {
        position: absolute;
        left: 0; right: 0; top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 36px;
        pointer-events: none;
      }
      .ex-stage .vp-center { left: 0; right: 0; }
      .vp-btn {
        pointer-events: auto;
        width: 54px; height: 54px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(5, 6, 18, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .vp-btn svg { width: 27px; height: 27px; display: block; }
      .vp-btn.vp-toggle { width: 68px; height: 68px; }
      .vp-btn.vp-toggle svg { width: 31px; height: 31px; }
      .vp-toggle .ic-pause { display: none; }
      .vp-toggle.is-paused .ic-pause { display: block; }
      .vp-toggle.is-paused .ic-play { display: none; }
      .vp-progress {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3.5px;
        background: rgba(255, 255, 255, 0.18);
        z-index: 4;
      }
      .vp-progress-fill {
        display: block;
        height: 100%;
        width: 0;
        background: var(--grad);
      }
      /* Toque visual al llegar al principio/fin de la lista deslizando */
      @keyframes vpBumpNext { 0% { transform: translateY(0); } 35% { transform: translateY(16px); } 100% { transform: translateY(0); } }
      @keyframes vpBumpPrev { 0% { transform: translateY(0); } 35% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
      .tpl-viewer.vp-bump-next > video, .tpl-viewer.vp-bump-next > img { animation: vpBumpNext 0.28s ease; }
      .tpl-viewer.vp-bump-prev > video, .tpl-viewer.vp-bump-prev > img { animation: vpBumpPrev 0.28s ease; }

      /* ---------- Reproductor de ejemplos del catálogo ---------- */
      /* El video se ve COMPLETO (contain, sin recorte) sobre negro a
         pantalla entera; sobre su parte inferior, el nombre y el botón
         para crear con esa misma plantilla. */
      /* fixes84: el escenario ocupa TODO el visor (absolute inset:0),
         con la MISMA estructura que el visor principal (.tpl-viewer):
         el video es hijo de bloque a width/height 100% con contain y
         la barra inferior es una capa absoluta sobre el video (como
         .tv-bar). Antes el escenario era un hijo flex (flex:1) y la
         barra empujaba en flujo: en Safari iOS el <video>, elemento
         reemplazado dentro de flex, se pintaba reducido y desplazado
         hacia arriba, con un gran vacío negro debajo. */
      .ex-viewer {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        touch-action: none;
        z-index: 95;
        background: #000;
        display: none;
      }
      .ex-viewer.open { display: block; }
      .ex-stage {
        position: absolute;
        inset: 0;
        overflow: hidden;
        touch-action: none;
      }
      .ex-stage video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: #000;
      }
      .ex-bar {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 6;
        padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
        background: #05060f;
        color: #fff;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .ex-bar .ex-name { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
      .ex-bar .ex-sub { display: block; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }

      /* ---------- Pantalla de plantillas: carpetas por tema ---------- */
      .tpl-screen {
        position: fixed;
        inset: 0;
        z-index: 80;
        background: var(--bg);
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .tpl-screen.open { display: block; }
      .tpl-screen-inner {
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px 44px;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      /* fixes92 (fantasmas al desplazar en Safari iOS): la cabecera
         sticky de las pantallas ya NO usa backdrop-filter ni fondo
         translúcido. La combinación sticky + backdrop-filter dentro
         del contenedor fijo con scroll (con el body además clavado
         por fixes91) hacía que WebKit dejara copias viejas de la
         capa del fondo al desplazar con inercia: etiquetas y la
         barra de costo se veían DOBLES y la cabecera apilada. Fondo
         opaco (var(--bg), visualmente igual: la tinta al 88 % sobre
         el propio fondo ya era casi el fondo) y sticky a secas,
         que compone limpio. Sin cambios de layout ni de conducta. */
      .tpl-screen-head {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 -18px;
        padding: 13px 18px 12px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .ts-nav-btn {
        width: 38px; height: 38px;
        flex: none;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--panel);
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
      }
      .ts-nav-btn svg { width: 18px; height: 18px; display: block; }
      .ts-head-text { min-width: 0; }
      /* fixes117 (§B, títulos muertos): la fila de cabecera se
         compacta a 48 px (botones 38 + relleno 5/5) donde el
         título repetía la entrada del menú. Tres mecanismos:
         (a) .ts-head-slim en las pantallas de título siempre
         muerto (Proyectos, Texto/Imagen/Editar video, Editar
         perfil, Ajustes, Avisos), cuyo texto salió del HTML;
         (b) .at-root en Plantillas y Estilos: el texto se apaga
         solo en la raíz — dentro de carpeta/familia el nombre
         contextual se conserva —; (c) .tl-on-section en
         Herramientas cuando una de sus 4 secciones está activa.
         Atrás/cerrar no cambian. */
      .tpl-screen-head.ts-head-slim { padding-top: 5px; padding-bottom: 5px; }
      #tpl-screen.at-root .ts-head-text,
      #sty-screen.at-root .ts-head-text { display: none; }
      #tpl-screen.at-root .tpl-screen-head,
      #sty-screen.at-root .tpl-screen-head { padding-top: 5px; padding-bottom: 5px; }
      #tools-screen.tl-on-section .ts-head-text { display: none; }
      #tools-screen.tl-on-section .tpl-screen-head { padding-top: 5px; padding-bottom: 5px; }
      /* fixes117: la moneda del renglón informativo «Mis
         créditos» del panel de perfil (la misma pila de la
         tarjeta de saldo). */
      .ts-title { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; }
      .ts-sub { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-top: 1px; }
      .ts-close { margin-left: auto; }
      .ts-hint { color: var(--ink-2); font-size: 13px; line-height: 1.4; margin-top: 7px; }

      /* ---------- Pantalla de Herramientas (opciones y ajustes) ---------- */
      .tool-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
      .tool-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel);
        color: var(--ink);
        font: inherit;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      button.tool-row { cursor: pointer; }
      .tool-ic {
        width: 38px; height: 38px;
        flex: none;
        border-radius: 12px;
        background: var(--panel-2, rgba(139, 123, 255, 0.14));
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .tool-ic svg { width: 20px; height: 20px; display: block; }
      .tool-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
      .tool-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
      .tool-desc { font-size: 12px; font-weight: 500; color: var(--ink-2); line-height: 1.3; }
      .tool-val { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
      .tool-val b { color: var(--ink); }
      .tool-arrow { flex: none; color: var(--ink-3, var(--ink-2)); display: inline-flex; }
      .tool-arrow svg { width: 18px; height: 18px; display: block; }
      .seg {
        flex: none;
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--bg);
      }
      .seg-btn {
        border: none;
        border-radius: 999px;
        padding: 7px 11px;
        background: transparent;
        color: var(--ink-2);
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .seg-btn.active { background: var(--accent); color: #fff; }
      .seg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .tool-row:has(.seg), .tool-row:has(.lang-select) { flex-wrap: wrap; }
      .tool-row:has(.seg) .seg, .tool-row:has(.lang-select) .lang-select { margin-left: auto; }
      .tool-row .lang-select { flex: none; max-width: 150px; }
      .tool-row .theme-toggle { flex: none; }

      /* ---------- Pantalla de Perfil (avatar): tema, idioma y cuenta ---------- */
      .pf-card {
        margin-top: 16px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--panel);
        overflow: hidden;
      }
      .pf-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
      }
      .pf-row + .pf-row { border-top: 1px solid var(--line); }
      .pf-row .lang-select { flex: none; max-width: 150px; }
      #profile-screen .auth-box { margin: 14px 0 0; }

      /* ---------- Perfil con sesión: identidad e información (fixes27) ---------- */
      /* Con sesión, la cuenta manda: la caja de la cuenta sube sobre la
         tarjeta Tema/Idioma y pierde su marco (la identidad va sobre el
         fondo y la información es su propia tarjeta, como la ilustración
         aprobada). Sin sesión queda el orden y el marco de fixes26. */
      #profile-screen .tpl-screen-inner { display: flex; flex-direction: column; }
      #profile-screen .tpl-screen-head { order: 0; }
      #profile-screen .auth-box { order: 2; }
      #profile-screen.pf-in .auth-box { order: 1; background: transparent; border: none; padding: 0; }
      #profile-screen.pf-in .auth-title { display: none; }
      /* fixes73: la tarjeta Tema/Idioma salió del perfil (vive en
         «Ajustes»); al final de «Mi cuenta» queda su entrada.
         fixes77: esa entrada solo se ve SIN sesión (con sesión manda
         la fila «Ajustes» del menú y renderAuth la oculta). */
      #profile-screen .pf-settings-entry { order: 3; }
      /* fixes77: sin esta regla, el display:flex de .pf-settings-entry
         ganaría al atributo hidden y la entrada duplicada seguiría
         viéndose con sesión. */
      #pf-goto-settings[hidden] { display: none; }
      .pf-identity {
        display: flex; flex-direction: column; align-items: center;
        text-align: center; padding: 8px 0 18px;
      }
      .pf-avatar {
        width: 84px; height: 84px; border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), #4f7cff);
        color: #fff; font-size: 36px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 10px;
      }
      .pf-id-name { font-size: 22px; font-weight: 800; }
      .pf-id-email { color: var(--ink-2); font-size: 14.5px; margin-top: 2px; }
      .pf-info {
        border: 1px solid var(--line); border-radius: 18px;
        background: var(--panel); padding: 4px 16px 8px;
      }
      .pf-info-title { margin: 12px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
      .pf-info-row {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 13px 0; background: none; border: none;
        border-top: 1px solid var(--line);
        color: var(--ink); font: inherit; text-align: left;
      }
      button.pf-info-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .pf-info-label { font-weight: 700; font-size: 15.5px; }
      .pf-info-value { margin-left: auto; color: var(--ink-2); font-size: 15px; text-align: right; overflow-wrap: anywhere; }
      .pf-chev { color: var(--ink-2); font-size: 20px; line-height: 1; }
      .pf-recharge {
        flex: none; margin-left: 10px;
        background: var(--accent); color: var(--accent-ink);
        border: none; border-radius: 999px; padding: 8px 16px;
        font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
      }
      .pf-edit { padding: 2px 0 14px; }
      .pf-edit input {
        width: 100%; padding: 11px 12px; margin: 0 0 8px;
        border-radius: 10px; border: 1px solid var(--line);
        background: var(--panel-2); color: var(--ink);
        font: inherit; font-size: 15px;
      }
      .pf-edit-actions { display: flex; gap: 8px; }
      .pf-edit-actions button {
        flex: 1; background: var(--accent); color: var(--accent-ink);
        border: none; border-radius: 999px; padding: 10px;
        font: inherit; font-weight: 800; cursor: pointer; min-height: 42px;
      }
      .pf-edit-actions .btn-ghost { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
      .pf-logout {
        width: 100%; margin-top: 14px; min-height: 48px;
        background: var(--panel); color: var(--ink);
        border: 1px solid var(--line); border-radius: 14px; padding: 13px;
        font: inherit; font-weight: 800; cursor: pointer;
      }
      .pf-delete-link {
        display: block; margin: 14px auto 0;
        background: none; border: none; color: var(--bad);
        font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
      }
      .pf-delete-box { margin-top: 12px; border: 1px solid var(--bad); border-radius: 14px; padding: 14px; }
      .pf-delete-warn { margin: 0 0 10px; font-size: 14px; color: #ff8a8a; }
      .pf-delete-sure { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #ff5252; letter-spacing: .01em; }
      .pf-delete-box input {
        width: 100%; padding: 11px 12px; margin: 0 0 8px;
        border-radius: 10px; border: 1px solid var(--line);
        background: var(--panel-2); color: var(--ink);
        font: inherit; font-size: 15px;
      }
      .pf-delete-confirm { background: var(--bad) !important; color: #fff !important; }
      /* ---------- fixes73: «Mi cuenta» + «Ajustes» (manual 6-7) ------- */
      .pf-avatar { width: 96px; height: 96px; font-size: 40px; }
      /* ---------- fixes86: foto de perfil ---------------------------- */
      /* La foto llena el círculo (recorte por el propio círculo); sin
         foto se sigue viendo la letra de siempre. */
      .pf-avatar { overflow: hidden; }
      .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .avatar-btn { overflow: hidden; padding: 0; }
      .pf-photo-box {
        display: flex; flex-direction: column; align-items: center;
        margin-top: 16px;
      }
      .pf-photo-wrap { position: relative; display: inline-flex; }
      .pf-avatar-btn {
        border: none; cursor: pointer; padding: 0; margin-bottom: 0;
        font: inherit; -webkit-tap-highlight-color: transparent;
      }
      .pf-photo-cam {
        position: absolute; right: 0; bottom: 2px;
        width: 30px; height: 30px; border-radius: 50%;
        background: var(--accent); color: #fff;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid var(--bg, #fff); pointer-events: none;
      }
      .pf-photo-cam svg { width: 16px; height: 16px; display: block; }
      .pf-photo-change {
        background: none; border: none; color: var(--accent);
        font: inherit; font-size: 15px; font-weight: 700;
        cursor: pointer; padding: 8px 6px 2px;
      }
      .pf-photo-remove {
        background: none; border: none; color: var(--bad);
        font: inherit; font-size: 14px; font-weight: 600;
        cursor: pointer; padding: 4px 6px 0;
      }
      .pf-photo-remove[hidden] { display: none; }
      .pf-settings-entry {
        display: flex; align-items: center; gap: 12px; text-align: left;
      }
      .pf-settings-entry .tool-arrow { margin-left: auto; }
      #settings-screen .st-logout-row .tool-name { color: var(--bad); }
      #settings-screen .st-logout-row .tool-ic { color: var(--bad); }
      /* ---------- fixes75: «Editar perfil», sub-vista de la cuenta - */
      #profile-edit-screen .pf-info { margin-top: 14px; }
      .tl-balance-card {
        margin-top: 16px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--panel);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .tl-balance-card .tl-bal-label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: block; }
      .tl-balance-card .balance-chip { display: inline-flex; font-size: 17px; }
      .tl-pack {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel);
      }
      .tl-pack .p-credits { font-size: 16px; font-weight: 800; }
      .tl-pack .p-credits small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
      .tl-pack .p-price { font-size: 13px; font-weight: 600; color: var(--ink-2); }
      .tl-pack .ribbon-sm { display: inline-block; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 2.5px 9px; border-radius: 999px; vertical-align: 2px; text-transform: uppercase; }
      .tl-pack .p-bonus { font-size: 12.5px; font-weight: 700; color: #7ea8ff; }
      .tl-pack button {
        margin-left: auto;
        flex: none;
        border: none;
        border-radius: 999px;
        padding: 10px 14px;
        background: var(--grad);
        color: #fff;
        font: inherit;
        font-size: 12.5px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .tl-info-body { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
      .tl-info-body p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
      .tl-info-body p b { color: var(--ink); }
      /* fixes91b: la vista legal lleva los textos COMPLETOS con sus
         dos secciones encabezadas (Términos / Privacidad). */
      .tl-info-body h3 { margin: 10px 0 0; font-size: 16.5px; font-weight: 800; color: var(--ink); }
      .tl-info-body h3:first-child { margin-top: 0; }
      .tool-note { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
      .folder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
      .folder-card {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        /* fixes117 (I-04, spec pre-aprobada): la tarjeta pasa a
           9/16 — el formato nativo de las portadas (720×1280) —
           en los TRES breakpoints: la foto se ve COMPLETA y llena
           (cover sin recorte). Antes: 1/1.05 aquí y 2.6/1 en
           escritorio, que dejaban fuera hasta el 78 % de la foto. */
        aspect-ratio: 9 / 16;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      .folder-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .folder-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0) 46%);
      }
      .folder-ic {
        position: absolute;
        top: 8px; left: 8px;
        z-index: 2;
        width: 30px; height: 30px;
        border-radius: 9px;
        background: rgba(3, 5, 16, 0.55);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .folder-ic svg { width: 16px; height: 16px; display: block; }
      .folder-meta { position: absolute; left: 10px; right: 10px; top: 9px; z-index: 2; }
      .folder-meta .f-name { display: block; color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.2; }
      .folder-meta .f-count { display: block; color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 500; margin-top: 2px; }
      #ts-folder-view .tplx-grid { margin-top: 16px; }

      /* ---------- Ventana «Estilos de video»: familias y lista de estilos ---------- */
      .styfam-list { display: grid; gap: 10px; margin-top: 14px; }
      .styfam-card {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 10px 14px 10px 10px;
        cursor: pointer;
        font: inherit;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .styfam-card:hover { border-color: var(--accent); }
      .styfam-thumb {
        width: 72px; height: 72px;
        flex: none;
        border-radius: 12px;
        object-fit: cover;
        display: block;
        background: #0a0d29;
      }
      .styfam-grad {
        width: 72px; height: 72px;
        flex: none;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      .styfam-grad svg { width: 30px; height: 30px; display: block; }
      .styfam-grad.arte { background: linear-gradient(140deg, #b45309 0%, #db2777 55%, #7c3aed 100%); }
      .styfam-text { min-width: 0; }
      .styfam-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
      .styfam-count { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 2px; }
      .styfam-desc { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.4; margin-top: 3px; }
      .styfam-arrow { margin-left: auto; flex: none; color: var(--ink-3); display: flex; }
      .styfam-arrow svg { width: 18px; height: 18px; display: block; }
      .sty-list { display: grid; gap: 8px; margin-top: 14px; }
      .sty-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        text-align: left;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px 14px;
        cursor: pointer;
        font: inherit;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
      }
      .sty-row:hover { border-color: var(--accent); }
      .sty-row .s-text { min-width: 0; }
      .sty-row .s-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
      .sty-row .s-desc { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
      .sty-row .s-sample {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .sty-row .s-sample svg { width: 9px; height: 9px; display: block; }

      /* Cuadrícula de tarjetas de la ventana «Estilos de video»:
         mismo lenguaje visual que las tarjetas de Plantillas
         (.folder-card / .tplx-card): imagen a todo el marco y el
         nombre DENTRO de la imagen, arriba, sobre una franja
         degradada oscura para que se lea en cualquier portada. */
      .sty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
      .sty-gcard {
        position: relative;
        border: none;
        padding: 0;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 9 / 16;
        cursor: pointer;
        background: #0a0d29;
        font: inherit;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      .sty-gcard--fam { aspect-ratio: 1 / 1.05; }
      .sty-gcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      /* fixesfam1 (Parte B): capa de video viva sobre la portada de
         cada tarjeta de familia. La portada <img> queda como base
         instantánea (la tarjeta nunca se ve negra); el video, mudo,
         se funde a visible solo cuando está sonando de verdad
         (clase .playing, desde sus eventos reales). */
      .sty-gcard-vid {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block;
        opacity: 0; transition: opacity 0.4s ease;
        pointer-events: none;
      }
      .sty-gcard-vid.playing { opacity: 1; }
      .sty-gcard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0) 46%);
      }
      .sty-gcard-meta { position: absolute; top: 9px; left: 10px; right: 10px; z-index: 2; }
      .sty-gcard-name { display: block; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
      .sty-gcard--fam .sty-gcard-name { font-size: 16.5px; }
      .sty-gcard-sub { display: block; color: rgba(255, 255, 255, 0.85); font-size: 10.5px; font-weight: 600; margin-top: 2px; }

      /* Visor de estilo: portada tipográfica cuando el estilo aún no tiene video */
      .sv-cover {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 96px 30px 190px;
      }
      .sv-cover[hidden] { display: none; }
      /* fixesfam1 (Parte A): pastilla «toca para activar el sonido»
         del visor de estilos — visible solo en reserva muda (el
         video suena en silencio porque iOS no dejó arrancarlo con
         sonido); el primer toque la oculta y devuelve el sonido. */
      .sv-sound-chip {
        position: absolute;
        top: calc(64px + env(safe-area-inset-top));
        left: 50%;
        transform: translateX(-50%);
        z-index: 6;
        border: none;
        border-radius: 999px;
        background: rgba(3, 5, 16, 0.72);
        color: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        padding: 9px 14px;
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .sv-sound-chip[hidden] { display: none; }
      .sv-cover .sv-big {
        font-family: "Archivo Expanded", "Archivo", sans-serif;
        font-size: clamp(27px, 7.4vw, 40px);
        font-weight: 800;
        line-height: 1.12;
        color: #fff;
        text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
        max-width: 340px;
      }
      .sv-cover.fam-anime { background: linear-gradient(160deg, #2a1454 0%, #7c3aed 58%, #db2777 130%); }
      .sv-cover.fam-animacion { background: linear-gradient(160deg, #134e4a 0%, #0d9488 55%, #65a30d 130%); }
      .sv-cover.fam-cine { background: linear-gradient(160deg, #111827 0%, #6d28d9 60%, #b45309 135%); }
      .sv-cover.fam-arte { background: linear-gradient(160deg, #7c2d12 0%, #db2777 55%, #7c3aed 130%); }
      .sv-cover.fam-realista { background: linear-gradient(160deg, #0c2d4d 0%, #0284c7 55%, #0d9488 130%); }
      .sv-desc {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.88);
        margin-top: 7px;
        max-width: 520px;
      }
      /* Opciones de muestra de un estilo: 5 videos entre los que elegir */
      .sv-opts { margin-top: 13px; }
      .sv-opts[hidden] { display: none; }
      .sv-opts-label {
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.72);
      }
      .sv-opts-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 8px;
      }
      .sv-opt {
        flex: none;
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        color: #fff;
        background: rgba(255, 255, 255, 0.14);
        border: 1.5px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        padding: 7px 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .sv-opt.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }
      .sv-opt-title {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        color: #fff;
        margin-top: 8px;
      }

      /* ---------- Pantalla de creación de video ---------- */
      .create-screen {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--bg);
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .create-screen.open { display: block; }
      .create-screen-inner {
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px 44px;
        font-family: "Poppins", "Archivo", sans-serif;
      }
      /* fixes92: mismo arreglo anti-fantasmas que .tpl-screen-head
         (sin backdrop-filter; fondo opaco). */
      .create-screen-head {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 -18px;
        padding: 13px 18px 12px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .create-screen .sec { margin-top: 18px; }

      /* ---------- Barra de navegación inferior ---------- */
      .tabbar {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: min(430px, 100%);
        z-index: 60;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        background: var(--nav-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--line);
        padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
        font-family: "Poppins", "Archivo", sans-serif;
      }
      .tab {
        background: none;
        border: none;
        color: var(--ink-3);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-family: "Poppins", "Archivo", sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        padding: 2px 4px;
        min-width: 58px;
        -webkit-tap-highlight-color: transparent;
      }
      .tab svg { width: 22px; height: 22px; display: block; }
      .tab.active { color: var(--accent); }
      .tab-plus {
        width: 54px; height: 54px;
        border: none;
        border-radius: 50%;
        background: var(--grad);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-20px);
        box-shadow: 0 12px 26px rgba(90, 75, 255, 0.5);
        flex: none;
        -webkit-tap-highlight-color: transparent;
      }
      .tab-plus svg { width: 25px; height: 25px; display: block; }


      /* ---------- Versión ligera: nota de los visores y portada del reproductor ---------- */
      .tv-note {
        display: block;
        margin-top: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 12px;
        padding: 10px 13px;
        max-width: 520px;
      }
      .tv-note[hidden] { display: none; }
      .ex-stage img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
      .ex-stage img[hidden], .ex-stage video[hidden] { display: none; }
      /* ---------- Escritorio: pasos con más aire ---------- */
      @media (min-width: 1024px) {
        section.step { padding: 26px; }
      }
    
/* ===== Integración producción (Video AI) ===== */
/* fixes84: la franja demo ya NO es sticky — al desplazar, su
   sticky top:0 (z 60) quedaba sobre la cabecera sticky (z 55) y
   tapaba enteros el menú, la píldora, la campana y el avatar en
   el entorno demo/de prueba. En flujo, al inicio, y la cabecera
   se fija limpia al desplazar. */
.demo-banner{background:#ffb020;color:#201600;font-weight:700;font-size:.85rem;text-align:center;padding:.55rem .75rem}
.auth-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 14px}
.auth-box .auth-title{margin:0 0 6px;font-size:17px}
.auth-box input[type=email],.auth-box input[type=password],.auth-box input[type=text]{width:100%;padding:11px 12px;margin:0 0 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px}
.auth-actions{display:flex;gap:8px}
.auth-actions button{flex:1;background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:11px;font-weight:800;cursor:pointer;min-height:44px}
.auth-actions #register-btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
#prompt-wrap{margin-top:12px}
#prompt-wrap input[type=text]{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;margin-top:6px}
#duration-manual{margin-top:10px}
#duration-manual input[type=number]{width:7rem;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit}
.gallery-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.gallery-item video{width:100%;display:block;background:#000}
.gallery-item .meta{padding:10px 12px;font-size:13px;color:var(--ink-2)}
.gallery-item .badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;background:var(--panel-2);color:var(--ink);margin:0 4px 4px 0}
.gallery-item .badge.done{background:var(--ok);color:#04240f}
.gallery-item .badge.failed{background:var(--bad);color:#2b0505}
.gallery-item .badge.processing,.gallery-item .badge.queued{background:#ffb020;color:#201600}
.gallery-item a{color:var(--accent);font-weight:700}
.model-auto{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pack button[disabled]{opacity:.5;cursor:not-allowed}
.tl-pack button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:10px 18px;font-weight:800;cursor:pointer;white-space:nowrap}
.msg.show{display:block}
/* ===== Conectar mi IA (BYOK) ===== */
.ai-providers{display:inline-flex;gap:6px;margin:0 0 12px}
.ai-field{display:block;margin:0 0 10px}
.ai-field>span{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 5px}
.ai-field input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px}
.ai-status{margin:12px 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.ai-status.on{border-style:solid;border-color:var(--ok);color:var(--ink);background:rgba(61,220,132,.08)}
#ai-disconnect{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.ai-link{margin:10px 0 0;font-size:13.5px}
.ai-link a{color:var(--accent);font-weight:600;text-decoration:none}
.ai-link a:hover{text-decoration:underline}

/* ===== fixes33: estado activo de la barra de pestañas ===== */
.tab.active{color:var(--accent)}
.tab .tab-ic{display:inline-block}
.tab.active .tab-ic{transform:translateY(-1px)}

/* ===== fixes35: Premium Studio (Seedance 2.5) =====
   Entrada premium en el paso de efecto de Crear y pantalla propia
   sobre Crear (z 110 > create-screen 100). Los componentes base
   (.step, .dropzone, .preview, .options, .seg, .cost-box,
   .generate-btn) son los de la app; aquí solo va lo nuevo. */
#premium-screen { z-index: 110; }
#premium-screen .step { text-align: left; }

/* Entrada en Crear: tarjeta con borde degradado */
.ps-entry {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 12px; padding: 14px 16px;
  text-align: left; cursor: pointer; color: var(--ink);
  font: inherit; -webkit-tap-highlight-color: transparent;
  border: 2px solid transparent; border-radius: 16px;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              var(--grad) border-box;
  box-shadow: 0 12px 28px rgba(95, 92, 255, 0.28);
}
.ps-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ps-entry-title { font-size: 17px; font-weight: 800; line-height: 1.2; }
.ps-entry-desc { font-size: 13px; color: var(--ink-2); }
.ps-entry-rate { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 3px; }
.ps-entry-arrow { font-size: 20px; font-weight: 800; color: var(--accent); flex: none; }
.premium-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--grad); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  border-radius: 999px; padding: 4px 10px; margin-bottom: 7px;
}

/* Tarjeta del motor */
.ps-engine-wrap {
  background: var(--grad); border-radius: 22px; padding: 2px;
  margin: 16px auto; max-width: 560px;
  box-shadow: 0 18px 44px rgba(95, 92, 255, 0.35);
}
.ps-engine-card {
  background: var(--panel); border-radius: 20px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.ps-engine-main { flex: 1; min-width: 0; }
.ps-engine-name { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; }
.ps-engine-sub { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.ps-engine-rate { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.ps-engine-check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(95, 92, 255, 0.45);
}
.ps-engine-check svg { width: 14px; height: 14px; display: block; }

/* Foto de referencia: etiqueta sobre la imagen y botón de 2.ª foto */
#premium-screen .preview { position: relative; }
.ps-ref-tag {
  position: relative; top: -44px; left: 10px; margin-bottom: -34px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(7, 10, 36, 0.74); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 700;
}
.ps-add-ref {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink-2); font: inherit;
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ps-add-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ps-add-sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.ps-plus { color: var(--accent); font-weight: 800; }

/* Chips de duración y cámara */
.ps-chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-chiprow.grow .dchip { flex: 1; }
.dchip {
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--bg-2); color: var(--ink-2);
  font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 9px 15px; text-align: center; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dchip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Interruptor de audio nativo */
.ps-toggle-row { display: flex; align-items: center; gap: 12px; }
.ps-toggle-text { flex: 1; min-width: 0; }
.ps-toggle-title { display: block; font-size: 15.5px; font-weight: 700; }
.ps-toggle-sub { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.ps-switch {
  flex: none; width: 52px; height: 30px; border-radius: 999px;
  border: none; background: var(--panel-2); position: relative;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ps-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: left 0.15s ease;
}
.ps-switch.on { background: var(--grad); box-shadow: 0 6px 16px rgba(95, 92, 255, 0.35); }
.ps-switch.on::after { left: 25px; }

/* Costo premium */
.ps-premium-word { color: var(--accent); font-weight: 800; }
#premium-screen .cost-total .t-usd { display: block; font-size: 13px; color: var(--ink-2); text-align: right; }
.ps-refund-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ps-ck { color: var(--ok); font-weight: 800; flex: none; }
.ps-generate { margin-top: 14px; background: var(--grad); box-shadow: 0 16px 34px rgba(95, 92, 255, 0.40); }
.ps-generate:disabled { opacity: 0.45; box-shadow: none; }

/* ===== fixes34: verificación de correo, ayuda y soporte =====
   Franja de confirmación de correo (sobre el contenido, bajo la
   franja demo), enlace «¿Olvidaste tu contraseña?» y la vista de
   Ayuda (contacto, preguntas frecuentes y reportar un problema).
   Solo componentes nuevos; las cajas de recuperar/restablecer
   reusan .pf-edit y los campos de reporte reusan .ai-field. */
.verify-banner{background:var(--accent-soft);color:var(--ink);border-bottom:1px solid var(--line);font-size:.88rem;text-align:center;padding:.55rem .75rem;position:sticky;top:0;z-index:59;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center}
.verify-banner[hidden]{display:none}
.verify-resend{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:6px 14px;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.verify-resend:disabled{opacity:.5;cursor:default}
.verify-dismiss{background:transparent;border:none;color:var(--ink-2);font:inherit;font-size:.95rem;cursor:pointer;padding:4px 6px;line-height:1}
.verify-banner-msg{flex-basis:100%;font-size:.82rem;color:var(--ink-2)}
.verify-banner-msg:empty{display:none}
.link-btn{display:block;margin:10px auto 0;background:none;border:none;color:var(--accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:6px}
.link-btn:hover{text-decoration:underline}
.help-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 14px}
.help-card .tool-name{display:block;font-size:16px;margin-bottom:2px}
.help-contact-btn{display:inline-block;margin-top:10px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:10px 18px;font-weight:800;text-decoration:none}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px}
.faq-item h4{margin:0 0 4px;font-size:15px}
.faq-item p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ai-field textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;resize:vertical}
#report-form .auth-actions{margin-top:4px}
#tl-help-view .tool-row{width:100%;text-align:left}

/* ===== Reestructuración UI — Fase 1: menú lateral + Mis proyectos ===== */
.drawer-backdrop{position:fixed;inset:0;background:rgba(5,5,20,.55);z-index:1180}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);background:var(--panel,#14142b);z-index:1190;transform:translateX(-105%);transition:transform .28s ease,visibility 0s .28s;padding:18px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:8px 0 32px rgba(0,0,0,.35);visibility:hidden}
.drawer.open{transform:translateX(0);visibility:visible;transition:transform .28s ease,visibility 0s 0s}
/* fixes81: candado de scroll con el cajón abierto (ver lockScrollFor-
   Drawer en app.js). html sin scroll ni encadenamiento; body fijo en
   la Y guardada (top lo pone el JS en línea) — el patrón que Safari
   iOS respeta; overflow:hidden a secas no clava el fondo ahí. El
   cajón mantiene su scroll propio sin encadenar al fondo. */
html.drawer-lock{overflow:hidden;overscroll-behavior:none}
body.drawer-lock{position:fixed;left:0;width:100%;overflow:hidden;overscroll-behavior:none}
.drawer{overscroll-behavior:contain}
/* fixes91: candado de scroll con CUALQUIER pantalla abierta (ver
   lockScrollForScreen en app.js). Mismo patrón que el del cajón:
   con una .tpl-screen/.create-screen abierta, el fondo ya no se
   mueve ni rebota en Safari iOS cuando el contenido de la pantalla
   no llena el alto (una carpeta con pocos videos, «Mi cuenta»,
   «Ajustes»): antes overflow:hidden en body no clavaba el fondo y
   el gesto se colaba al documento, moviendo la barra inferior. */
html.screen-lock{overflow:hidden;overscroll-behavior:none}
body.screen-lock{position:fixed;left:0;width:100%;overflow:hidden;overscroll-behavior:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.drawer-head .logo-word{font-size:20px;font-weight:800}
.drawer-nav{display:flex;flex-direction:column;gap:2px}
.drawer-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer}
.drawer-item svg{width:22px;height:22px;flex:0 0 22px;color:var(--accent)}
.drawer-item:active{background:var(--accent-soft)}
.pj-tools{display:flex;gap:8px;align-items:stretch;margin:4px 0 12px}
.pj-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--panel-2)}
.pj-search svg{width:18px;height:18px;color:var(--ink-2);flex:0 0 18px}
.pj-search input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:11px 0;outline:none;min-width:0}
.pj-filter-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:0 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.pj-filter-btn svg{width:18px;height:18px}
.pj-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent)}
.pj-tabs::-webkit-scrollbar{display:none}
.pj-tab{flex:0 0 auto;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pj-tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pj-count{margin-left:5px;font-weight:800}
.pj-list{display:flex;flex-direction:column;gap:10px}
.pj-card{display:flex;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:10px;cursor:pointer;color:var(--ink);font:inherit}
.pj-thumb{position:relative;width:86px;height:86px;flex:0 0 86px;border-radius:12px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.pj-thumb img,.pj-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.pj-thumb .pj-dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 6px}
.pj-thumb .pj-thumb-ic{width:30px;height:30px;color:#fff;opacity:.75}
.pj-card-main{flex:1;min-width:0}
.pj-card-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-card-meta{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.pj-chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2.5px 9px;margin-top:6px;background:var(--accent-soft);color:var(--accent)}
.pj-chip.done{background:rgba(46,204,113,.16);color:#2ecc71}
.pj-chip.failed{background:rgba(231,76,60,.16);color:#e74c3c}
.pj-chip.processing,.pj-chip.queued{background:rgba(241,196,15,.16);color:#d4a017}
.pj-prog{height:6px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.pj-prog i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}
.pj-dots{align-self:flex-start;border:0;background:transparent;color:var(--ink-2);font-size:20px;line-height:1;padding:6px 4px;cursor:pointer}
.pj-empty{text-align:center;padding:44px 18px;color:var(--ink-2)}
.pj-empty h3{color:var(--ink);margin:0 0 6px;font-size:17px}
.pj-empty p{margin:0 0 16px;font-size:14px}
.pj-detail-media{border-radius:16px;overflow:hidden;background:#000;margin-bottom:14px}
.pj-detail-media video,.pj-detail-media img{width:100%;display:block;max-height:62vh;object-fit:contain;background:#000}
.pj-detail-media .pj-detail-ph{padding:56px 0;text-align:center;color:#fff;opacity:.8}
.pj-detail-title{font-size:19px;margin:0 0 12px}
.pj-steps{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.pj-step{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.pj-step .pj-step-ic{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.pj-step.done{color:var(--ink)}
.pj-step.done .pj-step-ic{background:#2ecc71;border-color:#2ecc71;color:#fff}
.pj-step.now{color:var(--ink)}
.pj-step.now .pj-step-ic{border-color:var(--accent);color:var(--accent)}
.pj-step.now .pj-step-ic::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pj-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pj-progress .bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.pj-progress .bar i{display:block;height:100%;background:var(--accent)}
.pj-error{border:1px solid rgba(231,76,60,.45);background:rgba(231,76,60,.08);border-radius:14px;padding:14px;margin-bottom:14px}
.pj-error p{margin:6px 0;font-size:14px}
.pj-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0 0 18px;font-size:14.5px}
.pj-meta dt{color:var(--ink-2)}
.pj-meta dd{margin:0;font-weight:600;text-align:right;word-break:break-word}
.pj-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.pj-actions .btn{width:100%}
.pj-sheet-backdrop{position:absolute;inset:0;background:rgba(5,5,20,.55);z-index:5}
.pj-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--panel,#14142b);border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:82%;overflow-y:auto}
.pj-sheet-title{margin:0 0 12px;font-size:17px}
.pj-sheet-label{margin:14px 0 7px;font-size:13px;font-weight:700;color:var(--ink-2)}
.pj-seg{display:flex;flex-wrap:wrap;gap:6px}
.pj-sheet-btns{display:flex;gap:9px;margin-top:18px}
.pj-sheet-btns .btn{flex:1}
.pj-sheet-list{display:flex;flex-direction:column}
.pj-sheet-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 6px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer}
.pj-sheet-item:last-child{border-bottom:0}
.pj-sheet-item.danger{color:#e74c3c}
.pj-modal{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:6;background:var(--panel,#14142b);border-radius:18px;padding:20px 18px}
.pj-modal input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px}
.pj-modal p{font-size:14.5px;color:var(--ink-2);margin:0}
.pj-modal #pj-confirm-text{color:var(--ink);line-height:1.5}
.btn{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:12px;padding:11px 16px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:44px}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--grad);border-color:transparent;color:#fff}
.btn-danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
.pj-card-main{display:flex;flex-direction:column;align-items:flex-start}
.pj-card-title{display:block;max-width:100%}
.pj-prog{display:block;width:100%}

/* ===== Reestructuración UI — Fase 2: hub de creación + Texto a video ===== */
.hub-grid{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.hub-card{width:100%;text-align:left}
.hub-card{display:flex;align-items:center;gap:13px;min-height:0;padding:14px 15px}
.hub-card .act-ic{flex:0 0 auto}
.hub-card .act-ic svg{width:24px;height:24px}
.hub-card .act-text{flex:1;min-width:0}
.hub-card .act-title{margin-top:0;font-size:15.5px}
.hub-card .act-desc{font-size:12.5px;margin-top:2px}
.hub-card .act-arrow{position:static;flex:0 0 26px;width:26px;height:26px;margin-left:auto}
.hub-card .act-arrow svg{width:13px;height:13px}
.t2v-body{display:flex;flex-direction:column;gap:4px}
.t2v-label{font-size:14px;font-weight:700;margin:14px 0 7px;color:var(--ink)}
.t2v-label:first-child{margin-top:2px}
.t2v-field textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;resize:vertical;box-sizing:border-box}
.t2v-count{margin:4px 0 0;text-align:right;font-size:12px;color:var(--ink-2)}
.t2v-hint{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.t2v-seg{display:flex;gap:6px}
.t2v-cost{display:flex;align-items:baseline;gap:10px;margin-top:20px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);font-size:14.5px}
.t2v-cost b{font-size:17px;margin-left:auto}
.t2v-balance{font-size:12.5px;color:var(--ink-2)}
.t2v-generate{width:100%;margin-top:14px;padding:14px;font-size:16px}
/* fixes92 · selector de proporción en TARJETAS (variante 1 del
   dueño, elegida desde la maqueta): cada opción es una tarjeta con
   el rectángulo dibujado en su proporción REAL a alto constante
   de 34px (9:16 → 19×34, 16:9 → 60×34, 1:1 → 34×34), la palabra
   en negrita (diccionario: fmt_vertical/fmt_horizontal/fmt_square)
   y el número debajo; la seleccionada va en el violeta sólido
   activo de la app. Sustituye a las píldoras en «Texto a video»,
   «Imagen a video» y «Formato por defecto» de Herramientas. Los
   botones conservan la clase seg-btn y sus atributos data-* —
   el JS de selección no cambia — y en Premium la tarjeta 1:1 se
   sigue ocultando en Estándar por las reglas .t2v-prem-only. */
.seg.asp-cards{display:flex;gap:8px;padding:0;border:none;border-radius:0;background:none}
.asp-cards .asp-card{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:10px 6px 9px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.asp-cards .asp-shape{display:block;height:34px;border:2px solid currentColor;border-radius:4px;opacity:.9}
.asp-cards .asp-916{width:19px}
.asp-cards .asp-169{width:60px}
.asp-cards .asp-11{width:34px}
.asp-cards .asp-word{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.15}
.asp-cards .asp-num{font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.15}
.asp-cards .asp-card.active{background:var(--accent);border-color:var(--accent);color:#fff}
.asp-cards .asp-card.active .asp-word,.asp-cards .asp-card.active .asp-num{color:#fff}
.tool-row .seg.asp-cards{flex:1 1 100%;margin-left:0}
/* fixes89b: aviso de protección de la categoría «Sin sonido» a
   1080p (Texto a video e Imagen a video): caja tintada de
   advertencia, en la familia visual de .msg.err, imposible de
   pasar por alto ANTES de generar — el cliente lee que su video
   saldrá en silencio y no puede creer después que es un error
   nuestro. Y la constancia del estado de sonido en el resumen. */
/* fixes94b: la alerta «Sin sonido» es UN solo componente en toda la
   app y va en LETRA AMARILLA (regla de Siamel, 2026-10-28).
   Paquete T (dueño 2026-11-01, ilustración aprobada): el formato
   de CAJA amarilla DESAPARECE — la alerta es una LÍNEA amarilla
   (--warn-ink #ffd23e, 13,5 px, negrita) sin fondo ni borde, con
   el texto unificado «Video en silencio: ideal si luego agregas
   tu propia música o audio (TikTok, Reels, YouTube o tu editor).»
   en TODOS los casos (Texto/Imagen Estándar, Pro y Studio con
   «Sin sonido», Editar con «Sin audio», efectos, Historia y la
   pantalla Premium heredada). Es el ÚNICO texto amarillo de la
   app: las notas informativas van en la nota AZUL oficial
   (.audio-note-blue, #142553/#8EBFFA) — el aviso de rango de
   Editar (#vedit-range-warn) salió de esta clase a esa — y el
   resto de ayudas va en blanco. */
.audio-warn{margin:9px 0 0;padding:0;border:0;background:transparent;color:var(--warn-ink);font-size:13.5px;font-weight:700;line-height:1.45}
.audio-warn[hidden],.t2v-cost-mode[hidden]{display:none}
.t2v-cost-mode{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
/* fixes110: TRES niveles (Estándar / Pro / Studio) en Texto a
   video e Imagen a video; data-tier lo pone el pintor según el
   estado. Cada nivel muestra SOLO sus opciones, así una
   combinación inválida es imposible desde la interfaz: la fila
   de resolución (480p/720p) vive únicamente en Estándar (el
   nivel Pro ES la ruta 1080p y Studio es fijo a 720p), las
   duraciones se reparten por clases (5 s es común; 8 s en
   Estándar y Pro; 10/12 s solo en Pro; 10/15/30 s solo en
   Studio) y la tarjeta 1:1 solo existe en Studio. */
#t2v-screen .t2v-std-only, #t2v-screen .t2v-pro-only, #t2v-screen .t2v-studio-only,
#i2v-screen .t2v-std-only, #i2v-screen .t2v-pro-only, #i2v-screen .t2v-studio-only{display:none}
#t2v-screen[data-tier="standard"] .t2v-std-only, #i2v-screen[data-tier="standard"] .t2v-std-only{display:inline-block}
#t2v-screen[data-tier="pro"] .t2v-pro-only, #i2v-screen[data-tier="pro"] .t2v-pro-only{display:inline-block}
#t2v-screen[data-tier="studio"] .t2v-studio-only, #i2v-screen[data-tier="studio"] .t2v-studio-only{display:inline-block}
#t2v-screen[data-tier="studio"] .asp-card.t2v-studio-only, #i2v-screen[data-tier="studio"] .asp-card.t2v-studio-only{display:flex}
#t2v-screen:not([data-tier="standard"]) #t2v-res, #i2v-screen:not([data-tier="standard"]) #i2v-res{display:none}
/* fixes87: insignia de conteo de las tarjetas-carpeta (estilos y
   plantillas): pastilla grande y contrastada, legible sobre
   cualquier portada, para que se entienda de un vistazo que la
   tarjeta es una carpeta con N elementos y no un solo video. */
.sty-gcard-sub.count-badge,.folder-meta .f-count.count-badge{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:4px 11px;border-radius:999px;background:rgba(3,5,16,.68);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:13.5px;font-weight:800;line-height:1.2;letter-spacing:.01em}
@media (min-width:600px){.sty-gcard-sub.count-badge,.folder-meta .f-count.count-badge{font-size:14.5px;padding:5px 13px}}
/* fixes87: tarjeta de acceso en dos vistas (Iniciar sesión / Crear
   cuenta) y estado de procesamiento del registro. */
.auth-switch{margin:14px 0 0;font-size:14px;color:var(--ink-2);text-align:center}
.auth-view-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.auth-view-back{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 0 2px}
.auth-view-title{font-size:16px;font-weight:700}
#auth-register-view #register-btn{background:var(--accent);color:var(--accent-ink);border:none}
#auth-creating{text-align:center;padding:28px 0 20px}
.auth-spinner{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;border:3px solid var(--line);border-top-color:#e8b33c;animation:authspin .8s linear infinite}
@keyframes authspin{to{transform:rotate(360deg)}}
.auth-creating-text{font-size:15px;font-weight:600;margin:0}

/* ===== Reestructuración UI — Fase 3: historial, canje y avisos ===== */
/* fixes73: la campana fue dorada, a juego con la píldora de saldo
   (Opción 5); fixes86 (pedido del dueño): vuelve a BLANCA, como la
   original — la píldora no cambia. Su insignia de no leídos sigue
   roja (#e5484d). */
#bell-btn{position:relative;color:#fff}
.bell-badge{position:absolute;top:2px;inset-inline-end:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-sizing:border-box}
.promo-box{margin-top:18px}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:15px;text-transform:uppercase;box-sizing:border-box;min-width:0}
.promo-row .btn{white-space:nowrap}
.hist-list{display:flex;flex-direction:column}
.hist-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.hist-row:last-child{border-bottom:none}
.hist-main{flex:1;min-width:0}
.hist-kind{display:block;font-size:14.5px;font-weight:600}
.hist-date{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.hist-amt{font-size:15px;font-weight:800;white-space:nowrap}
.hist-amt.pos{color:#2f9e6e}
.hist-promo{display:block;font-size:11.5px;color:var(--ink-2);text-align:right}
.notif-list{display:flex;flex-direction:column}
.notif-row{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:13px 4px;border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;cursor:pointer}
.notif-ic{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--panel-2)}
.notif-row.done .notif-ic{color:#2f9e6e}
.notif-row.failed .notif-ic{color:#e5484d}
.notif-main{flex:1;min-width:0}
.notif-kind{display:block;font-size:14.5px;font-weight:700}
.notif-title{display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-date{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.notif-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#e5484d;margin-top:6px}

/* fixes91: panel de notificaciones de la campanita (maqueta aprobada
   por el dueño): tarjeta de máx. 360px anclada arriba a la derecha
   de la columna, justo bajo la cabecera, con su flechita hacia la
   campana. El velo va BAJO la cabecera (z 54 < 55): la cabecera
   queda nítida y la campana sigue tocable para cerrar el panel;
   solo se atenúa el contenido. La campana en estado activo (panel
   abierto) toma el acento suave, como en la maqueta. */
#bell-btn.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(139,123,255,.45)}
.notif-scrim{position:fixed;inset:0;background:rgba(4,5,20,.45);z-index:54}
.notif-pop{position:absolute;top:68px;inset-inline-end:10px;width:min(92vw,360px);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);z-index:60;overflow:hidden;font-family:"Archivo",system-ui,sans-serif;animation:notifpop-in .16s ease}
@keyframes notifpop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.notif-pop::before{content:"";position:absolute;top:-6px;inset-inline-end:62px;width:12px;height:12px;background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-top-left-radius:3px}
.notif-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 11px}
.notif-pop-title{font-family:"Poppins","Archivo",sans-serif;font-size:15.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.notif-pop-count{background:#e5484d;color:#fff;font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:9px;line-height:18px;text-align:center;box-sizing:border-box}
.notif-pop-readall{border:none;background:none;cursor:pointer;color:var(--accent);font-size:12px;font-weight:600;padding:4px 2px;white-space:nowrap}
.notif-pop-list{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.notif-item{display:flex;gap:11px;width:100%;text-align:left;padding:11px 16px;border:none;border-top:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;box-sizing:border-box}
.notif-item.unread{background:rgba(139,123,255,.07)}
.notif-pop .notif-ic{width:38px;height:38px;background:var(--accent-soft);font-size:17px}
.notif-item.done .notif-ic{color:#2f9e6e}
.notif-item.failed .notif-ic{color:#e5484d}
.notif-body{flex:1;min-width:0}
.notif-pop .notif-title{font-size:13.5px;font-weight:600;color:var(--ink)}
.notif-item.unread .notif-title{font-weight:700}
.notif-text{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;padding-top:1px}
.notif-time{font-size:11px;color:var(--ink-3);white-space:nowrap}
.notif-pop .notif-dot{background:var(--accent);width:8px;height:8px;margin:0}
.notif-pop-empty{padding:6px 16px 14px;color:var(--ink-2);font-size:13.5px;line-height:1.45}
.notif-pop-foot{border-top:1px solid var(--line)}
.notif-pop-foot button{width:100%;border:none;background:none;cursor:pointer;padding:12px 16px;color:var(--accent);font-size:13.5px;font-weight:600;font-family:"Poppins","Archivo",sans-serif}
@media (min-width:1024px){ .notif-pop{inset-inline-end:20px} }

/* ===== Reestructuración UI — Fase 4: conexión, buscadores, exportar ===== */
#net-banner{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#7a4b12;color:#ffe9bd;font-size:13.5px;font-weight:600}
#net-banner button{margin-left:auto;background:none;border:1px solid #ffe9bd;color:#ffe9bd;border-radius:999px;padding:5px 14px;font:inherit;font-size:13px;cursor:pointer}
/* interfaz2c: .lib-search eliminada — la biblioteca de
   Plantillas ya no tiene buscador (orden del dueño). */

/* ===== Toque dorado en Créditos (v=64) =====
   Concepto del manual de Siamel adaptado al diseño actual: la
   moneda de oro y las letras doradas donde hay dinero — saldo,
   paquetes e historial — y el precio dentro del botón degradado. */
.tl-balance-card{flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 12px 10px}
.tl-bal-main{display:flex;align-items:center;gap:10px}
.coin-ico{font-size:34px;line-height:1;filter:drop-shadow(0 4px 10px rgba(245,158,11,.5))}
.tl-balance-card .balance-chip{display:inline-flex;background:none;border:none;padding:0}
.tl-balance-card .balance-chip b{font-size:27px;font-weight:800;background:linear-gradient(180deg,#FFE29A,#FFC53D 60%,#F59E0B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FFC53D}
.tl-bal-usd{font-size:13px;color:var(--ink-2);font-weight:600}
.tl-buy-btn{width:100%;margin-top:2px}
.pk-coin{font-size:32px;line-height:1;flex:none;filter:drop-shadow(0 3px 8px rgba(245,158,11,.45))}
.tl-pack .pk-info{flex:1;min-width:0}
.tl-pack .p-credits{color:#FFC53D;font-size:19px}
.tl-pack .p-bonus{color:#FFC53D}
.tl-pack .pk-buy{background:var(--grad);color:#fff;border:none;border-radius:999px;padding:12px 18px;font:inherit;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap;margin-left:auto;flex:none}
.tl-pack.popular{border-color:rgba(255,197,61,.55);box-shadow:0 6px 22px rgba(245,158,11,.14)}
.pack .pk-coin{font-size:38px;display:block;margin-bottom:6px}
.pack .p-credits{color:#FFC53D}
.pack.popular{border-color:rgba(255,197,61,.55);box-shadow:0 10px 30px rgba(245,158,11,.15)}
.hist-amt.pos{color:#FFC53D}
.welcome-screen{position:fixed;inset:0;z-index:210;background:rgba(4,6,16,.74);display:none;align-items:center;justify-content:center;padding:20px}
.welcome-screen.open{display:flex}
.welcome-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:30px 24px 24px;max-width:400px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.welcome-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:6px}
.welcome-badge{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--grad);color:#fff;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center}
.welcome-title{margin:0 0 8px;font-size:24px}
.welcome-body{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.5}
.welcome-cta{width:100%;margin-bottom:10px}
.welcome-explore{width:100%}

/* Hero más limpio en teléfono (Siamel, 2026-10-27): sobre el
   carrusel sobran el subtítulo («Describe tu idea…») y la frase
   manuscrita («Tus ideas, en movimiento»); en escritorio se quedan. */
@media (max-width: 1023px) {
  .hero-content p { display: none; }
  .hero-note { display: none; }
}

/* ===== Apertura suave de pantallas + selector de idioma propio (v=65) =====
   Las pantallas (.screen y los visores) entraban de golpe al abrirse;
   ahora entran con un fundido corto y una subida mínima. El selector
   de idioma nativo se reemplaza por una lista propia compacta: se
   abre hacia arriba (la fila vive al final del perfil), con altura
   máxima y desplazamiento interno, sin saltos de la pantalla. */
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.screen.open, .tpl-viewer.open, .ex-viewer.open, .welcome-screen.open { animation: screen-in 0.26s ease; }
@media (prefers-reduced-motion: reduce) {
  .screen.open, .tpl-viewer.open, .ex-viewer.open, .welcome-screen.open { animation: none; }
}
.lang-select { display: none; }
.lang-dd { position: relative; }
.lang-dd-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 148px; justify-content: space-between; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.lang-dd-car { flex: 0 0 auto; opacity: 0.7; }
.lang-dd-list { position: absolute; right: 0; top: calc(100% + 6px); width: 238px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); padding: 6px; z-index: 80; }
.lang-dd-list.up { top: auto; bottom: calc(100% + 6px); }
/* La tarjeta Tema/Idioma (.pf-card) recorta con overflow:hidden: sin
   esta regla la lista de idiomas abierta queda cortada a la franja
   que cabe dentro de la tarjeta (fallo visto en escritorio y móvil,
   2026-10-27). Con la lista abierta la tarjeta no recorta.
   fixes73: la tarjeta vive ahora en «Ajustes» (.st-card, también
   .pf-card); la regla cubre ambas clases. */
.pf-card:has(.lang-dd-list:not([hidden])), .st-card:has(.lang-dd-list:not([hidden])) { overflow: visible; }
.lang-dd-list::-webkit-scrollbar { width: 8px; }
.lang-dd-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.lang-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.lang-dd-flag { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.lang-dd-check { margin-left: auto; }
.lang-dd-item:hover { background: var(--accent-soft); }
.lang-dd-item[aria-selected="true"] { color: #FFC53D; font-weight: 700; }
.lang-dd-check { color: #FFC53D; font-weight: 800; }

/* ===== Escritorio (≥1024px): aprovechar la pantalla ancha =====
   Hasta aquí la app es móvil primero: en computadora el contenido
   quedaba en una columna de 430px. En pantallas anchas el contenido
   se expande, las cuadrículas respiran y las pantallas internas se
   ensanchan; los formularios quedan centrados con ancho cómodo.
   html.force-mobile la pone un script del <head> cuando la pantalla
   física es de teléfono aunque el navegador pida «sitio de
   escritorio»: en ese caso NUNCA se aplica el diseño ancho. */
@media (min-width: 1024px) {
  html:not(.force-mobile) .wrap { max-width: 1000px; padding: 0 28px 120px; }
  html:not(.force-mobile) .tabbar { width: 600px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 20px 20px 0 0; }
  html:not(.force-mobile) .tpl-screen-inner { max-width: 920px; }
  /* Escritorio (fixes79 + fixes79b, diseño final del propietario):
     la zona de cuenta/navegación deja de abrir a pantalla completa
     y abre como UNA barra lateral por lado sobre la pantalla
     principal. «Mi cuenta» (y «Avisos», de la misma familia) es la
     barra derecha de 400px con su propio scroll y su cabecera de
     siempre. Al elegir una opción, NO se abre ninguna barra paralela
     al lado: «Editar perfil», «Ajustes» y Herramientas cuando llega
     desde la cuenta (.as-panel, lo pone app.js solo en ese flujo)
     reemplazan al menú DENTRO de la misma barra, ancladas al mismo
     borde derecho (right:0) y ensanchadas a 480px para que el
     contenido de la carpeta se vea completo, creciendo hacia la
     izquierda desde ese borde; atrás restaura el menú en la misma
     barra. El orden de apilado se fija aquí porque en el DOM
     Herramientas va antes que la cuenta: cuenta 80 < contenido 81 <
     Herramientas-panel 82 < Avisos 83, siempre por debajo de
     visores y del cajón lateral. El cajón (☰) ya era una barra
     izquierda: en escritorio queda a 340px. Todo vive tras la
     puerta de escritorio: el móvil no cambia. */
  html:not(.force-mobile) .drawer { width: 340px; }
  html:not(.force-mobile) #profile-screen,
  html:not(.force-mobile) #notif-screen { left: auto; width: 400px; border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(0,0,0,.45); }
  html:not(.force-mobile) #profile-edit-screen,
  html:not(.force-mobile) #settings-screen,
  html:not(.force-mobile) #tools-screen.as-panel { left: auto; right: 0; width: 480px; border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(0,0,0,.45); }
  html:not(.force-mobile) #profile-screen { z-index: 80; }
  html:not(.force-mobile) #profile-edit-screen,
  html:not(.force-mobile) #settings-screen { z-index: 81; }
  html:not(.force-mobile) #tools-screen.as-panel { z-index: 82; }
  html:not(.force-mobile) #notif-screen { z-index: 83; }
  html:not(.force-mobile) #profile-screen .tpl-screen-inner,
  html:not(.force-mobile) #profile-edit-screen .tpl-screen-inner,
  html:not(.force-mobile) #settings-screen .tpl-screen-inner,
  html:not(.force-mobile) #notif-screen .tpl-screen-inner,
  html:not(.force-mobile) #tools-screen.as-panel .tpl-screen-inner { max-width: none; }
  html:not(.force-mobile) .pricing-grid { grid-template-columns: repeat(4, 1fr); max-width: 1000px; }
  html:not(.force-mobile) .hub-grid { max-width: 680px; margin-left: auto; margin-right: auto; }
  html:not(.force-mobile) .t2v-body { max-width: 680px; margin: 0 auto; }
  html:not(.force-mobile) .sty-grid { gap: 12px; }
  html:not(.force-mobile) .tpl-grid { gap: 12px; }
  /* Escritorio compacto (v=65, pedido del propietario): en la
     computadora las plantillas populares y las carpetas de estilos se
     veían enormes (la base flexible de las plantillas era un % del
     ancho total). Tamaños fijos y rejilla del inicio acotada. */
  html:not(.force-mobile) .tpl-row .tpl-card { flex-basis: 178px; }
  html:not(.force-mobile) .home-sec .sty-grid--home { max-width: 860px; margin-left: auto; margin-right: auto; }
  /* fixes92 (hero descentrado en escritorio, reporte del dueño):
     con la altura fija de 420px y el aspect-ratio 16/9 de la base,
     el navegador deriva el ANCHO desde la proporción (420×16/9 =
     746,7px) en vez de llenar la columna, y la tarjeta quedaba
     pegada a la izquierda (medido en el rig: hueco izq. 168px,
     der. 365px a 1280px). Márgenes automáticos: la tarjeta sigue
     16:9 exacta y queda centrada (huecos iguales). En móvil y
     tableta no hay altura fija y la tarjeta llena la columna:
     esta regla no los toca. */
  html:not(.force-mobile) .hero-card { height: 420px; margin-left: auto; margin-right: auto; }
  /* fixes93 (densidad de escritorio aprobada por el dueño, variante
     1 de la maqueta de carpetas): las 6 carpetas de «Estilos de
     video» ocupan un bloque compacto 3×2 (~344px de alto total a
     1440×900) en vez del bloque alto actual (~647px). La imagen y
     el video en miniatura comparten la nueva proporción ancha
     (1,92) SOLO en escritorio; en teléfono y tableta la tarjeta
     sigue 0,94 intacta. Los focos de escritorio se miden sobre la
     banda visible (~29 % del alto): Cinemático centra las caras
     de la pareja (14%), Anime la cabeza y el torso del niño (31%)
     y Arte los ojos y el globo de la chica del chicle (20%); las
     demás portadas quedan centradas (el teléfono de Realista, el
     casco del astronauta y los elefantes ya caen en la banda
     central). */
  html:not(.force-mobile) .sty-grid--home .sty-card img,
  html:not(.force-mobile) .sty-grid--home .sty-card video.sty-vid { aspect-ratio: 1.92; }
  html:not(.force-mobile) .sty-grid--home .sty-card[data-style="cinematico"] img,
  html:not(.force-mobile) .sty-grid--home .sty-card[data-style="cinematico"] video.sty-vid { object-position: 50% 14%; }
  html:not(.force-mobile) .sty-grid--home .sty-card[data-style="anime"] img,
  html:not(.force-mobile) .sty-grid--home .sty-card[data-style="anime"] video.sty-vid { object-position: 50% 31%; }
  html:not(.force-mobile) .sty-grid--home .sty-card[data-style="arte"] img,
  html:not(.force-mobile) .sty-grid--home .sty-card[data-style="arte"] video.sty-vid { object-position: 50% 20%; }
  /* fixes93 (variante 2 aprobada de la maqueta de videos): dentro
     de una carpeta de estilo, la cuadrícula de videos va a 4
     columnas en escritorio (8 por pantalla en filas de 4×2,
     tarjetas 9:16 intactas). La marca .ss-entries la pone app.js
     solo al pintar los videos de una carpeta; la vista de carpetas
     de la familia conserva sus 2 columnas. */
  html:not(.force-mobile) #ss-style-list.ss-entries { grid-template-columns: repeat(4, 1fr); }
  /* fixes92: en escritorio la píldora de créditos muestra la
     palabra y su texto crece un poco (número/palabra 11→13px,
     promo 9→10px), igual que en tableta */
  html:not(.force-mobile) .app-header .balance-chip .balance-word { display: inline; margin-left: 4px; }
  html:not(.force-mobile) .app-header .balance-chip b { font-size: 13px; }
  html:not(.force-mobile) .app-header .balance-chip .balance-promo { font-size: 10px; }
}

/* ===== fixes101 (dueño, revisión de escritorio 2026-10-28) =====
   Paquete de escritorio: (a) legibilidad global — el texto crece
   y el texto apagado se aclara (solo tema oscuro: en claro los
   grises ya se leen); (b) las imágenes de Plantillas y Estilos
   centradas con focos como en el teléfono, sin caras cortadas;
   (c) encajes de una pantalla: Estilos (6 familias) en el
   escritorio, carpetas de Plantillas de dos en dos y 8
   plantillas por pantalla dentro de cada carpeta; (d) el menú
   «Crear video» en horizontal (de dos en dos) y más grande;
   (e) la app y el carrusel un poco más grandes. El teléfono y la
   tableta no cambian: todo vive tras la puerta de escritorio. */
@media (min-width: 1024px) {
  html:not(.force-mobile) {
    --ink-2: #ccd2f5;
    --ink-3: #9aa3cf;
  }
  html:not(.force-mobile) .wrap { max-width: 1140px; }
  html:not(.force-mobile) .tpl-screen-inner { max-width: 1060px; }
  html:not(.force-mobile) .hero-card { height: 470px; }
  /* Saludo y textos del inicio — fixes117 (orden del dueño):
     el saludo vuelve a su tamaño ORIGINAL. Los overrides de
     fixes101 (título 42px, subtítulo 17.5px) se retiran: el
     saludo queda con la proporción previa a esa capa (título
     24px / subtítulo 13.5px de la hoja base, la de siempre en
     el teléfono) también en escritorio. */
  /* Franja «Invita y gana» más fina SOLO en escritorio
     (fixes117, orden del dueño): menos relleno vertical y
     letra un punto menor; en móvil/tableta queda como está. */
  html:not(.force-mobile) .invite-strip { padding-top: 5px; padding-bottom: 5px; margin-top: 6px; }
  html:not(.force-mobile) .invite-strip .gift-ico { width: 19px; height: 19px; }
  html:not(.force-mobile) .invite-strip-text { font-size: 13.5px; line-height: 1.2; }
  html:not(.force-mobile) .invite-strip-btn { font-size: 13.5px; line-height: 1.2; padding-top: 0; padding-bottom: 0; }
  html:not(.force-mobile) .hero-chip { font-size: 16.5px; font-weight: 700; padding: 8px 16px; text-shadow: 0 1px 8px rgba(3, 5, 20, .6); }
  html:not(.force-mobile) .hero-chip .spark { font-size: 16px; }
  /* Modos del inicio (Texto a video, Imagen a video…) */
  html:not(.force-mobile) .act-card .act-title { font-size: 15px; }
  html:not(.force-mobile) .act-card .act-desc { font-size: 12.5px; }
  html:not(.force-mobile) .act-card .act-ic svg { width: 26px; height: 26px; }
  /* Nombres de plantillas y de estilos */
  html:not(.force-mobile) .tpl-meta .tpl-name,
  html:not(.force-mobile) .tpl-row .tpl-card .tpl-name { font-size: 13.5px; }
  html:not(.force-mobile) .sty-card .sty-name { font-size: 14.5px; }
  /* «Mis videos» del inicio: textos más grandes y claros */
  html:not(.force-mobile) #step-gallery .hint { font-size: 15.5px; color: var(--ink); }
  html:not(.force-mobile) #step-gallery .empty-gallery { font-size: 15.5px; color: var(--ink); }
  /* Menú inferior: letra e iconos más grandes, color más blanco */
  html:not(.force-mobile) .tabbar { width: 680px; }
  html:not(.force-mobile) .tab { font-size: 12.5px; color: #c9cef2; min-width: 68px; }
  html:not(.force-mobile) .tab svg { width: 26px; height: 26px; }
  html:not(.force-mobile) .tab.active { color: #ffffff; }
  /* Marca «Video AI» un poco más grande (recomendación aceptada) */
  html:not(.force-mobile) .drawer-head .logo-word { font-size: 23px; }
  /* Imágenes centradas como en el teléfono (foco alto: las caras
     quedan dentro del encuadre en Plantillas) */
  html:not(.force-mobile) .tpl-row .tpl-card img,
  html:not(.force-mobile) .tplx-card img { object-position: 50% 20%; }
  /* fixes117 (I-04): la foto de carpeta sale de esta regla —
     con la tarjeta 9/16 ya no hay recorte que enfocar. */
  /* Estilos: las 6 familias en UNA pantalla de escritorio (3×2
     compacto, misma proporción y focos que el inicio) */
  html:not(.force-mobile) .tpl-screen .sty-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  html:not(.force-mobile) .tpl-screen .sty-card img,
  html:not(.force-mobile) .tpl-screen .sty-card video.sty-vid { aspect-ratio: 1.92; }
  html:not(.force-mobile) .tpl-screen .sty-card[data-style="cinematico"] img,
  html:not(.force-mobile) .tpl-screen .sty-card[data-style="cinematico"] video.sty-vid { object-position: 50% 14%; }
  html:not(.force-mobile) .tpl-screen .sty-card[data-style="anime"] img,
  html:not(.force-mobile) .tpl-screen .sty-card[data-style="anime"] video.sty-vid { object-position: 50% 31%; }
  html:not(.force-mobile) .tpl-screen .sty-card[data-style="arte"] img,
  html:not(.force-mobile) .tpl-screen .sty-card[data-style="arte"] video.sty-vid { object-position: 50% 20%; }
  /* fixes104 escritorio: focos de las portadas nuevas de la
     pantalla «Estilos de video», los mismos del inicio. */
  html:not(.force-mobile) .sty-gcard--fam[data-fam="cine"] img { object-position: 50% 14%; }
  html:not(.force-mobile) .sty-gcard--fam[data-fam="anime"] img { object-position: 50% 31%; }
  /* Plantillas: fixes117 (I-04, spec pre-aprobada) — las
     carpetas van VERTICALES 9/16 también en escritorio, en
     3 columnas × 2 filas (la pantalla desplaza: es el precio
     de ver las portadas completas). Fuera la tarjeta
     panorámica 2.6/1 de fixes101. */
  html:not(.force-mobile) #folder-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  html:not(.force-mobile) #folder-grid .folder-card { aspect-ratio: 9 / 16; }
  /* Dentro de cada carpeta de plantillas: 8 por pantalla (4×2).
     La tarjeta base es 9/16 (muy alta: la segunda fila quedaba
     cortada por el borde de la pantalla); en escritorio se
     recorta a 0,78 con el foco alto ya fijado arriba, y las dos
     filas caben enteras en la pantalla. */
  html:not(.force-mobile) .tplx-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  html:not(.force-mobile) .tplx-card { aspect-ratio: 0.78; }
  /* Menú «Crear video» (hub): horizontal de dos en dos, tarjetas
     más grandes, iconos y letra mayores */
  html:not(.force-mobile) .hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 940px; }
  html:not(.force-mobile) .hub-card { padding: 20px 20px; gap: 16px; }
  html:not(.force-mobile) .hub-card .act-ic svg { width: 30px; height: 30px; }
  html:not(.force-mobile) .hub-card .act-title { font-size: 18px; }
  html:not(.force-mobile) .hub-card .act-desc { font-size: 14.5px; }
}

/* ===== Tabletas (600–1023px): banda intermedia (fixes80) =====
   Hasta aquí la tableta en vertical heredaba el diseño de
   teléfono apretado en la columna de 430px, con bandas oscuras
   a los lados (medido en un iPad de 820px: .wrap de 430px). En
   esta banda la columna de la app se ensancha a 680px centrada
   y las cuadrículas respiran. La banda NO lleva la puerta
   html:not(.force-mobile): las tabletas la reciben pidan lo que
   pidan, y no toca ni el teléfono (<600px, base intacta) ni el
   escritorio (≥1024px, su capa va aparte y no se solapa). La
   cabecera va dentro de .wrap, así que abarca la misma columna
   sin regla propia. El cajón (☰) ya escalaba con min(320px,
   86vw): aquí crece un poco, hasta los 340px del escritorio. */
@media (min-width: 1024px) {
  /* fixes102 escritorio: los 4 planes en fila (diseño de Siamel) */
  html:not(.force-mobile) .pricing-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1140px; }
  /* fixes111 escritorio: la misma compactación que en el móvil
     (fixes104 dejó el diseño; aquí solo bajan tamaños para que
     la vista entera quepa en una pantalla de 800px de alto). */
  html:not(.force-mobile) .pack2 { padding: 16px 14px 14px; }
  html:not(.force-mobile) .pack2 .pk-art { height: 104px; margin-bottom: 4px; }
  html:not(.force-mobile) .pack2 .pk-total { font-size: 16.5px; }
  html:not(.force-mobile) .pack2 .pk-total b { font-size: 30px; }
  html:not(.force-mobile) .pack2 .pk-break { font-size: 12.5px; padding: 6px 4px; }
  html:not(.force-mobile) .pack2 .pk-price { font-size: 23px; }
  html:not(.force-mobile) .pack2 .pk-buy2 { font-size: 15px; padding: 10px 0; }
  html:not(.force-mobile) .pk-cta { display: none; }
  /* fixes103 escritorio: la corona del plan «Más popular» grande y
     dorada — a 10px (heredados de la píldora móvil) ni se distinguía
     en la pantalla grande, reclamó Siamel. */
  html:not(.force-mobile) .pack2 .ribbon { font-size: 13.5px; padding: 7px 18px; top: -16px; }
  html:not(.force-mobile) .pack2 .ribbon .crown { font-size: 21px; line-height: 1; vertical-align: 0px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
  html:not(.force-mobile) .pk-feats { max-width: 1140px; margin-left: auto; margin-right: auto; }
  html:not(.force-mobile) .pk-note { max-width: 1140px; margin-left: auto; margin-right: auto; text-align: center; }
}

/* ============================================================
   fixes111: franja del PAQUETE DE PRUEBA sobre las tarjetas
   (diseño aprobado por Siamel con maqueta el 2026-10-29):
   borde dorado punteado, la moneda, «150 créditos» con el
   número en dorado grande, la insignia «SOLO UNA VEZ» con el
   degradado del listón, el precio y su propio botón Comprar con
   el estilo de las tarjetas. Se pinta en el menú de créditos
   (#trial-slot) y en Mis créditos (#tl-trial-slot) con el mismo
   render; desaparece para siempre cuando la cuenta ya compró
   la prueba. */
#trial-slot { max-width: 880px; margin: 0 auto; width: 100%; }
/* (Ajuste de Siamel, 2026-10-29: la franja se veía demasiado
   grande en el móvil — misma maqueta y mismos textos, un
   20–25 % más baja: menos aire vertical, moneda menor y los
   textos un punto más chicos, todo legible.) */
.trial-banner { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border: 1.5px dashed rgba(255, 210, 63, .6); border-radius: 14px; background: linear-gradient(180deg, #141a48, #0c1030); padding: 5px 12px; margin-bottom: 7px; }
.trial-banner .tb-coin { width: 36px; height: 36px; object-fit: contain; flex: none; }
.trial-banner .tb-main { flex: 1 1 180px; min-width: 0; }
.trial-banner .tb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trial-banner .tb-title { font-weight: 800; font-size: 13px; color: var(--ink); }
.trial-banner .tb-badge { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
/* fixes117 (orden del dueño): en la franja de prueba, como en
   los paquetes, solo el NÚMERO va en dorado y la palabra
   «créditos» va en BLANCO (el tramo .tb-word). Hasta fixes116
   iba todo en dorado. */
.trial-banner .tb-credits { color: #ffffff; -webkit-text-fill-color: #ffffff; font-size: 12.5px; font-weight: 600; margin-top: 1px; }
.trial-banner .tb-credits .tb-word { color: #ffffff; -webkit-text-fill-color: #ffffff; }
.trial-banner .tb-credits b { font-size: 16px; font-weight: 800; color: #ffc233; -webkit-text-fill-color: #ffc233; }
.trial-banner .tb-micro { color: var(--ink-2); font-size: 11px; margin-top: 1px; line-height: 1.15; }
.trial-banner .tb-right { display: flex; align-items: center; gap: 11px; margin-left: auto; }
.trial-banner .tb-price { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.trial-banner .tb-price small { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.trial-banner .tb-buy { width: auto; margin-top: 0; padding: 6px 18px; font-size: 13.5px; border: none; border-radius: 11px; background: linear-gradient(90deg, #8b3dff, #3d8bff); color: #fff; font-weight: 800; cursor: pointer; }
/* fixes111: la pista bajo las tarjetas del menú, un punto más
   pequeña y pegada a la rejilla (parte de la compactación). */
#packs-hint { font-size: 12.5px; margin: 6px 0 0; }
/* fixes111: la cabecera de la sección de precios, más pegada a
   la franja, y la tarjeta de saldo de Mis créditos más baja
   (mismo diseño; solo la compactación pedida). */
#pricing .sec-head { margin-bottom: 8px; }
.tl-balance-card .tl-bal-sub { font-size: 12.5px; line-height: 1.35; }
.tl-balance-card .coin-ico { font-size: 0; line-height: 0; }
.tl-balance-card .coin-ico img { width: 40px; height: 31px; }
.tl-balance-card .balance-chip b { font-size: 25px; }
.tl-balance-card .tl-buy-btn { padding-top: 9px; padding-bottom: 9px; font-size: 15px; }
.tl-balance-card .tool-desc { line-height: 1.25; }
@media (min-width: 1024px) {
  html:not(.force-mobile) #trial-slot { max-width: 1140px; }
  html:not(.force-mobile) .trial-banner { padding: 12px 20px; margin-bottom: 12px; }
  html:not(.force-mobile) .trial-banner .tb-coin { width: 48px; height: 48px; }
  html:not(.force-mobile) .trial-banner .tb-title { font-size: 16px; }
  html:not(.force-mobile) .trial-banner .tb-credits { font-size: 14px; }
  html:not(.force-mobile) .trial-banner .tb-credits b { font-size: 22px; }
  html:not(.force-mobile) .trial-banner .tb-price { font-size: 21px; }
  html:not(.force-mobile) .trial-banner .tb-micro { font-size: 12.5px; }
  html:not(.force-mobile) .trial-banner .tb-buy { padding: 9px 22px; font-size: 14px; }
  /* fixes111: en escritorio, «Mis créditos» a pantalla completa
     (no el panel lateral de la cuenta, que conserva su propio
     scroll) pinta las 4 tarjetas en una fila, como el menú, para
     que saldo + franja + tarjetas quepan en una pantalla. */
  html:not(.force-mobile) #tools-screen:not(.as-panel) #tl-packs { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   fixes112: BONO PERMANENTE + DESCUENTO DE LANZAMIENTO −50%
   (maqueta v2 aprobada por Siamel el 2026-10-29) + legibilidad
   de la tarjeta de saldo de «Mis créditos» y cabecera móvil sin
   título muerto en la vista de créditos.
   · La píldora de lanzamiento ocupa el lugar del título
     «Elige tus créditos.» (eliminado, con su subtítulo): fondo
     oscuro, borde y texto dorados. Sin cuenta regresiva y sin
     ningún cambio automático de precios.
   · Cada tarjeta muestra sobre el precio real su precio de
     LISTA tachado (el doble exacto, SOLO exhibición: el precio
     real y el cargo no cambian) con el chip dorado «−50%».
   · Saldo: rótulo más grande y grueso, la CIFRA más grande y en
     BLANCO sólido (esta tarjeta deja el degradado dorado; las
     tarjetas de paquetes lo conservan), el equivalente en USD
     y la descripción más grandes, y la píldora de desglose de
     los paquetes más legible. En el móvil NADA se sale de la
     tarjeta de saldo: la fila del saldo puede envolver y el
     «+N promo» baja dentro de la tarjeta. */
#pricing .sec-head > div { width: 100%; text-align: center; }
/* fixes116: la cabecera de créditos estrena el BANNER de
   lanzamiento del diseño de referencia elegido por Siamel:
   fondo degradado violeta oscuro, borde morado con brillo,
   cohete 3D a la izquierda, divisor vertical fino y el texto
   en dos líneas (título en mayúsculas por CSS y subtítulo con
   el «100» dentro de un chip dorado). Sustituye por completo
   a la píldora anterior: no queda resto de ella. */
.launch-banner {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 100%; box-sizing: border-box;
  margin: 0 auto; padding: 12px 16px; text-align: left;
  background: linear-gradient(100deg, #16102e 0%, #251a5e 100%);
  border: 2px solid #7c5cff; border-radius: 18px;
  box-shadow: 0 0 18px rgba(124, 92, 255, .45),
    inset 0 0 22px rgba(124, 92, 255, .16),
    0 8px 22px rgba(0, 0, 0, .35);
}
.launch-banner .lb-rocket {
  flex: 0 0 auto; height: 56px; width: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.launch-banner .lb-div {
  flex: 0 0 auto; align-self: stretch; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196, 181, 253, .55), transparent);
}
.launch-banner .lb-text { min-width: 0; }
.launch-banner .lb-title {
  color: #ffffff; font-size: 15px; font-weight: 800;
  letter-spacing: .04em; line-height: 1.15; text-transform: uppercase;
}
.launch-banner .lb-title[hidden] { display: none; }
.launch-banner .lb-sub {
  color: #ffffff; font-size: 13px; font-weight: 600;
  line-height: 1.3; margin-top: 3px;
}
.launch-banner .lb-chip {
  display: inline-block; padding: 1px 8px; margin: 0 2px;
  background: linear-gradient(90deg, #ffb02e, #ff9500);
  color: #231600; font-weight: 800; border-radius: 8px;
}
/* fixes117: en «Mis créditos» el banner respira sobre la
   tarjeta de saldo (en el inicio vive en la cabecera de la
   sección, que ya trae su aire). */
#tl-credits-view .launch-banner { margin-top: 12px; }
@media (min-width: 1024px) {
  .launch-banner { gap: 18px; padding: 14px 22px; }
  .launch-banner .lb-rocket { height: 64px; }
  .launch-banner .lb-title { font-size: 19px; }
  .launch-banner .lb-sub { font-size: 15px; }
  /* fixes117 (orden del dueño): en ESCRITORIO el contenido
     del banner — cohete, divisor y texto COMO GRUPO — va
     CENTRADO horizontalmente. En móvil y tableta el banner
     queda exactamente como está (alineado a la izquierda):
     esta regla vive solo en esta media de escritorio y tras
     la puerta html:not(.force-mobile). Vale para los dos
     banners (inicio y Mis créditos). */
  html:not(.force-mobile) .launch-banner { justify-content: center; }
}
.pack2 .pk-was-row {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: auto; padding-top: 10px; line-height: 1;
}
.pack2 .pk-was {
  color: #8a90b8; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 122, 122, .9);
}
.pack2 .pk-off {
  background: linear-gradient(90deg, #ffc233, #ff9d2e); color: #2a1c00;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; line-height: 1;
  padding: 3.5px 8px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255, 178, 44, .35);
}
.pack2 .pk-price { margin-top: 0; padding-top: 6px; }
@media (min-width: 1024px) {
  .pack2 .pk-was { font-size: 15.5px; }
  .pack2 .pk-off { font-size: 12px; padding: 4px 10px; }
}
/* La píldora de desglose («600 + [regalo] 100 de regalo»), más
   grande y más visible (orden del dueño: costaba leerla). */
.pack2 .pk-break { font-size: 12.5px; }
.pack2 .pk-break .pk-gift-word { color: #c6cbec; }
@media (min-width: 1024px) {
  html:not(.force-mobile) .pack2 .pk-break { font-size: 13.5px; }
}
/* Tarjeta de saldo: legibilidad + contención total. */
.tl-balance-card { overflow: hidden; }
.tl-balance-card .tl-bal-label { font-size: 15px; font-weight: 700; }
.tl-balance-card .balance-chip b {
  font-size: 30px; font-weight: 800;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #fff; color: #fff;
}
.tl-bal-main { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.tl-balance-card .balance-chip { flex: 1 1 auto; max-width: 100%; }
.tl-balance-card .tl-bal-usd { font-size: 15px; font-weight: 700; max-width: 100%; }
.tl-balance-card .tool-desc { font-size: 14px; line-height: 1.35; max-width: 100%; }
@media (min-width: 1024px) {
  html:not(.force-mobile) .tl-balance-card .tl-bal-label { font-size: 16px; }
  html:not(.force-mobile) .tl-balance-card .balance-chip b { font-size: 34px; }
  html:not(.force-mobile) .tl-balance-card .tl-bal-usd { font-size: 16px; }
  html:not(.force-mobile) .tl-balance-card .tool-desc { font-size: 15px; }
}
/* Móvil: la vista de créditos de Herramientas sin título muerto
   (la clase tl-on-credits la pone toolsView) y la fila de
   cabecera compacta a 48px; atrás/cerrar intactos. */
@media (max-width: 1023px) {
  #tools-screen.tl-on-credits .ts-head-text { display: none; }
  #tools-screen.tl-on-credits .tpl-screen-head { padding-top: 5px; padding-bottom: 5px; }
  /* Compactación móvil de lo nuevo (mismo criterio que la
     franja de fixes111: mismo diseño y mismos textos, un poco
     más bajo) para que saldo + franja + tarjetas sigan
     cabiendo en una pantalla de 844px: la tarjeta de saldo se
     pega más a la cabecera, su cifra envuelve el «+N promo» a
     una segunda línea DENTRO de la tarjeta en vez de salirse,
     la fila del descuento respira menos y las tarjetas de Mis
     créditos pierden unos px de aire. */
  #tools-screen.tl-on-credits .tl-balance-card { margin-top: 8px; }
  .pack2 .pk-was-row { padding-top: 6px; gap: 6px; }
  .pack2 .pk-was { font-size: 12.5px; }
  .pack2 .pk-off { font-size: 10px; padding: 3px 7px; }
  /* fixes118 (auditoría de alineación): el hueco entre filas
     de #tl-packs no puede ser menor que lo que la cinta «EL MÁS
     POPULAR» sobresale de su tarjeta (10px en móvil/tableta):
     con 6px la cinta solapaba 4px la tarjeta de arriba. 12px
     deja la cinta libre con 2px de aire. */
  #tools-screen #tl-packs { gap: 12px 12px; }
  #tl-packs .pack2 { padding-top: 8px; padding-bottom: 6px; }
  #tl-packs .pack2 .pk-art { height: 40px; margin-bottom: 0; }
  #tl-packs .pack2 .pk-break { padding-top: 3px; padding-bottom: 3px; }
  #tl-packs .pack2 .pk-price { padding-top: 4px; }
  #tl-packs .pk-buy2 { padding-top: 6px; padding-bottom: 6px; }
  #tl-trial-slot .trial-banner { margin-bottom: 3px; padding-top: 4px; padding-bottom: 4px; }
  #tools-screen.tl-on-credits .ts-hint { margin-top: 2px; }
  .tl-balance-card { padding-top: 10px; padding-bottom: 10px; gap: 2px; }
  .tl-balance-card .tl-buy-btn { margin-top: 0; }
  .tl-balance-card .tl-bal-label { line-height: 1.25; }
  .tl-balance-card .tl-bal-usd { line-height: 1.25; }
  .tl-balance-card .tool-desc { font-size: 13.5px; line-height: 1.25; }
  .tl-balance-card .tl-buy-btn { padding-top: 7px; padding-bottom: 7px; }
}
@media (max-width: 599px) {
  /* En el teléfono la cifra del saldo va a 28px (sigue siendo
     más grande que los 25px de fixes111, y en blanco): es lo
     que deja que el «+N promo» envuelva dentro de la tarjeta
     sin empujar nada fuera ni comerse la pantalla. */
  .tl-balance-card .balance-chip b { font-size: 28px; }
}

/* ===== fixes121, añadidos (2026-10-29, vía rápida) =====
   (a) PIE: la fila de enlaces «Plantillas · Estilos · Precios»
   del pie se ocultó primero SOLO en escritorio (fixes121,
   orden de Siamel con foto: «esos botones no aportan nada, no
   son necesarios»), conservando el HTML porque el teléfono y
   la tableta la seguían mostrando. ENMIENDA 2026-10-30
   (revisión en vivo de fixes123): el dueño la vio en el
   teléfono y ordenó eliminarla en TODAS las versiones — el
   bloque de enlaces salió del HTML por completo, y con él la
   regla de ocultado de escritorio que vivía en este bloque y
   las reglas base de la fila. El pie conserva «© Video AI» y
   la letra pequeña (.f-fine) en todas las superficies.
   (b) RENGLÓN «Mis créditos» del panel de perfil:
   interfaz2d (orden del dueño 2026-10-31 00:39) lo ELIMINÓ
   por completo del menú de cuenta y sus reglas de color por
   tramos se retiraron con él. La regla permanente del dinero
   (números dorados #ffc233, «promo» en el morado #8b7bff y
   «créditos» en blanco) sigue viva en las demás superficies.
   (c) TARJETA «Tu saldo actual» en ESCRITORIO: la cifra
   (#balance) ya se pinta por tramos desde fixes115, pero los
   colores solo vivían en la capa ≤1023px y en escritorio
   mandaba el blanco sólido de fixes112 (regla base). Se
   espeja aquí el mismo reparto para la capa de escritorio,
   sin tocar el tamaño (34px) ni la alineación de la tarjeta;
   el teléfono y la tableta no cambian.
   (d) VARIANTE B de la franja «Comprar créditos» (elección
   de Siamel entre las ilustraciones A/B): el botón
   .tl-buy-btn de la tarjeta pierde la banda degradada
   (fondo, borde y sombra fuera) y queda como TEXTO SIMPLE
   con el color de tinta, en escritorio, tableta y teléfono
   (un solo DOM sirve al menú de créditos y a Mis créditos).
   El botón sigue siendo el mismo elemento accionable: su
   clic sigue llevando a los paquetes. La geometría no se
   toca (mismos padding/alto: la ilustración aprobada solo
   quitaba la banda), así que el alto de la tarjeta no cambia.
   (e) «CON EDITAR PERFIL» (aprobado por Siamel): el
   «Créditos» de Editar perfil (#pf-credits-val), que se
   reportó como hallazgo sin tocar, se pinta también por
   tramos (app.js: paintBalSpans en paintBalance y en
   paintProfile) con los mismos colores de la regla. */
@media (min-width: 1024px) {
  html:not(.force-mobile) .tl-balance-card .balance-chip #balance .bal-num { color: #ffc233; -webkit-text-fill-color: #ffc233; }
  html:not(.force-mobile) .tl-balance-card .balance-chip #balance .bal-promo { color: #8b7bff; -webkit-text-fill-color: #8b7bff; }
  html:not(.force-mobile) .tl-balance-card .balance-chip b > span[data-i18n="credits"] { color: #ffffff; -webkit-text-fill-color: #ffffff; }
}
#pf-credits-val .bal-num { color: #ffc233; }
#pf-credits-val .bal-promo { color: #8b7bff; }
#pf-credits-val .bal-word { color: #fff; }
.tl-balance-card .tl-buy-btn { background: none; border: 0; box-shadow: none; color: var(--ink); }

@media (min-width: 600px) and (max-width: 1023px) {
  .wrap { max-width: 680px; }
  .tabbar { width: min(680px, 100%); }
  /* fixes92: en tableta la píldora de créditos muestra la palabra
     y su texto crece un poco (número/palabra 11→13px, promo 9→10px) */
  .app-header .balance-chip .balance-word { display: inline; margin-left: 4px; }
  .app-header .balance-chip b { font-size: 13px; }
  .app-header .balance-chip .balance-promo { font-size: 10px; }
  .tpl-screen-inner { max-width: 680px; }
  .create-screen-inner { max-width: 680px; }
  .drawer { width: min(340px, 86vw); }
  .act-grid { gap: 12px; }
  .tpl-row .tpl-card { flex-basis: 270px; }
  .home-sec .sty-grid--home { gap: 12px; }
  .folder-grid { grid-template-columns: repeat(3, 1fr); }
  .tplx-grid { grid-template-columns: repeat(3, 1fr); }
  .tpl-screen .sty-grid { grid-template-columns: repeat(3, 1fr); }
}

/* fixes101: aviso flotante breve */
#app-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 400; max-width: min(92vw, 440px);
  background: rgba(16, 20, 34, .97); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 11px 18px; font-size: 15px; font-weight: 600; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* fixes103: Mis créditos usa las mismas tarjetas de paquetes del
   menú de compra, en cuadrícula de 2 columnas; su botón Comprar va
   siempre visible porque esa pantalla no tiene el botón grande
   inferior del menú. Y el icono del saldo deja el emoji por la
   pila de oro. */
#tl-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
#tl-packs .pk-buy2 {
  display: block; width: 100%; margin-top: 7px; border: none;
  background: linear-gradient(90deg, #8b3dff, #3d8bff); color: #fff;
  font-size: 14px; font-weight: 800; padding: 7px 0;
  border-radius: 11px; cursor: pointer;
}
.coin-ico img {
  width: 46px; height: 36px; object-fit: contain;
  vertical-align: -9px;
}

/* ===== fixes115: paquete visual aprobado por Siamel =====
   (1) «Invita y gana» opción D: la frase de invite_desc va en
   una tarjeta tipo píldora de lanzamiento (fondo #0c1030,
   borde dorado de 2px, radio 18px, texto blanco) y el tramo
   «{n} créditos promo» va en dorado negrita (.inv-gold, lo
   parte app.js en paintInviteDesc). Solo la pantalla Invita.
   (2) Tarjeta de saldo compacta SOLO en móvil (maqueta v3
   aprobada): rejilla de ~130px, rótulo más blanco (#eef0ff) y
   el reparto de la cifra — números en dorado #ffc233, la
   palabra «promo» en el morado de la app #8b7bff y la palabra
   «créditos» en blanco. Escritorio intacto. */
#tl-invite-view #invite-desc {
  background: #0c1030;
  border: 2px solid #ffc233;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 6px 0 14px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 0 0 4px rgba(255, 194, 51, .07), 0 10px 24px rgba(0, 0, 0, .35);
}
#tl-invite-view #invite-desc .inv-gold { color: #ffc233; font-weight: 800; }
@media (max-width: 1023px) {
  #tools-screen.tl-on-credits .tl-balance-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "coin label usd"
      "coin main main"
      "desc desc desc"
      "btn btn btn";
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding: 8px 12px;
    text-align: left;
  }
  /* La fila intermedia se disuelve: monedas y cifra pasan a
     ser celdas directas de la rejilla de la tarjeta. */
  #tools-screen.tl-on-credits .tl-bal-main { display: contents; }
  #tools-screen.tl-on-credits .tl-balance-card .coin-ico {
    grid-area: coin;
    align-self: center;
    font-size: 0;
    line-height: 0;
  }
  #tools-screen.tl-on-credits .tl-balance-card .coin-ico img {
    width: 38px;
    height: auto;
  }
  #tools-screen.tl-on-credits .tl-balance-card .tl-bal-label {
    grid-area: label;
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    color: #eef0ff;
  }
  #tools-screen.tl-on-credits .tl-balance-card .tl-bal-usd {
    grid-area: usd;
    justify-self: end;
    font-size: 12.5px;
    line-height: 1.2;
    white-space: nowrap;
  }
  #tools-screen.tl-on-credits .tl-balance-card .balance-chip {
    grid-area: main;
    justify-self: start;
    flex: none;
    max-width: 100%;
  }
  #tools-screen.tl-on-credits .tl-balance-card .balance-chip b {
    font-size: 24px;
    line-height: 1.15;
    white-space: nowrap;
    color: #ffc233;
    -webkit-text-fill-color: #ffc233;
  }
  #tools-screen.tl-on-credits .tl-balance-card .balance-chip b span {
    color: #ffc233;
    -webkit-text-fill-color: #ffc233;
  }
  /* El reparto de la línea de la cifra (tramos de app.js). */
  #tools-screen.tl-on-credits .tl-balance-card .balance-chip #balance .bal-num {
    color: #ffc233;
    -webkit-text-fill-color: #ffc233;
  }
  #tools-screen.tl-on-credits .tl-balance-card .balance-chip #balance .bal-promo {
    color: #8b7bff;
    -webkit-text-fill-color: #8b7bff;
  }
  #tools-screen.tl-on-credits .tl-balance-card .balance-chip b > span[data-i18n="credits"] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
  }
  #tools-screen.tl-on-credits .tl-balance-card .tool-desc {
    grid-area: desc;
    font-size: 11.5px;
    line-height: 1.2;
    text-align: left;
    max-width: 100%;
  }
  #tools-screen.tl-on-credits .tl-balance-card .tl-buy-btn {
    grid-area: btn;
    width: 100%;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    font-size: 14px;
  }
}

/* ===== fixes120 (2026-10-29) — SOLO TELÉFONO (max-width: 599px).
   Orden de Siamel: en su teléfono la cuadrícula de planes se veía
   corrida a la derecha y la celda «Formatos» de la franja
   .pk-feats se desordenaba. Restricción suya: el arreglo vive
   SOLO en la capa de teléfono; tableta y escritorio no se tocan.
   Causa raíz medida (rig): las pistas de .pricing-grid y de
   #tl-packs eran repeat(2, 1fr) / 1fr 1fr, es decir
   minmax(auto, 1fr): el mínimo automático de una pista es el
   min-content de la tarjeta, y quien lo fija es la píldora
   .pk-break (white-space: nowrap; «6,000 + 600 de regalo» pide
   ≈156px, tarjeta mínima de 176.2px). Cuando la pista baja de
   eso (390px → 172px; 360px → 157px; en el Safari de su iPhone
   ya a 402px, por métricas de fuente más anchas) la cuadrícula
   no puede encogerse: desborda hacia la derecha y su unión se
   descentra (+4.2px a 390 y +19.2px a 360 en Chromium; +9pt en
   la captura de Siamel a 402pt).
   Corrección, solo en esta capa: (1) pistas minmax(0, 1fr) —
   la cuadrícula nunca pasa del contenedor y queda centrada por
   construcción; (2) la píldora escala su fuente con el ancho de
   pantalla solo cuando la pista es más angosta que su línea
   (min(12.5px, 2.88vw): a 434px o más manda el tope de 12.5px
   de siempre) para seguir en UNA línea dentro de la pista ya
   fija, con overflow:hidden como red de seguridad.
   Celda «Formatos»: las tres celdas pasan a columna (icono
   arriba, texto debajo, centradas, misma línea de arranque y
   alturas parejas) y app.js (paintFeatFormats) parte el texto
   en rótulo + valores SOLO en esta capa, para que se lea en dos
   líneas ordenadas. Sin cambios de textos ni de datos. */
@media (max-width: 599px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tl-packs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pack2 .pk-break { font-size: min(12.5px, 2.88vw); overflow: hidden; }
  .pk-feat { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 5px; padding: 3px 4px; }
  .pk-feat [data-i18n="feat_formats_s"] { display: block; }
  .pk-feat .pk-feat-label { display: block; }
  .pk-feat .pk-feat-values { display: block; text-wrap: balance; }
  .pk-feat [data-i18n="feat_styles_s"] { text-wrap: balance; }
}

/* ===== fixes121 (2026-10-29) — SOLO TELÉFONO (max-width: 599px),
   vía rápida. Orden de Siamel con captura: en el teléfono el
   botón «Generar video» del hero sale ARRIBA, pegado a la
   píldora «Genera con IA», y él lo quiere en la parte
   INFERIOR del carrusel, «donde estaba antes».
   Causa: quien empuja el grupo al fondo en la base es la
   descripción del hero (.hero-content p, con el margin-top:
   auto que le dio fixes117 para quedar justo encima del
   botón), pero en la capa ≤1023px la descripción va oculta
   (display:none, orden del dueño de 2026-10-27) y el botón
   pierde el empuje: queda tras el chip, arriba.
   Corrección, solo en esta capa: el margin-top:auto pasa al
   propio botón (.hero-btn). La píldora «Genera con IA» no se
   mueve (sigue arriba, como él la dejó); la descripción en
   Caveat y la nota manuscrita siguen ocultas en el teléfono
   (no forman grupo visible con el botón aquí: no se tocan),
   y tableta y escritorio quedan idénticos a fixes120 porque
   nada fuera de max-width: 599px cambia.
   Geometría resultante (medida en el rig): el botón queda
   pegado al fondo del contenido, con el padding-bottom de
   15px de .hero-content (el mismo orden que sus 16px
   laterales), a la izquierda dentro del max-width del
   contenido; los puntos del carrusel van abajo a la derecha
   (right:13px, bottom:10px): sin solape en ningún ancho. */
@media (max-width: 599px) {
  .hero-btn { margin-top: auto; }
}

/* ================= fixes122: marco «cz» del rediseño de las
   pantallas de creación (diseño aprobado por Siamel el
   2026-10-29). Teléfono/tableta vertical: tarjeta de modo +
   saldo, píldoras de modos, pasos numerados con paneles y pie
   Atrás/Continuar. Escritorio (≥1024 sin force-mobile, incluye
   el iPad en horizontal): barra lateral de modos + vista previa
   a la derecha, todo en una pantalla. Nada fuera de .cz-screen
   cambia. ================= */
.cz-side, .cz-preview { display: none; }
.cz-top { margin: 4px 0 14px; }
.cz-modecard { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.cz-modecard-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.cz-modecard-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.cz-modecard-ic svg { width: 21px; height: 21px; }
.cz-modecard-tx { display: flex; flex-direction: column; min-width: 0; }
.cz-modecard-k { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cz-modecard-v { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-modecard-ch { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.cz-balchip { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 13.5px; }
.cz-bal-ic svg { width: 16px; height: 16px; display: block; }
.cz-screen .bal-num { color: #ffc233; -webkit-text-fill-color: #ffc233; font-weight: 800; }
.cz-screen .bal-promo { color: #8b7bff; -webkit-text-fill-color: #8b7bff; font-weight: 700; }
.cz-screen .bal-word { color: #fff; -webkit-text-fill-color: #fff; }
/* fixes123: dentro de las filas de costo (.cost-row), la regla
   genérica «span:last-child» pintaba de blanco el número cuando
   es el último tramo (p. ej. el cálculo de Studio); la cifra de
   créditos manda: dorada también ahí. */
.cz-screen .cost-row .bal-num { color: #ffc233; -webkit-text-fill-color: #ffc233; }
.cz-pills { display: flex; gap: 8px; margin-top: 10px; }
.cz-pill { flex: 1; padding: 9px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cz-screen[data-cz-mode="t2v"] .cz-pill[data-cz-go="t2v"],
.cz-screen[data-cz-mode="i2v"] .cz-pill[data-cz-go="i2v"],
.cz-screen[data-cz-mode="v2v"] .cz-pill[data-cz-go="v2v"],
.cz-screen[data-cz-mode="tpl"] .cz-pill[data-cz-go="tpl"] { background: var(--accent); border-color: transparent; color: #fff; }
.cz-stepsnav { display: flex; align-items: flex-start; gap: 6px; margin: 2px 2px 14px; }
.cz-stepdot { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-3); font: inherit; }
.cz-stepdot-n { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cz-stepdot.is-active { color: var(--ink); }
.cz-stepdot.is-active .cz-stepdot-n { background: var(--accent); border-color: transparent; color: #fff; }
.cz-stepdot.is-done .cz-stepdot-n { border-color: var(--accent); color: var(--accent); }
.cz-stepdot-t { font-size: 11.5px; font-weight: 600; }
.cz-steplink { flex: 1; height: 1.5px; background: var(--line); margin-top: 13px; }
.cz-stepfoot { display: flex; gap: 10px; position: sticky; bottom: 0; padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 34%); z-index: 5; }
.cz-nav-btn { min-height: 48px; border-radius: 13px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cz-prev { flex: 0 0 118px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.cz-next { flex: 1; background: var(--grad, var(--accent)); border: 0; color: #fff; }
.cz-screen[data-cz-cur="1"] .cz-prev { opacity: .35; pointer-events: none; }
.cz-screen[data-cz-cur="3"] .cz-next { display: none; }
.cz-airow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; }
.cz-ai-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 0; background: var(--grad, var(--accent)); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.cz-ai-btn:disabled { opacity: .55; }
.cz-ai-undo { background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 2px; }
.cz-ai-note { font-size: 12.5px; color: var(--ink-3); }
.cz-ai-note.is-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.cz-camchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cz-chip { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cz-chip.on { background: var(--accent); border-color: transparent; color: #fff; }
.cz-adv { border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px 12px; margin: 14px 0 4px; background: var(--panel); }
.cz-adv summary { cursor: pointer; font-weight: 700; padding: 10px 0 4px; color: var(--ink); }
.cz-adv .t2v-label { margin-top: 8px; }
.cz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cz-thumbs:empty { margin-top: 0; }
.cz-thumb { position: relative; width: 56px; height: 56px; }
.cz-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.cz-thumb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.cz-kf-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.cz-kf-list:empty { margin: 0; }
.cz-kf-row { display: flex; align-items: center; gap: 10px; }
.cz-kf-row img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.cz-kf-sec-lab { font-size: 12.5px; color: var(--ink-3); }
.cz-kf-sec { width: 84px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; }
.cz-kf-x { margin-left: auto; background: none; border: 0; color: var(--bad); cursor: pointer; font: inherit; font-weight: 600; }
.cz-range-row { margin-top: 14px; }
.cz-range-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.cz-range-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.cz-range-inputs { display: flex; gap: 12px; margin-top: 10px; }
.cz-range-inputs label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.cz-range-inputs input { width: 100px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; }
.cz-conflict { color: #ffb02e; font-size: 12.5px; margin: 8px 0 0; }
#vedit-aspect .seg-btn:disabled { opacity: .4; }
#swap-extras { margin-top: 14px; }
.cz-menu { position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(430px, calc(100vw - 28px)); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px; z-index: 300; box-shadow: var(--shadow-pop, 0 18px 50px rgba(0, 0, 0, .45)); }
.cz-menu-title { font-weight: 800; margin: 2px 6px 10px; }
.cz-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 8px; background: none; border: 0; border-radius: 12px; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.cz-menu-item:active { background: var(--accent-soft); }
.cz-side-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.cz-side-ic svg { width: 19px; height: 19px; }
@media (max-width: 1023.98px) {
  .cz-screen[data-cz-cur="1"] [data-cz-panel]:not([data-cz-panel="1"]),
  .cz-screen[data-cz-cur="2"] [data-cz-panel]:not([data-cz-panel="2"]),
  .cz-screen[data-cz-cur="3"] [data-cz-panel]:not([data-cz-panel="3"]) { display: none !important; }
}
@media (min-width: 1024px) {
  html:not(.force-mobile) .cz-top,
  html:not(.force-mobile) .cz-stepsnav,
  html:not(.force-mobile) .cz-stepfoot { display: none; }
  html:not(.force-mobile) .cz-screen .tpl-screen-inner,
  html:not(.force-mobile) .cz-screen .create-screen-inner { max-width: 1300px; display: grid; grid-template-columns: 220px minmax(0, 1fr) 330px; grid-template-areas: "head head head" "side main preview"; column-gap: 24px; row-gap: 16px; align-items: start; }
  html:not(.force-mobile) .cz-screen .tpl-screen-head,
  html:not(.force-mobile) .cz-screen .create-screen-head { grid-area: head; }
  html:not(.force-mobile) .cz-side { grid-area: side; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
  html:not(.force-mobile) .cz-screen .t2v-body,
  html:not(.force-mobile) #tpl-screen #ts-folders-view,
  html:not(.force-mobile) #tpl-screen #ts-folder-view { grid-area: main; min-width: 0; }
  html:not(.force-mobile) .cz-preview { grid-area: preview; display: block; position: sticky; top: 12px; }
  html:not(.force-mobile) .cz-panel { display: contents; }
  .cz-side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 2px 6px 6px; }
  .cz-side-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; background: none; border: 0; border-radius: 13px; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
  .cz-side-item:hover { background: var(--accent-soft); }
  html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] { background: var(--accent); color: #fff; }
  html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic { background: rgba(255, 255, 255, .18); color: #fff; }
  .cz-side-bal { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; }
  .cz-side-bal-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
  .cz-side-bal-v { font-size: 16px; }
  .cz-preview-title { font-weight: 800; margin: 0 0 10px; }
  .cz-preview-box { position: relative; border: 1.5px dashed var(--line); border-radius: 18px; aspect-ratio: 4/5; overflow: hidden; display: grid; place-items: center; background: var(--panel); }
  .cz-preview-box img, .cz-preview-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
  .cz-preview-box img.on, .cz-preview-box video.on { display: block; }
  .cz-preview-box.has-media .cz-preview-empty { display: none; }
  .cz-preview-empty { color: var(--ink-3); font-size: 13.5px; padding: 0 18px; text-align: center; }
  .cz-preview-mode { color: var(--ink-3); font-size: 12.5px; margin-top: 10px; }
}

/* ================= fixes123: diseño E («riel y consola») ====
   Re-estilo REAL sobre el marco cz de fixes122, según las hojas
   aprobadas por Siamel la noche del 2026-10-29:
   · Escritorio (definitiva4): riel fino de iconos a la izquierda
     (solo iconos, orden Texto/Imagen/Historia/Editar/Video/
     Plantillas — ya reordenado en la FUENTE HTML), vista previa
     cinematográfica grande al centro con el prompt en un cuadro
     compacto debajo, y el panel derecho con Nivel/Duración/
     Resolución/alerta/Proporción/Avanzado + los cuadros de
     CÁMARA dentro del panel + resumen y botón al fondo.
   · Teléfono (idea de Siamel, mitades): pantalla ÚNICA sin
     pasos — arriba riel + previa + prompt; abajo el panel
     partido en dos sub-columnas con el corte tras Proporción.
   · Tableta: en HORIZONTAL la composición de escritorio
     ajustada; en VERTICAL (enmienda del 2026-10-30) la
     composición de mitades del teléfono llevada al lienzo
     grande (bloque portrait al final del archivo). El iPad
     NUNCA cae en la capa de teléfono — forcemobile.js lo
     excluye.
   · La barra de NIVEL va en tercios iguales, cada opción
     centrada en su tercio, en las tres superficies.
   Nada cambia de comportamiento: mismos ids, mismos textos,
   mismas rutas de cobro. Solo presentación y composición. */

/* --- Piel E: fondo y superficies (todas las pantallas cz) --- */
.cz-screen {
  background:
    radial-gradient(900px 460px at 50% -14%, rgba(61, 139, 255, .10), rgba(61, 139, 255, 0) 60%),
    radial-gradient(760px 480px at 108% 108%, rgba(124, 92, 255, .10), rgba(124, 92, 255, 0) 55%),
    var(--cz-bg);
}
.cz-screen .t2v-field textarea,
.cz-screen .ai-field textarea {
  background: var(--cz-field);
  border-color: rgba(255, 255, 255, .09);
  border-radius: 14px;
}
.cz-screen .dropzone {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .18);
  border-radius: 16px;
}
.cz-screen .seg {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  padding: 3px;
}
.cz-screen .seg-btn { border-radius: 8px; color: var(--ink-2); }
.cz-screen .seg-btn.active {
  background: linear-gradient(120deg, rgba(139, 61, 255, .92), rgba(61, 139, 255, .92));
  color: #fff;
  box-shadow: 0 6px 16px rgba(95, 92, 255, .32);
}
/* interfaz2: ficha informativa fija (NO es un control): la
   Resolución de los niveles de valor único y el estado de
   sonido fijo. Borde dorado para la resolución; tinte verde
   para el sonido incluido (ilustración aprobada 2026-10-30). */
.cz-info-chip {
  display: block;
  text-align: center;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
/* portada2 F2: DURACIÓN de Editar en DOS piezas (diseño
   aprobado): etiqueta a la izquierda y píldora de segundos a
   la derecha con el degradado de los botones activos de la
   app; sin video, la píldora muestra «—» atenuada con los
   tonos morados claros ya existentes (y su par del tema
   claro, el de las fichas informativas). */
.cz-dur-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; }
.cz-dur-label { font-size: 13px; font-weight: 600; line-height: 1.25; }
.cz-dur-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(120deg, rgba(139, 61, 255, .92), rgba(61, 139, 255, .92));
  box-shadow: 0 6px 16px rgba(95, 92, 255, .32);
}
.cz-dur-pill.is-empty { background: rgba(139, 123, 255, .12); color: #a78bfa; box-shadow: none; opacity: .65; }
html[data-theme="light"] .cz-screen .cz-dur-pill.is-empty { background: #f1efe9; color: #3c3c66; }
.cz-info-res { border: 1px solid rgba(167, 139, 250, .5); color: #a78bfa; background: rgba(139, 123, 255, .12); }
.cz-info-sound { border: 1px solid rgba(63, 185, 120, .45); color: #7bd88f; background: rgba(63, 185, 120, .10); }
/* Referencias de Imagen a video: apiladas por defecto; lado a
   lado desde 600 px (reglas de banda). */
.cz-refrow { display: block; }
/* La etapa de Editar: el video subido ES la previa de la
   consola (oculto hasta que tiene medio). */
#vedit-screen .cz-preview-box > #vedit-video-player {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
#vedit-screen .cz-preview-box > #vedit-video-player[src] { display: block; }
#vedit-screen .cz-preview-box:has(> #vedit-video-player[src]) .cz-preview-empty { display: none; }
/* Etapas con medio en Crear/Studio: fuera el texto vacío */
#create-screen .cz-preview-box.has-media .cz-preview-empty,
#premium-screen .cz-preview-box.has-media .cz-preview-empty { display: none; }
/* interfaz2 (dueño): la PREVIA de Texto/Imagen adopta la
   proporción elegida (9:16 / 16:9 / 1:1), vacía o con
   imagen, centrada en su zona sin romper la composición E.
   El tamaño sale de la zona real de la previa (unidades de
   contenedor, con reserva para título y pie de modo); sin
   ese soporte, la etapa conserva el llenado anterior. */
:is(#t2v-screen, #i2v-screen) .cz-preview { container-type: size; }
@supports (width: 1cqw) {
  :is(#t2v-screen, #i2v-screen) .cz-preview-box { flex: none; margin-inline: auto; margin-block: auto; }
  :is(#t2v-screen, #i2v-screen)[data-aspect="9:16"] .cz-preview-box { aspect-ratio: 9 / 16; width: min(100cqw, 51.75cqh); }
  :is(#t2v-screen, #i2v-screen)[data-aspect="16:9"] .cz-preview-box { aspect-ratio: 16 / 9; width: min(100cqw, 163.5cqh); }
  :is(#t2v-screen, #i2v-screen)[data-aspect="1:1"] .cz-preview-box { aspect-ratio: 1 / 1; width: min(100cqw, 92cqh); }
}
/* El título del guión de Historia, como etiqueta de consola */
#create-screen .script-panel h3 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 13px 0 7px;
}
.cz-screen .asp-cards .asp-card {
  background: var(--cz-panel);
  border-color: rgba(255, 255, 255, .09);
  border-radius: 12px;
}
.cz-screen .asp-cards .asp-card.active {
  background: rgba(124, 92, 255, .15);
  border-color: #7c5cff;
  color: #fff;
  box-shadow: 0 0 0 1px #7c5cff, 0 10px 22px rgba(124, 92, 255, .20);
}
.cz-screen .opt {
  background: var(--cz-panel);
  border-color: rgba(255, 255, 255, .09);
  border-radius: 14px;
}
.cz-screen .opt.selected {
  border-color: #7c5cff;
  background: rgba(124, 92, 255, .12);
  box-shadow: 0 0 0 1px #7c5cff;
}
.cz-screen .t2v-cost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  border-radius: 12px;
}
.cz-screen .t2v-generate {
  min-height: 52px;
  border-radius: 13px;
  font-size: 15.5px;
  box-shadow: 0 14px 32px rgba(95, 92, 255, .36);
}
.cz-screen .cz-adv {
  background: var(--cz-panel);
  border-color: rgba(255, 255, 255, .08);
  border-radius: 14px;
}
.cz-screen .cz-chip {
  background: var(--cz-panel);
  border-color: rgba(255, 255, 255, .10);
}
.cz-screen .cz-chip.on {
  background: rgba(124, 92, 255, .18);
  border-color: #7c5cff;
  color: #fff;
}
.cz-screen .cz-menu {
  background: var(--cz-panel);
  border-color: rgba(255, 255, 255, .10);
  border-radius: 16px;
}
.cz-screen .cz-modecard {
  background: var(--cz-panel);
  border-color: rgba(255, 255, 255, .08);
  border-radius: 16px;
}
.cz-screen .cz-balchip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
.cz-screen .cz-pill { background: var(--cz-panel); border-color: rgba(255, 255, 255, .09); }
.cz-screen[data-cz-mode="t2v"] .cz-pill[data-cz-go="t2v"],
.cz-screen[data-cz-mode="i2v"] .cz-pill[data-cz-go="i2v"],
.cz-screen[data-cz-mode="v2v"] .cz-pill[data-cz-go="v2v"],
.cz-screen[data-cz-mode="tpl"] .cz-pill[data-cz-go="tpl"] {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(95, 92, 255, .38);
}
.cz-screen .cz-stepdot.is-active .cz-stepdot-n { background: var(--grad); border-color: transparent; color: #fff; }
.cz-screen .cz-prev { background: var(--cz-panel); border-color: rgba(255, 255, 255, .10); }
.cz-screen .cz-next { box-shadow: 0 12px 28px rgba(95, 92, 255, .33); }

/* --- NIVEL en tercios iguales (las tres superficies): la
   barra se divide en tres tercios y cada opción queda
   centrada en su tercio; la píldora activa ocupa su tercio
   de forma simétrica. Solo los seg de nivel (id *-tier). --- */
.cz-screen .seg[id$="-tier"] {
  gap: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cz-screen .seg[id$="-tier"] .seg-btn {
  flex: 1 1 0;
  margin: 0 2px;
  text-align: center;
}

/* --- Cuadros de cámara: la FORMA aprobada (tarjetita
   cuadrada, icono de trazo propio arriba y etiqueta debajo;
   el activo lleva borde y halo morado). El tamaño y la
   rejilla se fijan en cada composición. --- */
.cz-screen .cz-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 3px 7px;
  border-radius: 14px;
  background: var(--cz-panel);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1.12;
  text-align: center;
}
.cz-screen .cz-chip::before {
  content: "";
  width: 25px;
  height: 25px;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.cz-screen .cz-chip[data-cam="orbit"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M21 3.5V8h-4.5'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="push"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='M15.3 15.3 20.5 20.5'/%3E%3Cpath d='M10.8 8.2v5.2M8.2 10.8h5.2'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="pan"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M7 7l-4 5 4 5'/%3E%3Cpath d='M17 7l4 5-4 5'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="tilt"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M12 17V6.5'/%3E%3Cpath d='M7.5 10.5 12 6l4.5 4.5'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="low"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19.5h18'/%3E%3Cpath d='M6 19.5 17.5 8'/%3E%3Cpath d='M11.8 7.5h5.7v5.7'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="dolly"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 9.5 4 4'/%3E%3Cpath d='M4 7V4h3'/%3E%3Cpath d='M14.5 9.5 20 4'/%3E%3Cpath d='M20 7V4h-3'/%3E%3Cpath d='M9.5 14.5 4 20'/%3E%3Cpath d='M4 17v3h3'/%3E%3Cpath d='M14.5 14.5 20 20'/%3E%3Cpath d='M20 17v3h-3'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="track"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='12' r='2.4'/%3E%3Cpath d='M11.5 12H21'/%3E%3Cpath d='M17.5 8.5 21 12l-3.5 3.5'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-cam="aerial"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='5' cy='5' r='2.1'/%3E%3Ccircle cx='19' cy='5' r='2.1'/%3E%3Ccircle cx='5' cy='19' r='2.1'/%3E%3Ccircle cx='19' cy='19' r='2.1'/%3E%3Cpath d='M6.6 6.6l2.8 2.8M17.4 6.6l-2.8 2.8M6.6 17.4l2.8-2.8M17.4 17.4l-2.8-2.8'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip.on {
  background: rgba(124, 92, 255, .18);
  border-color: #7c5cff;
  color: #fff;
  box-shadow: 0 0 0 1px #7c5cff, 0 8px 20px rgba(124, 92, 255, .25);
}

/* --- Ejemplo de cámara en la vista previa (fixes123): el
   clip del movimiento activo se reproduce en bucle y mudo
   sobre la caja; al desactivarse, la caja vuelve a su estado
   anterior (el JS solo toca esta capa). --- */
.cz-preview-box > video.cz-camdemo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 3;
}
.cz-preview-box.cz-demo-on > video.cz-camdemo { display: block; }
.cz-preview-box.cz-demo-on .cz-preview-empty { display: none; }

/* ============================================================
   ESCRITORIO (≥1024, sin force-mobile) — la composición de
   la definitiva4, generalizada a las seis pantallas.
   ============================================================ */
@media (min-width: 1024px) {
  /* --- Riel fino de iconos (todas las pantallas cz) --- */
  html:not(.force-mobile) .cz-screen .cz-side {
    grid-area: side;
    position: static;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 12px 10px;
  }
  html:not(.force-mobile) .cz-screen .cz-side-title { display: none; }
  html:not(.force-mobile) .cz-screen .cz-side-item {
    justify-content: center;
    padding: 8px 2px;
    border-radius: 14px;
    width: 100%;
  }
  html:not(.force-mobile) .cz-screen .cz-side-item:hover { background: rgba(255, 255, 255, .05); }
  html:not(.force-mobile) .cz-screen .cz-side-item span:not(.cz-side-ic) { display: none; }
  html:not(.force-mobile) .cz-screen .cz-side-ic { width: 40px; height: 40px; border-radius: 12px; }
  html:not(.force-mobile) .cz-screen .cz-side-ic svg { width: 21px; height: 21px; }
  /* Modo activo: el icono se enciende con el degradado */
  html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] {
    background: var(--grad);
    box-shadow: 0 12px 26px rgba(95, 92, 255, .38);
  }
  html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic {
    background: rgba(255, 255, 255, .20);
    color: #fff;
  }
  /* Saldo compacto al pie del riel */
  html:not(.force-mobile) .cz-screen .cz-side-bal {
    margin-top: auto;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 9px 2px;
    text-align: center;
    align-items: center;
  }
  html:not(.force-mobile) .cz-screen .cz-side-bal-k { display: none; }
  html:not(.force-mobile) .cz-screen .cz-side-bal-v { font-size: 12.5px; }

  /* --- Vista previa cinematográfica (pantallas con previa) --- */
  html:not(.force-mobile) .cz-screen .cz-preview {
    grid-area: center;
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  html:not(.force-mobile) .cz-screen .cz-preview-title { font-size: 15px; margin: 2px 0 10px; }
  html:not(.force-mobile) .cz-screen .cz-preview-box {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 26px;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-bg2));
    box-shadow: 0 30px 60px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  /* Regla de tiempo discreta al pie de la previa (solo textura) */
  html:not(.force-mobile) .cz-screen .cz-preview-box::after {
    content: "";
    position: absolute;
    left: 22px; right: 22px; bottom: 12px;
    height: 12px;
    background-image:
      linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .32) 1px, transparent 1px, transparent 34px);
    background-size: 100% 1px, 100% 10px;
    background-position: bottom left, bottom left;
    background-repeat: no-repeat, repeat-x;
    opacity: .55;
    pointer-events: none;
    z-index: 4;
  }
  html:not(.force-mobile) .cz-screen .cz-preview-mode { margin: 6px 0 0; }

  /* --- Pantallas de paneles (Texto / Imagen / Editar):
     riel | previa+prompt | panel derecho --- */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    max-width: 1480px;
    height: 100vh;
    height: 100dvh;
    padding: 0 18px 14px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 308px;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, auto);
    grid-template-areas: "head head head" "side center right" "side strip right";
    column-gap: 22px;
    row-gap: 14px;
    align-items: stretch;
    position: relative;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-body { display: contents; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  /* Panel 1: la consola bajo la previa (prompt y su contenido) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] {
    grid-area: strip;
    /* interfaz2-fix: si el contenido de la tira supera la fila
       (la foto de Studio cargada), la tira se recorta y desplaza
       por dentro en vez de empujar toda la rejilla — y con ella
       el panel 3 y su botón — fuera de la pantalla */
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 10px 18px 12px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .30);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .lede { display: none; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 6px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { height: 58px; min-height: 58px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { margin: 3px 0 0; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 7px; }
  /* Panel 2: la columna derecha completa (desplaza si no cabe;
     el padding inferior reserva cuadros + cierre en T/I) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] {
    grid-area: right;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    padding: 2px 16px 150px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 123, 255, .45) transparent;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] { padding-bottom: 150px; }
  /* Panel 3: resumen + botón, clavados al fondo de la columna */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="3"] {
    grid-area: right;
    align-self: end;
    z-index: 5;
    /* interfaz2-fix: fondo OPACO con el valor literal del token
       (--cz-panel es autorreferente en :root y computaba
       transparente: el contenido del panel 2 se leía A TRAVÉS
       del resumen clavado). Es el mismo #12173d que el token
       declara en el tema claro. */
    background: #12173d;
    border: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    padding: 4px 16px 14px;
    margin-top: 0;
    justify-content: flex-end;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-cost {
    margin-top: 2px;
    padding: 8px 10px;
    font-size: 13px;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  /* Ajustes compactados de la columna (como la definitiva4) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 13px 0 7px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .t2v-label { margin: 8px 0 5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg { padding: 2px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg-btn { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
  html:not(.force-mobile) :is(#t2v-silent-warn, #i2v-silent-warn, #vedit-silent-warn, #create-silent-warn) {
    font-size: 12.5px;
    line-height: 1.35;
    padding: 7px 11px;
    margin-top: 6px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-card { padding: 7px 6px 6px; gap: 3px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-shape { height: 24px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-916 { width: 14px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-11 { width: 24px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-word { font-size: 12.5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-num { font-size: 11px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-adv { margin: 8px 0 2px; padding-bottom: 8px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-adv summary { padding: 8px 0 2px; }
  /* Duración como regla de tiempo (el selector real) */
  html:not(.force-mobile) :is(#t2v-dur, #i2v-dur) { position: relative; padding-bottom: 13px; }
  /* Los cuadros de cámara DENTRO del panel derecho, sobre el
     resumen (salen del flujo de la consola, como se aprobó) */
  /* interfaz: la etiqueta y los cuadros de Cámara viven DENTRO
     del flujo del panel derecho (tras «Avanzado» en el DOM):
     fuera el position:absolute anclado al fondo de la pantalla,
     que a alturas menores de ~869px subía sobre Proporción. */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    display: block;
    margin: 12px 0 6px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-chip { font-size: 9px; line-height: 1.05; gap: 3px; padding: 6px 2px 5px; border-radius: 12px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 20px; height: 20px; }

  /* interfaz2: cabeza de Crear en la retícula y reserva al
     fondo del panel 2 (bajo el resumen clavado) en las dos
     consolas reconstruidas */
  html:not(.force-mobile) #create-screen .create-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  /* interfaz2d: la reserva fija de 410px de Crear se retira —
     el resumen nuevo es compacto (clon del de Texto a video) y
     la reserva exacta la sincroniza czSyncPanelReserve en vivo. */
  html:not(.force-mobile) #premium-screen [data-cz-panel="2"] { padding-bottom: 390px; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="1"] .t2v-field textarea { height: 58px; min-height: 58px; }
  html:not(.force-mobile) #premium-screen [data-cz-panel="1"] .ps-engine-wrap { margin: 0 0 2px; }
  /* interfaz2 (dueño): referencias lado a lado en Imagen —
     la previa crece lo que la tira ahorra */
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow { display: flex; gap: 10px; align-items: stretch; }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow > * { flex: 1 1 0; min-width: 0; }

  /* --- Plantillas: riel | biblioteca a todo el centro --- */
  html:not(.force-mobile) #tpl-screen .tpl-screen-inner {
    max-width: 1480px;
    height: 100vh;
    height: 100dvh;
    padding: 0 18px 14px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head" "side main";
    column-gap: 22px;
    row-gap: 14px;
    align-items: stretch;
    position: relative;
  }
  html:not(.force-mobile) #tpl-screen .tpl-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  html:not(.force-mobile) #tpl-screen :is(#ts-folders-view, #ts-folder-view) {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 123, 255, .45) transparent;
  }
}

/* ============================================================
   TABLETA (600-1023.98px, SIN force-mobile) — suma pedida
   por Siamel: en HORIZONTAL la tableta sigue la composición
   de ESCRITORIO (riel | previa+prompt | panel derecho) con
   proporciones ajustadas; en VERTICAL manda la enmienda
   portrait del final del archivo (las mitades del
   teléfono). Este bloque gana a la vista de pasos de
   fixes122 (que queda como respaldo solo si el aparato
   lleva force-mobile activo); el iPad no puede caer en la
   capa de teléfono: forcemobile.js lo excluye y el bloque
   de teléfono exige ≤599px.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* Fuera pasos: todos los paneles visibles a la vez */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel] { display: flex !important; }
  html:not(.force-mobile) .cz-screen .cz-top,
  html:not(.force-mobile) .cz-screen .cz-stepsnav,
  html:not(.force-mobile) .cz-screen .cz-stepfoot { display: none; }

  /* --- Riel fino de iconos --- */
  html:not(.force-mobile) .cz-screen .cz-side {
    grid-area: side;
    position: static;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    padding: 10px 8px;
  }
  html:not(.force-mobile) .cz-screen .cz-side-title { display: none; }
  html:not(.force-mobile) .cz-screen .cz-side-item {
    justify-content: center;
    padding: 7px 2px;
    border-radius: 13px;
    width: 100%;
  }
  html:not(.force-mobile) .cz-screen .cz-side-item span:not(.cz-side-ic) { display: none; }
  html:not(.force-mobile) .cz-screen .cz-side-ic { width: 36px; height: 36px; border-radius: 11px; }
  html:not(.force-mobile) .cz-screen .cz-side-ic svg { width: 19px; height: 19px; }
  html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"],
  html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] {
    background: var(--grad);
    box-shadow: 0 12px 26px rgba(95, 92, 255, .38);
  }
  html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic,
  html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic {
    background: rgba(255, 255, 255, .20);
    color: #fff;
  }
  html:not(.force-mobile) .cz-screen .cz-side-bal {
    margin-top: auto;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 8px 2px;
    text-align: center;
    align-items: center;
  }
  html:not(.force-mobile) .cz-screen .cz-side-bal-k { display: none; }
  html:not(.force-mobile) .cz-screen .cz-side-bal-v { font-size: 12px; }

  /* --- Vista previa --- */
  html:not(.force-mobile) .cz-screen .cz-preview {
    grid-area: center;
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  html:not(.force-mobile) .cz-screen .cz-preview-title { font-size: 14px; margin: 2px 0 8px; }
  html:not(.force-mobile) .cz-screen .cz-preview-box {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-bg2));
    box-shadow: 0 24px 48px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  html:not(.force-mobile) .cz-screen .cz-preview-box::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 10px;
    height: 10px;
    background-image:
      linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .32) 1px, transparent 1px, transparent 28px);
    background-size: 100% 1px, 100% 8px;
    background-position: bottom left, bottom left;
    background-repeat: no-repeat, repeat-x;
    opacity: .55;
    pointer-events: none;
    z-index: 4;
  }
  html:not(.force-mobile) .cz-screen .cz-preview-mode { margin: 5px 0 0; }

  /* --- Pantallas de paneles --- */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0 14px 12px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 272px;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, auto);
    grid-template-areas: "head head head" "side center right" "side strip right";
    column-gap: 16px;
    row-gap: 12px;
    align-items: stretch;
    position: relative;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-body { display: contents; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-panel {
    flex-direction: column;
    min-width: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] {
    grid-area: strip;
    /* interfaz2-fix: si el contenido de la tira supera la fila
       (la foto de Studio cargada), la tira se recorta y desplaza
       por dentro en vez de empujar toda la rejilla — y con ella
       el panel 3 y su botón — fuera de la pantalla */
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 9px 14px 11px;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .30);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .lede { display: none; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { height: 54px; min-height: 54px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] {
    grid-area: right;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 2px 14px 146px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 123, 255, .45) transparent;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] { padding-bottom: 146px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="3"] {
    grid-area: right;
    align-self: end;
    z-index: 5;
    /* interfaz2-fix: fondo OPACO literal (ver la nota en el
       bloque de escritorio: --cz-panel computaba transparente
       en oscuro y el panel 2 se leía a través del resumen). */
    background: #12173d;
    border: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    padding: 4px 14px 12px;
    margin-top: 0;
    justify-content: flex-end;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-cost {
    margin-top: 2px;
    padding: 7px 9px;
    font-size: 12.5px;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 11px 0 6px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .t2v-label { margin: 7px 0 4px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg { padding: 2px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg-btn { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
  html:not(.force-mobile) :is(#t2v-silent-warn, #i2v-silent-warn, #vedit-silent-warn, #create-silent-warn) {
    font-size: 12px;
    line-height: 1.35;
    padding: 6px 10px;
    margin-top: 5px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-card { padding: 6px 5px 5px; gap: 3px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-shape { height: 22px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-word { font-size: 12px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-num { font-size: 10.5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-adv { margin: 7px 0 2px; padding-bottom: 7px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-adv summary { padding: 7px 0 2px; }
  html:not(.force-mobile) :is(#t2v-dur, #i2v-dur) { position: relative; padding-bottom: 12px; }
  /* Cuadros de cámara dentro del panel derecho (tableta) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    display: block;
    margin: 12px 0 6px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-chip { font-size: 8.5px; line-height: 1.05; gap: 3px; padding: 5px 2px 4px; border-radius: 11px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 18px; height: 18px; }

  /* interfaz2: Crear/Studio en la retícula de paneles de la
     banda; referencias lado a lado en Imagen */
  html:not(.force-mobile) #create-screen .create-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  html:not(.force-mobile) #create-screen [data-cz-panel="2"] { padding-bottom: 400px; }
  html:not(.force-mobile) #premium-screen [data-cz-panel="2"] { padding-bottom: 380px; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="1"] .t2v-field textarea { height: 54px; min-height: 54px; }
  html:not(.force-mobile) #premium-screen [data-cz-panel="1"] .ps-engine-wrap { margin: 0 0 2px; }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow { display: flex; gap: 10px; align-items: stretch; }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow > * { flex: 1 1 0; min-width: 0; }

  /* --- Plantillas --- */
  html:not(.force-mobile) #tpl-screen .tpl-screen-inner {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0 14px 12px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head" "side main";
    column-gap: 16px;
    row-gap: 12px;
    align-items: stretch;
    position: relative;
  }
  html:not(.force-mobile) #tpl-screen .tpl-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  html:not(.force-mobile) #tpl-screen :is(#ts-folders-view, #ts-folder-view) {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 123, 255, .45) transparent;
  }
}

/* ============================================================
   TELÉFONO (≤599px) — la composición de SIAMEL: pantalla
   ÚNICA sin pasos ni scroll de página. Mitad superior: riel
   de iconos + vista previa grande + prompt debajo, más
   pequeño. Mitad inferior: el panel derecho partido en dos
   sub-columnas lado a lado, con el corte tras Proporción
   (izquierda: Nivel/Duración/Resolución/alerta/Proporción;
   derecha: Avanzado/Cámara/Resumen/Generar).
   ============================================================ */
@media (max-width: 599px) {
  .cz-screen { overflow: hidden; }
  .cz-screen .cz-top,
  .cz-screen .cz-stepsnav,
  .cz-screen .cz-stepfoot { display: none; }

  /* --- Cabeza de pantalla (todas las de creación) --- */
  .cz-screen .tpl-screen-head,
  .cz-screen .create-screen-head {
    position: static;
    margin: 0 -12px;
    padding: 10px 14px 9px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .cz-screen .tpl-screen-title,
  .cz-screen .create-screen-title { font-size: 16px; }
  .cz-screen .tpl-back,
  .cz-screen .tv-close { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

  /* --- Riel de iconos (mitad superior, a la izquierda) --- */
  .cz-screen .cz-side {
    display: flex;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    padding: 8px 6px;
    gap: 6px;
    flex-direction: column;
    align-items: center;
  }
  .cz-screen .cz-side-title { display: none; }
  .cz-screen .cz-side-item { justify-content: center; padding: 6px 2px; border-radius: 12px; }
  .cz-screen .cz-side-item span:not(.cz-side-ic) { display: none; }
  .cz-screen .cz-side-ic { width: 36px; height: 36px; border-radius: 11px; }
  .cz-screen .cz-side-ic svg { width: 19px; height: 19px; }
  .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"],
  .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"],
  .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"],
  .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"],
  .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"],
  .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] {
    background: var(--grad);
    box-shadow: 0 10px 22px rgba(95, 92, 255, .35);
  }
  .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic,
  .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic,
  .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic,
  .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic,
  .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic,
  .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic {
    background: rgba(255, 255, 255, .20);
    color: #fff;
  }
  .cz-screen .cz-side-bal {
    margin-top: auto;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
    border-radius: 11px;
    padding: 7px 2px;
    text-align: center;
    align-items: center;
  }
  .cz-screen .cz-side-bal-k { display: none; }
  .cz-screen .cz-side-bal-v { font-size: 12px; }

  /* --- Vista previa (mitad superior) --- */
  .cz-screen .cz-preview-title { display: none; }
  .cz-screen .cz-preview-box {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-bg2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
  }
  .cz-screen .cz-preview-mode { margin: 4px 0 0; font-size: 10.5px; }

  /* ============ Texto e Imagen a video: las mitades ======== */
  :is(#t2v-screen, #i2v-screen) .tpl-screen-inner {
    height: 100dvh;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .545fr) auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 0 12px 10px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  :is(#t2v-screen, #i2v-screen) .tpl-screen-head { grid-column: 1 / 4; grid-row: 1; }
  :is(#t2v-screen, #i2v-screen) .t2v-body { display: contents; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel] { display: block !important; }
  :is(#t2v-screen, #i2v-screen) .cz-side { grid-column: 1; grid-row: 2 / 4; }
  :is(#t2v-screen, #i2v-screen) .cz-preview {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  :is(#t2v-screen, #i2v-screen) .cz-preview-box { flex: 1; min-height: 0; aspect-ratio: auto; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] {
    grid-column: 2 / 4;
    grid-row: 3;
    display: flex !important;
    flex-direction: column;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 8px 12px 9px;
    min-height: 0;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .lede { display: none; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 4px; font-size: 12px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { height: 54px; min-height: 54px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { margin: 2px 0 0; font-size: 10.5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-note { font-size: 10.5px; line-height: 1.3; }
  /* Sub-columna izquierda de la mitad inferior */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] {
    grid-column: 1 / 3;
    grid-row: 4;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 8px 12px;
    min-height: 0;
    overflow: hidden;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 7px 0 4px;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label:first-child { margin-top: 1px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg { padding: 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg-btn { padding: 5px 2px; font-size: 12px; }
  :is(#t2v-screen, #i2v-screen) :is(#t2v-silent-warn, #i2v-silent-warn) {
    font-size: 11px;
    line-height: 1.3;
    padding: 6px 9px;
    margin-top: 5px;
  }
  :is(#t2v-screen, #i2v-screen) .asp-cards { gap: 6px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-card { padding: 5px 4px 4px; gap: 2px; border-radius: 10px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-shape { height: 19px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-916 { width: 11px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-11 { width: 19px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-word { font-size: 11.5px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-num { font-size: 10px; }
  /* Sub-columna derecha: Avanzado sobre Cámara, al fondo
     Resumen + Generar (posiciones de la maqueta aprobada) */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv {
    position: absolute;
    left: calc(50% + 37px);
    top: calc(50% + 12px);
    width: calc(50% - 49px);
    margin: 0;
    padding: 0 12px 6px;
    background: var(--cz-panel);
    border-radius: 14px;
    z-index: 6;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv summary { padding: 7px 0 3px; font-size: 12.5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    position: absolute;
    left: calc(50% + 37px);
    top: calc(50% + 56px);
    width: calc(50% - 49px);
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    z-index: 6;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    position: absolute;
    left: calc(50% + 37px);
    top: calc(50% + 75px);
    width: calc(50% - 49px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin: 0;
    z-index: 6;
  }
  :is(#t2v-screen, #i2v-screen) .cz-chip { height: 46px; font-size: 9.5px; line-height: 1.05; gap: 3px; padding: 5px 3px 4px; border-radius: 12px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 19px; height: 19px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] {
    position: absolute;
    left: calc(50% + 37px);
    bottom: 10px;
    width: calc(50% - 49px);
    margin: 0;
    z-index: 7;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost {
    margin: 0 0 7px;
    padding: 7px 9px;
    font-size: 11.5px;
    flex-wrap: wrap;
    row-gap: 1px;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-generate { min-height: 47px; font-size: 14.5px; border-radius: 12px; }

  /* ============ Editar video: mitades, con el formulario
     completo a ancho entero en la mitad inferior ============ */
  #vedit-screen .tpl-screen-inner {
    height: 100dvh;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .85fr) auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 0 12px 10px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  #vedit-screen .tpl-screen-head { grid-column: 1 / 4; grid-row: 1; }
  #vedit-screen .t2v-body { display: contents; }
  #vedit-screen [data-cz-panel] { display: block !important; }
  /* La previa de Editar es baja (video 16:9) y el riel —7 modos
     más la píldora de saldo— necesita ~390px: sin aire, la
     píldora se salía de la celda y pisaba el rótulo «Nivel» del
     panel 2. La fila de la previa crece (.85fr) y el riel tiene
     la altura mínima de su contenido. */
  #vedit-screen .cz-side { grid-column: 1; grid-row: 2 / 4; min-height: 388px; }
  #vedit-screen .cz-preview {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #vedit-screen .cz-preview-box { flex: 1; min-height: 0; aspect-ratio: auto; }
  #vedit-screen [data-cz-panel="1"] {
    grid-column: 2 / 4;
    grid-row: 3;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 8px 12px 9px;
    min-height: 0;
  }
  #vedit-screen [data-cz-panel="2"] {
    grid-column: 1 / 3;
    grid-row: 4;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 8px 12px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* interfaz: Editar sigue la MISMA composición de mitades que
     Texto/Imagen en teléfono — fuera los paneles apilados a
     ancho completo: «Avanzado» y el Resumen/Generar forman la
     sub-columna derecha, como en la maqueta aprobada. */
  #vedit-screen [data-cz-panel="2"] > .cz-adv {
    position: absolute;
    left: calc(50% + 37px);
    top: calc(50% + 12px);
    width: calc(50% - 49px);
    margin: 0;
    padding: 0 12px 6px;
    background: var(--cz-panel);
    border-radius: 14px;
    z-index: 6;
  }
  #vedit-screen [data-cz-panel="3"] {
    position: absolute;
    left: calc(50% + 37px);
    bottom: 10px;
    width: calc(50% - 49px);
    margin: 0;
    z-index: 7;
  }
  /* La tira del video subido se presenta como tarjeta de medio
     E (borde, radio y fondo de la consola), no como un <video>
     pelado suelto en el formulario. */
  #vedit-screen .ve-first {
    background: var(--cz-panel-lo);
    border: 1px solid var(--cz-line);
    border-radius: 14px;
    padding: 8px;
  }
  #vedit-screen .ve-first video { border-radius: 10px; background: #000; }
  #vedit-screen [data-cz-panel="3"] .t2v-cost { margin: 0 0 7px; padding: 7px 9px; font-size: 11.5px; }
  #vedit-screen [data-cz-panel="3"] .t2v-generate { min-height: 47px; font-size: 14.5px; border-radius: 12px; }
  #vedit-screen .t2v-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* ============ Video a video / Historia y Studio
     (interfaz2): la composición de paneles de Editar —
     tira bajo la previa, ajustes abajo a la izquierda con
     su desplazamiento y la salida (resumen + Generar) en
     la sub-columna derecha ============ */
  :is(#create-screen, #premium-screen) .tpl-screen-inner {
    height: 100dvh;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .85fr) auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 0 12px 10px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  :is(#create-screen, #premium-screen) [data-cz-panel] { display: block !important; }
  :is(#create-screen, #premium-screen) :is(.create-screen-head, .tpl-screen-head) { grid-column: 1 / 4; grid-row: 1; }
  :is(#create-screen, #premium-screen) .cz-side { grid-column: 1; grid-row: 2 / 5; min-height: 388px; }
  :is(#create-screen, #premium-screen) .cz-preview {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  :is(#create-screen, #premium-screen) .cz-preview-box { flex: 1; min-height: 0; aspect-ratio: auto; }
  :is(#create-screen, #premium-screen) [data-cz-panel="1"] {
    grid-column: 2 / 4;
    grid-row: 3;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 9px 12px 10px;
    min-height: 0;
  }
  :is(#create-screen, #premium-screen) [data-cz-panel="2"] {
    grid-column: 1 / 3;
    grid-row: 4;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    padding: 9px 10px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  :is(#create-screen, #premium-screen) [data-cz-panel="3"] {
    position: absolute;
    left: calc(50% + 37px);
    bottom: 10px;
    width: calc(50% - 49px);
    margin: 0;
    z-index: 7;
    max-height: 47%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  :is(#create-screen, #premium-screen) [data-cz-panel="3"] .cost-box { padding: 8px 10px; font-size: 11px; }
  :is(#create-screen, #premium-screen) [data-cz-panel="3"] .cost-row { padding: 2px 0; }
  :is(#create-screen, #premium-screen) [data-cz-panel="3"] .gen-note { display: none; }
  :is(#create-screen, #premium-screen) .t2v-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* ============ Plantillas: riel + biblioteca ============ */
  #tpl-screen .tpl-screen-inner {
    height: 100dvh;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 0 12px 10px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  #tpl-screen .tpl-screen-head { grid-column: 1 / 3; grid-row: 1; }
  #tpl-screen .cz-side { grid-column: 1; grid-row: 2; }
  #tpl-screen :is(#ts-folders-view, #ts-folder-view) {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- fixes123 · correcciones del rig (medidas, no a ojo):
   la caja de la previa ancla la capa de ejemplo en todas las
   superficies; los botones del riel no heredan el fondo gris
   por defecto del navegador (en fixes122 el riel no se veía
   en teléfono y el defecto dormía); en teléfono la previa
   centra su texto vacío; el riel se compacta para que el
   saldo quepa entero; la cuarta fila de cámaras despeja el
   resumen; Imagen a video compacta su tira (lleva las dos
   fotos) y su previa cede alto para que la sub-columna
   izquierda enseñe también Proporción; Editar oculta el
   texto de ayuda de la tira, como en escritorio. --- */
.cz-screen .cz-preview-box { position: relative; }
.cz-screen .cz-side-item { background: transparent; border: 0; }
@media (max-width: 599px) {
  .cz-screen .cz-preview-box { display: grid; place-items: center; }
  .cz-screen .cz-side { gap: 5px; padding: 7px 5px; }
  .cz-screen .cz-side-item { padding: 4px 2px; }
  .cz-screen .cz-side-ic { width: 34px; height: 34px; }
  .cz-screen .cz-side-bal { padding: 5px 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv { top: calc(50% + 6px); }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label { top: calc(50% + 48px); }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips { top: calc(50% + 66px); gap: 5px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip { height: 41px; font-size: 9px; gap: 2px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 17px; height: 17px; }
  #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .34fr) auto minmax(0, 1fr); }
  #i2v-screen [data-cz-panel="1"] .dropzone { padding: 8px 12px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .big { font-size: 13.5px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .small { font-size: 11px; }
  #i2v-screen .ps-add-ref { padding: 7px 12px; }
  #i2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 50px; min-height: 50px; }
  #vedit-screen [data-cz-panel="1"] .lede { display: none; }
}

/* --- fixes123 · corrección del rig 2: la tira de Imagen a
   video (foto + segunda referencia + prompt) compactada para
   que la mitad inferior enseñe Proporción sin recorte --- */
@media (max-width: 599px) {
  #i2v-screen [data-cz-panel="1"] .dropzone { padding: 6px 12px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .small { font-size: 10.5px; }
  #i2v-screen .ps-add-ref { padding: 5px 12px; }
  #i2v-screen .ps-add-sub { font-size: 10.5px; }
  #i2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 46px; min-height: 46px; }
  #i2v-screen [data-cz-panel="1"] .cz-ai-btn { padding-top: 6px; padding-bottom: 6px; }
}

/* --- fixes123 · corrección del rig 3: Imagen a video en
   teléfono — la zona de la foto pierde su línea de formatos
   y «Agregar otra referencia» queda como fila fina (ambos
   textos completos siguen en escritorio y tableta) para que
   la tira cierre sobre la mitad y Proporción se vea entera --- */
@media (max-width: 599px) {
  #i2v-screen [data-cz-panel="1"] .dropzone { padding: 5px 12px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .small { display: none; }
  #i2v-screen .ps-add-ref { padding: 3px 12px; }
  #i2v-screen .ps-add-title { font-size: 12.5px; }
  #i2v-screen .ps-add-sub { display: none; }
}

/* --- fixes123 · pulido final del rig: el área de texto de
   Imagen a video enseña las dos líneas del ejemplo --- */
@media (max-width: 599px) {
  #i2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 50px; min-height: 50px; }
}

/* ============================================================
   fixes123 · ENMIENDA de Siamel (2026-10-30): la TABLETA en
   VERTICAL (retrato) divide la pantalla en dos, TAL COMO el
   teléfono — la composición de mitades: arriba riel de
   iconos + vista previa + cuadro del prompt; abajo el panel
   partido en dos sub-columnas con el corte tras Proporción.
   La tableta en HORIZONTAL no cambia: sigue en la
   composición de escritorio (este bloque exige retrato).
   Las proporciones rectoras son las del teléfono llevadas
   al lienzo grande: riel de 68 px, la previa con fracción
   mayor (respira más) y los cuadros de cámara más altos.
   El iPad (UA Macintosh + táctil) obedece la misma regla
   por orientación: forcemobile.js nunca lo marca, así que
   en vertical cae aquí y en horizontal en escritorio.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  html:not(.force-mobile) .cz-screen { overflow: hidden; }

  /* --- Cabeza de pantalla (todas las de creación) --- */
  html:not(.force-mobile) .cz-screen .tpl-screen-head,
  html:not(.force-mobile) .cz-screen .create-screen-head {
    position: static;
    margin: 0 -16px;
    padding: 12px 16px 10px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  html:not(.force-mobile) .cz-screen .tpl-screen-title,
  html:not(.force-mobile) .cz-screen .create-screen-title { font-size: 17px; }
  html:not(.force-mobile) .cz-screen .tpl-back,
  html:not(.force-mobile) .cz-screen .tv-close { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

  /* --- Riel de iconos: iconos algo mayores que en la
     composición de escritorio de la banda --- */
  html:not(.force-mobile) .cz-screen .cz-side-ic { width: 40px; height: 40px; border-radius: 12px; }
  html:not(.force-mobile) .cz-screen .cz-side-ic svg { width: 21px; height: 21px; }

  /* --- Vista previa sin título (como en el teléfono) --- */
  html:not(.force-mobile) .cz-screen .cz-preview-title { display: none; }
  html:not(.force-mobile) .cz-screen .cz-preview-mode { margin: 5px 0 0; font-size: 11.5px; }

  /* ============ Texto e Imagen a video: las mitades ====== */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel] { display: block !important; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .tpl-screen-inner {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .8fr) auto minmax(0, 1fr);
    grid-template-areas: none;
    column-gap: 12px;
    row-gap: 10px;
    padding: 0 16px 14px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  html:not(.force-mobile) #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .45fr) auto minmax(0, 1fr); }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .tpl-screen-head { grid-column: 1 / 4; grid-row: 1; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-side { grid-column: 1; grid-row: 2 / 4; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-preview {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-preview-box { flex: 1; min-height: 0; aspect-ratio: auto; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] {
    grid-column: 2 / 4;
    grid-row: 3;
    display: flex !important;
    flex-direction: column;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 10px 16px 12px;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .30);
    min-height: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .lede { display: none; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 5px; font-size: 13px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { height: 56px; min-height: 56px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { margin: 3px 0 0; font-size: 11px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 6px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-note { font-size: 11.5px; line-height: 1.3; }
  /* Sub-columna izquierda de la mitad inferior */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] {
    grid-column: 1 / 3;
    grid-row: 4;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 10px 14px;
    min-height: 0;
    overflow: hidden;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 8px 0 5px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label:first-child { margin-top: 1px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg { padding: 2px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg-btn { padding: 6px 2px; font-size: 13px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) :is(#t2v-silent-warn, #i2v-silent-warn) {
    font-size: 12px;
    line-height: 1.35;
    padding: 7px 10px;
    margin-top: 6px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards { gap: 7px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards .asp-card { padding: 6px 5px 5px; gap: 2px; border-radius: 11px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards .asp-shape { height: 22px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards .asp-916 { width: 12px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards .asp-11 { width: 22px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards .asp-word { font-size: 12.5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .asp-cards .asp-num { font-size: 10.5px; }
  /* Sub-columna derecha: Avanzado sobre Cámara, al fondo
     Resumen + Generar (anclas iniciales; el ajuste fino va
     en el bloque de corrección tras medir con el rig) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv {
    position: absolute;
    left: calc(50% + 46px);
    top: calc(55% + 12px);
    width: calc(50% - 62px);
    margin: 0;
    padding: 0 14px 8px;
    background: var(--cz-panel);
    border-radius: 14px;
    z-index: 6;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-adv { top: calc(57% + 12px); }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv summary { padding: 9px 0 4px; font-size: 14px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    position: absolute;
    left: calc(50% + 46px);
    top: calc(55% + 66px);
    width: calc(50% - 62px);
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    z-index: 6;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-cam-label { top: calc(57% + 66px); }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    position: absolute;
    left: calc(50% + 46px);
    top: calc(55% + 86px);
    width: calc(50% - 62px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin: 0;
    z-index: 6;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-camchips { top: calc(57% + 86px); }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-chip { height: 52px; font-size: 10.5px; line-height: 1.05; gap: 3px; padding: 6px 3px 5px; border-radius: 13px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 21px; height: 21px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] {
    position: absolute;
    left: calc(50% + 46px);
    bottom: 14px;
    width: calc(50% - 62px);
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    z-index: 7;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost {
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    flex-wrap: wrap;
    row-gap: 1px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-generate { min-height: 50px; font-size: 15px; border-radius: 13px; }

  /* ============ Editar video: mitades, con el formulario
     completo a ancho entero en la mitad inferior ============ */
  html:not(.force-mobile) #vedit-screen .tpl-screen-inner {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .5fr) auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    column-gap: 12px;
    row-gap: 10px;
    padding: 0 16px 14px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  html:not(.force-mobile) #vedit-screen .tpl-screen-head { grid-column: 1 / 4; grid-row: 1; }
  html:not(.force-mobile) #vedit-screen .cz-side { grid-column: 1; grid-row: 2 / 4; }
  html:not(.force-mobile) #vedit-screen .cz-preview {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  html:not(.force-mobile) #vedit-screen .cz-preview-box { flex: 1; min-height: 0; aspect-ratio: auto; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] {
    grid-column: 2 / 4;
    grid-row: 3;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 10px 16px 12px;
    min-height: 0;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] .lede { display: none; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] {
    grid-column: 1 / 4;
    grid-row: 4;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 10px 14px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="3"] {
    grid-column: 1 / 4;
    grid-row: 5;
    align-self: stretch;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="3"] .t2v-cost { margin: 0 0 8px; padding: 8px 10px; font-size: 12.5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="3"] .t2v-generate { min-height: 50px; font-size: 15px; border-radius: 13px; }
  html:not(.force-mobile) #vedit-screen .t2v-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* ============ Video a video / Historia y Studio
     (interfaz2): mitades como Editar — tira bajo la
     previa, ajustes a ancho entero con desplazamiento
     y la salida en su propia fila al fondo ============ */
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel] { display: block !important; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .tpl-screen-inner {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, .5fr) auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    column-gap: 12px;
    row-gap: 10px;
    padding: 0 16px 14px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) :is(.create-screen-head, .tpl-screen-head) { grid-column: 1 / 4; grid-row: 1; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-side { grid-column: 1; grid-row: 2 / 4; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-preview {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-preview-box { flex: 1; min-height: 0; aspect-ratio: auto; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="1"] {
    grid-column: 2 / 4;
    grid-row: 3;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 10px 16px 12px;
    min-height: 0;
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="2"] {
    grid-column: 1 / 4;
    grid-row: 4;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 10px 14px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="3"] {
    grid-column: 1 / 4;
    grid-row: 5;
    align-self: stretch;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .t2v-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  /* interfaz2 (dueño): referencias lado a lado en Imagen
     también en tableta vertical (el ancho lo permite) */
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow { display: flex; gap: 10px; align-items: stretch; }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow > * { flex: 1 1 0; min-width: 0; }

  /* ============ Plantillas: riel + biblioteca ============ */
  html:not(.force-mobile) #tpl-screen .tpl-screen-inner {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: none;
    column-gap: 12px;
    row-gap: 10px;
    padding: 0 16px 14px;
    position: relative;
    max-width: none;
    margin: 0;
  }
  html:not(.force-mobile) #tpl-screen .tpl-screen-head { grid-column: 1 / 3; grid-row: 1; }
  html:not(.force-mobile) #tpl-screen .cz-side { grid-column: 1; grid-row: 2; }
  html:not(.force-mobile) #tpl-screen :is(#ts-folders-view, #ts-folder-view) {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- fixes123 · enmienda tableta, correcciones del rig
   (medidas a 820×1180, no a ojo): la columna derecha de
   Texto arranca 4,7 px SOBRE la tarjeta izquierda — baja
   11 px para sentarse dentro, como en el teléfono (+6);
   la de Imagen arranca a +2,1 y baja 4 para igualar; en
   Editar el riel (solo media pantalla de alto) se compacta
   para que el saldo quepa entero sin desbordar. --- */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  html:not(.force-mobile) #t2v-screen [data-cz-panel="2"] > .cz-adv { top: calc(55% + 23px); }
  html:not(.force-mobile) #t2v-screen [data-cz-panel="2"] > .cz-cam-label { top: calc(55% + 77px); }
  html:not(.force-mobile) #t2v-screen [data-cz-panel="2"] > .cz-camchips { top: calc(55% + 97px); }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-adv { top: calc(57% + 16px); }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-cam-label { top: calc(57% + 70px); }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-camchips { top: calc(57% + 90px); }
  html:not(.force-mobile) #vedit-screen .cz-side { gap: 5px; }
  html:not(.force-mobile) #vedit-screen .cz-side-item { padding: 5px 2px; }
  html:not(.force-mobile) #vedit-screen .cz-side-ic { width: 34px; height: 34px; }
  html:not(.force-mobile) #vedit-screen .cz-side-bal { padding: 6px 2px; }
  /* interfaz2-fix: la compactación del riel llevada a
     Crear/Studio en vertical — sin ella el riel (7 modos + el
     saldo) medía más que su celda (filas 2/4) y el «500
     créditos» se imprimía SOBRE la tarjeta «Motion Transfer»
     del panel 2. Medido a 820×1180 en Historia: la celda del
     riel mide 395px y su contenido 412,4px (7 modos de 44px +
     saldo de 58,4px): se recortan ~40px (aire superior, relleno
     e icono de cada modo y huecos) para que el saldo quede
     DENTRO del riel con margen. */
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-side { gap: 4px; padding-top: 6px; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-side-item { padding: 4px 2px; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-side-ic { width: 32px; height: 32px; }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .cz-side-bal { padding: 6px 2px; }
}

/* ============================================================
   fixes123 · MEDIDA REAL del iPhone de Siamel + organización
   de la TABLETA VERTICAL llevada al teléfono (2026-10-30).
   Medido por análisis de píxeles sobre sus dos capturas de
   Safari (1206×2622 px = 402×874 pt, factor 3,0 px/pt):
   · Línea amarilla superior: y 328–339 px (109,3–113,0 pt),
     justo bajo la fila fija ← / ✕ de la app.
   · Línea amarilla inferior: y 2303–2325 px (767,7–775,0 pt);
     la costura de la zona de la barra de Safari en la captura
     sin marcas arranca en y 2328 px = 776,0 pt (Δ = 1 pt con
     el borde inferior de su línea).
   · FRANJA ÚTIL DE DISEÑO (entre líneas): 1963 px = 654,33 pt
     bajo el encabezado de la app. En el rig: viewport
     402×712 (encabezado medido 58 + franja 654).
   La composición anterior (anclas al 50 % ajustadas a
   874 pt) NO cabía en la franja: la columna izquierda se
   desbordaba 85 px y las cámaras pisaban el resumen.
   Esta capa reordena Texto e Imagen a video con la MISMA
   organización de la tableta vertical: riel fino a la
   izquierda, previa con fracción generosa, tira del prompt
   bajo la previa, mitad inferior con el panel partido en
   dos sub-columnas (corte tras Proporción), la columna
   derecha anclada a la CIMA de la mitad inferior (no al
   50 % de la pantalla) y Resumen + Generar clavados al
   fondo. Tamaños compactados a la escala del teléfono,
   medidos con sonda; escritorio y tableta no se tocan.
   ============================================================ */
@media (max-width: 599px) {
  /* --- Rejilla: la previa respira (fracción de la tableta)
     y la mitad inferior recibe lo que el contenido pide --- */
  :is(#t2v-screen, #i2v-screen) .tpl-screen-inner {
    grid-template-rows: auto minmax(0, .45fr) auto minmax(0, 1fr);
    row-gap: 8px;
    padding: 0 12px 10px;
  }
  #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .20fr) auto minmax(0, 1fr); }

  /* --- Tira del prompt (bajo la previa) compacta --- */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] { padding: 7px 12px 8px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 3px; font-size: 12px; }
  #t2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 46px; min-height: 46px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { margin: 1px 0 0; font-size: 10.5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 4px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-btn { padding-top: 7px; padding-bottom: 7px; }
  /* Imagen a video: su tira (foto + referencia + prompt) fina */
  #i2v-screen [data-cz-panel="1"] .dropzone { padding: 2px 12px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .big { font-size: 13px; }
  #i2v-screen .ps-add-ref { padding: 1px 12px; }
  #i2v-screen .ps-add-title { font-size: 12px; }
  #i2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 42px; min-height: 42px; }

  /* --- Sub-columna izquierda: la pila completa (Nivel /
     Duración / Resolución / alerta / Proporción) compacta.
     Medido a 402×712: la pila se pasaba 13 px (el seg de
     Proporción terminaba 7 px bajo el panel y su scrollHeight
     era 338 contra 325): se recortan 18 px de la pila (padding
     de los seg, márgenes de etiqueta y alto de las formas de
     Proporción) para que quepa SIN scroll, con aire. --- */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] { padding: 7px 11px 4px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label { font-size: 10.5px; margin: 3px 0 3px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label:first-child { margin-top: 0; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg-btn { padding: 3px 2px; font-size: 11.5px; }
  :is(#t2v-screen, #i2v-screen) :is(#t2v-silent-warn, #i2v-silent-warn) {
    font-size: 10.5px;
    line-height: 1.28;
    padding: 5px 8px;
    margin-top: 4px;
  }
  :is(#t2v-screen, #i2v-screen) .asp-cards { gap: 5px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-card { padding: 4px 3px 3px; gap: 1px; border-radius: 10px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-shape { height: 12px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-916 { width: 10px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-11 { width: 17px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-word { font-size: 11px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-num { font-size: 9.5px; }

  /* --- Sub-columna derecha anclada a la cima de la mitad
     inferior (como en la tableta vertical: Avanzado sentado
     dentro de la zona, Cámara debajo, cierre al fondo) --- */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv { top: calc(52% + 5px); padding: 0 12px 4px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv summary { padding: 6px 0 2px; font-size: 12px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label { top: calc(52% + 40px); font-size: 10px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips { top: calc(52% + 55px); gap: 3px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip { height: 35px; font-size: 9px; gap: 2px; padding: 4px 3px 3px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 15px; height: 15px; }

  /* --- Resumen + Generar clavados al fondo, en una línea --- */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost { margin: 0 0 5px; padding: 5px 8px; font-size: 10.5px; line-height: 1.25; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost-mode { font-size: 10.5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-balance { font-size: 10.5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost b { font-size: 17px; line-height: 1.15; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-generate {
    min-height: 46px;
    font-size: 13.5px;
    white-space: nowrap;
    padding: 10px 8px;
  }
}

/* ============================================================
   fixes123 · CORRECCIÓN de Siamel (2026-10-30): las SEIS
   carpetas COMPLETAS en pantalla (3 columnas × 2 filas),
   sin que la segunda fila se corte ni haya que bajar.
   Medido antes: en escritorio 1440×900 la carpeta medía
   424,7×754,9 (9/16 a todo el ancho de columna) y la segunda
   fila terminaba en y=1671,9 con la vista en 886 (scrollH
   1609 contra clientH 823); en tableta horizontal 1180×820,
   igual (fila 2 hasta 1363,7 con la vista en 806). La
   pantalla de Estilos, en tableta horizontal, dejaba la
   sexta familia en y=847,9 con el viewport en 820.
   El tamaño de cada tarjeta se calcula ahora contra el
   ÁREA REAL: la vista es una columna flexible (pista +
   buscador fijos, la parrilla recibe el resto) y la
   parrilla reparte su alto en DOS filas iguales; cada
   tarjeta ocupa el alto de su fila y conserva su
   proporción (9/16 en Plantillas — la portada completa de
   fixes117 — y 1/1.05 en las familias de Estilos), centrada
   en su columna. Aplica a escritorio, tableta horizontal y
   tableta vertical; el teléfono no cambia y la sección de
   Estilos del INICIO tampoco (no es esta pantalla).
   ============================================================ */
@media (min-width: 600px) {
  /* --- Plantillas: la biblioteca (riel | biblioteca) --- */
  html:not(.force-mobile) #ts-folders-view { display: flex; flex-direction: column; }
  html:not(.force-mobile) #folder-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  html:not(.force-mobile) #folder-grid .folder-card { height: 100%; justify-self: center; }

  /* --- Estilos: la pantalla queda atada al alto real y las
     seis familias se reparten el área en 3×2 --- */
  html:not(.force-mobile) #sty-screen .tpl-screen-inner {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
  }
  html:not(.force-mobile) #ss-families-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  html:not(.force-mobile) #ss-family-list {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  html:not(.force-mobile) #ss-family-list .sty-gcard--fam { height: 100%; justify-self: center; }
  html:not(.force-mobile) #sty-search-grid { min-height: 0; overflow-y: auto; }
  html:not(.force-mobile) #ss-family-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* ============================================================
   fixes123 · CORRECCIÓN de Siamel (2026-10-30): la campanita
   de avisos era INVISIBLE en el MODO CLARO — su trazo es
   blanco (#bell-btn { color: #fff }, fijado así para el modo
   oscuro a su pedido) y sobre el fondo claro (#f5f6fd) no se
   veía en reposo; solo aparecía al tocarla (el estado .active
   sí la repinta de acento). En modo claro queda SIEMPRE
   visible con el acento de la app del tema claro (#6d4aff,
   contraste ≈ 5,9:1 sobre el fondo). En modo oscuro no se
   toca: sigue blanca, como él la fijó.
   ============================================================ */

/* fixes123 · guarda de las parrillas con [hidden]: los
   buscadores de Plantillas y Estilos apagan y encienden sus
   parrillas con el atributo hidden (app.js), pero la regla
   de autor «display: grid» de las propias parrillas lo
   anulaba (la parrilla «oculta» seguía renderizada, a 0 px
   en flujo normal — invisible — pero ocupando su parte al
   volverse flexible su contenedor). Con la guarda, el
   atributo manda como el JS siempre quiso: en reposo la
   parrilla de búsqueda no ocupa nada y al buscar se oculta
   la de carpetas, en las tres superficies y en el teléfono. */
#folder-grid[hidden],
#ss-family-list[hidden] { display: none !important; }

/* ============================================================
   fixes123 · PASADA DE MODO CLARO + PÍLDORA (órdenes de
   Siamel, 2026-10-30). En modo oscuro nada de esto cambia.
   ------------------------------------------------------------
   1) MENÚ INFERIOR en claro: las pestañas llevaban #c9cef2
      (y la activa, blanco puro) de la capa de escritorio —
      medido: contraste 1,06 sobre el fondo claro, ilegibles.
      En claro: tinta oscura legible y activa en el acento.
   2) LUNA del interruptor de tema: en claro va RELLENA de
      oscuro (dentro y contorno) para distinguirse del fondo.
   3) LISTA DE IDIOMAS: fondo OSCURO siempre, con su texto
      claro encima, en los dos modos (antes seguía al tema y
      en claro salía casi blanca).
   4) LA ETAPA DE CREACIÓN (pantallas .cz-screen) es una
      superficie OSCURA por diseño en los dos temas, pero sus
      etiquetas cuelgan de las variables del tema: en claro
      --ink/--ink-2 pasaban a oscuros y quedaban sobre panel
      oscuro — medido: «Avanzado» contraste 1,06 y el texto
      del prompt 1,08 (invisibles); etiquetas de campo 2,47.
      En claro, la etapa conserva su paleta oscura completa:
      se ve EXACTAMENTE como en modo oscuro.
   ============================================================ */
[data-theme="light"] .tab { color: #55557a; }
[data-theme="light"] .tab.active { color: #6d4aff; }
html[data-theme="light"]:not(.force-mobile) .tab { color: #55557a; }
html[data-theme="light"]:not(.force-mobile) .tab.active { color: #6d4aff; }
[data-theme="light"] .tabbar { border-top-color: #e7e7f3; }

[data-theme="light"] .theme-toggle .ic-moon { color: #23235e; fill: #23235e; }

.lang-dd-list {
  background: #131636;
  color: #eef0ff;
  border-color: rgba(255, 255, 255, 0.16);
}
.lang-dd-item { color: #eef0ff; }
.lang-dd-item:hover { background: rgba(139, 123, 255, 0.22); }
.lang-dd-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }

/* interfaz: la consola E ya NO se fuerza a oscuro en tema
   claro — sus superficies usan las variables --cz-* y siguen
   el tema elegido, con la misma estructura. */


/* ============================================================
   fixes123 · REDISEÑO DE LA PÍLDORA DE CRÉDITOS del
   encabezado (orden de Siamel): la píldora va sobre una
   FRANJA con el degradado de la casa MORADO→AZUL
   (linear-gradient(90deg, #8b3dff, #3d8bff), el de los
   botones Comprar), en claro y en oscuro. Dentro: los
   números en dorado #ffc233 (regla permanente del dinero)
   y la palabra «créditos» en blanco. La sub-píldora promo
   pierde su fondo dorado: su número va en dorado y la
   palabra «promo» va en BLANCO sobre la franja —
   DECISIÓN FINAL de Siamel (2026-10-30): tras ver las
   alternativas (su morado #8b7bff se pierde sobre el
   degradado; también el azul oscuro #151532 y el dorado),
   confirmó sobre la ilustración original: «Blanco está
   bien». En las demás superficies «promo» sigue en su
   morado #8b7bff de siempre.
   ============================================================ */
.app-header .balance-chip {
  background: linear-gradient(90deg, #8b3dff, #3d8bff);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: 0 4px 14px rgba(91, 76, 255, 0.45);
}
.app-header .balance-chip .balance-num { color: #ffc233; }
.app-header .balance-chip .balance-promo {
  background: none;
  color: #fff;
  padding: 0;
  margin-left: 3px;
}
.app-header .balance-chip .balance-promo .bp-num { color: #ffc233; font-weight: 800; }
.app-header .balance-chip .balance-promo .bp-word { color: #fff; font-weight: 700; }

/* fixes123 · pasada de modo claro (caso de Siamel): la
   franja del PAQUETE DE PRUEBA es una tarjeta OSCURA en los
   dos temas (degradado #141a48→#0c1030), pero su letra
   menuda (.tb-micro) y el «USD» del precio cuelgan de
   --ink-2, que en claro pasa a #4e5270: medido sobre la
   tarjeta, contraste ≈ 1,9 — no se leen. El título (.tb-
   title, --ink) sufre lo mismo. En claro conservan sus
   tonos del modo oscuro; en oscuro no cambia nada. */
[data-theme="light"] .trial-banner .tb-title { color: #ffffff; }
[data-theme="light"] .trial-banner .tb-micro { color: #aab1da; }
[data-theme="light"] .trial-banner .tb-price small { color: #aab1da; }

/* fixes123: estado de verificación en la tarjeta de
   Seguridad (Ajustes) — la marca «✓» en el verde de la app. */
#st-verify-state { color: var(--ok); font-weight: 800; }
#st-security .verify-resend { margin-top: 8px; }

/* ============================================================
   fixes123 · carpeta «Mis videos» al final del riel (orden de
   Siamel): al tocarla, SIN salir de la pantalla de creación,
   el cuadro grande de la vista previa se convierte en el
   reproductor con los videos del usuario (elegir y ver ahí
   mismo). En Plantillas el panel cubre el área principal de
   la biblioteca. El invitado no llega aquí: su toque abre la
   ventana de crear cuenta (regla de invitado, en app.js).
   ============================================================ */
.cz-side-item.cz-myvid-btn.active { background: var(--accent-soft); color: var(--ink); }

/* ============================================================
   fixes123 · TABLETA VERTICAL: celdas de parrilla 3×3
   (ajuste de Siamel): la biblioteca real tiene SEIS carpetas;
   en vertical se dimensionan como una parrilla de TRES filas
   — tarjetas más pequeñas, las seis completas en las dos
   primeras filas — sin inventar carpetas que no existen.
   En horizontal y escritorio queda el 3×2 del bloque anterior.
   ============================================================ */
@media (min-width: 600px) and (orientation: portrait) {
  html:not(.force-mobile) #folder-grid { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  html:not(.force-mobile) #ss-family-list { grid-template-rows: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   fixes123 · RENGLÓN DE SALDO DEL MENÚ PRINCIPAL en MODO
   CLARO (punto 10, medido en el rig): la regla del dinero se
   cumple — números dorados #ffc233 y «promo» en su morado
   #8b7bff en ambos temas — pero la palabra «créditos» va en
   blanco por la regla general y el renglón del menú va sobre
   panel BLANCO en modo claro (medido: blanco sobre
   rgb(255,255,255), ilegible). Solo en claro, la palabra va
   en la tinta del tema; en oscuro queda blanca sobre su
   panel oscuro, como siempre.
   ============================================================ */

/* ============================================================
   fixes123 · PROPORCIÓN PREVIA/PROMPT (orden de Siamel,
   2026-10-30): la composición vertical debe quedar TAL CUAL
   su foto — la previa claramente MÁS GRANDE que la franja
   del prompt — en el teléfono (medida real 402×712) y en la
   tableta vertical. Medido antes: la foto (la composición
   de tableta a 820×1180) da previa 395 px contra franja de
   175 px = 2,26:1; el teléfono había quedado en 143 contra
   146 = 0,98:1 (pareja, su queja). La vía que él ordenó:
   ESCALAR HACIA ABAJO iconos y letras de la composición
   hasta que el acomodo de la foto quepa en la medida real,
   sin re-fluir el diseño. Las etiquetas de Cámara quedan en
   su mínimo legible ya aceptado (9 px teléfono / 10,5 px
   tableta: no bajan). Escritorio y tableta horizontal no
   se tocan.
   ============================================================ */
@media (max-width: 599px) {
  /* --- Encabezado y riel a menor escala --- */
  .cz-screen .tpl-screen-head,
  .cz-screen .create-screen-head { padding: 8px 14px 7px; }
  .cz-screen .cz-side { gap: 5px; padding: 7px 5px; }
  .cz-screen .cz-side-item { padding: 5px 2px; }
  .cz-screen .cz-side-ic { width: 31px; height: 31px; }
  .cz-screen .cz-side-ic svg { width: 17px; height: 17px; }

  /* --- Rejilla: la fila de la previa recibe el peso --- */
  :is(#t2v-screen, #i2v-screen) .tpl-screen-inner { grid-template-rows: auto minmax(0, .68fr) auto minmax(0, 1fr); }
  #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .38fr) auto minmax(0, 1fr); }

  /* --- Franja del prompt más pequeña --- */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] { padding: 6px 12px 7px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 2px; font-size: 11px; }
  #t2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 36px; min-height: 36px; font-size: 14px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { margin: 0; font-size: 10px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 3px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-btn { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
  /* Imagen a video: sus zonas de foto, más finas */
  #i2v-screen [data-cz-panel="1"] .dropzone { padding: 1px 12px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .big { font-size: 12px; }
  #i2v-screen .ps-add-ref { padding: 0 12px; }
  #i2v-screen .ps-add-title { font-size: 11px; }
  #i2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 34px; min-height: 34px; font-size: 14px; }

  /* --- Mitad inferior a menor escala: cede alto a la previa --- */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] { padding: 5px 11px 4px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label { font-size: 10px; margin: 2px 0 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg-btn { padding: 2px 2px; font-size: 11px; }
  :is(#t2v-screen, #i2v-screen) :is(#t2v-silent-warn, #i2v-silent-warn) { font-size: 10px; line-height: 1.24; padding: 4px 8px; margin-top: 3px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-card { padding: 3px 3px 2px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-shape { height: 9px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip { height: 33px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost b { font-size: 16px; }
}

@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  /* --- Rejilla: la previa crece a costa del aire inferior --- */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .tpl-screen-inner { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr); }
  html:not(.force-mobile) #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .75fr) auto minmax(0, 1fr); }

  /* --- Franja del prompt más pequeña --- */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] { padding: 9px 16px 11px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 4px; font-size: 12.5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { height: 46px; min-height: 46px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { margin: 2px 0 0; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 5px; }
  /* Imagen a video: sus zonas de foto, más finas */
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .dropzone { padding: 8px 14px; }
  html:not(.force-mobile) #i2v-screen .ps-add-ref { padding: 6px 14px; }
  /* Imagen a video: cuadros de cámara algo más bajos para que
     la columna derecha quepa con la previa mayor (su letra
     queda en 10,5 px, el mínimo legible de esta superficie) */
  html:not(.force-mobile) #i2v-screen .cz-chip { height: 47px; }
  html:not(.force-mobile) #i2v-screen .cz-chip::before { width: 19px; height: 19px; }
}

/* --- fixes123 · proporción previa/prompt, corrección del
   rig: re-sentar las anclas de la columna derecha de la
   tableta vertical (la fila 4 bajó al crecer la previa) y
   segundo escalón de escala en el teléfono --- */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  html:not(.force-mobile) #t2v-screen [data-cz-panel="2"] > .cz-adv { top: calc(55% + 65px); }
  html:not(.force-mobile) #t2v-screen [data-cz-panel="2"] > .cz-cam-label { top: calc(55% + 119px); }
  html:not(.force-mobile) #t2v-screen [data-cz-panel="2"] > .cz-camchips { top: calc(55% + 139px); }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-adv { top: calc(57% + 66px); }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-cam-label { top: calc(57% + 120px); }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="2"] > .cz-camchips { top: calc(57% + 140px); }
}
@media (max-width: 599px) {
  :is(#t2v-screen, #i2v-screen) .tpl-screen-inner { grid-template-rows: auto minmax(0, .78fr) auto minmax(0, 1fr); }
  #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .44fr) auto minmax(0, 1fr); }
  #t2v-screen [data-cz-panel="1"] .t2v-field textarea { height: 34px; min-height: 34px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-note { font-size: 10px; }
}

/* --- fixes123 · proporción previa/prompt, corrección del
   rig 2 (teléfono): la pila izquierda mide 289 px naturales;
   se recortan ~5 px más de ella y se repondera la rejilla
   al mayor peso de previa que conserva scroll = 0 --- */
@media (max-width: 599px) {
  .cz-screen .tpl-screen-head,
  .cz-screen .create-screen-head { padding: 7px 14px 6px; }
  :is(#t2v-screen, #i2v-screen) .tpl-screen-inner { grid-template-rows: auto minmax(0, .74fr) auto minmax(0, 1fr); }
  #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .47fr) auto minmax(0, 1fr); }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { padding-top: 7px; padding-bottom: 7px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg-btn { padding: 1.5px 2px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-shape { height: 8px; }
}

/* --- fixes123 · proporción previa/prompt, corrección del
   rig 3 (teléfono): el rótulo del botón Generar («Generar
   video · 40 créditos», con nowrap) se cortaba en su
   columna de 152 px a 13,5 px — misma vía ordenada por
   Siamel: la letra baja hasta que el rótulo cabe entero --- */
@media (max-width: 599px) {
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-generate { font-size: 11px; padding: 10px 4px; }
}

/* ============================================================
   fixes123 · EL TELÉFONO COMO LA TABLETA VERTICAL (orden de
   Siamel, 2026-10-30): vio la captura de la tableta vertical
   (previa 453 / franja 159 = 2,85:1) y mandó adaptar ESE
   MISMO DISEÑO, tal cual, a la medida del teléfono — en la
   foto del teléfono (210 / 122 = 1,73:1) «donde van los
   textos está muy grande». Solo capa ≤599 px y solo Texto e
   Imagen a video (la tableta NO se toca: es la referencia).
   Misma vía de siempre: iconos y letras más pequeños, sin
   re-fluir; la letra de los cuadros de Cámara queda en su
   mínimo legible ya aceptado (9 px).
   ============================================================ */
@media (max-width: 599px) {
  /* Encabezado de estas dos pantallas, un punto más fino */
  :is(#t2v-screen, #i2v-screen) .tpl-screen-head { padding: 5px 14px 4px; }

  /* Rejilla: la previa manda como en la tableta; la mitad
     inferior recibe solo lo que su contenido compactado pide */
  :is(#t2v-screen, #i2v-screen) .tpl-screen-inner {
    grid-template-rows: auto minmax(0, 1.12fr) auto minmax(0, 1fr);
    row-gap: 6px;
  }
  #i2v-screen .tpl-screen-inner { grid-template-rows: auto minmax(0, .83fr) auto minmax(0, 1fr); }

  /* Franja del prompt: mismo acomodo interno (rótulo,
     área de texto, contador, fila «Prompt con IA»), más fina */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] { padding: 5px 12px 5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] > .t2v-label { line-height: 1.25; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea {
    display: block;
    height: 30px; min-height: 30px; padding-top: 5px; padding-bottom: 5px;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count { line-height: 1.3; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow { margin-top: 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-btn { padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
  /* Imagen a video: sus zonas de foto, más finas */
  #i2v-screen [data-cz-panel="1"] .dropzone { padding: 0 12px; }
  #i2v-screen [data-cz-panel="1"] .dropzone .big { font-size: 11.5px; }

  /* Mitad inferior: la pila izquierda cede alto a la previa
     (etiquetas con menos aire, segmentos más finos, la
     alerta «Sin sonido» más compacta, Proporción más baja) */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] { padding: 4px 11px 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label { margin: 1px 0; line-height: 1.3; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-seg { padding: 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg-btn { padding: .5px 2px; }
  :is(#t2v-screen, #i2v-screen) :is(#t2v-silent-warn, #i2v-silent-warn) { line-height: 1.12; padding: 3px 8px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-card { padding: 2px 3px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-shape { height: 6px; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-word { line-height: 1.2; }
  :is(#t2v-screen, #i2v-screen) .asp-cards .asp-num { line-height: 1.2; }
  /* La seg de Proporción recupera su diseño base (sin relleno
     ni borde de seg: las tarjetas mandan), como manda su
     regla original .seg.asp-cards */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .seg.asp-cards { padding: 0; border: none; }

  /* Sub-columna derecha: los cuadros de Cámara bajan de alto
     (su letra queda en 9 px) y el Resumen se compacta, para
     que la columna entera se re-siente con la nueva mitad
     inferior sin pisar el Resumen + Generar del fondo */
  :is(#t2v-screen, #i2v-screen) .cz-chip { height: 27px; gap: 1px; padding: 3px 3px 2px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 12px; height: 12px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips { gap: 2px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost { padding: 3px 8px; line-height: 1.18; margin: 0 0 4px; }

  /* Sub-columna derecha re-sentada: la mitad inferior ahora
     empieza más abajo (la previa creció); Avanzado, Cámara y
     sus cuadros bajan con ella conservando su asiento
     relativo (Avanzado sobre la cima, Cámara a su altura,
     aire sobre el Resumen) */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv { top: calc(52% + 41px); }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label { top: calc(52% + 74px); }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips { top: calc(52% + 88px); }
}

/* ===== google-auth (fixes124): botón «Continuar con Google» =====
   Diseño según las guías de Google: fondo claro SIEMPRE (también
   en el tema oscuro de la app), texto oscuro, borde suave y la
   «G» multicolor oficial en SVG (vive en el HTML). La caja nace
   oculta y app.js la pinta solo si /api/config anuncia
   google_auth; sin credenciales en el servidor no aparece. */
.auth-google{margin-top:10px}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:999px;padding:11px 14px;min-height:44px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
.google-btn:hover{background:#f8f9fa}
.google-btn:active{background:#f1f3f4}
.google-btn .google-g{width:20px;height:20px;flex:none}

/* ============================================================
   interfaz (fixes123-interfaz) · CIERRE
   ============================================================ */

/* --- El editor sigue el tema (item 11): en claro, los bordes y
   fondos translúcidos blancos de la consola se leen sobre claro
   con la línea del tema y veladuras oscuras suaves. --- */


/* --- Crear (Historia / Video a video) y Studio en lenguaje E:
   las secciones heredadas pierden el círculo numerado de
   «pasos» y se leen como bloques de la consola, con su título
   como etiqueta E. --- */
:is(#create-screen, #premium-screen) .step {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 2px 18px;
  text-align: left;
}
:is(#create-screen, #premium-screen) .step:last-of-type { border-bottom: 0; }
:is(#create-screen, #premium-screen) .step-num { display: none; }
:is(#create-screen, #premium-screen) .step-head { margin: 0 0 10px; }
:is(#create-screen, #premium-screen) .step-head h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* --- Ajustes → Seguridad: respiro lateral (item 7) --- */
#settings-screen #st-security .pf-info-row { padding-left: 18px; padding-right: 18px; }
#settings-screen #st-security .verify-resend { margin-left: 18px; }
#settings-screen #st-security .pf-edit { padding-left: 18px; padding-right: 18px; }
#settings-screen #st-security .msg { padding-left: 18px; padding-right: 18px; }

/* --- interfaz2d: la banda «Mis créditos» del menú de cuenta
   se fue con la fila (orden del dueño 2026-10-31 00:39: la fila
   se ELIMINA, no se recolorea). Sin reglas huérfanas. --- */

/* --- Selector de vistas compartido (item 6) --- */
.lv-switch { display: flex; gap: 4px; flex-wrap: wrap; }
.lv-btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
}
.lv-btn.active { background: var(--grad); border-color: transparent; color: #fff; }

/* --- Mis videos: pantalla partida (item 6) --- */
#myvid-screen .mv-inner { display: flex; flex-direction: column; height: 100dvh; }
.mv-split { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; }
.mv-player-side { flex: 0 0 auto; }
.mv-list-side { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.mv-stage {
  position: relative;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.mv-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.mv-bigplay {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 0;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(95, 92, 255, .45);
}
.mv-bigplay svg { width: 32px; height: 32px; }
.mv-bigplay[hidden] { display: none; }
.mv-hint {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  margin: 0;
  background: rgba(5, 6, 26, .72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.mv-hint[hidden] { display: none; }
.mv-title { margin: 10px 0 2px; font-size: 17px; }
.mv-meta { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; }
.mv-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mv-tools { display: flex; flex-direction: column; gap: 8px; }
.mv-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.mv-card {
  display: flex;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  align-items: center;
}
.mv-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mv-thumb { position: relative; flex: 0 0 104px; width: 104px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #000; }
.mv-thumb video, .mv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv-card-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-card-sub { font-size: 12px; color: var(--ink-2); }
.mv-list.lv-list { display: flex; flex-direction: column; gap: 8px; }
.mv-list.lv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.mv-list.lv-grid .mv-card { flex-direction: column; align-items: stretch; }
.mv-list.lv-grid .mv-thumb { flex: none; width: 100%; }
.mv-list.lv-large { display: flex; flex-direction: column; gap: 12px; }
.mv-list.lv-large .mv-card { flex-direction: column; align-items: stretch; }
.mv-list.lv-large .mv-thumb { flex: none; width: 100%; }
.mv-list.lv-compact { display: flex; flex-direction: column; gap: 5px; }
.mv-list.lv-compact .mv-card { padding: 5px 7px; border-radius: 11px; }
.mv-list.lv-compact .mv-thumb { flex-basis: 72px; width: 72px; }
.mv-list.lv-compact .mv-card-name { font-size: 13px; }
.mv-list.lv-compact .mv-card-sub { font-size: 11px; }
.mv-list.lv-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
.mv-list.lv-mosaic .mv-card { padding: 0; border: 0; border-radius: 10px; overflow: hidden; position: relative; display: block; }
.mv-list.lv-mosaic .mv-thumb { width: 100%; aspect-ratio: 4 / 5; border-radius: 0; }
.mv-list.lv-mosaic .mv-card-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 7px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 20, .82));
  opacity: 0; transition: opacity .18s ease;
}
.mv-list.lv-mosaic .mv-card:hover .mv-card-meta,
.mv-list.lv-mosaic .mv-card:focus-visible .mv-card-meta,
.mv-list.lv-mosaic .mv-card.active .mv-card-meta { opacity: 1; }
.mv-list.lv-mosaic .mv-card-name { color: #fff; font-size: 12px; white-space: normal; }
.mv-list.lv-mosaic .mv-card-sub { color: rgba(255, 255, 255, .85); font-size: 10.5px; }
.mv-modal { z-index: 30; }
@media (min-width: 1024px) {
  /* Corrección del dueño (2026-11-03): el reproductor de «Mis
     videos» es FIJO — conserva en TODAS las vistas el tamaño que
     tiene en mosaico y no se mueve ni al desplazar la lista. La
     columna izquierda queda acotada al 40 % con tope duro
     (min-width:0 + max-width): su contenido jamás la ensancha ni
     empuja el reproductor; el desplazamiento vive dentro de la
     lista y la pantalla misma no se desplaza. Mosaico pasa a un
     máximo de 3 imágenes por fila, como la cuadrícula. */
  #myvid-screen { overflow: hidden; }
  #myvid-screen .mv-split { flex-direction: row; gap: 18px; }
  #myvid-screen .mv-list-side { order: 1; flex: 0 0 40%; min-width: 0; max-width: 40%; }
  #myvid-screen .mv-player-side { order: 2; flex: 1 1 60%; min-width: 0; }
  .mv-list.lv-grid { grid-template-columns: repeat(3, 1fr); }
  .mv-list.lv-mosaic { grid-template-columns: repeat(3, 1fr); }
}

/* Panel de acciones del video seleccionado (dueño 2026-11-03):
   vive bajo los botones del reproductor, dentro de su columna;
   compacto para no tocar jamás el tamaño fijo de la pantalla. */
.mv-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mv-panel[hidden] { display: none; }
.mv-panel-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-panel-btns .btn { font-size: 12.5px; padding: 6px 10px; }
.mv-panel-btns .btn.on { border-color: #ffc233; color: #ffc233; }
.mv-ref-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mv-ref-menu[hidden] { display: none; }
.mv-ref-menu .btn { font-size: 12.5px; padding: 6px 10px; }
.mv-details { margin-top: 10px; }
.mv-details-title { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .65; margin-bottom: 4px; }
.mv-details-rows { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; }
.mv-details-rows .mv-drow { white-space: nowrap; }
.mv-details-rows .mv-drow b { font-weight: 600; opacity: .65; margin-right: 5px; }
/* Teléfono (columna apilada): el panel se adapta con su propio
   scroll interno y la lista conserva un alto mínimo usable; el
   reproductor, primero en la columna, no se mueve. */
@media (max-width: 1023px) {
  #myvid-screen .mv-panel { max-height: 30dvh; overflow-y: auto; }
  #myvid-screen .mv-list { min-height: 140px; }
}

/* --- Mis proyectos: vistas + pantalla partida en escritorio --- */
#pj-list.lv-list { display: flex; flex-direction: column; gap: 10px; }
#pj-list.lv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
#pj-list.lv-grid .pj-card { flex-direction: column; }
#pj-list.lv-grid .pj-thumb { width: 100%; height: auto; flex: none; aspect-ratio: 16 / 10; }
#pj-list.lv-large { display: flex; flex-direction: column; gap: 12px; }
#pj-list.lv-large .pj-card { flex-direction: column; }
#pj-list.lv-large .pj-thumb { width: 100%; height: auto; flex: none; aspect-ratio: 16 / 9; }
#pj-list.lv-compact { display: flex; flex-direction: column; gap: 5px; }
#pj-list.lv-compact .pj-card { padding: 6px 8px; border-radius: 12px; }
#pj-list.lv-compact .pj-thumb { width: 56px; height: 56px; flex-basis: 56px; border-radius: 9px; }
#pj-list.lv-compact .pj-card-title { font-size: 13.5px; }
#pj-list.lv-compact .pj-card-meta { font-size: 11.5px; }
#pj-list.lv-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
#pj-list.lv-mosaic .pj-card { padding: 0; border: 0; border-radius: 10px; overflow: hidden; position: relative; display: block; }
#pj-list.lv-mosaic .pj-thumb { width: 100%; height: auto; flex: none; aspect-ratio: 4 / 5; border-radius: 0; }
#pj-list.lv-mosaic .pj-card-main {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 7px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 20, .82));
  opacity: 0; transition: opacity .18s ease;
}
#pj-list.lv-mosaic .pj-card:hover .pj-card-main,
#pj-list.lv-mosaic .pj-card:focus-visible .pj-card-main { opacity: 1; }
#pj-list.lv-mosaic .pj-card-title { color: #fff; font-size: 12px; white-space: normal; }
#pj-list.lv-mosaic .pj-card-meta { color: rgba(255, 255, 255, .85); font-size: 10.5px; }
@media (min-width: 1024px) {
  #pj-list.lv-grid { grid-template-columns: repeat(3, 1fr); }
  #pj-list.lv-mosaic { grid-template-columns: repeat(4, 1fr); }
  html:not(.force-mobile) #proj-screen.pj-split .tpl-screen-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 18px;
  }
  html:not(.force-mobile) #proj-screen.pj-split .tpl-screen-head { grid-column: 1 / 3; }
  html:not(.force-mobile) #proj-screen.pj-split #pj-msg { grid-column: 1 / 3; }
  html:not(.force-mobile) #proj-screen.pj-split #pj-list-view { min-height: 0; overflow-y: auto; }
  html:not(.force-mobile) #proj-screen.pj-split #pj-detail-view { min-height: 0; overflow-y: auto; }
}

/* --- Escritorio a ancho completo con REAJUSTE de proporciones
   (item 10): inicio y bibliotecas ocupan toda la pantalla y el
   carrusel del inicio, las tarjetas y los textos se escalan al
   nuevo ancho en el mismo paso. --- */
@media (min-width: 1024px) {
  html:not(.force-mobile) .wrap { max-width: none; padding-left: 34px; padding-right: 34px; }
  /* El carrusel del inicio es .hero-card (la vieja .showcase-box
     ya no existe en el HTML): al pasar el inicio a ancho
     completo, la tarjeta se re-proporciona — tope de ancho y
     alto en relación cercana a 2:1, centrada — para que el
     video 16:9 no se recorte en una franja panorámica. */
  html:not(.force-mobile) .hero-card { max-width: 1120px; height: 520px; margin-left: auto; margin-right: auto; }
  html:not(.force-mobile) .home-sec .sty-grid--home { max-width: none; }
  html:not(.force-mobile) .cat-list,
  html:not(.force-mobile) .family-grid { max-width: none; }
  html:not(.force-mobile) .pricing-grid { max-width: 1240px; }
  html:not(.force-mobile) #tpl-screen .tpl-screen-inner,
  html:not(.force-mobile) #sty-screen .tpl-screen-inner,
  html:not(.force-mobile) #proj-screen .tpl-screen-inner,
  html:not(.force-mobile) #myvid-screen .tpl-screen-inner { max-width: none; }
  /* Estilos: FILAS COMPLETAS (item 13c) — la rejilla se
     dimensiona para enseñar exactamente dos filas enteras
     (8 videos en escritorio) sin media fila cortada abajo;
     el resto se alcanza desplazando con encaje por filas. */
  /* La lista de FAMILIAS conserva su diseño previo (rellena el
     alto con filas iguales: 6 familias = 3×2 completas). La
     regla de filas completas aplica a la lista de ESTILOS
     (carpetas y videos): 4 columnas y una altura útil de
     exactamente DOS filas — nunca media fila cortada; el
     resto se alcanza desplazando con encaje por filas. */
  /* CORRECCIÓN 2026-11-03 (reporte del dueño en video: al abrir
     una carpeta de Estilos, la fila de abajo sale RECORTADA):
     el bloque N1 (V-18, más abajo) agrandó las filas del interior
     a calc((100dvh - 128.188px) / 2) y pasó a 5 columnas, pero
     el max-height de ESTE bloque quedó dimensionado para la fila
     antigua (100dvh - 244px): a 1440×900 la ventana de la rejilla
     medía 670 px y solo cabía UNA fila entera (385,9) + 272,1 px
     de la segunda — la fila visible de abajo quedaba cortada en
     reposo y en los encajes intermedios, y al final del scroll
     la última fila quedaba a 2 px del borde (padding-bottom: 2px),
     sin aire. El max-height pasa a seguir a la fila VIGENTE:
     dos filas enteras (100dvh - 128.188px) + la separación entre
     filas (12 px) + el aire inferior (padding-bottom: 14 px,
     coherente con el padding-bottom de la pantalla) =
     calc(100dvh - 102.188px). Con esa cuenta el final del scroll
     es además un punto exacto de encaje (múltiplo del paso de
     fila) y la última fila se ve completa con 14 px de margen.
     Medido en el rig antes/después (1440×900 y 1280×832). */
  html:not(.force-mobile) #ss-style-list {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc((100dvh - 244px) / 2);
    max-height: calc(100dvh - 102.188px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    padding-bottom: 14px;
  }
  html:not(.force-mobile) #ss-style-list .sty-gcard {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    scroll-snap-align: start;
  }
}
@media (min-width: 1440px) {
  html:not(.force-mobile) .home-sec .sec-title { font-size: 30px; }
  html:not(.force-mobile) .tpl-row .tpl-card { flex-basis: 300px; }
  html:not(.force-mobile) .hero-card { max-width: 1240px; height: 560px; }
}

/* ===== INTERFAZ2 · ESTADO ACTIVO ÚNICO (ambos temas) =====
   El estado seleccionado/activo de todo chip, botón y tarjeta usa
   el degradado morado→azul del dueño con texto blanco, en oscuro
   y en claro (decisión 2026-10-30 19:51). El modo claro sigue la
   ESPEC FINAL del dueño (2026-10-30 20:56): solo cambia el fondo
   a blanco; los componentes conservan sus colores oscuros y los
   textos directos sobre el fondo se oscurecen en el bloque
   «INTERFAZ2 · CROMO SOBRE BLANCO» al final de este archivo. */
.cz-screen .cz-chip.on { background: var(--grad); border-color: transparent; color: #fff; }
.cz-screen .asp-cards .asp-card.active { background: var(--grad); border-color: transparent; color: #fff; }
.dchip.selected { background: var(--grad); border-color: transparent; color: #fff; }
.cz-screen .opt.selected {
  background: linear-gradient(120deg, rgba(168, 85, 247, .22), rgba(56, 189, 248, .22));
  border-color: #7c5cff;
  box-shadow: 0 0 0 1px #7c5cff, 0 10px 22px rgba(124, 92, 255, .20);
}

/* ===== INTERFAZ2 · CROMO SOBRE BLANCO (modo claro) =====
   ESPEC FINAL del dueño (2026-10-30 20:56): en claro el fondo es
   blanco y SOLO cambian los textos e iconos que van directos
   sobre ese fondo — cabecera (logo e iconos oscuros), saludo y
   títulos de sección (oscuros), subtítulos (gris oscuro legible)
   y enlaces en morado. Todo lo demás — tarjetas, paquetes,
   píldoras, banners, consolas — conserva sus colores oscuros. */
html[data-theme="light"] .app-header .icon-btn { color: #14142b; }
html[data-theme="light"] .app-header { border-bottom-color: #e7e7f3; }
html[data-theme="light"] .app-header .logo-word { color: #14142b; }
html[data-theme="light"] .app-header .header-greet { color: #14142b; border-left-color: #d9d7ce; }
html[data-theme="light"] .sec-head h2 { color: #14142b; }
html[data-theme="light"] .sec-head .sec-sub { color: #55557a; }
html[data-theme="light"] .sec-head a { color: #6d4aff; }
html[data-theme="light"] .closing h2 { color: #14142b; }
html[data-theme="light"] footer { color: #55557a; }
html[data-theme="light"] footer .f-fine { color: #55557a; }
html[data-theme="light"] #packs-hint { color: #55557a; }
html[data-theme="light"] .pk-note { color: #55557a; }
/* Las tarjetas de modos son translúcidas por diseño (se leen
   oscuras sobre el fondo oscuro); sobre el fondo blanco conservan
   su identidad oscura con el panel del tema. */
html[data-theme="light"] .act-card { background: #12173d; }
/* Pantallas de hoja (tpl-screen): su fondo es el de la página
   (blanco en claro); títulos y subtítulos de su cabecera y los
   textos de identidad van oscuros; los avisos de error/éxito que
   caen sobre el fondo usan tonos oscuros legibles. */
html[data-theme="light"] .tpl-screen { --err-ink: #b3261e; --ok-ink: #0b6e3f; }
html[data-theme="light"] .tpl-screen .ts-title { color: #14142b; }
html[data-theme="light"] .tpl-screen .ts-sub { color: #55557a; }
html[data-theme="light"] .pf-id-name { color: #14142b; }
html[data-theme="light"] .pf-id-email { color: #55557a; }
html[data-theme="light"] .auth-title { color: #14142b; }
html[data-theme="light"] .tpl-screen .link-btn { color: #6d4aff; }
/* La campana es blanca por fijación del dueño sobre la cabecera
   oscura; sobre la cabecera blanca del tema claro va oscura. */
html[data-theme="light"] #bell-btn { color: #14142b; }
/* Mis videos: título y metadatos del reproductor van sobre el
   fondo de la pantalla (blanco en claro). */
html[data-theme="light"] .mv-title { color: #14142b; }
html[data-theme="light"] .mv-meta { color: #55557a; }
html[data-theme="light"] .tpl-screen .ts-hint { color: #55557a; }
/* La luna del conmutador de tema vive dentro de filas oscuras:
   en claro se pinta dorada para que se lea sobre la fila. */
html[data-theme="light"] .theme-toggle .ic-moon { color: #ffc233; fill: #ffc233; }
/* La biblioteca de Plantillas es pantalla de navegación (no una
   consola de edición): en claro su fondo va blanco como el resto;
   sus tarjetas y su bloque de saldo ya son oscuros, y los textos
   del riel y de la previa que caen sobre el fondo van oscuros. */
html[data-theme="light"] #tpl-screen { background: #ffffff; }
/* interfaz2c: FUERA las reglas que oscurecían el texto del
   riel de Plantillas (resto del experimento «riel aclarado»):
   el riel es un COMPONENTE y en claro se pinta oscuro sobre
   el fondo blanco, con sus textos claros de siempre (la
   regla del componente va en la sección D del bloque 2c). */
html[data-theme="light"] #tpl-screen .cz-preview-title { color: #14142b; }

/* ============================================================
   interfaz2c — TELÉFONO EN HORIZONTAL (ancho 600–1023.98px,
   alto ≤500px, orientación horizontal): el rango 740×360 /
   844×390 / 932×430 NO existía en ninguna composición y el
   dueño lo reportó el 2026-10-30: «los precios se salen de
   cuadro». Causa medida con el rig (rig-landscape, ANTES):
   · Con force-mobile (932 y 844: iPhone que anuncia ≥768px
     de ancho) la banda de tableta va tras html:not(.force-mobile)
     y la de teléfono exige ≤599px: la consola caía a la vista
     de PASOS de fixes122 con el panel 3 (resumen + Generar)
     oculto en las SEIS consolas.
   · Sin force-mobile (740) mandaba la banda de tableta, que
     supone pantallas altas: el saldo del riel terminaba a
     533px en una vista de 360 (fuera del riel y de la
     pantalla) y el panel 3 de Historia/Video a video/Studio
     medía 519–680px de alto empezando hasta 332px POR ENCIMA
     del viewport: los precios, literalmente fuera de cuadro.
   Arreglo: la composición de columna derecha de la banda de
   tableta (riel | etapa+tira | panel que desplaza con el
   resumen clavado opaco y su reserva sincronizada) se aplica
   SIN la puerta de force-mobile, solo en este rango, y se le
   suma la capa de altura corta: riel compacto contenido y
   panel 3 con tope de altura y desplazamiento interno, para
   que el resumen y el botón sean siempre alcanzables.
   El teléfono vertical (≤599px), la tableta y el escritorio
   quedan fuera de esta media: no se tocan.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
  /* --- Fuera pasos: todos los paneles visibles a la vez --- */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel] { display: flex !important; }
  .cz-screen .cz-top,
  .cz-screen .cz-stepsnav,
  .cz-screen .cz-stepfoot { display: none; }

  /* --- Riel fino de iconos (composición de la banda, sin puerta) --- */
  .cz-screen .cz-side {
    grid-area: side;
    position: static;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    padding: 10px 8px;
  }
  .cz-screen .cz-side-title { display: none; }
  .cz-screen .cz-side-item {
    justify-content: center;
    padding: 7px 2px;
    border-radius: 13px;
    width: 100%;
  }
  .cz-screen .cz-side-item span:not(.cz-side-ic) { display: none; }
  .cz-screen .cz-side-ic { width: 36px; height: 36px; border-radius: 11px; }
  .cz-screen .cz-side-ic svg { width: 19px; height: 19px; }
  .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"],
  .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"],
  .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"],
  .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"],
  .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"],
  .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] {
    background: var(--grad);
    box-shadow: 0 12px 26px rgba(95, 92, 255, .38);
  }
  .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic,
  .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic,
  .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic,
  .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic,
  .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic,
  .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic {
    background: rgba(255, 255, 255, .20);
    color: #fff;
  }
  .cz-screen .cz-side-bal {
    margin-top: auto;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 8px 2px;
    text-align: center;
    align-items: center;
  }
  .cz-screen .cz-side-bal-k { display: none; }
  .cz-screen .cz-side-bal-v { font-size: 12px; }

  /* --- Vista previa --- */
  .cz-screen .cz-preview {
    grid-area: center;
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  .cz-screen .cz-preview-title { font-size: 14px; margin: 2px 0 8px; }
  .cz-screen .cz-preview-box {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-bg2));
    box-shadow: 0 24px 48px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .cz-screen .cz-preview-box::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 10px;
    height: 10px;
    background-image:
      linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .32) 1px, transparent 1px, transparent 28px);
    background-size: 100% 1px, 100% 8px;
    background-position: bottom left, bottom left;
    background-repeat: no-repeat, repeat-x;
    opacity: .55;
    pointer-events: none;
    z-index: 4;
  }
  .cz-screen .cz-preview-mode { margin: 5px 0 0; }

  /* --- Pantallas de paneles: la retícula de la banda --- */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0 14px 12px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 272px;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, auto);
    grid-template-areas: "head head head" "side center right" "side strip right";
    column-gap: 16px;
    row-gap: 12px;
    align-items: stretch;
    position: relative;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-body { display: contents; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-panel {
    flex-direction: column;
    min-width: 0;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] {
    grid-area: strip;
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--cz-panel-hi), var(--cz-panel-lo));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 9px 14px 11px;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .30);
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .lede { display: none; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] > .t2v-label { margin: 0 0 5px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-field textarea { height: 54px; min-height: 54px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] {
    grid-area: right;
    background: var(--cz-panel);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 2px 14px 146px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 123, 255, .45) transparent;
  }
  #vedit-screen [data-cz-panel="2"] { padding-bottom: 146px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="3"] {
    grid-area: right;
    align-self: end;
    z-index: 5;
    /* fondo OPACO literal, como en la banda (interfaz2-fix):
       --cz-panel computaba transparente en oscuro */
    background: #12173d;
    border: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    padding: 4px 14px 12px;
    margin-top: 0;
    justify-content: flex-end;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-cost {
    margin-top: 2px;
    padding: 7px 9px;
    font-size: 12.5px;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 11px 0 6px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .t2v-label { margin: 7px 0 4px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg { padding: 2px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg-btn { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
  :is(#t2v-silent-warn, #i2v-silent-warn, #vedit-silent-warn, #create-silent-warn) {
    font-size: 12px;
    line-height: 1.35;
    padding: 6px 10px;
    margin-top: 5px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-card { padding: 6px 5px 5px; gap: 3px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-shape { height: 22px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-word { font-size: 12px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .asp-cards .asp-num { font-size: 10.5px; }
  :is(#t2v-screen, #i2v-screen) .cz-adv { margin: 7px 0 2px; padding-bottom: 7px; }
  :is(#t2v-screen, #i2v-screen) .cz-adv summary { padding: 7px 0 2px; }
  :is(#t2v-dur, #i2v-dur) { position: relative; padding-bottom: 12px; }
  /* Cuadros de cámara dentro del panel derecho */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    display: block;
    margin: 12px 0 6px;
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 0;
  }
  :is(#t2v-screen, #i2v-screen) .cz-chip { font-size: 8.5px; line-height: 1.05; gap: 3px; padding: 5px 2px 4px; border-radius: 11px; }
  :is(#t2v-screen, #i2v-screen) .cz-chip::before { width: 18px; height: 18px; }

  /* Crear/Studio en la retícula; referencias lado a lado */
  #create-screen .create-screen-head {
    grid-area: head;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
  }
  #create-screen [data-cz-panel="2"] { padding-bottom: 400px; }
  #premium-screen [data-cz-panel="2"] { padding-bottom: 380px; }
  :is(#create-screen, #premium-screen) [data-cz-panel="1"] .t2v-field textarea { height: 54px; min-height: 54px; }
  #premium-screen [data-cz-panel="1"] .ps-engine-wrap { margin: 0 0 2px; }
  #i2v-screen [data-cz-panel="1"] .cz-refrow { display: flex; gap: 10px; align-items: stretch; }
  #i2v-screen [data-cz-panel="1"] .cz-refrow > * { flex: 1 1 0; min-width: 0; }

  /* ============ ALTURA CORTA (≤500px): lo que la banda no
     prevé. Las reglas llevan las dos puertas (force-mobile y
     su ausencia) para ganar a la banda en ambos estados. ============ */
  /* El panel 3 (resumen + Generar) nunca supera su columna:
     si su contenido es más alto que el área (Historia 594px,
     Studio 487px contra ~290px útiles), se queda clavado al
     fondo con su tope y desplaza por dentro — el resumen y el
     botón son siempre alcanzables, nada sale de cuadro. */
  html:is(.force-mobile, :not(.force-mobile)) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="3"] {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 123, 255, .45) transparent;
  }
  /* Riel compacto y CONTENIDO: con 360–430px de alto, el riel
     de la banda (7 iconos de 50px + saldo) medía ~533px y el
     saldo caía fuera de la pantalla. Iconos de 26px, huecos
     mínimos y, como garantía, desplazamiento interno del
     propio riel: el saldo queda siempre dentro. */
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-side {
    gap: 3px;
    padding: 6px 5px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-side-item { padding: 2px; }
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-side-ic { width: 26px; height: 26px; border-radius: 8px; }
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-side-ic svg { width: 14px; height: 14px; }
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-side-bal {
    padding: 4px 1px;
    border-radius: 9px;
    flex: none;
  }
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-side-bal-v { font-size: 10.5px; white-space: nowrap; }
  /* La tira (prompt) cede: el área de texto baja a 40px y la
     etapa conserva el resto del centro. */
  html:is(.force-mobile, :not(.force-mobile)) :is(#t2v-screen, #i2v-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .t2v-field textarea { height: 40px; min-height: 40px; }
  html:is(.force-mobile, :not(.force-mobile)) .cz-screen .cz-preview-title { margin: 0 0 5px; font-size: 13px; }

  /* Crear/Studio en horizontal corto: la columna derecha se
     REPARTE en dos filas —opciones arriba (desplaza) y costo
     abajo (desplaza)— en vez del resumen clavado: su panel 3
     natural (487–594px) es más alto que toda la columna
     (~290–350px) y clavado tapaba las opciones y perdía su
     propio principio. La etapa recupera la fila central. */
  html:is(.force-mobile, :not(.force-mobile)) :is(#create-screen, #premium-screen) .tpl-screen-inner {
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 46%);
    grid-template-areas: "head head head" "side center opts" "side strip cost";
  }
  html:is(.force-mobile, :not(.force-mobile)) :is(#create-screen, #premium-screen) [data-cz-panel="2"] {
    grid-area: opts;
    padding-bottom: 14px;
  }
  html:is(.force-mobile, :not(.force-mobile)) :is(#create-screen, #premium-screen) [data-cz-panel="3"] {
    grid-area: cost;
    align-self: stretch;
    justify-content: flex-start;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    margin-top: 0;
  }
}

/* ============================================================
   interfaz2c (2026-10-30) — UNIFICACIÓN DEL ESQUELETO E Y
   CORRECCIÓN DE TELÉFONO (pedidos del dueño 22:23–22:51):
   A. La ETAPA: el MARCO ocupa el 100% de su zona en las seis
      consolas y todas las superficies (nada de cajas angostas
      desplazadas por unidades de contenedor); la proporción
      elegida la aplica el propio medio dentro del marco
      (object-fit: contain, centrado, con el fondo del marco
      como relleno) y el texto vacío vive dentro del marco.
   B. Teléfono ≤599: alto SIEMPRE visible (svh; con dvh la
      barra flotante de Safari tapa el fondo y cortaba las
      tarjetas); Crear/Studio recuperan su composición
      (faltaba display:contents y los paneles no eran ítems
      de la rejilla: la pantalla explotaba a miles de px);
      la sub-columna derecha (Avanzado/Cámara) se ancla al
      PANEL 2 con píxeles, no a porcentajes del alto de la
      pantalla que derivaban entre paquetes; la píldora del
      riel contiene «500 créditos» entero; Mis videos y
      Plantillas sin sus defectos de teléfono.
   C. Tableta vertical: los mismos anclajes al panel 2 (la
      deriva de porcentajes metía la Cámara DENTRO de la
      tarjeta de Avanzado en Texto/Imagen).
   ============================================================ */

/* ---------- A. La etapa (todas las superficies) ---------- */
:is(#t2v-screen, #i2v-screen) .cz-preview { container-type: normal; }
:is(#t2v-screen, #i2v-screen) .cz-preview-box {
  flex: 1;
  min-height: 0;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
}
:is(#t2v-screen, #i2v-screen)[data-aspect] .cz-preview-box { width: auto; aspect-ratio: auto; }
.cz-screen .cz-preview-box img,
.cz-screen .cz-preview-box video { object-fit: contain; }
.cz-screen .cz-preview-box > video.cz-camdemo { object-fit: contain; }
.cz-screen .cz-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 16px;
  z-index: 1;
}
/* La vista de pasos (force-mobile en vertical) conserva su
   etapa clásica de proporción fija: no es una superficie de
   la composición E. */
@media (orientation: portrait) {
  html.force-mobile :is(#t2v-screen, #i2v-screen)[data-aspect] .cz-preview-box {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 5;
  }
}

/* ---------- B. Teléfono (≤599 px) ---------- */
@media (max-width: 599px) {
  /* Alto siempre visible: svh = el área con la croma de
     Safari presente; el fondo jamás queda tras la barra. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner,
  #tpl-screen .tpl-screen-inner { height: 100dvh; height: 100svh; }
  #myvid-screen .mv-inner { height: 100dvh; height: 100svh; }

  /* Crear/Studio: la composición de paneles de Editar por
     fin entra (los paneles vuelven a ser ítems de la
     rejilla) y la tira se acota con su propio scroll. */
  :is(#create-screen, #premium-screen) .t2v-body { display: contents; }
  :is(#create-screen, #premium-screen) [data-cz-panel="1"] {
    max-height: 30svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Sub-columna derecha anclada al panel 2 (píxeles desde
     su esquina, sobre la columna derecha de la rejilla):
     Avanzado arriba, Cámara debajo SIEMPRE visible; si
     Avanzado se abre, la Cámara baja lo que crece la
     tarjeta — nunca queda dentro ni tapada. */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] { position: relative; overflow: visible; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv {
    left: calc(100% + 10px);
    right: auto;
    top: 2px;
    width: calc(100% - 64px);
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    left: calc(100% + 10px);
    right: auto;
    top: 60px;
    width: calc(100% - 64px);
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    left: calc(100% + 10px);
    right: auto;
    top: 82px;
    width: calc(100% - 64px);
  }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"]:has(> .cz-adv[open]) > .cz-cam-label { top: 168px; }
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"]:has(> .cz-adv[open]) > .cz-camchips { top: 190px; }

  /* Editar: la nota de tarifa se presenta como línea de la
     columna de salida, no como texto suelto sobre el fondo. */
  #vedit-screen [data-cz-panel="3"] .t2v-hint {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 5px 8px;
  }

  /* La píldora del riel contiene la cifra y la palabra
     «créditos» sin cortarlas: la palabra va en su renglón,
     en cuerpo menor, dentro de la misma píldora. */
  .cz-screen .cz-side-bal { flex: none; }
  .cz-screen .cz-side-bal-v { line-height: 1.2; }
  .cz-screen .cz-side-bal-v .bal-word {
    display: block;
    font-size: 9.5px;
    line-height: 1.3;
    letter-spacing: .02em;
  }

  /* Imagen a video: respiro fijo entre las referencias y el
     prompt — ninguna etiqueta encimada. */
  #i2v-screen [data-cz-panel="1"] { gap: 7px; }
  #i2v-screen [data-cz-panel="1"] .cz-refrow > * { flex: none; }

  /* Mis videos: Descargar es un botón (sin subrayado de
     enlace), las vistas en UNA fila ordenada y el estado
     vacío compacto, como tarjeta, sin un vacío gigante. */
  #myvid-screen .mv-actions a.btn { text-decoration: none; }
  #myvid-screen .lv-switch {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #myvid-screen .lv-switch::-webkit-scrollbar { display: none; }
  #myvid-screen .lv-btn { flex: none; }
  #myvid-screen .mv-empty {
    margin: 2px 0 0;
    padding: 16px 14px;
    text-align: center;
    border: 1.5px dashed var(--line);
    border-radius: 16px;
    color: var(--ink-2);
    font-size: 14px;
  }
  #myvid-screen .mv-list-side:has(> .mv-empty:not([hidden])) .mv-list { flex: 0 0 auto; }

  /* Plantillas: la biblioteca cabe en 100vw (columnas con
     minmax(0,1fr), sin desborde horizontal) y el saldo del
     riel vive en su chip oscuro también en modo claro. */
  #tpl-screen .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tpl-screen .folder-card { min-width: 0; }
  #tpl-screen :is(#ts-folders-view, #ts-folder-view) { overflow-x: hidden; }
  html[data-theme="light"] .tpl-screen .cz-side-bal {
    background: #12173d;
    border-color: rgba(255, 255, 255, .16);
  }
  html[data-theme="light"] .tpl-screen .cz-side-bal-v .bal-word { color: #e8eaf6; }
}

/* ---------- C. Tableta vertical (600–1023.98, vertical,
   sin force-mobile): los mismos anclajes al panel 2 ------ */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner { height: 100dvh; height: 100svh; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] { position: relative; overflow: visible; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-adv {
    left: calc(100% + 12px);
    right: auto;
    top: 4px;
    width: calc(100% - 80px);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-cam-label {
    left: calc(100% + 12px);
    right: auto;
    top: 66px;
    width: calc(100% - 80px);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .cz-camchips {
    left: calc(100% + 12px);
    right: auto;
    top: 90px;
    width: calc(100% - 80px);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"]:has(> .cz-adv[open]) > .cz-cam-label { top: 182px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"]:has(> .cz-adv[open]) > .cz-camchips { top: 206px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="3"] .t2v-hint {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 5px 8px;
  }

  /* Crear/Studio/Editar: LA MISMA rejilla de mitades que
     Texto/Imagen en esta superficie (fuera la fila extra a
     ancho completo que aplastaba la etapa y partía el
     esqueleto): panel 2 abajo a la izquierda con su scroll
     y la salida (resumen + Generar) en la sub-columna
     derecha, anclada al fondo. */
  html:not(.force-mobile) :is(#create-screen, #premium-screen) .tpl-screen-inner,
  html:not(.force-mobile) #vedit-screen .tpl-screen-inner {
    grid-template-rows: auto minmax(0, .8fr) auto minmax(0, 1fr);
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="2"],
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] {
    grid-column: 1 / 3;
    grid-row: 4;
  }
  html:not(.force-mobile) :is(#create-screen, #premium-screen) [data-cz-panel="3"],
  html:not(.force-mobile) #vedit-screen [data-cz-panel="3"] {
    position: absolute;
    /* sin restos de ítem de rejilla: con grid-row/top de
       las bandas viejas, el área implícita lo aplastaba a
       altura 0 pegado al fondo */
    grid-row: auto;
    grid-column: auto;
    top: auto;
    align-self: auto;
    justify-self: auto;
    left: calc(50% + 46px);
    bottom: 14px;
    width: calc(50% - 62px);
    max-height: calc(50% - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    z-index: 7;
  }
}

/* ---------- D. MODO CLARO — REGLA ÚNICA (añadido 5) ----------
   La capa de variables claras ya repetía los valores oscuros
   en los componentes (espec final del dueño); lo que faltaba
   era el EDITOR — sus pantallas pintaban su propio fondo
   oscuro con independencia del tema — y sobraban los restos
   del «riel aclarado» de Plantillas (eliminados arriba). Aquí
   va SOLO la regla única: fondo blanco en todas las
   pantallas, componentes con sus colores del tema oscuro, y
   oscuro únicamente el texto/ícono que toca directamente el
   fondo. Nada de superficies ni tarjetas aclaradas. */
html[data-theme="light"] .cz-screen { background: #ffffff; }
html[data-theme="light"] .cz-screen .tpl-screen-inner { background: transparent; }
/* el riel, componente oscuro sobre el blanco */
html[data-theme="light"] .cz-screen .cz-side {
  background: var(--cz-panel);
  border-color: var(--cz-line);
}
html[data-theme="light"] #tpl-screen .cz-side {
  background: var(--cz-panel);
  border: 1px solid var(--cz-line);
  border-radius: 18px;
}
/* textos que tocan el fondo, dentro del editor */
html[data-theme="light"] .cz-screen .tpl-screen-title,
html[data-theme="light"] .cz-screen .cz-preview-title { color: #14142b; }
html[data-theme="light"] .cz-screen .cz-preview-mode { color: #55557a; }
html[data-theme="light"] .cz-screen .gen-note { color: #55557a; }
html[data-theme="light"] .cz-screen .cz-stepdot { color: #55557a; }
html[data-theme="light"] .cz-screen .cz-stepdot.is-active { color: #14142b; }
/* botones de cabecera del editor: componentes, quedan oscuros */
html[data-theme="light"] .cz-screen .tpl-back,
html[data-theme="light"] .cz-screen .tv-close {
  background: #12173d;
  color: #e8eaf6;
  border-color: rgba(255, 255, 255, 0.16);
}
/* Mis videos en claro: el tono elegido por el dueño (opción A,
   #f1f0fa) vive en --lib-light-bg y se aplica SOLO a esta
   pantalla; Mis proyectos conserva el blanco de la espec */
html[data-theme="light"] #myvid-screen { background: var(--lib-light-bg); }
/* «Descargar» es un botón en TODAS las superficies (el
   subrayado de enlace también se veía en escritorio) */
.mv-actions a.btn { text-decoration: none; }
/* El texto del estado vacío va DIRECTO sobre el fondo: en
   claro se oscurece (en blanco era ilegible sobre el lavanda) */
html[data-theme="light"] .mv-empty { color: #55557a; }

/* ---------- E. PÍLDORA DE SALDO DEL RIEL (añadido 10) ----------
   Orden del dueño: el saldo al pie del riel de modos lleva EL
   MISMO degradado que un botón seleccionado (morado→azul,
   var(--grad)) y su texto en blanco, como marca la regla del
   degradado — igual que la píldora del encabezado. Vale en
   oscuro y en claro, en toda superficie donde el riel muestre
   el saldo (las seis consolas y la biblioteca de Plantillas). */
.cz-screen .cz-side-bal,
html:not(.force-mobile) .cz-screen .cz-side-bal,
html[data-theme="light"] .cz-side-bal,
html[data-theme="light"] .tpl-screen .cz-side-bal,
html[data-theme="light"] .cz-screen .cz-side-bal {
  background: var(--grad);
  border-color: transparent;
}
.cz-side-bal .bal-promo,
.cz-side-bal .bal-word,
.cz-side-bal .cz-side-bal-v,
.cz-side-bal .cz-side-bal-k {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
/* interfaz2d (refinamiento del dueño 2026-10-31 00:34): sobre
   el degradado de la píldora del riel, la CIFRA va en DORADO
   #ffc233 (regla del dinero) y solo la palabra «créditos» y el
   rótulo quedan en blanco. La píldora del encabezado no cambia. */
.cz-side-bal .bal-num {
  color: #ffc233;
  -webkit-text-fill-color: #ffc233;
}

/* ============================================================
   interfaz2d — RECONSTRUCCIÓN DESDE CERO (dueño 2026-10-31):
   Historia, Editar video y Video a video clonando el sistema
   de Texto a video / Imagen a video. Solo composición de las
   tres consolas nuevas y los refinamientos de esta ronda.
   ============================================================ */

/* --- Fuentes lado a lado (panel 1 de Crear y de Editar):
   en escritorio, video | foto (e idea | foto en Historia) en
   DOS columnas como las referencias de Imagen a video; en
   teléfono se apilan (banda en pausa, flujo natural). --- */
.cz-srcrow { display: flex; flex-direction: column; gap: 14px; }
.cz-srcrow > .cz-srccol { min-width: 0; }
html:not(.force-mobile) .cz-srcrow { flex-direction: row; gap: 12px; }
html:not(.force-mobile) .cz-srcrow > .cz-srccol { flex: 1 1 0; }
#create-screen #prompt-wrap { margin-top: 14px; }

/* --- Tipografía de dos líneas del sistema nuevo (título +
   descripción / tarifa) dentro de botones y tarjetas --- */
.cz-screen .seg-btn .seg-t,
.cz-screen .kind-card .seg-t,
.cz-screen .cz-model-note .seg-t {
  display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25;
}
.cz-screen .seg-btn .seg-d,
.cz-screen .kind-card .seg-d,
.cz-screen .cz-model-note .seg-d {
  display: block; font-size: 11.5px; font-weight: 500; line-height: 1.35;
  color: var(--ink-3); margin-top: 2px;
}
.cz-screen .seg-btn.active .seg-d,
.cz-screen .kind-card.active .seg-d { color: rgba(255, 255, 255, .78); }
.cz-screen .seg-btn .seg-rate {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-3); margin-top: 1px;
}
.cz-screen .seg-btn.active .seg-rate { color: rgba(255, 255, 255, .78); }
.cz-screen .seg-btn:has(.seg-d),
.cz-screen .seg-btn:has(.seg-rate) { text-align: left; }

/* --- Nota del modelo automático (Crear) --- */
.cz-screen .cz-model-note {
  border: 1px solid rgba(255, 255, 255, .09);
  background: var(--cz-panel);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--ink-2);
}

/* --- Tipo de edición de Editar: tarjetas del sistema nuevo,
   espejo de las tarjetas de proporción de Texto a video --- */
.cz-kindseg { display: flex; flex-direction: column; gap: 8px; }
.cz-screen .kind-card {
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .09);
  background: var(--cz-panel);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cz-screen .kind-card.active {
  background: rgba(124, 92, 255, .15);
  border-color: #7c5cff;
  color: #fff;
  box-shadow: 0 0 0 1px #7c5cff, 0 10px 22px rgba(124, 92, 255, .20);
}
.cz-screen .kind-card[hidden] { display: none; }

/* --- Título del guión de Historia, en la voz del sistema --- */
#create-screen .script-panel h3 {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin: 2px 0 6px;
}

/* --- Detalle compacto del resumen de Crear --- */
#create-screen .cz-cost-detail { margin-top: 8px; line-height: 1.55; }
#create-screen .cz-cost-detail b { color: var(--ink); font-weight: 600; }

/* --- «Avanzado» flotante (dueño 2026-10-31 00:44/00:45):
   abierto, es un cuadrito SÓLIDO Y OPACO que TAPA los bloques
   siguientes (no empuja el contenido ni se mezcla con él);
   se cierra con «Guardar» y todo vuelve a estar accesible.
   Vale en la composición de escritorio (html:not(.force-mobile));
   en la banda de teléfono (en pausa) el details conserva su
   comportamiento de flujo de siempre. --- */
html:not(.force-mobile) .cz-adv { position: relative; }
html:not(.force-mobile) .cz-adv .cz-adv-pop { display: none; }
html:not(.force-mobile) .cz-adv[open] .cz-adv-pop {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  z-index: 40;
  background: #12173d;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-shadow: 0 24px 48px rgba(2, 4, 18, .55);
}
.cz-adv-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.cz-adv-save { padding: 8px 18px; }

/* --- Mis videos: el texto de estado vacío va en el área de
   la lista (tarjeta compacta), nunca descolgado al fondo.
   Regla global: la de banda que ya existía no cubría todas
   las superficies de escritorio. --- */
#myvid-screen .mv-list-side:has(> .mv-empty:not([hidden])) .mv-list { flex: 0 0 auto; }
#myvid-screen .mv-empty {
  margin: 2px 0 0;
  padding: 16px 14px;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  color: var(--ink-2);
  font-size: 14px;
}
/* En claro, el texto va DIRECTO sobre el fondo lavanda A: se
   oscurece a #55557a (la intención ya anotada en el archivo;
   la regla con ID la tapaba y el texto salía ilegible). */
html[data-theme="light"] #myvid-screen .mv-empty { color: #55557a; }

/* ===== interfaz2e (2026-10-31) — correcciones de escritorio =====
   1) SIN SOLAPE en las consolas reconstruidas (Crear / Editar /
   Studio): el resumen ya NO se clava sobre el panel de bloques.
   El panel 2 ocupa su propia fila con scroll interno y el
   resumen es una tarjeta independiente en la fila de la tira,
   bajo el panel, sin tapar ningún bloque ni dejar el hueco de
   Editar (el panel de bloques abraza su contenido). Texto a
   video e Imagen a video NO se tocan (referencia aprobada). */
@media (min-width: 1024px) {
  /* portada2 · N1 (orden del dueño 2026-10-31 14:48, «sin
     excepción»): FUERA la excepción de interfaz2e que confinaba
     el panel 2 de Crear/Editar/Studio a la fila 2 (align-self:
     start, tarjeta corta) y mandaba su panel 3 a la fila 3 como
     tarjeta separada centrada — en el Mac del dueño el resumen
     se veía FLOTANDO a mitad de panel, con espacio muerto debajo
     y sin hoja continua (efecto translúcido). Las cinco consolas
     comparten ahora el mecanismo único de la banda principal:
     panel 2 a toda la columna con reserva sincronizada por
     czSyncPanelReserve y panel 3 clavado al pie (align-self:end). */
  /* Cámara de Studio con la rejilla de cuadros de la referencia */
  html:not(.force-mobile) #premium-screen [data-cz-panel="2"] > .cz-camchips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
  }
  html:not(.force-mobile) #premium-screen .cz-chip {
    font-size: 10px;
    line-height: 1.08;
    gap: 3px;
    padding: 7px 2px 6px;
    border-radius: 12px;
  }
}

/* Mis videos: sin selección, las acciones no existen en pantalla
   (la regla de flex de la capa ancha no debe resucitarlas). */
#myvid-screen .mv-actions[hidden] { display: none; }

/* Plantillas: primera pintura digna — las portadas de carpeta se
   desvanecen sobre un marcador con brillo en cuanto cargan (ya no
   se piden con carga perezosa), en vez de rectángulos oscuros
   vacíos que parecen rotos. */
#tpl-screen .folder-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #12173d 30%, #263069 50%, #12173d 70%);
  background-size: 200% 100%;
  animation: tplCovShine 1.5s linear infinite;
}
#tpl-screen .folder-card.cov-loaded::before { display: none; }
#tpl-screen .folder-card img { opacity: 0; transition: opacity .45s ease; }
#tpl-screen .folder-card.cov-loaded img { opacity: 1; }
@keyframes tplCovShine { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* 2) ESPACIADO EN CLARO (orden del dueño 2026-10-31 02:01):
   SOLO el modo claro se pega — rendija fina y UNIFORME en las
   tres uniones (riel↔centro, centro↔panel derecho y
   etapa↔consola: el mismo ancho en píxeles). El modo oscuro NO
   se toca: sus separaciones actuales se quedan como están.
   La línea de modo de la previa pasa a ir sobre la propia etapa
   en claro, para que la rendija vertical medida entre la etapa
   y la consola sea exactamente la de la rejilla. */
@media (min-width: 1024px) {
  html[data-theme="light"]:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    max-width: 1680px;
    padding: 0 12px 12px;
    column-gap: 5px;
    row-gap: 5px;
  }
  html[data-theme="light"]:not(.force-mobile) .cz-screen .cz-preview { position: relative; top: auto; }
  html[data-theme="light"]:not(.force-mobile) .cz-screen .cz-preview-mode {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    margin: 0;
    text-align: center;
    z-index: 3;
    pointer-events: none;
  }
}

/* ===== interfaz2e-2: título del modo ARRIBA (dueño 02:04) y
   campos de escritura capaces (dueño 02:03) =====
   La barra superior queda [←] [Nombre del modo] … [✕]: el
   título se pinta con el mismo mecanismo de siempre
   (czPaintPreviewTitles) y en escritorio SALE de encima de la
   etapa — la etapa arranca en el mismo nivel superior que el
   riel y el panel derecho. En teléfono nada cambia. */
.cz-head-title { display: none; }
@media (min-width: 1024px) {
  html:not(.force-mobile) .cz-head-title {
    display: block;
    margin: 0 auto 0 4px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html:not(.force-mobile) .cz-screen .cz-preview-title { display: none; }
  /* La consola central, un poco más recogida (02:03.2) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] { padding: 8px 18px 10px; }
  /* Campos de escritura: ALTO FIJO igual a su reposo (G-1,
     dueño 2026-10-31) — el texto que sobra hace scroll DENTRO
     del campo desde la primera línea extra y nada se mueve al
     escribir. Sustituye al crecimiento con tope de interfaz2e
     (czAutogrow ya no fija altura). */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] textarea.cz-autogrow {
    height: 113px;
    min-height: 113px;
    max-height: 113px;
    overflow-y: auto;
  }
  /* G-1: los dos campos de reposo corto (Historia y Video a
     video) conservan su alto fijo de 78px. */
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] :is(#idea-input, #prompt-input) {
    height: 78px;
    min-height: 78px;
    max-height: 78px;
  }
}

/* ============================================================
   interfaz2e (02:33/02:34/02:37): RESUMEN DESPLEGABLE en todas
   las consolas + despliegue Studio de Video a video («Otros»).
   El desglose se abre HACIA ARRIBA desde la barrita del resumen
   (fija al pie del panel, junto a Generar): tarjeta opaca que
   flota sobre el panel, sin empujar el botón ni tapar el total.
   ============================================================ */
.cz-sumwrap { position: relative; }
.cz-sumbreak {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  z-index: 60; background: #12173d; color: #fff;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  padding: 14px 16px 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.cz-sb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4.5px 0; font-size: 12.5px; }
.cz-sb-label { color: rgba(255, 255, 255, .62); }
.cz-sb-value { font-weight: 600; text-align: right; }
.cz-sumbreak .cz-gold { color: #ffc233; }
.cz-sb-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 8px; padding-top: 10px; font-size: 15px; font-weight: 800; }
.cz-sb-totalnum { color: #ffc233; font-size: 20px; }
.cz-sb-usd { text-align: right; font-size: 11px; opacity: .55; margin: 2px 0 0; }
.cz-sb-note { font-size: 11.5px; color: #7ee2a8; margin: 8px 0 2px; }
.cz-sb-time { font-size: 11.5px; opacity: .75; margin: 2px 0 4px; }
.cz-sumtoggle { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px 6px; margin-left: 2px; flex: none; }
.cz-sumarrow { display: inline-block; transition: transform .18s ease; }
.cz-sumwrap.open .cz-sumarrow { transform: rotate(180deg); }
/* Duración Studio: barra de cuatro + barrita «Otros» con menú */
.cz-durrow { display: flex; gap: 8px; align-items: stretch; }
.cz-durrow .seg { flex: 1; }
.cz-otros { position: relative; flex: none; }
.cz-otros-btn {
  height: 100%; min-height: 38px; padding: 0 14px; border-radius: 12px;
  background: #1a2050; border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.cz-otros-btn.active {
  background: linear-gradient(120deg, rgba(139, 61, 255, .92), rgba(61, 139, 255, .92));
  box-shadow: 0 6px 16px rgba(95, 92, 255, .32);
}
.cz-otros-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  background: #12173d; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; padding: 6px; min-width: 120px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.cz-otros-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff; font: inherit; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cz-otros-item:hover { background: rgba(255, 255, 255, .08); }
.cz-otros-item.active { background: linear-gradient(120deg, rgba(139, 61, 255, .92), rgba(61, 139, 255, .92)); }
.cz-otros-item:disabled { opacity: .35; cursor: default; }

/* interfaz2e (02:48): la CÁMARA va SIEMPRE como en Texto a
   video — cuadros con bordes redondeados, ICONO arriba y nombre
   abajo; nada de píldoras. Iconos para los valores de la ruta
   premium (data-ps-camera / data-scam), espejo de los de
   data-cam: orbit→Órbita, push_in→Acercamiento (push),
   tracking→Seguimiento (track), aerial→Aéreo y static→Estática
   (marco fijo con punto central). */
.cz-screen .cz-chip[data-ps-camera="orbit"]::before, .cz-screen .cz-chip[data-scam="orbit"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M21 3.5V8h-4.5'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-ps-camera="push_in"]::before, .cz-screen .cz-chip[data-scam="push_in"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='M15.3 15.3 20.5 20.5'/%3E%3Cpath d='M10.8 8.2v5.2M8.2 10.8h5.2'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-ps-camera="tracking"]::before, .cz-screen .cz-chip[data-scam="tracking"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='12' r='2.4'/%3E%3Cpath d='M11.5 12H21'/%3E%3Cpath d='M17.5 8.5 21 12l-3.5 3.5'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-ps-camera="aerial"]::before, .cz-screen .cz-chip[data-scam="aerial"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='5' cy='5' r='2.1'/%3E%3Ccircle cx='19' cy='5' r='2.1'/%3E%3Ccircle cx='5' cy='19' r='2.1'/%3E%3Ccircle cx='19' cy='19' r='2.1'/%3E%3Cpath d='M6.6 6.6l2.8 2.8M17.4 6.6l-2.8 2.8M6.6 17.4l2.8-2.8M17.4 17.4l-2.8-2.8'/%3E%3C/svg%3E"); }
.cz-screen .cz-chip[data-ps-camera="static"]::before, .cz-screen .cz-chip[data-scam="static"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a1ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8'/%3E%3Cpath d='M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8'/%3E%3Cpath d='M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16'/%3E%3Cpath d='M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23b3a1ff'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) {
  html:not(.force-mobile) :is(#premium-screen, #create-screen) .cz-camchips {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0;
  }
  html:not(.force-mobile) :is(#premium-screen, #create-screen) .cz-chip {
    font-size: 9px; line-height: 1.05; gap: 3px; padding: 6px 2px 5px; border-radius: 12px;
  }
  html:not(.force-mobile) :is(#premium-screen, #create-screen) .cz-chip::before { width: 20px; height: 20px; }
}

/* ===== interfaz2e (cierre): [hidden] manda siempre — una clase
   con display:flex/grid (p. ej. .seg) anulaba el atributo y el
   bloque «oculto» se seguía viendo (el segmento de resolución
   de los efectos asomaba en el despliegue Studio de V2V) ===== */
[hidden] { display: none !important; }

/* ===== interfaz2e (cierre): el título del modo junto a la
   flecha (02:04) va DIRECTO sobre el fondo — en claro se
   oscurece como mandan las reglas puntuales del tema claro
   (2026-10-30: solo cambia el fondo); en oscuro sigue --ink. */
html[data-theme="light"]:not(.force-mobile) .cz-head-title { color: #23235e; }

/* ===== interfaz2e (cierre): EDITAR — el resumen SUBE tras los
   bloques (orden del dueño: nada de hueco). En la rejilla tpl
   el panel 3 caía estirado (471 px) con el contenido centrado;
   aquí abraza su contenido y se pega arriba de su fila, justo
   tras la tarjeta de bloques, y el panel 2 pierde la reserva
   de 150 px que solo servía al resumen clavado.
   portada2 · N1 (2026-10-31 14:48): el dueño REVOCA esta
   excepción en ESCRITORIO («la barra Resumen+Generar FIJADA AL
   PIE en TODAS las consolas sin excepción» — en su Mac el
   resumen de Editar flotaba a mitad de panel). La regla queda
   acotada a la banda 900–1023.98 (superficie de tableta, que se
   revisa en su propio pase); en ≥1024 manda la banda principal:
   panel 3 clavado al pie con align-self:end. ===== */
@media (min-width: 900px) and (max-width: 1023.98px) {
  html:not(.force-mobile) #vedit-screen [data-cz-panel="3"] {
    align-self: start;
    justify-content: flex-start;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] {
    padding-bottom: 18px;
  }
}

/* ============================================================
   interfaz2f — notas de sonido, centro de Historia, Mis videos
   (diseño aprobado) y PALETA CLARA OFICIAL (dueño 04:19).
   ============================================================ */

/* --- Nota AZUL del audio original (regla fija 03:54): con
   sonido, la explicación va en azul; el amarillo es SOLO para
   el estado sin sonido. --- */
.audio-note-blue {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  /* interfaz2f (04:48): COLORES OFICIALES de la nota «Con audio»,
     medidos por el dueño sobre su captura — fijos en todos los
     paneles y temas; la nota de sin sonido sigue amarilla. */
  background: #142553;
  color: #8EBFFA;
  border: 1px solid #2E4A7A;
}

/* --- Historia: subidas ARRIBA, texto DEBAJO (03:04) — solo
   escritorio; en el teléfono la banda apila en su orden. --- */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-srcrow { flex-wrap: wrap; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block { order: 1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-block { order: 2; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-block { order: 3; flex: 1 1 100%; }
}

/* --- Mis videos · diseño aprobado (04:09): sello de estado,
   duración sobre la miniatura, ✓ de selección, menú ⋮, orden
   y píldora del reproductor. --- */
.mv-card { position: relative; cursor: pointer; text-align: left; }
.mv-card .mv-thumb { position: relative; }
.mv-dur {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(3, 4, 18, .78); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
}
.mv-check {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: 12px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.mv-card.active .mv-check { display: flex; }
.mv-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .18); }
.mv-prog i { display: block; height: 100%; background: #5ea8ff; }
.mv-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 54px;
  font-size: 20px; color: var(--ink-3);
  background: rgba(139, 123, 255, .1);
}
.mv-status {
  flex: 0 0 auto; align-self: center;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.mv-status.st-done, .mv-status-pill.st-done { color: #3ddc84; border-color: rgba(61, 220, 132, .45); background: rgba(61, 220, 132, .1); }
.mv-status.st-proc, .mv-status-pill.st-proc { color: #7db4ff; border-color: rgba(94, 168, 255, .45); background: rgba(94, 168, 255, .1); }
.mv-status.st-fail, .mv-status-pill.st-fail { color: #ff8585; border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .1); }
.mv-kebab {
  flex: 0 0 auto; align-self: flex-start;
  background: transparent; border: 0; color: var(--ink-2);
  font-size: 17px; line-height: 1; padding: 4px 6px; cursor: pointer;
}
.mv-menu {
  position: absolute; top: 30px; right: 8px; z-index: 6;
  display: flex; flex-direction: column; min-width: 168px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px; box-shadow: var(--shadow-pop);
}
.mv-menu[hidden] { display: none; }
.mv-menu button {
  background: transparent; border: 0; color: var(--ink);
  text-align: left; font-size: 13.5px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer;
}
.mv-menu button:hover { background: rgba(139, 123, 255, .16); }
.mv-menu button.danger { color: #ff8585; }
.mv-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mv-status-pill {
  flex: 0 0 auto; margin-top: 2px;
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid transparent;
}
.mv-sort {
  flex: 0 0 auto;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 13px; font-weight: 600; padding: 8px 9px;
}
/* En las vistas de tarjetas el sello va bajo el texto. */
.mv-list.lv-grid .mv-status, .mv-list.lv-large .mv-status, .mv-list.lv-mosaic .mv-status { align-self: flex-start; }
.mv-list.lv-grid .mv-kebab, .mv-list.lv-large .mv-kebab, .mv-list.lv-mosaic .mv-kebab { position: absolute; top: 6px; right: 34px; }

/* ============================================================
   PALETA CLARA OFICIAL (dueño, 2026-10-31 04:19) — TODA la app:
   fondo general #FCFBF9; paneles y tarjetas #FEFEFE; los
   números de CRÉDITOS siempre en dorado #ffc233 (las cifras en
   dólares NO: su color normal); las letras blancas del oscuro
   pasan a oscuras sobre superficies claras y se quedan blancas
   sobre degradados y componentes oscuros.
   ============================================================ */
[data-theme="light"] {
  --bg: #FCFBF9;
  --lib-light-bg: #FCFBF9;
  --panel: #FEFEFE;
  --panel-2: #f4f2ed;
  --line: #e5e1d8;
  --ink: #23235e;
  --ink-2: #55557a;
  --ink-3: #8a87a0;
  --nav-bg: rgba(252, 251, 249, .92);
  --cz-bg: #FCFBF9;
  --cz-bg2: #FCFBF9;
  --cz-panel: #FEFEFE;
  --cz-panel-hi: #FEFEFE;
  --cz-panel-lo: #FEFEFE;
  --cz-field: #f7f5f1;
  --cz-line: #e5e1d8;
  --err-ink: #b3261e;
  --ok-ink: #0b6e3f;
}
html[data-theme="light"] body { background-color: #FCFBF9; }
html[data-theme="light"] #tpl-screen { background: #FCFBF9; }
html[data-theme="light"] .tpl-screen { background: #FCFBF9; }
html[data-theme="light"] .act-card { background: #FEFEFE; }
html[data-theme="light"] .act-card .act-title { color: #23235e; }
html[data-theme="light"] .act-card .act-sub { color: #55557a; }

/* Consolas cz en claro: superficies #FEFEFE y texto oscuro */
html[data-theme="light"]:not(.force-mobile) .cz-screen .cz-panel,
html[data-theme="light"] .cz-screen .cz-panel {
  background: #FEFEFE;
  color: #23235e;
}
html[data-theme="light"] .cz-screen .cz-head-title { color: #23235e; }
html[data-theme="light"] .cz-screen .t2v-label,
html[data-theme="light"] .cz-screen .group-label { color: #3c3c66; }
html[data-theme="light"] .cz-screen .t2v-hint,
html[data-theme="light"] .cz-screen .t2v-count { color: #6d6d8f; }
html[data-theme="light"] .cz-screen .seg { background: #efedea; }
html[data-theme="light"] .cz-screen .seg-btn { color: #3c3c66; }
html[data-theme="light"] .cz-screen .seg-btn .seg-d { color: #6d6d8f; }
html[data-theme="light"] .cz-screen .seg-btn.active { color: #ffffff; }
html[data-theme="light"] .cz-screen .seg-btn.active .seg-d { color: rgba(255, 255, 255, .85); }
html[data-theme="light"] .cz-screen .asp-card { background: #f7f5f1; color: #3c3c66; border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen .asp-card.active { border-color: #8b7bff; color: #23235e; background: #FEFEFE; }
html[data-theme="light"] .cz-screen .cz-chip { background: #f7f5f1; color: #3c3c66; border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen .cz-chip.on { border-color: #8b7bff; color: #23235e; background: #FEFEFE; }
html[data-theme="light"] .cz-screen .t2v-field textarea,
html[data-theme="light"] .cz-screen .idea-input,
html[data-theme="light"] .cz-screen textarea {
  background: #f7f5f1; color: #23235e; border-color: #e5e1d8;
}
html[data-theme="light"] .cz-screen .dropzone { background: #f7f5f1; color: #3c3c66; border-color: #cfccc2; }
html[data-theme="light"] .cz-screen .dropzone .small { color: #6d6d8f; }
html[data-theme="light"] .cz-screen .cz-info-chip { background: #f1efe9; color: #3c3c66; border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen .cz-sumwrap,
html[data-theme="light"] .cz-screen .cz-sumbar { background: #f7f5f1; color: #23235e; }
html[data-theme="light"] .cz-screen .cz-break { background: #FEFEFE; border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen .cz-break-title,
html[data-theme="light"] .cz-screen .cz-break-total-line { color: #23235e; }
html[data-theme="light"] .cz-screen .cz-break-rows div { color: #3c3c66; }
html[data-theme="light"] .cz-screen .cz-break-rows div b { color: #23235e; }
html[data-theme="light"] .cz-screen .cz-advbar { background: #f7f5f1; color: #3c3c66; border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen .audio-warn {
  /* Paquete T: sin caja también en claro; la línea usa el ámbar
     oscuro legible sobre el panel #FEFEFE (en oscuro, #ffd23e). */
  background: transparent; color: #7a5b00; border: 0;
}
html[data-theme="light"] .cz-screen .cz-side { background: #FEFEFE; }
html[data-theme="light"] .cz-screen .cz-side-item { color: #3c3c66; }
html[data-theme="light"] .cz-screen .cz-side-item.active { color: #23235e; background: #efedea; }
html[data-theme="light"] .cz-screen .cz-stage { background: #14142b; }
html[data-theme="light"] .cz-screen .cz-otros-menu { background: #FEFEFE; border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen .cz-otros-item { color: #3c3c66; }
html[data-theme="light"] .cz-screen .change-btn { color: #6d4aff; }
html[data-theme="light"] .cz-screen .fname { color: #23235e; }
html[data-theme="light"] .cz-screen .anchor-note { background: #f7f5f1; color: #3c3c66; }
html[data-theme="light"] .cz-screen .scene-list li { background: #f7f5f1; color: #3c3c66; }
html[data-theme="light"] .cz-screen .ps-add-ref { background: #f7f5f1; color: #3c3c66; border-color: #cfccc2; }

/* Hojas (tpl-screen) en claro: paneles y tarjetas #FEFEFE */
html[data-theme="light"] .tpl-screen .tpl-screen-inner { color: #23235e; }
html[data-theme="light"] .mv-list-side,
html[data-theme="light"] .mv-player-side { background: #FEFEFE; }
html[data-theme="light"] .mv-card { background: #FEFEFE; border-color: #e5e1d8; color: #23235e; }
html[data-theme="light"] .mv-card-sub { color: #55557a; }
html[data-theme="light"] .mv-menu { background: #FEFEFE; border-color: #e5e1d8; }
html[data-theme="light"] .mv-menu button { color: #23235e; }
html[data-theme="light"] .mv-sort { background: #FEFEFE; color: #23235e; border-color: #e5e1d8; }
html[data-theme="light"] .mv-status.st-done, html[data-theme="light"] .mv-status-pill.st-done { color: #0b6e3f; }
html[data-theme="light"] .mv-status.st-proc, html[data-theme="light"] .mv-status-pill.st-proc { color: #1d4ed8; }
html[data-theme="light"] .mv-status.st-fail, html[data-theme="light"] .mv-status-pill.st-fail { color: #b3261e; }
html[data-theme="light"] .pj-search input,
html[data-theme="light"] .mv-search input { color: #23235e; }
html[data-theme="light"] .pf-card,
html[data-theme="light"] .set-row,
html[data-theme="light"] .cred-card,
html[data-theme="light"] .hist-row { background: #FEFEFE; color: #23235e; border-color: #e5e1d8; }

/* INTERFAZ2F COSTURA (dueño 04:29): el «más pegado» pasa a AMBOS temas —
   costura uniforme de ~5 px en las tres uniones de la rejilla cz
   (riel↔centro, centro↔panel derecho, etapa↔consola) y el mismo
   margen exterior, en oscuro igual que en claro (sustituye la
   cláusula anterior de «oscuro no se toca»). */
@media (min-width: 1024px) {
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    max-width: 1680px;
    padding: 0 12px 12px;
    column-gap: 5px;
    row-gap: 5px;
  }
}

/* ===== interfaz2f-2: moneda con logo, banner espacial y
   seleccionado morado pleno (dueño 04:31 + 04:34 + 04:35) =====
   Ningún arte se redibuja: la moneda reutiliza el logo oficial
   (la ruta de .logo-mark) y las pilas con logo ya existentes. */
/* La píldora: el logo grabado se lee un poco mayor que el «$». */
.app-header .balance-chip .balance-coin svg { width: 9px; height: 9px; }
/* B) Banner «Precios de lanzamiento»: fondo de ESPACIO —
   degradado espacial morado→azul de la paleta con estrellas
   sutiles (solo esta barra; el cohete ya va integrado). */
.launch-banner {
  background:
    radial-gradient(1.6px 1.6px at 12% 30%, rgba(255, 255, 255, .95) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 26% 72%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 41% 18%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 57% 64%, rgba(255, 255, 255, .65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 69% 26%, rgba(255, 255, 255, .9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 82% 74%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 93% 34%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 35% 88%, rgba(255, 255, 255, .55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 76% 88%, rgba(255, 255, 255, .6) 50%, transparent 51%),
    linear-gradient(100deg, #150b33 0%, #2a1670 46%, #1d3a8f 100%);
}
/* C) Seleccionado en barras de navegación (04:34): la opción
   activa lleva el ícono COMPLETAMENTE morado (relleno pleno del
   MISMO glifo oficial, sin redibujar) y el texto en morado. */
.tab.active { color: #7c5cff; }
html:not(.force-mobile) .tab.active { color: #7c5cff; }
html[data-theme="light"] .tab.active,
html[data-theme="light"]:not(.force-mobile) .tab.active { color: #6d4aff; }
.tab.active svg path, .tab.active svg circle, .tab.active svg rect { fill: currentColor; }
/* El riel de modos de las consolas (análogo): activo en morado
   pleno, sin el bloque degradado blanco-sobre-morado. */
html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"],
html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"],
html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"],
html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"],
html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"],
html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] { background: rgba(124, 92, 255, .15); color: #8b7bff; }
html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic,
html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic,
html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic,
html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic,
html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic,
html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic { background: transparent; color: #8b7bff; }
html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic svg path,
html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic svg circle,
html:not(.force-mobile) .cz-screen[data-cz-mode="t2v"] .cz-side-item[data-cz-go="t2v"] .cz-side-ic svg rect,
html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic svg path,
html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic svg circle,
html:not(.force-mobile) .cz-screen[data-cz-mode="i2v"] .cz-side-item[data-cz-go="i2v"] .cz-side-ic svg rect,
html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic svg path,
html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic svg circle,
html:not(.force-mobile) .cz-screen[data-cz-mode="v2v"] .cz-side-item[data-cz-go="v2v"] .cz-side-ic svg rect,
html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic svg path,
html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic svg circle,
html:not(.force-mobile) .cz-screen[data-cz-mode="tpl"] .cz-side-item[data-cz-go="tpl"] .cz-side-ic svg rect,
html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic svg path,
html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic svg circle,
html:not(.force-mobile) .cz-screen[data-cz-mode="vedit"] .cz-side-item[data-cz-go="vedit"] .cz-side-ic svg rect,
html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic svg path,
html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic svg circle,
html:not(.force-mobile) .cz-screen[data-cz-mode="story"] .cz-side-item[data-cz-go="story"] .cz-side-ic svg rect { fill: currentColor; }
html[data-theme="light"] .cz-screen .cz-side-item.active { color: #6d4aff; background: rgba(124, 92, 255, .12); }

/* interfaz2f (04:19, corrección de rig): la etapa se queda
   OSCURA también en claro (como en las ilustraciones de la
   paleta) y la palabra «créditos» (.bal-word) pasa a tinta
   oscura sobre las superficies claras de las consolas — en
   oscuro sigue blanca; sobre degradados no se toca. */
html[data-theme="light"] .cz-screen .cz-preview-box { background: #14142b; }
html[data-theme="light"] .cz-screen .bal-word { color: var(--ink); -webkit-text-fill-color: var(--ink); }
html[data-theme="light"] .tpl-screen .cz-side-bal-v .bal-word { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* interfaz2f (04:19, corrección de rig — superficies que el
   bloque de paleta no alcanzaba porque su fondo es LITERAL
   #12173d o una regla vieja «componente oscuro»): en claro
   pasan a #FEFEFE con tinta oscura, como manda la paleta
   oficial. Los botones redondos de cabecera del editor y los
   menús flotantes conservan su identidad (reglas propias). */
html[data-theme="light"]:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="3"] { background: #FEFEFE; }
html[data-theme="light"] .tpl-screen .cz-side-bal { background: #FEFEFE; border-color: #e5e1d8; }
html[data-theme="light"] .cz-sumbreak { background: #FEFEFE; color: var(--ink); border-color: #e5e1d8; }
html[data-theme="light"] .cz-screen { background: #FCFBF9; }

/* ============================================================
   portada1 — LA PORTADA NUEVA (diseño aprobado por el dueño
   2026-10-31: ilustraciones inicio1/inicio2 en claro y oscuro).
   La portada completa cabe en DOS pantallas de escritorio:
   pantalla 1 = barra superior + Invita y gana + fila hero
   (4 tarjetas laterales + el carrusel en el centro) + los SEIS
   atajos de modo en el orden de la app + Estilos en una fila;
   pantalla 2 = banner de lanzamiento + prueba + los 4 paquetes
   + franja del bono + cierre. Este paso es SOLO escritorio:
   fuera de la media de escritorio la portada queda como estaba
   (las laterales del hero ni existen: display:none en la base).
   ============================================================ */
.hero-side { display: none; }
.act-card.t6 { --ic: #db2777; --arw-bg: rgba(219, 39, 119, .20); --arw: #db2777; }
/* La tarjeta fija de PROPORCIÓN de Historia («Vertical · 9:16»,
   sin selección: el proyecto de Historia nace vertical). */
.story-fmt-fixed {
  display: flex; align-items: center; gap: 8px;
  background: rgba(139, 123, 255, .14);
  border: 1px solid rgba(139, 123, 255, .45); border-radius: 14px;
  padding: 10px 12px; font-weight: 700; font-size: 13.5px; color: var(--ink);
}
.story-fmt-fixed .asp-916 {
  width: 13px; height: 22px; flex: none;
  border: 2px solid #8b7bff; border-radius: 3px; display: inline-block;
}
.story-fmt-fixed .asp-num { opacity: .75; font-weight: 600; }

@media (min-width: 1024px) {
  /* La columna de la portada respira a todo el ancho útil; el
     resto de pantallas conserva su propio max-width. */
  html:not(.force-mobile) .wrap { max-width: 1680px; }

  /* --- Pantalla 1 · fila hero: laterales + centro --- */
  html:not(.force-mobile) .hero-row {
    display: flex; gap: 14px; margin-top: 14px;
    height: clamp(250px, 33vh, 350px);
  }
  html:not(.force-mobile) .hero-row .hero-card {
    flex: 4.05 1 0; min-width: 0; height: auto; aspect-ratio: auto;
    margin: 0; align-self: stretch;
  }
  html:not(.force-mobile) .hero-side {
    display: block; position: relative; flex: 1 1 0; min-width: 0;
    border: 1px solid rgba(255, 255, 255, .10); border-radius: 20px;
    overflow: hidden; padding: 0; cursor: pointer;
    background: #12173d; color: #fff; font: inherit; text-align: left;
  }
  html:not(.force-mobile) .hero-side-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  /* portada3: el <video> de la lateral ocupa exactamente el
     mismo marco que ocupaba su póster (absolute, cover). */
  html:not(.force-mobile) .hero-side-vid {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  /* portada4: la capa trasera del fundido (la segunda
     .hero-side-vid de cada tarjeta, creada por el motor) nunca
     intercepta el clic: el clic es del botón, como siempre. */
  html:not(.force-mobile) .hero-side-vid-b {
    pointer-events: none;
  }
  html:not(.force-mobile) .hero-side-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 41, 0) 44%, rgba(10, 13, 41, .85) 100%);
  }
  html:not(.force-mobile) .hero-side-name {
    position: absolute; left: 12px; right: 46px; bottom: 12px;
    font-size: 13.5px; font-weight: 800; line-height: 1.2; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html:not(.force-mobile) .hero-side-arrow {
    position: absolute; right: 10px; bottom: 10px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(10, 13, 41, .5); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  html:not(.force-mobile) .hero-side-arrow svg { width: 14px; height: 14px; }

  /* --- Pantalla 1 · los SEIS atajos, oscuros en AMBOS temas
     (así van en las ilustraciones aprobadas) --- */
  html:not(.force-mobile) .act-grid {
    grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 14px;
  }
  html:not(.force-mobile) .act-card {
    background: linear-gradient(180deg, #12173d, #0a0d29);
    border: 1px solid rgba(139, 123, 255, .18);
    min-height: 118px;
  }
  html:not(.force-mobile) .act-card .act-title { color: #ffffff; }
  html:not(.force-mobile) .act-card .act-desc { color: #aab1da; }

  /* --- Pantalla 1 · Estilos en UNA fila de seis --- */
  html:not(.force-mobile) .home-sec .sty-grid--home {
    max-width: none; margin-left: 0; margin-right: 0;
    grid-template-columns: repeat(6, 1fr);
  }

  /* --- Pantalla 2 · precios a todo el ancho + cierre compacto --- */
  html:not(.force-mobile) .pricing-grid { max-width: none; }
  html:not(.force-mobile) .pk-note {
    max-width: none; display: flex; align-items: center; gap: 8px;
  }
  html:not(.force-mobile) .closing { padding: 30px 0 4px; }
}
.pk-note .pk-gift { width: 17px; height: 17px; flex: none; color: #ffd94d; }
/* La franja del bono en claro = la banda lavanda de la
   ilustración aprobada (en oscuro manda la base #10163c). */
html[data-theme="light"] .pk-note { background: #eef0ff; border-color: #c6cbec; color: #3c3c66; }

/* ============================================================
   portada1 · Correcciones T1+T2 del dueño (2026-10-31 12:17,
   carpeta Texto a video, reglas para TODAS las consolas):
   T1 — la flecha del «Resumen de costo» es la de la barra
   «Avanzado»: el triángulo ▶ (mismo glifo), siempre a la derecha
   del texto del resumen (el botón se movió en el HTML) y al
   abrir gira a ▼ como el <details> de Avanzado (90°, no 180°).
   T2 — el bloque Resumen+Generar tiene UN tamaño estándar fijo
   y su posición clavada al pie del panel en todas las consolas:
   barra de costo de 46px en UNA fila (sin saltos de línea que la
   hagan crecer) y botón de 50px, con el mismo relleno de panel.
   ============================================================ */
.cz-sumarrow { font-size: 11px; line-height: 1; }
.cz-sumwrap.open .cz-sumarrow { transform: rotate(90deg); }
.cz-sumtoggle { padding: 2px 4px; margin-left: 0; }
@media (min-width: 600px) {
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="3"] {
    padding: 10px 16px 14px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-cost {
    height: 46px; min-height: 46px; max-height: 46px;
    padding: 0 12px; margin-top: 0;
    flex-wrap: nowrap; row-gap: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-cost-mode {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-balance { flex: none; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .t2v-generate {
    height: 50px; min-height: 50px;
  }
}

/* ============================================================
   portada1 · I1/I1b + I2 + I3/I5 + G1 + pantalla 2 (dueño
   2026-10-31, fotos de las 12:17–12:33)
   ============================================================ */

/* I2 — RESOLUCIÓN sin amarillo/marrón: el indicador fijo de
   resolución (1080p / 1080p mejorado) va en el MORADO CLARITO
   de la paleta (el de los íconos del riel), en todas las
   carpetas y en los dos temas. */
.cz-info-res {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, .5);
  background: rgba(139, 123, 255, .12);
}
html[data-theme="light"] .cz-screen .cz-info-res {
  color: #7c5cff;
  border-color: rgba(139, 123, 255, .45);
  background: rgba(139, 123, 255, .10);
}

/* I3 (refuerzo) — la nota azul oficial conserva su texto
   #8EBFFA también en tema claro dentro de las consolas (una
   regla de aplanado de «hints» le ponía un gris encima). */
html[data-theme="light"] .cz-screen .audio-note-blue {
  background: #142553;
  color: #8EBFFA;
}

/* I1/I1b — CAJAS DE SUBIDA GEMELAS: donde la zona de elegir
   foto y «Agregar otra referencia» comparten fila, AMBAS toman
   el tamaño y la paleta ACTUALES de «Agregar otra referencia»
   (borde de puntitos, mismos colores, mismo texto): la pareja
   ocupa menos y el espacio liberado va a la etapa (abajo). */
.cz-refrow .dropzone,
.cz-refrow .ps-add-ref {
  padding: 6px 14px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
  margin-top: 0;
}
.cz-refrow .dropzone .big,
.cz-refrow .ps-add-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.cz-refrow .dropzone .small,
.cz-refrow .ps-add-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
html[data-theme="light"] .cz-refrow .dropzone {
  background: #f7f5f1; border-color: #cfccc2;
}
/* I1b: la etapa de Imagen a video crece con el espacio
   liberado (topes de la caja por proporción, un punto más). */
@media (min-width: 600px) {
  html:not(.force-mobile) #i2v-screen[data-aspect="9:16"] .cz-preview-box { width: min(100cqw, 52.9cqh); }
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] .cz-preview-box { width: min(100cqw, 167cqh); }
  html:not(.force-mobile) #i2v-screen[data-aspect="1:1"] .cz-preview-box { width: min(100cqw, 94cqh); }
}

/* G1 — LA ETAPA REFLEJA LA PROPORCIÓN ELEGIDA también en
   Crear (Video a video/Historia), Editar y Premium, con el
   mismo sistema de contenedor que Texto/Imagen ya usaban; el
   data-aspect lo pone czStageAspect() al instante del toque. */
@media (min-width: 600px) {
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen) .cz-preview { container-type: size; }
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen) .cz-preview-box { flex: none; margin-inline: auto; }
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen)[data-aspect="9:16"] .cz-preview-box { aspect-ratio: 9 / 16; width: min(100cqw, 51.75cqh); }
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen)[data-aspect="16:9"] .cz-preview-box { aspect-ratio: 16 / 9; width: min(100cqw, 163.5cqh); }
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen)[data-aspect="1:1"] .cz-preview-box { aspect-ratio: 1 / 1; width: min(100cqw, 92cqh); }
}
/* G1 — el video (demo de cámara, ejemplo o resultado) se
   acomoda con LETTERBOX dentro de la etapa: nunca se deforma
   ni se recorta; la foto sigue llenando la caja. */
.cz-preview-box > video { object-fit: contain; }
.cz-preview-box > video.cz-camdemo { object-fit: contain; }

/* Pantalla 2 — compresión de escritorio: precios completos +
   cierre caben en el viewport de 1440×900 sin scroll (medido
   con el rig: hacían falta ≈45 px). Solo presentación. */
@media (min-width: 1024px) {
  html:not(.force-mobile) .launch-banner { padding: 9px 16px; }
  html:not(.force-mobile) .trial-banner { padding: 3px 12px; margin-bottom: 5px; }
  html:not(.force-mobile) .pack2 { padding: 12px 14px 10px; }
  html:not(.force-mobile) .pack2 .pk-price { padding-top: 2px; }
  html:not(.force-mobile) .pk-note { margin-top: 10px; padding: 9px 14px; }
  html:not(.force-mobile) .closing { padding: 14px 0 2px; }
  html:not(.force-mobile) .closing h2 { font-size: 24px; }
}

/* G1 (refuerzo) — las reglas de «la etapa llena su zona»
   (aspect-ratio: auto) de la era interfaz2 anulaban el sistema
   de proporción en Texto/Imagen: se reafirma AQUÍ, al final,
   el sistema completo para las CINCO consolas con proporción:
   la caja adopta la forma elegida (9:16 / 16:9 / 1:1) al
   instante del toque, centrada en su zona. */
@media (min-width: 600px) {
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #create-screen, #vedit-screen, #premium-screen) .cz-preview { container-type: size; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #create-screen, #vedit-screen, #premium-screen) .cz-preview-box { flex: none; margin-inline: auto; margin-block: auto; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #create-screen, #vedit-screen, #premium-screen)[data-aspect="9:16"] .cz-preview-box { aspect-ratio: 9 / 16; width: min(100cqw, 51.75cqh); }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #create-screen, #vedit-screen, #premium-screen)[data-aspect="16:9"] .cz-preview-box { aspect-ratio: 16 / 9; width: min(100cqw, 163.5cqh); }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #create-screen, #vedit-screen, #premium-screen)[data-aspect="1:1"] .cz-preview-box { aspect-ratio: 1 / 1; width: min(100cqw, 92cqh); }
}

/* ============================================================
   portada1 · H1–H6 HISTORIA + etapa con referencia (dueño
   2026-10-31, fotos de las 13:00)
   ============================================================ */

/* H6 — la etapa lleva SIEMPRE un medio de referencia (la
   escena ancla de los ejemplos de cámara) bajo el contenido:
   la proporción elegida se ve aplicada sobre la referencia y
   el texto de «vacío» deja de mostrarse. */
.cz-preview-box > .cz-preview-ref {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cz-preview-box:has(> .cz-preview-ref) .cz-preview-empty { display: none; }

/* portada2: la foto subida de Imagen a video en su etapa —
   mismo tratamiento que .cz-preview-ref (que queda debajo
   como referencia), visible solo cuando está puesta («on»). */
.cz-preview-box > .cz-preview-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.cz-preview-box > .cz-preview-img.on { display: block; }

/* historia-cambio1 (dueño 2026-10-31): la clase .cz-folded-mode
   era solo de la nota de modo de Historia, borrada por orden
   suya junto con su elemento — la regla se retira con ella. */

/* H2 + A1 — la fila de subida de Historia lleva TRES
   elementos compactos gemelos en la misma fila y a la misma
   altura: la caja de la foto, «Generar imagen con IA» (las
   dos cajas originales del diseño, intactas) y «Conecta tu
   IA» como tercer elemento. Los bloques contenedores se
   disuelven (display:contents) y la fila la forma la rejilla
   de la propia srcrow; la cabecera del bloque (tras
   historia-cambio1 queda solo la ayuda) abarca todo el ancho
   encima. */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-srcrow {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(0, .85fr);
    column-gap: 10px; align-items: start;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block,
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-block { display: contents; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block > .t2v-label,
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block > .t2v-hint { grid-column: 1 / -1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-drop { grid-column: 1; grid-row: 4; height: 56px; width: 100%; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-generate {
    grid-column: 2; grid-row: 4; height: 56px; width: 100%;
    /* portada2 · F1: fuera el margin-top heredado (10 px) que
       dejaba esta caja 10 px por debajo de sus dos hermanas. */
    margin-top: 0;
    border: 2px dashed var(--line); border-radius: var(--radius);
    background: transparent; color: var(--ink); font-size: 14.5px; font-weight: 700;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-myai-btn { grid-column: 3; grid-row: 4; height: 56px; width: 100%; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-block > .t2v-label,
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-block > .t2v-hint { display: none; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-msg { grid-column: 1 / -1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block > .preview { grid-column: 1 / -1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-block { grid-column: 1 / -1; order: 5; }
}

/* historia-cambio3 (dueño 2026-10-31): la fila de los tres
   controles de Historia [Toca para elegir una foto |
   Generar imagen con IA | Conecta tu IA] sube a la PARTE
   SUPERIOR de la consola, ENCIMA de la fila «Historia» y del
   cuadro de escribir — la foto meta del dueño: las cajas de
   subir arriba y el texto debajo. SOLO cambia el orden de la
   rejilla de arriba: los tres controles pasan de la fila 4 a
   la fila 1 y el bloque de la idea queda fijado en la fila 2;
   los estados que fluyen (la vista previa de la foto y el
   mensaje de la imagen) siguen fluyendo debajo de la idea,
   como hasta ahora. Columnas, alturas, tamaños y espaciados
   NO se tocan, y fuera de Historia
   (data-cz-effect="script") estas reglas no aplican. */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-drop { grid-row: 1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-generate { grid-row: 1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-myai-btn { grid-row: 1; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-block { grid-row: 2; }
}

/* historia-cambio4 (dueño 2026-10-31): la fila «Historia» y
   el cuadro para escribir suben hasta CASI ROZAR la fila de
   los tres botones (la costura fina de la casa: la separación
   entre filas de la rejilla pasa de 12px a 3px) y el cuadro
   CRECE en alto para que quepan MÁS LÍNEAS al escribir
   (78px → 135px: de 2 líneas completas y la 3ª parcial a 5
   líneas completas visibles). El alto sale SOLO del propio
   acomodo de la consola de Historia, sin robarle tamaño al
   reproductor ni mover el panel derecho: (a) la costura
   entre filas, 12→3px; (b) la etiqueta «Historia» pierde los
   márgenes de párrafo heredados (13+7px) SOLO dentro de su
   fila — la ayuda de al lado ya los perdió en el cambio 2 —;
   (c) el campo pasa a bloque y deja de pagar la línea base
   fantasma de su contenedor (~6px); (d) la tira del guión,
   vacía mientras no hay guión, se recoge (margen 16→6px y
   relleno superior 14→6px; con guión generado no se toca) y
   (e) el relleno vertical del panel de Historia se ajusta
   de 8/10 a 6/6. El campo sigue con ALTO FIJO y scroll
   interno (invariante G-1): el de Historia queda en 135px y
   el de Video a video conserva sus 78px de G-1. Solo
   Historia (data-cz-effect="script"); fuera de ella, nada
   de esto aplica. */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-srcrow { row-gap: 3px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-head .t2v-label { margin-top: 0; margin-bottom: 0; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input {
    display: block;
    height: 135px;
    min-height: 135px;
    max-height: 135px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .script-panel:not(.has-script) { margin-top: 6px; padding-top: 6px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] [data-cz-panel="1"] { padding: 6px 18px 6px; }
}

/* historia-cambio2 (dueño 2026-10-31): la fila de la etiqueta
   «Historia» lleva la ayuda photo_hint EN LA MISMA LÍNEA, a la
   DERECHA de la etiqueta — no encima de las cajas de subida ni
   sobre la etiqueta. El nodo es el de siempre (lo mueve
   syncEffectUI); fuera de Historia la ayuda vuelve a
   #photo-block y estas reglas no aplican. */
.cz-story-head { display: flex; align-items: baseline; gap: 6px 12px; }
.cz-story-head .t2v-label { flex: 0 0 auto; }
.cz-story-head .t2v-hint { margin: 0; flex: 1 1 auto; min-width: 0; }

/* historia-cambio2b (dueño 2026-10-31): la ayuda de la fila
   «Historia» debe quedar EN UNA SOLA LÍNEA RECTA también en la
   ventana compacta de su Mac (1024×665) — allí se partía en dos.
   Medido en rig: a 12.5px el texto en una línea mide 555 px (ES)
   contra 487 px disponibles en la fila a 1024 de ancho; a 10.5px
   mide ≈466 px y cabe con ≈21 px de margen. El inglés (505 px
   disponibles, 515 px a 12.5px) también cabe a 10.5px. Reglas
   SOLO de la fila #story-head en la capa de escritorio: la
   etiqueta no se toca, la redacción no se toca, y en los
   efectos la ayuda sigue como siempre (estas reglas no la
   alcanzan fuera de #story-head ni bajo 1024px). */
@media (min-width: 1024px) {
  .cz-story-head .t2v-hint { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cz-story-head .t2v-hint { font-size: 10.5px; }
}
.story-myai-btn {
  border: 1.5px solid rgba(139, 123, 255, .55); background: rgba(139, 123, 255, .12);
  color: #c4b5fd; border-radius: var(--radius); font: inherit; font-size: 13.5px;
  font-weight: 700; cursor: pointer; padding: 8px 10px; align-self: stretch;
}
.story-myai-btn:hover { background: rgba(139, 123, 255, .24); }
html[data-theme="light"] .story-myai-btn { color: #7c5cff; }

/* H3 — el NIVEL de Historia reparte a todo el ancho, mitad y
   mitad. */
#story-tier-seg { display: flex; width: 100%; }
#story-tier-seg .seg-btn { flex: 1 1 0; }

/* G1 (banda superior) — en Crear/Editar/Premium la etapa vive
   en una banda cuya fila manda el contenido: la caja se
   dimensiona por ANCHO (como la 16:9, que sí alimenta la
   fila); dimensionarla por altura o por el contenedor la
   dejaba colapsada y desbordando sobre la consola (Historia
   se veía como una tirita encima del panel). Texto/Imagen
   conservan su sistema por contenedor (columnas de altura
   definida, verificado en el rig). */
@media (min-width: 600px) {
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen)[data-aspect="9:16"] .cz-preview-box { width: min(23cqw, 240px); }
  /* portada2 · N5 (dueño 2026-10-31 14:48): SOLO Historia se
     sale de la regla G1 — su etapa se dimensiona por ALTURA
     como las de las demás consolas (92% de su columna, el mismo
     llenado que Texto/Imagen; ancho = alto × 9/16, proporción
     intacta). V2V y Editar conservan la regla de G1. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-preview-box { width: auto; height: 92cqh; aspect-ratio: 9 / 16; }
  html:not(.force-mobile) :is(#create-screen, #vedit-screen, #premium-screen)[data-aspect="1:1"] .cz-preview-box { width: min(41cqw, 414px); }
  /* H4/H6 — en Historia la fila de la etapa comparte pista
     con el panel derecho y la consola (con el guión ya
     generado) la estrangulaba a ~52 px: la etapa desbordaba
     sobre la consola y el panel quedaba en una rendija. Piso
     de pista para esa fila: el panel entero (575 px) cabe sin
     deslizar y la etapa muestra su referencia; la consola se
     desplaza por dentro, como en los demás modos. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .tpl-screen-inner { grid-template-rows: auto minmax(min(580px, 64vh), 1fr) minmax(0, auto); }
}

/* ===== portada2 · N4 (cierre): escritorios BAJOS (≤700 px de
   alto — p. ej. el MacBook del dueño a 1024×665): el panel
   derecho de Texto/Imagen se pasaba por ~9 px y obligaba a un
   desliz mínimo. Se recortan SOLO espaciados internos de la
   columna (etiquetas, segmentos y cuadros de cámara), sin tocar
   paleta ni componentes; a las alturas auditadas (768+) esta
   banda no aplica. ===== */
@media (min-width: 1024px) and (max-height: 700px) {
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .t2v-label { margin: 6px 0 4px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="2"] .seg-btn { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .cz-chip { padding: 5px 2px 4px; }
}

/* metricas1: panel de métricas del dueño (vista interna en
   Herramientas). Solo presentación: reutiliza la paleta viva
   (panel, línea, tinta y acento) sin tonos nuevos. */
.mx-h { margin: 20px 0 8px; font-size: 15px; color: var(--ink); }
.mx-h:first-child { margin-top: 4px; }
.mx-funnel { display: flex; flex-direction: column; gap: 6px; }
.mx-frow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mx-flabel { flex: 0 0 118px; color: var(--ink-2); }
.mx-fbar { flex: 1 1 auto; height: 10px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.mx-ffill { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.mx-fcount { flex: 0 0 44px; text-align: right; color: var(--ink); font-weight: 600; }
.mx-fpct { flex: 0 0 48px; text-align: right; color: var(--ink-3); }
.mx-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; }
.mx-table th, .mx-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.mx-table th { color: var(--ink); font-weight: 600; }
.mx-table td:first-child, .mx-table th:first-child { padding-left: 0; }

/* historia-cambio5 (dueño 2026-10-31): el MENÚ DE ABAJO de
   Historia (la consola central) crece MÁS ALTO hacia arriba
   hasta quedar CASI PEGADO al borde inferior del REPRODUCTOR
   (solo la costura fina de la casa: los 5px del row-gap de la
   pantalla) y toda la pantalla de Historia cabe en UNA SOLA
   PANTALLA sin scroll en los tamaños de su Mac (1440×900 y
   1024×665). EL REPRODUCTOR NO CRECE NI SE MUEVE: su caja
   conserva exactamente el tamaño y la posición de siempre —
   lo que cede es el aire muerto que había entre su borde
   inferior y el tope de la consola (28px a 1440×900; 22px a
   1024×665, medidos en el rig).
   Mecanismo, solo Historia (data-cz-effect="script") y solo
   escritorio:
   - La fila de la etapa deja de ser «minmax(min(580px,64vh),
     1fr)» — donde la caja medía el 92% de la fila y quedaba
     centrada, con un 4% de aire arriba y otro 4% abajo — y
     pasa a medir exactamente el aire superior de siempre más
     la caja: 61.44vh = 2.56vh (el 4% de 64vh) + 58.88vh (el
     92% de 64vh). La caja se clava arriba con ese mismo
     margen superior (su margin-block:auto heredado sigue
     absorbiendo abajo el sobrante, que ahora es ~0) y su alto
     se expresa en vh: su rect queda IDÉNTICO al de antes en
     ambos tamaños (Δ=0 medido en el rig) y el aire inferior
     de la etapa pasa entero a la consola.
   - La fila de la consola pasa de minmax(0, auto) a
     minmax(0, 1fr): el panel se estira hasta el mismo pie de
     siempre (su fondo no se mueve) y su tope sube hasta la
     costura de 5px bajo el reproductor.
   - La altura ganada se reparte con este orden: (1) el
     contenido completo de la consola cabe SIN scroll interno
     de la tira en reposo (sin guión generado) en AMBOS
     tamaños — a 1024×665 desbordaba (236px de contenido en
     ventana de 151px) y eso se acaba —; (2) el cuadro para
     escribir gana su 6ª línea completa (135→157px: los +22px
     que el cambio 4 anotó que faltaban, liberados por este
     cambio). La tira del guión sin guión se recoge unos px
     más (margen/relleno 6→3px) para dar aire al conjunto.
   - En la banda compacta de su Mac (≤700px de alto) la
     consola no puede con todo a la vez — cabecera 64 +
     reproductor intacto 391.5 + costura 5 + el contenido de
     259px suman más que los 665 de la ventana —: se recortan
     SOLO espaciados internos de la consola de Historia, con
     el mismo criterio de la banda compacta de portada2: las
     tres cajas de 56→44px, el cuadro de 157→92px (3 líneas
     completas; sigue con ALTO FIJO y scroll interno — la
     invariante G-1 no se toca —), la tira recogida al mínimo
     (1px) y el relleno vertical del panel de 6→2px. Con eso
     el contenido cabe entero también a 1024×665, con aire
     (medido en el rig: scrollHeight < clientHeight).
   - Aire de seguridad (medido en la primera pasada del rig:
     el contenido rozaba la ventana al píxel en ambos
     tamaños): la tira sin guión se recoge a 3px en general
     (no 4) y el relleno vertical del panel baja de 6 a 5px,
     para que el «sin scroll» no dependa de un redondeo. */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .tpl-screen-inner { grid-template-rows: auto 61.44vh minmax(0, 1fr); }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-preview-box { height: 58.88vh; margin-top: 2.56vh; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 157px; min-height: 157px; max-height: 157px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .script-panel:not(.has-script) { margin-top: 3px; padding-top: 3px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] [data-cz-panel="1"] { padding-top: 5px; padding-bottom: 5px; }
}
@media (min-width: 600px) and (max-height: 700px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] [data-cz-panel="1"] { padding-top: 2px; padding-bottom: 2px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-drop { height: 44px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-generate { height: 44px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #generate-btn { height: 44px; min-height: 44px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .script-panel:not(.has-script) { margin-top: 1px; padding-top: 1px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 92px; min-height: 92px; max-height: 92px; }
}

/* ============================================================
   historia-cambio6 (dueño 2026-10-31, H-E con su corrección
   final de las 19:22 — cierra la serie de Historia): el bloque
   «Resumen de costo» de Historia crece MÁS ALTO en su estado
   RECOGIDO, hasta la altura de su línea amarilla, para que se
   vea MÁS información del desglose SIN tener que desplegarlo.
   Mecanismo (solo Historia — data-cz-effect="script" — y solo
   escritorio):
   - La tarjeta del desglose (.cz-sumbreak), que recogida vive
     en display:none, pasa a verse EN FLUJO sobre la barra como
     una minitarjeta con las líneas de COSTO del desglose en
     densidad compacta: Imagen inicial, Tamaño del proyecto,
     Tarifa y Cálculo (las de «escenas × créditos»); el total
     ya vive en la propia barra. Cámara, Enfoque, Duración y
     Resolución quedan para el despliegue completo, junto al
     total, la equivalencia ≈USD y la nota de reembolso, que
     NO se pintan en recogido.
   - Desplegada (sin [hidden]) la tarjeta vuelve a ser
     EXACTAMENTE la flotante de siempre — se abre hacia arriba
     desde la barra con todo el detalle y el panel recupera su
     alto base —; al cerrarla, la minitarjeta vuelve al flujo.
   - El panel 3 crece hacia arriba lo que crece el bloque: su
     fondo, la barra y el botón conservan EXACTAS sus
     distancias al pie (el botón ni se mueve ni cambia de
     tamaño). A 1440×900 el crecimiento cabe en el aire muerto
     que había bajo el último bloque del panel 2 (~123px
     medidos), sin tapar ningún control, y el panel 2 no se
     toca (su scrollHeight/clientHeight quedan como la base).
   - En la banda compacta (≤700px de alto — su ventana
     1024×665), donde el panel 2 ya desliza por diseño, la
     minitarjeta crece igual y el relleno inferior de reserva
     del panel 2 crece en la misma medida (~99px), para que
     su último bloque (Enfoque) siga alcanzable deslizando el
     panel exactamente como hasta hoy.
   - El triángulo conserva su función y sigue la convención
     fijada por el dueño (corrección 19:22): recogido ▲ — el
     glifo ▶ de Avanzado girado −90°, «se puede subir» — y
     desplegado ▼ — girado 90°, «al presionarlo se cierra» —,
     siempre a la derecha del texto «Resumen». Solo Historia:
     los demás resúmenes quedan como hoy.
   ============================================================ */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] {
    /* El display lleva !important porque la guarda global de
       interfaz2e — [hidden] { display: none !important; } en
       styles.css:7667 — manda sobre cualquier display normal:
       esta es una excepción deliberada y acotada a Historia,
       ganada por especificidad entre dos !important. */
    display: block !important; position: static; box-shadow: none;
    /* historia-cambio7 (corrección A del dueño): dentro del
       cuadro único el margen inferior desaparece (la separación
       con la barra la da la línea divisoria del propio cuadro)
       y el relleno inferior crece 2→7px para que el alto total
       del bloque recogido quede EXACTO al del cambio 6. */
    padding: 6px 12px 7px; margin-bottom: 0;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row { font-size: 11.5px; padding: 2px 0; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-total,
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-usd,
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-note,
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-time { display: none; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(2),
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(3),
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(5),
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(n+8) { display: none; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(1) .cz-sb-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(6) .cz-sb-value { font-size: 11px; white-space: nowrap; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumarrow { transform: rotate(-90deg); }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumwrap.open .cz-sumarrow { transform: rotate(90deg); }
  html[data-theme="light"]:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak[hidden] .cz-sb-label { color: rgba(35, 35, 94, .62); }
}
@media (min-width: 600px) and (max-height: 700px) {
  /* 233px = la reserva medida de la base (130px) + el
     crecimiento del bloque del Resumen (~99px) + 4px de
     ajuste: el scrollHeight del panel crece ~4px menos
     que el relleno (medido en el rig del cambio 6), y con
     233 el margen de alcance de Enfoque queda como la
     base (~1.4px). !important para ganar a la regla que
     fija la reserva. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] [data-cz-panel="2"] { padding-bottom: 233px !important; }
}

/* ============================================================
   historia-oficial1 (dueño 2026-10-31): alineación de Historia
   a su imagen oficial, solo lo REAL y FUNCIONAL para la carpeta
   (su regla: lo que no aplica, no se incluye — sin Studio, sin
   1080p, sin selector de Proporción). Aquí: la fila bajo el
   cuadro de escribir (ayuda + «Restablecer») y el icono del
   cuadro de cámara «Ninguna». Las compensaciones de espacio, si
   el rig las pide, viven en este mismo bloque.
   ============================================================ */
#create-screen .cz-idea-foot {
  display: flex; align-items: flex-start; gap: 10px;
  /* historia-cambio7: margen 6→2px — compensación de espacio
     interna de la consola para que la fila quepa sin scroll
     con la geometría de la corrección B. */
  margin-top: 2px;
}
#create-screen .cz-idea-help {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; line-height: 1.35; color: #9aa3c7;
}
#create-screen .cz-idea-reset {
  flex: 0 0 auto;
  appearance: none; cursor: pointer;
  background: transparent; border: 1px solid var(--cz-line);
  color: inherit; border-radius: 8px;
  font: inherit; font-size: 11.5px; font-weight: 600;
  /* historia-cambio7: relleno vertical 4→2px (la fila baja de
     ~26.7 a ~21.7px; misma compensación de la corrección B). */
  padding: 2px 10px;
}
#create-screen .cz-idea-reset:hover { border-color: #8b7bff; }
/* Icono «Ninguna» (círculo tachado), en el estilo de los demás
   cuadros de cámara de Historia. */
#create-screen [data-ps-camera="none"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cline x1='6.2' y1='6.2' x2='17.8' y2='17.8'/%3E%3C/svg%3E"); }

/* ============================================================
   historia-cambio7 (dueño 2026-10-31 22:30–22:32, tras revisar
   Historia EN VIVO en staging desde su Mac; foto y video en
   ~/workspace/audit-fixes123/referencia-cambio7/): dos
   correcciones sobre el paquete historia-oficial1, solo
   Historia y solo escritorio.
   A — EL RESUMEN ES UN SOLO CUADRO: en su foto el bloque se ve
   dividido en DOS cajas separadas (la minitarjeta del desglose
   del cambio 6 y, debajo, la barra «Resumen de costo») y ordena
   que sea UN SOLO CUADRO. El .cz-sumwrap pasa a ser el marco
   único (un borde, un fondo), con el desglose arriba y la fila
   del Resumen abajo, separados solo por la línea divisoria del
   propio cuadro; al desplegar, el MISMO cuadro crece en flujo
   con el desglose completo (ya no es una tarjeta flotante
   aparte) y al recoger vuelve al mismo cuadro. La barra ya no
   se maltrata a su tamaño de ventana: el título «Resumen de
   costo» y el total con su «créditos» van SIEMPRE en una línea
   (nowrap) y solo el texto del modo puede truncar con «…».
   Sustituye la presentación en dos piezas del cambio 6 SOLO
   en Historia; los demás resúmenes quedan como están.
   B — LAS TRES COLUMNAS A LA MISMA ALTURA, SIN MOVIMIENTO: en
   su video la columna central «se corre» a la altura del
   reproductor. Causa raíz: la fila de la etapa del cambio 5
   medía un vh FIJO (61.44vh) y todo el ajuste caía sobre la
   consola — a cualquier alto de ventana distinto de los dos
   medidos la consola desbordaba y su contenido se movía al
   enfocar/escribir. Ahora la fila de la etapa reclama solo el
   MÍNIMO del reproductor (58.88vh = su alto exacto de siempre)
   y la de la consola toma el resto: la columna central comparte
   los bordes superior (69px) e inferior con el riel izquierdo
   y el panel derecho, el reproductor conserva su TAMAÑO EXACTO
   (298×530 a 1440×900; 220×392 a 1024×665) y su borde superior
   coincide con el de las columnas laterales, y la consola
   queda pegada a él por la costura de 5px de la rejilla (el
   resultado del cambio 5 se conserva; lo que cae es su
   mecanismo en vh). El aire sobrante cae dentro de la etapa o
   de la consola, donde caiga — el dueño lo acepta expreso — y
   la geometría queda CLAVADA: nada se mueve al abrir, enfocar,
   escribir, desplegar/recoger el Resumen ni generar el guión.
   ============================================================ */
@media (min-width: 600px) {
  /* --- B: la etapa reclama solo el mínimo del reproductor --- */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .tpl-screen-inner { grid-template-rows: auto minmax(58.88vh, 1fr) minmax(0, 1fr); }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-preview-box { margin-top: 0; }
  /* --- B: compensaciones de espaciado interno de la consola
     (con ellas el contenido cabe sin scroll en reposo en los
     tamaños de su Mac, con la fila de ayuda de oficial1) --- */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .script-panel:not(.has-script) { margin-top: 0; padding-top: 0; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-srcrow { row-gap: 2px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-head { line-height: 15px; }
  /* --- A: el cuadro único del Resumen --- */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumwrap {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px; overflow: hidden;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak {
    position: static; background: transparent; border: 0; border-radius: 0;
    box-shadow: none; margin: 0; width: auto;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumbreak:not([hidden]) { padding: 12px 12px 10px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .t2v-cost {
    background: transparent; border: 0; border-radius: 0; margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 12px; flex-wrap: nowrap;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .t2v-cost > span:first-child { white-space: nowrap; flex: none; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #cost-credits { flex: none; white-space: nowrap; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .t2v-balance { flex: none; white-space: nowrap; }
  html[data-theme="light"]:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-sumwrap { background: #FEFEFE; border-color: #e5e1d8; }
  html[data-theme="light"]:not(.force-mobile) #create-screen[data-cz-effect="script"] .t2v-cost { border-top-color: rgba(35, 35, 94, .14); }
}
@media (min-width: 600px) and (min-height: 701px) and (max-height: 760px) {
  /* B: la banda compacta del cambio 5 (≤700px) se extiende
     hasta 760px de alto: en esa franja la consola tampoco cabe
     con las medidas grandes y desbordaría igual. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] [data-cz-panel="1"] { padding-top: 2px; padding-bottom: 2px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-drop { height: 44px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-generate { height: 44px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-script-btn { height: 44px; min-height: 44px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 92px; min-height: 92px; max-height: 92px; }
}
@media (min-width: 600px) and (min-height: 761px) and (max-height: 860px) {
  /* B: banda media — recortes suaves de espaciado interno
     para que la consola quepa sin scroll también entre
     761 y 860px de alto de ventana. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] [data-cz-panel="1"] { padding-top: 4px; padding-bottom: 4px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-drop { height: 50px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #ai-image-generate { height: 50px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-script-btn { height: 50px; min-height: 50px; }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 140px; min-height: 140px; max-height: 140px; }
}

/* ============================================================
   historia-cambio8 (dueño 2026-10-31 22:42, foto en
   referencia-cambio7/foto-intercambio-botones.jpg):
   INTERCAMBIO DE BOTONES en Historia (solo escritorio):
   - «Conecta tu IA» ocupa el HUECO libre de la fila de CÁMARA,
     junto a «Aéreo» (con 6 cuadros, la segunda fila deja dos
     celdas libres: el botón las abarca, con la altura de la
     fila). Es el mismo botón con el mismo comportamiento; la
     lógica lo trae aquí mudándolo en el HTML — no es un cuadro
     de cámara: no lleva su clase ni entra en su cableado.
   - El botón de acción («Generar guión (gratis)») ocupa la
     TERCERA CAJA de la fila de la consola, con la medida de sus
     dos hermanas; la lógica lo muda aquí en modo Historia y lo
     devuelve al panel 3 en los efectos. Su lógica de dos fases
     queda intacta: en fase 2 la etiqueta es «Crear historia ·
     N créditos» dentro de la misma caja (si no cabe en una
     línea, envuelve a dos sin recortar el costo). El panel
     derecho termina en el cuadro único del Resumen (cambio 7A).
     historia-oficial2 (dueño 2026-10-31 23:50 — SUSTITUYE el
     intercambio): el botón ya NO se muda ni tiene dos fases.
     La tercera caja es un botón propio, #story-script-btn,
     SOLO «Generar guión (gratis)» — las reglas de la caja de
     este bloque y de las bandas (44/50/56px) pasan a ser
     suyas — y #generate-btn vive fijo en el panel 3 bajo el
     Resumen, SOLO «Crear historia · N créditos». El panel
     derecho ya NO termina en el Resumen: vuelve a cerrar con
     su botón grande, como en todos los editores.
   ============================================================ */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-script-btn {
    grid-column: 3; grid-row: 1;
    margin: 0; padding: 4px 8px; font-size: 14px; line-height: 1.15;
  }
  /* La fila de la consola es de TRES CAJAS PAREJAS (la medida
     de sus hermanas): tercios iguales para las tres en Historia
     — sustituye a los pesos 1.35/1.05/.85 de la rejilla del
     cambio 3, que hacían cada caja de un ancho distinto. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-srcrow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 600px) and (min-height: 861px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-script-btn { height: 56px; min-height: 56px; }
}
@media (min-width: 600px) {
    html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row #story-myai-btn {
    grid-column: span 2; grid-row: auto; width: auto; height: auto;
    align-self: stretch; font-size: 12.5px; padding: 4px 6px;
  }
}

/* ============================================================
   historia-cambio9 (dueño 2026-10-31 22:44): el cuadro de
   escribir de Historia ARRANCA A LA MITAD de su alto máximo
   (en líneas completas: 70px = 2 líneas en la banda alta y la
   media; 48px = 1 línea en la compacta) y CRECE con el texto
   hasta su límite — el max-height de siempre del cambio 5
   (157/140/92px), que NO se toca —; de ahí en adelante se
   desplaza el texto por dentro. El crecimiento lo maneja
   ideaGrowUpdate() en app.js; aquí solo se fija la altura de
   ARRANQUE de cada banda (height/min-height), simétrica a la
   mitad que calcula la lógica desde el max-height vigente.
   Los demás campos conservan el alto fijo de G-1.
   ============================================================ */
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 70px; min-height: 70px; }
}
@media (min-width: 600px) and (max-height: 700px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 48px; min-height: 48px; }
}
@media (min-width: 600px) and (min-height: 701px) and (max-height: 760px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 48px; min-height: 48px; }
}
@media (min-width: 600px) and (min-height: 761px) and (max-height: 860px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { height: 70px; min-height: 70px; }
}

/* ============================================================
   correccion-e (dueño 2026-10-31 22:47): EL EDITOR QUEDA
   CLAVADO — su «movimiento» del video era DESPLAZAMIENTO POR
   GESTOS: la carcasa de los editores era un contenedor con
   overflow:auto y 6px de desborde horizontal (la cabecera mide
   6px de más), así que la rueda/trackpad a dos dedos movía la
   pantalla a los lados (y daba sensación de zoom/paneo). El
   editor de escritorio es una superficie FIJA de una sola
   vista: la carcasa deja de ser desplazable y ningún gesto se
   encadena. Aplica a la carcasa común de los editores (Crear,
   Texto a video, Imagen a video, Editar, Studio), solo
   escritorio — en el teléfono las pantallas conservan su
   desplazamiento de siempre.
   Lo ÚNICO que se sigue desplazando es el TEXTO dentro de los
   campos cuando excede su alto (con el gesto contenido en el
   propio campo: overscroll-behavior: contain) y, en la banda
   compacta de 1024×665, el interior del panel derecho — que
   ya nacía contenido (overscroll-behavior: contain) y es el
   mecanismo aprobado para alcanzar los últimos bloques en
   TODOS los editores, Texto a video incluido; la pantalla en
   sí no se mueve ni un píxel (verificado en el rig).
   ============================================================ */
@media (min-width: 600px) {
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) {
    overflow: hidden; overscroll-behavior: none;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    overflow-x: clip; overscroll-behavior: none;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) textarea {
    overscroll-behavior: contain;
  }
}

/* ============================================================
   historia-cambio10 (dueño 2026-10-31 23:07 — diseño FINAL,
   tercera versión: sustituye a la de la línea del rótulo sin
   más (22:58) y a la de debajo del segmento (23:01)): el
   texto aclaratorio del nivel va EN LA LÍNEA DEL RÓTULO
   «NIVEL» de Historia, a la derecha del rótulo, con el
   DEGRADADO morado→azul de los botones de la app en todo el
   texto (linear-gradient(120deg, #8b3dff, #3d8bff) con
   background-clip:text), y CAMBIA con el nivel elegido:
   «Calidad de la imagen con IA: Estándar · 2 créditos» /
   «… Pro · 5 créditos» (las tarifas reales de la imagen
   inicial; claves story_tier_note_std/pro en los 47
   diccionarios). QUE TODO QUEPA (su condición expresa): la
   fila del rótulo no crece de alto y el texto va ENTERO en
   UNA línea junto al rótulo en ambos niveles — el de
   Estándar es el largo y manda: 10.5px con peso 500 es el
   mayor tamaño/peso que lo hace caber (medido en el rig
   sobre la fila de 274px: a 11px/600 la fila pedía 300px y
   a 10.5px/600 pedía 288px; a 10.5px/500 pide exactamente
   274px — cabe entero, sin desbordar, a 1440 y a 1024);
   jamás se trunca. Como vive en la línea que ya existía, el panel no
   gana ni un píxel de alto: sigue en una pantalla sin
   scroll a 1440 (y en la banda compacta queda como estaba).
   ============================================================ */
#story-tier-block .story-tier-labelrow { display: flex; align-items: baseline; }
#story-tier-note {
  margin-left: auto; font-size: 10.5px; font-weight: 500; line-height: 1;
  white-space: nowrap; text-transform: none; letter-spacing: 0;
  background: linear-gradient(120deg, #8b3dff, #3d8bff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   historia-oficial2 (dueño 2026-10-31 23:46 + 23:50 + 23:54):
   SOLO Historia, SOLO escritorio — tres cosas:
   (1) EL BOTÓN GRANDE VUELVE AL PANEL (23:46/23:50): el panel
       derecho de Historia vuelve a cerrar con su botón grande
       de acción bajo el cuadro del Resumen (#generate-btn, el
       de siempre, con el degradado de los botones principales):
       SOLO «Crear historia · N créditos», deshabilitado
       mientras no haya guión válido. La tercera caja de la
       consola es un botón propio (#story-script-btn) SOLO
       «Generar guión (gratis)» — sus medidas por banda viven
       en los bloques del cambio 8 y de la corrección B,
       re-enfocados a su id; aquí solo falta su alto en la
       banda compacta (≤700px), el de sus dos hermanas (44px).
       El botón del panel conserva en esa banda sus 44px del
       cambio 5 (su regla no se toca) y en el resto de bandas
       su alto base: la geometría del panel 3 vuelve a ser la
       probada del cambio 6 (cuadro + botón dentro de la misma
       caja, reserva de 233px en la banda compacta).
   (2) LA SEPARACIÓN DE LA FILA «HISTORIA» (23:54, foto de su
       MacBook): la fila de la etiqueta HISTORIA baja JUNTO CON
       el cuadro de escribir hasta que el hueco entre el borde
       inferior de los tres botones y el borde superior de la
       fila sea la ALTURA DEL PROPIO TEXTO «HISTORIA» — su
       line-height medido en el rig: 15px (fuente 11.5px). El
       hueco efectivo era 2px (la regla de 2px de la corrección
       B pisaba los 3px del cambio 4): pasa a 15px (Δ = +13px).
   (3) EL ESPACIO SALE DE DENTRO (su orden): el alto MÁXIMO
       del cuadro al crecer baja exactamente ese Δ en cada
       banda — 157→144px (≥861), 140→127px (761–860) y
       92→79px (≤760) —; el cuadro sigue arrancando a la mitad
       (70/48px, cambio 9, sin tocar) y creciendo línea a
       línea con ideaGrowUpdate (que lee el max-height
       computado). Ni el reproductor, ni las columnas, ni el
       cierre de la consola (888/653) se mueven.
   ============================================================ */
@media (min-width: 600px) and (max-height: 700px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-script-btn { height: 44px; min-height: 44px; }
}
@media (min-width: 600px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-srcrow { row-gap: 15px; }
}
@media (min-width: 600px) and (min-height: 861px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { max-height: 144px; }
}
@media (min-width: 600px) and (min-height: 761px) and (max-height: 860px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { max-height: 127px; }
}
@media (min-width: 600px) and (max-height: 760px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input { max-height: 79px; }
}

/* ============================================================
   editar-e1 (dueño 2026-10-31 19:23-19:24, orden confirmada):
   en EDITAR VIDEO, las dos cajas de subida de la consola
   central — «Toca para elegir un video» (TU VIDEO) y
   «+ Agregar imágenes» (IMÁGENES DE REFERENCIA) — van UNA AL
   LADO DE LA OTRA en la misma fila (la de fuentes), cada una
   bajo su propio encabezado y con EXACTAMENTE LA MISMA
   MEDIDA de cuadro: ancho y alto idénticos, ninguna más
   grande que la otra. #vedit-refs-wrap se mudó en el HTML a
   la fila como segunda columna; en «Intercambiar» la segunda
   caja es la foto de referencia, con la misma regla de
   igualdad. El espacio vertical que las referencias ocupaban
   bajo el texto (~97px) pasa a la ETAPA: la fila de la consola
   es de alto automático y la de la previa absorbe lo liberado
   (la caja de la previa sigue su proporción 16:9 por cqh).
   · Las cajas fijan su alto en 56px — el alto de reposo de la
     dropzone en esta fila — y los estados con contenido viven
     DENTRO de esa misma medida: la vista previa del video y
     la de la foto ocupan el mismo cuadro de 56px (la foto
     como miniatura cuadrada junto a su nombre).
   · Las miniaturas de referencia crecen DENTRO de su
     columna: una fila visible y scroll interno acotado,
     sin cambiar el tamaño exterior de las cajas ni
     desalojar a la gemela.
   Solo escritorio (≥1024 sin force-mobile); el teléfono y la
   tableta conservan su pase propio.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #vedit-screen .cz-srcrow { align-items: flex-start; }
  /* Encabezados gemelos: el mismo bloque sobre cada caja,
     para que las dos cajas arranquen a la misma altura */
  html:not(.force-mobile) #vedit-screen .cz-srcrow .t2v-label { margin: 0 0 6px; }
  /* Las cajas: alto fijo e idéntico (la dropzone del video,
     el botón de referencias y la dropzone de la foto del
     intercambio comparten la medida) */
  html:not(.force-mobile) #vedit-screen .cz-srcrow .dropzone,
  html:not(.force-mobile) #vedit-screen .cz-srcrow .ps-add-ref { height: 56px; margin-top: 0; }
  /* Estados con contenido: la vista previa ocupa el mismo
     cuadro de 56px que la caja vacía */
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview.show {
    display: flex; align-items: center; gap: 10px; height: 56px;
  }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview .file-meta { flex: 1; min-width: 0; margin-top: 0; }
  html:not(.force-mobile) #vedit-screen #vedit-photo-preview img {
    width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; background: none;
  }
  /* Miniaturas de referencia: crecen dentro de su columna
     (una fila visible; el resto, scroll interno acotado) */
  html:not(.force-mobile) #vedit-screen #vedit-ref-thumbs {
    max-height: 64px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* ============================================================
   editar-e2 (dueño 2026-11-01 01:06): el «Resumen de costo» de
   EDITAR VIDEO se copia TAL CUAL del de HISTORIA — mismo
   tamaño, misma configuración y mismas funciones:
   · UN SOLO MARCO (.cz-sumwrap es el marco: un borde, un
     fondo), con el desglose arriba y la fila «Resumen de
     costo» abajo tras la línea divisoria del propio marco;
     título y total SIEMPRE en una línea (solo el texto del
     modo puede truncar con «…», como en Historia).
   · RECOGIDO el marco mide EXACTO lo que el de Historia
     (143.95px = desglose 95.95 + barra 46 + bordes) en los
     dos tamaños de su Mac, y ya enseña las líneas de COSTO
     de Editar: Duración · Tarifa · Cálculo (las pinta el JS
     de Editar; en recogido se ocultan las de configuración
     por posición, el mismo mecanismo del cambio 6).
   · DESPLEGADO el mismo marco crece EN FLUJO desde el pie
     (la barra ni se mueve) con todas las filas, el Total,
     el ≈USD y la nota de reembolso.
   · La flecha sigue la convención del dueño: recogido ▲
     (▶ girado −90°) y desplegado ▼ (girado 90°), siempre a
     la derecha del texto «Resumen de costo».
   · ABSORCIÓN: el marco recogido crece +97.95px sobre la
     barrita de hoy y el panel 3 — clavado al pie — crece
     hacia arriba. El aire sale de recortes de ESPACIADO
     INTERNO del panel 2 (ningún control cambia de tamaño
     ni de posición relativa; es el mecanismo de
     «compensaciones de espaciado interno» de Historia), y
     la reserva inferior del panel 2 la sigue ajustando el
     mecanismo vivo de siempre (czSyncPanelReserve: la
     iguala a la altura real del panel 3, como ya hacía con
     Historia), de modo que el panel NO gana scroll donde
     no lo tenía y la cola de Pro sigue alcanzable donde
     ya deslizaba. Las tres columnas conservan su altura
     total (la consola cierra en 888 / 653).
   Solo Editar (#vedit-screen) y solo escritorio: Historia y
   los demás resúmenes quedan EXACTOS como están.
   ============================================================ */
@media (min-width: 600px) {
  /* --- el cuadro único (espejo del de Historia) --- */
  html:not(.force-mobile) #vedit-screen .cz-sumwrap {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px; overflow: hidden;
  }
  html:not(.force-mobile) #vedit-screen .cz-sumbreak {
    position: static; background: transparent; border: 0; border-radius: 0;
    box-shadow: none; margin: 0; width: auto;
  }
  html:not(.force-mobile) #vedit-screen .cz-sumbreak:not([hidden]) { padding: 12px 12px 10px; }
  html:not(.force-mobile) #vedit-screen .t2v-cost {
    background: transparent; border: 0; border-radius: 0; margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 12px; flex-wrap: nowrap;
  }
  html:not(.force-mobile) #vedit-screen .t2v-cost > span:first-child { white-space: nowrap; flex: none; }
  html:not(.force-mobile) #vedit-screen #vedit-cost-val { flex: none; white-space: nowrap; }
  /* El saldo entre paréntesis: en la barra de 276px con el
     título y el total en una línea NUNCA cabe (en Historia
     queda siempre fuera del marco — su total mínimo es de
     3 cifras — y no se ve; en Editar, con totales de 2
     cifras, asomaría cortado «(5»). Se oculta en el marco
     de Editar para que la barra se vea EXACTA a la de
     Historia; el saldo sigue en la píldora del riel. */
  html:not(.force-mobile) #vedit-screen .t2v-balance { display: none; }
  /* --- recogido: las líneas de costo en el flujo --- */
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] {
    /* !important deliberado, espejo del de Historia: gana a
       la guarda global [hidden]{display:none!important} por
       especificidad entre dos !important. El relleno vertical
       (16.95+17) reparte lo que en Historia ocupan sus 4
       líneas: Editar enseña 3 y el alto total del desglose
       recogido queda EXACTO al estándar (95.95px). */
    display: block !important; position: static; box-shadow: none;
    padding: 16.95px 12px 17px; margin-bottom: 0;
  }
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-row { font-size: 11.5px; padding: 2px 0; }
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-total,
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-usd,
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-note,
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-time { display: none; }
  html:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-row:nth-child(n+4) { display: none; }
  html:not(.force-mobile) #vedit-screen .cz-sumarrow { transform: rotate(-90deg); }
  html:not(.force-mobile) #vedit-screen .cz-sumwrap.open .cz-sumarrow { transform: rotate(90deg); }
  html[data-theme="light"]:not(.force-mobile) #vedit-screen .cz-sumwrap { background: #FEFEFE; border-color: #e5e1d8; }
  html[data-theme="light"]:not(.force-mobile) #vedit-screen .t2v-cost { border-top-color: rgba(35, 35, 94, .14); }
  html[data-theme="light"]:not(.force-mobile) #vedit-screen .cz-sumbreak[hidden] .cz-sb-label { color: rgba(35, 35, 94, .62); }
}
@media (min-width: 600px) and (min-height: 701px) {
  /* --- absorción banda alta: solo con Pro visible (en
     Estándar el panel ya respira: Δ=0 medido) --- */
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) .t2v-label { margin-top: 4px; margin-bottom: 2px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) .seg { padding-top: 1px; padding-bottom: 1px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) .cz-dur-row { padding-top: 4px; padding-bottom: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) #vedit-res-fixed-val { padding-top: 4px; padding-bottom: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) #vedit-silent-warn { padding-top: 4px; padding-bottom: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) #vedit-audio-none { margin-top: 3px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) #vedit-kf-add { margin-top: 6px; padding-top: 8px; padding-bottom: 8px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) .cz-range-row { margin-top: 8px; }
}
@media (min-width: 600px) and (max-height: 700px) {
  /* --- absorción banda compacta (su ventana 1024×665):
     espaciados internos del panel 2 en ambos niveles,
     como en Historia --- */
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .t2v-label { margin-top: 3px; margin-bottom: 2px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .seg { padding-top: 1px; padding-bottom: 1px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .seg-btn { padding-top: 4px; padding-bottom: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .cz-dur-row { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-res-fixed-val { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-silent-warn { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-audio-none { margin-top: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-kf-add { margin-top: 8px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .cz-range-row { margin-top: 10px; }
}

/* ============================================================
   editar-e3 (dueño 2026-11-01): FORMA DE BOTÓN PERMANENTE en
   las cajas de subida de la CONSOLA de EDITAR VIDEO — la caja
   CARGADA conserva tal cual la forma de la caja VACÍA: borde
   de puntitos (2px dashed var(--line)), esquinas redondeadas
   (var(--radius)) y el fondo de la fila de fuentes (.cz-refrow:
   transparente en oscuro, #f7f5f1 en claro). Desaparece la
   «tira» de hasta hoy — sin borde ni fondo, nombre a la
   izquierda y píldora sólida «Cambiar» empujada a la derecha:
   el contenido cargado se presenta CENTRADO, en el lenguaje
   del botón vacío (nombre del archivo como título; la
   duración, suave, como el subtítulo; «Cambiar video» /
   «Cambiar foto» dentro del marco como pastilla suave del
   acento) y el marco ENTERO es clicable (lo cablea app.js:
   abre el mismo selector que el botón, como la caja vacía).
   · LA MEDIDA NO CAMBIA: la fija editar-e1 (56px de alto y el
     ancho de su columna) — el borde va por dentro (box-sizing
     global) y la miniatura de la foto baja de 56×56 a 40×40
     para respirar dentro del marco.
   · La caja de referencias (#vedit-ref-drop) ya nace con
     esta forma (.ps-add-ref, de puntitos) y la fila de
     miniaturas queda intacta: no se toca.
   Solo la consola de Editar (#vedit-screen .cz-srcrow) y
   solo escritorio (≥1024 sin force-mobile), como editar-e1:
   el teléfono y la tableta conservan su pase propio.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview.show {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: transparent;
    padding: 0 12px;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview.show:hover { border-color: var(--accent); }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview .file-meta {
    flex: 0 1 auto; justify-content: center;
  }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview .file-meta .fname {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview .pill { color: var(--ink-3); font-weight: 600; }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview .change-btn {
    margin-left: 0; min-height: 34px; padding: 6px 12px;
    background: var(--accent-soft); border-color: transparent; color: var(--ink);
  }
  html:not(.force-mobile) #vedit-screen .cz-srcrow .preview .change-btn:hover { border-color: var(--accent); }
  html:not(.force-mobile) #vedit-screen .cz-srcrow #vedit-photo-preview img {
    width: 40px; height: 40px; border-radius: 10px;
  }
  html[data-theme="light"]:not(.force-mobile) #vedit-screen .cz-srcrow .preview.show {
    background: #f7f5f1; border-color: #cfccc2;
  }
  html[data-theme="light"]:not(.force-mobile) #vedit-screen .cz-srcrow .preview .change-btn { color: #6d4aff; }
}

/* ============================================================
   editar-e2b (dueño 2026-11-01 02:15-02:32): correcciones de
   su revisión EN VIVO de Editar en su MacBook Air (Safari)
   + dos decisiones nuevas sobre el Resumen compartido.

   F1 — EL PANEL DERECHO DE EDITAR JAMÁS APLASTA UN BLOQUE.
   En su Mac, el panel 2 (columna flex con scroll) ENCOGÍA
   sus bloques en vez de desplazar: la etiqueta «TIPO DE
   EDICIÓN» salía aplastada entre las dos barras y la de
   «NIVEL» recortada arriba (foto suya 02:12). Historia no
   lo sufre porque su contenido cabe; el de Editar, en la
   franja de alturas de su ventana (~700-760px) y en modo
   Intercambiar/Pro, se pasa por poco y el navegador lo
   resolvía encogiendo (el mínimo automático de un hijo
   flex en contenedor con scroll puede caer a 0). Arreglo:
   (a) ningún hijo del panel 2 de Editar se encoge NUNCA
   (flex-shrink: 0 — si algo no cabe, el panel desplaza
   por dentro, contenido, como en Historia); (b) bandas
   de altura con recortes de ESPACIADO INTERNO del panel
   (el mismo mecanismo de Historia: su banda compacta se
   extendió a 760px y ganó una banda media 761-860), para
   que recogido quepa sin scroll en las alturas de su Mac.
   Ningún control cambia de tamaño ni de orden.

   F2 — EL RESUMEN DE EDITAR INFORMA TAMBIÉN EN REPOSO:
   (a) el saldo entre paréntesis VUELVE a la barra (E-2 lo
   ocultó porque no cabía; la barra ya trunca primero el
   texto del modo — regla T2 — y el saldo va fijo tras el
   total, como en Historia); (b) sin video, la fila
   Duración dice «La de tu video» y la de Cálculo
   «duración × tarifa» (las pinta app.js); con video,
   los valores reales de siempre.

   F4 — FONDO DEL RESUMEN DESPLEGADO (decisión 02:27,
   componente compartido): al desplegarse, el cuadro del
   Resumen pasa a #2e3a75 en TODOS los modos, para que se
   distinga como carpeta aparte; recogido conserva el
   tono del panel. Un solo punto de verdad: el estado
   .open de .cz-sumwrap (el marco en Historia/Editar; la
   tarjeta flotante en Texto/Imagen/Video/Studio).

   F5 — LA FLECHA DESPLEGADA SUBE AL BORDE SUPERIOR
   (corrección 02:31, precisada 02:32): recogido, sin
   cambio (▲ en la barra del pie, a la derecha del
   texto). Desplegado, el triangulito ▼ va en el borde
   superior del marco, CENTRADO, como pestañita — con
   la flecha abajo no se entendía que el cuadro se puede
   encoger —. El botón se muda dentro del desglose al
   abrir (app.js) y la CSS lo ancla arriba al centro del
   marco (en Historia/Editar el marco es el .cz-sumwrap;
   en las demás, la tarjeta flotante .cz-sumbreak). La
   barra del pie desplegada conserva título + total +
   saldo, sin la flecha, y también recoge al clicarla.
   ============================================================ */
/* --- F4 + F5: componente compartido, todas las pantallas --- */
html body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open,
html body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open .cz-sumbreak,
html[data-theme="light"] body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open,
html[data-theme="light"] body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open .cz-sumbreak { background: #2e3a75; }
/* F4 (refuerzo): el marco de Historia lleva una regla propia
   de especificidad mayor (oficial1, con [data-cz-effect=
   "script"]); el fondo desplegado manda también ahí. */
html:not(.force-mobile) body #create-screen[data-cz-effect="script"] .cz-sumwrap.open,
html[data-theme="light"]:not(.force-mobile) body #create-screen[data-cz-effect="script"] .cz-sumwrap.open { background: #2e3a75; }
:is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open .cz-sumtoggle {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 65; margin: 0; padding: 5px 18px 6px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20); border-top: 0;
  border-radius: 0 0 10px 10px; color: #fff;
}
@media (min-width: 600px) {
  /* --- F1a: el panel 2 de Editar no encoge a sus hijos --- */
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] > * { flex-shrink: 0; }
  /* --- F2a: el saldo vuelve a la barra de Editar --- */
  html:not(.force-mobile) #vedit-screen .t2v-balance {
    display: inline; flex: none; white-space: nowrap;
  }
  html:not(.force-mobile) #vedit-screen .t2v-cost-mode {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
@media (min-width: 1024px) and (min-height: 701px) and (max-height: 760px) {
  /* --- F1b: banda compacta extendida (como la de Historia):
     espaciados internos del panel 2 de Editar, ambos niveles --- */
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .t2v-label { margin-top: 4px; margin-bottom: 2px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .seg { padding-top: 1px; padding-bottom: 1px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .seg-btn { padding-top: 4px; padding-bottom: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .cz-dur-row { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-res-fixed-val { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-silent-warn { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-audio-none { margin-top: 4px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-kf-add { margin-top: 8px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .cz-range-row { margin-top: 10px; }
}
@media (min-width: 1024px) and (min-height: 761px) and (max-height: 860px) {
  /* --- F1b: banda media — recortes suaves de espaciado
     interno del panel 2 de Editar, ambos niveles --- */
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .t2v-label { margin-top: 5px; margin-bottom: 3px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .seg { padding-top: 1px; padding-bottom: 1px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .seg-btn { padding-top: 5px; padding-bottom: 5px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] .cz-dur-row { padding-top: 6px; padding-bottom: 6px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-res-fixed-val { padding-top: 6px; padding-bottom: 6px; }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-silent-warn { padding-top: 6px; padding-bottom: 6px; }
}

/* ============================================================
   editar-e5 (dueño 2026-11-01 01:29 + 02:29 + 03:28): tres
   piezas de EDITAR VIDEO y dos del componente compartido.

   ÍTEM 1 — en «Intercambiar», SOLO se rellena la banda negra
   entre el reproductor y la consola (~57px dentro de la etapa
   bajo la caja de la previa a 1440×900): la consola sube
   pegada al reproductor y las dos cajas de fuentes crecen
   SOLO con lo recuperado (56 → 104px, la medida de la
   ilustración v6 aprobada). Mecanismo: (a) las cajas de la
   fila de fuentes miden 104px en este modo — la fila de la
   consola es de alto automático y la de la etapa (1fr) cede
   exactamente ese crecimiento; (b) la caja de la previa se
   apoya en el borde inferior de su etapa (deja de flotar
   centrada SOLO en este modo), así la consola queda contra
   el reproductor con la costura de siempre (5px de la
   rejilla). La etapa conserva su alto de intercambio (~632px
   a 1440×900) y la «Edición general» no se toca. El ámbito es
   el modo: la columna de la foto solo es visible en
   «Intercambiar» (así lo pinta paintVedit). La forma de
   botón permanente (editar-e3) se conserva: mismo borde de
   puntitos y contenido centrado; la miniatura de la foto
   respira a 64px dentro del marco alto. Solo escritorio
   (≥1024 sin force-mobile), como editar-e1/e3.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #vedit-screen:has(#vedit-swap-photo-col:not([hidden])) .cz-srcrow .dropzone,
  html:not(.force-mobile) #vedit-screen:has(#vedit-swap-photo-col:not([hidden])) .cz-srcrow .preview.show {
    height: 104px;
  }
  /* La dropzone vacía, alta: su texto se centra como botón */
  html:not(.force-mobile) #vedit-screen:has(#vedit-swap-photo-col:not([hidden])) .cz-srcrow .dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  /* La miniatura de la foto cargada, a 64px en el marco alto */
  html:not(.force-mobile) #vedit-screen:has(#vedit-swap-photo-col:not([hidden])) .cz-srcrow #vedit-photo-preview img {
    width: 64px; height: 64px;
  }
  /* El reproductor, apoyado abajo: la consola le queda pegada */
  html:not(.force-mobile) #vedit-screen:has(#vedit-swap-photo-col:not([hidden])) .cz-preview-box {
    margin-top: auto; margin-bottom: 0;
  }
  html:not(.force-mobile) #vedit-screen:has(#vedit-swap-photo-col:not([hidden])) .cz-preview-mode {
    margin-top: 0;
  }
}

/* ============================================================
   editar-e5 · ÍTEM 2 — arrastrar y soltar en la consola de
   Editar (el cableado va en app.js): la caja sobrevolada se
   enciende con el acento, el mismo lenguaje que el hover de
   editar-e3 (borde al acento; aquí además un velo suave del
   acento para que se note también sin mover el ratón).
   ============================================================ */
html body #vedit-screen .cz-srcrow .dropzone.cz-dropover,
html body #vedit-screen .cz-srcrow .ps-add-ref.cz-dropover,
html body #vedit-screen .cz-srcrow .preview.show.cz-dropover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="light"]:not(.force-mobile) #vedit-screen .cz-srcrow .preview.show.cz-dropover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ============================================================
   editar-e5 · ÍTEM 3 (F4b) — el Resumen DESPLEGADO en tema
   claro: su fondo es #2e3a75 en ambos temas (editar-e2b F4),
   pero los textos que heredan la tinta del tema salían con
   la tinta oscura del tema claro (rgb(35,35,94) sobre
   #2e3a75 ≈ 1.5:1, casi ilegible). El marco es azul oscuro
   siempre → su texto va en claro siempre: dentro del marco
   desplegado, la tinta es la del tema oscuro (blanco; el modo
   de la barra, su gris claro #aab1da). Solo el estado
   desplegado del componente compartido (todas las
   pantallas); el recogido y el resto del tema claro no se
   tocan. Las etiquetas ya nacen en blanco atenuado, los
   números en dorado y la nota en verde: no cambian.
   ============================================================ */
html body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open,
html body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open .cz-sumbreak {
  color: #fff;
}
html body :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-sumwrap.open .t2v-cost-mode {
  color: #aab1da;
}

/* ============================================================
   editar-e5 · ÍTEM 5 (dueño 2026-11-01): en Editar, el
   «Costo total» del desglose sin video dice «según la
   duración» — un texto, no un número: sale del dorado y del
   tamaño de los números de dinero y queda en la tinta normal
   del marco (la clase solo la pone Editar, vía czPaintBreak;
   la barra sin video ya no pinta guion — eso va en app.js).
   ============================================================ */
.cz-sb-totalnum.cz-unknown-total { color: inherit; font-size: 13px; font-weight: 600; }

/* ============================================================
   editar-e5 · ÍTEM 6 (dueño 2026-11-01): en reposo, la
   píldora de segundos del bloque DURACIÓN de Editar NO se
   pinta (su «—» se leía como un signo de menos). Se deja
   invisible con «visibility» — NO con display:none — para
   que conserve su caja y ni la etiqueta ni ningún bloque
   del panel se mueva un píxel (verificado: Δ=0); al cargar
   un video, paintVedit le quita .is-empty y se pinta con
   sus segundos, como siempre. Solo esta píldora (por id);
   las demás píldoras .cz-dur-pill de la app no se tocan.
   ============================================================ */
#vedit-screen #vedit-dur-fixed-val.is-empty { visibility: hidden; }

/* ============================================================
   editar-e4 (dueño 2026-11-01): las IMÁGENES GUÍA de Editar
   Pro SALEN del panel derecho y viven en la CONSOLA, como
   segunda caja junto a TU VIDEO (donde en Estándar viven las
   referencias; nunca coexisten — son de niveles distintos).
   El HTML y la visibilidad van en index.html/app.js; aquí va
   solo la presentación de la tira de guías dentro de su
   columna:
   · La caja en sí (#vedit-kf-add, .ps-add-ref dentro de
     .cz-srcrow) ya hereda TODO el sistema de las demás cajas
     de la consola sin reglas nuevas: la medida gemela de
     editar-e1 (56px, mismo ancho de columna), la forma de
     botón permanente de editar-e3 (puntitos, fondo de la
     fila) y el resaltado de arrastrar de editar-e5
     (.cz-dropover sobre .ps-add-ref).
   · La tira: las guías crecen DENTRO de la columna en una
     fila compacta con scroll interno acotado, como la de
     referencias de editar-e1 (tope 64px) — pero en fila sin
     envolver, porque cada guía lleva su segundo editable
     junto a la miniatura: miniatura de 40px (la medida que
     editar-e3 dejó para respirar dentro del marco), campo
     de segundo estrecho y la ✕ al lado. Con 5 guías la tira
     desliza en horizontal dentro de su columna; la gemela
     (TU VIDEO) nunca se mueve y el alto exterior de la fila
     no cambia: la consola crece lo mismo que crece con las
     referencias de Estándar, y la etapa lo absorbe igual.
   · El resaltado al arrastrar sobre la tira usa contorno
     (sin borde que mueva la caja).
   Solo escritorio (≥1024 sin force-mobile), como
   editar-e1/e3: en teléfono/tableta la tira conserva su
   presentación base en columna, dentro de la consola.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #vedit-screen #vedit-kf-list {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 8px; margin: 8px 0 0; padding: 2px; max-height: 64px;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
  html:not(.force-mobile) #vedit-screen #vedit-kf-list:empty { margin: 0; padding: 0; }
  html:not(.force-mobile) #vedit-screen #vedit-kf-list .cz-kf-row {
    flex: none; gap: 6px; padding: 4px 6px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  }
  html:not(.force-mobile) #vedit-screen #vedit-kf-list .cz-kf-row img {
    width: 40px; height: 40px; border-radius: 8px;
  }
  html:not(.force-mobile) #vedit-screen #vedit-kf-list .cz-kf-sec { width: 54px; padding: 5px 6px; }
  html:not(.force-mobile) #vedit-screen #vedit-kf-list .cz-kf-x { margin-left: 0; }
}
html body #vedit-screen #vedit-kf-list.cz-dropover {
  outline: 2px dashed var(--accent); outline-offset: 1px;
  background: var(--accent-soft); border-radius: 12px;
}

/* ============================================================
   T-1 (dueño, 2026-11-01 11:53–11:55): el «Resumen de costo»
   de TEXTO A VIDEO e IMAGEN A VIDEO pasa al diseño estándar
   ya aprobado y en vivo en Historia y en Editar (E-2/E-2b):
   UN SOLO MARCO (el .cz-sumwrap es el marco) anclado al pie
   del panel derecho, con el desglose EN FLUJO sobre la barra
   — recogido muestra las líneas de costo reales en densidad
   compacta con la altura estándar de 143,95 px (desglose
   95,95 + barra 46 + 2 de borde) y desplegado el mismo marco
   crece en flujo hacia arriba (el contenido superior se
   desliza; el fondo #2e3a75, la tinta clara y la pestaña ▼
   superior centrada ya los dan las reglas compartidas
   E-2b F4/F5). Antes el desglose era una tarjeta FLOTANTE
   (position:absolute) sobre una barra suelta de 46 px.
   Alcance: SOLO la capa de escritorio (≥1024 px) de estas
   dos pantallas y SOLO el bloque Resumen — fuera de él,
   Δ=0 (Texto a video es la referencia de oro). Las bandas
   de márgenes del panel 2 (solo aire entre etiquetas, sin
   encoger ningún control ni hijo del panel) reducen el
   desplazamiento necesario a alturas cortas; la reserva de
   czSyncPanelReserve (que ya medía el pie en vivo) crece
   sola con el marco y la Cámara queda siempre alcanzable.
   ============================================================ */
@media (min-width: 1024px) {
  /* --- El marco único --- */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumwrap {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    overflow: hidden;
  }
  /* El desglose deja de flotar: vive en flujo dentro del marco */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak {
    position: static;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    width: auto;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak:not([hidden]) {
    padding: 12px 12px 10px;
  }
  /* La barra es la fila inferior del marco: transparente,
     con su divisor; su altura de 46 px ya la fija la regla
     general de ≥600 px y aquí se conserva. */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 0 12px;
    flex-wrap: nowrap;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost > span:first-child {
    white-space: nowrap;
    flex: none;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] :is(#t2v-cost-val, #i2v-cost-val) {
    flex: none;
    white-space: nowrap;
  }
  /* Flecha: recogido ▲ (el ▶ de Avanzado girado −90°), como en
     Historia y Editar; desplegado ▼ lo da la regla general
     .cz-sumwrap.open (y la pestaña, la compartida E-2b F5). */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumarrow {
    transform: rotate(-90deg);
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumwrap.open .cz-sumarrow {
    transform: rotate(90deg);
  }

  /* --- Recogido: el desglose se ve EN FLUJO, compacto ---
     (el display lleva !important porque la guarda global de
     [hidden] es !important; espejo de Historia/Editar) */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] {
    display: block !important;
    position: static;
    box-shadow: none;
    margin-bottom: 0;
    padding: 6.5px 12px 6.77px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row {
    font-size: 11.5px;
    padding: 2px 0;
  }
  /* En recogido se ven las líneas de COSTO reales (Duración,
     Resolución, Tarifa, Cálculo y Sonido en Pro/Studio);
     Nivel y Formato son configuración: solo desplegado. */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(1),
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-child(6),
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-total,
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-usd,
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-note,
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-time {
    display: none;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-label,
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-value {
    white-space: nowrap;
  }
  /* Pro y Studio muestran UNA línea más en recogido (Sonido):
     densidad más fina para conservar la MISMA altura estándar
     de 143,95 px en los tres niveles. */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-tier="pro"] [data-cz-panel="3"] .cz-sumbreak[hidden],
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-tier="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] {
    padding: 1.3px 12px 1.31px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-tier="pro"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row,
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-tier="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row {
    padding: 1px 0;
  }

  /* --- Tema claro: el marco recogido va en la tarjeta
     oficial #FEFEFE (desplegado manda el #2e3a75 compartido) --- */
  html[data-theme="light"]:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumwrap {
    background: #FEFEFE;
    border-color: #e5e1d8;
  }
  html[data-theme="light"]:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .t2v-cost {
    border-top-color: rgba(35, 35, 94, .14);
  }
  html[data-theme="light"]:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-label {
    color: rgba(35, 35, 94, .62);
  }

  /* --- Bandas de aire del panel 2 (solo márgenes entre
     etiquetas; ningún control cambia de tamaño y ningún hijo
     del panel se encoge) --- */
  @media (max-height: 860px) {
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label {
      margin: 5px 0 3px;
    }
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .t2v-label.cz-cam-label {
      margin: 8px 0 4px;
    }
  }
  @media (max-height: 700px) {
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .t2v-label {
      margin: 4px 0 2px;
    }
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] > .t2v-label.cz-cam-label {
      margin: 6px 0 3px;
    }
  }
}

/* ============================================================
   PAQUETE V — Video a video (dueño 2026-11-01, las doce como
   un solo paquete; auditoría INFORME-v2v-auditoria.md).
   Alcance cerrado: SOLO los efectos de #create-screen
   (:not([data-cz-effect="script"]) — Historia queda intacta
   como testigo) y SOLO escritorio (≥1024 sin force-mobile);
   el teléfono y la tableta conservan su pase propio.
   · V-1: el Resumen de costo adopta la anatomía estándar ya
     probada (T-1/Historia/Editar): UN solo marco al pie del
     panel 3; recogido muestra las líneas de costo reales
     (Efecto · Duración · Tarifa · Cálculo) y mide EXACTO
     143,95 px en todo estado (con video y sin video: el
     desglose recogido lleva alto fijo calibrado); desplegado
     crece EN FLUJO de abajo hacia arriba con el fondo
     #2e3a75 compartido y la pestaña ▼ centrada en el borde
     superior (regla compartida de F5). La barra lleva título
     en UNA línea + total + saldo; como en el cambio 7 de
     Historia, el texto del modo es el único elemento
     flexible (puede truncar con «…»).
   · V-6: la cámara de Studio va en rejilla 3+2 con cuadros
     uniformes, como el Panel B.
   · V-8: bandas de aire del panel 2 de efectos (solo
     márgenes entre etiquetas y rellenos de aire; ningún
     control cambia de tamaño): el panel pierde el bloque de
     extras (V-10) y el resumen estándar crece en el panel 3
     (la reserva dinámica czSyncPanelReserve acompaña).
   · V-9/V-10/V-11: la consola de efectos alinea sus cajas
     como Editar E-1: zona de cabecera de alto FIJO (42 px)
     en las tres columnas — ninguna etiqueta puede desplazar
     su caja —, las tres cajas (video, foto y la de extras,
     que vive en Swap y en Studio) con el mismo borde
     superior y el mismo tamaño (56 px), las vistas previas
     cargadas dentro del mismo marco de 56 px y las
     descripciones DEBAJO de su caja en letra pequeña
     (11 px), nunca encima.
   · V-12: «Más» vive DENTRO del segmento de duración como
     quinto segmento a partes iguales; la barra no crece.
   ============================================================ */
@media (min-width: 1024px) {
  /* ---------- V-1 · el marco único del Resumen (efectos) ---------- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex: none;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open {
    background: #2e3a75;
    border-color: rgba(255, 255, 255, .13);
    overflow: visible;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 12px 12px 10px;
    margin: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open .cz-sumbreak {
    background: transparent;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 12px;
    flex-wrap: nowrap;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open .t2v-cost {
    background: transparent;
    color: #eef1ff;
    border-top-color: rgba(255, 255, 255, .16);
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open .cz-sb-row span {
    color: rgba(238, 241, 255, .72);
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open .cz-sb-row b,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open .cz-sb-total span {
    color: #fff;
  }
  /* La barra nunca parte el título ni el total: el modo es
     el único elemento flexible (regla del cambio 7). */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost > span:first-child {
    white-space: nowrap;
    flex: none;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost #cost-mode {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost #cost-credits,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost .t2v-balance {
    flex: none;
    white-space: nowrap;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost .cz-sumtoggle {
    flex: none;
    margin-right: 2px;
  }
  /* Recogido: ▲ a la derecha; desplegado: ▼ (la pestaña la
     centra la regla compartida de F5). */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumarrow {
    transform: rotate(-90deg);
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open .cz-sumarrow {
    transform: rotate(90deg);
  }
  /* Recogido: el desglose se ve EN FLUJO con las líneas de
     costo reales. Mapa de filas de efectos — Motion/Swap:
     [Efecto, Duración, Resolución, Tarifa, Cálculo, Formato,
     Audio] → se ven Efecto·Duración·Tarifa·Cálculo. El alto
     del desglose recogido va FIJO (95,95 px) para que el
     marco mida 143,95 px exactos también SIN video (2-3
     filas) — mismo total que T-1: 95,95 + barra 46 + 2 de
     borde. */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] {
    /* El display lleva !important porque la guarda global de
       interfaz2e — [hidden] { display: none !important; } —
       manda sobre cualquier display normal: excepción
       deliberada y acotada a los efectos de Crear, ganada
       por especificidad entre dos !important (como Historia
       y T-1). */
    display: block !important;
    box-sizing: border-box;
    height: 95.95px;
    padding: 6px 12px 7px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row {
    font-size: 11.5px;
    padding: 2px 0;
    white-space: nowrap;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(3),
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(6),
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(7),
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-total,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-usd,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-note,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-time {
    display: none;
  }
  /* Studio pinta [Efecto, Nivel, Duración, Resolución,
     Tarifa, Cálculo, Formato, Sonido, Cámara, Enfoque] → se
     ven las mismas cuatro líneas de costo. */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(2),
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(4),
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(8),
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(9),
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(10) {
    display: none;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(3),
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-row:nth-of-type(6) {
    display: flex;
  }
  /* --- Tema claro: el marco recogido va en la tarjeta
     oficial #FEFEFE (desplegado manda el #2e3a75) --- */
  html[data-theme="light"]:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap {
    background: #FEFEFE;
    border-color: #e5e1d8;
  }
  html[data-theme="light"]:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumwrap.open {
    background: #2e3a75;
    border-color: rgba(255, 255, 255, .13);
  }
  html[data-theme="light"]:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .t2v-cost {
    border-top-color: rgba(35, 35, 94, .14);
  }
  html[data-theme="light"]:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="3"] .cz-sumbreak[hidden] .cz-sb-label {
    color: rgba(35, 35, 94, .62);
  }

  /* ---------- V-6 · cámara de Studio en rejilla 3+2 uniforme ---------- */
  html:not(.force-mobile) #create-screen #czs-camera-row {
    grid-template-columns: repeat(3, 1fr);
  }
  html:not(.force-mobile) #create-screen #czs-camera-row .cz-chip {
    height: 55px;
    justify-content: center;
  }

  /* ---------- V-12 · «Más» dentro del segmento de duración ---------- */
  html:not(.force-mobile) #create-screen #fx-duration-seg {
    align-items: stretch;
  }
  html:not(.force-mobile) #create-screen #fx-duration-seg > .cz-otros {
    flex: 1 1 0;
    display: flex;
  }
  html:not(.force-mobile) #create-screen #fx-otros-btn {
    flex: 1 1 auto;
    width: 100%;
  }

  /* ---------- V-9/V-10/V-11 · la consola de efectos alineada ---------- */
  /* Zona de cabecera fija de 42 px: la etiqueta del video y
     la de extras miden lo mismo y la columna de la foto
     compensa con margen — Δtop = 0 garantizado. La columna
     de extras arrastraba de su vida en el panel un
     margin-top de 14 px que la desalineaba entera: fuera. */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #swap-extras {
    margin-top: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block > .t2v-label {
    height: 34px;
    margin: 0 0 8px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #swap-extras > .group-label {
    display: block;
    height: 34px;
    margin: 0 0 8px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-drop,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-preview {
    margin-top: 42px;
  }
  /* Las tres cajas y las vistas previas: mismo tamaño (56 px).
     El margin-top solo se fuerza a 0 en la columna del video:
     la caja de la foto lleva encima la compensación de 42 px
     de la zona de cabecera (si esta regla la alcanzara, la
     anularía por orden de cascada y la caja volvería a nacer
     arriba del todo). */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block .dropzone,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-block .dropzone {
    height: 56px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block .dropzone {
    margin-top: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-ref-drop.ps-add-ref {
    height: 56px;
    margin-top: 0;
    padding: 6px 10px;
    gap: 2px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-ref-drop .ps-add-title { font-size: 12.5px; }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-ref-drop .ps-add-sub { font-size: 10.5px; }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block .preview {
    margin-top: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block .preview.show,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-block .preview.show {
    display: flex;
    align-items: center;
    height: 56px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-preview.show #photo-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
    flex: none;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) .cz-srcrow .preview .file-meta {
    flex: 1;
    min-width: 0;
    margin-top: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) .cz-srcrow .preview .file-meta .fname {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Las miniaturas extra viven dentro de su columna, en una
     franja compacta con su propio recorrido (patrón E-4). */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #swap-extras .cz-thumbs {
    margin-top: 8px;
    max-height: 64px;
    overflow-y: auto;
  }
  /* V-11: las descripciones van DEBAJO de su caja y en letra
     más pequeña (11 px); encima solo quedan las etiquetas. */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block > .t2v-hint,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-block > .t2v-hint {
    font-size: 11px;
    margin: 8px 0 0;
  }

  /* ---------- V-8 · bandas de aire del panel 2 de efectos ----------
     Tres pisos de compactación de AIRE (márgenes entre
     etiquetas, relleno de los segmentos y hueco de la rejilla
     de cámara; ningún control cambia de tamaño ni se recorta):
     con el bloque de extras fuera del panel (V-10) y estas
     bandas, Swap y Motion cierran sin desborde en los cuatro
     tamaños grandes y Studio en 1440×900 y 1280×832; a
     1280×770 (+62) y 1180×730 (+102) el juego completo de
     controles de Studio + el resumen estándar (143,95)
     excede la columna y queda el scroll CONTENIDO del panel
     (la reserva dinámica garantiza que el último control
     siempre se alcanza y que el resumen jamás lo tapa) —
     medido y documentado en INFORME-v.md. */
  @media (max-height: 940px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .t2v-label {
      margin: 6px 0 3px;
    }
  }
  @media (max-height: 860px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .t2v-label {
      margin: 3px 0 2px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg {
      padding: 2px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg-btn {
      padding-top: 3px;
      padding-bottom: 3px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) .cz-camchips {
      gap: 3px;
      margin-bottom: 0;
    }
  }
}

/* ============================================================
   PAQUETE V — AIRE RECUPERADO EN STUDIO (integrado al
   árbol por orden del dueño 2026-11-01 18:01, desde la
   ilustración aprobada con sus capturas). Alcance: únicamente el
   panel 2 de #create-screen con el efecto Studio activo y
   alturas ≤860 (las bandas de V-8 viven en ese mismo piso).
   Solo aire ENTRE bloques: márgenes de etiquetas, relleno
   vertical de los segmentos (precedente V-8) y hueco de la
   rejilla. Ningún control cambia de tamaño, ningún texto se
   reduce, la cámara conserva sus 55 px y el Resumen sus
   143,95 px.
   Bandas: etiquetas 3/2 → 1/1 (×7 = −21), padding-top del
   panel 2 → 0 (−2), .seg 2px → 1px vertical (×5 = −10),
   row-gap de cámara 3 → 2 (−1). Total: −34 px.
   ============================================================ */
@media (min-width: 1024px) {
  @media (max-height: 860px) {
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] {
      padding-top: 0;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .t2v-label {
      margin: 1px 0 1px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .seg {
      padding: 1px 2px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] #czs-camera-row {
      row-gap: 2px;
    }
  }
}

/* ============================================================
   PAQUETE V (V-13, corrección del dueño 2026-11-01) —
   CONTROLES SUPERIORES DE EFECTOS UN POCO MÁS PEQUEÑOS.
   El Resumen MANTIENE el estándar de 143,95 px (la compactación
   quedó CANCELADA por el dueño); el espacio se gana ENCIMA
   reduciendo levemente SOLO dos controles del panel de efectos,
   por igual en los tres efectos (DOM compartido):
   (1) los botones del selector de efecto #effect-seg
       (relleno vertical 6/3 → 2 px según banda; letra 13 →
       12,5 px y altura de línea de la etiqueta 1,15 para que
       «Motion Transfer» / «Object Swap» sigan enteros en sus
       dos líneas);
   (2) los botones de la barra de DURACIÓN unificada
       #fx-duration-seg (alto 38 → 30 px) y su botón «Más»
       (#fx-otros-btn, min-height 38 → 30 px), con el relleno
       vertical de ambas barras 3 → 2 px.
   Ningún otro control se encoge; el Resumen no se toca.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen #effect-seg {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  html:not(.force-mobile) #create-screen #effect-seg .seg-btn {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12.5px;
  }
  html:not(.force-mobile) #create-screen #effect-seg .seg-t {
    line-height: 1.15;
  }
  html:not(.force-mobile) #create-screen #fx-duration-seg {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  html:not(.force-mobile) #create-screen #fx-duration-seg .seg-btn {
    height: 30px;
    min-height: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  html:not(.force-mobile) #create-screen #fx-otros-btn {
    min-height: 30px;
  }
}

/* ============================================================
   PAQUETE T (dueño 2026-11-01) — LA LÍNEA AMARILLA DE SILENCIO
   NO ES UNA CAJA EN NINGUNA BANDA. Las reglas de breakpoints
   escritas para el antiguo recuadro (rellenos de 3–10 px en
   varias bandas para #t2v-silent-warn y compañía) quedan
   neutralizadas aquí para las NUEVE notas de silencio: sin
   relleno, sin borde y sin fondo a cualquier tamaño; mandan
   la regla base (.audio-warn, línea) y el color por tema.
   ============================================================ */
:is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) :is(#t2v-silent-warn, #t2v-audio-warn, #t2v-studio-warn, #i2v-silent-warn, #i2v-audio-warn, #i2v-studio-warn, #vedit-silent-warn, #create-silent-warn, #ps-silent-warn),
html:not(.force-mobile) :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) :is(#t2v-silent-warn, #t2v-audio-warn, #t2v-studio-warn, #i2v-silent-warn, #i2v-audio-warn, #i2v-studio-warn, #vedit-silent-warn, #create-silent-warn, #ps-silent-warn),
html:not(.force-mobile) #vedit-screen [data-cz-panel="2"] #vedit-silent-warn,
html:not(.force-mobile) #vedit-screen [data-cz-panel="2"]:has(> #vedit-pro-wrap:not([hidden])) #vedit-silent-warn {
  padding: 0;
  border: 0;
  background: transparent;
}

/* ============================================================
   PAQUETE V (V-14, órdenes del dueño 2026-11-01 20:10–20:29) —
   REDUCCIÓN REAL DEL 30 % Y BANDA MÍNIMA. Solo escritorio.
   (1) Selector de efecto #effect-seg (Video a video): cada
       magnitud ≤70 % del ORIGINAL del estado V (contenedor
       51,8/43,8 · botones 45,8/39,8 · letra .seg-t 13,5):
       letra 9 px y alturas resultantes ~17–27 px según la
       letra envuelva o no. El «✦» de Studio es un glifo del
       texto: escala con la letra (es su «icono»).
   (2) Barra de duración #fx-duration-seg: contenedor 44/42
       → 26 px; botones 38 → 24 px; letra 13,5/13 → 9 px (el
       menú de «Más» es parte del mismo control y baja igual).
   (3) Tarjetas de PROPORCIÓN de la pantalla de efectos
       (#fmt-options): tarjeta 72/65 → ~42 px; icono
       .asp-shape 24 px de alto y anchos 14/60/24 → 15 px y
       9/38/15; letra 12,5 → 8,5 y número 11 → 7,5.
   (4) Cuadros de CÁMARA de Studio en efectos
       (#czs-camera-row): 55 → 38 px; icono ::before 20 → 13;
       letra 9 → 6. La cámara de Texto/Imagen (data-cam) NO
       se toca: testigo Δ=0 en el rig.
   (5) Tarjetas de PROPORCIÓN de Imagen (#i2v-asp) y de
       Texto (#t2v-asp): la misma reducción de (3), acotada
       por pantalla porque las clases .asp-* se comparten.
   (6) BANDA etapa↔consola en Imagen y Texto (ext. 4 y 6):
       la línea de estado («Studio · 1080p mejorado · Con
       sonido») sale de la banda bajo la etapa — .cz-preview-
       mode queda oculto en estas dos pantallas — y vive en
       la fila de la etiqueta NIVEL del panel derecho
       (.cz-studio-state, lo pinta app.js solo en Studio y
       dinámico con el sonido). La caja de la previa sube su
       tope de contenedor: interfaz2 la capaba a ~92cqh «con
       reserva para título y pie de modo»; el título ya no
       ocupa en escritorio y el pie de modo se mudó, así que
       el tope pasa a ~100cqh y la etapa llena su columna:
       la banda queda en la costura de la rejilla (5 px) y
       en Texto el borde superior de la etapa llega a la
       cota común de las columnas laterales (ext. 7).
   (7) Compensaciones de consola (ext. 5; en Texto con el
       mismo criterio por la ext. 6): caja de escribir
       113 → 96 px en ambas pantallas; el hueco hacia
       «Prompt con IA» se cierra (márgenes del contador y de
       la fila de IA); en Imagen la fila de las cajas gemelas
       se estrecha un poco (max-width centrado: las gemelas
       siguen iguales entre sí y Pro conserva su caja única
       dominante). La consola queda con el mismo tamaño en
       Estándar, Pro y Studio.
   El Resumen NO se toca (143,95) y ningún otro control se
   encoge: NIVEL, resolución, Enfoque y las demás barras
   quedan como están.
   ============================================================ */
@media (min-width: 1024px) {
  /* (1) selector de efecto */
  html:not(.force-mobile) #create-screen #effect-seg {
    padding-top: 1px;
    padding-bottom: 1px;
  }
  html:not(.force-mobile) #create-screen #effect-seg .seg-btn {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  html:not(.force-mobile) #create-screen #effect-seg .seg-t {
    font-size: 9px;
    line-height: 1.15;
  }
  /* (2) duración unificada */
  html:not(.force-mobile) #create-screen #fx-duration-seg {
    padding-top: 1px;
    padding-bottom: 1px;
  }
  html:not(.force-mobile) #create-screen #fx-duration-seg .seg-btn {
    height: 24px;
    min-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }
  html:not(.force-mobile) #create-screen #fx-duration-seg .seg-t {
    font-size: 9px;
  }
  html:not(.force-mobile) #create-screen #fx-otros-btn {
    min-height: 24px;
    font-size: 9px;
  }
  html:not(.force-mobile) #create-screen #fx-otros-menu .cz-otros-item {
    font-size: 9px;
  }
  /* (3) + (5) proporción, acotada por pantalla */
  html:not(.force-mobile) #create-screen #fmt-options .asp-card,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-card,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-card {
    padding: 3px 4px 2px;
    gap: 2px;
  }
  html:not(.force-mobile) #create-screen #fmt-options .asp-shape,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-shape,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-shape {
    height: 15px;
  }
  html:not(.force-mobile) #create-screen #fmt-options .asp-916,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-916,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-916 {
    width: 9px;
  }
  html:not(.force-mobile) #create-screen #fmt-options .asp-169,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-169,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-169 {
    width: 38px;
  }
  html:not(.force-mobile) #create-screen #fmt-options .asp-11,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-11,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-11 {
    width: 15px;
  }
  html:not(.force-mobile) #create-screen #fmt-options .asp-word,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-word,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-word {
    font-size: 8.5px;
  }
  html:not(.force-mobile) #create-screen #fmt-options .asp-num,
  html:not(.force-mobile) #i2v-screen #i2v-asp .asp-num,
  html:not(.force-mobile) #t2v-screen #t2v-asp .asp-num {
    font-size: 7.5px;
  }
  /* (4) cámara de Studio en la pantalla de efectos */
  html:not(.force-mobile) #create-screen #czs-camera-row .cz-chip {
    height: 38px;
    padding: 3px 2px;
    gap: 3px;
    font-size: 6px;
  }
  html:not(.force-mobile) #create-screen #czs-camera-row .cz-chip::before {
    width: 13px;
    height: 13px;
  }
  /* (6) banda mínima: la línea de estado sale de la etapa */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-preview-mode {
    display: none;
  }
  @supports (width: 1cqw) {
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-aspect="9:16"] .cz-preview-box {
      width: min(100cqw, 56.2cqh);
    }
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-aspect="16:9"] .cz-preview-box {
      width: min(100cqw, 177.7cqh);
    }
    html:not(.force-mobile) :is(#t2v-screen, #i2v-screen)[data-aspect="1:1"] .cz-preview-box {
      width: min(100cqw, 99.9cqh);
    }
  }
  /* (6) el estado, en la fila de la etiqueta NIVEL */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="2"] .cz-tier-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) .cz-studio-state {
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-3);
    white-space: nowrap;
  }
  /* (7) compensaciones de consola */
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] textarea.cz-autogrow {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .t2v-count {
    margin-top: 1px;
  }
  html:not(.force-mobile) :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-airow {
    margin-top: 2px;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow {
    max-width: calc(100% - 32px);
    margin-inline: auto;
  }
}

/* ============================================================
   PAQUETE V-14 · EXTENSIÓN 8 (orden del dueño 2026-11-01 20:40)
   — COMPRESIÓN DE LA CONSOLA de Video a video, en los TRES
   efectos, sin borrar ni añadir textos. Solo escritorio.
   (1) La línea de estado («Object Swap · Con sonido (audio
       original)») sale de debajo de la etapa (#fx-preview-mode
       se oculta en escritorio) y vive en la consola como
       #fx-state, en la misma línea y AL LADO de «SUBE TU
       VIDEO», con su color actual (var(--ink-3), 12,5 px).
       El span es absoluto respecto a su columna: su izquierda
       se ajusta por banda tras la etiqueta y su ancho máximo
       es el espacio libre hasta la columna de extras — si un
       texto no cabe en una línea, envuelve DENTRO de ese
       ancho (nunca se trunca) y la medida queda en el informe.
   (2) Las etiquetas «SUBE TU VIDEO» y «FOTOS DE REFERENCIA
       EXTRA (OPCIONAL)» bajan hasta casi pegar con sus
       botones: el texto se apoya en el FONDO de su zona de
       cabecera de 34 px y el hueco a la caja pasa de 8 a 2 px;
       la caja de la foto compensa a 36 px (34 + 2) para que
       las tres cajas sigan alineadas (V-9, Δtop = 0).
   (3) #prompt-hint sube a la línea de #prompt-label: el
       #prompt-wrap de escritorio es una rejilla (etiqueta y
       ayuda en la fila 1 con pequeña separación; el campo
       ocupa la fila 2 a todo ancho). En el DOM y en el
       teléfono nada se mueve.
   (4) El espacio liberado (la fila de la ayuda en Swap y los
       huecos) lo gana el reproductor: la consola se comprime
       y la etapa crece hacia abajo en la misma rejilla.
   ============================================================ */
#fx-state { display: none; }
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) .cz-preview-mode {
    display: none;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block {
    position: relative;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #video-block > .t2v-label {
    display: flex;
    align-items: flex-end;
    height: 34px;
    margin: 0 0 2px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-state {
    display: block;
    position: absolute;
    top: 0;
    left: 122px;
    /* Ancho FIJO (no max-width): con max-width el span, absoluto
       dentro de la columna estrecha, se encogía a lo que quedaba
       de columna (142 px a 1280, 72 px a 1024) y el texto se
       envolvía en 3–5 líneas saliéndose de su zona de 34 px
       (medido por el rig). Con ancho fijo la caja se extiende
       sobre la zona de cabecera vacía de la foto — sin truncar
       jamás: a 1180/1024 el texto usa 2 líneas dentro de la zona. */
    width: 440px;
    height: 34px;
    display: flex;
    align-items: flex-end;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-3);
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #swap-extras > .group-label {
    display: flex;
    align-items: flex-end;
    height: 34px;
    margin: 0 0 2px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-drop,
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #photo-preview {
    margin-top: 36px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #prompt-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "lab hint" "field field";
    column-gap: 8px;
    align-items: end;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #prompt-label {
    grid-area: lab;
    white-space: nowrap;
    margin-bottom: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #prompt-wrap .t2v-field {
    grid-area: field;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #prompt-hint {
    grid-area: hint;
    margin: 0;
    min-width: 0;
  }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-state {
    left: 114px;
    width: 350px;
  }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-state {
    left: 106px;
    width: 250px;
  }
}

/* ============================================================
   PAQUETE V-14 · EXTENSIÓN 9 (regla permanente del dueño
   2026-11-01 20:54) — POSICIÓN DE LA PANTALLA: el reproductor
   lo más alto posible, su borde superior AL MISMO NIVEL que
   las dos columnas laterales y su borde inferior a la MISMA
   distancia de la consola que la costura entre columnas
   (~5 px). Inventario medido con probe-pos9.js (5 tamaños):
   · Texto e Imagen: ya cumplían por las ext. 4–7 (testigos).
   · Historia: YA CUMPLE tal cual (Δ superior 0,0 y banda
     5,0 en los 5 tamaños) — no se toca nada: el conflicto
     temido con «el reproductor NO se hace más grande» no se
     produce porque no hay nada que corregir.
   · Editar: su ÁREA de previa cumple (Δ 0, costura 5), pero
     la CAJA queda insetada (Δ superior 8,4–17,8; banda
     19,4–28,8) por su línea de modo bajo la etapa y el tope
     del 92 % — mover esa línea no está ordenado en este
     paquete y su diseño aprobado (E-6/E-7) manda subir el
     reproductor «sin aumentar su tamaño»: NO se fuerza y
     queda reportado con medidas en el informe para que el
     dueño decida.
   · Video a video: la caja quedaba centrada en su área
     (Δ superior 11,1–22,1; banda 16,2–27,1 tras la ext. 8).
     Aquí SÍ hay orden de crecimiento (ext. 8, punto 4): se
     sube el tope de la caja de ~92 cqh a ~100 cqh, el mismo
     valor de las ext. 4–7 de Texto/Imagen (56,2 / 177,7 /
     99,9), solo en la pantalla de efectos (Historia queda
     fuera por su regla propia de altura). Mis videos y
     Plantillas quedan fuera de esta extensión.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"])[data-aspect="9:16"] .cz-preview-box {
    width: min(100cqw, 56.2cqh);
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"])[data-aspect="16:9"] .cz-preview-box {
    width: min(100cqw, 177.7cqh);
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"])[data-aspect="1:1"] .cz-preview-box {
    width: min(100cqw, 99.9cqh);
  }
  /* Ext. 7 hecha real en Texto: la caja se PEGA ARRIBA del todo
     (antes quedaba centrada y la «subida» de la ext. 7 no se veía:
     desfases de 6,9–37,9 px medidos por el rig). En 16:9 la columna
     es más alta que el formato (razón 1,54–1,73 < 1,78): la caja no
     puede tocar arriba y abajo a la vez sin deformar el vídeo, así
     que manda la orden literal — arriba del todo, al nivel de las
     columnas — y la banda inferior es el resto (conflicto medido y
     reportado en el informe, como Historia/Editar). */
  html:not(.force-mobile) #t2v-screen .cz-preview-box {
    margin-block: 0 auto;
  }
}

/* ============================================================
   PAQUETE V-14 · CIERRE (corrección hallada en la verificación
   final, 2026-11-02) — LA VISTA PREVIA DE IMAGEN A VIDEO, YA
   CARGADA, ES COMPACTA COMO EN SUS PANTALLAS HERMANAS.
   Al corregirse el cableado de la foto (la vista previa nunca
   pintaba la imagen: el src caía sobre el DIV, no sobre la
   <img>), la previa pasó a medirse con la foto a altura
   natural (213,1 px a 1440×900) y se comía entera la
   compensación de las ext. 4–7: la consola crecía a 440,6 px
   y la etapa perdía 91,3 px que el paquete le había ganado.
   En Video a video y en Editar la previa cargada ya es una
   franja compacta con miniatura de 40 px (height 56 px,
   object-fit cover): aquí se aplica el mismo tratamiento,
   solo escritorio y solo Imagen a video. La fila de subida
   vuelve a medir lo que miden sus cajas (74,3 px a 1440×900)
   y la consola/etapa recuperan las medidas del paquete.
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow .preview.show,
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] #i2v-photo2-wrap .preview.show {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] #i2v-photo-img,
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] #i2v-photo2-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
    flex: none;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .preview .file-meta {
    flex: 1;
    min-width: 0;
    margin-top: 0;
  }
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .preview .file-meta .fname {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* V-14 CIERRE (2ª corrección de la verificación final): la
   consola de Imagen mide IGUAL en los tres niveles (ext. 4–7).
   En Pro la tercera caja de la fila se oculta (su ruta no
   admite fotograma final) y la fila, al quedarse con dos
   cajas más anchas, bajaba de 74,3 a 66,8 px: la consola
   medía 294,3 frente a 301,8 en Studio/Estándar y la etapa
   saltaba 7,5 px al cambiar de nivel. Altura mínima de la
   fila por banda = su altura natural con las tres cajas
   (74,3 px; 95,3 px en la banda de 1024, donde los textos
   envuelven más): ni Studio ni Estándar se mueven. */
@media (min-width: 1100px) {
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow {
    min-height: 74.3px;
  }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  html:not(.force-mobile) #i2v-screen [data-cz-panel="1"] .cz-refrow {
    min-height: 95.3px;
  }
}

/* ============================================================
   PAQUETE V-15 (órdenes del dueño 2026-11-02, tras su revisión
   en vivo de staging; corrección de las 11:42) — TRES AJUSTES.
   Solo escritorio (min-width: 1024px); server.py no se toca.

   AJUSTE 1 — VIDEO A VIDEO CLONA LOS TAMAÑOS DEL PANEL DERECHO
   COMPLETO DE IMAGEN A VIDEO («no es que me cambie los íconos
   ni los menús de Video a video: lo que vas a coger de aquí es
   simplemente el tamaño»). Solo MEDIDAS: cada control de
   efectos pasa a medir lo que mide su análogo en Imagen a
   video, medido con sonda sobre el árbol V-14 en los cinco
   tamaños (contenedor de segmento 36,8 · botón 30,8 · relleno
   2/6 px · letra 13 px y .seg-t 13,5/1,25 · etiquetas 8/5,
   5/3 y 4/2 por banda de altura · cámara 55 px con icono
   ::before de 20 px, letra 9 px y huecos de 8 px). Quedan
   neutralizadas las reducciones que solo vivían en efectos:
   V-13 y la ext. 1 de V-14 (selector de efecto y duración),
   las bandas de aire de V-8 en el panel de efectos (etiquetas
   3/2, botones de segmento a 3 px), el «aire recuperado» de
   Studio (etiquetas 1/1, segmentos a 1 px, tope del panel a
   0) y la ext. 4 de V-14 (cámara de Studio a 38 px). Las
   tarjetas de PROPORCIÓN ya medían igual que las de Imagen
   (ext. 3/5 de V-14, compartida) y no se tocan. ENFOQUE no
   tiene análogo en Imagen: recibe la métrica estándar del
   panel clonado, como el resto de segmentos. El Resumen NO
   se toca (recogido 143,95 px) y los iconos, textos y menús
   de Video a video quedan los suyos, intactos.
   AJUSTE 2 — HISTORIA: el bloque TAMAÑO DEL PROYECTO
   (#scene-seg) un poco más pequeño, en Estándar y en Pro,
   para quitar el scroll residual del panel derecho. Nada
   más de Historia se toca.
   AJUSTE 3 — PLANTILLAS: las 6 carpetas de familias conservan
   su tamaño actual exacto — su altura sigue saliendo de la
   misma fórmula de dos filas de la parrilla anterior,
   (alto de la lista − 12 px) / 2, y el ancho de su proporción
   1/1.05 — pero se acomodan una al lado de la otra en una
   fila flexible que envuelve, con la costura uniforme de
   5 px, tantas por fila como quepan; el espacio vacío queda
   debajo, a la espera de más carpetas.
   ============================================================ */
@media (min-width: 1024px) {
  /* ---- Ajuste 1 · etiquetas del panel de efectos = Imagen ---- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .t2v-label {
    margin: 8px 0 5px;
  }
  @media (max-height: 860px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .t2v-label {
      margin: 5px 0 3px;
    }
  }
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .t2v-label {
      margin: 4px 0 2px;
    }
  }
  /* ---- Ajuste 1 · segmentos del panel de efectos = Imagen ---- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg {
    padding: 2px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg-btn {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg-btn {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] {
    padding-top: 2px;
  }
  /* ---- Ajuste 1 · ELIGE EL EFECTO = NIVEL de Imagen ---- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #effect-seg {
    padding: 2px;
    gap: 0;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #effect-seg .seg-btn {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
  }
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #effect-seg .seg-btn {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #effect-seg .seg-t {
    font-size: 13.5px;
    line-height: 1.25;
  }
  /* ---- Ajuste 1 · DURACIÓN (+ «Más») = DURACIÓN de Imagen ---- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-duration-seg {
    padding: 2px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-duration-seg .seg-btn {
    height: auto;
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-duration-seg .seg-btn {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-duration-seg .seg-t {
    font-size: 13.5px;
    line-height: 1.25;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-otros-btn {
    min-height: 0;
    font-size: 13px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-otros-menu .cz-otros-item {
    font-size: 13px;
  }
  /* ---- Ajuste 1 · SONIDO de Studio: hueco del segmento = Imagen ---- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #czs-sound-seg {
    gap: 4px;
  }
  /* ---- Ajuste 1 · CÁMARA de Studio = cámara de Imagen ---- */
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] #czs-camera-row {
    row-gap: 8px;
    column-gap: 8px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #czs-camera-row .cz-chip {
    height: 55px;
    padding: 6px 2px 5px;
    gap: 3px;
    font-size: 9px;
    border-radius: 12px;
  }
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #czs-camera-row .cz-chip::before {
    width: 20px;
    height: 20px;
  }
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #czs-camera-row .cz-chip {
      height: 53px;
      padding: 5px 2px 4px;
    }
  }
  /* ---- Ajuste 2 · Historia: TAMAÑO DEL PROYECTO más pequeño ---- */
  html:not(.force-mobile) #create-screen #scene-seg .seg-btn {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  html:not(.force-mobile) #create-screen #scene-seg .seg-t {
    font-size: 12px;
    line-height: 1.08;
  }
  html:not(.force-mobile) #create-screen #scene-seg .seg-d {
    font-size: 9.5px;
    line-height: 1.08;
  }
  /* ---- Ajuste 3 · Plantillas: familias una al lado de la otra ---- */
  html:not(.force-mobile) #ss-family-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
    justify-content: flex-start;
  }
  html:not(.force-mobile) #ss-family-list .sty-gcard--fam {
    height: calc((100% - 12px) / 2);
    flex: 0 0 auto;
  }
}

/* ============================================================
   PAQUETE V-15 · AJUSTE 1 — RED DE SEGURIDAD (condición del
   dueño: «si con ese tamaño aparece la barra de scroll,
   reduce solo lo necesario y repórtalo»). Medido con la
   sonda v15b sobre el CLON PURO: Motion y Swap cierran en 0
   en los cuatro tamaños grandes y solo desbordan en
   1024×665 (+30/+50); Studio desborda en los cinco (+42/
   +75/+137/+177/+216) porque su panel carga ~180 px más que
   el de Imagen a video en el mismo estado (la alerta de
   silencio de 50,6 px que Imagen en Studio no muestra, el
   bloque ENFOQUE completo ~59,6 px que Imagen no tiene, el
   selector de efecto con sus dos líneas ~+15 px y tres
   etiquetas más ~+24 px) — la propia Imagen desborda en
   Estándar a 1180×730 (+82) y 1024×665 (+126) y en Studio a
   1024×665 (+68). Reducciones aplicadas, SOLO donde hay
   desborde (valores FINALES medidos con la sonda v15b;
   «clon» = el tamaño clonado puro):
   · la línea del botón «Más» heredaba 1,6 y estiraba la
     barra de duración +3,9 px: pasa a 1,25, la del sistema
     de segmentos (la barra queda 36,3/30,3; clon 38,8/32,8);
   · Motion/Swap: clon íntegro en los cuatro tamaños grandes
     (desborde 0 sin tocar nada); a 1024×665, etiquetas 1/1
     (clon 4/2), relleno vertical de segmento 1,5 px (clon
     2), botones de segmento 1,5 px (clon 5), botones del
     selector 2 px (clon 5), línea del selector 1,15 y tope
     del panel a 0 (clon 2) — cierran en 0;
   · Studio: a 1440×900 etiquetas 4/3 (clon 8/5) y botones
     de segmento a 5 px (clon 6) — cierra en 0; a ≤860
     etiquetas 3/2, botones a 4 px, cámara 50 px (clon 55),
     hueco de fila 6 (clon 8) y línea del selector 1,15; a
     ≤790 cámara 48 px; a ≤700 mandan los valores de la
     banda general (etiquetas 1/1, botones 1,5 px) con
     cámara 46 px y hueco 5. Con eso Studio baja del clon
     puro (+75/+137/+177/+216) a +29/+87/+127/+141 de
     scroll CONTENIDO a 1280×832 y menores: llegar a 0 ahí
     exigiría volver a los tamaños del −30 % que el dueño
     rechazó (cámara de 38, letras de 9), y el propio panel
     de Imagen desborda +82/+126 en Estándar a 1180×730 y
     1024×665. El Resumen (143,95) y la reserva del panel
     no se tocan: ningún control queda tapado y el último
     siempre se alcanza (patrón contenido aceptado desde
     V-8).
   ============================================================ */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #fx-otros-btn {
    line-height: 1.25;
  }
  /* Studio a 1440×900: cierra en 0 */
  @media (min-height: 861px) {
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .t2v-label {
      margin: 4px 0 3px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .seg-btn {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  /* Studio a ≤860: un paso de aire */
  @media (max-height: 860px) {
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .t2v-label {
      margin: 3px 0 2px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .seg-btn {
      padding-top: 4px;
      padding-bottom: 4px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #effect-seg .seg-t {
      line-height: 1.15;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip {
      height: 50px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] #czs-camera-row {
      row-gap: 6px;
    }
  }
  /* Studio a ≤790: la cámara un paso más */
  @media (max-height: 790px) {
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip {
      height: 48px;
    }
  }
  /* Studio a ≤700 */
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .t2v-label {
      margin: 2px 0 1px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] .seg-btn {
      padding-top: 3px;
      padding-bottom: 3px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip {
      height: 46px;
    }
    html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] #czs-camera-row {
      row-gap: 5px;
    }
  }
  /* Motion/Swap (y el resto del panel) a ≤700: cierre en 0 */
  @media (max-height: 700px) {
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] {
      padding-top: 0;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .t2v-label {
      margin: 1px 0 1px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg {
      padding-top: 1.5px;
      padding-bottom: 1.5px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) [data-cz-panel="2"] .seg-btn {
      padding-top: 1.5px;
      padding-bottom: 1.5px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #effect-seg .seg-btn {
      padding-top: 2px;
      padding-bottom: 2px;
    }
    html:not(.force-mobile) #create-screen:not([data-cz-effect="script"]) #effect-seg .seg-t {
      line-height: 1.15;
    }
  }
}

/* ============================================================
   PAQUETES V-15b + V-15c (decisiones del dueño 2026-11-02
   13:10 y 13:13, tras el cierre de V-15) — DESBORDE A CERO.
   Solo escritorio (min-width: 1024px); server.py no se toca.
   Las reducciones se aplican SOLO en las bandas con desborde
   (≤860 de alto): a 1440×900 ambos paneles ya cierran en 0 y
   no se encoge nada de más.

   V-15b — VIDEO A VIDEO, SOLO STUDIO
   (#create-screen[data-cz-effect="studio"]): el clon de
   Imagen dejó a Studio con scroll contenido (+29/+87/+127/
   +141) porque su panel carga bloques que Imagen no tiene.
   Orden EXPRESA de sacrificio del dueño:
   (1) las tarjetas de PROPORCIÓN (#fmt-options, acotado a
       #create-screen para que Texto/Imagen queden Δ=0):
       icono .asp-shape 15 → 11 px de alto, letra 8,5 → 8 y
       número 7,5 → 7, relleno 3/2 → 2/1 y hueco 2 → 1;
   (2) la barra de DURACIÓN (#fx-duration-seg y su «Más»)
       un paso por debajo del clon, solo en Studio: relleno
       de botón 6/6 (5/5 a ≤700) → 3/3;
   (3) SOLO porque (1)+(2) no bastan, los cuadros de CÁMARA
       de Studio (#czs-camera-row): alto 50/48/46 → 42/31/28
       por banda (≤860/≤790/≤700), icono 20 → 17/14/13,
       hueco de fila 6/5 → 5/4/3; rejilla 3+2 uniforme y
       letra 9 intactas. En las bandas ≤790 los escalones
       (1) y (2) también bajan a su suelo legible (icono de
       proporción 9 px, número 6,5 px, relleno de duración
       2 px): el desborde a cerrar ahí es mayor.
   Motion y Swap NO se tocan (clon puro, desborde 0 ya).

   V-15c — HISTORIA (Estándar y Pro por igual): tras V-15 el
   panel aún desborda +22/+84/+124/+166. Orden del dueño:
   tomar el espacio DE LA CÁMARA y de cualquier icono más
   grande que otro:
   (1) los 6 cuadros de #story-camera-row: icono ::before
       20 → 15 px, letra 9 → 8,5 px, relleno 6/5 → 3/2,
       hueco interno 3 → 2 y hueco de fila 8 → 5 (las
       etiquetas largas siguen enteras en dos líneas y el
       ejemplo al tocar sigue funcionando: solo CSS);
   (2) el icono desproporcionado del panel: el indicador
       FIJO de proporción (.story-fmt-fixed, «Vertical ·
       9:16» sin selección): su forma .asp-916 mide 13×22 —
       el icono más alto del panel — y su caja relleno
       10/10; pasa a forma 10×16, relleno 5/5 y letra
       13,5 → 12,5.
   Nada más de Historia se toca (etapa 92cqh, consola, caja
   de escritura, #scene-seg de V-15, Resumen y posiciones
   congelados).
   El Resumen NO se toca en ninguno de los dos paneles
   (recogido 143,95 px; la reserva del panel, intacta).
   ============================================================ */
@media (min-width: 1024px) and (max-height: 860px) {
  /* ---- V-15b (1) · Proporción de Studio ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-card {
    padding: 2px 4px 1px;
    gap: 1px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-shape {
    height: 11px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-916 {
    width: 7px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-169 {
    width: 29px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-11 {
    width: 11px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-word {
    font-size: 8px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-num {
    font-size: 7px;
  }
  /* ---- V-15b (2) · Duración de Studio un paso bajo el clon ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fx-duration-seg .seg-btn {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  /* ---- V-15b (3) · Cámara de Studio ≤860 ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip {
    height: 42px;
    padding: 4px 2px 3px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip::before {
    width: 17px;
    height: 17px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] #czs-camera-row {
    row-gap: 5px;
  }
  /* ---- V-15c (1) · Cámara de Historia ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row {
    gap: 5px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row .cz-chip {
    padding: 3px 2px 2px;
    gap: 2px;
    font-size: 8.5px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row .cz-chip::before {
    width: 15px;
    height: 15px;
  }
  /* ---- V-15c (2) · Indicador fijo de proporción de Historia ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .story-fmt-fixed {
    padding: 5px 12px;
    font-size: 12.5px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .story-fmt-fixed .asp-916 {
    width: 10px;
    height: 16px;
  }
}
@media (min-width: 1024px) and (max-height: 790px) {
  /* ---- V-15b · Bandas ≤790: los mismos bloques, a su suelo
     legible (el desborde a cerrar aquí es mayor: +87/+127 en
     Studio y +84/+124 en Historia sobre el estado V-15) ---- */
  /* (1) Proporción de Studio: icono 11 → 9, número 7 → 6,5 */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-shape {
    height: 9px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-916 {
    width: 6px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-169 {
    width: 24px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-11 {
    width: 9px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-word {
    font-size: 7.5px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fmt-options .asp-num {
    font-size: 6.5px;
  }
  /* (2) Duración de Studio: relleno 3 → 2 */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fx-duration-seg .seg-btn {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  /* (3) Cámara de Studio ≤790: 38 → 31, icono 16 → 14 */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip {
    height: 31px;
    padding: 2px 2px 1px;
    gap: 2px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip::before {
    width: 14px;
    height: 14px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] #czs-camera-row {
    row-gap: 4px;
  }
  /* ---- V-15c · Historia ≤790: cámara e indicador a su suelo ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row {
    gap: 4px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row .cz-chip {
    padding: 2px 2px 1px;
    font-size: 8px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #story-camera-row .cz-chip::before {
    width: 13px;
    height: 13px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .story-fmt-fixed {
    padding: 3px 12px;
    font-size: 12px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .story-fmt-fixed .asp-916 {
    width: 9px;
    height: 14px;
  }
}
@media (min-width: 1024px) and (max-height: 700px) {
  /* ---- V-15b (3) · Cámara de Studio ≤700: el paso final ---- */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip {
    height: 28px;
    padding: 2px 2px 1px;
    gap: 2px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-camera-row .cz-chip::before {
    width: 13px;
    height: 13px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="2"] #czs-camera-row {
    row-gap: 3px;
  }
}

/* ================================================================
   PAQUETE V-15d (dueño 2026-11-02 14:08–14:11) — tres órdenes:
   PARTE 1: cierre del desborde del panel derecho a CERO en los
   cinco tamaños de su Mac, en Studio (Video a video) y en
   Historia, con las fuentes que el dueño autorizó en su orden:
   (1) el aire de las etiquetas; (2) si falta, la presentación
   de la alerta de silencio (su TEXTO unificado del Paquete T
   NO cambia), el chip de Resolución y el bloque Enfoque — cada
   una con moderación y acotada por pantalla/efecto/banda, para
   que Motion/Swap/Texto/Imagen/Editar/Plantillas queden Δ=0.
   PARTE 3a: la consola de Studio baja hasta sus botones (fuera
   la banda vacía de la cabecera) y lo liberado va a la etapa.
   PARTE 3b: la etapa de Historia se acorta hacia arriba y lo
   liberado va a su consola (la caja de escribir crece).
   El Resumen recogido (143,95 px) y su reserva no se tocan.
   ================================================================ */

/* ── PARTE 1 · STUDIO — banda ≤790 (1280×770, 1180×730, 1024×665).
   A 1440×900 y 1280×832 Studio ya cerraba en 0: no se tocan. ── */
@media (min-width: 1024px) and (max-height: 790px) {
  /* (1) aire de las etiquetas: 3/2 → 1/1, el suelo que el propio
     panel de efectos usa a ≤700 desde la red de V-15. */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] .t2v-label {
    margin-top: 1px; margin-bottom: 1px;
  }
  /* (2) alerta de silencio, solo presentación: margen superior
     6 → 2 y letra 12,5 → 11 con interlínea 1,3 (3 líneas). */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #create-silent-warn {
    margin-top: 2px; font-size: 11px; line-height: 1.3;
  }
  /* (3) chip de Resolución: relleno 7/7 → 2/2 y letra 13 → 12. */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] .cz-info-chip {
    padding-top: 2px; padding-bottom: 2px; font-size: 12px;
  }
  /* (4) botones de Sonido y de Enfoque: relleno 4/4 → 2/2. */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] :is(#czs-sound-seg, #czs-focus-seg) .seg-btn {
    padding-top: 2px; padding-bottom: 2px;
  }
  /* (5) bloque Enfoque: relleno del segmento 2/2 → 1/1 e
     interlínea de su texto 1,25 → 1,15. */
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-focus-seg {
    padding-top: 1px; padding-bottom: 1px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-focus-seg .seg-t {
    line-height: 1.15;
  }
}
/* ── PARTE 1 · STUDIO — banda ≤700 (1024×665): a este alto la red
   de V-15 ya dejó etiquetas a 1/1 y botones de Sonido/Enfoque a
   1,5 px; se aprieta solo lo que las fuentes autorizadas dejan. ── */
@media (min-width: 1024px) and (max-height: 700px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] :is(#czs-sound-seg, #czs-focus-seg) .seg-btn {
    padding-top: 1px; padding-bottom: 1px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #czs-focus-seg {
    padding-top: 0.5px; padding-bottom: 0.5px;
  }
}

/* ── PARTE 1 · HISTORIA — etiquetas: es la única pantalla que
   conservaba los márgenes base (8/5; 6/4 a ≤700). Se lleva a la
   métrica del panel de efectos tras V-15: 3/2 y 1/1 a ≤700.
   A 1280×770 este aire solo ya cierra el desborde (+26). ── */
@media (min-width: 1024px) and (max-height: 790px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .t2v-label {
    margin-top: 3px; margin-bottom: 2px;
  }
}
@media (min-width: 1024px) and (max-height: 700px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .t2v-label {
    margin-top: 1px; margin-bottom: 1px;
  }
}
/* ── PARTE 1 · HISTORIA — banda ≤760 (1180×730, 1024×665): tras
   las etiquetas aún faltan ≈18 px a 1180×730; entran la alerta,
   los chips de Resolución y el bloque Enfoque, con moderación. ── */
@media (min-width: 1024px) and (max-height: 760px) {
  /* alerta de silencio, solo presentación (texto intacto). */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #create-silent-warn {
    margin-top: 2px; font-size: 11px; line-height: 1.3;
  }
  /* chips de Resolución y bloque Enfoque: botones 6/6 → 2/2,
     relleno de los segmentos 2/2 → 1/1 e interlínea 1,25 → 1,15. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] :is(#res-options, #story-focus-seg) .seg-btn {
    padding-top: 2px; padding-bottom: 2px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] :is(#res-options, #story-focus-seg) {
    padding-top: 1px; padding-bottom: 1px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] :is(#res-options, #story-focus-seg) .seg-t {
    line-height: 1.15;
  }
}
@media (min-width: 1024px) and (max-height: 700px) {
  /* a ≤700 los botones de Resolución/Enfoque viven a 5/5: la
     regla de ≤760 ya los deja en 2/2 — aquí solo baja el
     relleno de los segmentos a 0,5. */
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] :is(#res-options, #story-focus-seg) {
    padding-top: 0.5px; padding-bottom: 0.5px;
  }
}

/* ── PARTE 3a · STUDIO — la consola baja hasta sus botones.
   La cabecera de la consola (ext. 8 de V-14) dejaba una zona de
   34 px para una línea de texto de ≈17 px: ≈17 px de aire sobre
   la primera fila. La zona baja a 20 px SOLO en Studio:
   · la etiqueta «Sube tu video» (flex-end) queda con su texto
     pegado al mismo borde inferior de siempre;
   · #fx-state conserva su caja de 34 px y su texto alineado al
     mismo borde inferior (bottom idéntico): sube su «top» a
     −14 px, dentro del aire que se elimina — si su texto
     envolviera a 2 líneas, ocuparía la misma caja de siempre
     sin pisar ningún control (la caja es invisible);
   · la foto compensa con el mismo Δ (36 → 22) para que las
     tres cajas de subida sigan naciendo alineadas (Δtop = 0);
   · la etiqueta de extras NO se encoge (su texto usa 2 líneas
     reales dentro de los 34 px): su botón compensa con −14 px
     (el selector lleva .ps-add-ref: la regla base de V-10
     «#fx-ref-drop.ps-add-ref { margin-top: 0 }» tiene más
     especificidad que el id solo — sin la clase no aplicaba,
     lo cazó rig-v en el estado cargado);
   · el relleno superior de la consola baja 8 → 3.
   Lo liberado (14 + 5 = 19 px) va a la etapa: la fila de la
   consola es de alto por contenido y la de la etapa toma el
   resto. Motion/Swap no se tocan.
   BANDA EXCLUIDA (791–860 de alto, p. ej. 1280×832): ahí la
   etapa de Studio es de ancho mandado y al encoger la consola
   la caja se desfasa 2,5 px de las columnas (lo cazó rig-v
   contra la ext. 9 de V-14, regla permanente del dueño) — la
   Parte 3a se mide y aplica a ≤790 y a ≥861, donde la etapa
   absorbe lo liberado sin desfasarse (verificado). ── */
@media (min-width: 1024px) and (max-height: 790px), (min-width: 1024px) and (min-height: 861px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #video-block > .t2v-label {
    height: 20px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fx-state {
    top: -14px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #photo-drop,
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #photo-preview {
    margin-top: 22px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] #fx-ref-drop.ps-add-ref {
    margin-top: -14px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="studio"] [data-cz-panel="1"] {
    padding-top: 3px;
  }
}

/* ── PARTE 3b · HISTORIA — la etapa se acorta hacia arriba.
   La fila de la etapa pasa de minmax(58,88vh, 1fr) a 51vh
   exactos (la caja con ella: 58,88vh → 51vh) y la consola toma
   todo lo liberado (≈61 px a 770, ≈52 px a 665). La caja de
   escribir crece con el mismo mecanismo de siempre (cambio 9:
   ideaGrowUpdate lee el max-height computado y arranca a la
   mitad en líneas completas): los techos suben ≈ lo liberado
   en cada banda (144→215, 127→188, 79→134) y el arranque con
   ellos (70→113, 70→92, 48→70). La costura de 5 px, la
   distancia botones→HISTORIA de 15 px y el Resumen no cambian;
   al escribir, nada se mueve (verificado: Δ=0 fuera de la
   consola). Solo escritorio (≥1024): tableta y teléfono van en
   sus pasos. ── */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .tpl-screen-inner {
    grid-template-rows: auto 51vh minmax(0, 1fr);
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-preview-box {
    height: 51vh;
  }
}
@media (min-width: 1024px) and (min-height: 861px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input {
    height: 113px; min-height: 113px; max-height: 215px;
  }
}
@media (min-width: 1024px) and (min-height: 761px) and (max-height: 860px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input {
    height: 92px; min-height: 92px; max-height: 188px;
  }
}
@media (min-width: 1024px) and (max-height: 760px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #idea-input {
    height: 70px; min-height: 70px; max-height: 134px;
  }
}

/* ============================================================
   PAQUETE V-15d · PARTE 4 — PLANTILLAS: CINCO FAMILIAS POR
   FILA (corrección del dueño 2026-11-02 15:31, que SUSTITUYE
   al Ajuste 3 de V-15: vio el 3+3 y lo rechazó — las tarjetas
   quedaron demasiado grandes; su «conservar el tamaño» era el
   de SU computadora, donde cabían CINCO por fila).
   La lista de familias vuelve a rejilla, de 5 columnas, con la
   costura uniforme de 5 px: las 6 familias quedan 5 arriba y
   la sexta abajo A LA IZQUIERDA (inicio de la segunda fila);
   el espacio restante queda debajo, para familias futuras en
   filas de 5. El tamaño de la tarjeta sale de la columna
   (ancho = (lista − 4×5) / 5) y su altura de su proporción de
   siempre (1/1.05, intacta): no cambia ni el contenido ni el
   diseño interno de la tarjeta, solo su tamaño y la rejilla.
   Solo escritorio (min-width: 1024px), como el ajuste que
   sustituye; tableta y teléfono no se tocan.
   Medido con la sonda v15d-p4 (antes: 3+3 en los cinco
   tamaños, tarjeta de 374×393 a 262×275). */
@media (min-width: 1024px) {
  html:not(.force-mobile) #ss-family-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 5px;
    align-content: flex-start;
    justify-content: stretch;
  }
  html:not(.force-mobile) #ss-family-list .sty-gcard--fam {
    height: auto;
    width: 100%;
    justify-self: stretch;
  }
}

/* ============================================================
   PAQUETE V-15e · PLANTILLAS — LAS TARJETAS DE FAMILIA SON
   VERTICALES (orden del dueño 2026-11-02 16:43, que corrige
   la proporción de la Parte 4 de V-15d).
   Vio las tarjetas casi cuadradas (1/1.05: 276,8×290,6 a
   1440×900) y las rechazó: la forma de la tarjeta de familia
   tiene que ser VERTICAL, como todas las portadas de la app
   (verticales 9:16). Este bloque cambia SOLO la proporción
   de la tarjeta en la rejilla de escritorio (≥1024 px): de
   1/1.05 a 9/16. Todo lo demás de la Parte 4 queda intacto:
   5 tarjetas por fila, costura uniforme de 5 px, la sexta
   familia abajo a la izquierda y el contenido/diseño interno
   de la tarjeta sin tocar (la imagen ya va a todo el marco
   con object-fit: cover). Con el ancho de columna de la
   Parte 4, la altura sale de la proporción: 492,1 px a
   1440×900; la lista de biblioteca hace scroll vertical si
   la pantalla no alcanza para las dos filas completas.
   Solo escritorio (min-width: 1024px), como la Parte 4;
   tableta y teléfono no se tocan. */
@media (min-width: 1024px) {
  html:not(.force-mobile) #ss-family-list .sty-gcard--fam {
    aspect-ratio: 9 / 16;
  }
}

/* ============================================================
   PAQUETE V-16 · ESTANDARIZACIÓN PANTALLA/CONSOLA
   (orden del dueño 2026-11-02, tras revisar staging)

   (1) El tamaño del reproductor de TEXTO A VIDEO en horizontal
       es EL estándar de todas las carpetas y modos: la caja ocupa
       el ancho completo de la columna central y su alto es el
       16:9 exacto de ese ancho.
   (2) La consola inferior va PEGADA a la caja (la costura es el
       row-gap de la rejilla, ~5 px, el mismo que separa las
       columnas laterales).
   (3) ORDEN DE CONSTRUCCIÓN: primero se fija la consola (su
       posición no se mueve; solo se le quita AIRE interno —
       márgenes y rellenos de etiquetas y del panel oculto —
       según el precedente V-15d) y DESPUÉS la caja se acomoda
       al espacio fijo resultante. Ningún control cambia de
       tamaño ni de orden; nada se sale de la pantalla: la tira
       conserva su min-height:0 + overflow-y:auto de siempre.
   (4) VERTICAL (9:16) y CUADRADO (1:1) NO se tocan: todas las
       reglas de este paquete van ceñidas a [data-aspect="16:9"].
   (5) Editar · Intercambiar NO se toca: sus reglas viven solo
       con la envuelta general visible (:has(#vedit-swap-wrap
       [hidden])) y su ajuste JS propio queda intacto.
   (6) Historia NO se toca: Crear se ciñe a data-cz-mode="v2v".

   Dos regímenes según el espacio que deja la consola fijada:
   · Régimen A (la consola cabe bajo la caja estándar): la fila
     central de la rejilla se ciñe a la caja (auto) y la tira
     absorbe el resto (minmax(0,1fr)) — el mismo patrón que ya
     cumple Intercambiar: caja estándar exacta y consola llena.
   · Régimen B (la consola fijada no deja el alto estándar): la
     rejilla queda como está y la caja toma EXACTAMENTE el alto
     del marco (ni un píxel de banda muerta), con el estándar
     como techo: la caja se acomoda al espacio, nunca al revés.
   ============================================================ */

/* ---------- V16-S · Aire interno de las consolas (solo 16:9) ----------
   Márgenes/rellenos de etiquetas, contador, fila IA y el panel
   de guion oculto; ningún control cambia de tamaño. */
@media (min-width: 1024px) {
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] [data-cz-panel="1"],
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"] [data-cz-panel="1"],
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) [data-cz-panel="1"] {
    padding-top: 5px;
    padding-bottom: 7px;
  }
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"] [data-cz-panel="1"] { padding-bottom: 5px; }
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] [data-cz-panel="1"] > .t2v-label { margin-bottom: 2px; }
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] [data-cz-panel="1"] .t2v-count { margin-top: 0; }
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] [data-cz-panel="1"] .cz-airow { margin-top: 2px; }
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"] [data-cz-panel="1"] .t2v-label { margin-top: 0; }
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"] [data-cz-panel="1"] > div:nth-of-type(2) { margin-top: 0; }
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"] [data-cz-panel="1"] .script-panel.hidden-block { margin-top: 0; }
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) [data-cz-panel="1"] .t2v-label { margin: 6px 0 3px; }
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) [data-cz-panel="1"] .t2v-count { margin-top: 0; }
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) [data-cz-panel="1"] .cz-airow { margin-top: 2px; }
}

/* ---------- V16-A · Régimen A: la fila central ES el alto estándar ----------
   La etapa es container-type:size: su alto NO puede venir de
   su contenido (una fila «auto» la colapsa a 0). Por eso la
   fila central se fija con el alto estándar exacto — el ancho
   de la columna central × 9/16, con el tope del max-width de
   la retícula — y la tira absorbe el resto (minmax(0,1fr)):
   la consola queda llena y pegada, como en Intercambiar.
   La caja toma el 100% del alto del marco (= el estándar) y
   su ancho sale de la proporción 16/9. */

/* Texto a video: régimen A en todo el escritorio. Su consola
   (204,8) cabe bajo la caja estándar en todos los tamaños del
   dueño: la caja llena el marco estándar completo y
   desaparece la banda muerta interna de 18,8–80,8 px. */
@media (min-width: 1024px) and (min-height: 640px) {
  html:not(.force-mobile) #t2v-screen[data-aspect="16:9"] .tpl-screen-inner {
    grid-template-rows: auto calc(min(100vw - 426px, 1054px) * 9 / 16) minmax(0, 1fr);
  }
  html:not(.force-mobile) #t2v-screen[data-aspect="16:9"] .cz-preview-box {
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
}

/* Pantallas altas (≥861: 1440×900): Crear en reposo (sin medio
   cargado; su consola sin aire ya cabe). Edición general NO
   entra aquí: a 900 su consola no baja de ~299 sin tocar los
   controles (a 832 sí, por las reglas de banda de la propia
   app) — queda en régimen B con su caja a 40,4 del estándar. */
@media (min-width: 1024px) and (min-height: 861px) {
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"]:not(:has(.cz-preview-box.has-media)) .tpl-screen-inner {
    grid-template-rows: auto calc(min(100vw - 426px, 1054px) * 9 / 16) minmax(0, 1fr);
  }
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"]:not(:has(.cz-preview-box.has-media)) .cz-preview-box {
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
}

/* Banda 801–860 (1280×832): Crear en reposo y Edición general. */
@media (min-width: 1024px) and (min-height: 801px) and (max-height: 860px) {
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"]:not(:has(.cz-preview-box.has-media)) .tpl-screen-inner,
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) .tpl-screen-inner {
    grid-template-rows: auto calc(min(100vw - 426px, 1054px) * 9 / 16) minmax(0, 1fr);
  }
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"]:not(:has(.cz-preview-box.has-media)) .cz-preview-box,
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) .cz-preview-box {
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
}

/* ---------- V16-B · Régimen B: la caja toma el alto exacto del marco ----------
   La rejilla no cambia; la caja deja de calcularse por el
   ancho con reserva (163,5cqh) y pasa a llenar el marco:
   alto = min(alto del marco, alto estándar). Sin banda muerta
   arriba ni abajo (Δtop 0) y pegada a la consola por la fila. */

/* Pantallas bajas (≤800: 1280×770 · 1180×730 · 1024×665):
   Imagen a video, Crear (todos sus estados) y Edición general. */
@media (min-width: 1024px) and (max-height: 800px) {
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] .cz-preview-box,
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"] .cz-preview-box,
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) .cz-preview-box {
    height: min(100cqh, 56.25cqw);
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
}

/* Pantallas altas (≥861): Crear CON medio cargado (la consola
   del efecto manda y no deja el alto estándar), Imagen a
   video en todos sus niveles (su consola —foto, campo y fila
   IA— sin aire mide 286,8 y no deja el alto estándar ni a
   1440×900: la caja se acomoda al espacio fijo resultante) y
   Edición general (su consola queda en 297 a esta altura). */
@media (min-width: 1024px) and (min-height: 861px) {
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"]:has(.cz-preview-box.has-media) .cz-preview-box,
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] .cz-preview-box,
  html:not(.force-mobile) #vedit-screen[data-aspect="16:9"]:has(#vedit-swap-wrap[hidden]) .cz-preview-box {
    height: min(100cqh, 56.25cqw);
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
}

/* Banda 801–860 (1280×832): Crear CON medio cargado e
   Imagen a video (a 8,2 px del estándar tras quitar el aire). */
@media (min-width: 1024px) and (min-height: 801px) and (max-height: 860px) {
  html:not(.force-mobile) #create-screen[data-cz-mode="v2v"][data-aspect="16:9"]:has(.cz-preview-box.has-media) .cz-preview-box,
  html:not(.force-mobile) #i2v-screen[data-aspect="16:9"] .cz-preview-box {
    height: min(100cqh, 56.25cqw);
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
}

/* ============================================================
   PAQUETE V-17 · REJILLAS E INTERIORES (órdenes del dueño
   2026-11-02 22:40–22:48, tras su revisión de la copia de
   pruebas; defectos medidos por QA y por la sonda v17-antes).
   Solo geometría de estas rejillas en escritorio (≥1024 px);
   ni diseño, ni textos, ni orden, ni funciones cambian, y el
   editor (V-16) no se toca. Tableta y teléfono quedan como
   están (ahí los interiores ya son verticales y no hay solape).

   D1 · PLANTILLAS (carpetas por tema): la rejilla pasa de 3 a
   CINCO columnas. Todo lo demás de su régimen queda intacto —
   es el que fija «el tamaño correcto» (D4): dos filas que se
   reparten el alto de la vista, tarjeta a todo el alto de su
   fila y ancho derivado de su 9:16, centrada en su columna.
   Las 6 carpetas quedan 5 + 1, visibles en una sola pantalla
   como hoy, con el MISMO tamaño de tarjeta de hoy.

   D2 · ESTILOS → «Ver todas» (familias): se desmonta el
   régimen de V-15d/V-15e (columnas de ancho completo con la
   altura salida de la proporción dentro de filas estiradas
   por la columna flexible: la tarjeta de 492,1 desbordaba su
   fila de 396,4 y la segunda fila se montaba sobre la
   primera — Animales tapaba ~91 px de Anime a 1440×900) y la
   lista adopta EL MISMO régimen de las portadas de
   Plantillas: 5 columnas, dos filas que se reparten el alto,
   tarjeta a todo el alto de su fila con el ancho derivado de
   su 9:16 y centrada en su columna, separación de 12 px.
   Con la tarjeta ceñida a su fila el solape es imposible.
   Igualdad de tamaño EXACTA con Plantillas: la cabecera de
   Estilos es 14 px más baja que la de Plantillas (medido:
   Δ = 14,0 en los cinco tamaños), así que el margen superior
   de la lista sube 14 px sobre el suyo de siempre (14 → 28:
   los 14 de .sty-grid + 14 de compensación) — su alto útil
   pasa a ser el mismo que el de la rejilla de carpetas y la
   tarjeta sale idéntica
   (217,1×385,9 a 1440×900), ni un píxel inventado.

   D3 · INTERIORES VERTICALES en TODAS las carpetas (decisión
   del dueño 22:46): dentro de cada familia de Estilos las
   tarjetas recuperan su 9:16 de base (la capa de «filas
   completas» las acostaba: auto-rows de (100dvh − 244px)/2
   con aspect-ratio anulado → 342×328 a 1440×900, recortando
   las caras del contenido vertical) y dentro de cada tema de
   Plantillas pasan de 0,78 a 9:16. Se conservan las 4
   columnas de escritorio y el tamaño propio del interior
   (D4-precisión: el interior NO hereda el tamaño de la
   portada); la lista de estilos conserva su alto máximo y su
   scroll. Con tarjeta 9:16 y activos 9:16, el cover no
   recorta nada. */
@media (min-width: 1024px) {
  /* D1 · Plantillas: cinco carpetas por fila */
  html:not(.force-mobile) #folder-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  /* D2 · Familias: el régimen de las portadas de Plantillas */
  html:not(.force-mobile) #ss-family-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }
  html:not(.force-mobile) #ss-family-list .sty-gcard--fam {
    height: 100%;
    width: auto;
    justify-self: center;
  }
  /* D3 · Interiores verticales 9:16 en todas las carpetas */
  html:not(.force-mobile) #ss-style-list {
    grid-auto-rows: auto;
  }
  html:not(.force-mobile) #ss-style-list .sty-gcard {
    aspect-ratio: 9 / 16;
    height: auto;
  }
  html:not(.force-mobile) .tplx-card {
    aspect-ratio: 9 / 16;
  }
}

/* ============================================================
   PAQUETE V-18 · INTERIORES AL TAMAÑO DE LA PORTADA + SIN
   SOMBREADO SUPERIOR (órdenes del dueño 2026-11-03 00:22,
   tras revisar staging con V-16+V-17: aprobó las portadas
   —«están perfectas, tienen el tamaño perfecto»— y reportó
   dos defectos DENTRO de las carpetas, en Plantillas y en
   Estilos de video).

   N1 · TAMAÑO INTERIOR = TAMAÑO DE PORTADA (solo escritorio
   ≥1024 px, como V-17): las tarjetas interiores iban a 4 por
   fila a todo el ancho de columna (315,5×560,9 en Plantillas
   y 342×608 en Estilos a 1440×900) frente a la portada de
   217,1×385,9 aprobada. Ahora ambas rejillas interiores
   adoptan el MISMO régimen de dimensionado que las portadas:
   5 columnas y tarjeta cuya ALTURA es la de la fila de la
   rejilla de portadas — (100dvh − 128,188 px) / 2, la fórmula
   medida de esa fila en los cinco tamaños (la rejilla de
   portadas reparte su alto en dos filas: (alto útil − 12 px
   de hueco) / 2) — con el ancho derivado de su 9:16 y la
   tarjeta centrada en su columna. Resultado medido: interior
   = portada al píxel (Δ ≤ 0,1) en los cinco tamaños, en las
   dos secciones y en los dos niveles de Estilos (carpetas de
   una familia y videos dentro de una carpeta de estilo).
   Las rejillas de portadas NO se tocan: ni una regla suya
   cambia. En el teléfono la igualdad ya se daba en
   Plantillas (152×270,2 = portada) y en Estilos el interior
   conserva su 9:16 vertical aprobado (la portada de familia
   del teléfono es 1/1.05 por diseño): no se toca.

   N2 · SIN SOMBREADO NEGRO ARRIBA EN LOS INTERIORES: la
   causa era el ::after de las tarjetas interiores —
   .tplx-card::after (regla base, línea ~1792) y
   .sty-gcard::after (regla base, línea ~2553) pintan
   linear-gradient(180deg, rgba(4,6,20,0.88) 0%,
   rgba(4,6,20,0) 46%) sobre CADA tarjeta: la parte de
   arriba de cada plantilla/estilo se veía oscura y la
   imagen se aclaraba hacia abajo, tal como lo vio el dueño.
   Se apaga ese velo SOLO en las rejillas interiores
   (#tpl-folder-grid y #ss-style-list), en todos los anchos:
   las portadas de fuera conservan su degradado intacto
   (.folder-card y las tarjetas de #ss-family-list no se
   tocan), y ningún otro degradado de la app cambia. */
#tpl-folder-grid .tplx-card::after,
#ss-style-list .sty-gcard::after {
  content: none;
}

@media (min-width: 1024px) {
  /* N1 · Plantillas: interior de carpeta al tamaño de la portada */
  html:not(.force-mobile) #tpl-folder-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: calc((100dvh - 128.188px) / 2);
  }
  html:not(.force-mobile) #tpl-folder-grid .tplx-card {
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 16;
    justify-self: center;
  }
  /* N1 · Estilos: interior de familia (carpetas y videos) al
     tamaño de la portada de familia */
  html:not(.force-mobile) #ss-style-list,
  html:not(.force-mobile) #ss-style-list.ss-entries {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: calc((100dvh - 128.188px) / 2);
  }
  html:not(.force-mobile) #ss-style-list .sty-gcard {
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 16;
    justify-self: center;
  }
}

/* ============================================================
   PAQUETE V-19 — Paridad con el carrusel central en las cuatro
   laterales del hero y en las tarjetas de «Estilos de video» de
   la home (orden del dueño, 2026-11-03): el botón de generar
   (.hm-gen) existe en esas tarjetas pero NO es permanente como
   el del centro — aparece SOLO con el mouse encima (hover) o,
   al tacto sin mouse, con la tarjeta armada (.hm-active) — y su
   tamaño es proporcional a la tarjeta pequeña, no el del
   carrusel. Los gestos (arrastre 40 px, rueda horizontal) viven
   en JS (hmWireGestures); aquí solo va la presentación.
   ============================================================ */
.hm-gen {
  position: absolute; z-index: 4; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 999px;
  background: linear-gradient(90deg, #8b3dff, #3d8bff);
  color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 14px rgba(91, 76, 255, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.hm-gen svg { width: 9px; height: 9px; display: block; }
.hero-side .hm-gen { font-size: 10px; padding: 5px 8px; }
.sty-grid--home .sty-card { position: relative; touch-action: pan-y; }
.hero-side:hover .hm-gen,
.hero-side:focus-visible .hm-gen,
.sty-grid--home .sty-card:hover .hm-gen,
.sty-grid--home .sty-card:focus-visible .hm-gen {
  opacity: 1; pointer-events: auto;
}
@media (hover: none) {
  /* Equivalente táctil del hover (decisión mínima documentada):
     la tarjeta armada con el primer toque muestra su botón. */
  .sty-grid--home .sty-card.hm-active .hm-gen { opacity: 1; pointer-events: auto; }
  .sty-grid--home .sty-card.hm-active { outline: 2px solid rgba(139, 61, 255, .65); outline-offset: -2px; }
}

/* ============================================================
   PAQUETE V-21 · LA CONSOLA ES EL INVARIANTE (orden del dueño
   2026-11-03 00:56–00:58, tras su revisión de staging)
   ------------------------------------------------------------
   REFERENCIA: la consola inferior (panel 1: escribir + cargar)
   de IMAGEN A VIDEO en horizontal. Su altura es EL tamaño
   aprobado y se conserva exacto en todos los niveles y en
   todas las proporciones. Medida en el rig sobre la propia app:
   286,8 px en ventanas de 1100 px o más de ancho, y 307,8 px
   entre 1024 y 1099 px (en ese ancho la fila de referencias de
   Imagen a video crece 21 px porque los textos de sus dos cajas
   se envuelven en dos líneas: la referencia crece y la
   invariante la sigue en la misma ventana).
   MECÁNICA: la retícula del editor reparte el alto fijo entre
   la etapa (fila central, 1fr) y la consola (última fila); sin
   una fila fijada, cada editor negociaba su propio reparto y
   las consolas quedaban todas distintas (218,6–355 px según
   editor, tamaño y proporción). Aquí la última fila queda
   FIJADA en la altura de la referencia para Texto a video,
   Editar video, Video a video (Crear) y Studio; la etapa
   absorbe la diferencia creciendo o recogiéndose, con su borde
   superior al nivel de las columnas y el inferior a la misma
   costura (~5 px) de siempre sobre la consola. Si un contenido
   no cabe, se acomoda dentro de su consola (su propio
   desplazamiento interno, como ya preveía interfaz2-fix): la
   consola no crece nunca.
   Imagen a video NO se toca: es la referencia. Sin excepción
   «Régimen-B»: Editar «Edición general» cumple también a
   1440×900. En el teléfono la disposición es el asistente por
   pasos (sin banda fija de consola): fuera de esta regla, ver
   INFORME-v21.md. */
@media (min-width: 1024px) {
  html:not(.force-mobile) :is(#t2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    grid-template-rows: auto minmax(0, 1fr) 286.8px !important;
  }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  html:not(.force-mobile) :is(#t2v-screen, #vedit-screen, #create-screen, #premium-screen) .tpl-screen-inner {
    grid-template-rows: auto minmax(0, 1fr) 307.8px !important;
  }
}

/* V-21 · Invariante 2 y acomodo del contenido dentro de la consola
   clavada (nunca agrandarla):
   - Historia: su caja salía con alto de 51vh fijo y dejaba la
     costura en 73,2 px (1440×900) o se comía la consola (−62,9 en
     1024×665). Pasa a llenar su marco como las demás cajas
     verticales: alto = min(alto del marco, ancho × 16/9).
   - Editar: su caja salía por una fórmula con reserva (163,5cqh)
     y quedaba 23–43,5 px por debajo del nivel de las columnas.
     Pasa a llenar el marco (alto 100%, ancho por su proporción
     16/9 del video de origen), igual que el régimen A de Texto. */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] .cz-preview-box {
    height: min(100cqh, 177.78cqw);
  }
  html:not(.force-mobile) #vedit-screen[data-aspect] .cz-preview-box {
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0;
    flex: none;
  }
  /* Acomodo de contenido en Crear y Editar: el aviso de duración
     detectada (.msg) se recoge (relleno 10→5, margen 12→8), la
     etiqueta del prompt pierde el margen fantasma de 13 px de los
     estados vertical/cuadrado y el panel usa el relleno compacto
     5/5 en todos los estados (en unos era 8/10). */
  html:not(.force-mobile) :is(#create-screen, #vedit-screen) [data-cz-panel="1"] {
    padding: 5px 18px;
  }
  html:not(.force-mobile) :is(#create-screen, #vedit-screen) [data-cz-panel="1"] .msg {
    padding: 5px 10px;
    margin-top: 8px;
  }
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] #prompt-label {
    margin-top: 0;
  }
  /* Editar · Edición general: su campo de escritura usa el alto
     fijo corto de 78 px ya aprobado por el dueño para Historia y
     Video a video (G-1), en vez de los 113 px que no caben en la
     consola invariante con video cargado a 1440×900. El principio
     G-1 se conserva: alto fijo, el texto rueda dentro del campo. */
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] #vedit-prompt {
    height: 78px;
    min-height: 78px;
    max-height: 78px;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] .t2v-label {
    margin-top: 2px;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] .cz-airow {
    margin-top: 0;
  }
}

/* V-21 · Acomodo fino (tras medir el árbol con medios cargados):
   - Editar: las etiquetas de su consola traen margen 6/3 desde
     reglas de estado con :has() que ganan en cascada; se fijan en
     2/0 con !important (solo margen, sin tocar su diseño) y la
     fila de IA pierde su margen superior: −16 px, los que faltaban
     para scroll 0 a 1440×900 con video cargado.
   - Crear: el aviso de duración (.msg) baja su fuente a 12 px
     para caber en una línea también en las columnas estrechas de
     Intercambiar/Studio, y en ventanas de 1024–1349 px las ayudas
     (.t2v-hint) se recogen a 10,5/14 y el bloque del prompt sube
     4 px: la consola queda sin desplazamiento interno en todos
     los tamaños del dueño. */
@media (min-width: 1024px) {
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] .t2v-label {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] .cz-airow {
    margin-top: 0 !important;
  }
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] .msg {
    font-size: 12px;
  }
}
@media (min-width: 1024px) and (max-width: 1349px) {
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] .t2v-hint {
    font-size: 10.5px;
    line-height: 14px;
  }
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] #prompt-wrap {
    margin-top: 10px;
  }
}

/* V-21 · Micro-cierre (residuos medidos: Editar general 4 px a
   1440×900; Intercambiar 7 px a 1024×665): la fila de IA de
   Editar pierde su margen inferior y su panel el relleno inferior
   de 7→5; en Crear a ≤1099 px el bloque del prompt sube a 4 px y
   el aviso baja su margen a 6. Solo márgenes/rellenos. */
@media (min-width: 1024px) {
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] {
    padding-bottom: 5px !important;
  }
  html:not(.force-mobile) #vedit-screen [data-cz-panel="1"] .cz-airow {
    margin-bottom: 0 !important;
  }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] #prompt-wrap {
    margin-top: 4px;
  }
  html:not(.force-mobile) #create-screen [data-cz-panel="1"] .msg {
    margin-top: 6px;
  }
}

/* V-21 · Historia con foto: su vista previa de la foto de
   referencia nacía SIN alto (la imagen se pintaba a ancho
   completo, 392 px) y la consola quedaba con 360 px de
   desplazamiento interno en cuanto había una foto — la de
   Historia o una arrastrada de Video a video. Recibe el mismo
   tratamiento que la app ya usa en Editar: la previa ocupa un
   cuadro fijo de 56 px (miniatura 56×56 a la izquierda y los
   datos del archivo al lado, con su botón de cambiar visible),
   ocupando la celda de su propia caja de subida en la fila de
   controles de Historia (no una fila nueva a ancho completo:
   la fila extra también desbordaba la consola). */
@media (min-width: 1024px) {
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block > .preview.show {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    grid-column: auto;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: transparent;
    padding: 0 12px;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block > .preview .file-meta {
    flex: 1;
    min-width: 0;
    margin-top: 0;
  }
  html:not(.force-mobile) #create-screen[data-cz-effect="script"] #photo-block > .preview img {
    width: 56px;
    height: 56px;
    flex: none;
    object-fit: cover;
    border-radius: 10px;
    background: none;
  }
}

/* ============================================================
   arreglos-movil-20261103 (auditoría móvil del dueño, 2026-11-03):
   SOLO TELÉFONO (max-width: 599px, la capa de teléfono de la app).
   El escritorio no se toca: todo vive dentro de esta media query
   y al final del archivo para ganar la cascada.
   A1 Historia (consola) · B1 cabecera · B2 Historia (panel) ·
   B3 seg de efecto · B4/B5 Mis videos.
   ============================================================ */
@media (max-width: 599px) {
  /* --- B1 · Cabecera de la home: el wordmark ya no se parte en
     dos líneas («Vide»/«AI»), el saludo ya no se trunca y la
     píldora de saldo se ve entera. La fila no cabe entera a
     402px (medido: menú 36 + logo 116 + saludo 86 + píldora con
     promo ~97 + campana 39 + avatar 37 + huecos > 366 útiles),
     así que la cabecera envuelve: menú, logo y acciones quedan
     en la primera línea a su tamaño natural y el saludo baja a
     su propia línea a ancho completo, sin elipsis.
     fixes-topbar-fon (2026-11-08): a 390px la primera línea
     TAMPOCO cabía (medido en el rig: menú 39 + logo 114.6 +
     acciones 201.8 + huecos 12 = 367.4 > 354 útiles; la
     píldora real mide 117.8, no ~97: el rediseño fixes123 la
     ensanchó con «+100 promo» en línea). Las acciones caían a
     una segunda línea y la cabecera quedaba en 3 filas
     (131px). Ajuste mínimo solo-teléfono para que la primera
     línea quepa a 390px: relleno lateral 18→12, hueco 6→4,
     hueco del logo 5→4, relleno de la píldora 12→10 y su hueco
     interno 3→2 (ahorro ~14px; sobran ~12px, cubre un saldo
     de 4 cifras). Nada cambia en escritorio ni en tableta. */
  .app-header { flex-wrap: wrap; gap: 4px; padding: 13px 12px 11px; }
  .app-header .app-logo { flex: none; gap: 4px; }
  .app-header .logo-word { white-space: nowrap; }
  .app-header .balance-chip { flex: none; padding: 4px 10px; gap: 2px; }
  .header-greet {
    order: 10;
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  /* --- A1 · Historia: la consola vuelve a sus tercios.
     Causa: `.cz-srcrow` quedaba en fila (row) sin guarda de
     ancho en teléfono y las tres columnas colapsaban a 0,
     estirando #story-script-btn a 252×720 sobre la consola.
     En teléfono la fila pasa a la misma rejilla de tercios del
     escritorio: [Elegir foto | Generar imagen con IA |
     Generar guión (gratis)] en una fila de controles y el área
     de la idea debajo a todo el ancho. */
  #create-screen[data-cz-effect="script"] [data-cz-panel="1"] {
    max-height: 44svh;
  }
  #create-screen[data-cz-effect="script"] .cz-srcrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }
  #create-screen[data-cz-effect="script"] #photo-block,
  #create-screen[data-cz-effect="script"] #ai-image-block { display: contents; }
  #create-screen[data-cz-effect="script"] #photo-drop {
    grid-column: 1; grid-row: 1; width: 100%; margin-top: 0;
  }
  #create-screen[data-cz-effect="script"] #ai-image-generate {
    grid-column: 2; grid-row: 1; width: 100%; margin-top: 0;
  }
  #create-screen[data-cz-effect="script"] #story-script-btn {
    grid-column: 3; grid-row: 1; width: 100%; margin-top: 0; min-height: 52px;
  }
  #create-screen[data-cz-effect="script"] #ai-image-block > .t2v-label,
  #create-screen[data-cz-effect="script"] #ai-image-block > .t2v-hint { display: none; }
  #create-screen[data-cz-effect="script"] #ai-image-msg { grid-column: 1 / -1; }
  #create-screen[data-cz-effect="script"] #photo-block > .preview { grid-column: 1 / -1; }
  #create-screen[data-cz-effect="script"] #idea-block { grid-column: 1 / -1; grid-row: 2; }

  /* --- B2 · Historia, panel de ajustes: la explicación junto a
     NIVEL (268px de contenido en 194px de contenedor) baja a su
     propia línea y envuelve; los seg de efecto y de escenas
     reparten el ancho entre sus botones en vez de desbordar
     por la derecha; el Resumen de costo envuelve dentro de su
     caja (el «Desde» ya no queda fuera de pantalla). */
  #create-screen #story-tier-block .story-tier-labelrow { flex-wrap: wrap; }
  #create-screen #story-tier-note {
    flex: 1 1 100%;
    margin-left: 0;
    white-space: normal;
    line-height: 1.35;
  }
  #create-screen :is(#effect-seg, #scene-seg) { width: 100%; }
  #create-screen :is(#effect-seg, #scene-seg) .seg-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  #create-screen :is(#effect-seg, #scene-seg) .seg-t,
  #create-screen :is(#effect-seg, #scene-seg) .seg-d {
    white-space: normal;
    line-height: 1.2;
  }
  #create-screen [data-cz-panel="3"] .t2v-cost {
    margin: 0 0 7px;
    padding: 7px 9px;
    font-size: 11.5px;
    flex-wrap: wrap;
    row-gap: 1px;
  }
  #create-screen [data-cz-panel="3"] .t2v-cost-mode {
    white-space: normal;
    min-width: 0;
  }

  /* --- B4 · Mis videos: la fila de vistas (384px en 366px
     útiles) cabe entera sin deslizar: «Mosaico» visible. */
  #myvid-screen .lv-btn { padding: 5px 8px; font-size: 12px; }

  /* --- B5 · Mis videos: la lista deja de vivir en una franja
     interna de 140px: la pantalla crece y la lista fluye bajo
     el reproductor (que queda fijo en su sitio y tamaño: es el
     primer elemento del flujo, 366 × 205,9 @ (18, 49), Δ=0
     entre vistas), con el scroll de la propia pantalla.
     La Cuadrícula usa pistas minmax(0, 1fr): dos columnas
     siempre iguales. */
  #myvid-screen .mv-inner { height: auto; min-height: 100dvh; min-height: 100svh; }
  #myvid-screen .mv-split { flex: none; }
  #myvid-screen .mv-list-side { flex: none; min-height: 0; }
  #myvid-screen .mv-list { flex: none; min-height: 0; overflow-y: visible; }
  #myvid-screen .mv-list.lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #myvid-screen .mv-list.lv-grid .mv-card { min-width: 0; }
}

/* REDISENO-MOVIL-BEGIN */
/* ============================================================
   REDISEÑO MÓVIL (dueño, 2026-11-04) — bloque del paquete
   «rediseno-movil»: menú de modos a pantalla completa, editores
   sin riel en el teléfono y paneles DESLIZABLES en horizontal
   (enmienda del dueño). Todo el layout nuevo vive en
   @media (max-width: 599px); fuera del teléfono solo existen
   las piezas nuevas (menú, mini-ícono de cabecera, puntos),
   que no toca ninguna composición previa.
   ============================================================ */

/* --- Piezas nuevas (neutras fuera del teléfono) --- */
.cz-head-mid { display: contents; }
.cz-head-ic { display: none; }
.cz-slide-dots { display: none; }
/* Hamburguesa de los editores (corrección del dueño 2026-11-04):
   el botón y su desplegable solo existen en el teléfono — app.js
   los construye al entrar en la banda ≤599 y fuera de ella
   quedan ocultos, sin tocar la composición. */
.cz-hamb-btn { display: none; }
.cz-hamb-panel { display: none; }
.cz-hamb-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; background: none; border: 0; border-radius: 11px; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cz-hamb-item:active, .cz-hamb-item.on { background: var(--accent-soft); }
.cz-hamb-item .cz-side-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.cz-hamb-item .cz-side-ic svg { width: 17px; height: 17px; }
.cz-hamb-myvid { border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; margin-top: 4px; padding-top: 11px; }
/* Saldo en la barra superior del editor (enmienda 4): la pieza
   existe en el DOM pero solo se muestra en el teléfono, en la
   carpeta donde la fórmula esté aplicada. */
.cz-head-bal { display: none; }
/* v12: la etiqueta de la foto de Video a video (HTML) nace
   oculta en TODAS las bandas; solo la enciende la banda del
   teléfono con un efecto fx activo (sección v12) — en
   escritorio y en Historia no existe visualmente. */
.cz-photo-label { display: none; }
@media (min-width: 600px) {
  /* Red de seguridad: si una envoltura sobreviviera a un cambio
     de banda, en ≥600 es transparente y el DOM se lee como antes
     (app.js además la retira al salir del teléfono). */
  .cz-slide { display: contents; }
}

/* --- Menú de modos (pantalla completa; solo se abre ≤599) --- */
.czmenu-screen { background: var(--bg); }
.czmenu-inner {
  position: relative; height: 100%; max-width: 430px; margin: 0 auto;
  display: flex; flex-direction: column; padding: 18px 18px 22px;
}
.czmenu-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 360px at 12% -6%, rgba(139, 61, 255, .30), transparent 62%),
    radial-gradient(480px 380px at 105% 30%, rgba(61, 139, 255, .20), transparent 60%),
    radial-gradient(420px 340px at 50% 112%, rgba(95, 92, 255, .16), transparent 62%);
}
.czmenu-head { position: relative; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; }
.czmenu-logo { display: flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.czmenu-mark { width: 33px; height: 33px; border-radius: 10px; background: var(--grad); display: grid; place-items: center; font-size: 17px; color: #fff; box-shadow: 0 8px 22px rgba(95, 92, 255, .35); }
.czmenu-word > span { color: var(--accent); }
.czmenu-head .ts-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.czmenu-grid { position: relative; margin: auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.czmenu-card {
  height: 248px; background: linear-gradient(180deg, #141945, #101538);
  border: 1px solid var(--line); border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 8px 14px; text-align: center; cursor: pointer;
  font-family: inherit; color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.czmenu-card:first-child { border-color: rgba(139, 123, 255, .65); box-shadow: 0 0 0 1px rgba(139, 123, 255, .25), 0 16px 34px rgba(95, 92, 255, .22); }
.czmenu-tile {
  width: 92px; height: 92px; border-radius: 28px; flex: none;
  background: rgba(139, 123, 255, .16); border: 1px solid rgba(139, 123, 255, .22);
  display: grid; place-items: center; color: #cfc7ff; margin-bottom: 17px;
}
.czmenu-card:first-child .czmenu-tile { background: var(--grad); color: #fff; border: none; }
.czmenu-tile svg { width: 50px; height: 50px; }
.czmenu-name { font-size: 16px; line-height: 1.16; font-weight: 750; min-height: 38px; display: flex; align-items: flex-start; justify-content: center; }
.czmenu-arrow { margin-top: 8px; color: var(--ink-3); font-size: 16px; line-height: 1; }
html[data-theme="light"] .czmenu-card { background: #FEFEFE; border-color: rgba(35, 35, 94, .14); box-shadow: 0 14px 30px rgba(35, 35, 94, .10); }
html[data-theme="light"] .czmenu-card:first-child { border-color: rgba(139, 123, 255, .65); }
html[data-theme="light"] .czmenu-tile { color: var(--accent); }

@media (max-width: 599px) {
  /* ========================================================
     EDITORES SIN RIEL: columna única a pantalla completa.
     Orden visual (ENMIENDA 2): cabeza · «Modo actual» + saldo ·
     Mis videos · PANTALLA (fija) · CONSOLA (fija) · CARRUSEL
     con el panel de escritorio dividido en partes (la última
     lleva Resumen + Generar) · puntos indicadores.
     ======================================================== */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .tpl-screen-inner {
    display: flex; flex-direction: column;
    height: 100dvh; max-height: 100dvh;
    max-width: none; margin: 0; padding: 0 12px 10px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .t2v-body { display: contents; }

  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .tpl-screen-head,
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .create-screen-head {
    order: 0; flex: none; position: relative;
  }
  /* Título del modo centrado en la cabeza, con su mini-ícono
     en degradado (pantalla 2 de la ilustración aprobada). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-head-mid {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 8px; max-width: calc(100% - 116px);
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-head-title {
    display: block; margin: 0; font-size: 17px; font-weight: 800; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-head-ic {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: 9px; background: var(--grad); color: #fff;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-head-ic svg { width: 17px; height: 17px; }

  /* «Modo actual / Cambiar» + saldo: visibles (como la ilustración);
     las píldoras de modos quedan fuera — el menú es la entrada. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-top {
    order: 1; flex: none; display: block; margin: 2px 0 8px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-pills { display: none; }

  /* El riel desaparece entero (corrección del dueño 2026-11-04:
     también su fila «Mis videos» bajo la tarjeta de modo, para
     dar ese espacio a la consola y al carrusel). El botón sigue
     en el DOM — es el del riel de escritorio y el que abre Mis
     videos desde el desplegable de la hamburguesa — y la
     pantalla de Mis videos y su acceso desde el inicio/cajón
     quedan como estaban. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-side { display: none; }

  /* Previa a todo el ancho, 16:9 (366×205,9 a 402: el tamaño
     fijo del reproductor de Mis videos). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-preview {
    order: 3; flex: none; display: flex; flex-direction: column; min-height: 0; margin: 0;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-preview-box {
    flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9;
  }

  /* v9 — BUG FUNCIONAL del dueño (probado en su iPhone): la
     regla anterior dejaba la caja CLAVADA en 16:9. El toque sí
     cambiaba el estado (data-aspect pasa a 9:16 / 1:1, medido
     en el rig), pero la pantalla nunca cambiaba de forma:
     ninguna variante [data-aspect] puede ganar en esta banda
     (las de escritorio van tras html:not(.force-mobile) o
     @media (min-width:600px), y la única libre, la de @supports
     de interfaz2, pierde por orden a igual especificidad
     (1,2,0) contra esta regla, que cierra el archivo).
     La proporción elegida manda ahora también en el teléfono,
     SIN tocar el alto aprobado de la zona: la caja conserva el
     alto que tiene en 16:9 (ancho × 9/16) y su ancho sale de la
     proporción — 9:16 = (9/16)² del ancho (31,640625 %) y
     1:1 = 9/16 del ancho (56,25 %) — centrada en su zona.
     Historia (data-aspect 9:16 fijo) recupera su etapa
     VERTICAL, y el ejemplo de cámara, con la caja ya en su
     proporción y «cover» como en escritorio, llena la caja y
     SUSTITUYE a la imagen estática (con «contain» — la capa
     vieja de teléfono — el clip quedaba como una pantalla
     flotante sobre la imagen de referencia). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen[data-aspect="9:16"] .cz-preview-box {
    aspect-ratio: 9 / 16; width: 31.640625%; align-self: center;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen[data-aspect="1:1"] .cz-preview-box {
    aspect-ratio: 1 / 1; width: 56.25%; align-self: center;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-preview-box > video.cz-camdemo {
    object-fit: cover;
  }
  /* v9 (cont.): la capa vieja de «la etapa» (.cz-screen
     .cz-preview-box img, especificidad (0,2,1)) impone
     «contain» a todo medio de la caja y pisa el «cover» que el
     diseño manda para la imagen de referencia y la foto subida
     (reglas de portada1/portada2): en la caja vertical la
     referencia quedaba como una banda flotante. En el teléfono
     llenan la caja, igual que el ejemplo de cámara. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-preview-box > .cz-preview-ref,
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-preview-box > .cz-preview-img {
    object-fit: cover;
  }

  /* Consola (panel 1): su contenido no cambia. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="1"] {
    order: 4; flex: none;
  }

  /* Panel 2 = carril del carrusel: dentro van las partes
     (.cz-slide) con los bloques del panel de escritorio en su
     orden exacto, incluida la última parte con el panel 3. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"] {
    order: 5; flex: 1 1 auto; min-height: 0;
    display: flex !important; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"]::-webkit-scrollbar { display: none; }
  .cz-slide {
    flex: 0 0 100%; min-width: 0; height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
    scroll-snap-align: start; scroll-snap-stop: always;
    padding: 10px 14px 12px;
  }
  .cz-slide-off { display: none; }
  /* Durante el arrastre con ratón el snap se suelta; al soltar el
     botón, el carril cae en la parte más cercana. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"].cz-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .cz-slide-dots { order: 6; flex: none; display: flex; justify-content: center; gap: 6px; padding: 7px 0 3px; }
  .cz-slide-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
  .cz-slide-dots span.on { background: var(--accent); }
  html[data-theme="light"] .cz-slide-dots span { background: rgba(35, 35, 94, .18); }
  html[data-theme="light"] .cz-slide-dots span.on { background: var(--accent); }

  /* El panel 3 queda vacío en el teléfono: sus bloques (Resumen
     y Generar, los finales del panel de escritorio) viven en la
     ÚLTIMA parte del carril, como manda la enmienda 2. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="3"].cz-moved { display: none; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-stepfoot { display: none; }

  /* ========================================================
     CORRECCIÓN DEL DUEÑO (2026-11-04): la X de la cabeza de los
     editores sale y entra la HAMBURGUESA (tres rayitas) con un
     desplegable fino estilo Mac: todas las opciones del riel
     (los 6 modos en su orden + Mis videos como última fila)
     para cambiar de editor sin ir atrás. La flecha ← no se
     toca; la X del menú de modos tampoco (no es un editor).
     ======================================================== */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen :is(.tpl-screen-head, .create-screen-head) .ts-close { display: none; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-hamb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; margin-left: auto;
    border-radius: 50%; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-hamb-btn svg { width: 20px; height: 20px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-hamb-panel {
    display: block; position: absolute; z-index: 320;
    top: calc(58px + env(safe-area-inset-top)); right: 12px;
    width: 252px; max-width: calc(100vw - 24px);
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    padding: 6px; box-shadow: var(--shadow-pop, 0 18px 50px rgba(0, 0, 0, .45));
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-hamb-panel[hidden] { display: none; }

  /* ========================================================
     CORRECCIÓN DEL DUEÑO (2026-11-04): el cuadro del carrusel
     estaba bien; lo pequeño eran los CONTROLES (las capas de
     compactación del teléfono viejo los dejaban a 9–12 px) y por
     eso sobraba el espacio. Dentro de las partes, los controles
     crecen a proporciones de panel (como el derecho de
     escritorio) y el contenido llena su cuadro: selectores más
     altos y con más letra, tarjetas de Proporción grandes,
     cuadrados de Cámara grandes en rejilla de 4, Avanzado más
     alto, Resumen y Generar grandes — y la última parte ancla
     su bloque al fondo, como el panel 3 de escritorio.
     ======================================================== */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide {
    display: flex; flex-direction: column;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide > * { flex: none; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide[data-cz-from="p3"] > :first-child { margin-top: auto; }

  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-label {
    font-size: 13px; margin: 15px 0 8px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-label:first-child { margin-top: 2px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .seg {
    padding: 4px; gap: 5px; border-radius: 13px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .seg-btn {
    padding: 11px 10px; font-size: 14.5px; border-radius: 9px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-info-chip {
    padding: 12px 10px; font-size: 14.5px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .audio-warn,
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide :is(#t2v-silent-warn, #i2v-silent-warn, #vedit-silent-warn, #create-silent-warn) {
    font-size: 14px; line-height: 1.45; margin-top: 12px; padding: 0;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-hint {
    font-size: 13.5px; margin-top: 9px;
  }
  /* Proporción: tarjetas grandes, como las del panel derecho.
     AJUSTE DEL DUEÑO (2026-11-04 02:16): la primera versión las
     dejó demasiado altas (101.8px) — bajan a un punto medio
     claramente grande (~80px); el alto cedido va a la consola
     (ver la regla del teclado más abajo). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards { gap: 8px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-card {
    padding: 6px 5px 5px; gap: 3px; border-radius: 14px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-shape { height: 19px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-916 { width: 11px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-169 { width: 34px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-11 { width: 19px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-word { font-size: 13px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-num { font-size: 11px; }
  /* Avanzado: barra más alta */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-adv {
    margin: 16px 0 6px; padding: 4px 16px 14px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-adv summary {
    padding: 13px 0 6px; font-size: 15.5px;
  }
  /* Cámara: cuadrados grandes en rejilla de 4, como el panel.
     Alto FIJO de 78px: cabe el rótulo en 2 líneas en cualquier
     idioma y el texto NUNCA cambia el tamaño ni la posición
     del botón (regla del dueño: botones inmovibles). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-camchips {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 0 0 4px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-chip {
    height: 66px; padding: 7px 3px 6px; gap: 3px;
    font-size: 11px; line-height: 1.12; border-radius: 14px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-chip::before { width: 22px; height: 22px; }
  /* Duración de Editar (etiqueta + píldora) al mismo aire */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-dur-row { padding: 12px 12px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-dur-label { font-size: 14.5px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-dur-pill { font-size: 14.5px; padding: 5px 12px; }
  /* Resumen y Generar: grandes (viven en la última parte).
     CORRECCIÓN DEL RESUMEN (dueño, 2026-11-04): la línea del
     Resumen se cortaba a la derecha a 402px — el saldo entre
     paréntesis quedaba mochado («(50»). La barra se compone en
     dos renglones DENTRO de la misma caja: arriba, etiqueta +
     flecha + total + saldo; debajo, el formato («720p · Sin
     sonido») en su propio renglón, completo. Se ajusta el
     TEXTO/la composición — la caja y el botón Generar no se
     tocan (regla del dueño: botones inmovibles). Vale para
     colapsado y expandido (la flecha se muda al desglose y la
     barra conserva etiqueta + total + saldo + formato). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-cost {
    margin-top: 10px; padding: 15px 16px; font-size: 16px; border-radius: 14px;
    flex-wrap: wrap; row-gap: 3px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-cost .t2v-cost-mode {
    order: 10; flex: 0 0 100%;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-cost b { font-size: 20px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sumtoggle { padding: 8px 10px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sumarrow { font-size: 14px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sb-row { font-size: 14px; padding: 7px 0; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sb-total { font-size: 17px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sb-totalnum { font-size: 24px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide :is(.t2v-generate, .ps-generate, .generate-btn) {
    min-height: 62px; font-size: 17px; border-radius: 15px; margin-top: 16px;
  }
  /* Reparto del alto (corrección base del dueño): los grupos de
     cada parte se distribuyen por el alto del cuadro — la
     etiqueta que abre un grupo tras un bloque lleva
     margin-top:auto y los márgenes auto absorben SOLO el aire
     libre (si la parte hace scroll, valen 0: nada se rompe).
     Etiqueta y su control quedan siempre pegados. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide > :is(.seg, .asp-cards, .cz-adv, .cz-camchips, .t2v-cost, .cz-dur-row, .cz-info-chip) + .t2v-label {
    margin-top: auto;
  }
  /* ENMIENDA 4 (dueño 01:55, ahorro de espacio) · aprobada en
     Texto a video y REPLICADA a todas las carpetas (2026-11-04):
     fuera la tarjeta «Modo actual / Cambiar + saldo» como
     renglón propio: el nombre del modo y EL SALDO viven en la
     barra superior fija [←][modo][saldo][☰]; cambiar de modo
     queda en las tres rayitas (enmienda 1). El espacio liberado
     cae al carril (el panel 2 es flex:1). Botones de la barra
     con flex:none: ningún texto los mueve jamás. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-top { display: none; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #premium-screen) .tpl-screen-head,
  #create-screen .create-screen-head { gap: 10px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-head-mid {
    position: static; transform: none; flex: 1 1 auto; min-width: 0; max-width: none;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .cz-head-bal { display: inline-flex; flex: none; }
  /* Plantillas conserva su pantalla (temas 5 por fila e
     interiores verticales): solo se le aplica el criterio de
     barra — su nombre ya vive en la cabecera y ahora también
     EL SALDO, en la misma barra fija de su pantalla. Su tarjeta
     «Modo actual» y su riel no se tocan. */
  #tpl-screen .tpl-screen-head { gap: 10px; }
  #tpl-screen .cz-head-bal { display: inline-flex; flex: none; }

  /* ========================================================
     RÉPLICA v3 · EL TECLADO CRECE (dueño 2026-11-04 02:16-02:17):
     lo que bajan las tarjetas de Proporción se le suma a la
     CONSOLA — crece hacia abajo para que en el campo de texto
     quepan al menos 2 líneas visibles (3 si la pila lo permite).
     El carrusel (panel 2, flex:1) cede ese alto; reproductor y
     barra no cambian. min-height (no height): gana también a
     la altura inline del autogrow en reposo y nunca impide
     que el campo crezca al escribir.
     ======================================================== */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="1"] .t2v-field textarea {
    min-height: 84px;
  }

  /* ========================================================
     RÉPLICA v3 · CONSOLAS GEMELOS (regla del dueño: botones
     inmovibles — si un texto no cabe, se ajusta el texto,
     nunca la caja). Las filas de fuentes de Editar y de Crear
     van lado a lado también en el teléfono, como en escritorio,
     con las cajas iguales, alineadas y estáticas; los rótulos
     quedan en UNA línea achicando la letra, jamás moviendo
     las cajas.
     ======================================================== */
  /* Editar video: TU VIDEO + referencias/guía/foto, lado a lado */
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow {
    flex-direction: row; gap: 10px; align-items: flex-start;
  }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow > .cz-srccol { flex: 1 1 0; min-width: 0; }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .t2v-label {
    /* El rótulo más largo («Imágenes de referencia (opcional)»,
       210px a 10.5px) manda: a 8.5px con tracking −0.02em cabe
       en su columna de 171px en EN y ES sin mover las cajas. */
    white-space: nowrap; font-size: 8.5px; letter-spacing: -0.02em;
    margin: 0 0 6px; height: 14px; line-height: 14px; overflow: hidden;
  }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone,
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .ps-add-ref { height: 76px; margin-top: 0; }
  /* Crear (Historia / Video a video): la fila de fuentes como
     en escritorio; las fotos extra de Object Swap ocupan su
     propio renglón a ancho completo bajo las dos cajas. */
  #create-screen.cz-screen [data-cz-panel="1"] .cz-srcrow {
    flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-start;
  }
  #create-screen.cz-screen [data-cz-panel="1"] .cz-srcrow > .cz-srccol { flex: 1 1 0; min-width: 0; }
  #create-screen.cz-screen [data-cz-panel="1"] .cz-srcrow > #swap-extras { flex: 0 0 100%; }
  #create-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone { height: 76px; margin-top: 0; }
  #create-screen.cz-screen [data-cz-panel="1"] #swap-extras .group-label {
    white-space: nowrap; font-size: 11px; letter-spacing: 0; overflow: hidden;
  }
  /* Historia: sus tres bloques (idea · foto · imagen con IA)
     en dos filas de dos, alineados, sin aplastarse. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-srcrow > .cz-srccol,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-srcrow > #story-script-btn { flex: 1 1 40%; min-width: 0; }
  /* Imagen a video: la fila de referencias como en escritorio
     (las dos cajas lado a lado, misma altura por stretch). */
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow { display: flex; gap: 10px; align-items: stretch; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow > * { flex: 1 1 0; min-width: 0; }

  /* ========================================================
     AJUSTE DE MEDIDAS v4 (dueño, 2026-11-04, tras probar la
     [2026-11-08 ICONOS GRANDES: las medidas del 70 % de este bloque
     quedan REVOCADAS y restauradas al 100 %; ver nota al final de la banda]
     fórmula en su iPhone real): los cambios estaban bien; solo
     cambian las MEDIDAS. (1) Los controles del carrusel bajan
     al ~70 % de su tamaño v2/v3 — selectores 43→~30px, Propor-
     ción 82.8→~58px, Cámara 80.3×78→~56×55px, Resumen 94→~66px,
     Generar 62→~43px, con etiquetas y huecos en proporción —
     para que CADA parte quepa en una sola pantalla sin scroll
     interno. (2) La consola baja a 2 LÍNEAS EXACTAS: el alto
     del textarea se fija por su line-height real (20.3px medido
     en el rig; padding 5+5) → 56px; el alto liberado cae al
     carril (panel 2, flex:1). Nada más se toca.
     ======================================================== */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-label {
    font-size: 12px; margin: 10px 0 6px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .seg {
    padding: 4px; gap: 5px; border-radius: 13px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .seg-btn {
    padding: 11px 10px; font-size: 14.5px; border-radius: 9px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-info-chip {
    padding: 12px 10px; font-size: 14.5px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .audio-warn,
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide :is(#t2v-silent-warn, #i2v-silent-warn, #vedit-silent-warn, #create-silent-warn) {
    font-size: 12.5px; line-height: 1.4; margin-top: 8px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-hint {
    font-size: 12px; margin-top: 6px;
  }
  /* Proporción al ~70 %: 82.8 → ~58px de alto. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards { gap: 8px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-card {
    padding: 6px 5px 5px; gap: 3px; border-radius: 14px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-shape { height: 19px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-916 { width: 11px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-169 { width: 34px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-11 { width: 19px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-word { font-size: 13px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-num { font-size: 11px; }
  /* Avanzado al ~70 % */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-adv {
    margin: 11px 0 4px; padding: 3px 12px 10px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-adv summary {
    padding: 13px 0 6px; font-size: 15.5px;
  }
  /* Cámara al ~70 %: 80.3×78 → 56×55px. El alto manda para que
     la parte quepa sin scroll; el ancho se fija en 56px y cada
     cuadrado se centra en su celda de la rejilla de 4. El alto
     sigue FIJO: el texto nunca mueve el botón (regla del dueño). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-camchips {
    gap: 9px; margin: 0 0 4px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-chip {
    height: 66px; padding: 7px 3px 6px; gap: 3px;
    font-size: 11px; line-height: 1.12; border-radius: 14px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-chip::before { width: 22px; height: 22px; }
  /* Duración de Editar al ~70 % */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-dur-row { padding: 12px 12px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-dur-label { font-size: 14.5px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-dur-pill { font-size: 14.5px; padding: 5px 12px; }
  /* Resumen al ~70 %: 94 → ~66px (misma composición en dos
     renglones de la corrección anterior; solo cambian medidas). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-cost {
    margin-top: 7px; padding: 7px 12px; font-size: 13.5px; border-radius: 12px;
    row-gap: 2px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-cost b { font-size: 16px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sumtoggle { padding: 5px 7px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sumarrow { font-size: 12px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sb-row { font-size: 12.5px; padding: 5px 0; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sb-total { font-size: 14.5px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-sb-totalnum { font-size: 19px; }
  /* Generar al ~70 %: 62 → ~43px */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide :is(.t2v-generate, .ps-generate, .generate-btn) {
    min-height: 62px; font-size: 17px; border-radius: 15px; margin-top: 16px;
  }
  /* Consola a 2 líneas exactas: line-height real 20.3px y
     padding 5+5 medidos en el rig → 56px de caja dan 2 líneas
     completas (la tercera ya desborda). Vale para todos los
     editores con textarea: el mismo valor de fórmula. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="1"] .t2v-field textarea {
    height: 56px; min-height: 56px;
  }
  /* T2V-TEXTAREA (dueño 2026-11-08 22:55): en Texto a video el cuadro
     «Describe tu video» todavía se veía un poco pequeño: UNA línea más
     de alto. Fórmula: 56px (2 líneas) + line-height 20.3px = 76px → 3
     líneas visibles. Solo t2v: Imagen a video, Historia, Editar, Video
     a video y Studio quedan en 56px. */
  #t2v-screen.cz-screen [data-cz-panel="1"] .t2v-field textarea {
    height: 76px; min-height: 76px;
  }
  /* PASADA FINAL (2026-11-04): la regla anterior fijaba el ALTO
     pero no el RELLENO. Los campos de Editar, Historia, Video a
     video y Studio heredan un relleno vertical de 12+12 px (los
     de Texto/Imagen a video llevan 5+5), así que en esos cuatro
     editores la caja de 56 px solo dejaba 32 px útiles y cabía
     UNA línea completa (razón medida 1,38) en vez de las dos
     pedidas. Con el mismo relleno de 5+5 de la fórmula, los
     cuatro quedan en 2 líneas exactas (razón 2,11) sin tocar ni
     el alto ni el interlineado. */
  :is(#vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="1"] .t2v-field textarea {
    padding-top: 5px; padding-bottom: 5px;
  }
  /* ===== PASADA FINAL (2026-11-04): la vista previa del archivo
     ya subido EXPLOTABA la consola en el teléfono. La imagen se
     pintaba a todo el ancho de su columna con el alto natural y
     los datos (nombre, duración, «Cambiar») se apilaban debajo:
     en Imagen a video la consola pasaba de 205,6 a 460,8 px con
     una foto y a 852,8 px con las dos, y el carrusel quedaba
     fuera de la pantalla (su parte alta a 1.150 px, inalcanzable);
     en Editar la consola crecía 101 px al subir el video y en
     Historia 95 px al elegir la foto. En escritorio este mismo
     fallo ya se había corregido con la franja compacta (miniatura
     de 40 px y datos en UNA fila, con el nombre recortado con
     puntos suspensivos), pero aquel arreglo quedó tras la puerta
     de min-width:1024px y la banda de teléfono nunca lo recibió.
     Aquí se aplica el MISMO patrón a las cinco pantallas: con
     archivo o sin archivo la consola mide lo mismo — la caja no
     se mueve por el contenido; el que se ajusta es el texto. */
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .preview.show {
    display: flex; align-items: center; gap: 8px; min-width: 0;
  }
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .preview img {
    width: 40px; height: 40px; object-fit: cover; border-radius: 10px; flex: none;
  }
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .preview .file-meta {
    flex: 1; min-width: 0; margin-top: 0; flex-wrap: nowrap;
  }
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .preview .file-meta .fname {
    flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .preview .file-meta .pill { flex: none; }
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel="1"] .preview .change-btn {
    flex: none; min-height: 30px; padding: 4px 10px; font-size: 12px; margin-left: 0;
  }
  /* Las tiras de miniaturas (referencias de Editar, extras de
     Object Swap) crecen DENTRO de su columna con recorrido
     propio acotado, como en escritorio: nunca empujan la fila. */
  #vedit-screen #vedit-ref-thumbs,
  #create-screen #swap-extras .cz-thumbs { max-height: 64px; overflow-y: auto; }

  /* ========================================================
     v6 · DECISIÓN DEL DUEÑO (2026-11-04, opción c): la fórmula
     [2026-11-08 ICONOS GRANDES: las medidas por debajo del 70 % de
     este bloque quedan REVOCADAS y restauradas al 100 %; ver nota al final]
     y las medidas del 70 % están APROBADAS, pero en cuatro
     pantallas una parte aún rueda por dentro porque su consola
     es más alta (subidas + bloque de audio siempre visible) y
     su caja es más baja. SOLO en esas partes los controles
     bajan POR DEBAJO del 70 %, paso a paso, hasta que cada
     parte quepa en una sola pantalla (scrollHeight ≤
     clientHeight, medido en EN y ES y en todos los niveles y
     tipos de cada carpeta). Todo lo demás — Texto a video,
     Imagen a video y las partes que ya caben — queda EXACTO
     en el 70 % aprobado: ninguna regla de este bloque las
     toca (selectores acotados por pantalla, modo y número de
     parte). Los botones siguen con tamaño FIJO: si un texto
     no cabe, se ajusta el texto, nunca la caja.
     Partes corregidas:
     · Editar video, parte 1 (384 px; Intercambiar 446;
       caja 248–403 según estado: manda el estado cargado).
     · Historia, partes 1 y 2 (297 y 303 contra 259; con foto
       la caja baja a 209 y la parte 1 también se ajusta a eso).
     · Video a video, parte 1 (344 contra 267; el efecto
       Studio comparte la parte y queda dentro) y la parte 2
       SOLO con el efecto Studio (321 contra 267).
     · Studio (premium), parte 2 (389 contra 282).
     ======================================================== */
  /* --- Base común de las partes reducidas (bajo el 70 %) --- */
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label {
    font-size: 10.5px; margin: 4px 0 3px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg {
    padding: 4px; gap: 5px; border-radius: 13px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn {
    padding: 11px 10px; font-size: 14.5px; border-radius: 9px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-t,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-t,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn .seg-t,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-t,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn .seg-t,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn .seg-t {
    font-size: 13.5px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-d,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-d,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn .seg-d,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-d,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn .seg-d,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn .seg-d {
    font-size: 11.5px; margin-top: 2px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-info-chip,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-info-chip,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-info-chip,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-info-chip,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-info-chip,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-info-chip {
    padding: 12px 10px; font-size: 14.5px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-hint,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-hint,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-hint,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-hint,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-hint,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-hint {
    font-size: 10.5px; margin-top: 4px;
  }
  /* Tarjetas de Proporción de las partes reducidas que las
     llevan como botones .seg-btn.asp-card (la parte 2 de
     Video a video SOLO con el efecto Studio, y la parte 2 de
     Studio premium): van tras las reglas .seg-btn y con más
     especificidad, así que mandan estas medidas. */
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-card,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-card {
    padding: 6px 5px 5px; gap: 3px; border-radius: 14px;
  }
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-shape,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-shape { height: 19px; }
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-916,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-916 { width: 11px; }
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-169,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-169 { width: 34px; }
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-11,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-11 { width: 19px; }
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-word,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-word { font-size: 13px; }
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-num,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-num { font-size: 11px; }
  /* Cámara de las partes reducidas que la llevan (Historia
     parte 2, Video a video Studio parte 2, Studio premium
     parte 2): cuadrados de 46×44 con el alto FIJO — el texto
     nunca mueve el botón — y la etiqueta dentro de la caja. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-camchips,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-camchips,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-camchips {
    gap: 9px; margin: 0 0 4px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip {
    height: 66px; padding: 7px 3px 6px; gap: 3px;
    font-size: 11px; line-height: 1.12; border-radius: 14px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before {
    width: 22px; height: 22px;
  }

  /* --- Editar video, parte 1: el recorte más profundo (su
     caja con el video cargado es la más baja: 248 px) --- */
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label {
    font-size: 9.5px; margin: 1px 0 2px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn {
    padding: 11px 10px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn .seg-t {
    font-size: 13.5px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-info-chip {
    padding: 12px 10px; font-size: 14.5px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-dur-row {
    padding: 12px 12px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-dur-label {
    font-size: 14.5px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .cz-dur-pill {
    font-size: 14.5px; padding: 5px 12px;
  }
  /* La nota del audio original (siempre visible por regla del
     dueño) en Editar parte 1 y en Video a video parte 1: se
     ajusta el TEXTO (letra e interlineado), jamás su presencia
     ni su bloque. */
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .audio-note-blue {
    font-size: 12.5px; line-height: 1.45; padding: 8px 11px; margin-top: 8px;
  }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .audio-note-blue {
    font-size: 12.5px; line-height: 1.45; padding: 8px 11px; margin-top: 8px;
  }

  /* --- Historia: ajustes propios de sus partes 1 y 2 --- */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label {
    font-size: 10px; margin: 2px 0 2px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .seg-btn {
    padding: 11px 10px;
  }
  #create-screen[data-cz-effect="script"].cz-screen .story-tier-note {
    font-size: 9.5px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #create-silent-warn {
    font-size: 10.5px; line-height: 1.25; margin-top: 4px;
  }
  /* Historia, parte 2: la tarjeta fija de formato y el botón
     de «Conecta tu IA» que vive en la rejilla de cámara. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .story-fmt-fixed {
    padding: 10px 12px; font-size: 13.5px; border-radius: 14px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .story-fmt-fixed .asp-916 {
    width: 13px; height: 22px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .story-myai-btn {
    font-size: 13.5px; padding: 8px 10px;
  }

  /* --- Alertas de silencio de Editar y de Video a video:
     viven en la parte 1 y APARECEN al elegir «Sin sonido»
     (en Historia la de la parte 1 ya quedó apuntada arriba).
     La regla de v4 las fija por su #id (especificidad
     (2,2,0)), así que esta reducción también las apunta por
     su #id; si no, la alerta sola volvía a desbordar la
     parte en ese estado (medido: Editar 259 contra 248). --- */
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #vedit-silent-warn {
    font-size: 10px; line-height: 1.3; margin-top: 4px;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #create-silent-warn {
    font-size: 10.5px; line-height: 1.3; margin-top: 4px;
  }

  /* --- Studio (premium), parte 2: la fila del interruptor de
     sonido baja por su texto (título y subtítulo); el
     interruptor en sí conserva su tamaño. --- */
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .ps-toggle-title {
    font-size: 13px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .ps-toggle-sub {
    font-size: 11px;
  }

  /* --- Segunda pasada v6 (medida): los últimos píxeles --- */
  /* Historia: el relleno vertical PROPIO de sus dos partes
     baja 4 px (10/12 → 8/10); el horizontal no cambia. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1),
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) {
    padding-top: 8px; padding-bottom: 9px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-camchips {
    gap: 9px;
  }
  /* Historia parte 2 y Studio premium parte 2: la cámara baja
     a 42 px de alto fijo (su interior — icono 14, hueco 1,
     etiqueta en 2 líneas — sigue cabiendo entero) y las
     etiquetas y botones propios aprietan un punto más. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip {
    height: 66px; padding: 7px 3px 6px; gap: 3px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before {
    width: 22px; height: 22px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label {
    font-size: 10px; margin: 3px 0 2px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn {
    padding: 11px 10px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .story-fmt-fixed {
    padding: 10px 12px;
  }
  /* Studio premium, parte 2: etiquetas, tarjetas y la fila del
     interruptor un punto más abajo, y el relleno vertical
     propio de la parte baja 8 px (10/12 → 6/8). */
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) {
    padding-top: 6px; padding-bottom: 8px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label {
    font-size: 10px; margin: 3px 0 2px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg {
    padding: 4px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .seg-btn {
    padding: 11px 10px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-card {
    padding: 6px 5px 5px; gap: 3px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-shape { height: 19px; }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-word { font-size: 13px; }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-num { font-size: 11px; }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .ps-toggle-title {
    font-size: 12px;
  }
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .ps-toggle-sub {
    font-size: 10px;
  }

  /* ========================================================
     v7 · ÚLTIMO AJUSTE DEL DUEÑO (2026-11-04): quedaban SOLO
     [2026-11-08 ICONOS GRANDES: las medidas de este bloque quedan
     REVOCADAS y restauradas al 100 %; ver nota al final de la banda]
     dos estados de Imagen a video con las 2 fotos cargadas
     (en v6 quedaron registrados sin tocar porque no estaban
     en la lista de la opción c; el dueño los aprobó después):
     · parte 2 en Estándar: 310 contra 277 (+33 px).
     · parte 1 en Studio: 278 contra 277 (+1 px).
     El contenido de las partes es el mismo que en fresco; lo
     que cambia al cargar las dos fotos es la CAJA: la consola
     crece (las dos franjas de vista previa) y el carril baja
     de 336 a 277 px. Por eso la reducción se acota al ESTADO
     CARGADO con :has(#i2v-photo2-drop.has-file) — la clase que
     el propio app.js pone al fijar la segunda foto — y al
     nivel por data-tier: en fresco y con 1 foto NO se aplica
     ninguna de estas reglas y todo queda EXACTO en el 70 %
     aprobado, igual que Texto a video y las demás carpetas.
     Los botones conservan tamaño FIJO; si un texto no cabe,
     se ajusta el texto, nunca la caja.
     ======================================================== */
  /* --- Estándar, parte 2, con las 2 fotos: −39 px aprox. --- */
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) {
    padding-top: 7px; padding-bottom: 9px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label {
    font-size: 11px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-card {
    padding: 6px 5px 5px; gap: 3px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-shape { height: 19px; }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-word { font-size: 13px; }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .asp-num { font-size: 11px; }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-adv {
    margin-top: 7px; padding: 2px 12px 7px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-adv summary {
    padding: 13px 0 6px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-camchips {
    gap: 9px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip {
    height: 66px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before {
    width: 22px; height: 22px;
  }
  /* --- Studio, parte 1, con las 2 fotos: −5 px (solo el
     relleno vertical propio de la parte; sobraba 1 px) --- */
  #i2v-screen[data-tier="studio"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) {
    padding-top: 8px; padding-bottom: 9px;
  }

  /* ========================================================
     v8 · CORRECCIONES DEL DUEÑO (2026-11-04, tras probar v6
     [2026-11-08 ICONOS GRANDES: el punto 3 (Proporción −15–20 %) queda
     REVOCADO y restaurado al 100 %; ver nota al final de la banda]
     en su iPhone real; sus capturas: Imagen a video partes 2
     y 3, Texto a video con el resumen abierto). Cuatro cosas,
     SOLO la banda del teléfono:
     1) «PROMPT CON IA» PEGADO AL ÁREA DE ESCRIBIR: entre el
        campo y el botón mediaban el renglón entero del
        contador «0/1000» y los márgenes (hueco medido en el
        rig: 15 px en Texto a video, 29 en Imagen a video y
        35,6 en Editar) y la caja de la consola sobraba por
        abajo. El contador sale del flujo y se acomoda en
        ABSOLUTO sobre la misma línea del botón, a la derecha
        (no añade altura); la fila IA queda a 4–6 px del campo
        y la consola recorta lo liberado — el carril (flex:1)
        gana ese alto. Los botones NO cambian de tamaño.
     2) CONSOLA DE HISTORIA A CASI LA MITAD (289,5 → ~150 px):
        sus tres cajas de la fila de fuentes (foto · imagen
        con IA · guión) bajan de 76/74,5/97,4 a 34 px FIJOS
        con los textos ajustados (la notita de formatos de la
        foto sale solo en este modo: su pista ya vive en la
        cabecera); la cabecera de la idea y su pie quedan en
        UNA línea (la ayuda del pie repite el placeholder: se
        recorta con «…»); fuera el aire del panel del guión y
        el «strut» de línea base del campo. Ninguna función
        se elimina y el campo conserva sus 2 líneas (56 px).
        Al crecer su carril, las partes reducidas en v6 siguen
        cabiendo con holgura — no se deshace su reducción.
     3) PROPORCIÓN MÁS PEQUEÑA: las tarjetas bajan otro
        ~15–20 % (57,6 → ~47 px de alto; la fila ocupa el
        ~84 % del ancho, centrada) en todos los editores, con
        icono y textos completos. Las partes ya reducidas en
        v6 (sus tarjetas van como .seg-btn o con reglas de
        mayor especificidad) conservan su medida menor.
     4) BUG DEL RESUMEN EXPANDIDO: al abrirse, el desglose
        (absoluto, bottom:100%+8 del .cz-sumwrap) quedaba
        ATRAPADO en el contexto del carril y la CONSOLA lo
        tapaba — medido en el rig con elementFromPoint: en
        Imagen a video el propio textarea quedaba encima del
        desglose; en Editar, su consola; en Historia, dos
        piezas de su consola — y en el iPhone del dueño se
        veía cortado entre la consola y el carril. Pasa a
        FIJO sobre la ventana: anclado ~8 px SOBRE su barra
        (en la medición final la barra corona a 166–168 px
        del fondo de la pantalla; la de Editar, a 253 — ver
        la sección 4), z-index 480 y red de seguridad de
        alto máximo con recorrido propio. El fondo #2e3a75 al
        abrir ya lo da la regla compartida F4 (todas las
        bandas); aquí no se repite.
     ======================================================== */
  /* --- 1 · Botón IA pegado + contador sin renglón --- */
  :is(#t2v-screen, #i2v-screen, #vedit-screen).cz-screen [data-cz-panel="1"] {
    position: relative;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen).cz-screen [data-cz-panel="1"] .t2v-count {
    position: absolute; right: 13px; bottom: 12px; margin: 0; z-index: 3;
  }
  /* En Editar el botón IA es más alto (37,6) y la consola
     lleva más relleno al pie (12): el contador se centra
     sobre SU línea con su propio valor. */
  #vedit-screen.cz-screen [data-cz-panel="1"] .t2v-count { bottom: 22px; }
  :is(#t2v-screen, #i2v-screen).cz-screen [data-cz-panel="1"] .cz-airow {
    margin-top: 5px;
  }
  /* En Imagen a video la consola es flex con row-gap de 7 px
     (capa propia de esa pantalla): margen y hueco se SUMAN
     (7 + 5 = 12 medidos). Su fila IA lleva −2 para que el
     hueco visible campo→botón quede en los mismos 5 px que
     en Texto a video (medido en vivo: 0 → 7, −2 → 5). */
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-airow {
    margin-top: -2px;
  }
  /* En Editar el hueco de línea base del campo (~6 px) ya
     da la separación: la fila IA va sin margen superior. */
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-airow {
    margin-top: 0;
  }

  /* --- 2 · Consola de Historia a casi la mitad --- */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] {
    padding-top: 6px; padding-bottom: 6px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-srcrow {
    gap: 6px;
  }
  /* Las tres cajas de la fila de fuentes: 34 px FIJOS, con
     el contenido centrado; los textos se ajustan a la caja,
     nunca al revés (regla del dueño). */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #photo-drop {
    height: 34px; padding: 3px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #photo-drop .big {
    font-size: 10.5px; line-height: 1.18; margin-bottom: 0;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #photo-drop .small {
    display: none;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #ai-image-generate {
    height: 34px; min-height: 34px; padding: 3px 6px; font-size: 11px; line-height: 1.2;
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #story-script-btn {
    height: 34px; min-height: 34px; padding: 3px 6px; font-size: 11.5px; line-height: 1.2;
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  /* Cabecera de la idea: etiqueta sin márgenes y la pista de
     la foto en UNA línea con «…» si no cabe. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #story-head {
    align-items: center;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #story-head .t2v-label {
    margin: 0;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #story-head .t2v-hint {
    font-size: 10px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* El campo sin el «strut» de línea base (62,2 → 56, las
     2 líneas exactas de la fórmula) y el pie en una línea:
     la ayuda repite el placeholder, se recorta con «…». */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #idea-input {
    display: block;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-idea-foot {
    margin-top: 0; align-items: center;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-idea-help {
    font-size: 10px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-idea-reset {
    font-size: 10.5px; padding: 1px 6px;
  }
  /* El panel del guión, sin su aire cuando está recogido. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #script-panel {
    margin-top: 4px; padding-top: 4px;
  }

  /* --- 3 · Tarjetas de Proporción −15–20 % --- */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards {
    gap: 8px; margin-left: 0; margin-right: 0;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-card {
    padding: 6px 5px 5px; gap: 3px; border-radius: 14px;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-shape { height: 19px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-916 { width: 11px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-169 { width: 34px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-11 { width: 19px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-word { font-size: 13px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .asp-cards .asp-num { font-size: 11px; }

  /* --- 4 · El Resumen expandido se SUPERPONE (fijo) ---
     El ancla deja la tarjeta ~8 px SOBRE su barra, como en
     escritorio: la barra de Texto/Imagen a video, Historia,
     Video a video y Studio corona a 166–168 px del fondo de
     la pantalla (ancla 176). La de EDITAR corona a 253 px
     (bajo la barra van su nota y el botón Generar, no es la
     última pieza de su parte): con el ancla general la
     tarjeta la TAPABA (medido: elementFromPoint sobre la
     barra daba el desglose) — lleva su propio ancla, 262. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-sumwrap .cz-sumbreak {
    position: fixed; left: 12px; right: 12px; bottom: 176px; z-index: 480;
    max-height: calc(100dvh - 246px); overflow-y: auto;
  }
  #vedit-screen.cz-screen .cz-sumwrap .cz-sumbreak {
    bottom: 262px; max-height: calc(100dvh - 332px);
  }

  /* ========================================================
     v10 · CAMBIO DE DISEÑO DEL DUEÑO (2026-11-04): MUERE EL
     CARRUSEL LATERAL. Debajo de la consola ya no hay partes
     que se deslicen de lado ni puntos indicadores: TODO el
     panel va en UNA SOLA COLUMNA que se desliza HACIA ABAJO,
     como en la versión de escritorio — el usuario baja por
     la columna viendo las opciones en su orden aprobado y
     AL FINAL están el Resumen y el botón de crear video.
     Las envolturas .cz-slide quedan como simples grupos
     apilados (sin página, sin snap, sin alto propio ni
     scroll propio): el único recorrido es el vertical de
     la columna. Los tamaños de los controles NO cambian:
     son el 70 % aprobado y las reducciones v6/v7, cuyas
     reglas apuntaban a estos grupos y por eso siguen
     mandando tal cual sobre su contenido.
     ======================================================== */
  /* La columna: el panel 2 rueda SOLO en vertical. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"] {
    flex-direction: column; overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: none;
  }
  /* Los grupos, apilados: sin página ni scroll propio. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"] > .cz-slide {
    flex: none; width: auto; height: auto; min-height: 0;
    overflow: visible; scroll-snap-align: none; scroll-snap-stop: normal;
  }
  /* DIAGNÓSTICO v10 — la «parte en blanco» (ya sin carril,
     queda como explicación): la regla .cz-slide-off
     { display:none } (especificidad (0,1,0)) PERDÍA contra
     la .cz-slide { display:flex } del propio bloque
     ((1,2,0) vía :is(#…-screen)), así que el grupo sin
     contenido para el nivel — en Editar Estándar, el del
     tramo Pro (#vedit-pro-wrap, oculto en ese nivel) —
     ocupaba una página entera VACÍA entre la primera parte
     y el Resumen, aunque los puntos (bien contados: 2)
     dijeran otra cosa. Medido en el rig: el grupo llevaba
     la clase de apagado y aun así display:flex y 376 px de
     ancho (scrollW total 1128 = 3 páginas). En la columna
     el grupo apagado desaparece de verdad: no ocupa ni un
     píxel y no deja ningún hueco. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"] > .cz-slide.cz-slide-off {
    display: none;
  }
  /* Sin puntos indicadores: el elemento no se pinta jamás. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide-dots {
    display: none !important;
  }
  /* El Resumen se despliega EN SU SITIO, dentro de la
     columna (como en escritorio, con su fondo #2e3a75 al
     expandirse): fuera el fijo de v8 y sus anclas — la
     tarjeta crece en el flujo, sobre su barra, y se ve
     completa bajando por la columna. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-sumwrap .cz-sumbreak {
    position: static; left: auto; right: auto; bottom: auto;
    max-height: none; overflow: visible;
  }

  /* ========================================================
     v10 · CAJAS DE CARGA DE EDITAR (dueño, 2026-11-04): en
     Intercambiar se veían «más o menos bien» pero aún
     grandes, y en EDICIÓN GENERAL está «el fallo más
     grande»: la caja de TU VIDEO dejaba su subtítulo FUERA
     del borde punteado — medido en el rig (ES): el
     contenido mide 85 px en una caja de 72 útiles, y
     «archivos» caía 11,3 px por debajo del borde, sobre la
     etiqueta siguiente; en EN cabía justo, por eso el fallo
     se veía peor en español y en Edición general (donde la
     consola alta además acortaba el carril). Las gemelas
     bajan un poco (76 → 68 px) para liberar espacio abajo
     y el TEXTO se ajusta a la caja — la caja manda (regla
     del dueño): título y subtítulo quedan COMPLETOS dentro
     en EN y ES, en los dos tipos y los dos niveles, fresco
     y con archivos cargados.
     ======================================================== */
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone,
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .ps-add-ref { height: 68px; }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone .big {
    font-size: 12.5px; line-height: 1.15;
  }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone .small {
    font-size: 10.5px; line-height: 1.2;
  }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .ps-add-ref .ps-add-title {
    font-size: 12.5px; line-height: 1.15;
  }
  #vedit-screen.cz-screen [data-cz-panel="1"] .cz-srcrow .ps-add-ref .ps-add-sub {
    font-size: 10.5px; line-height: 1.2;
  }

  /* ========================================================
     v11 · AJUSTES DEL DUEÑO (2026-11-04, tras probar v10 en
     [2026-11-08 ICONOS GRANDES: el punto 2 (Cámara, texto adaptado al
     cuadro) queda REVOCADO y restaurado al 100 %; ver nota al final]
     su iPhone; la COLUMNA VERTICAL quedó aprobada — esta
     sección no toca la estructura, solo textos y el reparto
     de dos bloques de Historia):
     1) HISTORIA — TAMAÑO DEL PROYECTO: el número y su texto
        van LADO A LADO en una línea (antes apilados, y la
        opción de 25 envolvía su texto en un segundo renglón:
        era la caja más alta del bloque). La caja del
        segmento baja de 45,6 a 21,8 px y el alto ganado
        (23,8 px) pasa ÍNTEGRO al bloque de arriba: las dos
        opciones de NIVEL crecen de 16,4 a 40,2 px (bloques:
        Tamaño 64,1 → 40,3; NIVEL 53,7 → 77,5). La columna
        ni crece ni mengua (563 px antes y después, medido
        en el rig en EN y ES). Para que la opción de
        25 quepa al lado a un tamaño legible, su etiqueta
        pierde el «· proyecto completo» (medido: harían falta
        ~182 px de los ~104 disponibles) y queda «25 escenas
        · 125 s» en los 47 idiomas (diccionarios ?v=50).
     2) CÁMARA — la etiqueta se adapta a su cuadro, nunca al
        revés (regla permanente del dueño). Las palabras
        largas se SALÍAN del cuadrado, medido en el rig con
        el rectángulo del texto contra el del cuadro:
        «Acercamiento» +6,7 px por lado y «Seguimiento»
        +3,5 en Texto/Imagen a video (56×55 a 10,5 px), y
        «Acercamiento lento» +8,4 y «Plano de seguimiento»
        +5 en los cuadros pequeños de Historia, del Studio
        de Video a video y de Studio premium (46×42/44 a
        9,5 px). En inglés todo cabía ya; el remedio es
        general (vale para cualquier idioma): la letra baja
        lo justo y la palabra que no cabe se parte DENTRO
        del cuadro — por sílabas (hyphens, con la lengua del
        documento que i18n ya fija en <html lang>) o, si el
        motor no tiene diccionario de guiones, por donde
        quepa (overflow-wrap). La etiqueta queda COMPLETA
        y dentro; el tamaño de los cuadros NO se toca.
     ======================================================== */
  /* --- 1 · Historia: escenas lado a lado --- */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #scene-seg .seg-btn {
    display: flex; align-items: baseline; justify-content: center; gap: 5px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #scene-seg .seg-btn .seg-t,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #scene-seg .seg-btn .seg-d {
    display: inline; margin-top: 0; white-space: nowrap;
  }
  /* --- 1 · Historia: NIVEL recibe el alto ganado (+23,2) --- */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #story-tier-seg .seg-btn {
    padding-top: 12.9px; padding-bottom: 12.9px;
  }
  /* --- 2 · Cámara del Panel A (Texto/Imagen a video) --- */
  :is(#t2v-screen, #i2v-screen).cz-screen .cz-slide .cz-chip {
    font-size: 11px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  }
  /* Su variante con las 2 fotos cargadas (v7: cuadros de
     49 px de alto) baja un punto más para que la etiqueta
     en 2 renglones siga dentro. */
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip {
    font-size: 11px;
  }
  /* --- 2 · Cámara de los cuadros pequeños (Historia, el
     Studio de Video a video y Studio premium): a 7,5 px con
     el icono a 12 y sin hueco interno, las dos etiquetas
     largas caben en 3 renglones partidos por sílabas —
     icono 12 + 3 × 8,1 + relleno 4 = 40,3 ≈ los 40 útiles
     del cuadro de 42 (en el de 44 sobra). Es la única
     combinación que las deja COMPLETAS y dentro sin tocar
     el tamaño aprobado del cuadro. --- */
  #create-screen[data-cz-effect="script"].cz-screen #story-camera-row .cz-chip,
  #create-screen[data-cz-effect="studio"].cz-screen #czs-camera-row .cz-chip,
  #premium-screen.cz-screen #ps-camera-row .cz-chip {
    font-size: 11px; line-height: 1.12; gap: 3px; padding: 7px 3px 6px;
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  }
  #create-screen[data-cz-effect="script"].cz-screen #story-camera-row .cz-chip::before,
  #create-screen[data-cz-effect="studio"].cz-screen #czs-camera-row .cz-chip::before,
  #premium-screen.cz-screen #ps-camera-row .cz-chip::before {
    width: 22px; height: 22px;
  }

  /* ==========================================================
     v12 · ÓRDENES DEL DUEÑO (2026-11-04, tras probar v11 en
     [2026-11-08 ICONOS GRANDES: los puntos 3 (Cámara al mínimo) y 4
     (botón principal a 49 px) y la duración a 24 px quedan REVOCADOS
     y restaurados al 100 %; ver nota al final de la banda]
     su iPhone; la columna vertical aprobada en v10 no cambia):
     1) HISTORIA — el rebalanceo de v11 se invierte en parte:
        las opciones de NIVEL quedaron MUY grandes (40,2 px) y
        bajan al 75 % de su tamaño (30,2 px); los 10 px así
        liberados pasan ÍNTEGROS a las opciones de TAMAÑO DEL
        PROYECTO (5/10/25, número y texto lado a lado como en
        v11), que suben de 15,8 a 25,8 px. El total de la
        columna no cambia (563 px antes y después).
     2) VIDEO A VIDEO — pase de alineación de la consola (su
        captura lo mostraba «todo desalineado, desajustado»):
        la columna de la foto recibe SU etiqueta encima de la
        caja (la clave ps_step1_title, la misma de Editar; en
        HTML va oculta por defecto y solo se enciende aquí, con
        efecto fx), las dos etiquetas comparten tratamiento
        (10,5 px, una línea, alto fijo de 14: ninguna puede
        empujar su caja más que la otra), las dos cajas quedan
        iguales a 68 px con el tratamiento de texto de Editar
        v10 (en ES la caja del video desbordaba +11,2 px y
        «archivos» caía FUERA del borde punteado), las ayudas
        bajo las cajas van parejas a 10,5 px y la zona de
        fotos extra se compacta para que etiqueta + botón
        quepan ENTEROS dentro de la consola visible en estado
        fresco (antes el botón caía +13,5 px bajo el pliegue:
        se veía la etiqueta y el botón quedaba cortado, como
        en su captura). La DURACIÓN forma por fin una fila
        uniforme: la base heredaba en el botón de «Más»
        «height: 100%; min-height: 38px», que forzaba la fila
        a 44 px y, con «Todo» elegido, el degradado llenaba
        una caja de 38 px contra botones de ~19; ahora los
        cinco botones miden 24 px en TODOS los estados.
     3) ICONOS AL MÍNIMO Y ABAJO MÁS GRANDE (su recordatorio):
        los cuadros de CÁMARA bajan al mínimo legible — el
        Panel A de 56×55 a 52×50 (icono 20 → 18, hueco de fila
        6 → 5; la variante de Imagen a video con 2 fotos, de
        49 a 45 e icono 18 → 16) y los cuadros pequeños de
        46×42/44 a 43×40 (icono 12 → 11, huecos 5 → 4) — y el
        espacio liberado crece los controles de abajo de esas
        mismas pantallas: Resumen +6 px, botón principal de
        43 a 49 px y segmentos de Enfoque +6 px. Editar NO se
        toca: no tiene iconos que recortar y su reparto quedó
        aprobado en v10. La etiqueta sigue completa dentro de
        su cuadro (la caja manda, el texto se adapta): en el
        Panel A caben icono 18 + hueco 3 + 2 renglones a 9,5 px
        (42,3 de 44 útiles) y en los pequeños, icono 11 + 3
        renglones a 7,5 px (35,3 de 36 útiles). --- */

  /* 1) Historia: NIVEL al 75 % ↔ TAMAÑO crece en lo liberado */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #story-tier-seg .seg-btn {
    padding-top: 11px; padding-bottom: 11px;
  }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #scene-seg .seg-btn {
    padding-top: 11px; padding-bottom: 11px;
  }

  /* 2) Video a video: las dos etiquetas parejas sobre las cajas */
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] .cz-srcrow .t2v-label {
    font-size: 10.5px; line-height: 14px; height: 14px; margin: 0 0 6px;
    white-space: nowrap; overflow: hidden;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] #photo-block .cz-photo-label {
    display: block;
  }
  /* Las dos cajas iguales (68 px) con el texto DENTRO */
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone {
    height: 68px;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone .big {
    font-size: 12.5px; line-height: 1.15;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] .cz-srcrow .dropzone .small {
    font-size: 10.5px; line-height: 1.2;
  }
  /* Ayudas bajo las cajas: la misma presencia en ambas columnas */
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] .cz-srccol .t2v-hint {
    font-size: 10.5px; line-height: 1.3; margin-top: 6px;
  }
  /* Zona de fotos extra compacta: etiqueta + botón enteros */
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] #swap-extras {
    margin-top: 4px;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] #fx-ref-drop {
    margin-top: 8px; padding: 8px;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] #fx-ref-drop .ps-add-title {
    font-size: 12.5px; line-height: 1.15;
  }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] #fx-ref-drop .ps-add-sub {
    font-size: 10.5px; line-height: 1.2;
  }
  /* 2b) DURACIÓN uniforme: 24 px en todos los estados */
  #create-screen.cz-screen #fx-duration-seg .seg-btn {
    height: auto;
  }
  #create-screen.cz-screen #fx-duration-seg .cz-otros-btn {
    height: auto; min-height: 0;
  }

  /* 3) Cámara Panel A al mínimo legible */
  :is(#t2v-screen, #i2v-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-camchips {
    gap: 9px;
  }
  :is(#t2v-screen, #i2v-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-chip {
    height: 66px; padding: 7px 3px 6px;
  }
  :is(#t2v-screen, #i2v-screen, #create-screen, #premium-screen).cz-screen .cz-slide .cz-chip::before {
    width: 22px; height: 22px;
  }
  /* Variante de Imagen a video con las 2 fotos: acompaña */
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip {
    height: 66px;
  }
  #i2v-screen[data-tier="standard"]:has(#i2v-photo2-drop.has-file).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .cz-chip::before {
    width: 22px; height: 22px;
  }
  /* Cuadros pequeños al mínimo legible */
  #create-screen[data-cz-effect="script"].cz-screen #story-camera-row .cz-chip,
  #create-screen[data-cz-effect="studio"].cz-screen #czs-camera-row .cz-chip,
  #premium-screen.cz-screen #ps-camera-row .cz-chip {
    height: 66px; padding: 7px 3px 6px;
  }
  #create-screen[data-cz-effect="script"].cz-screen #story-camera-row .cz-chip::before,
  #create-screen[data-cz-effect="studio"].cz-screen #czs-camera-row .cz-chip::before,
  #premium-screen.cz-screen #ps-camera-row .cz-chip::before {
    width: 22px; height: 22px;
  }
  #create-screen[data-cz-effect="studio"].cz-screen #czs-camera-row,
  #premium-screen.cz-screen #ps-camera-row {
    gap: 9px;
  }

  /* 4) Lo liberado crece los botones de abajo (solo pantallas
     con cámara: Texto/Imagen a video, Crear, Studio premium) */
  :is(#t2v-screen, #i2v-screen, #create-screen, #premium-screen).cz-screen .cz-slide .t2v-cost {
    padding-top: 10px; padding-bottom: 10px;
  }
  :is(#t2v-screen, #i2v-screen, #create-screen, #premium-screen).cz-screen .cz-slide :is(.t2v-generate, .ps-generate, .generate-btn) {
    min-height: 62px; padding: 12px 16px;
  }
  #create-screen[data-cz-effect="script"].cz-screen #story-focus-seg .seg-btn,
  #create-screen[data-cz-effect="studio"].cz-screen #czs-focus-seg .seg-btn,
  #premium-screen.cz-screen #ps-focus-seg .seg-btn {
    padding-top: 11px; padding-bottom: 11px;
  }

  /* ========================================================
     v13 · BUG GRAVE DEL DUEÑO (2026-11-04, su captura: Editar
     Pro con video de 38,4 s y 4 imágenes guía): al cargar
     varias imágenes la consola CRECE — eso está bien — pero
     el desplazamiento hacia abajo se BLOQUEA y el menú de
     abajo no se puede ver.

     DIAGNÓSTICO (medido en el rig, probe-v13): la pantalla
     NO era un deslizador de nada. La columna interior mide
     100dvh fijos con overflow visible (scrollHeight ==
     clientHeight: no puede rodar), el documento tampoco
     rueda, la consola (panel 1) es flex:none SIN overflow
     — toma su alto natural crezca lo que crezca (cada
     imagen guía suma su fila, ~86 px) — y el panel 2, el
     ÚNICO deslizador, es flex:1 con min-height:0: absorbe
     todo el apretón. Con 4 guías a 402×874 el panel quedaba
     en una franja de 91 px para 555 de contenido; con 5
     guías a 390×844, en 8,2 px. La rueda sobre la consola
     no mueve NADA (ni panel, ni pantalla, ni documento):
     el gesto cae sobre cajas que no ruedan y muere — el
     panel es inalcanzable justo cuando la consola crece.

     LA CORRECCIÓN — el comportamiento en DOS MODOS que
     ordenó el dueño, en todos los editores del teléfono:
     (1) deslizar desde el REPRODUCTOR o la CONSOLA mueve
     TODA la pantalla: la envoltura de la pantalla pasa a
     ser el deslizador del conjunto — reproductor y consola
     suben y se ocultan, y el panel aparece debajo;
     (2) deslizar desde el PANEL mueve SOLO el panel: el
     panel conserva su propio deslizador (el gesto que nace
     sobre él lo toma él, como siempre) y su
     overscroll-behavior: contain impide que al llegar a su
     fin el gesto salte al conjunto — reproductor y consola
     quedan fijos sin tocarse.
     La barra superior queda FIJA siempre: es sticky dentro
     del deslizador del conjunto, con el fondo de la app.
     El panel lleva como alto el de la pantalla bajo la
     barra (medido: barra de 48 px en Texto/Imagen a video
     y de 52 en Editar/Crear/Studio, + 10 de relleno
     inferior de la envoltura): en reposo (scroll del
     conjunto a 0) se ve su comienzo bajo la consola,
     EXACTAMENTE como hasta ahora — ningún tamaño aprobado
     cambia — y con el conjunto subido al máximo, el panel
     arranca justo bajo la barra y llena la pantalla.
     Al volver el conjunto a 0, reproductor y consola
     reaparecen completos en su sitio y tamaño aprobados.
     Ningún estado puede quedar atrapado: el Resumen y el
     botón final se alcanzan siempre, con la consola vacía
     o con 5 imágenes guía.
     SEGUNDA TRAMPA del gesto (medida con la cadena de
     ancestros, probe-v13-chain): la consola de Crear y
     Studio heredaba de la base «max-height: 30svh;
     overflow-y: auto; overscroll-behavior: contain» —
     un contenedor que no puede rodar (su contenido cabe)
     y NO encadena: el gesto que empezaba sobre la consola
     de Historia moría ahí aunque la pantalla ya fuera el
     deslizador. En esta banda la consola deja de ser
     contenedor de scroll en los cinco editores: overflow
     visible, sin tope de alto y encadenamiento libre
     hacia la pantalla (regla (5)). El tope además
     RECORTABA la consola de Studio: su caja medía
     262,2 px (= 30svh) pero su propio campo de escribir
     llegaba a 308,3 — la consola de Studio queda entera
     en 319,3 px (ningún control cambia de tamaño; solo
     deja de estar recortada) y es el ÚNICO cambio de
     geometría de reposo de v13, forzado por la orden de
     que ningún estado quede atrapado. En Crear el
     contenido (255,3) ya cabía bajo el tope: nada cambia.

     REVOCACIÓN (dueño 2026-11-08 20:06): el modo (2) queda
     ELIMINADO — el panel que rodaba solo no funcionaba bien
     y complicaba el uso. NUEVA REGLA, UN SOLO DESLIZAMIENTO
     en todos los editores del teléfono: deslizar hacia arriba
     DONDE QUIERA que se toque la pantalla mueve TODA la
     pantalla y muestra el contenido de abajo; deslizar hacia
     abajo vuelve. Ningún panel interno rueda por separado.
     El modo (1) queda como está (la pantalla es el deslizador;
     la barra superior sigue fija, sticky) y la regla (5)
     también (la consola no traga el gesto). El carril
     conserva su deslizamiento HORIZONTAL entre partes (snap
     en x, scrollLeft) — solo el vertical pasa al conjunto:
     las partes dejan de ser deslizadores propios (overflow
     visible, sin tope de alto, gesto libre hacia la pantalla)
     y el carril toma su alto natural: align-self:start lo
     saca de su fila 1fr sin tocar la fila (el riel lateral
     conserva su alto y su fondo) y el alto fijo
     calc(100dvh - …) desaparece. La última parte deja de
     anclar su bloque al fondo (sin alto fijo no hay espacio
     que repartir): Resumen y Generar quedan justo debajo
     del contenido anterior, alcanzables con el mismo
     deslizamiento. Ningún tamaño aprobado cambia en reposo:
     cabeza, reproductor y consola arrancan en su sitio.
     ======================================================== */
  /* (1) El conjunto entero rueda: la pantalla es el deslizador */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .tpl-screen-inner {
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: none;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .tpl-screen-inner::-webkit-scrollbar { display: none; }
  /* La barra superior, fija siempre (sticky sobre el conjunto) */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen :is(.tpl-screen-head, .create-screen-head) {
    position: sticky; top: 0; z-index: 300; background: var(--bg);
  }
  /* (2) REVOCADO 2026-11-08 — UN SOLO DESLIZAMIENTO: el carril ya
     NO rueda solo. Alto natural (align-self:start lo saca de su
     fila 1fr) y gesto vertical libre hacia el conjunto; las
     partes dejan de ser deslizadores propios. El carril conserva
     el deslizamiento HORIZONTAL entre partes (snap en x). */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="2"] {
    flex: none; height: auto; align-self: start; overscroll-behavior: auto;
  }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide {
    height: auto; overflow-y: visible; overscroll-behavior: auto;
  }
  /* (5) La consola no traga el gesto: nada de contenedor
     propio con contain ni tope de alto heredados. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="1"] {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }

  /* ========================================================
     ICONOS GRANDES (dueño, 2026-11-08 20:07): en el TELÉFONO
     los controles de las consolas vuelven a su tamaño
     COMPLETO — las proporciones del panel derecho aprobadas
     el 2026-11-04 (líneas ~12149–12260), que son las que
     mandaban antes de las reducciones. Quedan REVOCADAS y
     sus valores se restauraron EN SU SITIO al 100 %:
     · v4: la reducción al 70 % (pastillas 13→14,5 px, relleno
       5→11 px; Proporción 47→~80 px de alto; Cámara 56×55→
       78 px fijos, icono 20→28 px; Generar 43→62 px).
     · v6/v7: las reducciones por debajo del 70 % en Editar
       parte 1, Historia partes 1–2, Video a video parte 1 y
       Studio parte 2, y en Imagen a video con las 2 fotos.
     · v8 punto 3: Proporción −15–20 % (y sus márgenes del 8 %).
     · v11 punto 2: el texto de Cámara adaptado al cuadro
       (9,5/7,5 px → 11 px; icono 12→28 px).
     · v12 puntos 2b/3/4: duración a 24 px fijos → alto por
       relleno; Cámara al mínimo (52×50/43×40 → 78 px fijos);
       botón principal de 43 a 49 px → 62 px; Enfoque 5→11 px.
     La pantalla ya se desliza lo suficiente (un solo
     deslizamiento, 2026-11-08): nada tiene que caber en una
     sola pantalla — que nada quede apretado. Solo crecen los
     CONTROLES táctiles y sus textos (pastillas y sus
     títulos/descripciones, tarjetas de Proporción, cuadros
     de Cámara, duración, nota de audio, Avanzado, Generar);
     etiquetas, avisos, notas de pie y la consola quedan como
     estaban. La regla de botones inamovibles sigue intacta:
     los cuadros de Cámara conservan su ALTO FIJO (78 px) y
     el texto se adapta dentro. La regla de la parte 1 de
     Historia de v11 (NIVEL 12,9 px) queda sin efecto porque
     v12 la pisa con 7,9 px, ahora 11 px. Pin styles.css → 168.
     ======================================================== */

}

  /* ========================================================
     AJUSTE (dueño, 2026-11-08 22:18, tras probar staging en
     su iPhone): Proporción y Cámara a tamaño INTERMEDIO (ver
     aplicar-ajuste-prop-cam-misvideos.py: Proporción ~65 px,
     Cámara 66 px fijos, icono 22 px) + dos arreglos del mismo
     repaso. Solo teléfono; nada cambia en escritorio/tableta.
     ======================================================== */
  /* A · Foto de referencia (Imagen a video): con la foto ya
     cargada, «Cambiar foto» se montaba sobre «+ Agregar otra
     referencia» (solape medido 54x30 px a 390 px): la vista
     previa solo tenía 88 px de ancho para una miniatura de 40
     + un botón de 96. Con la foto ya elegida, la caja
     punteada «Toca para elegir una foto» es redundante —
     «Cambiar foto» hace ese trabajo — así que en teléfono se
     oculta cuando la vista previa está visible y la fila queda
     en dos: vista previa (miniatura + nombre + Cambiar foto,
     con sitio) y «+ Agregar otra referencia». Sin foto, la
     fila queda como estaba. La miniatura sigue completa (40
     px) y nada se recorta. */
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow:has(.preview.show) .dropzone { display: none; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow:has(.preview.show) .preview.show { flex: 7 1 0; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow:has(.preview.show) .ps-add-ref { flex: 5 1 0; }

  /* B · Mis videos: Descargar / Compartir / Duplicar caben los
     tres en una fila a 390 px (medido antes: 150,7 + 105,7 +
     94 + 2x8 = 366,4 > 354). Solo se aprieta el relleno
     lateral (16 -> 10 px); la letra queda en 15 px y el alto
     mínimo en 44 px, así que siguen siendo táctiles y
     legibles. Eliminar queda solo en la fila de abajo. */
  #myvid-screen .mv-actions .btn { padding-left: 10px; padding-right: 10px; }
/* REDISENO-MOVIL-END */

/* ============================================================
   AUDITORIA-ICONOS (dueño 2026-11-09 00:26 + 00:29): revisión
   completa de TODOS los modos (Texto, Imagen, Historia, Editar,
   Video a video) x niveles (Estándar, Pro, Studio) a 390 px.
   Referencias aprobadas: pastillas 43 px, Generar 62 px,
   Proporción 66,8/65,6 px, Cámara 66 px, cajas de referencia
   de Editar video 68 px (título 12,5 / subtítulo 10,5), cuadro
   «Describe tu video» 76 px. Solo teléfono (banda <=599 px).
   El bloque va AL FINAL del archivo para ganar por orden a las
   reglas viejas de igual especificidad; donde el ganador viejo
   tiene más especificidad se copia su selector exacto.
   ======================================================== */
@media (max-width: 599px) {
  /* A · Foto de referencia de Imagen a video = cajas de Editar
     video (68 px, título 12,5, subtítulo 10,5). El subtítulo
     estaba oculto en i2v por display:none (regla de la línea
     5474): se vuelve a mostrar. La fila sigue en dos cajas. */
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow .dropzone,
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow .ps-add-ref { height: 68px; padding: 6px 12px; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow .dropzone .big { font-size: 12.5px; line-height: 1.15; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow .dropzone .small { display: block; font-size: 10.5px; line-height: 1.2; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow .ps-add-ref .ps-add-title { font-size: 12.5px; line-height: 1.15; }
  #i2v-screen.cz-screen [data-cz-panel="1"] .cz-refrow .ps-add-ref .ps-add-sub { font-size: 10.5px; line-height: 1.2; }

  /* B · Alerta «Video en silencio»: UN paso más grande en todos
     los editores (t2v/i2v 12,5 -> 13,5; Editar 10 -> 11;
     Historia y Video a video 10,5 -> 11,5). Mismo amarillo,
     mismo interlineado; solo crece la letra. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) .audio-warn { font-size: 13.5px; }
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide .audio-warn,
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen .cz-slide :is(#t2v-silent-warn, #i2v-silent-warn, #vedit-silent-warn, #create-silent-warn) { font-size: 13.5px; }
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #vedit-silent-warn { font-size: 11px; }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #create-silent-warn { font-size: 11.5px; }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) #create-silent-warn { font-size: 11.5px; }

  /* C · Cuadros de texto: todos a 76 px como el de Texto a
     video (fórmula 56 + una línea de 20,3). Vale para Imagen,
     Editar, Historia (#idea-input), Video a video y Studio. */
  :is(#i2v-screen, #vedit-screen, #create-screen, #premium-screen).cz-screen [data-cz-panel="1"] .t2v-field textarea { height: 76px; min-height: 76px; }

  /* D · «Prompt con IA» de Texto/Imagen a video = el de Editar
     video (37,6 px, letra 13,5). Se restaura el relleno base. */
  :is(#t2v-screen, #i2v-screen) [data-cz-panel="1"] .cz-ai-btn { padding-top: 9px; padding-bottom: 9px; font-size: 13.5px; }

  /* E · Pastillas cortas (38,9 px) -> 43 px. Causa medida: las
     pastillas con la etiqueta envuelta en .seg-t tienen la caja
     de línea más baja (16,9 px) aunque el relleno ya es 11 px;
     el alto mínimo las clava en 43 y el flex las centra como
     las de Texto a video. Grupos ya >=43 (efecto 54,4,
     duración 45, Proporción 65,6, Cámara 66) no se tocan. */
  #vedit-screen #vedit-kind-options .seg-btn,
  #vedit-screen #vedit-audio-seg .seg-btn,
  #create-screen #story-tier-seg .seg-btn,
  #create-screen #scene-seg .seg-btn,
  #create-screen #res-options .seg-btn,
  #create-screen #story-focus-seg .seg-btn,
  #create-screen #fx-audio-seg .seg-btn { min-height: 43px; display: flex; align-items: center; justify-content: center; }
  /* Otros grupos de pastillas de Editar/Crear: solo suelo de
     43 px (si ya son más altos, no cambia nada). */
  #vedit-screen #vedit-tier .seg-btn,
  #vedit-screen #vedit-swap-mode .seg-btn,
  #vedit-screen #vedit-aspect .seg-btn,
  #create-screen #engine-seg .seg-btn,
  #create-screen #czs-sound-seg .seg-btn,
  #create-screen #czs-focus-seg .seg-btn,
  #create-screen #ps-focus-seg .seg-btn { min-height: 43px; }

  /* F · Fila superior de Historia: las tres cajas a 68 px
     (referencia de caja de referencia), con la letra acorde.
     Sustituye la regla de «34 px FIJOS» de esa fila: la
     uniformidad de la fila se mantiene, pero a tamaño grande.
     La caja de foto vuelve a mostrar su subtítulo. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #photo-drop { height: 68px; min-height: 68px; padding: 6px 8px; }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #photo-drop .big { font-size: 12.5px; line-height: 1.15; }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #photo-drop .small { display: block; font-size: 10.5px; line-height: 1.2; }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #ai-image-generate { height: 68px; min-height: 68px; padding: 6px 8px; font-size: 13px; line-height: 1.2; }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] #story-script-btn { height: 68px; min-height: 68px; padding: 6px 8px; font-size: 13.5px; line-height: 1.2; }

  /* G · «Restablecer» de Historia: de 19,2 px a ~32 px. */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="1"] .cz-idea-reset { font-size: 12.5px; padding: 6px 10px; }

  /* H · Etiquetas de sección de los editores a 12 px (las de
     10/10,5 px de Historia/Video a video y las de 9,5 px de
     Editar). Los rótulos de las cajas de Editar (8,5 px,
     deliberados para que quepan en su columna) NO se tocan:
     su regla es más específica y sigue mandando. */
  :is(#t2v-screen, #i2v-screen, #vedit-screen, #create-screen, #premium-screen) [data-cz-panel] .t2v-label { font-size: 12px; }
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label { font-size: 12px; }

  /* H2 · Etiquetas de las partes 2 (las reglas «v6» las bajaban
     a 9,5-10,5 px para que cada parte cupiera sin rodar; la
     auditoría las sube a 12 px como el resto de etiquetas: las
     partes ruedan por dentro si hace falta, la letra no se
     achica). Se copian los selectores exactos de las reglas
     v6 (líneas 12508, 12607, 12640, 12710, 12725, 13200). */
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label,
  #create-screen[data-cz-effect="script"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label,
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label,
  #create-screen[data-cz-effect="studio"].cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label,
  #premium-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(2) .t2v-label,
  #vedit-screen.cz-screen [data-cz-panel="2"] > .cz-slide:nth-child(1) .t2v-label { font-size: 12px; }
  #create-screen:not([data-cz-effect="script"]).cz-screen [data-cz-panel="1"] .cz-srcrow .t2v-label { font-size: 12px; }
  /* I · Mis videos: pestañas de vista (Lista/Cuadrícula/...)
     de 29,4 px a 43 px, y el desplegable de orden a 43 px. */
  #myvid-screen .lv-btn { padding: 11px 8px; font-size: 12.5px; min-height: 43px; }
  #myvid-screen .mv-sort { min-height: 43px; }
}
/* AUDITORIA-ICONOS-END */

/* ===== MODO-CLARO-OFF (dueño 2026-11-09 00:31): el modo claro no está
   pulido; queda desactivado en todas partes (computadora y teléfono)
   hasta que el dueño decida trabajarlo. Solo modo oscuro, siempre.
   El interruptor #theme-toggle (Ajustes -> Tema, el ÚNICO de la app)
   queda escondido junto con su fila completa. El CSS claro
   ([data-theme="light"], ~170 reglas) NO se borra: queda intacto
   más arriba en este archivo. Para reactivar: quitar este bloque,
   reactivar el listener de #theme-toggle en app.js, devolver
   applyUserTheme a su línea original y el meta color-scheme a
   "light dark". Fuera de toda media query: vale en todos los tamaños. */
#theme-toggle { display: none !important; }
.pf-row:has(#theme-toggle) { display: none !important; }