/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/recarga-tarjetas.css */
/* 21st.dev Pricing Card (0xUrvish, 10471): selección con expansión y transición.
   Identidad Cocuyo; sin librerías de animación ni tarifas del ejemplo. */
body.page-perfil #modal-recarga,body.studio-workbench #payModal{padding:20px;align-items:center;background:color-mix(in srgb,var(--negro-abismo) 73%,transparent);backdrop-filter:blur(10px)}
body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{box-sizing:border-box;width:min(980px,100%);max-width:980px;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;padding:28px;border:1px solid var(--negro-borde);border-radius:24px;background:var(--negro-abismo);box-shadow:0 30px 100px color-mix(in srgb,var(--negro-abismo) 60%,transparent);animation:rc-entrada .32s cubic-bezier(.2,.8,.2,1)}
.recarga-experiencia .rc-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.recarga-experiencia .rc-header>span{font-size:10px;letter-spacing:.12em;color:var(--gris-humo)}
.recarga-experiencia .rc-close{position:static;display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--negro-borde);border-radius:50%;background:var(--negro-elevado);color:var(--blanco-luz);font-size:22px;cursor:pointer}
.recarga-experiencia .rc-title{font:600 clamp(28px,4vw,40px)/1.1 var(--fuente);letter-spacing:-.05em;margin:0 0 10px;color:var(--blanco-luz)}
.recarga-experiencia .rc-description{font:400 13px/1.5 var(--fuente);color:var(--gris-humo);margin:0 0 22px}
.recarga-experiencia .rc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.recarga-experiencia .rc-card{box-sizing:border-box;position:relative;display:grid;grid-template-columns:1fr;gap:15px;min-width:0;margin:0;padding:24px;text-align:left;align-content:start;border:1px solid var(--negro-borde);border-radius:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--verde-cocuyo) 5%,var(--negro-elevado)),var(--negro-elevado) 65%);color:var(--blanco-luz);cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .25s,background .25s,transform .25s}
.recarga-experiencia .rc-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--verde-cocuyo) 50%,var(--negro-borde))}
.recarga-experiencia .rc-card.seleccionado{border-color:var(--verde-cocuyo);background:linear-gradient(150deg,color-mix(in srgb,var(--verde-cocuyo) 12%,var(--negro-elevado)),var(--negro-elevado) 75%);box-shadow:inset 0 0 0 1px var(--verde-cocuyo),0 8px 32px color-mix(in srgb,var(--verde-cocuyo) 5%,transparent)}
.recarga-experiencia .rc-card>input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:inherit}
.recarga-experiencia .rc-card:has(input:focus-visible){outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.recarga-experiencia .rc-card:has(input:disabled){opacity:.6;cursor:wait;transform:none}
.recarga-experiencia .rc-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;color:var(--verde-cocuyo);background:radial-gradient(circle,color-mix(in srgb,var(--verde-cocuyo) 15%,transparent),transparent 72%)}
.recarga-experiencia .rc-icon svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--verde-cocuyo) 25%,transparent));transition:transform .35s}
.recarga-experiencia .seleccionado .rc-icon svg{transform:scale(1.1)}
.recarga-experiencia .rc-icon-orbit{stroke-dasharray:3 5;stroke-width:1;opacity:.45;transform-origin:20px 20px}
.recarga-experiencia .seleccionado .rc-icon-orbit{animation:rc-orbita 18s linear infinite}
.recarga-experiencia .rc-copy{display:grid;gap:10px;min-width:0}
.recarga-experiencia .rc-name{font-size:14px;font-weight:600}
.recarga-experiencia .rc-amount{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:35px;line-height:1.1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.recarga-experiencia .rc-amount small{font-size:11px;font-weight:400;letter-spacing:0;color:var(--gris-humo)}
.recarga-experiencia .rc-price{display:grid;gap:5px;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.recarga-experiencia .rc-price small{font-size:10px;font-weight:400;letter-spacing:0;color:var(--gris-humo)}
.recarga-experiencia .rc-check{position:absolute;top:20px;right:18px;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--pizarra);border-radius:50%;color:var(--negro-abismo);transition:background .2s,border-color .2s}
.recarga-experiencia .rc-check svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s}
.recarga-experiencia .seleccionado .rc-check{background:var(--verde-cocuyo);border-color:var(--verde-cocuyo)}
.recarga-experiencia .seleccionado .rc-check svg{opacity:1;transform:scale(1)}
.recarga-experiencia .rc-detail{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s,opacity .25s;min-height:0;font-size:11px;color:var(--gris-niebla);line-height:1.5}
.recarga-experiencia .rc-detail>span{overflow:hidden;min-height:0}
.recarga-experiencia .seleccionado .rc-detail{grid-template-rows:1fr;opacity:1}
.recarga-experiencia .rc-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 14px;padding:16px 0;border-top:1px solid var(--negro-borde)}
.recarga-experiencia .rc-summary>div{display:grid;gap:6px;min-width:0}
.recarga-experiencia .rc-summary>div:last-child{text-align:right}
.recarga-experiencia .rc-summary span{font-size:11px;color:var(--gris-humo)}
.recarga-experiencia .rc-summary b{font-size:17px;color:var(--blanco-luz);font-weight:600}
.recarga-experiencia .rc-continue{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;border:1px solid var(--verde-cocuyo);border-radius:12px;background:var(--verde-cocuyo);color:var(--negro-abismo);font:600 14px/1.3 var(--fuente);cursor:pointer;transition:filter .2s,transform .2s}
.recarga-experiencia .rc-continue:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.recarga-experiencia .rc-continue:disabled{opacity:.45;cursor:default}
.recarga-experiencia .rc-continue:focus-visible,.recarga-experiencia .rc-close:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:4px}
.recarga-experiencia .rc-form fieldset{border:0;padding:0;margin:0;min-width:0}
.recarga-experiencia .rc-form legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.recarga-experiencia .rc-note{margin:12px 0 0;text-align:center;color:var(--gris-humo);font:400 10px/1.5 var(--fuente)}
body.rc-abierto,body.studio-workbench:has(#payModal.on){overflow:hidden}
body.studio-workbench #payModal #payClose.rc-close{width:44px;height:44px;min-width:44px;font-size:22px;border-radius:50%}
/* La ✕ de Recargar en su esquina también en árabe y urdu (10-oct-2026): el «margin-left:auto»
   del Estudio la empujaba en RTL hasta pegarla a «أرصدة الاستوديو», a media cabecera. */
body.studio-workbench #payModal #payClose.rc-close{margin-left:0;margin-inline-start:auto}
body.studio-workbench #payTitle.rc-title{font-size:clamp(28px,4vw,40px)}
body.studio-workbench #payPacksList.rc-grid{gap:14px}
@keyframes rc-entrada{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rc-orbita{to{transform:rotate(360deg)}}
@media(max-width:720px){
 body.page-perfil #modal-recarga,body.studio-workbench #payModal{padding:12px;align-items:center}
 body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{padding:18px;max-height:calc(100dvh - 24px);border-radius:22px}
 .recarga-experiencia .rc-header{margin-bottom:12px}.recarga-experiencia .rc-description{margin-bottom:18px}.recarga-experiencia .rc-grid{grid-template-columns:1fr;gap:10px}
 body.studio-workbench #payPacksList.rc-grid{gap:10px}
 .recarga-experiencia .rc-card{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:15px 12px}
 .recarga-experiencia .rc-icon{width:44px;height:50px;border-radius:12px}.recarga-experiencia .rc-icon svg{width:38px;height:38px}
 .recarga-experiencia .rc-copy{gap:7px}.recarga-experiencia .rc-name{font-size:12px}.recarga-experiencia .rc-amount{font-size:24px;gap:4px}.recarga-experiencia .rc-amount small{font-size:9px}
 .recarga-experiencia .rc-price{font-size:22px;text-align:right}.recarga-experiencia .rc-price small{font-size:8px}.recarga-experiencia .rc-check{display:none}
 .recarga-experiencia .rc-detail{grid-column:1/-1;padding-left:56px;font-size:10px}
 .recarga-experiencia .rc-summary{margin:16px 0 10px;padding:12px 0}.recarga-experiencia .rc-summary b{font-size:15px}
}
@media(max-width:360px){.recarga-experiencia .rc-card{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:13px 10px}.recarga-experiencia .rc-icon{width:32px;height:42px}.recarga-experiencia .rc-icon svg{width:32px;height:32px}.recarga-experiencia .rc-price{font-size:19px}.recarga-experiencia .rc-amount{font-size:21px}.recarga-experiencia .rc-detail{padding-left:40px}.recarga-experiencia .rc-title{font-size:26px}}
/* Segunda revisión: jerarquía de saldo/precio, selección sin saltos en móvil
   y pago siempre visible, con desplazamiento únicamente de las tarjetas. */
body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{display:flex;flex-direction:column;overflow:hidden;padding:30px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--verde-cocuyo) 7%,transparent),transparent 45%),var(--negro-abismo);border-color:color-mix(in srgb,var(--blanco-luz) 14%,var(--negro-borde));box-shadow:0 24px 100px color-mix(in srgb,var(--negro-abismo) 85%,transparent)}
.recarga-experiencia :is(.rc-header,.rc-title,.rc-description,.paysaldo){flex:none}
.recarga-experiencia .rc-header{margin-bottom:16px}
.recarga-experiencia .rc-header>span{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em}
.recarga-experiencia .rc-header>span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--verde-cocuyo);box-shadow:7px 0 var(--verde-cocuyo);margin-right:7px}
.recarga-experiencia .rc-title{font-weight:550;letter-spacing:-.045em}
.recarga-experiencia .rc-form{display:flex;flex-direction:column;min-height:0;margin:0}
.recarga-experiencia .rc-options{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--negro-borde) transparent;padding:4px;scroll-padding:4px;min-height:0}
.recarga-experiencia .rc-checkout{position:relative;z-index:2;flex:none;padding-top:12px;background:var(--negro-abismo)}
.recarga-experiencia .rc-card{padding:25px;gap:20px;border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--blanco-luz) 4%,var(--negro-elevado)),var(--negro-elevado) 70%)}
.recarga-experiencia .rc-card.seleccionado{background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--verde-cocuyo) 13%,transparent),transparent 75%),var(--negro-elevado);box-shadow:inset 0 0 0 1px var(--verde-cocuyo)}
.recarga-experiencia .rc-icon{border:1px solid color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--verde-cocuyo) 12%,transparent),transparent 72%)}
.recarga-experiencia .rc-icon svg{width:44px;height:44px;filter:none}
.recarga-experiencia .seleccionado .rc-icon{box-shadow:0 0 26px color-mix(in srgb,var(--verde-cocuyo) 12%,transparent)}
.recarga-experiencia .rc-name{font-size:12px;font-weight:500;color:var(--gris-niebla);letter-spacing:.015em}
.recarga-experiencia .rc-amount{display:grid;gap:5px;font-size:42px;font-weight:600;letter-spacing:-.045em}
.recarga-experiencia .rc-amount small{font-size:12px}
.recarga-experiencia .rc-price{padding-top:15px;border-top:1px solid var(--negro-borde);font-size:26px}
.recarga-experiencia .rc-price small{font-size:10px}
.recarga-experiencia .rc-detail{min-height:16px;grid-template-rows:1fr;font-size:10px}
.recarga-experiencia .rc-checkout .rc-summary{margin:0 0 12px;padding:14px 0 0;border-top:1px solid var(--negro-borde)}
.recarga-experiencia .rc-summary :is(b,strong){font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.recarga-experiencia .rc-checkout .rc-continue{min-height:50px;font-size:14px;border-radius:13px}
.recarga-experiencia .rc-note,.recarga-experiencia .pay-nota{font-size:10px;margin:10px 0 0;line-height:1.5}
body.studio-workbench #payModal .paysaldo{padding:0;border:0;background:none;margin:0 0 14px;font-size:11px}
body.studio-workbench #payModal .paysaldo b{font-size:15px}
body.studio-workbench #payModal .pay-mensaje:has(#payMsg:empty):not(:has(#payRetry:not([hidden]))){display:none}
@media(max-width:720px){
 body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{padding:20px;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:26px}
 .recarga-experiencia .rc-header{margin-bottom:10px}.recarga-experiencia .rc-description{font-size:12px;margin-bottom:16px}
 .recarga-experiencia .rc-card{grid-template-columns:42px minmax(0,1fr) auto;min-height:104px;gap:12px;padding:17px 14px;border-radius:18px}
 .recarga-experiencia .rc-card:hover{transform:none}
 .recarga-experiencia .rc-icon{box-sizing:border-box;width:42px;height:42px}.recarga-experiencia .rc-icon svg{width:30px;height:30px}
 .recarga-experiencia .rc-copy{gap:5px}.recarga-experiencia .rc-name{font-size:11px}.recarga-experiencia .rc-amount{font-size:30px;gap:3px}.recarga-experiencia .rc-amount small{font-size:10px}
 .recarga-experiencia .rc-price{border:0;padding:0;font-size:24px;gap:5px}.recarga-experiencia .rc-price small{font-size:8px}
 .recarga-experiencia .rc-detail{display:none}
 .recarga-experiencia .rc-check{display:grid;top:auto;right:auto;left:43px;bottom:23px;width:14px;height:14px;opacity:0;background:var(--negro-elevado)}
 .recarga-experiencia .seleccionado .rc-check{opacity:1}.recarga-experiencia .rc-check svg{width:11px;height:11px}
 .recarga-experiencia .rc-checkout .rc-summary{padding-top:12px;margin-bottom:12px}.recarga-experiencia .rc-summary :is(b,strong){font-size:18px}
}
@media(max-width:360px){
 body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{padding:16px}
 .recarga-experiencia .rc-card{grid-template-columns:34px minmax(0,1fr) auto;padding:15px 11px;gap:9px;min-height:100px}
 .recarga-experiencia .rc-icon{width:34px;height:34px}.recarga-experiencia .rc-icon svg{width:27px;height:27px}
 .recarga-experiencia .rc-amount{font-size:27px}.recarga-experiencia .rc-price{font-size:22px}.recarga-experiencia .rc-check{left:34px;bottom:22px}
}
/* Paquetes y pago completos: sin un panel interior que haya que desplazar. */
body.page-perfil #modal-recarga,body.studio-workbench #payModal{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
body.page-perfil #modal-recarga::-webkit-scrollbar,body.studio-workbench #payModal::-webkit-scrollbar{display:none}
body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{flex:none;max-height:none;overflow:visible;padding:24px}
.recarga-experiencia .rc-options{overflow:visible;min-height:auto}
.recarga-experiencia .rc-header{margin-bottom:8px}
.recarga-experiencia .rc-description{margin-bottom:14px}
.recarga-experiencia .rc-card{padding:18px;gap:12px;border-radius:18px}
.recarga-experiencia .rc-icon{width:48px;height:48px}.recarga-experiencia .rc-icon svg{width:34px;height:34px}
.recarga-experiencia .rc-amount{font-size:32px}.recarga-experiencia .rc-price{font-size:23px;padding-top:12px}
.recarga-experiencia .rc-detail{display:none}
body.studio-workbench #payModal .rc-summary{margin:0 0 12px;padding:12px 0 0}
body.studio-workbench #payModal .pay-nota{margin:9px 0 0}
@media(min-width:901px){
 .recarga-experiencia .rc-form{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:22px;align-items:start}
 .recarga-experiencia .rc-checkout{padding:0 0 0 20px;border-left:1px solid var(--negro-borde);align-self:stretch;display:flex;flex-direction:column;justify-content:center}
 .recarga-experiencia .rc-checkout .rc-summary,body.studio-workbench #payModal .rc-summary{border-top:0;padding-top:0;display:grid;gap:18px;margin-bottom:20px}
 .recarga-experiencia .rc-summary>div:last-child,body.studio-workbench #payModal .rc-summary>div:last-child{align-items:flex-start;text-align:left}
 .recarga-experiencia .rc-summary strong{font-size:27px}
 .recarga-experiencia .rc-card .rc-check{right:13px;top:13px}
}
@media(max-width:900px) and (min-width:721px){
 .recarga-experiencia .rc-card{grid-template-columns:40px 1fr;gap:12px}
 .recarga-experiencia .rc-icon{width:38px;height:38px}.recarga-experiencia .rc-icon svg{width:28px;height:28px}
 .recarga-experiencia .rc-amount{font-size:27px}.recarga-experiencia .rc-price{grid-column:1/-1}
}
@media(max-width:720px){
 body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{padding:18px}
 body.studio-workbench #payTitle.rc-title,.recarga-experiencia .rc-title{font-size:27px}
 .recarga-experiencia .rc-card{min-height:78px;padding:12px;gap:10px;grid-template-columns:34px minmax(0,1fr) auto}
 .recarga-experiencia .rc-icon{width:34px;height:34px}.recarga-experiencia .rc-icon svg{width:26px;height:26px}
 .recarga-experiencia .rc-amount{font-size:26px}.recarga-experiencia .rc-price{padding:0;font-size:22px}
 .recarga-experiencia .rc-check{left:35px;bottom:13px}
 .recarga-experiencia .rc-description{margin-bottom:10px}
 .recarga-experiencia .rc-checkout{padding-top:8px}
 .recarga-experiencia .rc-checkout .rc-summary{padding-top:10px;margin-bottom:10px}
}
@media(max-height:650px) and (max-width:720px){
 body.page-perfil #modal-recarga,body.studio-workbench #payModal{padding:8px}
 body.page-perfil #modal-recarga .rc-dialog,body.studio-workbench #payModal .rc-dialog{padding:14px}
 .recarga-experiencia .rc-header{margin-bottom:4px}
 body.studio-workbench #payModal #payClose.rc-close,.recarga-experiencia .rc-close{width:36px;height:36px;min-width:36px}
 body.studio-workbench #payTitle.rc-title,.recarga-experiencia .rc-title{font-size:24px;margin-bottom:8px}
 .recarga-experiencia .rc-description{display:none}
 .recarga-experiencia .rc-card{min-height:70px;padding:10px;gap:8px}
 .recarga-experiencia .rc-copy{gap:4px;line-height:1.2}
 .recarga-experiencia .rc-grid,body.studio-workbench #payPacksList.rc-grid{gap:7px}
 .recarga-experiencia .rc-amount{display:flex;font-size:23px;gap:4px}.recarga-experiencia .rc-price{font-size:20px}
 .recarga-experiencia .rc-checkout .rc-continue{min-height:44px}
}
/* Zoom alto, teclado o paisaje muy bajo: puede desplazarse el conjunto,
   nunca queda una opción o acción recortada dentro de las tarjetas. */
@media(max-height:540px){body.page-perfil #modal-recarga,body.studio-workbench #payModal{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.recarga-experiencia *{animation:none!important;transition:none!important}}

/* Beneficio aplicado al paquete: créditos intactos, precio anterior y actual legibles. */
.recarga-experiencia .rc-prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 9px;min-width:0}
.recarga-experiencia .rc-prices s{color:var(--gris-humo);font:400 13px/1.3 var(--fuente);letter-spacing:0;text-decoration-thickness:1px}
.recarga-experiencia .rc-price .rc-benefit{color:var(--verde-cocuyo);font-size:10px;font-weight:500;line-height:1.45;letter-spacing:0;max-width:100%;text-wrap:balance}
@media(max-width:720px){
 .recarga-experiencia .rc-prices{justify-content:flex-end;gap:3px 7px}
 .recarga-experiencia .rc-prices s{font-size:11px}
 .recarga-experiencia .rc-price:has(.rc-benefit){max-width:140px;text-align:right}
 .recarga-experiencia .rc-price .rc-benefit{font-size:9px}
}
@media(max-width:360px){.recarga-experiencia .rc-price:has(.rc-benefit){max-width:112px}.recarga-experiencia .rc-prices{gap:3px 5px}}
/* Recarga libre (5-oct-2026): importe escrito por la persona, desde US$1. */
.recarga-experiencia .rc-grid:has(.rc-libre){grid-template-columns:1fr}
.recarga-experiencia .rc-card.rc-libre{cursor:default;gap:16px}
.recarga-experiencia .rc-card.rc-libre:hover{transform:none}
.recarga-experiencia .rc-libre-campo{display:grid;gap:10px;font:500 13px/1.4 var(--fuente);color:var(--gris-humo)}
.recarga-experiencia .rc-libre-input{display:flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--negro-borde);border-radius:16px;background:var(--negro-abismo);transition:border-color .2s,box-shadow .2s}
.recarga-experiencia .rc-libre-input:focus-within{border-color:var(--verde-cocuyo);box-shadow:0 0 0 4px color-mix(in srgb,var(--verde-cocuyo) 18%,transparent)}
.recarga-experiencia .rc-libre-input b{font:600 clamp(30px,6vw,44px)/1 var(--fuente);color:var(--verde-cocuyo)}
.recarga-experiencia .rc-libre-input input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--blanco-luz);font:600 clamp(30px,6vw,44px)/1.1 var(--fuente);letter-spacing:-.04em;-moz-appearance:textfield;appearance:textfield}
.recarga-experiencia .rc-libre-input input::-webkit-outer-spin-button,.recarga-experiencia .rc-libre-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.recarga-experiencia .rc-libre-input small{font-size:12px;color:var(--gris-humo)}
.recarga-experiencia .rc-chips{display:flex;flex-wrap:wrap;gap:8px}
/* Táctil: los importes rápidos miden al menos 44 px de alto. */
.recarga-experiencia .rc-chip{min-height:44px;padding:0 16px;border:1px solid var(--negro-borde);border-radius:999px;background:var(--negro-elevado);color:var(--blanco-luz);font:600 14px/1 var(--fuente);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.recarga-experiencia .rc-chip:hover{transform:translateY(-1px);border-color:var(--verde-cocuyo)}
.recarga-experiencia .rc-chip.activo{background:var(--verde-cocuyo);border-color:var(--verde-cocuyo);color:var(--tinta-sobre-verde)}
.recarga-experiencia .rc-libre-ayuda{margin:0;font:400 13px/1.5 var(--fuente);color:var(--gris-humo)}
.recarga-experiencia .rc-libre-ayuda .rc-benefit{color:var(--verde-cocuyo)}
@media (prefers-reduced-motion:reduce){.recarga-experiencia .rc-chip{transition:none}.recarga-experiencia .rc-chip:hover{transform:none}}

/* Móvil (auditoría cuenta-10, oct-2026): letra mínima de 12 px en la
   ventana Recargar SIN que deje de caber entera en la pantalla (sin
   desplazamiento interior: «Recarga tu creatividad» se ve completa).
   1) Letra: rótulo, frase, saldo, «Recibirás», «Pago único · USD», nombre
      del paquete, «créditos», «USD · Pago único», descuento y la nota de
      Stripe pasan a 12 px como mínimo. Van con «html body … #payModal» (o
      #modal-recarga en Mi cuenta) porque las reglas que sustituyen llevan
      un id (estudio-componentes.css) y ganarían a un selector más simple.
   2) Sitio: para recuperar la altura que suma la letra, menos aire bajo la
      frase, bajo «Comparar planes mensuales» y bajo el saldo, 2 px menos de
      relleno arriba y abajo en cada tarjeta y la nota de Stripe con
      interlineado más justo. */
@media(max-width:720px){
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-header>span,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-description,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .paysaldo,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .paysaldo small,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-summary span,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-name,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) :is(.rc-amount,.rc-price) small,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-prices s,
 html body .recarga-experiencia:is(#payModal,#modal-recarga) :is(.rc-note,.pay-nota){font-size:12px}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-description{line-height:1.4}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-copy{gap:4px}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-description{margin-bottom:12px}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .cplanes-compare-link{margin-bottom:10px}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .paysaldo{margin-bottom:10px}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-card{padding-block:10px}
 html body .recarga-experiencia:is(#payModal,#modal-recarga) :is(.rc-note,.pay-nota){margin-top:8px;line-height:1.35}
}
/* Pantallas bajas (iPhone SE y similares): la ventana no cabía ni antes ni
   ahora, y se desplaza entera (nunca un panel interior). Centrada, la parte
   que sobraba se cortaba POR ARRIBA (cabecera y X fuera de alcance). Con
   «safe center» sigue centrada cuando cabe y empieza arriba cuando no; los
   navegadores que no lo conocen se quedan con «flex-start» (arriba), que en
   el móvil apenas se nota porque la ventana ocupa casi toda la pantalla.
   Por debajo de 650 px de alto, además, las tres tarjetas miden lo mismo
   aunque en alguna «créditos» tenga que bajar de línea. */
@media(max-width:720px){
 html body.studio-workbench #payModal.on,html body.page-perfil #modal-recarga{align-items:flex-start;align-items:safe center}
}
@media(max-width:720px) and (max-height:650px){
 html body .recarga-experiencia:is(#payModal,#modal-recarga) .rc-grid{grid-auto-rows:1fr}
}
/* Recarga libre en el teléfono y la tableta (10-oct-2026): la tarjeta del importe es una
   sola columna. Las reglas de los paquetes antiguos (hasta 900 px) le daban 2 o 3
   columnas y montaban los importes rápidos sobre «¿Cuánto quieres recargar?», el campo
   y la frase (se veía al pulsar «Recargar créditos» desde Crear sin créditos). */
@media(max-width:900px){.recarga-experiencia .rc-card.rc-libre{grid-template-columns:minmax(0,1fr)}}


/* cocuyo-css: assets/css/estudio-escritorio.css */
/* Escritorio: jerarquía y controles del Estudio avanzado.
   Referencias: Higgsfield; Input Bar (serafimcloud) y Dashboard Sidebar
   (arunjdass) de 21st.dev. Adaptación nativa, sin dependencias ni datos ficticios.
   Los estilos móviles y la geometría de los popovers conservan su contrato. */
/* Ordenador sin saltos al cargar (PageSpeed, 12-oct-2026: CLS 0,281): la puerta
   html[data-estudio-montando] y su esqueleto van en el CSS crítico del <head> de
   crear.html (velocidad, auditoría v340). */
@media (min-width:901px){
 /* El selector de idioma (idioma.js, en DOMContentLoaded) ensanchaba la cabecera
    al llegar: su sitio (84 × 44 px) queda guardado mientras se lee la página
    (html[data-estudio-carga], lo quita estudio-ruta.js en ese mismo momento). */
 html[data-estudio-carga] body.studio-workbench .studio-public-nav .st-language:empty:not([hidden]){min-width:84px;min-height:44px}
 /* Agente: solo con acceso confirmado (agente-beta.js pone data-agente-beta="si"),
    como .f-agente en familia.css. Antes aparecía un momento en la cabecera y
    desaparecía al llegar agente-beta.js, y movía el menú dos veces. */
 html:not([data-agente-beta="si"]) body.studio-workbench .studio-public-nav .sn-agent-entry{display:none!important}
}
/* La fila de «Ayuda con el prompt» (#studioComposerActions, 28 px más el hueco de
   12 px del panel) llega con DOMContentLoaded (estudio-compositor-acciones.js) y
   bajaba los ajustes de Imagen y Video: su sitio queda guardado mientras se lee
   la página, como html[data-hf-carga] en el teléfono (estudio-movil.css). */
@media (min-width:1001px){
 html[data-estudio-carga] body.studio-workbench.studio-simple:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .composer:not(:has(#studioComposerActions)) #parambar{margin-top:40px!important}
}
@media (min-width:1001px){
 body.studio-workbench:not(.experiencia-facil){--side:216px;--studio-editor:378px;font-size:15px}
 body.studio-workbench:not(.experiencia-facil) .side{padding:26px 16px 16px;background:var(--panel)}
 body.studio-workbench:not(.experiencia-facil) .side>.top{padding:0 10px 24px}
 body.studio-workbench:not(.experiencia-facil) .brand .wordmark{font-size:24px;letter-spacing:-.04em}
 body.studio-workbench:not(.experiencia-facil) #toolnav{margin-top:14px;padding-top:8px;border-top:0;gap:5px}
 body.studio-workbench:not(.experiencia-facil) .side>.navlist a{min-height:48px;padding:11px 12px;gap:12px;border:1px solid transparent;border-radius:11px;font-size:14px;font-weight:500;line-height:1.4}
 body.studio-workbench:not(.experiencia-facil) .side>.navlist a>.ic{box-sizing:border-box;width:21px;height:21px;padding:0;border:0;border-radius:0;background:transparent;stroke-width:1.65;color:var(--muted2)}
 body.studio-workbench:not(.experiencia-facil) #toolnav a.active{background:var(--studio-active);border-color:color-mix(in srgb,var(--studio-accent) 22%,transparent);box-shadow:none;font-weight:650}
 body.studio-workbench:not(.experiencia-facil) .side>.navlist a.active>.ic{background:transparent;border:0;color:var(--studio-accent)}
 body.studio-workbench:not(.experiencia-facil) .side .studio-tools-trigger{min-height:48px;padding:11px 12px;gap:12px;border-radius:11px;font-size:14px;font-weight:500}
 body.studio-workbench:not(.experiencia-facil) .side .studio-tools-trigger>.ic:first-child{box-sizing:border-box;width:21px;height:21px;padding:0;border:0;background:transparent;color:var(--muted2)}
 body.studio-workbench:not(.experiencia-facil) .studio-library-nav{margin-top:24px;padding-top:16px}
 body.studio-workbench:not(.experiencia-facil) #studioSessionToggle{min-height:54px;padding:10px 12px;gap:10px;background:transparent;border-radius:11px}
 body.studio-workbench:not(.experiencia-facil) #studioSessionToggle>span{gap:3px}
 body.studio-workbench:not(.experiencia-facil) #studioSessionToggle small{font-size:11px}
 body.studio-workbench:not(.experiencia-facil) #studioSessionToggle strong{font-size:13px;font-weight:550}
 body.studio-workbench:not(.experiencia-facil) .side .foot{gap:10px}
 body.studio-workbench:not(.experiencia-facil) .side .upgbtn{min-height:40px;font-size:12px;font-weight:550;border-radius:10px}
 body.studio-workbench:not(.experiencia-facil) .acct{min-height:66px;padding:11px;border-radius:13px}
 body.studio-workbench:not(.experiencia-facil) .acct-identidad strong{font-size:13px}
 body.studio-workbench:not(.experiencia-facil) .acct .cr{font-size:12px;font-variant-numeric:tabular-nums}
 body.studio-workbench:not(.experiencia-facil) .accmenu .mi{font-size:13px;min-height:44px}
 body.studio-workbench:not(.experiencia-facil) .studio-session-pick{font-size:13px;min-height:42px}

 /* Una mesa, con una zona de escritura abierta y una fila de ajustes clara. */
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]){--studio-dock-gap:24px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa{padding-inline:32px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-in{width:min(1120px,100%);max-height:min(460px,calc(100dvh - 150px));padding:18px 20px 16px;gap:0;border-radius:24px;border-color:var(--border2);background:var(--surface)}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .composer{grid-template-columns:minmax(0,1fr) 188px;grid-template-areas:"refs refs" "attachments attachments" "prompt prompt" "params generate";gap:12px 16px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #ta{min-height:106px;max-height:160px;padding:10px 4px 16px;border:1px solid transparent!important;border-radius:10px;background:transparent!important;font-size:17px;line-height:1.65;letter-spacing:-.012em;box-shadow:none}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #ta:focus{border-color:transparent!important;box-shadow:none}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-in:has(#ta:focus){border-color:color-mix(in srgb,var(--studio-accent) 65%,var(--border2))}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #ta:empty::before{color:var(--muted);opacity:1}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #parambar{gap:8px;padding-top:12px;border-top:1px solid var(--border)}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #headicons{padding-top:12px;border-top:1px solid var(--border)}
 body.studio-workbench:not(.experiencia-facil) #mesa .param{min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:13px;font-weight:500;box-shadow:none;gap:8px;line-height:1.4}
 body.studio-workbench:not(.experiencia-facil) #mesa .param[data-pop="model"]{background:var(--surface2);font-weight:600}
 body.studio-workbench:not(.experiencia-facil) #mesa .param:hover,body.studio-workbench:not(.experiencia-facil) #mesa .param[aria-expanded="true"]{background:var(--surface3);border-color:var(--border2)}
 body.studio-workbench:not(.experiencia-facil) #mesa .param .ic{width:17px;height:17px;flex-basis:17px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #parambar .param{min-height:44px;padding:10px 12px;font-size:13px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #headicons .roundbtn{min-height:48px;padding:12px 16px;border-radius:12px;font-size:14px;letter-spacing:-.015em}
 body.studio-workbench:not(.experiencia-facil) #mesa .studio-generate-cost{font-size:12px;font-variant-numeric:tabular-nums}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid{width:100%;gap:8px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid .refwrap{flex:0 1 auto;min-width:160px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid .refbox{min-height:42px;padding:10px 12px;font-size:13px;border-radius:10px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #attrow{grid-area:attachments;margin:0!important;padding:0 2px 4px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]).modo-imagen #mesa #attrow{margin-left:0!important}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #addImageRefs{min-height:44px;padding:10px 12px;font-size:13px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageRefHint{font-size:11px;line-height:1.5}
 body.studio-workbench:not(.experiencia-facil) #mesa :is(#addImageRefs,.refbox){background:var(--surface2);border-color:var(--border)}
 body.studio-workbench:not(.experiencia-facil) #mesa :is(#addImageRefs,.refbox):hover{background:var(--studio-active);border-color:var(--studio-accent)}
 body.studio-workbench:not(.experiencia-facil) #mesa :is(button,[role="button"]):focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}

 /* Lienzo libre y obras reales: sin repetir cabeceras ni añadir promociones. */
 body.studio-workbench:not(.experiencia-facil) .studio-results-empty h3{font-size:22px;font-weight:550;line-height:1.35;letter-spacing:-.03em;color:var(--text)}
 body.studio-workbench:not(.experiencia-facil) .studio-results-empty p{font-size:14px;line-height:1.65;margin-top:10px}
 body.studio-workbench:not(.experiencia-facil) .studio-results-empty .studio-results-empty-icon{box-sizing:content-box;width:27px;height:27px;padding:17px;margin-bottom:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--muted2)}
 body.studio-workbench:not(.experiencia-facil) .studio-results-empty button{font-size:13px;min-height:42px;padding:10px 14px}
 body.studio-workbench:not(.experiencia-facil) .histbar{padding:8px 0 14px;margin-bottom:8px;gap:12px}
 body.studio-workbench:not(.experiencia-facil) .hist-dia{padding:12px 0 16px}
 body.studio-workbench:not(.experiencia-facil) .hist-dia span{font-size:16px;font-weight:600;letter-spacing:-.02em}
 body.studio-workbench:not(.experiencia-facil) .hist-dia i{font-size:12px}
 body.studio-workbench:not(.experiencia-facil) .jobcard{border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:none;overflow:hidden}
 body.studio-workbench:not(.experiencia-facil) .jobcard:hover,body.studio-workbench:not(.experiencia-facil) .jobcard:focus-within{border-color:var(--border2)}
 body.studio-workbench:not(.experiencia-facil) .studio-job-caption{padding:14px 16px 16px}
 body.studio-workbench:not(.experiencia-facil) .studio-job-caption>span{font-size:12px;font-weight:600;color:var(--text)}
 body.studio-workbench:not(.experiencia-facil) .studio-job-caption p{font-size:13px;line-height:1.55;color:var(--muted2);margin-top:7px}
 body.studio-workbench:not(.experiencia-facil) .jobfila{border-radius:14px;padding:12px;gap:16px}
 body.studio-workbench:not(.experiencia-facil) :is(.jbtn,.bv-accion,.bv-chip,.bv-sel,.bv-busca,.bv-seg){font-size:13px;min-height:42px}
 body.studio-workbench:not(.experiencia-facil) .studio-assets-heading h1{font-size:30px;letter-spacing:-.035em}
 body.studio-workbench:not(.experiencia-facil) .studio-assets-heading p{font-size:14px}
 body.studio-workbench:not(.experiencia-facil) .bv-barra{padding:18px;border-radius:18px}
 body.studio-workbench:not(.experiencia-facil) .studio-asset-caption{font-size:13px;line-height:1.5;padding:12px 4px}
 body.studio-workbench:not(.experiencia-facil) .studio-asset-caption small{font-size:11px}
 body.studio-workbench:not(.experiencia-facil) :is(.bv-cuenta,.bv-dia i){font-size:12px}

 /* Selección de modelo y menús con la misma escala tipográfica. */
 body.studio-workbench:not(.experiencia-facil) #modal .mbox{width:min(840px,100%);border-radius:24px}
 body.studio-workbench:not(.experiencia-facil) #modal .msearch{min-height:48px;border-color:var(--border);border-radius:12px}
 body.studio-workbench:not(.experiencia-facil) #modal .msearch input{font-size:14px}
 body.studio-workbench:not(.experiencia-facil) #modal .mrow{padding:16px;gap:16px;border-radius:14px}
 body.studio-workbench:not(.experiencia-facil) #modal .mrow .nm{font-size:16px;letter-spacing:-.02em}
 body.studio-workbench:not(.experiencia-facil) #modal .mrow .ds{font-size:13px;line-height:1.55;color:var(--muted2)}
 body.studio-workbench:not(.experiencia-facil) #modal .mrow .spec{font-size:11px;line-height:1.5;padding:4px 8px}
 body.studio-workbench:not(.experiencia-facil) #modal .bdg{font-size:10px}
 body.studio-workbench:not(.experiencia-facil) #modal .mhead{font-size:11px;letter-spacing:.03em}
 body.studio-workbench:not(.experiencia-facil) .studio-model-note{font-size:11px}
 body.studio-workbench:not(.experiencia-facil) #modal .mrow .logo{width:42px;height:42px;flex-basis:42px;border-radius:12px}
 body.studio-workbench:not(.experiencia-facil) .studio-tools-heading p{font-size:13px}
 body.studio-workbench:not(.experiencia-facil) .studio-tools-group button b{font-size:14px}
 body.studio-workbench:not(.experiencia-facil) .studio-tools-group button small{font-size:12px}
 body.studio-workbench:not(.experiencia-facil) .studio-tools-group button em{font-size:11px}
 body.studio-workbench:not(.experiencia-facil) .studio-floating{border-radius:14px}
 body.studio-workbench:not(.experiencia-facil) .studio-floating button{font-size:13px;min-height:40px}
 body.studio-workbench.modo-audio:not(.experiencia-facil) #mesa #ta{font-size:15px;line-height:1.65;min-height:150px;max-height:220px}
 body.studio-workbench.modo-audio:not(.experiencia-facil) #mesa .mesa-in{max-height:calc(100dvh - 112px);border-radius:22px;padding:20px}
 body.studio-workbench.modo-audio:not(.experiencia-facil) #mesa :is(.studio-editor-head,.mesa-top){display:none}
 body.studio-workbench.modo-audio:not(.experiencia-facil) #mesa .modesw button{font-size:13px;min-height:42px}
 body.studio-workbench.modo-audio:not(.experiencia-facil) #mesa .studio-field-heading{font-size:12px}
}
@media (min-width:1001px) and (max-width:1190px){
 body.studio-workbench:not(.experiencia-facil){--side:196px;--studio-editor:350px}
 body.studio-workbench:not(.experiencia-facil) .side{padding-inline:12px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa{padding-inline:22px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-in{padding:16px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .composer{grid-template-columns:minmax(0,1fr) 170px;gap:10px 12px}
}
@media (min-width:1001px) and (max-height:740px){
 body.studio-workbench:not(.experiencia-facil) .side{padding-top:18px}
 body.studio-workbench:not(.experiencia-facil) .side>.top{padding-bottom:12px}
 body.studio-workbench:not(.experiencia-facil) .studio-library-nav{margin-top:12px;padding-top:10px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #ta{min-height:80px;max-height:124px}
}
@media (min-width:1001px) and (max-height:640px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa{padding:0}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-in{max-height:none}
}
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
 body.studio-workbench:not(.experiencia-facil) :is(.side a,.studio-tools-trigger,.jobcard,#studioSessionToggle,#mesa .mesa-in){transition:background-color .16s,border-color .16s,box-shadow .16s}
}

/* Pulido común: botones táctiles, lectura estable y relieve discreto.
   Referencia: Great UI Minimal Buttons · 21st.dev · Saurabh Sharma (MIT). */
body.studio-workbench{color-scheme:dark}
body.studio-workbench :is(.param,.refbox,.upgbtn,.jbtn,.bv-accion,.bv-chip,.bv-sel,.bv-seg,.studio-session-toggle){font-family:var(--font);font-weight:550;line-height:1.4;letter-spacing:-.01em}
body.studio-workbench :is(.param,.refbox,.upgbtn,.jbtn,.bv-accion){box-shadow:inset 0 1px 0 rgb(255 255 255/.045)}
body.studio-workbench #mesa .roundbtn{box-shadow:inset 0 1px 0 rgb(255 255 255/.4),0 2px 6px #0004;font-weight:650}
body.studio-workbench #mesa .roundbtn:disabled{box-shadow:none}
body.studio-workbench #acct{border-color:var(--border2);border-radius:14px;box-shadow:inset 0 1px 0 #ffffff06}
body.studio-workbench #acct .cr{font-variant-numeric:tabular-nums}
body.studio-workbench :is(.accmenu,.mbox,.pop){box-shadow:0 20px 60px #0008,inset 0 1px 0 #ffffff08}
body.studio-workbench .accmenu .mi{min-height:44px;font-size:13px;line-height:1.45;gap:10px;border-radius:9px}
body.studio-workbench .accmenu .mi .val{font-size:12px;color:var(--muted2)}
body.studio-workbench .accmenu .mi:focus-visible{outline:2px solid var(--studio-accent);outline-offset:-2px;background:var(--surface2)}
body.studio-workbench .studio-settings-heading .iconbtn{width:40px;height:40px}
body.studio-workbench .studio-settings-row p,body.studio-workbench .studio-settings-note{font-size:13px;line-height:1.6}
body.studio-workbench .studio-session-heading{font-size:12px}
body.studio-workbench :is(.jerr,.jr-err){line-height:1.65;overflow-wrap:anywhere}
body.studio-workbench .bv-busca::placeholder{color:var(--muted);opacity:1}
body.studio-workbench :is(button,[role="button"]):disabled{cursor:not-allowed}
@media(min-width:1001px){
 body.studio-workbench #btnmascreditos{min-height:42px;font-size:13px}
 body.studio-workbench .accmenu{padding:10px;border-radius:18px}
 body.studio-workbench #modal .mrow .ds{max-width:62ch}
 body.studio-workbench #modal .mrow .spec{font-size:12px}
 body.studio-workbench #modal .mrow.sel{box-shadow:inset 3px 0 0 var(--studio-accent);border-color:var(--border2)}
}
@media(hover:hover){
 body.studio-workbench :is(.upgbtn,.jbtn,.bv-accion):not(:disabled):hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
 body.studio-workbench .bv-accion.viva:not(:disabled):hover{background:var(--lima-clara);color:var(--tinta-sobre-verde)}
}

/* Marcas: mismo verde, proporción y soporte; sin fondos multicolor. */
body.studio-workbench .mrcbox{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--surface2);border:1px solid var(--border2);color:var(--verde-cocuyo);box-shadow:inset 0 1px 0 #ffffff07}
body.studio-workbench .mrcbox .mrc{width:20px;height:20px;display:block}
body.studio-workbench.modo-audio .ap-fila>.mrcbox{color:var(--verde-cocuyo)}
body.studio-workbench .mrow .mrcbox{width:42px;height:42px;flex-basis:42px;border-radius:12px}
body.studio-workbench .mrow .mrcbox .mrc{width:27px;height:27px}
body.studio-workbench .mrow.sel .mrcbox{background:var(--studio-active);border-color:color-mix(in srgb,var(--verde-cocuyo) 35%,var(--border))}
body.studio-workbench #mesa .param .mrcbox{width:24px;height:24px;flex-basis:24px;background:transparent;border:0;box-shadow:none}
body.studio-workbench #mesa .param .mrcbox .mrc{width:21px;height:21px}
body.studio-workbench .pill .mrcbox{width:22px;height:22px;flex-basis:22px}
.studio-model-note{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.5;max-width:58ch}
.studio-model-price{margin-top:9px;color:var(--text);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.studio-model-pending{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.studio-model-pending>summary{display:flex;align-items:center;gap:10px;padding:10px 2px;color:var(--muted);font-size:13px;cursor:pointer;list-style:none}
.studio-model-pending>summary::after{content:'+';margin-left:auto;font-size:19px}
.studio-model-pending[open]>summary::after{content:'−'}
.studio-model-pending>summary span{font-size:11px;border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.studio-model-pending>summary:focus-visible{outline:2px solid var(--studio-accent,#afff2b);outline-offset:3px;border-radius:8px}
.studio-model-pending .mrow.locked{opacity:1}
.studio-model-pending .mrow .logo,.studio-model-pending .mrow .radio{opacity:.5}
.studio-model-pending .mrow .nm{color:var(--muted)}


/* cocuyo-css: assets/css/referencias-iconos.css */
/* Símbolos propios de Cocuyo: encuadre, claqueta y onda con dos luces.
   El modelo decide qué iconos y formatos admite; conserva el selector real. */
body.studio-workbench #mesa .ref-orbits{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;flex:none;padding:4px 7px}
body.studio-workbench #mesa .ref-orb{box-sizing:border-box;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--border2);border-radius:50%;background:radial-gradient(circle at 30% 10%,var(--surface3),var(--surface2) 65%);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text) 10%,transparent),0 5px 12px color-mix(in srgb,var(--bg) 45%,transparent);color:var(--muted2);transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s,border-color .2s}
body.studio-workbench #mesa .ref-orb+.ref-orb{margin-left:-12px}
body.studio-workbench #mesa .ref-orb:nth-child(2){z-index:1;transform:translateY(-3px)}
body.studio-workbench #mesa .ref-orb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
body.studio-workbench #mesa .ref-luz{fill:var(--studio-accent,var(--verde-cocuyo));stroke:none}
body.studio-workbench #mesa :is(.ref-hub,#addImageRefs):is(:hover,:focus-visible) .ref-orb{color:var(--text);border-color:var(--studio-accent,var(--verde-cocuyo));transform:translateY(-4px)}
body.studio-workbench #mesa :is(.ref-hub,#addImageRefs):is(:hover,:focus-visible) .ref-orb:nth-child(2){transform:translateY(-7px)}
body.studio-workbench #mesa #refgrid .refwrap-media{flex:1 1 100%;min-width:0}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #mesa #refgrid .ref-hub,
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #mesa #addImageRefs{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:100%;min-height:146px;padding:18px 16px;border:1px solid var(--border);border-radius:18px;background:var(--surface2);color:var(--text);font-size:14px;font-weight:500;text-align:center}
body.studio-workbench #mesa #refgrid .ref-hub .refbox-label{align-items:center;text-align:center;gap:6px}
body.studio-workbench #mesa #refgrid .ref-hub .refbox-label small{color:var(--muted2);font-size:12px}
body.studio-workbench #mesa #addImageRefs #imageRefCount{position:absolute;right:12px;top:12px;font-size:10px;font-weight:400;color:var(--muted2);padding:4px 7px;border:1px solid var(--border);border-radius:8px;min-width:0}
body.studio-workbench #mesa #imageRefHint{width:100%;text-align:center;margin:7px 0 0;font-size:11px}
@media(min-width:901px){body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #mesa #refgrid .ref-hub,body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #mesa #addImageRefs{min-height:138px}}
@media(prefers-reduced-motion:reduce){body.studio-workbench #mesa .ref-orb{transition:none!important;transform:none!important}}

/* Límites por tipo: se leen de un vistazo, sin una frase que se corta. */
.refpop .ref-pop-title{display:block;padding:4px 4px 12px;font-size:14px;font-weight:600;color:var(--text)}
.refpop .ref-limits{display:grid;gap:6px;margin-bottom:12px}
.refpop .ref-limit{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:13px;color:var(--muted2)}
.refpop .ref-limit strong{font-weight:550;font-size:12px;color:var(--studio-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.refpop .ref-limit .ref-orbits{display:flex;padding:0}
.refpop .ref-limit .ref-orb{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--studio-accent)}
.refpop .ref-limit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.refpop .ref-limit .ref-luz{fill:currentColor;stroke:none}
.refpop .ref-pop-hint{font-size:12px;line-height:1.6;margin:8px 4px 12px;color:var(--muted2)}
.refpop :is([data-uploadkind],[data-openlib]){display:flex;align-items:center;gap:9px;min-height:44px;padding:11px 10px;font-size:13px;line-height:1.4;border-radius:9px;text-align:left;white-space:normal}
.refpop :is([data-uploadkind],[data-openlib]) .ic{flex:none}
.refpop [data-uploadkind]{background:var(--studio-active);color:var(--studio-accent)}
body.studio-workbench #mesa .refpop .ref-orbits{padding:0}
body.studio-workbench #mesa .refpop .ref-orb{width:26px;height:26px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--studio-accent)}
body.studio-workbench #mesa .refpop .ref-orb svg{width:22px;height:22px}


/* cocuyo-css: assets/css/estudio-referencias.css */
/* Referencias compactas: Higgsfield y Audio Upload Card de isaiahbjork (21st.dev).
   Miniaturas reales, acceso por tipo y vista previa con controles nativos. */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #imageReferenceTray{display:flex;grid-area:refs;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;width:100%;position:relative}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #attrow{flex:0 1 auto;order:0;align-items:center;flex-wrap:wrap!important;max-width:100%;gap:8px!important;margin:0!important;padding:0!important;overflow:visible}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #refgrid{flex:0 0 auto;order:1;align-self:center;width:auto;max-width:100%;margin:0;gap:6px;position:static}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #refgrid .refwrap-compact{flex:0 0 auto;min-width:0;position:static}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #refgrid .ref-add-compact{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;min-width:0;width:auto;min-height:44px;height:44px;padding:10px 12px;border:1px solid var(--border2);border-radius:11px;background:var(--surface2);color:var(--muted2);font:500 12px/1.2 var(--font);box-shadow:none}
body.studio-workbench #mesa .ref-add-compact .ref-orbits{padding:0}
body.studio-workbench #mesa .ref-add-compact .ref-orb{width:19px;height:19px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:inherit}
body.studio-workbench #mesa .ref-add-compact .ref-orb svg{width:19px;height:19px;stroke-width:1.6}
body.studio-workbench #mesa .ref-add-count{font:500 11px/1 var(--font);color:var(--studio-accent);font-variant-numeric:tabular-nums}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #refgrid .ref-add-compact:is(:hover,:focus-visible,[aria-expanded="true"]){border-color:var(--studio-accent);color:var(--text);background:var(--studio-active)}
body.studio-workbench #mesa :is(.ref-add-compact,.attver,.attrol,.attchip .x):focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
body.studio-workbench #mesa .refwrap-compact .refpop:not(.studio-floating){position:absolute;left:0;bottom:calc(100% + 12px);transform:none;width:min(320px,100%);box-sizing:border-box;text-align:left}
body.studio-workbench #mesa .refwrap-compact .ref-pop-title{display:flex;justify-content:space-between;gap:12px}
body.studio-workbench #mesa .refwrap-compact .ref-pop-title b{font-size:12px;color:var(--studio-accent);font-variant-numeric:tabular-nums}
body.studio-workbench #mesa .refpop button:disabled{opacity:.45;cursor:default}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip{position:relative;box-sizing:border-box;flex:0 0 74px;width:74px;height:80px;border:1px solid var(--border2);border-radius:11px;background:var(--surface2);overflow:hidden;box-shadow:none}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip .x{position:absolute;top:3px;right:3px;width:24px;height:24px;padding:4px;z-index:4;border:1px solid var(--border2);border-radius:50%;background:var(--bg);color:var(--text)}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip .attver{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;border-radius:0;background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--text);opacity:1;cursor:pointer}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip .attver svg{width:21px;height:21px;filter:drop-shadow(0 1px 3px var(--bg))}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip .attrol{position:absolute;inset:auto 0 0;width:100%;height:24px;min-height:24px;z-index:3;margin:0;padding:2px 5px;border:0;border-top:1px solid var(--border2);border-radius:0;background:var(--bg);color:var(--text);font:500 10px/1.2 var(--font)}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa :is(.attcuenta,.attrolfijo){display:none}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip[data-kind="audio"]{flex-basis:162px;width:162px;padding:12px 34px 9px 12px}
body.studio-workbench #mesa .attchip[data-kind="audio"] .attico{display:flex;align-items:center;width:25px;height:25px;color:var(--studio-accent)}
body.studio-workbench #mesa .att-media-name{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.2 var(--font);color:var(--text)}
body.studio-workbench #mesa .att-duration{position:absolute;bottom:5px;right:5px;padding:3px 4px;border-radius:4px;background:var(--bg);color:var(--muted2);font:500 10px/1 var(--font);font-variant-numeric:tabular-nums}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .attchip[data-kind="audio"] .attver{inset:8px 36px auto auto;width:28px;height:28px;background:var(--surface3);border-radius:50%}
dialog.att-preview{box-sizing:border-box;position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:min(1000px,94vw);max-width:94vw;height:auto;max-height:90dvh;margin:auto;padding:44px 24px 24px;border:1px solid var(--border2);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px var(--bg)}
dialog.att-preview[open]{display:flex}
dialog.att-preview::backdrop{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px)}
dialog.att-preview :is(img,video){display:block;max-width:100%;max-height:70dvh;object-fit:contain;border-radius:9px}
dialog.att-preview audio{width:min(540px,100%)}
dialog.att-preview p{margin:0;max-width:100%;overflow-wrap:anywhere;font-size:14px;color:var(--muted2)}
dialog.att-preview .attlupax{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:36px;height:36px;padding:8px;border:1px solid var(--border2);border-radius:50%;background:var(--surface2);color:var(--text)}
@media(min-width:1001px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .mesa-in{width:100%;max-height:calc(100dvh - 145px);padding:14px 18px 16px;border-radius:20px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .composer{gap:8px 14px;overflow:visible}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #ta{min-height:48px;max-height:120px;padding:6px 0 10px;font-size:15px;line-height:1.6}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #attrow{max-height:170px;overflow-y:auto;max-width:100%}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #parambar{gap:6px;padding-top:6px;border-top:0}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #parambar .param{min-height:40px;padding:9px 11px;font-size:12px}
}
@media(max-width:1000px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #imageReferenceTray{margin-bottom:12px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #refgrid .ref-add-compact{gap:4px;padding:8px 6px;font-size:11px}
 body.studio-workbench #mesa .ref-add-compact :is(.ref-orb,.ref-orb svg){width:16px;height:16px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .refwrap-compact .refpop:not(.studio-floating){position:fixed;left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:auto;max-height:70dvh;overflow:auto;z-index:200}
}
@media(prefers-reduced-motion:no-preference){body.studio-workbench #mesa .ref-add-compact{transition:background .16s,border-color .16s,color .16s}}



/* cocuyo-css: assets/css/estudio-imagen.css */
/* Imagen: bienvenida provisional y un solo compositor compacto.
   Referencias: Higgsfield + File Attachment de serafimcloud (21st.dev).
   Los controles y las miniaturas conservan sus eventos y límites originales. */
#imageReferenceTray{display:contents}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray{display:flex;grid-area:refs;grid-column:1/-1;grid-row:1;align-items:center;gap:8px;min-width:0;max-width:100%;order:1}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefControls{display:flex;position:relative;align-self:center;flex:0 0 56px;width:56px;gap:0;margin:0;padding:0;order:2}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefControls[hidden]{display:none}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio) #mesa #addImageRefs{box-sizing:border-box;display:grid;place-items:center;width:56px;height:56px;min-height:56px;padding:0;gap:0;border:1px solid var(--border2);border-radius:12px;background:var(--surface2);color:var(--muted2);box-shadow:none}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #addImageRefs:is(:hover,:focus-visible):not(:disabled){color:var(--studio-accent);border-color:var(--studio-accent);background:var(--studio-active)}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefIcons{display:grid;place-items:center}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefIcons .ic{width:22px;height:22px;stroke-width:1.6}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa :is(#imageRefLabel,#imageRefCount){position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefHint{width:auto;margin:0 4px 12px;text-align:left;font-size:12px;line-height:1.6}
body.studio-workbench.modo-imagen:not(.experiencia-facil)[data-studio-mode="image"] #mesa #attrow{flex:0 1 auto;order:1;min-width:0;max-width:calc(100% - 64px);gap:8px!important;margin:0!important;padding:4px 0!important;overflow-x:auto;scrollbar-width:thin}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip{box-sizing:border-box;flex:0 0 56px;width:56px;height:56px;border:1px solid var(--border2);border-radius:10px;overflow:hidden}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip img{width:100%;height:100%;object-fit:cover}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip .x{top:2px;right:2px;width:24px;height:24px;padding:0;border:1px solid #ffffff26;border-radius:50%;background:#141414e6;color:#fff;z-index:3}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip .attver{inset:0;display:grid;place-items:center;width:100%;height:100%;opacity:0;background:#0005;border-radius:0}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip:hover .attver{opacity:1}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa :is(.attrolfijo,.attcuenta){display:none}
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip.up{background:var(--surface2)}
@media(hover:hover) and (pointer:fine){
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip .x{opacity:0;transition:opacity .15s}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip:is(:hover,:focus-within) .x{opacity:1}
}

/* Galería editorial amplia. Las escenas inspiran; no son referencias adjuntas.
   El movimiento de las imágenes sigue el control de estudio-video.js. */
body.studio-workbench .studio-image-welcome{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;width:100%;min-width:0;min-height:360px;padding:24px 20px;text-align:left;overflow:hidden;box-sizing:border-box}
body.studio-workbench .studio-image-gallery{position:relative;width:min(100%,1120px);min-width:0}
body.studio-workbench .studio-image-mood{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;height:auto;margin:0;isolation:isolate}
body.studio-workbench .studio-image-mood>span{position:relative;display:block;min-width:0;min-height:0;aspect-ratio:4/3;margin:0;overflow:hidden;border:1px solid var(--border2);border-radius:16px;background:var(--surface2)}
body.studio-workbench .studio-image-mood img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
body.studio-workbench .studio-image-mood>span:nth-child(1) img{object-position:50% 42%}
body.studio-workbench .studio-image-mood>span::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 84%,transparent));pointer-events:none}
body.studio-workbench .studio-image-mood small{position:absolute;bottom:16px;left:17px;right:12px;z-index:1;color:var(--text);font:550 12px/1.3 var(--font);text-shadow:0 1px 8px var(--bg)}
body.studio-workbench .studio-image-welcome[data-empty-mode="image"] .studio-video-motion{top:12px;right:12px;bottom:auto;width:40px;min-height:40px;padding:10px;background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--text);border:1px solid var(--border2);backdrop-filter:blur(8px)}
body.studio-workbench .studio-welcome-summary{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(100%,1120px);max-width:1120px;text-align:center}
body.studio-workbench:not(.experiencia-facil) .studio-image-welcome h3{margin:0;font:600 clamp(24px,2.4vw,32px)/1.2 var(--font);letter-spacing:-.03em;color:var(--text)}
body.studio-workbench:not(.experiencia-facil) .studio-image-welcome p{max-width:360px;margin:0;font-size:13px;line-height:1.65;color:var(--muted2);text-wrap:pretty}

@media(min-width:1001px){
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa{padding-inline:24px}
 /* Un mismo margen para adjuntos, texto y ajustes. Inspiración de AI Prompt
    Box (johuniq / 21st.dev); conservamos el compositor y eventos de Cocuyo. */
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .mesa-in{width:100%;max-height:calc(100dvh - 145px);padding:12px 16px;border:1px solid var(--border2);border-radius:18px;background:var(--surface);box-shadow:0 12px 40px color-mix(in srgb,var(--bg) 55%,transparent)}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .mesa-in:focus-within{border-color:color-mix(in srgb,var(--text) 22%,transparent)}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer{grid-template-columns:44px minmax(0,1fr) 168px;grid-template-areas:"refs prompt prompt" "limit limit limit" "params params generate";gap:5px 12px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray{--ref-size:56px;grid-area:refs;align-self:start;gap:6px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefControls{flex:0 0 44px;width:44px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefControls #addImageRefs{width:44px;height:44px;min-height:44px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2)}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefIcons .ic{width:18px;height:18px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer:has(.attchip){grid-template-areas:"refs refs refs" "prompt prompt prompt" "limit limit limit" "params params generate"}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray #attrow{max-width:calc(100% - 64px);padding:0!important}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .attchip{width:56px;height:56px;flex-basis:56px;border-radius:10px}
 /* 9-oct-2026: con miniaturas, el botón de añadir mide lo mismo que ellas (56 px). */
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer:has(.attchip) #imageRefControls{flex:0 0 56px;width:56px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer:has(.attchip) #imageRefControls #addImageRefs{width:56px;height:56px;min-height:56px;border-radius:10px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #ta{min-height:44px;max-height:120px;padding:10px 0 6px;margin:0;font-size:15px;line-height:1.55;border-radius:0;color:var(--text);caret-color:var(--studio-accent)}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa :is(#headicons,#parambar){position:static;inset:auto;padding-top:4px;border:0;background:none}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar{gap:8px;align-items:center;background:none}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param{min-height:40px;height:auto;padding:8px 12px;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font:550 13px/1.35 var(--font);box-shadow:none}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param[data-pop="model"]{background:#ffffff0b;border-color:#ffffff1b;color:#fff}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param:is(:hover,:focus-visible,.open){background:#ffffff10;border-color:#ffffff35;color:#fff}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param :is(.ic,.mrc){width:17px;height:17px;flex-shrink:0}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param .car{color:#9e9e9e;font-size:14px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #promptLimit{padding:0;font-size:10px;line-height:1.3;color:var(--muted2)}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #headicons .roundbtn{min-height:44px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:650;box-shadow:none}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio) .studio-image-welcome{min-height:clamp(300px,calc(100dvh - var(--mesa-h,210px) - 112px),900px);padding-block:18px}
}
@media(max-width:1000px){
 body.studio-workbench .studio-image-mood{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;gap:8px}
 body.studio-workbench .studio-image-welcome{min-height:0;gap:22px;padding:18px 8px}
}
@media(max-width:900px){
 body.studio-workbench.modo-imagen:not(.experiencia-facil) .studio-workspace:has(.studio-image-welcome){display:flex;flex-direction:column}
 body.studio-workbench.modo-imagen:not(.experiencia-facil) .studio-results:has(.studio-image-welcome){order:-1;margin:0 0 20px;padding:0;border:0}
 body.studio-workbench.modo-imagen:not(.experiencia-facil) .studio-image-welcome{min-height:0;padding:8px 0;gap:20px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer{min-height:0;gap:0}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray{margin-bottom:10px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #ta{min-height:106px}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #headicons{margin-top:0}
}
@media(max-width:600px){
 body.studio-workbench .studio-image-mood{gap:6px}
 body.studio-workbench .studio-image-mood>span{border-radius:11px}
 body.studio-workbench .studio-image-mood small{font-size:10px;bottom:10px;left:11px}
 body.studio-workbench:not(.experiencia-facil) .studio-image-welcome h3{font-size:24px}
 body.studio-workbench:not(.experiencia-facil) .studio-image-welcome p{font-size:12px;max-width:310px;margin:0}
}
@media(min-width:1001px) and (max-height:740px){
 body.studio-workbench .studio-image-welcome{gap:18px}
}

/* Un compositor táctil compacto, conservando los campos y eventos originales. */
@media(max-width:900px){
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer{padding:12px;border:1px solid var(--border2);border-radius:18px;background:var(--surface);box-shadow:none!important}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray{margin:0 0 8px;gap:8px}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageRefControls{width:auto;flex:0 0 auto}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #addImageRefs{width:44px;height:44px;min-height:44px;border-radius:11px}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #ta{min-height:80px;max-height:28dvh;padding:10px 2px;font-size:16px;line-height:1.5;background:transparent!important;border:0!important;border-radius:8px}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #promptLimit{margin:4px 0 0;padding:0;font-size:10px;line-height:14px;min-height:0;background:transparent}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar{gap:7px;padding:8px 0 0}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar>.param[data-pop="model"]{min-height:44px;padding:10px 12px;margin:0;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar .param:not([data-pop="model"]){flex:1;justify-content:center;min-width:0;min-height:44px;padding:8px 6px;font-size:12px;border-radius:10px}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #parambar>.cost{min-height:0;padding:0;font-size:11px}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #headicons{padding:8px 0 0}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #headicons .roundbtn{min-height:48px;padding:12px;font-size:14px}
}


/* cocuyo-css: assets/css/estudio-video.css */
/* Bienvenida de Video: estructura Empty State de serafimcloud (21st.dev),
   llevada al lenguaje de Imagen con material de Cocuyo y movimiento controlable. */
body.studio-workbench .studio-video-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;position:relative;isolation:isolate;min-height:400px;padding:26px 12px 30px;text-align:center;overflow:hidden}
body.studio-workbench .studio-video-welcome::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 32%,#aff33e09,transparent 62%);pointer-events:none}
.studio-video-mood{position:relative;width:min(640px,96%);height:206px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.studio-video-still{position:absolute;top:25px;width:30%;height:160px;object-fit:cover;border:2px solid var(--border2);border-radius:13px;filter:saturate(.4) brightness(.7)}
.studio-video-still:first-child{left:2%;transform:rotate(-10deg)}
.studio-video-still:nth-child(2){right:2%;transform:rotate(10deg)}
.studio-video-frame{position:relative;z-index:1;width:68%;aspect-ratio:16/9;max-height:206px;overflow:hidden;border:2px solid #3b4038;border-radius:16px;box-shadow:0 16px 40px #0009;background:var(--surface)}
.studio-video-frame video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.studio-video-frame::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#0009);pointer-events:none}
.studio-video-frame>span{position:absolute;left:14px;bottom:14px;z-index:1;color:#fff;font:550 11px/1.2 var(--font);letter-spacing:.13em}
body.studio-workbench .studio-video-welcome .studio-video-motion{position:absolute;right:10px;bottom:8px;z-index:2;display:grid;place-items:center;width:38px;min-height:38px;padding:9px;margin:0;border:1px solid #fff4;border-radius:50%;background:#070a07c9;color:#fff;backdrop-filter:blur(8px)}
.studio-video-motion svg{width:17px;height:17px}
.studio-video-motion[data-playing="true"] .welcome-play,.studio-video-motion:not([data-playing="true"]) .welcome-pause{display:none}
.studio-video-welcome-copy{max-width:540px}
.studio-video-eyebrow{display:block;margin-bottom:10px;color:var(--muted2);font:550 10px/1.4 var(--font);letter-spacing:.16em}
body.studio-workbench:not(.experiencia-facil) .studio-video-welcome h3{margin:0;font:650 clamp(30px,3.3vw,42px)/1.08 var(--font);letter-spacing:-.045em;color:var(--text)}
.studio-video-welcome h3 em{font-style:normal;color:var(--studio-accent)}
body.studio-workbench:not(.experiencia-facil) .studio-video-welcome p{max-width:390px;margin:13px auto 0;font-size:13px;line-height:1.65;color:var(--muted2);text-wrap:balance}
body.studio-workbench .studio-video-welcome [data-studio-focus]{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:18px 0 0;padding:9px 14px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);font:500 12px/1.4 var(--font)}
body.studio-workbench .studio-video-welcome button:is(:hover,:focus-visible){border-color:var(--studio-accent);color:var(--studio-accent)}
body.studio-workbench .studio-video-welcome button:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
@media(min-width:1001px){body.studio-workbench .studio-video-welcome{min-height:clamp(360px,calc(100dvh - var(--mesa-h,220px) - 98px),740px)}}
@media(min-width:1001px) and (max-height:760px){body.studio-workbench .studio-video-welcome{gap:14px;padding-block:14px}.studio-video-mood{height:146px;width:470px}.studio-video-frame{max-height:146px}.studio-video-still{height:118px;top:14px}body.studio-workbench:not(.experiencia-facil) .studio-video-welcome h3{font-size:32px}.studio-video-eyebrow{margin-bottom:7px}body.studio-workbench .studio-video-welcome [data-studio-focus]{margin-top:12px}}
@media(max-width:1000px){body.studio-workbench .studio-video-welcome{min-height:300px;padding:18px 4px;gap:18px}.studio-video-mood{width:min(500px,96%);height:166px}.studio-video-frame{max-height:166px}.studio-video-still{height:132px;top:18px}}
@media(max-width:900px){body.studio-workbench:not(.experiencia-facil)[data-studio-mode="video"] .studio-workspace:has(.studio-video-welcome){display:flex;flex-direction:column}body.studio-workbench:not(.experiencia-facil) .studio-results:has(.studio-video-welcome){order:-1;margin:0 0 20px;padding:0;border:0}body.studio-workbench .studio-video-welcome{min-height:0;padding:12px 0 8px;gap:14px}.studio-video-mood{height:122px;width:min(350px,96%)}.studio-video-frame{width:73%;max-height:122px;border-radius:12px}.studio-video-still{height:94px;top:15px;border-radius:10px}.studio-video-frame>span{font-size:11px;left:9px;bottom:12px}.studio-video-eyebrow{font-size:11px;margin-bottom:7px}body.studio-workbench:not(.experiencia-facil) .studio-video-welcome h3{font-size:28px}body.studio-workbench:not(.experiencia-facil) .studio-video-welcome p{font-size:12px;margin-top:10px;max-width:280px}body.studio-workbench .studio-video-welcome [data-studio-focus]{margin-top:12px;min-height:44px}}
@media(prefers-reduced-motion:no-preference){.studio-video-mood{animation:studio-video-arrive .6s both cubic-bezier(.2,.65,.3,1)}@keyframes studio-video-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* Video ocupa el lienzo con una sola escena en movimiento y referencias propias.
   La variante de Audio conserva su composición y su controlador existentes. */
body.studio-workbench .studio-video-welcome[data-empty-mode="video"]{width:100%;min-width:0;min-height:0;padding:18px 0 24px;gap:26px;text-align:left;box-sizing:border-box}
body.studio-workbench .studio-video-welcome[data-empty-mode="video"]::before{display:none}
.studio-video-welcome[data-empty-mode="video"] .studio-video-mood{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,.85fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,1120px);height:clamp(230px,39dvh,430px);margin:0;animation:none}
.studio-video-welcome[data-empty-mode="video"] .studio-video-frame{grid-column:1;grid-row:1/3;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:1px solid var(--border2);border-radius:16px;box-shadow:none;background:var(--surface2)}
.studio-video-welcome[data-empty-mode="video"] .studio-video-frame video{filter:saturate(.85)}
.studio-video-welcome[data-empty-mode="video"] .studio-video-frame::after{background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 80%,transparent))}
.studio-video-welcome[data-empty-mode="video"] .studio-video-frame>span{left:18px;bottom:19px;right:64px;color:var(--text);font-size:11px;line-height:1.5}
.studio-video-welcome[data-empty-mode="video"] .studio-video-reference{position:relative;grid-column:2;min-width:0;min-height:0;margin:0;border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:var(--surface2)}
.studio-video-welcome[data-empty-mode="video"] .studio-video-reference img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.studio-video-welcome[data-empty-mode="video"] .studio-video-reference::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 88%,transparent));pointer-events:none}
.studio-video-welcome[data-empty-mode="video"] .studio-video-reference figcaption{position:absolute;z-index:1;bottom:13px;left:13px;right:10px;color:var(--text);font:550 11px/1.4 var(--font);text-shadow:0 1px 8px var(--bg)}
body.studio-workbench .studio-video-welcome[data-empty-mode="video"] .studio-video-motion{right:12px;bottom:12px;width:40px;min-height:40px;padding:10px;border-color:var(--border2);background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--text)}
body.studio-workbench:not(.experiencia-facil) .studio-video-welcome[data-empty-mode="video"] h3{font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.2;letter-spacing:-.03em}
body.studio-workbench:not(.experiencia-facil) .studio-video-welcome[data-empty-mode="video"] p{max-width:340px;margin:0;font-size:13px;line-height:1.65;text-wrap:pretty}
@media(min-width:1001px){
 body.studio-workbench .studio-video-welcome[data-empty-mode="video"]{min-height:calc(100dvh - var(--st-top,64px) - 48px);padding:24px 0}
}
@media(min-width:1001px) and (max-width:1199px){
 .studio-video-welcome[data-empty-mode="video"] .studio-video-mood{grid-template-columns:minmax(0,1.8fr) minmax(0,.8fr);height:clamp(240px,38dvh,360px)}
}
@media(max-width:1000px){
 body.studio-workbench .studio-video-welcome[data-empty-mode="video"]{min-height:0;padding:8px 0;gap:22px}
 .studio-video-welcome[data-empty-mode="video"] .studio-video-mood{height:clamp(230px,36vw,350px)}
}
@media(max-width:600px){
 .studio-video-welcome[data-empty-mode="video"] .studio-video-mood{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,2fr) minmax(0,1fr);height:clamp(250px,76vw,360px);gap:6px}
 .studio-video-welcome[data-empty-mode="video"] .studio-video-frame{grid-column:1/3;grid-row:1;border-radius:12px}
 .studio-video-welcome[data-empty-mode="video"] .studio-video-reference{grid-column:auto;grid-row:2;border-radius:10px}
 .studio-video-welcome[data-empty-mode="video"] .studio-video-reference figcaption{font-size:10px;bottom:9px;left:10px}
 .studio-video-welcome[data-empty-mode="video"] .studio-video-frame>span{font-size:11px;left:13px;bottom:18px}
 body.studio-workbench:not(.experiencia-facil) .studio-video-welcome[data-empty-mode="video"] h3{font-size:24px}
 body.studio-workbench:not(.experiencia-facil) .studio-video-welcome[data-empty-mode="video"] p{font-size:12px;max-width:310px}
}

/* Inspiración móvil compacta: vídeo reproducible y dos ejemplos junto al editor. */
@media(max-width:900px){
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"]{padding:4px 0;gap:12px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-heading{padding:0}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-heading h3{max-width:none;font-size:22px;line-height:1.2}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-heading p{max-width:none;margin-top:6px;font-size:12px;line-height:1.45}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-mood{width:100%;height:clamp(135px,37vw,150px);grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-frame{grid-column:1;grid-row:1/3;min-width:0;min-height:0;border-radius:12px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-reference{grid-column:2;grid-row:auto;border-radius:10px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-reference figcaption{left:7px;right:6px;bottom:6px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-reference figcaption b{margin-bottom:2px;font-size:10px;line-height:1.2}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-reference figcaption span{font-size:11px;line-height:1.3}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-frame>.ej-model{top:8px;left:8px;max-width:calc(100% - 16px);padding:4px 5px;font-size:11px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-video-title{left:10px;right:56px;bottom:10px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-video-title b{font-size:16px;line-height:1.15}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-video-title small{margin-top:4px;font-size:11px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .studio-video-motion{width:44px;height:44px;min-height:44px;right:7px;bottom:7px;padding:11px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-video-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,145px);align-items:center;gap:10px}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-video-footer p{max-width:none;margin:0;font-size:11px;line-height:1.4}
 body.studio-workbench.studio-simple .studio-video-welcome[data-empty-mode="video"] .ej-video-footer .ej-action{min-width:0;min-height:44px;padding:8px 10px;gap:7px;font-size:11px;line-height:1.35;white-space:normal}
 body.studio-workbench.studio-simple[data-studio-mode="video"] .studio-results:has(.studio-video-welcome[data-empty-mode="video"]){margin-bottom:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"] .studio-workspace:has(.studio-video-welcome[data-empty-mode="video"]){gap:14px}
}


/* cocuyo-css: assets/css/inspiracion.css */
/* Movimiento discreto: las escenas nunca sustituyen resultados del usuario. */
body.studio-workbench .studio-audio-welcome .studio-video-frame{width:90%;max-width:366px}
body.studio-workbench .studio-audio-welcome .studio-video-mood{width:min(430px,96%)}
.studio-audio-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.studio-audio-welcome .studio-video-welcome-copy{width:min(100%,460px)}
body.studio-workbench .studio-audio-welcome .studio-audio-actions button{flex:0 0 auto;white-space:nowrap}
body.studio-workbench .studio-audio-actions [data-studio-focus]{margin:0}
body.studio-workbench .studio-audio-welcome .studio-audio-sample{display:inline-flex;width:auto;height:auto;min-height:40px;gap:8px;margin:0;padding:9px 13px;border:1px solid var(--border2);border-radius:10px;background:transparent;color:var(--muted2);font:500 12px/1.4 var(--font)}
body.studio-workbench .studio-audio-welcome .studio-audio-sample[hidden]{display:none}
.studio-audio-sample .vz-p{display:none}
.studio-audio-sample.on .vz-t{display:none}
.studio-audio-sample.on .vz-p{display:block}
body.studio-workbench .studio-audio-welcome .studio-audio-sample.on{color:var(--studio-accent);border-color:var(--studio-accent)}
body.studio-workbench .studio-image-welcome .studio-video-motion{position:absolute;right:max(16px,calc(50% - 280px));top:22px;display:grid;place-items:center;width:38px;min-height:38px;margin:0;padding:9px;border:1px solid var(--border2);border-radius:50%;background:var(--surface);color:var(--muted2);z-index:5}
body.studio-workbench .studio-image-welcome .studio-video-motion:is(:hover,:focus-visible){color:var(--studio-accent);border-color:var(--studio-accent)}
body.studio-workbench .studio-image-welcome .studio-video-motion:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
.studio-image-mood img{animation:inspiration-pan 12s ease-in-out infinite alternate;animation-play-state:paused;transform:scale(1.025)}
.studio-image-mood>span:nth-child(even) img{animation-direction:alternate-reverse;animation-delay:-4s}
.studio-image-welcome.inspiration-moving .studio-image-mood img{animation-play-state:running}
@keyframes inspiration-pan{from{transform:scale(1.025) translateY(1%)}to{transform:scale(1.15) translateY(-2%)}}
@media(max-width:900px){
 body.studio-workbench:not(.experiencia-facil)[data-studio-mode="audio"] .studio-workspace:has(.studio-audio-welcome){display:flex;flex-direction:column}
 body.studio-workbench:not(.experiencia-facil)[data-studio-mode="audio"] .studio-results:has(.studio-audio-welcome){order:-1;margin:0 0 20px;padding:0;border:0}
 body.studio-workbench .studio-image-welcome .studio-video-motion{width:32px;min-height:32px;padding:7px;top:0;right:4px}
 body.studio-workbench .studio-audio-actions{margin-top:12px}
 body.studio-workbench .studio-audio-welcome .studio-audio-sample{min-height:44px}
}


/* cocuyo-css: assets/css/estudio-audio.css */
/* Referencia observada: Higgsfield Audio, escritorio y 390 px (12-sep-2026).
   Tarjetas, panel fijo y espacios; identidad Cocuyo. */
body.studio-workbench.audio-redesign:not(.experiencia-facil){--studio-editor:340px}
body.studio-workbench.audio-redesign:not(.experiencia-facil) #pg-home>.studio-wrap{max-width:none;padding:20px 24px 36px}
body.studio-workbench.audio-redesign:not(.experiencia-facil) .studio-workspace{display:grid;grid-template-columns:var(--studio-editor) minmax(0,1fr);gap:28px}
body.studio-workbench.audio-redesign .studio-editor-slot{top:18px}
body.studio-workbench.audio-redesign #pg-home :is(.studio-editor-head,.mesa-top){display:none}
/* La cabecera no se ve, pero su h1 («Estudio de audio») sigue para lectores de pantalla. */
body.studio-workbench.audio-redesign #pg-home .studio-workhead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.studio-workbench.audio-redesign #pg-home .studio-workhead button{display:none}
/* El alto descuenta la cabecera fija (auditoría v338): con «100dvh − 38px» el panel
   (y el margen de abajo) pasaba del borde de la ventana y «Generar voz» quedaba fuera (1366×600, 1280×800). */
body.studio-workbench.audio-redesign:not(.experiencia-facil) #mesa .mesa-in{max-height:calc(100dvh - var(--st-top,64px) - 56px);padding:16px;border-radius:18px;border:1px solid #292a28;background:#121311;scrollbar-width:thin;scrollbar-color:#3c3f37 transparent}
body.studio-workbench.audio-redesign #mesa .composer{display:flex;flex-direction:column;gap:12px}
/* «Elige un modelo» de Audio (sin el selector compacto de Imagen y Vídeo): por encima de
   la cabecera, que queda atenuada bajo el velo, como en Imagen y Vídeo (auditoría v338).
   Con z-index 100 la ventana se metía bajo la cabecera (105), que seguía clicable. */
body.studio-workbench.modo-audio #modal.on:not(.model-picker){z-index:200}
body.studio-workbench.audio-redesign #mesa .audio-type-tabs{display:grid;grid-template-columns:1.1fr 1fr .85fr;gap:4px;margin:0 0 2px;border-bottom:1px solid #30312e;order:-2}
.audio-type-tabs button{position:relative;background:none;border:0;border-radius:0;padding:9px 0 13px;color:#989d94;font:500 12px/1.3 var(--font);min-height:52px;white-space:nowrap}
.audio-type-tabs button.active{color:#fafcf7;border-bottom:2px solid var(--lima)}
/* Pestañas «Próximamente»: claramente inactivas (atenuadas, sin cursor de mano ni hover). */
.audio-type-tabs button:disabled{color:var(--gris-humo);cursor:not-allowed;opacity:.5;background:none}
.audio-type-tabs button:disabled:hover{color:var(--gris-humo);background:none}
.audio-type-tabs small{display:block;font-size:11px;letter-spacing:.02em;margin-top:4px;color:#7f8775}
body.studio-workbench.audio-redesign #mesa .ap-voz{isolation:isolate;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-content:end;gap:0 12px;min-height:174px;padding:20px 17px;border:1px solid hsla(var(--h),28%,63%,.3);border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 25% 15%,hsl(var(--h) 40% 48% / .52),transparent 75%),linear-gradient(135deg,hsl(var(--h) 23% 25%),#151810 85%)}
body.studio-workbench.audio-redesign #mesa .ap-voz::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 80% -10%,hsl(var(--h) 55% 76% / .3),transparent 70%);pointer-events:none}
body.studio-workbench.audio-redesign #mesa .ap-vozcambia{position:absolute;right:12px;top:12px;min-height:34px;padding:7px 12px;background:#0a10093d;border:1px solid #ffffff35;border-radius:8px;color:#fff;font:500 11px var(--font);backdrop-filter:blur(8px)}
body.studio-workbench.audio-redesign #mesa .ap-vozplay{position:static;grid-column:1;grid-row:1;align-self:center;width:44px;height:44px;border-radius:50%;color:#fff;background:#ffffff15;border:1px solid #ffffff5c}
body.studio-workbench.audio-redesign #mesa .ap-vozplay.on{color:var(--lima);border-color:var(--lima)}
body.studio-workbench.audio-redesign #mesa .ap-voztxt{grid-column:2;grid-row:1;min-width:0;padding:0;gap:3px}
body.studio-workbench.audio-redesign #mesa .ap-vozlabel{display:none}
body.studio-workbench.audio-redesign #mesa .ap-voztxt b{display:block;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.025em;color:#fff;overflow:hidden;text-overflow:ellipsis}
body.studio-workbench.audio-redesign #mesa .ap-voztxt small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font-size:11px;line-height:1.5;color:#e1e6dd}
body.studio-workbench.audio-redesign #mesa .ap-rot{margin:3px 0 -5px;font-size:12px;font-weight:550;color:#e4e7df}
body.studio-workbench.audio-redesign:not(.experiencia-facil) #mesa #ta{min-height:144px;max-height:230px;margin:0;padding:14px;border:1px solid #35372f!important;border-radius:12px;background:#1c1e19!important;box-shadow:none;font-size:14px;line-height:1.6;letter-spacing:0}
body.studio-workbench.audio-redesign #mesa #ta:focus{outline:0;border-color:#9ba77d!important}
body.studio-workbench.audio-redesign #mesa .ap-nota{margin:-6px 0 0;padding:0 2px;border:0;text-align:right;font-size:10px;line-height:1.5;color:#a3a99a}
body.studio-workbench.audio-redesign #mesa .ap-nota.pasa{color:#ff9e99}
body.studio-workbench.audio-redesign #mesa .ap-reserva-nota{margin:0;padding:0 2px;font-size:11px;line-height:1.5;color:#a3a99a}
body.studio-workbench.audio-redesign #mesa #parambar{gap:10px;margin:0;padding:0;border:0}
body.studio-workbench.audio-redesign #mesa :is(.ap-fila,.ap-idioma){min-height:50px;padding:11px 12px;border-radius:11px;border:1px solid #30332b;background:#1a1c17;gap:10px;font-size:11px}
body.studio-workbench.audio-redesign #mesa .ap-fila[data-pop="model"]{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;grid-template-rows:auto auto;gap:3px 10px;text-align:left}
body.studio-workbench.audio-redesign #mesa .ap-fila[data-pop="model"]>.mrcbox{grid-row:1/3;width:30px;height:30px;border:0;border-radius:8px;background:#ffffff09}
body.studio-workbench.audio-redesign #mesa .ap-fila[data-pop="model"]>span:not(.mrcbox){grid-column:2;font-size:10px;color:#a7ac9f}
body.studio-workbench.audio-redesign #mesa .ap-fila[data-pop="model"]>b{grid-column:2;grid-row:2;margin:0;max-width:none;font-size:12px;font-weight:550;white-space:normal;color:#f4f6ef}
body.studio-workbench.audio-redesign #mesa .ap-fila[data-pop="model"]>.ap-car{grid-column:3;grid-row:1/3;align-self:center}
body.studio-workbench.audio-redesign #mesa .ap-idioma{order:initial;background:transparent;min-height:38px;padding:4px 2px;border:0}
body.studio-workbench.audio-redesign #mesa .ap-idioma select{max-width:65%;min-height:34px;background:#20221c;color:#e8eadf;border:1px solid #34382d;border-radius:7px;padding:5px 8px;font-size:11px}
body.studio-workbench.audio-redesign #mesa .ap-avwrap{margin:0;border:0;padding:0}
body.studio-workbench.audio-redesign #mesa .ap-avwrap>.ap-fila{border:0;border-radius:0;background:transparent;min-height:42px;padding:8px 2px;color:#d5d9ce}
body.studio-workbench.audio-redesign #mesa .ap-avbody{padding:8px 2px 12px}
body.studio-workbench.audio-redesign #mesa .ap-av span{font-size:11px}
body.studio-workbench.audio-redesign #mesa .ap-reset{font-size:11px;min-height:34px}
body.studio-workbench.audio-redesign .ap-output{display:flex;justify-content:space-between;gap:10px;padding:8px 0 12px;color:#a9b19d;font-size:11px}
body.studio-workbench.audio-redesign .ap-output b{color:#e3e8d9;font-weight:500}
body.studio-workbench.audio-redesign #mesa .ap-gen{position:sticky;bottom:-16px;z-index:4;flex:none;min-height:48px;margin:4px 0 0;border-radius:10px;border:0;background:var(--lima);color:#162006;box-shadow:0 12px 0 12px #121311;font-size:14px;font-weight:650}
body.studio-workbench.audio-redesign #mesa .ap-gen:disabled{background:#343b27;color:#aeb69f;cursor:default;filter:none;transform:none}
body.studio-workbench.audio-redesign #mesa .ap-gen b{padding-left:10px;border-left:1px solid currentColor;font-size:12px;gap:4px}
body.studio-workbench.audio-redesign #mesa .ap-gen b[hidden]{display:none!important}
body.studio-workbench.audio-redesign :is(button,input,select):focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.audio-form-heading{display:none}
.audio-feed-toolbar{display:flex;align-items:center;gap:16px;padding:0 0 20px;border-bottom:1px solid #22251f}
.audio-feed-toolbar [role="tablist"]{display:flex;gap:4px;padding:4px;background:#171914;border:1px solid #2c3027;border-radius:10px}
.audio-feed-toolbar [role="tab"]{padding:8px 13px;min-height:36px;background:transparent;border:0;border-radius:6px;color:#9ea594;font-size:12px;font-weight:500}
.audio-feed-toolbar [role="tab"][aria-selected="true"]{background:#2e3327;color:#f5f7ee}
.audio-back-create{display:none}
body.studio-workbench.audio-redesign #genout[hidden]{display:none!important}
body.studio-workbench.audio-redesign #genwrap{max-width:none!important;width:100%;margin:0!important}
body.studio-workbench.audio-redesign .studio-results{padding:0;min-width:0}
body.studio-workbench.audio-redesign #genwrap .histbar{display:none}
body.studio-workbench.audio-redesign .hist-dia{font-family:var(--font);font-weight:550}
body.studio-workbench.audio-redesign .hist-dia>span{font-family:var(--font)}
body.studio-workbench.audio-redesign .fila-aud{border-radius:14px;background:#161913;border-color:#30362a}
body.studio-workbench.audio-redesign .fila-aud .fa-foto{border-radius:50%;background:radial-gradient(circle at 30% 20%,hsl(var(--h) 45% 66%),hsl(var(--h) 26% 29%) 60%,#151a11)}
body.studio-workbench.audio-redesign .fila-aud .fa-foto b{display:none}
body.studio-workbench.audio-redesign .audio-guide{display:block;padding:44px 0 24px;max-width:100%;min-height:0;text-align:left}
.audio-guide-heading{margin:0 0 30px}
.audio-guide-heading>span{font-size:10px;letter-spacing:.12em;color:#a4ae95}
body.studio-workbench.audio-redesign .audio-guide h3{font-size:clamp(24px,2.4vw,36px);line-height:1.2;font-weight:600;letter-spacing:-.035em;margin:10px 0;color:#f5f7f0}
body.studio-workbench.audio-redesign .audio-guide-heading p{font-size:13px;line-height:1.6;color:#a3aa9a;margin:0;max-width:none}
.audio-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.audio-guide-card{min-width:0;display:flex;flex-direction:column;background:#131510;border:1px solid #2d3226;border-radius:16px;overflow:hidden}
.audio-guide-copy{padding:22px 20px 0}
.audio-guide-copy>span{font-size:10px;letter-spacing:.05em;color:#8b967c}
.audio-guide-copy h4{margin:10px 0 8px;font-size:18px;font-weight:550;letter-spacing:-.02em;color:#f2f5ed}
body.studio-workbench.audio-redesign .audio-guide-copy p{font-size:12px;line-height:1.6;color:#a3aa9a;margin:0}
.audio-guide-voices{display:flex;flex-direction:column;gap:8px;padding:22px 16px}
body.studio-workbench.audio-redesign .audio-guide-voice{display:flex;gap:10px;align-items:center;width:100%;padding:10px;background:#1e211a;border:1px solid #363c2c;border-radius:10px;margin:0;text-align:left}
.audio-guide-voice>i{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 20%,hsl(var(--voice-h) 58% 76%),hsl(var(--voice-h) 32% 36%) 55%,#13150e)}
.audio-guide-voice>span{min-width:0;flex:1}.audio-guide-voice b{display:block;font-size:12px;font-weight:550;color:#f2f5eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-guide-voice small{display:block;font-size:10px;color:#a5ad9a;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:3px}
.audio-guide-voice .ic{flex:none;width:13px;color:#d0d8bf}
.audio-guide-voice.on .vz-t{display:none}.audio-guide-voice.on .vz-p{display:block!important}
body.studio-workbench.audio-redesign .audio-guide-voice.on{border-color:var(--lima)}
body.studio-workbench.audio-redesign .audio-guide .studio-video-mood{width:100%;height:auto;min-height:0;margin:22px 0;aspect-ratio:1.75;display:block;padding:0}
body.studio-workbench.audio-redesign .audio-guide .studio-video-frame{position:relative;inset:auto;transform:none;width:100%;max-width:none;height:100%;aspect-ratio:1.75;margin:0;border:0;border-radius:0;box-shadow:none}
body.studio-workbench.audio-redesign .audio-guide .studio-video-frame video{width:100%;height:100%;object-fit:cover}
body.studio-workbench.audio-redesign .audio-guide .studio-video-motion{width:36px;height:36px;min-height:36px;margin:0;padding:8px;right:12px;bottom:12px}
body.studio-workbench.audio-redesign .audio-guide-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 0 0;padding:14px 20px;min-height:48px;border:0;border-top:1px solid #2c3223;border-radius:0;background:transparent;color:#dce5c9;font-size:12px;font-weight:500}
body.studio-workbench.audio-redesign .audio-guide-action:hover{background:#23291b;color:var(--lima)}
/* Catálogo real de voces: tarjetas con una selección y una escucha separadas. */
.audio-redesign .vz-caja{width:min(760px,100%);max-height:min(85dvh,780px);border-radius:20px;background:#131511;border-color:#33392b}
.audio-redesign .vz-top{padding:24px 24px 10px;gap:10px}
.audio-redesign #vzTitulo{font-family:var(--font);font-size:24px;font-weight:550;letter-spacing:-.035em}
.audio-redesign .vz-subtitle{margin:0 24px 20px;color:#a3ac96;font-size:13px;line-height:1.6}
.audio-redesign .vz-busca{margin:0 24px 18px;padding:12px;background:#1e2219;border:1px solid #333b28;border-radius:10px}
.audio-redesign .vz-busca input{font-size:13px}
.audio-redesign .vz-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 24px 24px;overflow:auto}
.audio-redesign .vz-fila{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:1fr auto;gap:12px 10px;align-items:center;padding:14px 12px;border:1px solid #343b2b;border-radius:12px;background:#1d2217;min-height:124px}
.audio-redesign .vz-fila:hover{background:#272e1f;border-color:#5f6e48}
.audio-redesign .vz-fila.on{border-color:var(--lima);background:#29341d}
.audio-redesign .vz-fila .vz-foto{width:38px;height:38px;box-shadow:inset -6px -8px 14px #0005;border:1px solid #ffffff30;border-radius:50%;background:radial-gradient(circle at 30% 20%,hsl(var(--h) 55% 79%),hsl(var(--h) 35% 43%) 60%,#15190f)}
.audio-redesign .vz-foto b{display:none}
.audio-redesign .vz-fila .vz-txt{min-width:0}.audio-redesign .vz-txt b{font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-redesign .vz-txt small{font-size:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#aeb69f}
.audio-redesign .vz-fila .vz-play{grid-column:1/-1;justify-self:start;display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:32px;padding:0;border:0;border-radius:0;background:none;margin:0;color:#c4d1b0}
.audio-redesign .vz-play .vz-wave{flex:1;height:22px;opacity:.55}.audio-redesign .vz-play.on .vz-wave{color:var(--lima);opacity:1}
.audio-redesign .vz-nada{grid-column:1/-1;padding:32px;text-align:center}
/* Ventanas bajas del ordenador: tarjeta de voz y guion más bajos, como Vídeo. */
@media(min-width:901px) and (max-height:760px){
 body.studio-workbench.audio-redesign:not(.experiencia-facil) #pg-home>.studio-wrap{padding-top:14px;padding-bottom:14px}
 body.studio-workbench.audio-redesign:not(.experiencia-facil) #mesa .mesa-in{max-height:calc(100dvh - var(--st-top,64px) - 28px)}
 body.studio-workbench.audio-redesign #mesa .composer{gap:10px}
 body.studio-workbench.audio-redesign #mesa .ap-voz{min-height:118px;padding:14px 15px}
 body.studio-workbench.audio-redesign:not(.experiencia-facil) #mesa #ta{min-height:96px}
}
@media(min-width:1500px){body.studio-workbench.audio-redesign:not(.experiencia-facil){--studio-editor:364px}.audio-guide-grid{gap:22px}.audio-guide-card{min-height:350px}}
@media(min-width:901px) and (max-width:1190px){body.studio-workbench.audio-redesign:not(.experiencia-facil){--studio-editor:310px}body.studio-workbench.audio-redesign:not(.experiencia-facil) #pg-home>.studio-wrap{padding:16px}.audio-guide-grid{grid-template-columns:1fr}.audio-guide-card{max-width:500px}}
@media(max-width:900px){
 body.studio-workbench.audio-redesign:not(.experiencia-facil) #pg-home>.studio-wrap{padding:10px 14px 30px}
 body.studio-workbench.audio-redesign:not(.experiencia-facil) .studio-workspace{display:block}
 body.studio-workbench.audio-redesign:not(.experiencia-facil) #mesa .mesa-in{max-height:none;overflow:visible;padding:14px;border-radius:16px}
 body.studio-workbench.audio-redesign .studio-editor-slot{max-width:580px;margin:auto}
 body.studio-workbench.audio-redesign #mesa .audio-form-heading{display:flex;align-items:center;justify-content:space-between;order:-3;gap:10px;padding:0 0 2px}
 .audio-form-heading>span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:550}.audio-form-heading button{background:transparent;border:0;color:#c6d3ae;min-height:34px;font-size:12px}
 body.studio-workbench.audio-redesign #mesa .ap-voz{min-height:175px}
 body.studio-workbench.audio-redesign #mesa .ap-gen{bottom:calc(var(--sm-bottom,76px) + env(safe-area-inset-bottom,0px));box-shadow:0 7px 0 7px #121311}
 body.studio-workbench.audio-redesign .studio-results{margin:0!important;order:initial!important;border:0!important;padding:0!important}
 body.studio-workbench.audio-redesign[data-audio-mobile="create"] .studio-results{display:none}
 body.studio-workbench.audio-redesign[data-audio-mobile="history"] .studio-editor-slot{display:none}
 .audio-back-create{display:block;background:transparent;border:0;color:#d9e2ca;font-size:12px;min-height:40px}
 .audio-feed-toolbar{flex-wrap:wrap;justify-content:space-between;gap:10px;padding:0 0 12px}
 body.studio-workbench.audio-redesign .audio-guide{padding:26px 0}
 .audio-guide-grid{grid-template-columns:1fr}.audio-guide-heading{margin-bottom:22px}
 .audio-guide-card{max-width:580px}.audio-guide-voices{padding-block:18px}.audio-guide .studio-video-mood{max-height:220px}
 .audio-redesign .vz-modal{padding:12px}.audio-redesign .vz-caja{max-height:90dvh;border-radius:18px}
 .audio-redesign .vz-lista{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px 18px;gap:9px}
 .audio-redesign .vz-top{padding:20px 16px 8px}.audio-redesign #vzTitulo{font-size:22px}
 .audio-redesign .vz-subtitle{margin:0 16px 16px;font-size:12px}.audio-redesign .vz-busca{margin:0 14px 15px}
 .audio-redesign .vz-fila{grid-template-columns:30px minmax(0,1fr);padding:11px 9px;gap:10px 7px}.audio-redesign .vz-fila .vz-foto{width:30px;height:30px}
}
@media(max-width:360px){body.studio-workbench.audio-redesign:not(.experiencia-facil) #pg-home>.studio-wrap{padding-inline:8px}body.studio-workbench.audio-redesign:not(.experiencia-facil) #mesa .mesa-in{padding:12px}.audio-type-tabs button{font-size:11px}.audio-redesign .vz-lista{grid-template-columns:1fr}.audio-redesign .vz-fila{min-height:105px}}

/* Pantallas táctiles: Cambiar voz, Idioma e Historial con objetivo de 44 px
   (antes 34). En escritorio con ratón no cambia nada. */
@media(pointer:coarse){
 body.studio-workbench.audio-redesign #mesa :is(.ap-vozcambia,.ap-idioma select),
 body.studio-workbench #mesa .audio-form-heading [data-audio-history]{min-height:44px}
}


/* cocuyo-css: assets/css/estudio-prompt.css */
#promptLimit{grid-area:limit;order:5;max-width:100%;padding:0 2px;margin:0 0 8px;font:500 11px/1.5 var(--font);text-align:left;overflow-wrap:anywhere}
#promptLimit[hidden]{display:none!important}
#promptLimit.exceso{color:#ff9c9c;text-align:left}
@media(min-width:1001px){body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa .composer:has(#promptLimit:not([hidden])){grid-template-areas:"refs refs" "attachments attachments" "prompt prompt" "limit limit" "params generate"}#promptLimit{margin:-5px 0 0}}
@media(max-width:900px){body.studio-workbench:not(.experiencia-facil) #mesa #promptLimit{order:3;margin:0;padding:6px 16px;background:var(--surface2);border-inline:1px solid var(--border)}}


/* cocuyo-css: assets/css/estudio-creditos.css */
/* Saldo personal: cantidad legible y un único icono, sin barra ni leyendas. */
body.studio-workbench #btnmascreditos,
body.studio-workbench.studio-simple .studio-public-nav #btnmascreditos{
 display:inline-flex;flex-direction:row;align-items:center;justify-content:center;
 gap:8px;width:auto;min-width:0;height:40px;min-height:40px;padding:0 12px;
 border:1px solid var(--border);border-radius:12px;background:var(--surface);
 color:var(--text);box-shadow:none;white-space:nowrap;cursor:pointer;
 transition:background .16s ease,border-color .16s ease;
}
body.studio-workbench #btnmascreditos[hidden]{display:none!important}
body.studio-workbench #btnmascreditos:hover{background:var(--surface2);border-color:var(--border2);transform:none}
body.studio-workbench #btnmascreditos:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
body.studio-workbench #btnmascreditos .credit-wallet-icon{display:block;width:19px;height:19px;flex:0 0 19px;color:var(--lima);fill:none}
body.studio-workbench #btnmascreditos [data-credit-value],
body.studio-workbench.studio-simple .studio-public-nav #btnmascreditos [data-credit-value]{
 margin:0;font-family:inherit;font-size:15px;font-weight:650;line-height:1;
 letter-spacing:.01em;font-variant-numeric:tabular-nums;color:inherit;white-space:nowrap;
}
body.studio-workbench #btnmascreditos:is([data-credit-state=low],[data-credit-state=empty]),
body.studio-workbench.studio-simple .studio-public-nav #btnmascreditos:is([data-credit-state=low],[data-credit-state=empty]),
body.studio-workbench #btnmascreditos:is([data-credit-state=low],[data-credit-state=empty]) .credit-wallet-icon{color:#ff818a}
body.studio-workbench #btnmascreditos[data-credit-state=unavailable] .credit-wallet-icon{color:var(--muted)}
body.studio-workbench #btnmascreditos :is(.credit-meter,.credit-wallet-caption,[data-credit-label],[data-credit-alert]){display:none}
body.studio-workbench .acct .cr{display:none!important}
@media(prefers-reduced-motion:reduce){body.studio-workbench #btnmascreditos{transition:none}}


/* cocuyo-css: assets/css/estudio-explorar.css */
/* Navegación Cocuyo: patrones de interacción de 21st.dev, diseño propio. */
body.studio-workbench{--st-top:72px}
body.studio-workbench .studio-public-nav{position:fixed;inset:0 0 auto;z-index:105;display:flex!important;align-items:center;gap:28px;height:var(--st-top);min-height:0;padding:0 28px;border-bottom:1px solid var(--border);background:#101110;color:var(--text);backdrop-filter:blur(18px)}
.studio-public-nav [hidden],.studio-join:not([open]){display:none!important}
.studio-public-nav button,.studio-public-nav a{font-family:inherit;color:inherit;cursor:pointer;text-decoration:none}
.studio-public-nav button{background:none;border:0}
.st-brand-slot{flex:none}.studio-public-nav .brand{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--text)}
.studio-public-nav .brand .wordmark{font-size:24px;font-weight:750;letter-spacing:-1.1px}.studio-public-nav .cocuyologo{width:27px;height:27px}
.st-nav{display:flex;align-items:stretch;gap:24px;height:100%;white-space:nowrap}.st-nav>a,.st-nav-group{display:flex;align-items:center;position:relative}
.st-nav a{font-size:14px;font-weight:550;padding:12px 0;color:#b9bcb7}.st-nav a:hover,.st-nav a[aria-current=page]{color:#f5f7f2}
.st-nav a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--studio-accent);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.st-nav a:hover::after,.st-nav a[aria-current=page]::after{transform:scaleX(1)}
.st-nav-group>button{display:grid;place-items:center;width:28px;height:42px;padding:5px;color:#92978f}.st-nav-group>button .ic{width:13px;height:13px;transition:transform .18s}.st-nav-group>button[aria-expanded=true] .ic{transform:rotate(180deg);color:var(--studio-accent)}
.st-actions{display:flex;align-items:center;gap:15px;margin-left:auto;white-space:nowrap}.st-prices{font-size:13px;font-weight:550}.st-guest{display:flex;align-items:center;gap:15px;font-size:13px;font-weight:550}/* «Empieza a crear»: el mismo botón lima de la portada (.cn-start). */.studio-public-nav .st-guest>a.st-start{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;min-height:40px;padding:0 18px!important;border:1px solid var(--verde-cocuyo);border-radius:var(--radio-pill,999px);background:var(--verde-cocuyo);color:var(--tinta-sobre-verde)!important;font:600 13px/1 var(--fuente);font-size:13px!important;font-weight:600!important;letter-spacing:0;white-space:nowrap;text-decoration:none;transition:background var(--trans-rapida,150ms ease),border-color var(--trans-rapida,150ms ease)}.studio-public-nav .st-guest>a.st-start:hover{background:var(--lima-clara);border-color:var(--lima-clara)}.studio-public-nav .st-guest>a.st-start:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}@media(prefers-reduced-motion:reduce){.studio-public-nav .st-guest>a.st-start{transition:none}}
.st-account{display:flex;align-items:center;gap:8px;font-size:13px}.st-account .ic{width:18px;height:18px}.st-mobile-more{display:none}
.st-language{display:flex;align-items:center;flex:none;min-width:0}
.studio-public-nav :is(a,button):focus-visible,.studio-join :is(a,button):focus-visible,#pg-explore :is(a,button):focus-visible{outline:2px solid var(--studio-accent);outline-offset:4px;border-radius:5px}
body.studio-workbench .main{padding-top:var(--st-top)}
body.studio-workbench .side #toolnav{display:none}body.studio-workbench .side>.top{display:none}
@media(min-width:901px){body.studio-workbench .side{top:var(--st-top);height:calc(100dvh - var(--st-top));padding-top:22px!important}body.studio-workbench .side .studio-library-nav{margin-top:4px;padding-top:8px}body.studio-workbench .audio-redesign #mesa{top:calc(var(--st-top) + 16px)}body.studio-workbench #accmenu{top:auto;bottom:86px}}
html:not([data-estudio-identidad=cuenta]) .side :is(.upg,.acct,.studio-session-switch){display:none!important}
.st-side-join{width:100%;padding:13px 9px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);font:550 12px var(--font);cursor:pointer}.st-side-join:hover{border-color:var(--studio-accent)}html[data-estudio-identidad=cuenta] .st-side-join{display:none}
.st-model-panel{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding:30px max(28px,calc((100vw - 1360px)/2));background:#151714;border-bottom:1px solid #343930;box-shadow:0 28px 60px #0008;max-height:calc(100dvh - var(--st-top) - 24px);overflow:auto;overscroll-behavior:contain}
.st-model-intro{padding:8px 16px 8px 0}.st-model-intro h2{font-size:25px;font-weight:550;line-height:1.2;letter-spacing:-1px;margin:20px 0 13px}.st-model-intro p{font-size:12px;line-height:1.7;color:#a5aca0}.st-model-intro button{margin-top:22px;font-size:12px;color:var(--studio-accent);display:flex;gap:8px;align-items:center}
.st-model-heading{display:flex;justify-content:space-between;align-items:center;color:#a5aca0;font-size:11px;letter-spacing:.04em;margin-bottom:14px}.st-model-heading button{font-size:25px;width:36px;height:36px}
.st-model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.st-model-grid button{display:flex;align-items:center;gap:11px;padding:13px 10px;min-height:72px;text-align:left;border:1px solid transparent;border-radius:11px}.st-model-grid button:hover{border-color:#394131;background:#20271b}.st-model-grid .tile{width:32px;height:32px;flex:none}.st-model-grid button>span:not(.tile){min-width:0;display:grid;gap:5px}.st-model-grid b{font-size:13px;font-weight:550;line-height:1.35}.st-model-grid small{font-size:11px;line-height:1.45;color:#a5aca0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.st-model-grid button>.ic{width:14px;height:14px;flex:none;margin-left:auto;color:#8d9884}.st-model-list details{margin-top:18px;padding-top:14px;border-top:1px solid #30362c}.st-model-list summary{font-size:12px;color:#a5aca0;cursor:pointer}.st-model-grid button:disabled{opacity:.6;cursor:default}
.explore-wrap{max-width:1500px;margin:auto;padding:40px 42px 60px}.explore-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;min-height:490px}.explore-lights{display:inline-flex;gap:6px;align-items:center;height:26px}.explore-lights i{display:block;width:8px;height:22px;transform:rotate(18deg);border-radius:8px;background:var(--studio-accent);box-shadow:0 0 18px #aff33e38}.explore-kicker{display:flex;gap:12px;align-items:center;margin-bottom:26px;font-size:10px;font-weight:600;letter-spacing:.14em;color:#bbc3b3}.explore-copy h1{font-size:clamp(38px,4vw,65px);line-height:1.06;letter-spacing:-.055em;font-weight:600;margin:0 0 22px}.explore-copy h1 em{font-style:normal;color:var(--studio-accent)}.explore-copy>p{max-width:420px;font-size:16px;line-height:1.75;color:#b2b9ab;margin:0 0 25px}
.explore-primary{display:inline-flex;align-items:center;gap:24px;background:var(--studio-accent);color:#17200e;border:0;border-radius:10px;padding:15px 19px;font:600 13px var(--font);cursor:pointer}.explore-primary:hover{filter:brightness(1.08)}.explore-footnote{display:block;margin-top:16px;max-width:390px;color:#969e90;font-size:11px;line-height:1.65}
.explore-film{position:relative;height:450px;border-radius:25px;overflow:hidden;background:#1c241a;border:1px solid #343d2c}.explore-film video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.55)}.explore-film::after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#050704cf);pointer-events:none}.explore-film-caption{position:absolute;bottom:24px;left:25px;z-index:1;display:grid;gap:8px}.explore-film-caption span{font-size:10px;letter-spacing:.12em;color:#d5dcca}.explore-film-caption b{font-size:14px;font-weight:550}.explore-motion{position:absolute;bottom:24px;right:24px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff4a;background:#0c120fb0;color:white;cursor:pointer}.explore-motion .ic{width:17px;height:17px}
.explore-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:45px 0 19px}.explore-section-head h2{font-size:24px;font-weight:550;letter-spacing:-.035em;margin:0}.explore-section-head>span{font-size:12px;color:#a5ada0}.explore-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.explore-card{position:relative;height:240px;overflow:hidden;padding:22px;border-radius:17px;border:1px solid #343b2f;background:#182013;color:white;text-align:left;cursor:pointer}.explore-card>img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;filter:brightness(.6) saturate(.55);transition:transform .35s,filter .35s}.explore-card::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#050803ee)}.explore-card:hover>img{transform:scale(1.045);filter:brightness(.85) saturate(.8)}.explore-card-copy{position:absolute;inset:auto 42px 22px 22px;display:grid;gap:8px;z-index:1}.explore-card-copy small{font:600 9px var(--font);letter-spacing:.13em;color:var(--studio-accent)}.explore-card-copy strong{font:550 21px/1.1 var(--font);letter-spacing:-.035em}.explore-card-copy>span{font:400 11px/1.6 var(--font);color:#c3c9bd}.explore-card>.ic{position:absolute;bottom:23px;right:19px;z-index:1;width:19px;height:19px}
.explore-cine{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:52px;margin-top:40px;border-top:1px solid var(--border)}.explore-cine h2{font-size:30px;line-height:1.17;letter-spacing:-.04em;font-weight:550;max-width:400px;margin:18px 0}.explore-cine p{font-size:13px;line-height:1.8;max-width:390px;color:#aeb6a6}.explore-cine a{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-size:13px;text-decoration:none;color:var(--studio-accent)}.explore-cine>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:17px}
.studio-join{box-sizing:border-box;width:min(480px,calc(100vw - 32px));margin:auto;padding:44px 36px 30px;max-height:calc(100dvh - 32px);overflow:auto;background:#171b14;border:1px solid #3a462e;border-radius:25px;color:#f4f8ee;text-align:center;font-family:var(--font);box-shadow:0 30px 100px #0009}.studio-join::backdrop{background:#060906ba;backdrop-filter:blur(8px)}.studio-join-close{position:absolute;right:13px;top:9px;width:40px;height:40px;background:none;border:0;color:#b3bfaa;font-size:25px;cursor:pointer}.studio-join-kicker{font-size:10px;letter-spacing:.2em;color:#b5c4a7;margin:16px 0!important}.studio-join h2{font-size:30px;line-height:1.16;letter-spacing:-.04em;margin:0 0 16px;font-weight:550}.studio-join p{font-size:13px;line-height:1.7;color:#b5bfac;margin:0 0 25px}.studio-join a{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-size:14px;font-weight:550;border-radius:10px;padding:14px;margin:10px 0}.studio-join-primary{background:var(--studio-accent);color:#17200e}.studio-join-secondary{border:1px solid #4c5940;color:#f4f8ee}.studio-join-back{display:block;margin:16px auto 20px;background:none;border:0;color:#c2cbb9;font:400 12px var(--font);cursor:pointer}.studio-join small{font-size:10px;line-height:1.6;color:#9ba88e;display:block}
@media(max-width:1180px){body.studio-workbench .studio-public-nav{gap:18px;padding-inline:20px}.st-nav{gap:16px}.st-actions{gap:9px}.st-guest{gap:9px}.explore-wrap{padding:26px 26px 40px}.explore-hero{gap:24px;min-height:440px}.explore-film{height:390px}.st-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.explore-card-copy strong{font-size:19px}}
@media(max-width:900px){body.studio-workbench{--st-top:116px;--sm-top:116px}body.studio-workbench .studio-public-nav{height:var(--st-top);padding:0 16px;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:64px 52px;gap:0 8px}.studio-public-nav .brand .wordmark{font-size:22px}.studio-public-nav .cocuyologo{width:23px;height:23px}.st-actions{grid-column:2;grid-row:1;gap:12px}.st-nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:10px}.st-nav>a,.st-nav-group{flex:1;justify-content:center}.st-nav a{font-size:13px}.st-nav-group>button{width:26px}.st-guest{gap:12px;font-size:12px}.st-signup{padding:9px 11px}.st-prices{display:none}.st-account span{display:none}.st-mobile-more{display:grid;place-items:center;padding:0;width:30px;height:40px}.st-mobile-more .ic{width:21px;height:21px}body.studio-workbench .sm-header{display:none!important}body.studio-workbench .side>.top{display:flex;justify-content:flex-end}body.studio-workbench .main{padding-top:var(--st-top)}.st-model-panel{padding:16px;display:block;max-height:calc(100dvh - var(--st-top) - 16px)}.st-model-intro{display:none}.st-model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.st-model-grid button{padding:10px 7px;gap:8px}.st-model-grid b{font-size:12px}.st-model-grid small{font-size:10px}.st-model-grid button>.ic{display:none}.st-model-heading{margin-bottom:6px}.explore-wrap{padding:26px 20px 45px}.explore-hero{min-height:0;gap:25px}.explore-copy h1{font-size:40px}.explore-copy>p{font-size:14px}.explore-film{height:365px}.explore-kicker{font-size:8px;letter-spacing:.08em;margin-bottom:20px}.explore-cards{gap:10px}.explore-card{height:230px;padding:15px}.explore-card-copy{left:15px;right:26px;bottom:16px}.explore-card-copy strong{font-size:18px}.explore-card-copy>span{font-size:10px}.explore-cine{gap:25px}.explore-cine h2{font-size:26px}}
@media(max-width:600px){.studio-public-nav .brand .wordmark{font-size:20px}.studio-public-nav .brand{gap:5px}.st-actions{gap:9px}.st-account{padding:0}.explore-hero{grid-template-columns:1fr;gap:27px}.explore-copy{padding-top:10px}.explore-copy h1{font-size:43px}.explore-copy>p{font-size:14px;max-width:390px}.explore-film{height:260px}.explore-kicker{font-size:9px}.explore-primary{padding:14px 17px;font-size:13px}.explore-section-head{margin-top:35px}.explore-section-head h2{font-size:22px}.explore-section-head>span{display:none}.explore-cards{grid-template-columns:1fr}.explore-card{height:185px}.explore-card-copy{left:22px;right:45px;bottom:21px}.explore-card-copy strong{font-size:24px}.explore-card-copy>span{font-size:12px}.explore-cine{grid-template-columns:1fr;margin-top:32px;padding-top:32px}.studio-join{padding:40px 24px 26px}.studio-join h2{font-size:28px}}
@media(max-width:370px){body.studio-workbench .studio-public-nav{padding-inline:10px}.studio-public-nav .cocuyologo{display:none}.st-guest{gap:9px}.st-actions{gap:7px}.st-nav{gap:0}.st-nav a{font-size:12px}.explore-wrap{padding-inline:16px}.explore-copy h1{font-size:38px}.st-model-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.st-nav a::after,.explore-card>img,.st-nav-group>button .ic{transition:none}}
.cocuyo-companion{position:absolute;z-index:2;top:37%;left:50%;width:138px;height:106px;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 26px #000b);animation:companion-float 6s ease-in-out infinite}
/* El componente de idioma controla su propio tamaño y desplegable. */
body.studio-workbench.audio-redesign #mesa{scroll-margin-top:calc(var(--st-top) + 12px)}
.st-side-extras{display:grid;gap:16px;padding:15px 10px;color:var(--muted2);font-size:12px}.st-side-extras>button{background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}.st-side-extras>a{color:inherit;text-decoration:none}.st-side-extras>[data-idioma-slot]{display:none}.st-side-extras>a:hover,.st-side-extras>button:hover{color:var(--studio-accent)}
html[data-estudio-identidad=cuenta] .st-side-extras [data-idioma-slot]{display:none!important}
@media(max-width:900px){.st-side-extras>[data-idioma-slot]{display:block}}
#cocuyoComposer[hidden]{display:none}#cocuyoComposer{padding:30px;border:1px solid #394a2c;border-radius:20px;background:linear-gradient(120deg,#192313,#10130e);margin:35px 0;color:#ecf5e4}
.cocuyo-pilot-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#b4c99f}.cocuyo-pilot-head b{padding:6px 9px;border:1px solid #4c633a;border-radius:6px;letter-spacing:0;font-size:12px}
#cocuyoComposer h2{font:550 28px/1.2 var(--font);letter-spacing:-.04em;margin:20px 0 12px}#cocuyoComposer>p{color:#adbaa4;font-size:13px;line-height:1.7}#cocuyoComposer label{display:block;font-size:12px;margin:24px 0 10px}#cocuyoComposer textarea{box-sizing:border-box;display:block;width:100%;background:#0d130a;color:#edf6e5;border:1px solid #48583b;border-radius:12px;resize:vertical;min-height:110px;padding:16px;font:400 16px/1.6 var(--font)}#cocuyoComposer textarea:focus{outline:2px solid var(--studio-accent);outline-offset:2px}
.cocuyo-pilot-actions{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-top:16px}#cocuyoComposer small{font-size:11px;line-height:1.6;color:#a6b797}.cocuyo-pilot-actions button,.cocuyo-plan>button{flex:none;border:0;border-radius:10px;padding:13px 19px;background:var(--studio-accent);color:#182211;font:600 13px var(--font);cursor:pointer}.cocuyo-pilot-actions button:disabled{opacity:.5;cursor:wait}
.cocuyo-plan{margin-top:24px;padding-top:24px;border-top:1px solid #3f4a34}.cocuyo-plan[hidden]{display:none}.cocuyo-plan-model{font-size:12px;color:var(--studio-accent)}.cocuyo-plan h3{font:550 23px/1.25 var(--font);margin:12px 0}.cocuyo-plan>p,.cocuyo-plan details p{font-size:13px;line-height:1.7;color:#c3d0b8;white-space:pre-wrap}.cocuyo-plan summary{font-size:12px;cursor:pointer;color:#b7c6a9;margin:20px 0}.cocuyo-plan>small{display:block;margin:12px 0}.cocuyo-api-meter{font-size:11px!important;color:#9fb48e!important;font-variant-numeric:tabular-nums}
@media(max-width:600px){#cocuyoComposer{padding:24px 18px}.cocuyo-pilot-actions{align-items:stretch;flex-direction:column;gap:14px}#cocuyoComposer h2{font-size:25px}}
.companion-body{position:absolute;inset:12px 27px 0;border-radius:42% 42% 49% 49%;border:1px solid #bdf76966;background:linear-gradient(130deg,#455936,#101c0c 65%);display:flex;align-items:flex-start;justify-content:center;gap:11px;padding-top:25px;box-shadow:inset 0 1px 12px #d2ffa022}
.companion-body i{width:11px;height:22px;border-radius:8px;background:#c4ff6d;box-shadow:0 0 10px #bcff6b,0 0 30px #99fb3766}
.companion-wing{position:absolute;top:0;width:48px;height:73px;border-radius:80% 10% 80% 40%;border:1px solid #c4f68c88;background:linear-gradient(130deg,#dcffb52e,#e7ffcf0a);transform:rotate(-35deg)}.companion-wing.left{left:0}.companion-wing.right{right:0;transform:scaleX(-1) rotate(-35deg)}
.cocuyo-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:25px;padding:30px 0;border-bottom:1px solid var(--border)}.cocuyo-how>div>span{font-size:11px;color:var(--studio-accent)}.cocuyo-how h2{font-size:16px;font-weight:550;margin:10px 0}.cocuyo-how p{font-size:12px;line-height:1.6;color:#aeb6a6;margin:0}
@keyframes companion-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
@media(max-width:600px){.cocuyo-how{grid-template-columns:1fr;gap:22px;margin-top:10px}.cocuyo-how>div{padding-left:35px;position:relative}.cocuyo-how>div>span{position:absolute;left:0;top:12px}.cocuyo-how h2{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.cocuyo-companion{animation:none}}

/* Cocuyo reúne exploración y guía; los editores quedan a un clic. */
.explore-wrap{padding-top:30px}.explore-hero{min-height:0;gap:32px}.explore-film{height:320px;border-radius:20px}.explore-copy h1{font-size:clamp(36px,3.6vw,53px);margin-bottom:16px}.explore-copy>p{font-size:14px;line-height:1.7;margin-bottom:21px}.explore-kicker{margin-bottom:18px}.explore-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.explore-guide-link{font-size:12px;color:#c2caba;text-decoration:none}.explore-guide-link:hover{color:var(--studio-accent)}
.explore-paths,.cocuyo-guide{scroll-margin-top:calc(var(--st-top) + 22px);outline:none}.explore-paths:focus-visible,.cocuyo-guide:focus-visible{outline:2px solid var(--studio-accent);outline-offset:8px}.explore-section-head{margin-top:32px}.explore-card{height:205px}
.cocuyo-guide{display:grid;grid-template-columns:100px 1fr;gap:25px;align-items:start;margin-top:32px;padding:28px;border:1px solid #30392b;border-radius:18px;background:#10150d}.cocuyo-guide-avatar{position:relative;height:95px}.cocuyo-guide .cocuyo-companion{top:50%;scale:.68}.cocuyo-guide-tag{font-size:9px;font-weight:550;letter-spacing:.09em;color:#a8bb97}.cocuyo-guide h2{font-size:25px;letter-spacing:-.035em;font-weight:550;margin:12px 0}.cocuyo-guide-copy>p{font-size:13px;color:#abb6a2;line-height:1.75;margin:0;max-width:700px}.cocuyo-guide summary{cursor:pointer;color:var(--studio-accent);font-size:12px;margin-top:17px}.cocuyo-guide .cocuyo-how{margin-top:18px;padding:0;border:0;gap:20px}.cocuyo-how h3{font-size:14px;font-weight:550;margin:10px 0}
@media(max-width:900px){.explore-film{height:290px}.explore-copy h1{font-size:39px}.explore-hero{gap:24px}.explore-primary{padding:13px 16px}.explore-hero-actions{gap:14px}.explore-card{height:220px}.cocuyo-guide{grid-template-columns:75px 1fr;gap:20px;padding:24px}}
@media(max-width:600px){.explore-wrap{padding-top:22px}.explore-copy{padding-top:0}.explore-copy h1{font-size:39px}.explore-copy>p{font-size:14px}.explore-film{height:180px;border-radius:16px}.explore-hero{gap:23px}.explore-film-caption{left:18px;bottom:18px}.explore-motion{right:18px;bottom:18px}.explore-card{height:180px}.cocuyo-guide{grid-template-columns:1fr;gap:8px;padding:24px 20px}.cocuyo-guide-avatar{width:80px;height:60px}.cocuyo-guide .cocuyo-companion{left:50%;scale:.5}.cocuyo-guide h2{font-size:24px}.cocuyo-guide .cocuyo-how{gap:14px}.cocuyo-how h3{margin-top:5px}}


/* cocuyo-css: assets/css/estudio-cuenta-movil.css */
/* En móvil se presenta el mismo menú de cuenta del escritorio. */
@media(max-width:900px){
 body.studio-workbench.studio-simple #accmenu{
  position:fixed!important;top:auto;left:auto!important;right:12px;
  bottom:calc(var(--sm-bottom,64px) + 10px + env(safe-area-inset-bottom,0px));
  width:min(280px,calc(100vw - 24px));max-width:calc(100vw - 24px);
  max-height:calc(100dvh - var(--sm-bottom,64px) - 36px - env(safe-area-inset-bottom,0px));
  overflow:auto;overscroll-behavior:contain;z-index:200;
 }
 body.studio-workbench.studio-simple #accmenu .mi{min-height:46px;font-size:14px}
 body.studio-workbench #accmenu .acc-identidad{gap:9px}
 body.studio-workbench #accmenu .acc-identidad>div{flex:1;min-width:0}
 body.studio-workbench #accmenu #btnmascreditos{flex:none;height:36px;min-height:36px;padding:0 9px;gap:6px}
 body.studio-workbench #accmenu #btnmascreditos .credit-wallet-icon{width:17px;height:17px;flex-basis:17px}
}


/* cocuyo-css: assets/css/navegacion-global.css */
/* Una navegación para Cine, Cocuyo y creación. Panel editorial inspirado
   en Navbar Section 2 de SolaceUI / 21st.dev, adaptado sin dependencias. */
/* crear.html (y sus traducciones) carga esta hoja SIN tokens.css: el parche de
   [hidden] de .cn-header se queda y el foco lleva valores de respaldo. */
.studio-public-nav .st-pricing,.sm-nav .st-pricing{display:flex;align-items:center;justify-content:center;gap:9px;flex:none;min-height:44px;padding:7px 11px;color:#d7dbd2;font:550 12px/1.2 var(--fuente,var(--font,sans-serif));text-decoration:none;white-space:nowrap;border:1px solid #ffffff10;border-radius:10px;background:#ffffff04;transition:color .16s,border-color .16s,background .16s}
.cn-pricing-label{display:inline-flex;align-items:center;gap:6px}.cn-pricing-label svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;opacity:.8}
/* El ahorro forma parte del enlace, sin un segundo cartel promocional. */
.cn-pricing-badge{padding:1px 0 1px 9px;border-left:1px solid #ffffff1b;background:transparent;color:#a9c988;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.studio-public-nav .st-pricing:hover,.sm-nav .st-pricing:hover{color:#e5f1d5;border-color:#aff33e40;background:#aff33e08}
.studio-public-nav .st-pricing:focus-visible,.sm-nav .st-pricing:focus-visible{outline:var(--foco-contorno,2px solid var(--verde-cocuyo));outline-offset:var(--foco-separacion,2px)}
@media(max-width:1180px){.studio-public-nav .st-pricing{gap:0;padding-inline:9px}.cn-pricing-badge{display:none}}
@media(max-width:900px){body.studio-workbench.studio-simple .sm-nav:has(>.st-pricing){grid-template-columns:repeat(5,minmax(0,1fr))}.sm-nav .st-pricing{min-width:0;min-height:44px;flex-direction:column;gap:0;padding:4px 1px;font-size:10px;border-color:transparent;background:transparent;border-radius:8px}.sm-nav .st-pricing .cn-pricing-label{flex-direction:column;gap:4px}.sm-nav .st-pricing .cn-pricing-label svg{width:18px;height:18px;opacity:1}.sm-nav .st-pricing .cn-pricing-badge{display:none}.sm-nav .st-pricing,.sm-nav .st-pricing .cn-pricing-label{color:var(--muted,var(--gris-humo));font-weight:500}.sm-nav .st-pricing[aria-current=page],.sm-nav .st-pricing:hover{color:var(--blanco-luz)}}
@media(prefers-reduced-motion:reduce){.studio-public-nav .st-pricing,.sm-nav .st-pricing{transition:none}}
.cn-header,body.studio-workbench .studio-public-nav{--cn-accent:var(--verde-cocuyo,#aff33e);--cn-top:72px;box-sizing:border-box;position:fixed;inset:0 0 auto;height:var(--cn-top);display:flex;align-items:center;gap:28px;padding:0 28px;background:rgba(10,11,10,.96);border-bottom:1px solid #292c27;color:#f3f5ef;font-family:var(--fuente,var(--font,sans-serif));backdrop-filter:blur(22px)}
.cn-header{z-index:var(--z-nav,80)}.cn-header [hidden],.cn-mega[hidden]{display:none!important}.cn-header *{box-sizing:border-box}.cn-header button,.cn-header a{font:inherit;color:inherit;text-decoration:none}.cn-header button{cursor:pointer}
.cn-unified{--cn-top:72px;padding-top:var(--cn-top)!important}.cn-unified>.cabecera,.cn-unified .inicio-nav{display:none!important}.cn-unified .inicio-hero{min-height:calc(100svh - var(--cn-top));grid-template-rows:minmax(min-content,1fr) auto}.cn-brand,.studio-public-nav .brand .wordmark{font-size:25px;font-weight:750;letter-spacing:-1.1px;white-space:nowrap;flex:none}.cn-brand .o-viva{color:var(--verde-cocuyo);text-shadow:0 0 18px #aff33e38}
.cn-nav,.studio-public-nav .st-nav{display:flex;align-items:stretch;gap:7px;height:100%;margin:0;min-width:0}.cn-nav>a,.cn-group,.studio-public-nav .st-nav>a,.studio-public-nav .st-nav-group,.studio-public-nav .sn-agent-entry{display:flex;align-items:center;position:relative}.cn-nav>a,.cn-group>a,.studio-public-nav .st-nav>a,.studio-public-nav .st-nav-group>a,.studio-public-nav .sn-agent-entry{padding:10px 12px;min-height:44px;font-size:13px;font-weight:550;color:#adb2a8;border-radius:9px}.cn-nav>a,.studio-public-nav .st-nav>a,.studio-public-nav .sn-agent-entry{align-self:center}.cn-group>a,.studio-public-nav .st-nav-group>a{padding-right:3px}.cn-group>button,.studio-public-nav .st-nav-group>button{background:none;border:0;color:#929a89;width:27px;height:44px;display:grid;place-items:center;border-radius:7px}.cn-group>button>svg{width:13px;height:13px;transition:transform .2s}.cn-group>button[aria-expanded=true]>svg{transform:rotate(180deg);color:var(--cn-accent)}
.cn-nav a:hover,.studio-public-nav .st-nav a:hover,.studio-public-nav .sn-agent-entry:hover{color:#f7f9f3;background:#ffffff07}.cn-nav>a[aria-current=page],.cn-group>a[aria-current=page],.studio-public-nav .st-nav>a[aria-current=page]{color:var(--cn-accent);background:#aff33e0c;box-shadow:inset 0 0 0 1px #aff33e1f}.studio-public-nav .st-nav a::after{display:none}.studio-public-nav .st-nav-group:has(a[aria-current=page]){box-shadow:inset 0 -2px var(--cn-accent)}
.cn-actions{display:flex;align-items:center;gap:22px;margin-left:auto}.cn-actions .cabecera-acciones{display:flex;align-items:center;gap:15px;margin:0;flex-wrap:nowrap}.studio-public-nav .st-guest>a{font-size:12px!important;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:10px 15px!important;white-space:nowrap;font-weight:600!important}.studio-public-nav [data-st-login]{border:1px solid #434c3c;background:none;box-shadow:none}.studio-public-nav [data-st-login]:hover{background:var(--cn-accent);border-color:var(--cn-accent);color:#16200c}.cn-actions .saludo{display:none!important}.cn-actions #avatar-cine{width:36px;height:36px;min-height:36px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 35%,transparent);border-radius:50%;background:var(--acento-fondo)}.cn-actions .oculto{display:none!important}.cn-header .cuenta-espera{display:none}
.cn-mega,.studio-public-nav .st-model-panel.cn-mega{position:absolute;top:calc(100% + 9px);left:24px;right:24px;width:auto;display:grid;grid-template-columns:minmax(0,1fr);padding:22px;gap:0;max-height:calc(100dvh - 100px);overflow:auto;border:1px solid #363e30;border-radius:20px;background:#11140f;box-shadow:0 24px 70px #000b;animation:cn-reveal .18s ease-out;color:#f3f5ef;font-family:var(--fuente,var(--font,sans-serif))}
.cn-panel-content{min-width:0;padding:0}.cn-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.cn-panel-heading>div>span{font-size:9px;letter-spacing:.14em;color:#aab69f}.cn-panel-heading h2{font-size:23px;font-weight:550;letter-spacing:-.035em;margin:8px 0 0;color:#f2f6ec}.cn-panel-heading>button{display:grid;place-items:center;width:36px;height:36px;background:#ffffff06;border:1px solid #343c2d;border-radius:9px;color:#b6c0ad;font:24px sans-serif;cursor:pointer}
.cn-model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cn-model{display:flex;align-items:center;gap:12px;min-width:0;min-height:72px;padding:13px 11px;border:1px solid #2d3526!important;border-radius:11px;background:#191e15!important;text-align:left;text-decoration:none!important;color:#e7efde!important;font:inherit;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}.cn-model:hover{background:#222c1a!important;border-color:#586e41!important;transform:translateY(-1px)}.cn-model:disabled{opacity:.5;cursor:default;transform:none}.cn-model>span:not(.mrcbox){display:grid;gap:6px;min-width:0}.cn-model b{font-size:12px;font-weight:550;line-height:1.3;color:#ecf3e3}.cn-model small{font-size:10px;color:#9eaf90;line-height:1.4}.cn-model .mrcbox{width:30px;height:30px;display:grid;place-items:center;flex:none;color:#aff33e}.cn-model .mrc{width:25px;height:25px}.cn-model>svg{width:13px;height:13px;flex:none;margin-left:auto;color:#91a37f}.cn-unavailable{margin-top:18px}.cn-unavailable>summary{font-size:11px;color:#a8b79c;cursor:pointer;padding:5px 0 12px}.cn-panel-footer{margin-top:20px;padding-top:15px;border-top:1px solid #2c3326;font-size:10px;color:#98a68e}.cn-panel-status{font-size:13px;line-height:1.6;color:#b1bea7;margin:20px 0}
.cn-header :is(a,button,select):focus-visible,.cn-mega :is(a,button,summary):focus-visible{outline:var(--foco-contorno,2px solid var(--verde-cocuyo));outline-offset:var(--foco-separacion,2px)}
.cn-unified .cn-header #avatar-cine:not(.oculto){display:grid!important}
@keyframes cn-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1180px){.cn-header,body.studio-workbench .studio-public-nav{gap:18px;padding-inline:20px}.cn-nav,.studio-public-nav .st-nav{gap:1px}.cn-nav>a,.cn-group>a,.studio-public-nav .st-nav>a,.studio-public-nav .st-nav-group>a,.studio-public-nav .sn-agent-entry{padding-left:9px;padding-right:9px;font-size:12px}.cn-group>a,.studio-public-nav .st-nav-group>a{padding-right:0}.cn-actions{gap:14px}.cn-actions .cabecera-acciones{gap:9px}.cn-mega,.studio-public-nav .st-model-panel.cn-mega{grid-template-columns:minmax(0,1fr)}.cn-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){body.studio-workbench .studio-public-nav{--cn-top:116px;height:116px;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:64px 52px;gap:0 10px;padding:0 16px}.studio-public-nav .brand .wordmark{font-size:23px}.studio-public-nav .st-nav{grid-column:1/-1;grid-row:2;width:100%;display:flex;justify-content:space-between;gap:0}.studio-public-nav .st-nav>a,.studio-public-nav .st-nav-group{flex:1;justify-content:center}.studio-public-nav .st-nav>a{padding-block:12px;min-height:44px}.studio-public-nav .st-actions{grid-column:2;grid-row:1;justify-self:end;margin-left:auto;gap:10px}.cn-mega,.studio-public-nav .st-model-panel.cn-mega{top:calc(100% + 5px);left:10px;right:10px;display:block;padding:17px;max-height:calc(100dvh - 135px);border-radius:15px}.cn-panel-content{padding:0}.cn-model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.cn-panel-heading{margin-bottom:16px}.cn-panel-heading h2{font-size:21px}.cn-model{padding:12px 9px;min-height:75px;gap:10px}.cn-model>svg{display:none}.cn-panel-footer{margin-top:16px}}
@media(max-width:380px){body.studio-workbench .studio-public-nav{padding-inline:10px}.studio-public-nav .brand .wordmark{font-size:20px}.studio-public-nav .st-nav>a,.studio-public-nav .st-nav-group>a{padding-left:4px;padding-right:4px;font-size:11px}.studio-public-nav .st-nav-group>button{width:21px;padding:3px}.cn-model-grid{grid-template-columns:1fr}.cn-model{min-height:63px}}
@media(prefers-reduced-motion:reduce){.cn-mega{animation:none}.cn-model,.cn-group>button>svg{transition:none}}
@media(max-width:380px){
 .studio-public-nav .st-nav{display:grid;grid-template-columns:.9fr 1.1fr 1.1fr 1.1fr;min-width:0}
 .studio-public-nav .st-nav>a,.studio-public-nav .st-nav-group{min-width:0}
 .studio-public-nav .st-nav-group>button{width:18px;flex:none}
}

/* La portada y Cine continúan bajo la cabecera. Al desplazarse o abrir
   modelos recupera el fondo legible; la app nativa conserva su navegación. */
html:is([data-vista="intro"],[data-vista="cine"]) .cn-unified{padding-top:0!important}
html[data-vista="intro"] .cn-unified .inicio-hero{box-sizing:border-box;min-height:100svh;padding-top:calc(var(--cn-top) + env(safe-area-inset-top))}
html:is([data-vista="intro"],[data-vista="cine"]) .cn-header:not(.cn-scrolled):not(.cn-open){background:linear-gradient(180deg,#03050335,#0305030a);border-bottom-color:#ffffff12;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html:is([data-vista="intro"],[data-vista="cine"]) .cn-header:not(.cn-scrolled) .cn-nav a:not([aria-current="page"]){color:#f1f5eb;text-shadow:0 1px 8px #000b}
/* La marca es la única entrada a Explorar; no se repite como pestaña. */
.cn-brand,.studio-public-nav #studioHomeButton{position:relative;min-height:44px;display:flex;align-items:center;border-radius:9px;cursor:pointer;transition:color .18s,filter .18s}
.cn-brand:hover,.studio-public-nav #studioHomeButton:hover{filter:drop-shadow(0 0 9px #aff33e50)}
.studio-public-nav #studioHomeButton[aria-current="page"]:after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;background:var(--verde-cocuyo,#aff33e);border-radius:2px}
.studio-public-nav #studioHomeButton:focus-visible{outline:var(--foco-contorno,2px solid var(--verde-cocuyo));outline-offset:var(--foco-separacion,2px)}
@media(prefers-reduced-motion:reduce){.cn-brand,.studio-public-nav #studioHomeButton{transition:none}}
.cn-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cn-panel-footer>a,.cn-panel-footer>button{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 0;border:0;background:none;color:var(--cn-accent);font:550 12px var(--fuente,var(--font,sans-serif));cursor:pointer;white-space:nowrap}
.cn-panel-footer svg{width:15px;height:15px}
.cn-panel-footer>span{text-align:right;line-height:1.6}
@media(max-width:600px){.cn-panel-footer{align-items:flex-start;flex-direction:column;gap:5px}.cn-panel-footer>span{text-align:left}}

/* Familias en cascada: una lista compacta y un segundo nivel conectado,
   como un menú de escritorio, con superficies y tipografía de Cocuyo. */
.cn-header .cn-nav>a,.cn-header .cn-group>a,
body.studio-workbench .studio-public-nav .st-nav>a,
body.studio-workbench .studio-public-nav .st-nav-group>a,
body.studio-workbench .studio-public-nav .sn-agent-entry{
 display:flex;align-items:center;justify-content:center;position:relative;line-height:1;min-height:44px;
 font-family:var(--fuente);font-weight:550;text-decoration:none;box-shadow:none;
}
.cn-header .cn-nav>a[aria-current=page],
body.studio-workbench .studio-public-nav .st-nav>a[aria-current=page],
body.studio-workbench .studio-public-nav .sn-agent-entry[aria-current=page]{
 color:var(--verde-cocuyo);background:transparent;box-shadow:none;
}
.cn-header .cn-nav>a[aria-current=page]::after,
body.studio-workbench .studio-public-nav .sn-agent-entry[aria-current=page]::after{
 content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
 border-radius:2px;background:var(--verde-cocuyo);
}
body.studio-workbench .studio-public-nav .st-nav-group:has(a[aria-current=page]){box-shadow:none}
body.studio-workbench .studio-public-nav .st-nav-group>a[aria-current=page]{color:var(--verde-cocuyo);background:transparent}
body.studio-workbench .studio-public-nav .st-nav-group>a[aria-current=page]::after{
 display:block;content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;
 border-radius:2px;background:var(--verde-cocuyo);
}
.cn-mega,.studio-public-nav .st-model-panel.cn-mega{
 left:var(--cn-menu-left,180px);right:auto;width:min(660px,calc(100vw - 24px));
 top:calc(100% + 6px);padding:0;display:block;overflow:auto;overscroll-behavior:contain;
 max-height:calc(100dvh - var(--cn-top,72px) - 22px);border-radius:16px;
 background:var(--negro-elevado);border-color:var(--escarcha-borde);box-shadow:var(--sombra-3);
}
.cn-mega [hidden]{display:none!important}
.cn-mega .cn-panel-heading{gap:12px;margin:0;padding:14px 16px;border-bottom:1px solid var(--negro-borde)}
.cn-mega .cn-panel-heading h2{font:600 15px/1.3 var(--fuente);letter-spacing:-.02em;margin:0;color:var(--blanco-luz)}
.cn-mega .cn-panel-heading>span{font:400 12px/1.3 var(--fuente);color:var(--gris-humo)}
.cn-mega .cn-panel-heading>button{width:32px;height:32px;margin-left:auto;flex:none;font-size:22px;background:transparent;border:0;color:var(--gris-niebla)}
.cn-cascade{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start}
.cn-family-list{padding:9px;display:grid;gap:2px}
.cn-mega .cn-family{
 display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:9px 10px;
 font:500 13px/1.3 var(--fuente);text-align:left;color:var(--gris-niebla);background:transparent;
 border:1px solid transparent;border-radius:8px;cursor:pointer;transition:background .14s,color .14s;
}
.cn-mega .cn-family .mrcbox{display:grid;place-items:center;width:23px;height:23px;flex:none;color:var(--verde-cocuyo)}
.cn-mega .cn-family .mrc{width:21px;height:21px}
.cn-mega .cn-family>span:not(.mrcbox){flex:1;min-width:0}
.cn-mega .cn-family>small{font-size:10px;font-variant-numeric:tabular-nums;color:var(--gris-humo)}
.cn-mega .cn-family>svg{width:12px;height:12px;flex:none;color:var(--gris-humo)}
.cn-mega .cn-family:hover,.cn-mega .cn-family[aria-expanded=true]{
 background:color-mix(in srgb,var(--verde-cocuyo) 8%,transparent);color:var(--blanco-luz);
}
.cn-mega .cn-family[aria-expanded=true]{border-color:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent)}
.cn-mega .cn-family[aria-expanded=true]>svg{color:var(--verde-cocuyo)}
.cn-family-deck{align-self:stretch;min-width:0;border-left:1px solid var(--negro-borde);background:color-mix(in srgb,var(--negro-abismo) 42%,var(--negro-elevado));padding:12px}
.cn-family-heading{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px 10px;font:600 13px/1.4 var(--fuente);color:var(--blanco-luz)}
.cn-family-heading>small{margin-left:auto;color:var(--gris-humo);font-size:10px;font-weight:400}
.cn-family-heading>button{display:none}
.cn-mega .cn-model-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.cn-mega .cn-model{gap:11px;min-height:62px;padding:11px 12px;border:1px solid transparent!important;border-radius:9px;background:transparent!important;color:var(--blanco-luz)!important;transform:none}
.cn-mega .cn-model:hover{background:var(--negro-elevado)!important;border-color:var(--escarcha-borde)!important;transform:none}
.cn-mega .cn-model:disabled{opacity:1;color:var(--gris-humo)!important;cursor:not-allowed}
.cn-mega .cn-model:disabled:hover{background:transparent!important;border-color:transparent!important}
.cn-mega .cn-model:disabled b,.cn-mega .cn-model:disabled .mrcbox{color:var(--gris-humo)}
.cn-mega .cn-model .mrcbox{width:26px;height:26px;color:var(--verde-cocuyo)}
.cn-mega .cn-model .mrc{width:23px;height:23px}
.cn-mega .cn-model b{font:550 13px/1.4 var(--fuente);color:var(--blanco-luz);overflow-wrap:anywhere}
.cn-mega .cn-model small{font:400 11px/1.4 var(--fuente);color:var(--gris-humo)}
.cn-mega .cn-model>span:not(.mrcbox){gap:3px}
.cn-mega .cn-model>svg{display:block;width:12px;height:12px;color:var(--gris-humo)}
.cn-mega .cn-model:disabled>svg{visibility:hidden}
.cn-mega .cn-panel-footer{margin:0;padding:10px 16px;border-top:1px solid var(--negro-borde);gap:14px}
.cn-mega .cn-panel-footer>a,.cn-mega .cn-panel-footer>button{min-height:40px;color:var(--verde-cocuyo);font-size:12px}
.cn-mega .cn-panel-footer>span{max-width:230px;color:var(--gris-humo);font-size:10px}
.cn-mega .cn-panel-status{margin:0;padding:12px 18px;border-bottom:1px solid var(--negro-borde);font-size:12px;color:var(--gris-niebla)}
@media(max-width:900px){
 .cn-mega,.studio-public-nav .st-model-panel.cn-mega{left:12px;right:auto;width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 134px)}
 body.studio-workbench .studio-public-nav .st-nav>a{padding:12px 2px;font-size:12px}
}
@media(max-width:600px){
 .cn-mega,.studio-public-nav .st-model-panel.cn-mega{left:10px;right:10px;width:auto;border-radius:13px}
 .cn-cascade{display:block}
 .cn-family-list{padding:7px}
 .cn-mega .cn-family{min-height:47px;padding:10px 12px;font-size:14px}
 .cn-mega .cn-family>small{font-size:11px}
 .cn-family-deck{display:none;border-left:0;padding:7px}
 .cn-mega[data-nav-drill=true] .cn-family-list{display:none}
 .cn-mega[data-nav-drill=true] .cn-family-deck{display:block}
 .cn-family-heading{padding:0 9px 8px 0;font-size:14px;min-height:48px}
 .cn-family-heading>button{display:grid;place-items:center;min-width:44px;min-height:44px;background:transparent;border:0;border-radius:8px;color:var(--gris-niebla);cursor:pointer}
 .cn-family-heading>button>svg{width:16px;height:16px;transform:rotate(180deg)}
 .cn-mega .cn-model{min-height:67px}
 .cn-mega .cn-panel-heading{padding:10px 13px;gap:9px}
 .cn-mega .cn-panel-heading>span{font-size:11px}
 .cn-mega .cn-panel-footer{align-items:center;flex-direction:row;gap:10px;padding:8px 13px}
 .cn-mega .cn-panel-footer>span{max-width:148px;text-align:right;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.cn-mega .cn-family{transition:none}}

/* La nueva portada lleva al agente; YouTube vive en Comunidad (supermenú). */
html[data-experiencia="nueva"] .cn-agent{white-space:nowrap}

/* Single available model: direct resolution choices, same menu and mobile drilldown. */
.cn-mega .cn-family-name{display:grid;gap:2px}.cn-mega .cn-family-name>b{font:inherit}.cn-mega .cn-family-name>small{font-size:10px;line-height:1.3;color:var(--gris-humo);overflow-wrap:anywhere}
.cn-mega a.cn-family{text-decoration:none}.cn-mega .cn-resolution b{font-size:15px;font-variant-numeric:tabular-nums}.cn-mega .cn-family-heading>span{min-width:0;overflow-wrap:anywhere}.cn-mega .cn-family-heading>small{flex:none}
.cn-direct-summary{padding:12px;display:grid;gap:7px;color:var(--gris-niebla);font-size:12px;line-height:1.5}.cn-direct-summary>b{color:var(--blanco-luz);font-size:14px}.cn-direct-summary>p{margin:0;color:var(--gris-humo)}.cn-inactive-label{margin-top:10px;padding:8px 12px;font-size:10px;color:var(--gris-humo)}

/* Portada (dueño, 28-sep-2026): a la derecha UN solo botón, «Empieza a
   crear» (lima lleno), siempre el último: el avatar aparece a su izquierda
   al resolver la sesión, así el botón no se mueve. Login queda oculto en la
   cabecera (se entra desde la ventana de acceso que abre este botón). */
.cn-header{--cn-avatar:36px}
.cn-header .cn-actions .cabecera-acciones{gap:10px}
.cn-header .cn-actions #btn-entrar-cabecera,.cn-header .cuenta-espera{display:none!important}
.cn-header .cn-start{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;height:40px;min-height:40px;margin:0;padding:0 18px;border:1px solid var(--verde-cocuyo);border-radius:var(--radio-pill);background:var(--verde-cocuyo);color:var(--tinta-sobre-verde);font:600 13px/1 var(--fuente);letter-spacing:0;white-space:nowrap;text-decoration:none;box-shadow:none;transition:background var(--trans-rapida),border-color var(--trans-rapida)}
.cn-header .cn-start:hover{background:var(--lima-clara);border-color:var(--lima-clara);color:var(--tinta-sobre-verde)}
.cn-header .cn-actions #avatar-cine{width:var(--cn-avatar);height:var(--cn-avatar);min-height:var(--cn-avatar)}
/* Precios con su reclamo: una pastilla pequeña «No caducan». */
.cn-header .cn-pricing{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cn-pricing-tag{padding:3px 8px;border-radius:var(--radio-pill);background:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);color:var(--verde-cocuyo);font-size:10.5px;font-weight:600;line-height:1.2}
/* Móvil (≤1023 px): una sola fila con logo, «Empieza a crear» y ☰; el resto
   vive en el panel del ☰ (supermenu.css). */
@media(prefers-reduced-motion:reduce){.cn-header .cn-start{transition:none}}

/* El idioma vive en el pie (portada nueva, anterior o Cine), junto a lo legal. */
.cn-idioma-pie{display:inline-flex;align-items:center}
.cn-idioma-pie .cocuyo-idioma{border-color:var(--negro-borde);background:transparent;color:var(--gris-niebla)}
.cn-idioma-pie .cocuyo-idioma>summary:hover,.cn-idioma-pie .cocuyo-idioma[open]>summary{color:var(--blanco-luz)}
.pie-legal>.cn-idioma-pie{justify-self:center}

/* Letra fina (29-sep-2026): kerning de la fuente, cifras tabulares en el
   saldo y los costes de la cabecera, y textos del panel sin viudas. */
.cn-header,body.studio-workbench .studio-public-nav,.cn-mega{font-kerning:normal}
.cn-header,body.studio-workbench .studio-public-nav{font-variant-numeric:tabular-nums}
.cn-mega :is(.cn-panel-heading h2,.cn-family-heading>span){text-wrap:balance}
.cn-mega :is(.cn-model small,.cn-direct-summary>p,.cn-panel-status){text-wrap:pretty}

/* El editor conserva las opciones de la portada junto al selector en vivo. */
.st-model-panel .cn-editor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:16px;border-top:1px solid var(--negro-borde)}
.st-model-panel .cn-editor-options section+section{margin-top:18px}
.st-model-panel .cn-editor-options h3{margin:0 0 7px;font:600 11px/1.4 var(--fuente);color:var(--gris-humo)}
.st-model-panel :is(.cn-editor-options,.cn-editor-links) ul,.st-model-panel .cn-editor-links{list-style:none;margin:0;padding:0}
.st-model-panel :is(.cn-editor-options,.cn-editor-links) a,.st-model-panel .cn-editor-option-soon{display:flex;align-items:center;gap:9px;min-height:42px;padding:7px 8px;border-radius:8px;color:var(--gris-niebla);font:500 12px/1.4 var(--fuente);text-decoration:none}
.st-model-panel :is(.cn-editor-options,.cn-editor-links) a:hover,.st-model-panel :is(.cn-editor-options,.cn-editor-links) a:focus-visible{background:var(--negro-elevado);color:var(--blanco-luz)}
.st-model-panel :is(.cn-editor-options,.cn-editor-links) a:focus-visible{outline:var(--foco-contorno,2px solid var(--verde-cocuyo));outline-offset:var(--foco-separacion,2px)}
.st-model-panel .cn-editor-option-icon{display:grid;place-items:center;width:22px;flex:none;color:var(--verde-cocuyo)}
.st-model-panel .cn-editor-option-icon svg{width:20px;height:20px}
.st-model-panel :is(.cn-editor-options,.cn-editor-links) a>span:not(.cn-editor-option-icon){min-width:0;overflow-wrap:anywhere}
.st-model-panel :is(.cn-editor-options,.cn-editor-links) small{margin-left:auto;flex:none;color:var(--verde-cocuyo);font-size:10px}
.st-model-panel .cn-editor-option-soon{color:var(--gris-humo)}
.st-model-panel .cn-editor-option-soon :is(.cn-editor-option-icon,small){color:var(--gris-humo)}
.st-model-panel ul.cn-editor-links{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px;border-top:1px solid var(--negro-borde)}
.st-model-panel .cn-editor-status{margin:0;padding:12px 16px;border-top:1px solid var(--negro-borde);color:var(--gris-niebla);font-size:12px}
@media(max-width:600px){.st-model-panel .cn-editor-options{grid-template-columns:minmax(0,1fr);gap:18px;padding:13px}.st-model-panel :is(.cn-editor-options,.cn-editor-links) a,.st-model-panel .cn-editor-option-soon{min-height:44px;font-size:13px}}


/* cocuyo-css: assets/css/estudio-simple.css */
/* Un espacio de creación sin la navegación lateral repetida. */
.cocuyo-assistant-wrap{max-width:1000px;padding-top:30px}
.cocuyo-assistant-wrap>h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cocuyo-explorer-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--muted2);font:500 12px var(--font)}
.cocuyo-explorer-back:hover{color:var(--studio-accent)}
.cocuyo-explorer-back .ic{width:16px;height:16px}
.cocuyo-assistant-wrap #cocuyoComposer{margin:12px 0 30px}
body.studio-workbench.studio-simple{--side:0px!important}
body.studio-workbench.studio-simple .side{display:none!important}
body.studio-simple .st-mobile-more,body.studio-simple #accmenu .mi-ver{display:none!important}
body.studio-simple .st-library{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
body.studio-simple .st-library .ic{width:19px;height:19px}
body.studio-simple .studio-public-nav #acct{display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:50%}
body.studio-simple .studio-public-nav #acct .av{display:grid;width:32px;height:32px;font-size:13px}
body.studio-simple .studio-public-nav #acct .acct-identidad,body.studio-simple .studio-public-nav #acct .acct-chevron{display:none}
body.studio-simple .studio-public-nav #btnmascreditos{width:124px;min-height:42px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:11px}
body.studio-simple .studio-public-nav #btnmascreditos [data-credit-label],body.studio-simple .studio-public-nav #btnmascreditos .credit-wallet-caption{display:none}
body.studio-simple .studio-public-nav #btnmascreditos .credit-wallet-row{justify-content:center;gap:6px;font-size:11px}
body.studio-simple .studio-public-nav #btnmascreditos .credit-meter{height:3px;margin-top:5px}
body.studio-simple .studio-public-nav #btnmascreditos{height:42px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:0}
#cocuyoEnergy{box-sizing:border-box;height:42px}
body.studio-simple .studio-public-nav #btnmascreditos [data-credit-value]{font-size:16px;font-weight:750;letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--text)}
#cocuyoEnergy{width:128px;min-height:42px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);text-align:left;font-size:11px}
#cocuyoEnergy[hidden]{display:none!important}
#cocuyoEnergy>span:first-child{display:flex;justify-content:space-between;gap:8px}
#cocuyoEnergy b{font-variant-numeric:tabular-nums;color:var(--studio-accent)}
.cocuyo-energy-track{display:block;height:4px;background:#ffffff15;border-radius:8px;overflow:hidden;margin-top:6px}
.cocuyo-energy-track i{display:block;height:100%;background:var(--studio-accent);border-radius:8px;transition:width .3s}
#cocuyoEnergy[data-low=true] b{color:#ff9b8f}
#cocuyoEnergy[data-low=true] i{background:#ff9b8f}
#cocuyoComposer{scroll-margin-top:100px;padding:clamp(22px,4vw,46px);border:1px solid #b8f35b33;border-radius:24px;background:radial-gradient(ellipse at 90% 0%,#b8f35b0c,transparent 60%),#111312}
.cocuyo-compose-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:17px;color:#d1eea6}
#cocuyoComposer h2{font-size:clamp(25px,3.2vw,38px);line-height:1.2;letter-spacing:-1px;margin:0 0 12px}
#cocuyoComposer>p{font-size:15px;line-height:1.6;color:#a6b0a9;max-width:640px}
#cocuyoComposer form{margin-top:25px}
.cocuyo-type{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.cocuyo-type button{padding:8px 13px;border:1px solid #ffffff15;border-radius:20px;color:#b1bab5;font-size:12px;background:#ffffff05}
.cocuyo-type button[aria-pressed=true]{background:#b8f35b15;border-color:#b8f35b60;color:#d6f9a7}
#cocuyoComposer textarea{display:block;width:100%;min-height:116px;resize:vertical;box-sizing:border-box;padding:17px;border:1px solid #ffffff25;border-radius:14px;background:#090b09;color:#f5f7f4;font:inherit;font-size:16px;line-height:1.65;outline:none}
#cocuyoComposer textarea:focus{border-color:#b8f35b;box-shadow:0 0 0 3px #b8f35b10}
#cocuyoComposer .cocuyo-pilot-actions{display:flex;align-items:center;gap:10px;margin-top:13px}
#cocuyoComposer .cocuyo-pilot-actions button{min-height:44px;padding:10px 17px;border-radius:12px;font-size:13px;font-weight:650}
#cocuyoComposer button[type=submit]{margin-left:auto;background:#b8f35b;color:#15210a;border:1px solid #b8f35b}
#cocuyoComposer button:disabled{opacity:.5;cursor:default}
#cocuyoComposer .cocuyo-mic{display:flex;align-items:center;gap:9px;background:#ffffff08;border:1px solid #ffffff25;color:#e8eee8}
.cocuyo-mic svg{width:18px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
#cocuyoComposer .cocuyo-mic[aria-pressed=true]{border-color:#ff9b8f;color:#ffb4aa}
.cocuyo-record-time{font-size:12px;color:#bac2bc;font-variant-numeric:tabular-nums}
.cocuyo-compose-note{display:block;margin-top:13px;color:#8c998e;font-size:12px;line-height:1.6}
.cocuyo-cancel-record{color:#cbd2cd;font-size:12px;text-decoration:underline;padding:10px 0}
.cocuyo-plan-spec{display:flex;gap:7px;margin:14px 0}
.cocuyo-plan-spec span{padding:5px 9px;border-radius:6px;background:#ffffff09;color:#c5cec7;font-size:12px}
.cocuyo-plan-price{font-weight:650;color:#dcf9b7}
body.studio-simple #accmenu .studio-session-switch{margin:8px 12px}
body.studio-simple #accmenu #studioSessionToggle{min-height:44px;padding:8px 10px}
body.studio-simple #accmenu #studioSessionToggle small{display:none}
@media(min-width:901px){
 body.studio-workbench.studio-simple #accmenu{position:fixed;left:auto;right:20px;top:calc(var(--st-top) + 8px);bottom:auto;width:300px;max-height:calc(100dvh - var(--st-top) - 24px);overflow:auto;z-index:200}
 body.studio-workbench.studio-simple #submenu{left:auto!important;right:328px;z-index:201}
}
@media(max-width:900px){
 body.studio-workbench.studio-simple{--st-top:64px;--sm-top:64px}
 body.studio-workbench.studio-simple .studio-public-nav{grid-template-columns:auto minmax(0,1fr);grid-template-rows:64px;padding:0 12px;gap:8px}
 body.studio-simple .studio-public-nav .brand .wordmark{font-size:19px}
 body.studio-simple .st-brand-slot{grid-column:1;grid-row:1}
 body.studio-simple .studio-public-nav .st-nav{grid-column:2;grid-row:1;gap:0;min-width:0}
 body.studio-simple .st-nav a{font-size:12px}
 body.studio-simple .st-nav-group>button{width:22px;padding:4px}
 body.studio-simple .st-actions{display:none}
 body.studio-simple .st-actions .st-guest{display:none}
 body.studio-simple .studio-public-nav #acct,body.studio-simple .studio-public-nav #btnmascreditos,body.studio-simple .studio-public-nav .st-library{display:none!important}
 /* Barra inferior en UNA sola fila, tenga los botones que tenga
    (Proyectos · Apps · Creaciones · Precios · Cuenta, y Agente si la
    cuenta tiene acceso). Con columnas fijas el sexto botón (Cuenta)
    saltaba a una segunda fila. */
 body.studio-simple .sm-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
 /* Precios alinea icono y texto con los demás botones de la barra. */
 body.studio-workbench.studio-simple .sm-nav .st-pricing{min-height:48px;padding:3px 0}
 body.studio-workbench.studio-simple .sm-nav .st-pricing .cn-pricing-label{gap:5px}
 body.studio-workbench.studio-simple .sm-nav .st-pricing .cn-pricing-label svg{width:21px;height:21px}
 /* Cine y los tres editores conservan el mismo orden de la portada. */
 body.studio-workbench.studio-simple .studio-public-nav .st-nav{display:grid;grid-template-columns:minmax(44px,.75fr) minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:0}
 body.studio-workbench.studio-simple .studio-public-nav .st-nav>a.st-cine{justify-content:center;padding:12px 2px;min-height:44px;font-size:12px}
 body.studio-simple .sm-nav [data-sm-account][aria-expanded=true]{color:var(--studio-accent)}
 body.studio-simple[data-studio-page=explore] .studio-public-nav #btnmascreditos{display:block!important;width:108px}
 body.studio-simple[data-studio-page=explore] .studio-public-nav #btnmascreditos[hidden]{display:none!important}
 body.studio-simple[data-studio-page=explore] .st-actions:has(#cocuyoEnergy:not([hidden])){display:flex!important;position:fixed;top:var(--st-top);left:0;right:0;justify-content:flex-end;padding:8px 14px;background:#090b09eF;border-bottom:1px solid #ffffff10}
 body.studio-simple[data-studio-page=explore]:has(#cocuyoEnergy:not([hidden])) #pg-explore{padding-top:60px}
 #cocuyoEnergy{width:120px}
 #cocuyoComposer{border-radius:18px;padding:22px 17px}
 #cocuyoComposer .cocuyo-pilot-actions{flex-direction:row;flex-wrap:wrap}
 #cocuyoComposer .cocuyo-pilot-actions button{padding:10px 12px}
 #cocuyoComposer .cocuyo-record-time:empty{display:none}
}
@media(max-width:370px){
 body.studio-workbench.studio-simple .studio-public-nav .st-nav a{font-size:11px}
 body.studio-workbench.studio-simple .studio-public-nav .st-nav>a.st-cine{font-size:11px}
 body.studio-workbench.studio-simple .studio-public-nav .st-nav-group>button{width:18px;padding:2px}
}

/* El panel de Video se define en estudio-video-layout.css. */

/* El mismo compositor se abre sobre el editor sin perder su borrador. */
#cocuyoChat{box-sizing:border-box;width:min(640px,calc(100vw - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--border2);border-radius:24px;background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px #0009}
#cocuyoChat:not([open]){display:none}
#cocuyoChat::backdrop{background:#040604b8;backdrop-filter:blur(5px)}
#cocuyoChat #cocuyoComposer{border:0;margin:0;border-radius:0;padding:32px}
#cocuyoChat #cocuyoComposer h2{font-size:29px;letter-spacing:-.9px}
#cocuyoChat #cocuyoComposer>p{font-size:14px}
#cocuyoChat .cocuyo-chat-close{position:sticky;z-index:2;float:right;top:15px;margin:15px 15px -51px 0;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--surface2,var(--surface));color:var(--muted2);font-size:25px;cursor:pointer}
#cocuyoComposer [data-cocuyo-reset]{border:0;background:transparent;color:var(--muted2);font:500 12px var(--font);padding:12px 0;cursor:pointer}
#cocuyoComposer [data-cocuyo-reset][hidden]{display:none}
#cocuyoComposer .cocuyo-user-message{padding:12px 15px;background:var(--surface2);border:1px solid var(--border);border-radius:14px 14px 4px 14px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
#cocuyoChat button:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
#cocuyoEnergy:hover{border-color:var(--studio-accent);background:var(--surface2)}
[data-cocuyo-mobile-energy]{font:600 9px/1.2 var(--font);color:var(--studio-accent);font-variant-numeric:tabular-nums}
.sm-create[data-low=true] [data-cocuyo-mobile-energy]{color:var(--danger,#ff9b8f)}
.sm-nav .sm-create:has([data-cocuyo-mobile-energy]:not([hidden])){gap:2px}
@media(max-width:600px){#cocuyoChat{width:calc(100vw - 16px);max-height:calc(100dvh - 20px);border-radius:20px}#cocuyoChat #cocuyoComposer{padding:26px 18px 20px}#cocuyoChat #cocuyoComposer h2{font-size:26px}.cocuyo-pilot-actions{gap:10px}}
@media(prefers-reduced-motion:no-preference){#cocuyoChat[open]{animation:cocuyo-chat-in .18s ease-out}@keyframes cocuyo-chat-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}}


/* cocuyo-css: assets/css/estudio-cabecera-movil.css */
/* Móvil: Cocuyo y los tres editores comparten una sola fila. */
@media (max-width: 900px) {
 body.studio-workbench,
 body.studio-workbench.studio-simple {
  --st-top: calc(64px + env(safe-area-inset-top, 0px));
  --sm-top: var(--st-top);
 }
 body.studio-workbench header.studio-public-nav {
  --cn-top: var(--st-top);
  box-sizing: border-box;
  height: var(--st-top);
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: env(safe-area-inset-top, 0px) 14px 0;
 }
 body.studio-workbench .studio-public-nav .st-brand-slot { flex: none; }
 body.studio-workbench .studio-public-nav .brand .wordmark { font-size: 20px; }
 body.studio-workbench .studio-public-nav .cocuyologo { display: none; }
 body.studio-workbench .studio-public-nav .st-nav {
  display: flex;
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  gap: 2px;
  justify-content: space-between;
 }
 /* Comunidad (comunidad-nav.js) no cabe en la fila: caía a una segunda línea
    recortada bajo Imagen. En móvil se llega desde el ☰ de la portada. */
 body.studio-workbench .studio-public-nav .cn-community-entry { display: none; }
 body.studio-workbench .studio-public-nav .st-nav-group { flex: 1; min-width: 0; justify-content: center; }
 body.studio-workbench .studio-public-nav .st-nav-group > a { display: flex; align-items: center; min-height: 44px; padding: 12px 2px; font-size: 12px; }
 body.studio-workbench .studio-public-nav .st-nav-group > button { flex: none; width: 22px; min-height: 44px; padding: 4px; }
 body.studio-workbench .studio-public-nav .st-actions:not(:has(.st-language:not([hidden]))),
 body.studio-workbench.studio-simple[data-studio-page="explore"] .st-actions:has(#cocuyoEnergy:not([hidden])),
 body.studio-workbench #cocuyoEnergy { display: none !important; }
 /* Invitados pueden cambiar idioma sin abrir la entrada de Cuenta. */
 body.studio-workbench .studio-public-nav .st-actions:has(.st-language:not([hidden])) {
  display: flex !important;
  position: static;
  flex: none;
  /* Ancho según el contenido: en tableta el selector muestra «🌐 ES» (75 px)
     y con 44 px fijos se salía por la derecha. */
  width: auto;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  background: transparent;
 }
 body.studio-workbench .studio-public-nav .st-actions > :not(.st-language) { display: none !important; }
 body.studio-workbench .studio-public-nav .st-language:not([hidden]) { display: flex; }
 /* Ocultar el contador también elimina la franja y su espacio reservado. */
 body.studio-workbench.studio-simple[data-studio-page="explore"]:has(#cocuyoEnergy:not([hidden])) #pg-explore { padding-top: 0; }
 body.studio-workbench .studio-public-nav .st-model-panel {
  max-height: calc(100dvh - var(--st-top) - var(--sm-bottom, 76px) - env(safe-area-inset-bottom, 0px) - 10px);
 }
}
@media (max-width: 370px) {
 body.studio-workbench header.studio-public-nav { gap: 6px; padding-inline: 10px; }
 body.studio-workbench .studio-public-nav .brand .wordmark { font-size: 18px; }
 body.studio-workbench.studio-simple .studio-public-nav .st-nav-group > a { padding-inline: 1px; }
 body.studio-workbench .studio-public-nav .st-nav-group > button { width: 18px; padding: 2px; }
}
/* La experiencia nueva se carga después: conservar también su zona segura. */
@media(max-width:900px){
 html[data-experiencia="nueva"] body.studio-workbench.studio-simple:not(.experiencia-facil){--st-top:calc(64px + env(safe-area-inset-top,0px));--sm-top:var(--st-top)}
 html[data-experiencia="nueva"] body.studio-workbench.studio-simple header.studio-public-nav{--st-top:inherit;height:var(--st-top);grid-template-rows:64px}
}


/* cocuyo-css: assets/css/estudio-video-layout.css */
/* Video: una superficie de creación, controles alineados y acción al pie.
   Referencia visual: editor Video de Higgsfield. Se conservan los nodos,
   eventos y límites reales; sólo cambia la distribución del compositor. */
.studio-param-copy{display:contents}
.studio-param-label{display:none}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:static;align-items:stretch;margin:0;padding:0;border:0;background:none;
}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>.lbl,
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>.cost{display:none}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>div{min-width:0}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param{
 display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;height:auto;gap:6px;margin:0;padding:10px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font:550 13px/1.35 var(--font);color:var(--text);box-shadow:none;
}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>.param[data-pop="model"]{
 grid-column:1/-1;justify-content:flex-start;min-height:52px;padding:12px;gap:10px;border-color:var(--border2);background:var(--bg);font-size:14px;font-weight:600;
}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>.param[data-pop="model"]::before{display:none}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param .car{margin-left:auto}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param:is(:hover,:focus-visible,.open){background:var(--surface3);border-color:var(--studio-accent)}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>.param[data-pop="model"]>span:not(.car):not(.tile):not(.mrcbox){white-space:normal;overflow-wrap:anywhere;text-align:left}
body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #omniLimits{grid-column:1/-1}

/* 10-oct-2026 (dueño: «para crear video: eso estaba bien a la izquierda, lo
   pusiste abajo, se ve mal»): el panel de crear video va a la izquierda en
   cualquier ventana de ordenador (desde 1001 px de ancho), también si es baja
   (portátil con zoom, panel del navegador, barras abiertas). Antes, por debajo
   de 600 px de alto el compositor caía debajo del lienzo y casi fuera de la
   pantalla; ahora el panel se compacta y su contenido se desplaza dentro. */
@media(min-width:1001px){
 body.studio-workbench.studio-simple[data-studio-mode="video"][data-studio-page="home"]:not(.experiencia-facil){--video-pane:clamp(320px,29vw,370px);height:100dvh;overflow:hidden}
 body.studio-workbench.studio-simple[data-studio-mode="video"][data-studio-page="home"]:not(.experiencia-facil) .app{height:100dvh;min-height:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) #pg-home>.studio-wrap{max-width:none;margin:0;padding:0;height:calc(100dvh - var(--st-top));box-sizing:border-box}
 /* Sin cabecera visible, pero el h1 «Estudio de video» sigue para lectores de pantalla (único h1 de la vista). */
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) .studio-workhead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) .studio-workhead button{display:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) #studioWorkspace{display:grid;grid-template-columns:var(--video-pane,350px) minmax(0,1fr);gap:0;height:calc(100dvh - var(--st-top));min-height:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) #studioEditor{height:100%;min-height:0;position:relative;top:0;margin:0;scroll-margin:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa{position:static;inset:auto;display:block;width:100%;height:100%;padding:0;pointer-events:auto;z-index:50}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .mesa-in{
  display:flex;flex-direction:column;gap:0;width:100%;height:100%;max-height:none;min-height:0;padding:20px 18px 18px;border:0;border-right:1px solid var(--border);border-radius:0;overflow:hidden;box-shadow:none;box-sizing:border-box;background:var(--surface);
 }
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .studio-editor-head{display:flex;align-items:center;flex:none;min-height:24px;margin:0 0 16px;padding:0;border:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .studio-editor-head>span:first-child{font:600 16px/1.3 var(--font);letter-spacing:-.02em;color:var(--text)}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa :is(.studio-editor-badge,.mesa-top){display:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel{flex:none;margin:0 0 16px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel .param{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:12px;border:1px solid var(--border2);border-radius:12px;background:var(--bg);color:var(--text);font:600 15px/1.35 var(--font);text-align:left;box-shadow:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel .param>span:not(.tile):not(.mrcbox):not(.car){min-width:0;overflow-wrap:anywhere}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel :is(.tile,.mrcbox){flex:0 0 28px;width:28px;height:28px;border-radius:8px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel .car{margin-left:auto;flex:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel .param:is(:hover,:focus-visible){border-color:var(--studio-accent);background:var(--surface2)}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .composer{display:flex;flex-direction:column;flex:1;gap:12px;min-height:0;padding:0 4px 0 0;margin-right:-4px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray{order:1;flex:none;min-height:0;max-height:none;overflow:visible;margin:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #attrow{max-height:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #ta{order:2;flex:1 1 160px;min-height:112px;max-height:240px;height:auto;margin:0;padding:14px;border:1px solid var(--border2)!important;border-radius:12px;background:var(--bg)!important;font-size:15px;line-height:1.6;overflow:auto}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #ta:focus-visible{outline:2px solid var(--studio-accent);outline-offset:-2px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #promptLimit{order:3;flex:none;margin:-5px 0 0;padding:0 2px;border:0;background:none;font-size:11px;line-height:1.45}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar{order:4;flex:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #refQuoteStatus{order:5;flex:none;margin:0;padding:9px;font-size:11px;line-height:1.4}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param:not([data-pop="model"]){position:relative;justify-content:flex-start;min-height:58px;padding:9px 10px;gap:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param:not([data-pop="model"])>.ic{display:none}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .studio-param-copy{display:flex;flex-direction:column;gap:5px;min-width:0;width:100%;text-align:left}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .studio-param-label{display:block;font:450 11px/1.3 var(--font);color:var(--muted2);white-space:nowrap}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .studio-param-value{padding-right:16px;font:550 13px/1.3 var(--font);font-variant-numeric:tabular-nums;color:var(--text)}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param:not([data-pop="model"])>.car{position:absolute;right:10px;bottom:11px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>span:not(.lbl):not(.cost){grid-column:1/-1}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #headicons{order:initial;flex:none;position:static;inset:auto;display:flex;width:100%;margin:0;padding:16px 0 0;border:0;background:var(--surface)}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #headicons .roundbtn{width:100%;min-height:48px;margin:0;padding:12px 14px;font-size:14px;border-radius:11px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) #studioResults{min-width:0;width:100%;height:100%;max-height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-margin:0;border:0;border-radius:0;padding:24px;box-sizing:border-box}
}
@media(min-width:1001px) and (max-height:760px){
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .mesa-in{padding:14px 16px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .studio-editor-head{margin-bottom:10px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .composer{gap:9px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel{margin-bottom:12px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel .param{min-height:52px;padding:10px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #ta{min-height:96px;max-height:160px;flex-basis:140px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #headicons{padding-top:12px}
}
/* Auditoría v338: a 600 px justos (1366×600) seguía la regla de 760 y Formato /
   Resolución / Duración quedaban 29 px bajo «Generar». El escalón compacto entra a 620. */
@media(min-width:1001px) and (max-height:620px){
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .mesa-in{padding:10px 14px 12px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .studio-editor-head{min-height:20px;margin-bottom:6px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .composer{gap:8px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel{margin-bottom:8px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #studioVideoModel .param{min-height:44px;padding:8px 10px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #ta{min-height:72px;max-height:120px;flex-basis:96px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar .param:not([data-pop="model"]){min-height:48px;padding-block:7px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #headicons{padding-top:8px}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #headicons .roundbtn{min-height:44px;padding-block:10px}
}
@media(max-width:1000px){
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa .composer{min-height:0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar{gap:7px;padding:9px 0 0}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #parambar>.param[data-pop="model"]{margin:0;min-height:50px;border:1px solid var(--border2);border-radius:11px;justify-content:flex-start}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #promptLimit{background:none;border:0;padding:5px 2px 0;font-size:10px;line-height:1.5}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #ta{min-height:130px;max-height:220px;margin:0;padding:13px;border:1px solid var(--border2)!important;border-radius:12px;font-size:14px;line-height:1.6}
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #headicons{position:static;inset:auto;margin:0;padding:12px 0}
}


/* cocuyo-css: assets/css/estudio-video-operaciones.css */
/* Selector nativo compacto; el compositor y sus acciones conservan su lugar. */
#studioVideoOperations[hidden]{display:none!important}
#studioVideoOperations{flex:none;min-width:0;margin:0 0 12px}
#mesa .param[data-video-operation] .car[hidden]{display:none!important}
.video-operation-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.video-operation-tabs.video-operation-return{grid-template-columns:1fr}
.video-operation-tabs button{min-width:0;min-height:44px;padding:7px 2px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:550 11px/1.2 var(--font);cursor:pointer;transition:background .16s,color .16s;overflow-wrap:anywhere}
.video-operation-tabs button[aria-pressed=true]{background:var(--surface3);color:var(--text);box-shadow:0 1px 4px #0003}
.video-operation-tabs button:hover:not(:disabled){color:var(--studio-accent)}
.video-operation-tabs button:disabled{opacity:.5;cursor:not-allowed}
.video-operation-tabs button:focus-visible{outline:2px solid var(--studio-accent);outline-offset:1px}
.video-operation-hint{margin:8px 2px 0;color:var(--muted2);font:400 11px/1.55 var(--font)}
@media(prefers-reduced-motion:reduce){.video-operation-tabs button{transition:none}}


/* cocuyo-css: assets/css/estudio-video-movimiento.css */
/* Controles propios de Movimiento, sin parámetros que el proveedor no admite. */
body[data-video-operation="motion"] #studioVideoModel,
body[data-video-operation="motion"] #parambar [data-pop="model"]{display:none!important}
.video-operation-beta{display:inline-block;margin-right:6px;padding:1px 5px;border:1px solid var(--border);border-radius:4px;color:var(--muted2);font:600 9px/1.5 var(--font);vertical-align:1px}
.video-motion-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 0;min-width:0}
.video-motion-fields label{display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--muted2);font:500 11px/1.3 var(--font)}
.video-motion-fields select{width:100%;min-width:0;min-height:44px;padding:7px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font:500 12px/1.3 var(--font)}
.video-motion-fields select:focus-visible,.video-motion-fields input:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
.video-motion-fields .video-motion-sound{grid-column:1/-1;flex-direction:row;align-items:center;gap:9px;min-height:44px;cursor:pointer;color:var(--text)}
.video-motion-sound input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--studio-accent)}
.video-motion-sound span{overflow-wrap:anywhere}


/* cocuyo-css: assets/css/estudio-referencias-acabado.css */
/* Acabado de las referencias: mismos controles, permisos y límites.
   Superficies discretas, miniaturas claras y acciones visibles con teclado. */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray{
 --ref-size:74px;gap:10px;align-items:center;scrollbar-color:var(--border2) transparent;
}
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray{--ref-size:64px}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray #attrow{
 box-sizing:border-box;gap:10px!important;min-width:0;align-items:center;scrollbar-color:var(--border2) transparent;scrollbar-width:thin;
}
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #attrow{
 flex-wrap:nowrap!important;max-width:calc(100% - 74px);padding:4px 2px!important;scroll-padding-inline:3px;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip{
 box-sizing:border-box;flex:0 0 var(--ref-size);width:var(--ref-size);height:var(--ref-size);border:1px solid var(--border2);border-radius:12px;background:var(--surface2);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);isolation:isolate;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip:focus-within{
 border-color:var(--studio-accent);box-shadow:inset 0 0 0 1px var(--studio-accent);
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip :is(img,video){
 display:block;width:100%;height:100%;object-fit:cover;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .x{
 /* 9-oct-2026: X de 20 px (toque de 24) en la esquina, a la vista al pasar el
    ratón o con el foco dentro; el centro queda libre para ver y arrastrar. */
 display:grid;place-items:center;position:absolute;top:0;right:0;z-index:5;box-sizing:border-box;width:24px;height:24px;padding:2px;opacity:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--negro-abismo,#050505) 80%,transparent);background-clip:content-box;color:var(--text);box-shadow:none;cursor:pointer;transition:opacity .12s ease,background-color .12s ease;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip:is(:hover,:focus-within) .x{opacity:1}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .x:is(:hover,:focus-visible){
 background-color:var(--peligro,#b91c1c);color:var(--blanco-luz);
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .x svg{width:12px;height:12px;stroke-width:2}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .attver{
 background:color-mix(in srgb,var(--bg) 12%,transparent);color:var(--blanco-luz);pointer-events:none;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .attver:is(:hover,:focus-visible){
 opacity:1;background:color-mix(in srgb,var(--bg) 32%,transparent);
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .attver:focus-visible{outline-offset:-3px}
/* Número de orden pequeño abajo a la izquierda; un clic abre la vista previa y,
   con dos o más, la miniatura se arrastra (estudio-referencias-orden.js). */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .att-num{
 position:absolute;left:3px;bottom:3px;z-index:3;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:5px;background:color-mix(in srgb,var(--negro-abismo,#050505) 78%,transparent);color:var(--blanco-luz,#f5f5f5);font:650 10px/16px var(--font);font-variant-numeric:tabular-nums;text-align:center;pointer-events:none;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip:has(.attrol) .att-num{bottom:calc(24px + 3px)}
/* 9-oct-2026: con «No admitida» abajo, el número sube (no se tapan); en una
   subida, junto a su anillo. */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip.sobra .att-num{top:3px;bottom:auto}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip.up .att-num{top:auto;bottom:3px}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip:not(.up){cursor:zoom-in;touch-action:pan-x}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip.ref-orden-movible{cursor:grab}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip :is(img,video){-webkit-user-drag:none;user-select:none}
/* En Video, el icono de ampliar de una imagen sale al pasar el ratón, como en Imagen (el de reproducir de un video sigue a la vista). */
@media(hover:hover){
 body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip[data-kind="image"] .attver{opacity:0}
 body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip[data-kind="image"]:is(:hover,:focus-within) .attver{opacity:1}
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip:has(.attrol){height:calc(var(--ref-size) + 24px)}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip:has(.attrol) :is(img,video){height:var(--ref-size)}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attrol{
 appearance:auto;min-height:25px;height:25px;padding:3px 5px 3px 8px;background:var(--surface2);color:var(--text);border-top:1px solid var(--border2);font:500 11px/1.3 var(--font);text-align:left;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip[data-kind="video"] .attver svg{
 box-sizing:border-box;width:32px;height:32px;padding:7px;border:1px solid color-mix(in srgb,var(--text) 24%,transparent);border-radius:50%;background:color-mix(in srgb,var(--bg) 78%,transparent);filter:none;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .attchip[data-kind="audio"]{
 flex-basis:160px;width:160px;height:76px;padding:11px 34px 10px 11px;background:linear-gradient(135deg,var(--surface3),var(--surface2));
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .att-media-name{margin-top:7px;font-size:11px;font-weight:500;line-height:1.3;color:var(--text)}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray .att-duration{bottom:5px;right:5px;padding:3px 5px;border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:10px}

/* Imagen: el siguiente adjunto se añade junto a las miniaturas, en un solo botón. */
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #imageRefControls{flex:0 0 var(--ref-size);width:var(--ref-size)}
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #addImageRefs{
 width:var(--ref-size);height:var(--ref-size);min-height:var(--ref-size);border:1px dashed var(--border2);border-radius:12px;background:var(--surface2);color:var(--text);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
}
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #imageRefIcons{
 display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border2);border-radius:50%;background:var(--surface3);color:var(--text);
}
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #imageRefIcons svg{width:19px;height:19px;stroke-width:1.7}
body.studio-workbench[data-studio-mode="image"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #addImageRefs:disabled{opacity:.5;cursor:not-allowed}

/* Video: todos los tipos que admite el modelo permanecen a la vista. */
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid{
 flex:1 0 100%;width:100%;max-width:100%;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .refwrap-compact{flex:1 1 72px;min-width:0}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .ref-add-compact{
 display:flex;position:relative;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:100%;min-height:84px;height:84px;padding:10px 7px;border:1px solid var(--border2);border-radius:12px;background:var(--surface2);color:var(--text);font:500 11px/1.3 var(--font);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .ref-orb{
 display:grid;place-items:center;box-sizing:border-box;width:30px;height:30px;margin:0;border:1px solid var(--border2);border-radius:50%;background:var(--surface3);color:var(--muted2);transform:none;box-shadow:none;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .ref-orb svg{width:17px;height:17px;stroke-width:1.6}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .ref-add-count{
 position:absolute;top:7px;right:8px;color:var(--muted2);font:500 10px/1.2 var(--font);font-variant-numeric:tabular-nums;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray:has(.attchip) #refgrid{
 flex:0 1 auto;width:auto;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray:has(.attchip) #refgrid .refwrap-compact{flex:0 1 auto}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray:has(.attchip) #refgrid .ref-add-compact{
 flex-direction:row;gap:6px;width:auto;height:44px;min-height:44px;padding:8px;border-radius:10px;
}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray:has(.attchip) #refgrid .ref-orb{width:24px;height:24px;border:0;background:none}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray:has(.attchip) #refgrid .ref-add-count{position:static;color:var(--studio-accent)}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray :is(#addImageRefs,.ref-add-compact):is(:hover,:focus-visible,[aria-expanded="true"]):not(:disabled){
 border-color:var(--studio-accent);background:var(--studio-active);color:var(--text);
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray :is(button,select):focus-visible{
 outline:2px solid var(--studio-accent);outline-offset:-3px;
}

/* Los menús mantienen su posicionamiento y top layer originales. */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .refpop{
 padding:14px;border-color:var(--border2);border-radius:14px;background:var(--surface);box-shadow:var(--sombra-3);
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .refpop .ref-pop-title{padding:2px 2px 10px;font-size:13px;line-height:1.4;letter-spacing:-.01em}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .refpop .ref-pop-hint{margin:0 2px 12px;color:var(--muted2);font-size:12px;line-height:1.55;text-align:left}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .refpop button{gap:10px;min-height:44px;border:1px solid transparent;border-radius:9px;font-size:12px;line-height:1.4}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .refpop button:is(:hover,:focus-visible):not(:disabled){border-color:var(--border2);background:var(--surface3);color:var(--text)}
@media(hover:none){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .x{opacity:1}
}
@media(hover:none),(pointer:coarse){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray .attchip .attver{opacity:1;background:transparent}
}
@media(prefers-reduced-motion:no-preference){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageReferenceTray :is(.attchip,.x,#addImageRefs,.ref-add-compact){transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .12s ease}
}
/* Sólo éxitos de adjuntos: estado de 3 s bajo la cabecera, lejos de Generar. */
.studio-reference-status{position:fixed;top:calc(var(--st-top,64px) + env(safe-area-inset-top,0px) + 12px);right:20px;z-index:70;box-sizing:border-box;max-width:calc(100vw - 32px);pointer-events:none;color:var(--text);font:500 12px/1.45 var(--font);overflow-wrap:anywhere}
.studio-reference-status:not(:empty){padding:10px 14px;border:1px solid var(--border2);border-radius:12px;background:var(--surface2);box-shadow:var(--sombra-3)}
@media(max-width:600px){.studio-reference-status{right:16px}}
/* Elección explícita de Google: mantiene pequeños los controles de adjuntos. */
#mesa #refgrid .ref-mode-switch{display:flex;flex:1 0 100%;gap:4px;padding:3px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2)}
#mesa #refgrid .ref-mode-switch button{flex:1;min-width:0;min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:7px;background:none;color:var(--muted2);font:500 12px/1.25 var(--font);cursor:pointer}
#mesa #refgrid .ref-mode-switch button[aria-pressed="true"]{border-color:var(--border2);background:var(--surface3);color:var(--text)}
#mesa #refgrid .ref-mode-hint{flex:1 0 100%;margin:0;color:var(--muted2);font:400 11px/1.5 var(--font)}
@media(max-width:900px){
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray #imageRefControls{flex:0 0 44px;width:44px}
 body.studio-workbench.studio-simple.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa #imageReferenceTray #addImageRefs{width:44px;height:44px;min-height:44px;border-radius:11px}
}


/* cocuyo-css: assets/css/estudio-sesiones.css */
/* Biblioteca flotante de sesiones; mismo control en escritorio y móvil. */
#studioSessionPanel.cs-library{box-sizing:border-box;position:fixed;inset:auto;margin:0;display:flex;flex-direction:column;padding:0;overflow:hidden;width:410px;border:1px solid var(--escarcha-borde);border-radius:16px;background:var(--negro-elevado);color:var(--blanco-luz);box-shadow:var(--sombra-3);font:13px/1.4 var(--fuente);z-index:240}
#studioSessionPanel.cs-library[hidden]{display:none!important}
#studioSessionPanel.cs-library .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
#studioSessionPanel.cs-library .cs-search input{border:0!important;box-shadow:none!important;outline:none!important;background:transparent}
#studioSessionPanel.cs-library .cs-search:focus-within{border-color:var(--verde-cocuyo);box-shadow:0 0 0 1px var(--verde-cocuyo)}
.cs-library *{box-sizing:border-box}.cs-library button,.cs-library input,.cs-library select{font:inherit;color:inherit}.cs-library button{cursor:pointer}.cs-library svg{width:18px;height:18px;flex:none}.cs-library button:disabled{opacity:.45;cursor:wait}.cs-library :is(button,input,select):focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
.cs-heading{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 7px;flex:none}.cs-heading strong{font-size:16px;font-weight:600;letter-spacing:-.025em}.cs-heading button{display:grid;place-items:center;width:36px;height:36px;border:0;background:transparent;border-radius:8px;color:var(--gris-humo)}
.cs-library-links{display:flex;gap:8px;padding:4px 14px 14px;border-bottom:1px solid var(--negro-borde);flex:none}.cs-library-links button{display:flex;align-items:center;gap:8px;min-height:42px;border:1px solid var(--negro-borde);background:transparent;border-radius:9px;padding:8px 10px;font-size:12px}.cs-library-links button:first-child{flex:1}.cs-library-links svg{color:var(--verde-cocuyo);width:17px;height:17px}.cs-library-links button:hover{background:var(--negro-abismo)}
.cs-session-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 9px;flex:none}.cs-session-title h2{margin:0;font-size:13px;font-weight:600}.cs-session-title select{font-size:11px;padding:6px 3px;background:var(--negro-elevado);border:0;color:var(--gris-humo);max-width:150px}.cs-search{display:flex;gap:9px;align-items:center;padding:0 11px;margin:0 14px 10px;min-height:40px;border:1px solid var(--negro-borde);border-radius:9px;flex:none;color:var(--gris-humo)}.cs-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;min-height:38px;font-size:12px}.cs-search:focus-within{border-color:var(--verde-cocuyo)}
.cs-filters{display:flex;gap:5px;padding:0 14px 11px;flex:none}.cs-filters button{flex:1;min-height:34px;padding:6px 9px;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--gris-humo);font-size:11px}.cs-filters button[aria-pressed=true]{background:color-mix(in srgb,var(--verde-cocuyo) 10%,transparent);color:var(--verde-cocuyo);border-color:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent)}
#sessions.cs-session-list{flex:1;min-height:0;max-height:340px;overflow:auto;overscroll-behavior:contain;padding:0 8px 8px;margin:0;scrollbar-width:thin;display:block}.cs-session-list h3{padding:6px 8px;margin:0;color:var(--gris-humo);font-size:10px;font-weight:500;letter-spacing:.04em}.cs-session{display:flex;align-items:center;gap:2px;border:1px solid transparent;border-radius:10px;padding:1px;margin:2px 0}.cs-session.is-current{background:color-mix(in srgb,var(--verde-cocuyo) 5%,transparent);border-color:color-mix(in srgb,var(--verde-cocuyo) 12%,transparent)}.cs-session:hover{background:var(--negro-abismo)}
.cs-session-open{display:flex;align-items:center;gap:10px;min-width:0;flex:1;min-height:55px;border:0;background:transparent;padding:8px;text-align:left;border-radius:8px}.cs-folder{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:7px;background:var(--negro-abismo);color:var(--gris-humo)}.is-current .cs-folder{color:var(--verde-cocuyo)}.cs-session-open>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.cs-session-open b{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-session-open small{font-size:10px;color:var(--gris-humo)}.cs-kinds{display:flex;align-items:center;gap:3px}.cs-kinds svg{width:12px;height:12px;color:var(--gris-humo)}.cs-session-actions{display:flex;gap:1px;padding-right:4px}.cs-session-actions button{display:grid;place-items:center;width:30px;min-height:38px;background:transparent;border:0;border-radius:6px;color:var(--gris-humo)}.cs-session-actions svg{width:14px;height:14px}.cs-session-actions button:hover,.cs-session-actions button[aria-pressed=true]{color:var(--verde-cocuyo);background:color-mix(in srgb,var(--verde-cocuyo) 6%,transparent)}
.cs-rename{display:grid;gap:8px;padding:10px;border:1px solid var(--verde-cocuyo);border-radius:9px;margin:3px 0}.cs-rename input{min-width:0;width:100%;background:var(--negro-abismo);border:1px solid var(--negro-borde);border-radius:6px;padding:9px}.cs-rename>div{display:flex;gap:8px;justify-content:flex-end}.cs-rename button{min-height:34px;padding:6px 11px;background:transparent;border:1px solid var(--negro-borde);border-radius:7px;font-size:11px}.cs-rename button[type=submit]{background:var(--verde-cocuyo);color:var(--tinta-sobre-verde);border-color:var(--verde-cocuyo)}
.cs-empty,.cs-error{margin:0;padding:13px 16px;font-size:12px;color:var(--gris-humo);flex:none}.cs-error{color:var(--peligro)}.cs-empty[hidden],.cs-error[hidden]{display:none}.cs-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--negro-borde);flex:none}.cs-footer button{display:flex;align-items:center;gap:8px;min-height:39px;padding:8px 12px;border:1px solid var(--negro-borde);background:var(--negro-abismo);border-radius:8px;font-size:12px}.cs-footer button:first-child{color:var(--verde-cocuyo)}.cs-footer .cs-retry{background:transparent;border:0;font-size:11px;color:var(--gris-humo)}
@media(max-width:600px){#studioSessionPanel.cs-library{border-radius:13px}.cs-session-actions button{min-width:34px;min-height:44px}.cs-session-open{min-height:59px;gap:7px}.cs-kinds{display:none}.cs-session-open b{font-size:13px}.cs-library-links button{min-height:44px}.cs-filters button{min-height:39px}.cs-rename button{min-height:40px}}
.cs-library .cs-storage{flex:none;min-height:0;padding:0 16px 10px;color:var(--gris-humo);font-size:10px}.cs-library .cs-storage:empty{display:none}
@media(max-width:900px){
 #studioSessionPanel.cs-library{border-radius:20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 #studioSessionPanel.cs-library .cs-heading{padding:12px 16px 8px}
 #studioSessionPanel.cs-library .cs-heading button{width:44px;height:44px}
 #studioSessionPanel.cs-library .cs-search{min-height:46px}
 #studioSessionPanel.cs-library .cs-search input{font-size:16px;min-height:44px}
 #studioSessionPanel.cs-library .cs-session-title select{font-size:16px;min-height:44px;max-width:160px}
 #studioSessionPanel.cs-library .cs-filters button{min-height:44px;font-size:12px}
 #studioSessionPanel.cs-library #sessions.cs-session-list{flex:1 0 auto;max-height:280px}
 #studioSessionPanel.cs-library .cs-session-actions button{width:44px;min-width:44px;min-height:44px}
 #studioSessionPanel.cs-library .cs-rename input{font-size:16px;min-height:44px}
 #studioSessionPanel.cs-library :is(.cs-footer button,.cs-rename button){min-height:44px}
}


/* cocuyo-css: assets/css/estudio-biblioteca.css */
/* Biblioteca: separar lo generado de los archivos de referencia propios. */
.studio-assets-sources{display:flex;gap:6px;margin:8px 0 22px;padding:5px;width:max-content;max-width:100%;border:1px solid #292c27;border-radius:14px;background:#10120f}
.studio-assets-sources button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 18px;border:0;border-radius:10px;background:transparent;color:#aeb4a7;font:550 14px var(--font,sans-serif);cursor:pointer;transition:background .16s,color .16s}
.studio-assets-sources button.on{background:#28331f;color:#d6fca8}
.studio-assets-sources button:hover{color:#eff5e8;background:#20251b}
.studio-assets-sources button:focus-visible{outline:2px solid var(--studio-accent,#aff33e);outline-offset:2px}
.studio-assets-sources button span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.72;min-width:16px}
.studio-assets-sources .ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.studio-simple .st-actions>.studio-session-switch{margin:0;position:relative}
body.studio-simple .st-actions #studioSessionToggle{padding:0;min-width:42px;width:42px;height:42px;min-height:42px;display:grid;place-items:center}
body.studio-simple .st-actions #studioSessionToggle>.ic{width:20px;height:20px;color:inherit}
body.studio-simple .st-actions #studioSessionToggle[aria-expanded=true]{border-color:#779749;color:#cbf996;background:#20291a}
.studio-assets-storage{font-size:12px;line-height:1.5;color:#a4ad9b;margin-top:12px}
@media(min-width:1001px){#fselbar.fsel-video-side{left:calc(var(--video-pane,370px) + 20px);right:20px;margin-inline:auto;max-width:calc(100vw - var(--video-pane,370px) - 40px);bottom:16px!important}}
@media(max-width:600px){.studio-assets-sources{width:100%;margin:8px 0 16px}.studio-assets-sources button{flex:1;padding:10px 12px}.studio-assets-actions{gap:8px}.studio-assets-heading p{font-size:13px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.studio-assets-sources button{transition:none}}

/* Pantallas táctiles: controles de Creaciones con objetivo de 44 px. Las
   casillas de selección conservan su tamaño visible y amplían sólo la zona
   de toque con un pseudo-elemento transparente. */
@media(pointer:coarse){
 #pg-library :is(.studio-assets-sources button,.bv-accion,.bv-busca,.bv-chip,.bv-sel){min-height:44px}
 .bv-tar .fsel::after{content:"";position:absolute;inset:-9px}
 .bv-dia .fsel-dia{position:relative}
 .bv-dia .fsel-dia::after{content:"";position:absolute;inset:-11px}
}


/* cocuyo-css: assets/css/estudio-compartir.css */
/* Sólo el diálogo de compartir. No modifica posiciones del Estudio. */
.cshare-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid #30352d;border-radius:22px;background:#131610;color:#f1f4ec;font:400 14px/1.55 var(--font,sans-serif);box-shadow:0 24px 90px #0009;overflow:auto}
.cshare-dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}
.cshare-dialog header{display:flex;align-items:center;gap:16px;justify-content:space-between}
.cshare-dialog h2{margin:0;font-size:22px;line-height:1.25;font-weight:650;letter-spacing:-.025em}
.cshare-dialog p{margin:14px 0;color:#b8c0af}
.cshare-dialog button{box-sizing:border-box;min-height:44px;border:1px solid #3b4433;border-radius:12px;background:#20261b;color:#edf4e5;font:600 14px var(--font,sans-serif);padding:10px 15px;cursor:pointer}
.cshare-dialog [data-share-close]{flex:0 0 44px;padding:0;font-size:26px;line-height:1;border:0;background:transparent;color:#cbd2c4}
.cshare-dialog button:hover{background:#303a26;color:#fff}
.cshare-dialog button:focus-visible{outline:2px solid #aff33e;outline-offset:3px}
.cshare-dialog .cshare-primary{width:100%;background:#aff33e;color:#142004;border-color:#aff33e}
.cshare-dialog .cshare-primary:hover{background:#bdfa63}
.cshare-dialog button:disabled{opacity:.55;cursor:wait}
.cshare-dialog .cshare-status{font-size:13px;min-height:40px}
.cshare-dialog .cshare-fallback{display:grid;gap:10px}
.cshare-dialog .cshare-fallback small{color:#aeb9a2;line-height:1.55}
.cshare-dialog [hidden]{display:none!important}
@media(max-width:420px){.cshare-dialog{padding:20px}.cshare-dialog h2{font-size:20px}}


/* cocuyo-css: assets/css/estudio-ediciones.css */
/* Edición beta dentro del Estudio; no cambia la distribución del compositor. */
.ce-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 28px);margin:auto;padding:24px;border:1px solid var(--border,#303030);border-radius:20px;background:var(--surface,#151515);color:var(--text,#eee);font:400 14px/1.5 var(--font,sans-serif);overflow:auto;box-shadow:0 24px 100px #000b}
.ce-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}
.ce-dialog [hidden]{display:none!important}
.ce-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.ce-dialog h2{font-size:22px;letter-spacing:-.025em;margin:0;line-height:1.2}
.ce-dialog h3{font-size:15px;margin:0 0 10px}
.ce-dialog .ce-beta{display:inline-block;font-size:11px;font-weight:600;color:var(--accent,#b3f046);background:#b3f04612;border:1px solid #b3f04635;border-radius:6px;padding:2px 6px;margin-bottom:7px}
.ce-dialog button,.ce-dialog select{font:600 13px var(--font,sans-serif);min-height:44px;border:1px solid var(--border,#333);border-radius:10px;padding:10px 14px;background:#232323;color:#f2f2f2;cursor:pointer}
.ce-dialog button:hover{background:#303030}.ce-dialog button:disabled{opacity:.5;cursor:default}
.ce-dialog [data-edit-close]{width:44px;flex:0 0 44px;padding:0;font-size:25px;background:transparent;border:0}
.ce-dialog input,.ce-dialog textarea,.ce-dialog select{accent-color:var(--accent,#b3f046)}
.ce-dialog :is(button,input,textarea,select,a):focus-visible{outline:2px solid var(--accent,#b3f046);outline-offset:3px}
.ce-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0 0 18px}
.ce-preview figure{margin:0;min-width:0;border:1px solid var(--border,#333);border-radius:12px;overflow:hidden;background:#090909}
.ce-preview:has([data-edit-result][hidden]) figure:first-child{grid-column:1/-1;max-width:100%}
.ce-preview:has([data-edit-result][hidden]) img{height:150px}
.ce-preview img{width:100%;height:190px;object-fit:contain;display:block}
.ce-preview figcaption{font-size:12px;color:#bbb;padding:8px 12px;display:flex;justify-content:space-between;gap:12px}
.ce-preview a{color:var(--accent,#b3f046)}
.ce-dialog form{display:grid;gap:16px}
.ce-dialog label.ce-field{display:grid;gap:7px;font-weight:600}
.ce-dialog textarea{box-sizing:border-box;width:100%;min-height:85px;max-height:240px;padding:12px;border:1px solid var(--border,#333);border-radius:10px;background:#0c0c0c;color:#eee;font:400 14px/1.5 var(--font,sans-serif);resize:vertical}
.ce-settings{display:flex;flex-wrap:wrap;gap:12px}.ce-settings label{flex:1;min-width:100px}.ce-settings select{width:100%}
.ce-note,.ce-status{color:#aaa;font-size:13px;margin:0;overflow-wrap:anywhere}.ce-status{min-height:22px;margin-top:12px}
.ce-status:empty{display:none}
.ce-rights{border:1px solid var(--border,#333);border-radius:12px;padding:13px;display:grid;gap:10px}
.ce-rights label{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#ccc}.ce-rights input{flex:0 0 17px;width:17px;height:17px;margin:1px 0 0}
.ce-actions{display:flex;gap:10px;flex-wrap:wrap}.ce-actions button{flex:1}
.ce-dialog .ce-primary{background:var(--accent,#b3f046);color:#152006;border-color:transparent}.ce-dialog .ce-primary:hover{background:#c4ff65}
.ce-quote{border:1px solid #b3f04640;border-radius:12px;background:#b3f04609;padding:13px}.ce-quote strong{display:block;font-size:17px;margin-bottom:3px}.ce-quote span{color:#bbb;font-size:12px}
.ce-history{margin-top:20px;padding-top:17px;border-top:1px solid var(--border,#333)}.ce-history-list{display:grid;gap:8px}
.ce-history-list button{display:flex;justify-content:space-between;gap:16px;align-items:center;text-align:left;font-weight:400;min-width:0}.ce-history-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ce-history-list small{flex-shrink:0;color:#a8b993}
@media(max-width:480px){.ce-dialog{padding:18px}.ce-dialog h2{font-size:20px}.ce-preview img{height:140px}.ce-preview{gap:8px}.ce-preview figcaption{padding:7px;font-size:11px}.ce-actions{flex-direction:column}}


/* cocuyo-css: assets/css/estudio-ejemplos.css */
/* Estados vacíos; no cambia el editor ni la navegación. */
body.studio-workbench .cocuyo-ejemplos{--ej-stroke:#ffffff20;--ej-ink:#f3f4ef;--ej-muted:#b0b5ac}
body.studio-workbench .cocuyo-ejemplos .ej-heading{text-align:left;width:min(100%,1120px);margin:0;align-self:center}
body.studio-workbench .cocuyo-ejemplos .ej-heading>span{display:block;margin-bottom:10px;color:var(--studio-accent);font:600 10px/1.4 var(--font);letter-spacing:.16em}
body.studio-workbench .cocuyo-ejemplos .ej-heading h3{font:600 clamp(25px,2.5vw,34px)/1.15 var(--font);letter-spacing:-.035em;color:var(--ej-ink);margin:0}
body.studio-workbench .cocuyo-ejemplos .ej-heading p{max-width:600px;margin:10px 0 0;font:400 13px/1.6 var(--font);color:var(--ej-muted);text-wrap:pretty}
.cocuyo-ejemplos .ej-model,.ej-dialog .ej-model{display:inline-flex;align-items:center;gap:6px;border:1px solid #ffffff25;border-radius:7px;padding:5px 7px;color:#f1f5ed;background:#0d110ed9;font:500 10px/1.2 var(--font);letter-spacing:0;backdrop-filter:blur(10px);white-space:nowrap}
.ej-model i{width:5px;height:5px;border-radius:50%;background:var(--studio-accent,#a6ef38)}
body.studio-workbench .cocuyo-ejemplos .studio-image-mood{gap:12px}
body.studio-workbench .cocuyo-ejemplos .ej-image-tile{aspect-ratio:auto;padding-bottom:76px;border-radius:16px;border:1px solid var(--ej-stroke);background:linear-gradient(150deg,#1b2016,#11150f)}
.cocuyo-ejemplos .ej-image-photo{display:block;aspect-ratio:4/3;overflow:hidden}
body.studio-workbench .cocuyo-ejemplos .ej-image-tile img{object-fit:cover;filter:none}
body.studio-workbench .cocuyo-ejemplos .ej-image-tile::after{display:none}
.cocuyo-ejemplos .ej-image-tile>.ej-model{position:absolute;top:11px;left:11px;z-index:2;max-width:calc(100% - 22px)}
body.studio-workbench .cocuyo-ejemplos .ej-image-open{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;width:100%;height:100%;padding:16px;margin:0;border:0;border-radius:15px;background:none;color:#fff;text-align:left;cursor:pointer}
.cocuyo-ejemplos .ej-image-open>span{min-width:0}
.cocuyo-ejemplos .ej-image-open b{display:block;font:550 15px/1.35 var(--font);letter-spacing:-.02em}
body.studio-workbench .cocuyo-ejemplos .ej-image-open small{display:block;position:static;margin-top:6px;color:#d5ddcd;font:400 11px/1.4 var(--font);text-shadow:none}
.cocuyo-ejemplos .ej-image-open svg{width:20px;height:20px;flex:none;margin-bottom:3px;color:var(--studio-accent)}
body.studio-workbench .cocuyo-ejemplos .ej-image-open:is(:hover,:focus-visible){background:linear-gradient(transparent,#101b052e);color:#fff}
body.studio-workbench .cocuyo-ejemplos .ej-image-open:focus-visible{outline:2px solid var(--studio-accent);outline-offset:-4px}
body.studio-workbench .cocuyo-ejemplos .ej-disclaimer{align-self:center;width:min(100%,1120px);max-width:1120px;text-align:left;margin:0;color:var(--ej-muted);font:400 11px/1.6 var(--font)}
body.studio-workbench .cocuyo-ejemplos.studio-image-welcome .studio-video-motion{top:-51px;right:0;width:38px;min-height:38px;z-index:5}
body.studio-workbench .cocuyo-ejemplos[data-empty-mode="video"] .studio-video-frame video{filter:none}
body.studio-workbench .cocuyo-ejemplos[data-empty-mode="video"] .studio-video-frame>.ej-model{position:absolute;left:14px;top:14px;bottom:auto;right:auto;z-index:3;font-size:10px}
.cocuyo-ejemplos .ej-video-title{position:absolute;left:18px;right:64px;bottom:20px;z-index:2;color:#fff;text-shadow:0 1px 14px #0008}
.ej-video-title b{display:block;font:550 clamp(20px,2.3vw,28px)/1.2 var(--font);letter-spacing:-.03em}
.ej-video-title small{display:block;margin-top:7px;font:400 11px/1.3 var(--font);color:#d6dcce}
.cocuyo-ejemplos .studio-video-reference figcaption b,.cocuyo-ejemplos .studio-video-reference figcaption span,.cocuyo-ejemplos .studio-video-reference figcaption small{display:block}
.cocuyo-ejemplos .studio-video-reference figcaption b{font-weight:550;font-size:13px;margin-bottom:5px}
.cocuyo-ejemplos .studio-video-reference figcaption span{font-size:10px;color:#d3efb1}
.cocuyo-ejemplos .studio-video-reference figcaption small{font-size:11px;color:#c4c9c0;margin-top:3px}
.ej-video-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100%,1120px)}
body.studio-workbench .cocuyo-ejemplos .ej-video-footer p{max-width:430px;margin:0;color:var(--ej-muted);font-size:12px;line-height:1.6;text-wrap:pretty}
body.studio-workbench .cocuyo-ejemplos .ej-action,.ej-dialog .ej-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;margin:0;min-height:44px;border:1px solid #b0f04640;border-radius:10px;background:#182211;color:#d6f5b5;font:600 12px/1.35 var(--font);white-space:nowrap;cursor:pointer}
.ej-action svg,.audio-guide-action>svg{width:18px;height:18px;flex:none}
body.studio-workbench .cocuyo-ejemplos .ej-action:is(:hover,:focus-visible),.ej-dialog .ej-action:is(:hover,:focus-visible){background:#26371a;border-color:var(--studio-accent);color:#f0ffe3}
.ej-action:disabled{opacity:.5;cursor:not-allowed}
body.studio-workbench.audio-redesign .cocuyo-ejemplos .audio-guide-card{border:1px solid #ffffff1b;border-radius:16px;background:linear-gradient(150deg,#191d16,#111410);overflow:hidden}
body.studio-workbench.audio-redesign .cocuyo-ejemplos .audio-guide-copy h4{color:#f0f3eb}
body.studio-workbench.audio-redesign .cocuyo-ejemplos .audio-guide-voice{border-color:#ffffff12;border-radius:10px;background:#ffffff04;min-height:52px}
.cocuyo-ejemplos .audio-guide-voice svg,.ej-voice-preview svg{fill:none;stroke:currentColor;stroke-width:1.8;width:18px;height:18px;flex:none}
.ej-sound-art{position:relative;height:132px;margin:10px 20px;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.ej-sound-art>span{position:absolute;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d7ff9f,#629133 36%,#26311e 70%);box-shadow:0 0 40px #85d52218;opacity:.85}
.ej-sound-art>div{display:flex;align-items:center;justify-content:center;gap:3px;height:64px;width:100%;z-index:1;filter:drop-shadow(0 2px 2px #102000)}
.ej-sound-art i{display:block;width:3px;height:var(--bar);border-radius:2px;background:linear-gradient(#efffde,#b9ea7d);opacity:.85}
body.studio-workbench.audio-redesign .cocuyo-ejemplos .ej-voice-preview{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 40px);height:auto;min-width:0;min-height:44px;flex:0 0 auto;margin:0 20px;padding:10px;border:1px solid #c2e78f30;border-radius:9px;background:#28371a;color:#e4f9ce;font:500 12px/1.4 var(--font);cursor:pointer}
.ej-voice-preview>span{min-width:0;white-space:normal;word-break:normal;text-align:center}
body.studio-workbench.audio-redesign .cocuyo-ejemplos .ej-voice-preview:disabled{opacity:.5;cursor:not-allowed}
.ej-voices-status{min-height:148px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:10px;color:#b4bca9;font:400 12px/1.6 var(--font)}
body.studio-workbench.audio-redesign .cocuyo-ejemplos .ej-voices-status button{width:auto;min-height:40px;margin:0;padding:8px 14px;border:1px solid #c2e78f30;border-radius:8px;background:#28371a;color:#e4f9ce;font:500 12px/1.4 var(--font)}
.ej-voice-preview .vz-p{display:none}.ej-voice-preview.on .vz-p{display:block!important}.ej-voice-preview.on .vz-t{display:none}
body.studio-workbench .cocuyo-ejemplos .ej-audio-note{margin:12px 20px 18px;max-width:none;color:#b4bca9;font:400 11px/1.6 var(--font);text-align:center}
.ej-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);padding:0;border:1px solid #ffffff25;border-radius:19px;background:#11140f;color:#f0f3eb;overflow:auto;box-shadow:0 32px 100px #0009;scrollbar-width:thin}
.ej-dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
.ej-dialog>img{display:block;width:100%;height:180px;object-fit:cover}
.ej-dialog .ej-close{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#080c09d9;color:#fff;font-size:25px;cursor:pointer}
.ej-dialog-body{padding:22px}
.ej-dialog h2{font:600 25px/1.2 var(--font);letter-spacing:-.035em;margin:12px 0 8px}
.ej-dialog p{font:400 13px/1.6 var(--font);color:#c1c8b9;margin:12px 0}
.ej-dialog .ej-dialog-spec{color:#91aa7c;font-size:11px;margin:0}
.ej-dialog details{border:1px solid #ffffff1a;border-radius:9px;padding:10px 12px;margin-top:14px}
.ej-dialog summary{font:500 12px/1.5 var(--font);cursor:pointer;min-height:24px}
.ej-dialog .ej-prompt{max-height:135px;overflow:auto;white-space:pre-wrap;font-size:11px;line-height:1.7;overflow-wrap:anywhere}
.ej-dialog .ej-replace{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font:400 12px/1.5 var(--font);color:#d4dccc;cursor:pointer}
.ej-replace input{flex:none;margin:3px 0 0;accent-color:var(--studio-accent)}
.ej-dialog .ej-status{color:#d6e8c3;font-size:12px;min-height:0}
.ej-dialog .ej-status:empty{margin:16px 0 0}
.ej-dialog .ej-action{width:100%}
.ej-no-charge{display:block;margin:12px 0 0;color:#a7b19b;font:400 11px/1.6 var(--font);text-align:center}
.ej-dialog :is(button,input,summary):focus-visible,.cocuyo-ejemplos button:focus-visible{outline:2px solid var(--studio-accent,#a5eb38);outline-offset:3px}
@media(max-width:600px){
 body.studio-workbench .cocuyo-ejemplos .ej-heading h3{font-size:25px;max-width:270px}
 body.studio-workbench .cocuyo-ejemplos .ej-heading p{font-size:12px;max-width:280px}
 body.studio-workbench .cocuyo-ejemplos .studio-image-mood{gap:8px}
 body.studio-workbench .cocuyo-ejemplos .ej-image-tile{aspect-ratio:auto;padding-bottom:82px;border-radius:12px}
 .cocuyo-ejemplos .ej-image-tile>.ej-model{top:8px;left:8px;font-size:11px;padding:4px 5px;gap:4px}
 body.studio-workbench .cocuyo-ejemplos .ej-image-open{padding:11px;gap:4px}
 .cocuyo-ejemplos .ej-image-open b{font-size:13px}
 body.studio-workbench .cocuyo-ejemplos .ej-image-open small{font-size:10px;line-height:1.35}
 .cocuyo-ejemplos .ej-image-open svg{width:16px;height:16px}
 .ej-video-footer{flex-direction:column;align-items:stretch;gap:12px}
 body.studio-workbench .cocuyo-ejemplos .ej-video-footer p{max-width:none}
 .cocuyo-ejemplos .studio-video-reference figcaption b{font-size:11px;margin-bottom:2px}
 .cocuyo-ejemplos .studio-video-reference figcaption small{display:none}
 .cocuyo-ejemplos .ej-video-title{left:13px;bottom:16px}
 .ej-video-title b{font-size:20px}
 .ej-dialog>img{height:140px}.ej-dialog-body{padding:17px}.ej-dialog h2{font-size:23px}
}
@media(prefers-reduced-motion:no-preference){.ej-image-open,.ej-action{transition:background .16s,border-color .16s}.ej-audio-selected:has(.ej-voice-preview.on) .ej-sound-art i{animation:ej-sound 850ms ease-in-out infinite alternate}.ej-audio-selected:has(.ej-voice-preview.on) .ej-sound-art i:nth-child(3n){animation-delay:-360ms}@keyframes ej-sound{to{transform:scaleY(.42)}}}

/* Teléfono: explorar las cuatro ideas sin desplazar el campo de creación. */
@media(max-width:900px){
 body.studio-workbench.studio-simple .cocuyo-ejemplos.studio-image-welcome{gap:12px;padding:4px 0;overflow:visible}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-heading{padding-right:52px}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-heading>span{display:none}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-heading h3{font-size:22px;line-height:1.2}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-heading p{font-size:12px;line-height:1.45;margin-top:7px}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .studio-image-mood{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;grid-template-rows:auto;gap:10px;width:100%;max-width:100%;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:2px;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 8px;transform:none;box-sizing:border-box}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-tile{width:auto;height:auto;min-width:0;margin:0;padding-bottom:53px;aspect-ratio:auto;scroll-snap-align:start;border-radius:13px;background:var(--surface2);transform:none}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-photo{aspect-ratio:4/3}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-open{padding:11px;border-radius:12px}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-open b{font-size:12px;line-height:1.35}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-open small{display:none}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-open svg{width:16px;height:16px;margin-bottom:0}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-image-tile>.ej-model{font-size:11px;padding:4px 5px;top:7px;left:7px;max-width:calc(100% - 14px)}
 body.studio-workbench.studio-simple .cocuyo-ejemplos.studio-image-welcome .studio-video-motion{top:-62px;right:0;width:44px;height:44px;min-height:44px}
 body.studio-workbench.studio-simple .cocuyo-ejemplos .ej-disclaimer{font-size:10px;line-height:1.5}
 body.studio-workbench.studio-simple.modo-imagen .studio-results:has(.studio-image-welcome){margin-bottom:0}
 body.studio-workbench.studio-simple.modo-imagen .studio-workspace:has(.studio-image-welcome){gap:18px}
}
@media(min-width:601px) and (max-width:900px){
 body.studio-workbench.studio-simple .cocuyo-ejemplos .studio-image-mood{grid-auto-columns:calc((100% - 30px)/4)}
}

/* Video: una única escena completa, sin columnas vacías ni recortes del sujeto. */
body.studio-workbench .studio-video-welcome.studio-video-solo[data-empty-mode="video"]{min-height:0;padding:12px 0;gap:0}
body.studio-workbench .studio-video-welcome.studio-video-solo[data-empty-mode="video"] .studio-video-mood{display:block;width:min(100%,854px);height:auto;aspect-ratio:854/480;margin:0;animation:none}
body.studio-workbench .studio-video-welcome.studio-video-solo[data-empty-mode="video"] .studio-video-frame{width:100%;height:100%;max-height:none;aspect-ratio:854/480;grid-column:auto;grid-row:auto}
body.studio-workbench .studio-video-welcome.studio-video-solo[data-empty-mode="video"] .studio-video-frame video{object-fit:contain;filter:none}
body.studio-workbench .studio-video-welcome.studio-video-solo[data-empty-mode="video"] .studio-video-frame::after{display:none}
body.studio-workbench .studio-video-welcome.studio-video-solo[data-empty-mode="video"] .studio-video-motion{width:44px;height:44px;min-height:44px}
/* Espacio vacío: una muestra propia; el resto se abre sólo cuando hace falta. */
body.studio-workbench .studio-results-empty.ej-quiet,
body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio) .studio-image-welcome.ej-quiet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0;padding:20px 12px;overflow:visible;text-align:center}
body.studio-workbench .ej-quiet .ej-quiet-feature{width:min(100%,520px);margin:0}
.ej-quiet-feature>img{display:block;width:100%;height:clamp(180px,30vh,300px);object-fit:contain;border-radius:16px}
.ej-quiet-feature>figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px auto 0;max-width:400px;text-align:left}
.ej-quiet-feature>figcaption b,.ej-quiet-feature>figcaption small{display:block;font:500 13px/1.4 var(--font);color:var(--ej-ink,#f5f6f0)}
.ej-quiet-feature>figcaption small{margin-top:3px;font-size:11px;color:var(--ej-muted,#a9aca4)}
.ej-quiet .ej-quiet-use{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 12px;border:1px solid #ffffff24;border-radius:10px;background:#ffffff06;color:#eef2e8;font:500 12px/1.3 var(--font);white-space:nowrap;cursor:pointer}
.ej-quiet-use svg{width:15px;height:15px}
.ej-quiet .ej-quiet-examples{width:min(100%,520px);margin:0;border:0;background:none;text-align:center}
.ej-quiet-examples>summary{display:list-item;width:fit-content;margin:0 auto;padding:12px 9px;min-height:44px;box-sizing:border-box;color:#bfc4b8;font:500 12px/1.6 var(--font);cursor:pointer;list-style-position:inside}
.ej-quiet-examples>summary::marker{font-size:9px;color:#959d8b}
.ej-quiet-recipes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:6px 0 0}
.ej-quiet-recipes>button{display:flex;min-width:0;flex-direction:column;gap:8px;padding:0 0 8px;border:1px solid #ffffff17;border-radius:10px;overflow:hidden;background:#ffffff03;color:#d5d9d0;font:500 11px/1.4 var(--font);cursor:pointer;text-align:left}
.ej-quiet-recipes>button img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.ej-quiet-recipes>button span{padding:0 8px;overflow-wrap:anywhere}
.ej-quiet .ej-quiet-use:hover,.ej-quiet-recipes>button:hover,.ej-quiet .ej-quiet-voice:hover{border-color:#beed835e;background:#b9f2780b;color:#d8ffac}
.ej-quiet :is(button,summary):focus-visible{outline:2px solid #b9f278;outline-offset:4px}
body.studio-workbench .studio-results-empty.ej-quiet-audio{gap:0;min-height:280px;padding:40px 20px}
.ej-quiet-audio>.ej-quiet-wave,.ej-quiet-audio>.ic{width:44px;height:44px;margin:0 0 18px;color:#bbd899;opacity:.8}
body.studio-workbench .ej-quiet-audio>h3{max-width:380px;margin:0;font:500 clamp(17px,1.5vw,20px)/1.5 var(--font);letter-spacing:-.3px;color:#e6e9e1}
body.studio-workbench .ej-quiet-audio>.ej-quiet-hint{max-width:350px;margin:9px 0 0;font:400 13px/1.6 var(--font);color:#939b8c}
.ej-quiet-audio>.ej-quiet-voices{width:min(100%,400px);margin-top:14px}
body.studio-workbench .ej-quiet .ej-quiet-note{margin:4px 0 12px;color:#939b8c;font:400 11px/1.6 var(--font)}
.ej-quiet-voice-list{display:grid;gap:6px;text-align:left}
.ej-quiet .ej-quiet-voice{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:10px 14px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff03;color:#dfe6d6;text-align:left;cursor:pointer}
.ej-quiet-voice b,.ej-quiet-voice small{display:block;font:500 12px/1.4 var(--font)}
.ej-quiet-voice small{margin-top:3px;color:#99a290;font-size:11px;font-weight:400}
.ej-quiet-voice>svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.ej-quiet-voice.on .vz-t{display:none}.ej-quiet-voice.on .vz-p{display:block!important}
.ej-quiet .ej-quiet-voice.on{border-color:#beed8366;color:#d8ffac}
.ej-quiet .ej-voices-status{min-height:0;align-items:center;padding:12px;font-size:12px;color:#a8b29e;text-align:center}
@media(max-width:600px){
 body.studio-workbench.studio-simple .studio-results-empty.ej-quiet,
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio) .studio-image-welcome.ej-quiet{padding:8px 4px;gap:4px}
 .ej-quiet-feature>img{height:180px;max-height:32dvh;border-radius:12px}
 .ej-quiet-feature>figcaption{gap:8px;margin-top:8px;max-width:360px}
 .ej-quiet-feature>figcaption b{font-size:12px}
 .ej-quiet .ej-quiet-use{font-size:11px;padding:8px 10px}
 .ej-quiet-recipes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:360px;margin:auto}
 body.studio-workbench.studio-simple .studio-results-empty.ej-quiet-audio{min-height:220px;padding:28px 16px}
}

/* Imagen, Video y Audio: dos luces de Cocuyo, sin recursos editoriales. */
body.studio-workbench .studio-results-empty.ej-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%;min-height:clamp(200px,38dvh,440px);padding:32px 16px;box-sizing:border-box;border:0;background:none;text-align:center}
body.studio-workbench.audio-redesign .studio-results:has(#genout>.ej-waiting)>.audio-feed-toolbar{display:none}
.ej-waiting-lights{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:26px}
.ej-waiting-lights i{display:block;width:9px;height:17px;border-radius:8px;transform:rotate(18deg);background:var(--studio-accent,#a6ef38);box-shadow:0 0 14px #a6ef3838;opacity:.85}
@media(min-width:901px){
 body.studio-workbench .studio-results-empty.ej-waiting:is([data-empty-mode="video"],[data-empty-mode="audio"]){min-height:calc(100dvh - 140px)}
}
body.studio-workbench .ej-waiting>p{margin:0;max-width:100%;color:#a6ada0;font:450 14px/1.5 var(--font);letter-spacing:.01em;text-wrap:balance}
@media(prefers-reduced-motion:no-preference){
 .ej-waiting-lights i{animation:ej-waiting-glow 3.6s ease-in-out infinite}
 .ej-waiting-lights i:nth-child(2){animation-delay:-1.8s}
 @keyframes ej-waiting-glow{0%,100%{opacity:.5;box-shadow:0 0 10px #a6ef3820}50%{opacity:1;box-shadow:0 0 20px #a6ef3860}}
}
@media(max-width:900px){
 body.studio-workbench:not(.experiencia-facil) .studio-workspace:has(.ej-waiting){display:flex;flex-direction:column;gap:14px}
 body.studio-workbench:not(.experiencia-facil) .studio-results:has(.ej-waiting){order:-1;margin:0;padding:0;border:0}
 body.studio-workbench.audio-redesign:not(.experiencia-facil) .studio-workspace:has(#genout>.ej-waiting){display:flex;flex-direction:column}
 body.studio-workbench.audio-redesign .studio-results:has(#genout>.ej-waiting){display:block;order:-1!important}
 body.studio-workbench.studio-simple .studio-results-empty.ej-waiting{min-height:clamp(150px,26dvh,240px);padding:24px 12px;gap:14px}
 body.studio-workbench .ej-waiting>p{font-size:13px}
}


/* cocuyo-css: assets/css/estudio-referencias-historial.css */
/* Ficha privada de referencias: historial local y Bóveda comparten diseño. */
.jr-refmas{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-width:28px;height:28px;padding:0 5px;border-radius:6px;background:#252a21;color:#d4e6c0;font-size:11px;font-weight:600}
.creation-references{margin:20px 0;min-width:0}
.creation-references h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#dce2d5;font:600 12px/1.4 var(--font,sans-serif)}
.creation-references h3>span{border:1px solid #3b4432;border-radius:6px;padding:1px 6px;color:var(--verde-cocuyo,#aff33e);font-variant-numeric:tabular-nums}
.creation-references-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:440px;overflow:auto;overscroll-behavior:contain;padding:1px 3px 4px 1px}
.creation-reference{margin:0;min-width:0;border:1px solid #30352b;border-radius:11px;overflow:hidden;background:#141711}
.creation-reference>img,.creation-reference>video{display:block;width:100%;height:116px;object-fit:contain;background:#080a07}
.creation-reference-video,.creation-reference-audio{grid-column:1/-1}
.creation-reference-video>video{height:auto;max-height:200px;min-height:110px}
.creation-reference-audio>audio{display:block;width:calc(100% - 16px);height:44px;margin:10px 8px 0}
.creation-reference figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;padding:9px 10px;color:#e3e8dd;font:500 12px/1.5 var(--font,sans-serif)}
.creation-reference-name{flex:1;min-width:0;overflow-wrap:anywhere}
.creation-reference-role{flex:none;padding:1px 6px;border-radius:5px;background:#2a3421;color:#c9e5a5;font-size:10px}
.creation-reference small{display:block;flex-basis:100%;color:#9aa690;font-size:10px;font-variant-numeric:tabular-nums}
.creation-reference-unavailable{display:grid;place-items:center;min-height:100px;padding:10px;color:#a5aa9f;font-size:12px;text-align:center}
.creation-references :is(video,audio):focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:-2px}
@media(max-width:480px){.creation-references-grid{max-height:360px}.creation-reference figcaption{padding:8px}.creation-reference>img{height:100px}}


/* cocuyo-css: assets/css/estudio-cuenta-menu.css */
/* Una sola superficie para la cuenta: identidad y ajustes junto al editor. */
body.studio-workbench.studio-simple #accmenu{width:340px;padding:7px;border:1px solid var(--border2);border-radius:17px;background:var(--elev);box-shadow:0 18px 56px #0009;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;overscroll-behavior:contain}
body.studio-workbench #accmenu [hidden]{display:none!important}
body.studio-workbench #accmenu .acc-identidad{display:flex;align-items:center;gap:10px;padding:12px 10px 16px}
body.studio-workbench #accmenu .acc-identidad>div{min-width:0;flex:1}
body.studio-workbench #accmenu .acc-avatar{width:34px;height:34px;flex:none;border-radius:11px}
body.studio-workbench #accmenu .acc-avatar .ic{width:18px;height:18px}
body.studio-workbench #accmenu .acc-identidad strong{font-size:13px;font-weight:600;color:var(--text)}
body.studio-workbench #accmenu .em{font-size:11px;line-height:1.4;padding-top:4px;overflow-wrap:anywhere}
body.studio-workbench #accmenu .sec{padding:5px 0;border-top:1px solid var(--border)}
body.studio-workbench #accmenu .mi,body.studio-workbench #accmenu #accRecargar{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:43px;height:auto;gap:11px;padding:10px 12px;margin:0;border:0;border-radius:10px;background:transparent;font-family:inherit;font-size:13px;font-weight:500;line-height:1.35;color:var(--text);text-align:left;cursor:pointer;list-style:none}
body.studio-workbench #accmenu .mi::-webkit-details-marker,body.studio-workbench #accmenu .acc-delete>summary::-webkit-details-marker{display:none}
body.studio-workbench #accmenu .mi>.ic{width:18px;height:18px;flex:0 0 18px;color:var(--muted);stroke-width:1.7}
body.studio-workbench #accmenu :is(.mi,#accRecargar):hover{background:var(--surface2);color:var(--text)}
body.studio-workbench #accmenu .mi:hover>.ic,body.studio-workbench #accmenu .acc-section[open]>.mi>.ic{color:var(--lima)}
body.studio-workbench #accmenu :is(button,a,summary,input,select):focus-visible{outline:2px solid var(--lima);outline-offset:2px}
body.studio-workbench #accmenu .mi:focus-visible{outline-offset:-2px;background:var(--surface2)}
body.studio-workbench #accmenu #estudio-salir{color:var(--muted2)}
body.studio-workbench #accmenu #estudio-salir:hover{color:var(--text)}
body.studio-workbench #accmenu .acc-arrow{width:13px;height:13px;flex:none;margin-left:auto;color:var(--dim);fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .16s ease}
body.studio-workbench #accmenu .acc-section[open]>.mi{background:var(--surface2)}
body.studio-workbench #accmenu .acc-section[open] .acc-arrow{transform:rotate(90deg)}
body.studio-workbench #accmenu .acc-section-body{margin:5px 5px 9px;padding:10px 9px 12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 62%,transparent);font-size:12px;line-height:1.5}
body.studio-workbench #accmenu .acc-plan{display:block;font-size:12px;font-weight:600;color:var(--text)}
body.studio-workbench #accmenu .acc-hint{font-size:11px;line-height:1.55;color:var(--muted2);margin:6px 0 11px}
body.studio-workbench #accmenu .acc-hint:empty{display:none}
body.studio-workbench #accmenu .acc-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:39px;padding:9px 11px;margin:8px 0 0;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:12px;font-weight:500;line-height:1.35;cursor:pointer;text-align:center}
body.studio-workbench #accmenu .acc-action:hover{border-color:color-mix(in srgb,var(--lima) 45%,var(--border2))}
body.studio-workbench #accmenu button:disabled,body.studio-workbench #accmenu input:disabled{opacity:.5;cursor:default}
body.studio-workbench #accmenu .acc-action-small{background:transparent;min-height:34px;font-size:11px}
body.studio-workbench #accmenu .acc-status{font-size:11px;line-height:1.5;margin:9px 0 0;color:var(--muted2);overflow-wrap:anywhere}
body.studio-workbench #accmenu .is-error{color:#ffaaa3}
body.studio-workbench #accmenu .acc-language{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:1px 0 12px}
body.studio-workbench #accmenu .acc-language>span{font-weight:500}
body.studio-workbench #accmenu .cocuyo-idioma{min-height:44px;padding:0;background:var(--surface2);border:1px solid var(--border2);border-radius:9px}
body.studio-workbench #accmenu .cocuyo-idioma svg{width:15px;height:15px}
body.studio-workbench #accmenu .acc-notice{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-top:12px;border-top:1px solid var(--border);cursor:pointer}
body.studio-workbench #accmenu .acc-notice>span{display:grid;gap:5px;min-width:0}
body.studio-workbench #accmenu .acc-notice strong{font-size:12px;font-weight:500}
body.studio-workbench #accmenu .acc-notice small{font-size:10px;line-height:1.5;color:var(--muted2)}
body.studio-workbench #accmenu .acc-notice input{width:18px;height:18px;flex:none;margin:2px 0;accent-color:var(--lima)}
body.studio-workbench #accmenu .acc-storage{display:grid;gap:4px;padding-bottom:5px}
body.studio-workbench #accmenu .acc-storage small{font-size:10px;color:var(--muted2)}
body.studio-workbench #accmenu .acc-legal{display:flex;flex-wrap:wrap;gap:5px 12px;margin:13px 0;font-size:10px}
body.studio-workbench #accmenu .acc-legal a,body.studio-workbench #accmenu .acc-hint a{color:var(--muted2);text-decoration:underline;text-underline-offset:3px}
body.studio-workbench #accmenu .acc-legal a:hover,body.studio-workbench #accmenu .acc-hint a:hover{color:var(--text)}
body.studio-workbench #accmenu .acc-delete{border-top:1px solid var(--border);margin-top:12px;padding-top:5px}
body.studio-workbench #accmenu .acc-delete>summary{list-style:none;cursor:pointer;min-height:36px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted2);border-radius:5px}
body.studio-workbench #accmenu .acc-delete>summary:after{content:'+';font-size:16px;color:var(--dim)}
body.studio-workbench #accmenu .acc-delete[open]>summary:after{content:'−'}
body.studio-workbench #accmenu .acc-delete[open]>summary{color:#ffaaa3}
body.studio-workbench #accmenu .acc-delete label{display:block;font-size:11px;color:var(--muted2);margin:7px 0}
body.studio-workbench #accmenu .acc-delete input{display:block;width:100%;min-width:0;min-height:40px;padding:9px 11px;border:1px solid var(--border2);border-radius:7px;background:var(--surface);font-family:inherit;font-size:13px;line-height:1.4;color:var(--text)}
body.studio-workbench #accmenu .acc-danger{color:#ffb1a9;border-color:#e76d613b;background:#e76d610b}
body.studio-workbench #accmenu .acc-danger:hover{border-color:#e76d61a0}
body.studio-workbench #submenu{display:none!important}
body.studio-workbench #accmenu.open{animation:account-menu-enter .14s ease-out}
@keyframes account-menu-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:901px){body.studio-workbench.studio-simple #accmenu{left:auto;right:20px;top:calc(var(--st-top) + 8px);bottom:auto;max-height:calc(100dvh - var(--st-top) - 24px);overflow:auto;z-index:200}}
@media(max-width:900px){body.studio-workbench.studio-simple #accmenu{width:min(340px,calc(100vw - 24px))}body.studio-workbench.studio-simple #accmenu .mi{min-height:46px;font-size:13px}body.studio-workbench #accmenu .acc-action{min-height:42px}body.studio-workbench #accmenu .acc-delete input{font-size:16px}body.studio-workbench #accmenu .acc-delete>summary{min-height:42px}}
@media(prefers-reduced-motion:reduce){body.studio-workbench #accmenu.open{animation:none}body.studio-workbench #accmenu .acc-arrow{transition:none}}

/* Perfil compacto: datos legibles en una sola superficie, sin pantalla extra. */
body.studio-workbench.studio-simple #accmenu{width:352px;padding:8px;border-radius:19px;background:var(--elev)}
body.studio-workbench #accmenu .acc-identidad{gap:12px;padding:14px 12px 13px;flex-wrap:wrap}
body.studio-workbench #accmenu .acc-avatar{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--lima) 11%,var(--surface2));border:1px solid color-mix(in srgb,var(--lima) 18%,var(--border));color:var(--lima)}
body.studio-workbench #accmenu .acc-identidad>div{flex:1 1 180px}
body.studio-workbench #accmenu .acc-identidad strong{display:block;font-size:15px;line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere}
body.studio-workbench #accmenu .em{font-size:12px;line-height:1.45;color:var(--muted2)}
body.studio-workbench #accmenu .acc-storage-overview{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center;margin:0 10px 12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
body.studio-workbench #accmenu .acc-storage-overview>.ic{width:18px;height:18px;color:var(--muted2);fill:none;stroke:currentColor;stroke-width:1.6}
body.studio-workbench #accmenu .acc-storage-overview>div{display:grid;gap:4px;min-width:0}
body.studio-workbench #accmenu .acc-storage-overview span{font-size:11px;color:var(--muted2)}
body.studio-workbench #accmenu .acc-storage-overview small{font-size:11px;line-height:1.45;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
body.studio-workbench #accmenu #accRecargar{min-height:60px;margin:0 0 5px;background:color-mix(in srgb,var(--lima) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--lima) 16%,var(--border));gap:10px}
body.studio-workbench #accmenu #accRecargar:hover{background:color-mix(in srgb,var(--lima) 12%,var(--surface2));border-color:color-mix(in srgb,var(--lima) 35%,var(--border))}
body.studio-workbench #accmenu #accRecargar>.ic{color:var(--lima)}
body.studio-workbench #accmenu .acc-topup-copy{display:grid;gap:4px;flex:1;min-width:0}
body.studio-workbench #accmenu .acc-topup-copy>small{font-size:10px;line-height:1.3;color:var(--muted2);font-weight:400}
body.studio-workbench #accmenu .acc-topup-balance{display:grid;gap:3px;flex:none;max-width:110px;text-align:right;font-size:18px;font-weight:650;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body.studio-workbench #accmenu .acc-topup-balance small{font-size:10px;font-weight:400;line-height:1.2;letter-spacing:0;color:var(--muted2)}
body.studio-workbench:has(#acct:is([data-credit-state="low"],[data-credit-state="empty"])) #accmenu .acc-topup-balance>span{color:#ffaaa3}
body.studio-workbench #accmenu .mi{min-height:44px}
body.studio-workbench #accmenu .acc-section-body{margin:4px 4px 9px;padding:13px 12px;border-radius:11px}
body.studio-workbench #accmenu .acc-hint,body.studio-workbench #accmenu .acc-status{font-size:12px;line-height:1.5}
body.studio-workbench #accmenu .acc-notice small{font-size:11px}
body.studio-workbench #accmenu .acc-notice input{width:20px;height:20px;margin:3px 0}
body.studio-workbench #accmenu .acc-legal{font-size:11px;line-height:1.5}
@media(max-width:900px){
 body.studio-workbench.studio-simple #accmenu{width:min(340px,calc(100% - 24px))}
 body.studio-workbench #accmenu .acc-identidad{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:2px 10px}
 body.studio-workbench #accmenu .acc-identidad>.acc-avatar{grid-column:1;grid-row:1/3}
 body.studio-workbench #accmenu .acc-identidad>div{display:contents}
 body.studio-workbench #accmenu .acc-identidad strong{grid-column:2;grid-row:1}
 body.studio-workbench #accmenu .acc-identidad .em{grid-column:2/4;grid-row:2;overflow-wrap:anywhere;font-size:12px}
 body.studio-workbench #accmenu .acc-identidad #btnmascreditos{grid-column:3;grid-row:1;flex:none;margin-left:0;min-height:44px;max-width:110px;padding-inline:10px}
 body.studio-workbench #accmenu .acc-identidad #btnmascreditos .credit-wallet-value{font-size:18px;font-variant-numeric:tabular-nums}
 body.studio-workbench #accmenu .acc-topup-balance{display:none}
 body.studio-workbench #accmenu #accRecargar{min-height:52px}
 body.studio-workbench #accmenu .acc-topup-copy>small{display:none}
 body.studio-workbench #accmenu .acc-delete input{font-size:16px}
}


/* cocuyo-css: assets/css/estudio-modelos-selector.css */
/* Selector de modelos del compositor. Disponibles y coste junto al nombre. */
body.studio-workbench #modal.model-picker{align-items:center;padding:24px;z-index:200}
body.studio-workbench #modal.model-picker .mbox{width:min(760px,100%);max-width:760px;max-height:calc(100dvh - 48px);border-radius:20px;background:var(--elev);border:1px solid var(--border2)}
body.studio-workbench #modal.model-picker .studio-model-head{padding:20px 20px 14px}
body.studio-workbench #modal.model-picker .studio-model-head h2{margin:0;font:600 19px/1.25 var(--font);letter-spacing:-.03em}
body.studio-workbench #modal.model-picker .studio-model-head :is(.studio-eyebrow,.studio-model-note){display:none}
body.studio-workbench #modal.model-picker .mtop{gap:8px;padding:0 16px 12px;border:0}
body.studio-workbench #modal.model-picker .msearch{height:44px;min-height:44px;min-width:0;padding:9px 12px;gap:9px;border-radius:11px;border:1px solid var(--border2);background:var(--surface)}
body.studio-workbench #modal.model-picker .msearch:focus-within{border-color:var(--studio-accent)}
body.studio-workbench #modal.model-picker .msearch input{width:100%;min-width:0;font-size:14px}
body.studio-workbench #modal.model-picker .msearch input:focus-visible{outline:none!important;box-shadow:none!important}
body.studio-workbench #modal.model-picker .mclose{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--border);border-radius:11px;color:var(--muted2);font-size:16px}
body.studio-workbench #modal.model-picker .mbody{min-height:0;overflow:auto;padding:0 10px 12px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
body.studio-workbench #modal.model-picker .cms-toolbar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 6px 10px;background:var(--elev)}
body.studio-workbench #modal.model-picker .cms-count{min-width:0;font-size:11px;color:var(--muted)}
body.studio-workbench #modal.model-picker #modelRetry{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;margin-inline-start:auto;border:0;border-radius:9px;padding:8px;background:transparent;color:var(--muted2)}
body.studio-workbench #modal.model-picker #modelRetry:hover{color:var(--text);background:var(--surface2)}
body.studio-workbench #modal.model-picker #modelRetry svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
body.studio-workbench #modal.model-picker .cms-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
body.studio-workbench #modal.model-picker .mrow{width:100%;min-width:0;min-height:56px;display:flex;align-items:center;gap:9px;margin:0;padding:8px;border:1px solid var(--border);border-radius:11px;background:transparent;text-align:start;font:inherit;color:var(--text);cursor:pointer;box-shadow:none}
body.studio-workbench #modal.model-picker .mrow:hover:not(:disabled){background:var(--surface2)}
body.studio-workbench #modal.model-picker .mrow.sel{background:var(--studio-active);border-color:color-mix(in srgb,var(--studio-accent) 28%,var(--border));box-shadow:none}
body.studio-workbench #modal.model-picker .mrow :is(.logo,.mrcbox){width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;background:var(--surface)}
body.studio-workbench #modal.model-picker .mrow .mrcbox .mrc{width:22px;height:22px}
body.studio-workbench #modal.model-picker .mrow .body{display:grid;gap:5px;min-width:0;flex:1}
body.studio-workbench #modal.model-picker .mrow .nm{display:block;font-size:13px;font-weight:550;line-height:1.3;letter-spacing:-.015em;overflow-wrap:anywhere}
body.studio-workbench #modal.model-picker .cms-detail{display:block;font-size:10px;line-height:1.35;color:var(--muted2);font-variant-numeric:tabular-nums}
body.studio-workbench #modal.model-picker .cms-meta{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10.5px;line-height:1.35;color:var(--muted2)}
body.studio-workbench #modal.model-picker .cms-sep{margin-inline:5px}
body.studio-workbench #modal.model-picker .cms-editorial{color:var(--studio-accent);font-size:10px;font-weight:500;line-height:1.35}
body.studio-workbench #modal.model-picker .cms-cost{display:block;max-width:124px;font-size:11px;font-weight:550;font-variant-numeric:tabular-nums;line-height:1.4;text-align:end;color:var(--text)}
body.studio-workbench #modal.model-picker .cms-cost-dynamic{max-width:112px;font-size:10px;font-weight:400;color:var(--muted2)}
body.studio-workbench #modal.model-picker .mrow .radio{display:grid;place-items:center;width:16px;height:16px;flex:0 0 16px;margin:0;border:1px solid var(--border2);background:transparent}
body.studio-workbench #modal.model-picker .mrow.sel .radio{border-color:var(--studio-accent);background:var(--studio-accent);color:var(--tinta-sobre-verde)}
body.studio-workbench #modal.model-picker .mrow .radio:after{display:none}
body.studio-workbench #modal.model-picker .radio svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
body.studio-workbench #modal.model-picker .mrow:disabled{cursor:default;opacity:.65}
body.studio-workbench #modal.model-picker .cms-footnote{padding:10px 8px 0;margin:4px 0 0;font-size:10px;line-height:1.5;color:var(--muted)}
body.studio-workbench #modal.model-picker :is(button,select,summary):focus-visible{outline:2px solid var(--studio-accent);outline-offset:1px}
@media(max-width:760px){
 body.studio-workbench #modal.model-picker .mbox{max-width:580px}
 body.studio-workbench #modal.model-picker .cms-options{grid-template-columns:minmax(0,1fr)}
 body.studio-workbench #modal.model-picker .mrow{min-height:64px}
}
@media(max-width:600px){
 body.studio-workbench #modal.model-picker{align-items:flex-end;padding:0}
 body.studio-workbench #modal.model-picker .mbox{width:100%;max-height:calc(100dvh - 36px);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
 body.studio-workbench #modal.model-picker .studio-model-head{padding:18px 16px 12px}
 body.studio-workbench #modal.model-picker .mtop{padding-inline:12px}
 body.studio-workbench #modal.model-picker .mbody{padding-inline:6px}
 body.studio-workbench #modal.model-picker .mrow{gap:8px;padding:10px 8px}
 body.studio-workbench #modal.model-picker .mrow .nm{font-size:13px}
 body.studio-workbench #modal.model-picker .cms-cost{max-width:124px;font-size:11px}
 body.studio-workbench #modal.model-picker .cms-cost-dynamic{max-width:112px;font-size:10px}
 body.studio-workbench #modal.model-picker .mrow :is(.logo,.mrcbox){width:28px;height:28px;flex-basis:28px}
 body.studio-workbench #modal.model-picker .mrow .radio{width:14px;height:14px;flex-basis:14px}
}
@media(prefers-reduced-motion:reduce){body.studio-workbench #modal.model-picker *{scroll-behavior:auto}}
@media(max-width:900px){
 body.studio-workbench #modal.model-picker .msearch input{font-size:16px}
}

/* ---- v340: filtros, insignias, empresa/prestaciones y editores que vienen ---- */
/* Filtros «Todos / Mejores / Más económicos» (Imagen y Video). */
body.studio-workbench #modal.model-picker .cms-filtros{display:inline-flex;flex:none;gap:2px;padding:2px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
body.studio-workbench #modal.model-picker .cms-filtro{min-height:30px;padding:4px 11px;border:0;border-radius:8px;background:transparent;color:var(--muted2);font:500 12px/1.2 var(--font);white-space:nowrap;cursor:pointer}
body.studio-workbench #modal.model-picker .cms-filtro:hover{color:var(--text);background:var(--surface2)}
body.studio-workbench #modal.model-picker .cms-filtro[aria-checked="true"]{background:var(--studio-active);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--studio-accent) 35%,transparent)}
body.studio-workbench #modal.model-picker .cms-count{flex:1 1 auto}
body.studio-workbench #modal.model-picker .cms-orden{color:var(--muted2)}
/* Fila: nombre + TOP/GRATIS · empresa · prestaciones · precio a la derecha (a la izquierda en árabe/urdu). */
body.studio-workbench #modal.model-picker .cms-l1{display:flex;align-items:center;gap:6px;min-width:0}
body.studio-workbench #modal.model-picker .cms-l1 .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.studio-workbench #modal.model-picker .cms-chip{flex:none;padding:1px 5px;border-radius:5px;font:700 9px/14px var(--font);letter-spacing:.03em;text-transform:uppercase}
body.studio-workbench #modal.model-picker .cms-chip[data-tipo="top"]{background:var(--precio-rosa);color:var(--blanco-luz);font-style:italic}
body.studio-workbench #modal.model-picker .cms-chip[data-tipo="gratis"]{border:1px solid var(--lima);color:var(--lima);line-height:12px}
/* TOP (el mejor), NEW (el más nuevo) y ECONÓMICO (el más barato), dueño
   11-oct-2026: los colores de las cintas de los menús (rosa, azul y lima). */
body.studio-workbench #modal.model-picker .cms-chip[data-tipo="new"]{background:var(--precio-azul);color:var(--blanco-luz);font-style:italic}
body.studio-workbench #modal.model-picker .cms-chip[data-tipo="eco"]{background:var(--precio-lima);color:var(--tinta-sobre-verde);font-style:italic}
body.studio-workbench #modal.model-picker .cms-emp{color:var(--muted2)}
body.studio-workbench #modal.model-picker .cms-specs{color:var(--muted);font-variant-numeric:tabular-nums}
body.studio-workbench #modal.model-picker .cms-sep{color:var(--muted)}
/* «Beta» y «Próximamente»: texto gris, nunca pastilla (decisión 8). */
body.studio-workbench #modal.model-picker .cms-gris{color:var(--muted)}
body.studio-workbench #modal.model-picker .cms-precio{flex:none;display:grid;justify-items:end;gap:1px;max-width:128px;text-align:end}
/* Editores que vienen: fila sin enlace ni foco. */
body.studio-workbench #modal.model-picker .cms-proximos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
body.studio-workbench #modal.model-picker .cms-proximo{display:flex;align-items:center;gap:9px;min-height:52px;padding:8px;border:1px dashed var(--border);border-radius:11px;color:var(--muted2);cursor:default}
body.studio-workbench #modal.model-picker .cms-proximo .logo{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;background:var(--surface)}
body.studio-workbench #modal.model-picker .cms-proximo .logo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.studio-workbench #modal.model-picker .cms-proximo .body{display:grid;gap:3px;min-width:0}
body.studio-workbench #modal.model-picker .cms-proximo .nm{font-size:13px;font-weight:500;color:var(--muted2)}
body.studio-workbench #modal.model-picker :is(.cms-filtro,.mrow):focus-visible{outline:2px solid var(--studio-accent);outline-offset:1px}
@media(max-width:760px){
 body.studio-workbench #modal.model-picker .cms-proximos{grid-template-columns:minmax(0,1fr)}
 body.studio-workbench #modal.model-picker .cms-filtros{order:-1;width:100%}
 body.studio-workbench #modal.model-picker .cms-filtro{flex:1 1 0;padding-inline:6px}
}
/* Cifras y ajustes («8 s · 720p», «480p·720p·4–15 s») siempre de izquierda a
   derecha, también dentro de la fila en espejo de árabe y urdu. */
body.studio-workbench #modal.model-picker :is(.cms-detail,.cms-specs){direction:ltr;unicode-bidi:isolate}


/* cocuyo-css: assets/css/cuenta-acciones.css */
.cuenta-aviso{box-sizing:border-box;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--border,var(--negro-borde));border-radius:22px;padding:28px;background:var(--surface,var(--negro-elevado));color:var(--text,var(--blanco-luz));font-family:inherit}
.cuenta-aviso::backdrop{background:color-mix(in srgb,var(--negro-abismo) 75%,transparent)}
.cuenta-aviso h2{margin:0 0 14px;font-size:25px;line-height:1.2;letter-spacing:-.035em}
.cuenta-aviso p{line-height:1.6;color:var(--muted,var(--gris-niebla));margin:0 0 24px}
.cuenta-aviso a,.cuenta-aviso button{display:block;box-sizing:border-box;width:100%;min-height:46px;padding:13px 16px;border-radius:12px;text-align:center;font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.cuenta-aviso a{background:var(--verde-cocuyo);color:var(--tinta-sobre-verde);margin-bottom:10px}
.cuenta-aviso button{border:1px solid var(--border,var(--negro-borde));background:transparent;color:inherit}
/* crear.html (y sus traducciones) carga esta hoja SIN tokens.css: por eso se
   queda el parche de [hidden] y el foco lleva valores de respaldo. */
.cuenta-aviso [hidden]{display:none}
.cuenta-aviso :focus-visible{outline:var(--foco-contorno,2px solid var(--verde-cocuyo));outline-offset:var(--foco-separacion,2px)}
.submenu-back{width:100%;min-height:44px;border:0;border-bottom:1px solid var(--border,var(--negro-borde));background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}


/* cocuyo-css: assets/css/cine-modelos.css */
/* Del catálogo al Estudio: crédito editorial, nunca un anuncio sobre el video.
   Colores SOLO de tokens.css (revisión de diseño, 5-oct-2026): antes había
   ~40 sueltos y un lima distinto del oficial. Las superficies con un toque verde se
   mezclan desde los tokens para conservar el aspecto. */
:root{
  --cine-motor-superficie:color-mix(in srgb,var(--verde-cocuyo) 8%,var(--negro-elevado));
  --cine-motor-superficie-baja:color-mix(in srgb,var(--verde-cocuyo) 3%,var(--negro-elevado));
  --cine-motor-superficie-media:color-mix(in srgb,var(--verde-cocuyo) 5%,var(--negro-elevado));
  --cine-motor-chip:color-mix(in srgb,var(--verde-cocuyo) 14%,var(--negro-elevado));
  --cine-motor-boton:color-mix(in srgb,var(--verde-cocuyo) 10%,var(--negro-elevado));
  --cine-motor-borde:color-mix(in srgb,var(--verde-cocuyo) 18%,var(--negro-borde));
  --cine-motor-borde-vivo:color-mix(in srgb,var(--verde-cocuyo) 35%,var(--negro-borde));
  --cine-motor-borde-claro:color-mix(in srgb,var(--verde-cocuyo) 65%,var(--negro-borde));
}
.cine-motor{display:flex;align-items:center;gap:20px;margin:28px 0 34px;padding:24px;border:1px solid var(--cine-motor-borde);border-radius:18px;background:linear-gradient(110deg,var(--cine-motor-superficie),var(--cine-motor-superficie-baja) 65%,var(--cine-motor-superficie-media));color:var(--blanco-luz);box-sizing:border-box}
.cine-motor-icono,.cine-motor-dialogo-icono{display:grid;place-items:center;flex:none;width:58px;height:58px;border:1px solid var(--cine-motor-borde-vivo);border-radius:16px;color:var(--verde-cocuyo);background:var(--cine-motor-chip)}
.cine-motor-info{flex:1;min-width:0}
.cine-motor-etiqueta{display:block;font-size:10px;font-weight:650;letter-spacing:.15em;line-height:1.4;color:var(--verde-cocuyo)}
.cine-motor-info h3{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:24px;letter-spacing:-.04em;line-height:1.1;font-weight:620;color:var(--blanco-luz)}
.cine-motor-version{padding:4px 7px;border:1px solid var(--cine-motor-borde);border-radius:6px;font-size:13px;letter-spacing:0;color:var(--gris-niebla);font-weight:550}
.cine-motor-info p{margin:0;color:var(--gris-niebla);font-size:13px;line-height:1.5}
.cine-motor-crear{display:inline-flex;align-items:center;justify-content:center;gap:13px;flex:none;min-height:46px;padding:10px 16px;border:1px solid var(--verde-cocuyo);border-radius:10px;background:var(--verde-cocuyo);color:var(--tinta-sobre-verde);text-decoration:none;line-height:1.35;font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;box-sizing:border-box;transition:background .18s,box-shadow .18s,transform .18s}
.cine-motor-crear svg{flex:none}.cine-motor-crear:hover{background:var(--lima-clara);color:var(--tinta-sobre-verde);box-shadow:0 0 0 4px color-mix(in srgb,var(--verde-cocuyo) 7%,transparent);transform:translateY(-1px)}
.cine-motor-crear:focus-visible,.cine-motor-dialogo :focus-visible{outline:2px solid var(--lima-clara);outline-offset:4px}
.cine-motor-crear[aria-busy="true"]{opacity:.65;cursor:progress}
.cine-motor-dialogo{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:38px;margin:auto;border:1px solid var(--cine-motor-borde);border-radius:24px;background:radial-gradient(ellipse at top left,var(--cine-motor-chip) 0,transparent 65%),var(--cine-motor-superficie-baja);color:var(--blanco-luz);box-shadow:0 36px 100px color-mix(in srgb,var(--negro-abismo) 53%,transparent);font-family:var(--fuente)}
.cine-motor-dialogo::backdrop{background:color-mix(in srgb,var(--negro-abismo) 72%,transparent);backdrop-filter:blur(7px)}
.cine-motor-dialogo[open]{animation:cine-motor-entrada .2s ease-out}
.cine-motor-dialogo-icono{margin-bottom:24px}.cine-motor-dialogo h2{margin:14px 0;font-size:30px;font-weight:600;letter-spacing:-.045em;line-height:1.14}.cine-motor-dialogo h2 span{color:var(--verde-cocuyo)}
.cine-motor-dialogo p{margin:0 0 26px;font-size:14px;line-height:1.65;color:var(--gris-niebla)}.cine-motor-dialogo .cine-motor-crear{width:100%;min-height:50px;font-size:14px}
.cine-motor-entrar{display:block;padding:17px 8px;text-align:center;color:var(--blanco-luz);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.cine-motor-dialogo small{display:block;margin-top:12px;color:var(--gris-humo);text-align:center;font-size:12px;line-height:1.5}
.cine-motor-cerrar{position:absolute;right:13px;top:13px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--cine-motor-borde);border-radius:50%;background:var(--cine-motor-boton);color:var(--gris-niebla);cursor:pointer;font:24px/1 var(--fuente)}
.cine-motor-aviso{position:fixed;z-index:1100;right:24px;bottom:28px;box-sizing:border-box;width:min(390px,calc(100% - 32px));padding:18px 46px 18px 18px;border:1px solid var(--cine-motor-borde-vivo);border-radius:14px;background:var(--cine-motor-superficie);color:var(--blanco-luz);box-shadow:0 12px 42px color-mix(in srgb,var(--negro-abismo) 33%,transparent);font:14px/1.5 var(--fuente)}
.cine-motor-aviso p{margin:0}.cine-motor-aviso button:not(.cine-motor-cerrar){display:block;margin-top:12px;padding:7px 12px;border:1px solid var(--cine-motor-borde-claro);border-radius:7px;background:var(--cine-motor-chip);color:var(--lima-clara);cursor:pointer;font:inherit}.cine-motor-aviso .cine-motor-cerrar{top:9px;right:9px;width:28px;height:28px;font-size:20px}
@keyframes cine-motor-entrada{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.cine-motor{flex-wrap:wrap;gap:14px;margin:22px 0 28px;padding:18px;border-radius:15px}.cine-motor-icono{width:48px;height:48px;border-radius:13px}.cine-motor-info h3{font-size:22px}.cine-motor-crear{width:100%;min-height:46px}.cine-motor-dialogo{padding:28px 24px}.cine-motor-dialogo h2{font-size:28px}.cine-motor-aviso{right:16px;bottom:max(18px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.cine-motor-crear{transition:none}.cine-motor-crear:hover{transform:none}.cine-motor-dialogo[open]{animation:none}}


/* cocuyo-css: assets/css/experiencia.css */
.experiencia-preview{position:fixed;bottom:16px;left:16px;z-index:110;display:flex;gap:14px;align-items:center;padding:10px 14px;background:#141614ed;border:1px solid #ffffff26;border-radius:12px;box-shadow:0 8px 30px #0006;font:500 11px/1.4 system-ui,sans-serif;color:#a6ada2;backdrop-filter:blur(15px)}
.experiencia-preview a{color:#d1fa98;text-decoration:none;white-space:nowrap}.experiencia-preview a:hover{color:white}.experiencia-preview a:focus-visible{outline:2px solid #b4f65b;outline-offset:4px}
.studio-workbench .experiencia-preview{left:auto;right:16px}
body:has(dialog[open],.modal.on,.accmenu.open) .experiencia-preview{display:none}
@media(max-width:900px){.studio-workbench .experiencia-preview{bottom:calc(72px + env(safe-area-inset-bottom));left:10px;padding:8px 10px;gap:10px;font-size:10px}}
/* El Agente se mantiene visible, con su acceso de beta privada explícito. */
.agente-beta{display:inline-flex;align-items:center;margin-inline-start:6px;padding:2px 5px;border:1px solid rgb(174 239 69 / .25);border-radius:5px;font-family:inherit;font-size:9px;font-weight:600;line-height:1.2;letter-spacing:.02em;color:#c5e9a0;background:rgb(174 239 69 / .06);vertical-align:middle}
[aria-disabled="true"]:is(.cn-agent,.sn-agent-entry,.sm-create,a[href*="vista=cocuyo"],a[data-cocuyo-abrir]){cursor:not-allowed;opacity:.65}
.cocuyo-beta-editor{display:inline-flex;margin-block-start:12px;padding:10px 16px;border:1px solid #343b35;border-radius:10px;color:#d2f7a4;text-decoration:none;font-weight:600}
.cocuyo-beta-editor:hover,.cocuyo-beta-editor:focus-visible{border-color:#a6e545;background:rgb(174 239 69 / .06)}


/* cocuyo-css: assets/css/estudio-nuevo.css */
html[data-experiencia="nueva"] .studio-workbench{--st-top:72px;--sn-line:#ffffff14;--sn-soft:#aaaead;--sn-green:#b4f65b;background:#080a09}
html[data-experiencia="nueva"] .studio-public-nav{background:#090b0ae8;border-bottom-color:var(--sn-line)}
html[data-experiencia="nueva"] .studio-public-nav .brand .wordmark{font-size:24px;letter-spacing:-1.2px}

html[data-experiencia="nueva"] .sn-agent-entry{border:0;background:none;cursor:pointer;white-space:nowrap}
html[data-experiencia="nueva"] .sn-agent-entry>svg{display:none}
html[data-experiencia="nueva"] .sn-agent-entry[aria-current="page"]{color:var(--sn-green)}
html[data-experiencia="nueva"] .st-cine{order:5}
html[data-experiencia="nueva"] .cocuyo-assistant-wrap{width:min(100%,1000px);max-width:1000px;margin:auto;padding:22px 40px 60px}
html[data-experiencia="nueva"] .cocuyo-explorer-back{display:none}
html[data-experiencia="nueva"] #pg-explore{background:radial-gradient(ellipse at 50% 22%,#3e4b2624,transparent 56%),#080a09;min-height:calc(100dvh - var(--st-top))}
html[data-experiencia="nueva"] #cocuyoComposer{position:relative;margin:0;padding:24px 22px 24px;border:0;border-radius:0;background:none;box-shadow:none;color:#f1f5ef;text-align:center}
html[data-experiencia="nueva"] #cocuyoComposer label.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html[data-experiencia="nueva"] .cocuyo-compose-heading{justify-content:center;gap:12px;font-size:12px;letter-spacing:.025em;color:#adb4a8}
html[data-experiencia="nueva"] .cocuyo-compose-heading .explore-lights{display:flex;gap:8px;margin:0}
html[data-experiencia="nueva"] .cocuyo-compose-heading .explore-lights i{width:9px;height:23px;box-shadow:0 0 24px #b4f64b40;border-radius:8px;transform:rotate(18deg)}
html[data-experiencia="nueva"] #cocuyoComposer h2{font-size:clamp(30px,4.2vw,50px);font-weight:550;line-height:1.12;letter-spacing:-.05em;margin:24px 0 15px}
html[data-experiencia="nueva"] #cocuyoComposer>p:not(.cocuyo-pilot-status){font-size:15px;line-height:1.65;color:#a6afa2;max-width:520px;margin:0 auto 30px}
html[data-experiencia="nueva"] #cocuyoComposer form{border:1px solid #ffffff24;border-radius:22px;background:linear-gradient(145deg,#1c201c,#151815);padding:13px 15px 14px;text-align:left;box-shadow:0 24px 60px #0005,0 1px 0 #ffffff08 inset;transition:border-color .18s,box-shadow .18s}
html[data-experiencia="nueva"] #cocuyoComposer form:focus-within{border-color:#8db94c88;box-shadow:0 24px 60px #0005,0 0 0 3px #b4f65b0b}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-type{gap:7px;margin:0 0 7px}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-type button{background:none;border:1px solid transparent;font-size:11px;padding:7px 10px;border-radius:8px;color:#939d90}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-type button[aria-pressed="true"]{background:#ffffff09;color:#e3eddc;border-color:#ffffff15}
html[data-experiencia="nueva"] #cocuyoComposer textarea{min-height:80px;max-height:260px;border:0;outline:0;background:transparent;color:#f1f5ef;font-size:16px;line-height:1.6;padding:12px 8px;border-radius:8px}
html[data-experiencia="nueva"] #cocuyoComposer textarea:focus{outline:0}
html[data-experiencia="nueva"] #cocuyoComposer textarea::placeholder{color:#939b8d}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-pilot-actions{margin-top:8px;gap:12px;flex-direction:row;align-items:center}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-pilot-actions button{border-radius:12px;min-height:42px;padding:10px 16px;line-height:1.25;font-size:12px;cursor:pointer;background:var(--sn-green);color:#14210c}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-pilot-actions .cocuyo-mic{background:#ffffff06;color:#c9d0c3;border:1px solid #ffffff17;padding:10px 13px}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-mic[aria-pressed="true"]{color:#ffc1b5;border-color:#db674d;background:#511f173d}
html[data-experiencia="nueva"] #cocuyoComposer small.cocuyo-compose-note{display:block;margin:12px 8px 0;font-size:10px;color:#9fa798;text-align:left}
html[data-experiencia="nueva"] .sn-suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:21px 0 0;text-align:left}
html[data-experiencia="nueva"] .sn-suggestions[hidden]{display:none}
html[data-experiencia="nueva"] .sn-suggestions button{display:flex;align-items:center;gap:12px;min-width:0;min-height:70px;text-align:left;background:linear-gradient(130deg,#171b17,#111411);border:1px solid #ffffff18;border-radius:14px;color:#e0e5dc;cursor:pointer;font:450 12px/1.35 var(--font);padding:13px 15px;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
html[data-experiencia="nueva"] .sn-suggestions button:disabled{opacity:.55;cursor:wait}
html[data-experiencia="nueva"] .sn-idea-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#b4f65b0a;color:#bfdc9b;border:1px solid #b4f65b17}
html[data-experiencia="nueva"] .sn-idea-icon svg{width:19px;height:19px}
html[data-experiencia="nueva"] .sn-idea-copy{min-width:0;display:grid;gap:4px;flex:1}
html[data-experiencia="nueva"] .sn-idea-copy strong{font-size:12px;font-weight:550;line-height:1.35;color:#e0e5dc}
html[data-experiencia="nueva"] .sn-idea-copy small{font-size:10px;line-height:1.4;color:#9ba695}
html[data-experiencia="nueva"] .sn-idea-arrow{color:#a7b798;transition:transform .18s,color .18s}
@media(hover:hover){html[data-experiencia="nueva"] .sn-suggestions button:hover:not(:disabled){border-color:#b4f65b50;background:linear-gradient(130deg,#222b1c,#151a12);box-shadow:0 5px 20px #0002,0 1px 0 #ffffff06 inset;transform:translateY(-2px)}html[data-experiencia="nueva"] .sn-suggestions button:hover:not(:disabled) .sn-idea-arrow{color:var(--sn-green);transform:translate(2px,-2px)}}
html[data-experiencia="nueva"] .sn-process{padding:20px 10px;margin:0 22px;border-top:1px solid var(--sn-line);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;color:#9aa492;font-size:11px}
html[data-experiencia="nueva"] .sn-process li{display:flex;align-items:center;gap:11px}.sn-process span{font-size:10px;letter-spacing:.06em;color:#67725e}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-plan{text-align:left;background:#121710;border:1px solid #8bb75848;border-radius:18px;padding:24px;margin:20px 0}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-plan h3{font-size:24px;letter-spacing:-.03em}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-plan>button{border-radius:11px;background:var(--sn-green);color:#14210c}
html[data-experiencia="nueva"] #cocuyoComposer .cocuyo-plan small{display:block;margin-top:12px}
html[data-experiencia="nueva"] #cocuyoChat{border:1px solid #ffffff20;border-radius:24px;background:#0d110c;max-width:850px;width:calc(100vw - 36px)}
html[data-experiencia="nueva"] #cocuyoChat #cocuyoComposer{padding:25px 20px 15px}
html[data-experiencia="nueva"] #cocuyoChat #cocuyoComposer h2{font-size:34px}
html[data-experiencia="nueva"] #cocuyoChat .sn-suggestions{gap:6px}
html[data-experiencia="nueva"] #cocuyoChat .sn-suggestions button{font-size:11px}
html[data-experiencia="nueva"] .composer{border-color:#ffffff20!important;box-shadow:0 14px 50px #0004!important}
html[data-experiencia="nueva"] #pg-home .composer [contenteditable]{font-size:15px;line-height:1.65}
html[data-experiencia="nueva"] .st-model-panel{border-color:#ffffff20;border-radius:16px;background:#121510}
html[data-experiencia="nueva"] :is(.sn-agent-entry,.sn-suggestions button):focus-visible{outline:2px solid var(--sn-green);outline-offset:4px}
@media(min-width:901px) and (max-width:1200px){html[data-experiencia="nueva"] .sn-agent-entry span{font-size:12px}}
@media(max-width:900px){html[data-experiencia="nueva"] .cocuyo-assistant-wrap{padding:22px 16px 90px}html[data-experiencia="nueva"] #cocuyoComposer{padding:18px 0}html[data-experiencia="nueva"] #cocuyoComposer h2{font-size:35px}html[data-experiencia="nueva"] #cocuyoComposer>p:not(.cocuyo-pilot-status){font-size:13px;padding:0 10px}html[data-experiencia="nueva"] .sn-process{margin:0;padding:20px 0;gap:12px}html[data-experiencia="nueva"] .sn-process li{align-items:start;flex-direction:column;gap:8px;line-height:1.5}html[data-experiencia="nueva"] #cocuyoChat{width:calc(100vw - 20px);border-radius:19px}html[data-experiencia="nueva"] #cocuyoChat #cocuyoComposer{padding:20px 3px 5px}html[data-experiencia="nueva"] #cocuyoComposer form{padding:11px}html[data-experiencia="nueva"] .sn-suggestions{gap:7px}html[data-experiencia="nueva"] .sn-suggestions button{font-size:11px;padding:9px 11px}}
@media(max-width:420px){html[data-experiencia="nueva"] .sn-suggestions button{gap:8px;min-height:78px;padding:10px}html[data-experiencia="nueva"] .sn-idea-icon{width:25px;height:28px;border:0;background:none}html[data-experiencia="nueva"] .sn-idea-copy strong{font-size:11px}html[data-experiencia="nueva"] .sn-idea-copy small{font-size:10px}html[data-experiencia="nueva"] .sn-idea-arrow{display:none}}
@media(prefers-reduced-motion:reduce){html[data-experiencia="nueva"] :is(#cocuyoComposer form,.sn-suggestions button,.sn-idea-arrow),html[data-experiencia="nueva"] .sn-suggestions button:hover:not(:disabled),html[data-experiencia="nueva"] .sn-suggestions button:hover:not(:disabled) .sn-idea-arrow{transition:none;transform:none}}
@media(max-width:900px){
 html[data-experiencia="nueva"] .studio-public-nav .brand .wordmark{font-size:20px;letter-spacing:-1px}
 html[data-experiencia="nueva"] body.studio-workbench.studio-simple .studio-public-nav .st-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
 html[data-experiencia="nueva"] .studio-public-nav :is(.sn-agent-entry,.st-youtube){display:none!important}
 html[data-experiencia="nueva"] .cocuyo-assistant-wrap{padding-top:12px}
}


/* cocuyo-css: assets/css/estudio-cocuyo.css */
/* Propuestas por escenas: el editor conserva la confirmación de cada creación. */
html #cocuyoComposer .cocuyo-plan{padding:20px;overflow-wrap:anywhere}
html #cocuyoComposer .cocuyo-scenes-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:23px 0 13px}
html #cocuyoComposer .cocuyo-scenes-kicker{color:#b2bcae;font-size:11px;font-weight:550;letter-spacing:.03em}
html #cocuyoComposer .cocuyo-scenes-heading h3{margin:5px 0 0;font-size:27px;line-height:1.15;color:#f3f7ef}
html #cocuyoComposer .cocuyo-scenes-badge{flex:none;padding:7px 10px;border:1px solid #b8f35b35;border-radius:99px;background:#b8f35b0c;color:#c9eea0;font-size:11px}
html #cocuyoComposer .cocuyo-scenes-summary{margin:0 0 8px;color:#d4ddcf;font-size:14px;line-height:1.6}
html #cocuyoComposer .cocuyo-scenes-delivery{margin:0 0 20px;color:#a7b1a1;font-size:12px;line-height:1.6}
html #cocuyoComposer .cocuyo-scenes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;list-style:none;padding:0;margin:0}
html #cocuyoComposer .cocuyo-scene{min-width:0;padding:19px;border:1px solid #ffffff19;border-radius:16px;background:linear-gradient(130deg,#ffffff04,transparent 70%),#141913}
html #cocuyoComposer .cocuyo-scene-top{display:flex;align-items:flex-start;gap:12px}
html #cocuyoComposer .cocuyo-scene-top>div{min-width:0}
html #cocuyoComposer .cocuyo-scene-number{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #b8f35b28;border-radius:10px;background:#b8f35b09;color:#c7e5a7;font-size:12px;font-variant-numeric:tabular-nums}
html #cocuyoComposer .cocuyo-plan-model{display:block;color:#b9d998;font-size:11px;line-height:1.4}
html #cocuyoComposer .cocuyo-scene h4{color:#f2f5ef;font-size:17px;line-height:1.35;letter-spacing:-.02em;margin:5px 0 0;font-weight:600}
html #cocuyoComposer .cocuyo-scene-description{margin:14px 0 0;font-size:13px;color:#b6c1af;line-height:1.6}
html #cocuyoComposer .cocuyo-plan-spec{flex-wrap:wrap;gap:6px;margin:14px 0}
html #cocuyoComposer .cocuyo-plan-spec span{font-size:11px;line-height:1.3;padding:5px 7px}
html #cocuyoComposer .cocuyo-scene-references{padding:12px;border:1px solid #d8b97828;border-radius:10px;background:#d8b97807;color:#d8caaa;font-size:12px;line-height:1.6;margin:12px 0}
html #cocuyoComposer .cocuyo-scene-references strong{font-size:11px;color:#dfd0b1;font-weight:600}
html #cocuyoComposer .cocuyo-scene-references ul{margin:5px 0 0;padding-left:17px}
html #cocuyoComposer .cocuyo-scene details{border-top:1px solid #ffffff0e;border-bottom:1px solid #ffffff0e}
html #cocuyoComposer .cocuyo-scene summary{padding:14px 0;margin:0;color:#c4cdbd;font-size:12px;min-height:44px;box-sizing:border-box}
html #cocuyoComposer .cocuyo-scene details p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 14px;font-size:12px;color:#c4cdbd;line-height:1.7}
html #cocuyoComposer .cocuyo-scene-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
html #cocuyoComposer .cocuyo-scene .cocuyo-plan-price{flex:1;margin:0;font-size:12px;line-height:1.55;color:#d0e6bc;font-weight:550}
html #cocuyoComposer [data-use-plan]{flex:none;min-height:44px;padding:11px 15px;border:1px solid #b8f35b;border-radius:11px;background:#b8f35b;color:#16230c;font:600 12px/1.35 var(--font);cursor:pointer}
html #cocuyoComposer [data-use-plan]:hover:not(:disabled){background:#cbff7c}
html #cocuyoComposer .cocuyo-scenes-total{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:21px 0 10px;padding-top:19px;border-top:1px solid #b8f35b27;color:#c4cfba;font-size:12px;line-height:1.5}
html #cocuyoComposer .cocuyo-scenes-total strong{color:#e6f7d4;text-align:right;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
html #cocuyoComposer small.cocuyo-scenes-note{display:block;color:#acb8a3;font-size:11px;line-height:1.65}
html #cocuyoComposer [data-quote-scenes]{min-height:44px;margin:8px 0 0;padding:10px 0;background:transparent;border:0;color:#bfd49f;font:550 12px var(--font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
html #cocuyoComposer :is([data-use-plan],[data-quote-scenes],summary):focus-visible{outline:2px solid #b8f35b;outline-offset:4px}
html #cocuyoComposer [data-quote-scenes]:disabled{text-decoration:none;cursor:default}
@media(max-width:600px){
 html[data-experiencia] #cocuyoComposer .cocuyo-plan{padding:14px;margin:16px 0;border-radius:15px}
 html #cocuyoComposer .cocuyo-scene{padding:13px;border-radius:12px}
 html #cocuyoComposer .cocuyo-scenes-heading{gap:9px;margin-top:18px}
 html #cocuyoComposer .cocuyo-scenes-heading h3{font-size:24px}
 html #cocuyoComposer .cocuyo-scenes-badge{font-size:10px;padding:6px 8px}
 html #cocuyoComposer .cocuyo-scene-top{gap:9px}
 html #cocuyoComposer .cocuyo-scene h4{font-size:16px}
 html #cocuyoComposer .cocuyo-scene-bottom{flex-direction:column;align-items:stretch;gap:11px}
 html #cocuyoComposer [data-use-plan]{width:100%}
 html #cocuyoComposer .cocuyo-scenes-total{flex-wrap:wrap;gap:7px}
 html #cocuyoComposer .cocuyo-scenes-total strong{font-size:17px}
}


/* cocuyo-css: assets/css/estudio-referencias-plan.css */
/* Aviso local del borrador del Agente: ocupa una fila sólo si faltan archivos. */
#imageReferenceTray:has(#cocuyoPlanReferencias:not([hidden])){flex-wrap:wrap}
#cocuyoPlanReferencias{flex:0 0 100%;order:10;min-width:0;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--muted2);font:500 12px/1.5 var(--font);overflow-wrap:anywhere}
#cocuyoPlanReferencias[hidden]{display:none!important}
#cocuyoPlanReferencias p{margin:0}
#cocuyoPlanReferencias button{display:block;min-height:36px;margin:5px 0 0;padding:4px 0;border:0;background:none;color:var(--text);font:inherit;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#cocuyoPlanReferencias:focus-visible,#cocuyoPlanReferencias button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}


/* cocuyo-css: assets/css/planes-estudio.css */
.cplanes, .cplan-dialog { --cp-lima:#b9f54b; --cp-texto:#f4f7ef; --cp-mut:#aeb7a6; --cp-borde:#e9f5dd21; font-family:var(--fuente,var(--font,Inter,Arial,sans-serif)); color:var(--cp-texto); }
.cplanes *, .cplan-dialog * { box-sizing:border-box; }
.cplanes a, .cplan-dialog a { color:inherit; text-decoration:none; }
.cplanes button, .cplan-dialog button { font:inherit; cursor:pointer; }
.cplanes h2, .cplanes h3, .cplanes p, .cplan-dialog h2, .cplan-dialog h3, .cplan-dialog p { margin:0; }
.cplanes a:focus-visible, .cplanes button:focus-visible, .cplan-dialog a:focus-visible, .cplan-dialog button:focus-visible { outline:2px solid var(--cp-lima); outline-offset:4px; }
.cplanes-top { display:flex; gap:25px; align-items:end; justify-content:space-between; margin-bottom:26px; }
.cplanes-kicker { color:#a7b59a; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:13px !important; }
.cplanes-top h2 { font-size:clamp(29px,3vw,43px); line-height:1.12; letter-spacing:-.045em; font-weight:550; }
.cplanes-top > p { color:var(--cp-mut); max-width:365px; font-size:13px; line-height:1.7; }
.cplanes-aviso { display:flex; gap:8px; align-items:center; margin:0 0 15px !important; color:#acb59f; font-size:11px; line-height:1.5; }
.cplanes-aviso::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:#cbd8ad; }
.cplanes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cplan { min-width:0; display:flex; flex-direction:column; padding:28px; border:1px solid var(--cp-borde); border-radius:17px; background:#10140f; }
.cplan-pro49 { background:radial-gradient(ellipse at 90% 0,#93ca3020,transparent 55%),#141b0f; border-color:#b9f54b66; }
.cplan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cplan-heading h3 { font-size:23px; line-height:1.2; font-weight:600; letter-spacing:-.04em; }
.cplan-ahorro { border:1px solid #b9f54b2e; border-radius:100px; color:#c7ef95; background:#b9f54b0a; padding:5px 9px; font-size:10px; line-height:1.3; white-space:nowrap; }
.cplan-desc { margin-top:11px !important; color:var(--cp-mut); font-size:12px; line-height:1.6; min-height:38px; }
.cplan-precio { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:6px; row-gap:2px; margin-top:26px; font-variant-numeric:tabular-nums; }
.cplan-precio b { font-size:46px; font-weight:550; line-height:1.1; letter-spacing:-.05em; }
.cplan-precio span { color:#a8b49c; font-size:11px; }
.cplan-referencia { margin-top:10px !important; color:#97a68c; font-size:10px; line-height:1.6; min-height:33px; }
.cplan-creditos { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; padding-top:18px; margin-top:18px; border-top:1px solid var(--cp-borde); color:#cad7be; font-size:11px; line-height:1.6; }
.cplan-creditos strong { font-size:20px; font-weight:550; letter-spacing:-.025em; color:var(--cp-texto); }
.cplan-lista { display:flex; flex-direction:column; gap:11px; margin:22px 0 27px; padding:0; list-style:none; }
.cplan-lista li { display:flex; gap:8px; align-items:start; font-size:11px; color:#bac6ad; line-height:1.55; }
.cplan-lista svg { flex-shrink:0; width:14px; height:14px; margin-top:2px; color:#91ab77; }
.cplan-btn { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:45px; margin-top:auto; padding:11px 15px; border-radius:10px; border:1px solid #d3e4c42b; background:#ffffff05; color:#f0f6e9; font-size:12px !important; font-weight:600 !important; line-height:1.4; text-align:center; transition:background .18s,border-color .18s; }
.cplan-btn:hover { background:#26341b; border-color:#b9f54b70; }
.cplan-btn[hidden] { display:none; }
.cplan-pro49 .cplan-btn, .cplan-btn-primary { background:var(--cp-lima); color:#132009; border-color:var(--cp-lima); }
.cplan-pro49 .cplan-btn:hover, .cplan-btn-primary:hover { background:#ccfb7b; border-color:#ccfb7b; }
.cplan-status { margin-top:10px !important; color:#92a182; font-size:10px; text-align:center; line-height:1.5; }
.cplanes-extra { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:22px 2px 0; }
.cplanes-extra p { color:#acb79f; font-size:12px; line-height:1.7; max-width:760px; }
.cplanes-extra strong { color:#d9e5ce; font-weight:550; }
.cplanes-extra a { color:var(--cp-lima); font-size:12px; font-weight:550; white-space:nowrap; }
.cplanes-porque { margin-top:16px !important; color:#87977b; font-size:11px; line-height:1.75; max-width:930px; }
.cplanes-compare-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; min-height:40px; padding:9px 13px; margin:10px 0 16px; border:1px solid #b9f54b30; border-radius:9px; background:#b9f54b06; color:#ceeca5; font:inherit; font-size:12px; line-height:1.45; text-align:center; cursor:pointer; transition:background .18s,border-color .18s; }
.cplanes-compare-link:hover { background:#b9f54b12; border-color:#b9f54b66; color:#e3fac6; }
.cplanes-compare-link:focus-visible { outline:2px solid #b9f54b; outline-offset:3px; }
.cplanes-compare-link > :first-child { min-width:0; overflow-wrap:anywhere; }
.cplanes-compare-link > [aria-hidden] { flex-shrink:0; }
.cplan-dialog { position:fixed; inset:0; width:min(560px,calc(100vw - 28px)); max-width:calc(100vw - 28px); max-height:calc(100dvh - 28px); padding:25px 28px; margin:auto; border:1px solid #d4edb83d; border-radius:21px; background:radial-gradient(ellipse at 100% 0,#5673231f,transparent 45%),#11150f; box-shadow:0 35px 100px #000a; overflow-y:auto; overscroll-behavior:contain; }
.cplan-dialog:not([open]) { display:none; }
.cplan-dialog::backdrop { background:#020502c9; backdrop-filter:blur(8px); }
.cplan-dialog-close { position:absolute; top:14px; right:14px; display:flex; align-items:center; justify-content:center; width:33px; height:33px; border:1px solid #ffffff12; border-radius:50%; background:#ffffff05; color:#b9c5ae; }
.cplan-dialog-close:hover { background:#ffffff13; color:white; }
.cplan-dialog h2 { padding-right:25px; font-size:28px; line-height:1.2; font-weight:550; letter-spacing:-.045em; }
.cplan-dialog-intro { margin-top:8px !important; color:var(--cp-mut); font-size:12px; line-height:1.5; }
.cplan-actual { display:flex; flex-direction:column; gap:5px; padding:12px 14px; margin-top:17px; border:1px solid #b9f54b32; border-radius:9px; background:#b9f54b07; font-size:11px; line-height:1.5; }
.cplan-actual strong { color:#cee9b0; font-weight:550; }
.cplan-actual span { color:#a8b79b; }
.cplan-dialog-price { display:flex; gap:5px; align-items:baseline; margin-top:17px; }
.cplan-dialog-price b { font-size:43px; line-height:1.1; font-weight:550; letter-spacing:-.045em; }
.cplan-dialog-price span { font-size:12px; color:#a9b59d; }
.cplan-resumen { margin:17px 0; display:flex; flex-direction:column; gap:8px; padding:14px 0; border-block:1px solid var(--cp-borde); }
.cplan-resumen div { display:flex; justify-content:space-between; align-items:start; gap:25px; font-size:12px; line-height:1.6; }
.cplan-resumen dt { color:#acb9a0; }
.cplan-resumen dd { margin:0; color:#e6efdd; text-align:right; font-variant-numeric:tabular-nums; }
.cplan-dialog-nota { color:#a8b59e; font-size:11px; line-height:1.65; margin:12px 0 !important; }
.cplan-dialog-aviso { padding:9px 12px; border:1px solid #bccaa821; border-radius:9px; background:#d4e1c606; color:#bfccb0; font-size:11px; line-height:1.55; margin-bottom:12px !important; }
.cplan-dialog-aviso:empty { display:none; }
.cplan-dialog .cplan-btn { margin-top:0; }
.cplan-dialog .cplan-btn[disabled] { cursor:default; opacity:.55; background:#252e1d; border-color:#6f815554; color:#b5c3a4; }
.cplan-dialog-secondary { display:block; width:100%; margin-top:8px; border:0; padding:8px 10px; background:transparent; color:#bdcbb1; font-size:11px !important; text-align:center; }
.cplan-dialog-secondary:hover { color:var(--cp-lima); }
.cplan-dialog-legal { display:flex; justify-content:center; gap:15px; margin-top:11px; font-size:10px; color:#a2b194; }
.cplan-dialog-legal a:hover { color:var(--cp-lima); }
.cplan-return { position:fixed; right:22px; bottom:22px; z-index:11000; width:min(355px,calc(100vw - 28px)); box-sizing:border-box; padding:19px 39px 16px 19px; border:1px solid #b9f54b39; border-radius:14px; background:#141a11f7; color:#f1f7e9; box-shadow:0 12px 45px #0008; font-family:var(--fuente,var(--font,Inter,Arial,sans-serif)); }
.cplan-return strong { font-size:13px; font-weight:600; line-height:1.4; }
.cplan-return p { margin:8px 0 12px; font-size:12px; line-height:1.6; color:#bbc8ad; }
.cplan-return-close { position:absolute; top:10px; right:9px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; color:#bdcbb0; cursor:pointer; }
.cplan-return-close:hover { background:#ffffff12; color:#fff; }
.cplan-return-action { border:0; padding:0; background:transparent; color:#c1f276; font:inherit; font-size:12px; line-height:1.5; font-weight:600; cursor:pointer; }
.cplan-return-action[disabled] { cursor:default; color:#9dae90; }
.cplan-return button:focus-visible { outline:2px solid #b9f54b; outline-offset:3px; }
@media (max-width:480px) { .cplan-return { right:14px; bottom:max(14px,env(safe-area-inset-bottom)); } }
@media (max-width:1000px) { .cplan { padding:22px; }.cplan-precio b { font-size:39px; }.cplan-heading { align-items:start; flex-direction:column; gap:8px; }.cplan-ahorro { min-height:23px; }.cplan-free .cplan-heading::after, .cplan-basico .cplan-heading::after { content:''; height:23px; }.cplan-desc { min-height:40px; } }
@media (max-width:760px) {
 .cplanes-top { flex-direction:column; align-items:start; gap:14px; }.cplanes-top h2 { font-size:32px; }.cplanes-top > p { font-size:12px; }
 .cplanes-grid { grid-template-columns:1fr; gap:13px; }.cplan { padding:25px; border-radius:14px; }.cplan-heading { flex-direction:row; align-items:center; gap:12px; }.cplan-free .cplan-heading::after, .cplan-basico .cplan-heading::after { content:none; }.cplan-desc { min-height:0; }
 .cplan-precio { margin-top:20px; }.cplan-precio b { font-size:42px; }.cplan-referencia { min-height:0; }.cplan-lista { margin-block:19px 23px; gap:9px; }.cplan-creditos { margin-top:14px; padding-top:14px; }
 .cplanes-extra { align-items:start; flex-direction:column; gap:13px; padding-top:18px; }.cplanes-extra p { font-size:11px; }.cplanes-porque { font-size:10px; }
 .cplan-dialog { padding:28px 21px 24px; border-radius:17px; }.cplan-dialog h2 { font-size:26px; }.cplan-dialog-intro { font-size:12px; }.cplan-resumen { margin-block:19px; padding-block:17px; }.cplan-resumen div { font-size:11px; gap:15px; }.cplan-dialog-nota { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .cplanes *, .cplan-dialog *, .cplanes-compare-link { transition:none !important; animation:none !important; } }

/* ============ Precios del Estudio móvil estilo Higgsfield (dueño, 8-oct-2026) ============
   planes-estudio.js → htmlHf(): solo con body.hf-movil (Estudio móvil). Página a pantalla
   completa: vídeo arriba, tarjetas de plan que se eligen, recarga en azul, «Qué incluye»
   y el botón de pago fijo abajo: blanco con letra negra y los créditos en una pastilla lima
   (dueño: «es el botón el que se ve raro … lo demás no molestaba tanto»). */
.cplan-dialog.cplan-hf{--hfp-lima:#d1fe17;position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#0b0b0b;color:#fff;overflow-y:auto;overscroll-behavior:contain;font-family:var(--font,system-ui,sans-serif);box-shadow:none}
.cplan-dialog.cplan-hf::backdrop{background:#0b0b0b}
/* Cabecera fija (10-oct-2026): la ✕ vive en una barra pegada arriba. Sobre el vídeo es
   transparente; al bajar (planes-estudio.js → barraFija, clase .is-fija) se vuelve opaca
   y muestra el título, así la ✕ nunca queda encima de una tarjeta o de un precio. En
   árabe la ✕ pasa a la derecha (inicio de la línea). Lo de detrás no se mueve. */
html:has(dialog.cplan-dialog.cplan-hf[open]){overflow:hidden}
.cplan-hf-barra{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;box-sizing:border-box;height:calc(58px + env(safe-area-inset-top,0px));margin-bottom:calc(-58px - env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 12px 0;transition:background-color .2s,box-shadow .2s}
.cplan-hf-barra.is-fija{background:rgb(11 11 11/.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgb(255 255 255/.07)}
.cplan-hf-barra__t{flex:1;min-width:0;margin-inline-end:44px;overflow:hidden;text-align:center;white-space:nowrap;text-overflow:ellipsis;font:700 16px/1.2 var(--font,system-ui);opacity:0;transition:opacity .2s}
.cplan-hf-barra.is-fija .cplan-hf-barra__t{opacity:1}
.cplan-hf .cplan-dialog-close{position:static;flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgb(0 0 0/.5);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cplan-hf-barra.is-fija .cplan-dialog-close{background:#1f1f1f}
.cplan-hf-hero{position:relative;height:250px;overflow:hidden;background:#111 url(/assets/media/explorar/h-astronauta.webp) center/cover}
.cplan-hf-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cplan-hf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0/.15) 0%,transparent 40%,rgb(11 11 11/.85) 88%,#0b0b0b 100%)}
.cplan-hf-hero p{position:absolute;left:0;right:0;bottom:44px;z-index:1;display:grid;justify-items:center;gap:8px;margin:0;text-align:center}
.cplan-hf-hero span{padding:5px 12px;border-radius:8px;background:var(--hfp-lima);color:#131517;font:italic 800 13px/1 var(--font,system-ui);transform:rotate(-3deg);box-shadow:0 6px 18px rgb(209 254 23/.25)}
.cplan-hf-hero b{font:italic 900 34px/1 var(--font,system-ui);letter-spacing:-.02em;text-shadow:0 4px 24px rgb(0 0 0/.6)}
.cplan-hf-cuerpo{position:relative;margin-top:-26px;padding:20px 12px 128px;border-radius:24px 24px 0 0;background:#111;box-shadow:0 -1px 0 rgb(255 255 255/.06)}
.cplan-hf h2{margin:0;text-align:center;font:700 19px/24px var(--font,system-ui)}
/* Crear sin créditos: el saldo y lo que cuesta esa creación, encima de «Elige tu plan». */
.cplan-hf-falta{display:grid;grid-template-columns:1fr 1fr;margin:0 0 16px;padding:10px 0;border-radius:14px;background:#1a1a1a;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);text-align:center}
.cplan-hf-falta>div+div{border-inline-start:1px solid rgb(255 255 255/.08)}
.cplan-hf-falta dt{margin:0 0 3px;font:500 11px/1.3 var(--font,system-ui);color:#8a8a8a}
.cplan-hf-falta dd{margin:0;font:800 20px/1.1 var(--font,system-ui);font-variant-numeric:tabular-nums;color:#fff}
.cplan-hf-falta dd span{font:500 11px/1 var(--font,system-ui);color:#8a8a8a}
.cplan-hf-falta>div:first-child dd{color:#ff8a7a}
.cplan-hf .cplan-dialog-intro{margin:6px auto 16px;max-width:34ch;text-align:center;font:400 12px/18px var(--font,system-ui);color:#8a8a8a}
.cplan-hf .cplan-actual{display:grid;gap:4px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#1a1a1a;font-size:12px;line-height:17px;color:#bdbdbd}
.cplan-hf .cplan-actual strong{color:#fff}
.cplan-hf-planes{display:grid;gap:12px}
.cplan-hf-plan{display:block;width:100%;padding:0;overflow:hidden;border:1.5px solid rgb(255 255 255/.08);border-radius:18px;background:#191919;color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.cplan-hf-plan.is-sel{border-color:var(--hfp-lima);background:color-mix(in srgb,var(--hfp-lima) 9%,#151515);box-shadow:0 0 0 3px rgb(209 254 23/.12)}
.cplan-hf-cinta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:26px;padding:4px 10px;font:600 12px/1 var(--font,system-ui);background:var(--hfp-lima);color:#131517}
/* Rosa algo más hondo (auditoría v338): con #ff2e88, «Mejor valor» en blanco daba 3,5:1 y
   «-10% en recargas» en rosa sobre blanco 3,15:1. Con #d4006a, 5,2:1 y 4,7:1. */
.cplan-hf-plan[data-tipo="pro49"] .cplan-hf-cinta{background:#d4006a;color:#fff}
.cplan-hf-cinta em{padding:3px 6px;border-radius:6px;background:rgb(255 255 255/.92);color:#d4006a;font:italic 800 11px/1 var(--font,system-ui)}
.cplan-hf-cab{display:flex;align-items:center;gap:12px;padding:14px 14px 12px}
.cplan-hf-radio{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #4a4a4a;color:transparent}
.cplan-hf-plan.is-sel .cplan-hf-radio{border-color:var(--hfp-lima);background:var(--hfp-lima);color:#131517}
.cplan-hf-radio svg{width:13px;height:13px}
/* Icono 3D de cada plan (assets/media/iconos/plan-*.webp, decorativo). */
.cplan-hf-ic{flex:none;display:block;width:40px;height:40px;border-radius:10px;background:#0b0b0b;object-fit:cover;outline:1px solid rgb(255 255 255/.09);outline-offset:-1px}
.cplan-hf-nom{flex:1;min-width:0;display:grid;gap:3px}
.cplan-hf-nom b{font:800 21px/1.05 var(--font,system-ui);letter-spacing:-.01em}
.cplan-hf-nom small{font:400 12px/16px var(--font,system-ui);color:#9a9a9a}
.cplan-hf-precio{flex:none;display:grid;justify-items:center;min-width:86px;padding:9px 10px;border-radius:12px;background:#262626}
.cplan-hf-plan.is-sel .cplan-hf-precio{background:var(--hfp-lima);color:#131517}
.cplan-hf-precio b{font:900 24px/1 var(--font,system-ui)}
.cplan-hf-precio small{margin-top:3px;font:500 11px/1 var(--font,system-ui);opacity:.75}
.cplan-hf-lista{display:grid;gap:7px;padding:12px 16px 15px;border-top:1px solid rgb(255 255 255/.07);font:400 13px/18px var(--font,system-ui);color:#d6d6d6}
.cplan-hf-lista span{display:flex;align-items:center;gap:8px}
.cplan-hf-plan.is-sel .cplan-hf-lista svg{color:var(--hfp-lima)}
.cplan-hf .cplan-dialog-aviso{margin:12px 4px 0;text-align:center;font:500 12px/17px var(--font,system-ui);color:var(--hfp-lima)}
.cplan-hf .cplan-dialog-aviso:empty{display:none}
.cplan-hf [data-cplan-portal]{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:12px;border:1px solid rgb(255 255 255/.14);border-radius:12px;background:#1d1d1d;color:#fff;font:600 14px/1 var(--font,system-ui)}
.cplan-hf-recarga{display:grid;gap:8px;margin-top:16px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#1f55ff 0%,#3f86ff 55%,#7cb6ff 100%);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgb(255 255 255/.15)}
.cplan-hf-recarga__t{display:flex;align-items:center;gap:8px;font:italic 900 18px/1.1 var(--font,system-ui)}
.cplan-hf-recarga__t em{padding:3px 7px;border-radius:6px;background:#ff2e88;font:italic 800 11px/1 var(--font,system-ui)}
.cplan-hf-recarga__s{font:400 13px/18px var(--font,system-ui);color:rgb(255 255 255/.86)}
.cplan-hf-recarga__b{display:grid;place-items:center;height:44px;margin-top:4px;border-radius:12px;background:var(--hfp-lima);color:#131517;font:700 14px/1 var(--font,system-ui);box-shadow:0 3px 0 #8fb10b}
.cplan-hf .cplan-dialog-nota{margin:14px 6px 0;text-align:center;font:400 11px/16px var(--font,system-ui);color:#7a7a7a}
.cplan-hf-tabla{width:100%;margin-top:22px;border-collapse:separate;border-spacing:0;font:400 12px/16px var(--font,system-ui)}
.cplan-hf-tabla caption{padding:0 4px 10px;text-align:start;font:700 16px/22px var(--font,system-ui);color:#fff}
/* «Qué incluye» sin salirse por los lados (10-oct-2026): en ruso «30 использований» y
   «Без ограничений» no cabían (la tabla medía 385 px a 360 y 390 de ancho, la columna Pro
   quedaba cortada y la hoja se podía arrastrar de lado). Relleno lateral de 4 px y, en
   ruso por debajo de 381 px, guiones donde hagan falta; los demás idiomas caben enteros. */
.cplan-hf-tabla th,.cplan-hf-tabla td{padding:10px 4px;border-bottom:1px dashed rgb(255 255 255/.09);text-align:center;color:#cfcfcf}
@media (max-width:380px){.cplan-hf-tabla td:lang(ru){-webkit-hyphens:auto;hyphens:auto}}
.cplan-hf-tabla thead th{font:700 13px/1 var(--font,system-ui);color:#fff}
.cplan-hf-tabla tbody th{text-align:start;font-weight:400;color:#8f8f8f}
.cplan-hf-tabla .is-sel{background:rgb(209 254 23/.08);color:var(--hfp-lima)}
.cplan-hf-tabla thead .is-sel{border-radius:10px 10px 0 0}
.cplan-hf-tabla tbody tr:last-child .is-sel{border-radius:0 0 10px 10px}
/* El reset global «svg{display:block}» dejaba la ✓ pegada a la izquierda de su celda (a la derecha en árabe): centrada con margin-inline. */
.cplan-hf-tabla svg{display:block;width:14px;height:14px;margin-inline:auto}
.cplan-hf .cplan-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cplan-hf .cplan-dialog-legal{display:flex;justify-content:center;gap:18px;margin-top:18px;font-size:12px}
.cplan-hf .cplan-dialog-legal a{color:#8a8a8a}
/* Pie: opaco justo detrás del botón (antes asomaba la tarjeta azul de la recarga por las
   esquinas); el degradado queda solo por encima. Sin botón visible (plan ya activo), fuera. */
.cplan-hf-pie{position:fixed;left:0;right:0;bottom:0;z-index:2;padding:22px 12px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgb(11 11 11/0) 0,#0b0b0b 20px)}
.cplan-hf-pie:not(:has(.cplan-btn:not([hidden]))){display:none}
.cplan-hf-pie .cplan-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:56px;border:0;border-radius:16px;background:#fff;color:#050505;font:800 17px/1 var(--font,system-ui);letter-spacing:-.01em;box-shadow:inset 0 -3px 0 rgb(0 0 0/.12),0 10px 28px rgb(0 0 0/.6);text-decoration:none}
.cplan-hf-pie .cplan-btn:active{transform:translateY(1px)}
.cplan-hf-pie .cplan-btn:disabled{opacity:.55;box-shadow:none}
.cplan-hf-pie .cplan-btn[hidden]{display:none}
.cplan-hf-chip{padding:6px 10px;border-radius:9px;background:var(--hfp-lima);color:#131517;font:800 13px/1 var(--font,system-ui)}
.cplan-hf :is(button,a):focus-visible{outline:2px solid var(--hfp-lima);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cplan-hf-hero video{display:none}}


/* cocuyo-css: assets/css/estudio-resultados-layout.css */
/* Cabecera compacta de resultados; cargar al final, sin áreas superpuestas.
 * Conserva tema, compositor, tarjetas, navegación y ejemplos vacíos. */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera{
 display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
 min-width:0;min-height:48px;padding:0 0 10px;box-sizing:border-box;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .hist-dia-meta{
 display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;flex:1 1 90px;min-width:0;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .fsel-dia{flex:0 0 22px}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .hist-dia-meta > span{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .hist-dia-meta > i{font-size:11px;line-height:1.4}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .histbar{
 flex:0 1 auto;width:316px;max-width:100%;min-height:44px;
 margin:0 0 0 auto;padding:0;border:0;box-sizing:border-box;background:none;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histctrl{
 width:100%;min-width:0;min-height:44px;justify-content:flex-end;gap:6px;margin:0;
}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histvista{order:-1;flex:none;gap:2px;padding:2px;border-radius:10px}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histvista button{
 min-height:36px;padding:8px 10px;gap:6px;border-radius:7px;white-space:nowrap;
}
/* .hist-dia span heredaba color/tamaño de fecha: el control conserva su estado. */
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histvista button span{font:inherit;color:inherit;letter-spacing:inherit}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histzoom{flex:0 0 80px;width:80px;min-width:0;margin-inline:2px}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histico{flex:none}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap :is(.histvista button,.histzoom):focus-visible{outline:2px solid var(--lima);outline-offset:3px}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia:not(.hist-dia-cabecera){padding:8px 0 10px}
body.studio-workbench.hist-lista:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .histbar{width:166px}
/* Lista no tiene tamaño de miniaturas. El valor vuelve al regresar a Rejilla. */
body.studio-workbench.hist-lista:not(.experiencia-facil):not(.modo-audio) #genwrap :is(.histzoom,.histico){display:none}
@media(min-width:1001px){
 body.studio-workbench.studio-simple[data-studio-mode="image"]:not(.experiencia-facil) #pg-home > .studio-wrap:has(#genwrap:not(.sin-nada) > #genout > .hist-dia){padding-top:10px}
 body.studio-workbench.audio-redesign:not(.experiencia-facil) #pg-home > .studio-wrap:has(#genout > .hist-dia){padding-top:14px}
}
@media(min-width:1001px){
 body.studio-workbench.studio-simple[data-studio-mode="video"]:not(.experiencia-facil) #studioResults:has(#genwrap:not(.sin-nada) > #genout > .hist-dia){padding-top:14px}
}
@media(max-width:1000px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #studioWorkspace:has(#genwrap:not(.sin-nada) > #genout > .hist-dia){row-gap:16px}
}
@media(max-width:900px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #studioResults:has(#genwrap:not(.sin-nada) > #genout > .hist-dia){margin-top:12px;padding-top:0;border-top:0}
}
@media(max-width:640px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera{gap:4px 8px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .histbar{width:176px;min-height:48px}
 body.studio-workbench.hist-lista:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .histbar{width:98px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histvista button{width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histvista button span{display:none}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histico{display:none}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genwrap .histzoom{flex-basis:64px;width:64px;margin-inline:2px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .hist-dia-meta > span{font-size:13px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) #genout > .hist-dia-cabecera > .hist-dia-meta > i{font-size:10px}
}
/* Audio conserva sus pestañas y filas, sin zoom innecesario. */
body.studio-workbench.audio-redesign #studioResults:has(#genout > .hist-dia) > .audio-feed-toolbar{padding-bottom:10px}
body.studio-workbench.audio-redesign #genout > .hist-dia{padding:8px 0 10px}
@media(max-width:900px){body.studio-workbench.audio-redesign #studioResults:has(#genout > .hist-dia) > .audio-feed-toolbar{padding-bottom:8px}}
/* Un envío incierto conserva su lugar: ni fallo, ni resultado ficticio. */
.jobcard.revision{padding:16px;align-self:start}
.jobcard.revision .jhead{flex-wrap:wrap}
.jobcard.revision .jhead span{color:var(--muted);font-size:12px}
.jr-revision{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.65;overflow-wrap:anywhere;white-space:normal}
.jr-revision span{display:block;margin-top:6px}
.jr-revision code{font-size:11px;color:var(--text);user-select:text}
.fila-aud .jr-revision{max-width:100%;font-size:11px}
/* ---- Cola de creaciones (25-sep-2026) ----
   GRIS = esperando turno: aún no salió hacia el proveedor y se puede cancelar
   (el servidor devuelve todos los créditos). VERDE = ya está en el proveedor:
   no se puede cancelar. Sin cola, las tarjetas son las de siempre.
   La tarjeta crece si el texto y el botón no caben (móvil, miniaturas pequeñas). */
.jobcard.cola-espera .jcarga,.jobcard.cola-proveedor .jcarga{min-height:132px;padding:14px;box-sizing:border-box;text-align:center;align-content:center}
.jobcard.cola-espera .jcarga{background:var(--surface2);border:1px dashed var(--border2);color:var(--muted2)}
.jobcard.cola-espera .cocuyocarga{filter:grayscale(1);opacity:.55}
.jobcard.cola-proveedor .jcarga{background:color-mix(in srgb,var(--verde-profundo) 30%,var(--surface));
 border:1px solid color-mix(in srgb,var(--verde-cocuyo) 45%,transparent);color:var(--lima-clara)}
.jcola{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;min-width:0}
.jcola-texto{font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
/* Objetivo táctil de 44 px como mínimo. */
.jcola-cancelar{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
 padding:0 18px;border-radius:10px;border:1px solid var(--border2);background:var(--surface3);color:var(--text);
 font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;touch-action:manipulation}
.jcola-cancelar:hover:not(:disabled){border-color:var(--muted);background:var(--surface)}
.jcola-cancelar:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.jcola-cancelar:disabled{opacity:.6;cursor:progress}
/* Vista de lista. */
.jobfila.cola-espera,body.studio-workbench .jobfila.cola-espera{background:var(--surface2);border:1px dashed var(--border2)}
.jobfila.cola-proveedor,body.studio-workbench .jobfila.cola-proveedor{border:1px solid color-mix(in srgb,var(--verde-cocuyo) 45%,transparent)}
.jobfila.cola-proveedor .jr-estado,body.studio-workbench .jobfila.cola-proveedor .jr-estado{color:var(--lima-clara)}
.jobfila .jcola-cancelar{align-self:flex-start}
/* Fila de audio: el texto y el botón van bajo el nombre de la voz. */
.jobcard.fila-aud.cola-espera,body.studio-workbench .jobcard.fila-aud.cola-espera{opacity:1;background:var(--surface2);border:1px dashed var(--border2)}
.jobcard.fila-aud.cola-proveedor,body.studio-workbench .jobcard.fila-aud.cola-proveedor{opacity:1;border-color:color-mix(in srgb,var(--verde-cocuyo) 45%,transparent)}
.fila-aud .jcola{align-items:flex-start;gap:6px}
.fila-aud .jcola-texto{font-size:11.5px;color:var(--muted2)}
.fila-aud.cola-proveedor .jcola-texto{color:var(--lima-clara)}
/* Cancelada: no es un error, así que no se pinta en rojo. */
.jobcard.fallo.cancelada .jerr{color:var(--muted2);background:var(--surface2);border-color:var(--border)}
.jobfila.cancelada .jr-err,body.studio-workbench .jobfila.cancelada .jr-err{color:var(--muted2)}
.jobfila.cancelada .jr-fallo,body.studio-workbench .jobfila.cancelada .jr-fallo{color:var(--muted)}
.jobcard.fallo.cancelada .jhead .ic{color:var(--muted)}
/* La zona oculta que anuncia los cambios de fase a los lectores de pantalla
   (.cola-aviso-lector) vive en estudio-workspace.css: esta hoja no posiciona nada. */


/* cocuyo-css: assets/css/estudio-invitacion.css */
/* Invitación propia. El único movimiento dura 600 ms; CTA siempre visible. */
.cinv-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid #343830;border-radius:24px;background:#11140f;color:#f3f7ed;font:400 14px/1.5 var(--font,system-ui,sans-serif);box-shadow:0 30px 120px #000b}
.cinv-dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}
/* Estado editorial dentro de resultados: el editor y el historial quedan vivos. */
[data-cinv-suspendido]{display:none!important}
.cinv-dialog.cinv-inline{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:920px;min-height:380px;max-height:none;margin:0 auto 16px;padding:16px 20px 24px;overflow:visible;border:0;border-radius:20px;background:radial-gradient(ellipse at 50% 30%,#a8e7350b,transparent 62%);box-shadow:none}
.cinv-inline .cinv-content{width:100%;max-width:680px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.cinv-dialog.cinv-inline h2{max-width:680px;font-size:clamp(27px,3vw,39px);line-height:1.12}
.cinv-inline .cinv-actions{max-width:380px;margin:0 auto}
.cinv-inline .cinv-note{max-width:450px;margin:16px auto 0;border:0;padding-top:0}
.cinv-inline .cinv-balance{max-width:330px;margin:0 auto 18px}
.cinv-inline .cinv-close{right:6px;top:6px;background:#171a13bd}
body[data-cinv-visible].studio-workbench.audio-redesign[data-audio-mobile="create"] .studio-results{display:block}
body[data-cinv-visible].studio-workbench.audio-redesign .studio-results{min-width:0}
.cinv-dialog button{font:600 14px/1.3 var(--font,system-ui,sans-serif);cursor:pointer}
.cinv-dialog button:focus-visible{outline:2px solid #b4f448;outline-offset:3px}
.cinv-dialog .cinv-close{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:12px;border:1px solid #ffffff0c;border-radius:50%;background:#171c14;color:#c7cebe}
.cinv-close:hover{background:#252d1f;color:#fff}
.cinv-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* Arriba, el nombre COCUYO escrito, como en el Estudio móvil: sin luciérnaga ni
   escena (dueño, 8-oct-2026: el logo está por rediseñar). */
.cinv-content{padding:46px 34px 26px;text-align:center}
.cinv-marca{margin:0 0 16px;font:800 22px/1 var(--font,system-ui,sans-serif);letter-spacing:-.02em;color:#f3f7ed}
.cinv-marca .o-viva{color:#b4f448}
.cinv-dialog h2{max-width:380px;margin:0 auto 11px;font-size:30px;line-height:1.1;font-weight:650;letter-spacing:-.04em;text-wrap:balance}
.cinv-dialog #cinv-description{font-size:14px;line-height:1.6;max-width:380px;margin:0 auto 20px;color:#b4bfaa;text-wrap:pretty}
.cinv-actions{display:flex;gap:9px;align-items:stretch}
.cinv-actions button{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:48px;padding:13px 16px;border-radius:12px}
.cinv-primary{flex:1;border:1px solid #b4f448;background:#b4f448;color:#152106}
.cinv-primary:hover{background:#c5ff68;border-color:#c5ff68}
.cinv-primary svg{width:18px;height:18px;flex:none}
.cinv-secondary{flex:0 0 auto;border:1px solid #424c38;background:#20271b;color:#f1f5eb}
.cinv-secondary:hover{background:#2b3523;border-color:#6b8052}
.cinv-detail{font-size:11px;line-height:1.5;margin:12px 0 0;color:#b9c3ae}
.cinv-note{font-size:10px;line-height:1.6;margin:17px 0 0;padding-top:14px;border-top:1px solid #ffffff0c;color:#86947b;text-wrap:pretty}
.cinv-balance{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px;padding:13px 0;border-top:1px solid #ffffff0e;border-bottom:1px solid #ffffff0e;text-align:center}
.cinv-balance>div+div{border-left:1px solid #ffffff12}
.cinv-balance dt{font-size:11px;line-height:1.4;color:#9fae90;margin-bottom:5px}
.cinv-balance dd{margin:0;font-size:23px;line-height:1.1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cinv-balance dd span{font-size:11px;font-weight:400;letter-spacing:0;color:#9fae90}
.cinv-balance>div:first-child dd{color:#f0ac91}
@media(max-width:480px){.cinv-dialog{border-radius:20px}.cinv-content{padding:42px 22px 22px}.cinv-dialog h2{font-size:27px}.cinv-dialog #cinv-description{font-size:13px;margin-bottom:17px}.cinv-actions button{padding-inline:12px}.cinv-note{font-size:10px}}
@media(max-width:600px){.cinv-dialog.cinv-inline{min-height:340px;padding:4px 0 18px}.cinv-inline .cinv-content{padding:0 12px}.cinv-dialog.cinv-inline h2{font-size:28px}.cinv-inline .cinv-marca{margin-bottom:12px}.cinv-inline .cinv-note{margin-top:12px}.cinv-inline .cinv-close{top:0;right:0}}
@media(max-width:900px){body[data-cinv-visible].studio-workbench.audio-redesign[data-audio-mobile="history"] .studio-editor-slot{display:block}}
@media(max-height:640px){.cinv-content{padding-top:34px;padding-bottom:18px}.cinv-dialog h2{font-size:26px}.cinv-note{margin-top:12px;padding-top:10px}}
@media(prefers-reduced-motion:reduce){.cinv-dialog *, .cinv-dialog *::before,.cinv-dialog *::after{animation:none!important;transition:none!important}}

/* ============ Estudio móvil estilo Higgsfield (body.hf-movil; dueño, 10-oct-2026) ============
   Crear sin cuenta: ventana centrada encima del Estudio, como «Welcome to Higgsfield»:
   tarjeta oscura, ✕ redonda, el nombre COCUYO escrito (sin icono), título, frase y dos
   botones a todo el ancho (lima «Crear cuenta», contorno «Entrar»). Lo de detrás no se
   mueve mientras está abierta. */
.cinv-dialog.cinv-hf{--cinv-lima:#d1fe17;position:fixed;inset:0;width:min(400px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid rgb(255 255 255/.08);border-radius:24px;background:#141517;color:#fff;font:400 14px/1.45 var(--font,system-ui,sans-serif);box-shadow:0 24px 80px rgb(0 0 0/.7)}
.cinv-dialog.cinv-hf::backdrop{background:rgb(0 0 0/.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html:has(dialog.cinv-hf[open]){overflow:hidden}
.cinv-hf .cinv-close{right:auto;inset-inline-end:14px;top:14px;width:36px;height:36px;padding:9px;border:0;border-radius:50%;background:#26272a;color:#fff}
.cinv-hf .cinv-close:hover{background:#323337;color:#fff}
.cinv-hf .cinv-close svg{width:18px;height:18px;stroke-width:2}
.cinv-hf .cinv-content{padding:40px 22px 24px;text-align:center}
.cinv-hf .cinv-marca{margin:0 0 18px;font:800 19px/1 var(--font,system-ui,sans-serif);letter-spacing:-.02em;color:#fff}
.cinv-hf .cinv-marca .o-viva{color:var(--cinv-lima)}
.cinv-dialog.cinv-hf h2{max-width:300px;margin:0 auto 10px;font:800 29px/1.08 var(--font,system-ui,sans-serif);letter-spacing:-.03em;color:#fff;text-wrap:balance}
.cinv-dialog.cinv-hf #cinv-description{max-width:320px;margin:0 auto 24px;font-size:15px;line-height:1.45;color:#9b9da2}
.cinv-hf .cinv-actions{flex-direction:column;gap:10px}
.cinv-hf .cinv-actions button{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;font:700 16px/1.2 var(--font,system-ui,sans-serif)}
.cinv-hf .cinv-primary{border:0;background:var(--cinv-lima);color:#0b0b0b}
.cinv-hf .cinv-primary:hover{background:#dcff4f}
.cinv-hf .cinv-secondary{flex:none;border:1px solid rgb(255 255 255/.16);background:transparent;color:#fff}
.cinv-hf .cinv-secondary:hover{background:rgb(255 255 255/.05);border-color:rgb(255 255 255/.28)}
.cinv-hf .cinv-detail{margin:16px 0 0;font-size:13px;line-height:1.45;color:#8b8d92}
.cinv-hf .cinv-balance{margin:0 0 20px;border-color:rgb(255 255 255/.08)}
.cinv-hf .cinv-balance>div+div{border-left:0;border-inline-start:1px solid rgb(255 255 255/.1)}
.cinv-hf .cinv-balance dt,.cinv-hf .cinv-balance dd span{color:#8b8d92}
.cinv-hf button:focus-visible{outline:2px solid var(--cinv-lima);outline-offset:3px}
@media(max-height:560px){.cinv-hf .cinv-content{padding-top:30px}.cinv-dialog.cinv-hf h2{font-size:25px}.cinv-dialog.cinv-hf #cinv-description{margin-bottom:18px}}


/* cocuyo-css: assets/css/marca.css */
/* Una misma firma en portada, Estudio, cuenta, acceso y precios.
   Las dos O son las dos luces; no se mezcla con el control de energía del Agente. */
:root{--cocuyo-marca-size:24px;--cocuyo-marca-luz:#aff33e}
html body .cn-header .cn-brand,
html body.studio-workbench .studio-public-nav #studioHomeButton .wordmark,
html body .pp-header .pp-brand,
html body .pi-header .pi-brand,
html body .cabecera>a.wordmark.wordmark-cabecera,
html body .cabecera>a.wordmark{
 font-family:"Geist",Arial,sans-serif;font-size:var(--cocuyo-marca-size);font-weight:800;
 font-style:normal;line-height:1;letter-spacing:-.055em;text-transform:none;
 color:#f5f7f2;text-shadow:none;white-space:nowrap;gap:0;
}
html body .cn-header .cn-brand .o-viva,
html body.studio-workbench .studio-public-nav #studioHomeButton .o-viva,
html body .pp-header .pp-brand .o-viva,
html body .pi-header .pi-brand .o-viva,
html body .cabecera>a.wordmark.wordmark-cabecera .o-viva,
html body .cabecera>a.wordmark .o-viva{
 color:var(--cocuyo-marca-luz);text-shadow:0 0 13px #aff33e38;
}
html body .cn-header .cn-brand,
html body .pp-header .pp-brand,
html body .pi-header .pi-brand,
html body .cabecera>a.wordmark,
html body.studio-workbench .studio-public-nav #studioHomeButton{
 display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
}
html body.studio-workbench .studio-public-nav #studioHomeButton .cocuyologo{display:none}
@media(max-width:900px){:root{--cocuyo-marca-size:20px}}
@media(max-width:370px){:root{--cocuyo-marca-size:18px}}
/* En la fila compacta del Estudio queda espacio para los tres editores e idioma. */
@media(max-width:420px){
 html body.studio-workbench .studio-public-nav #studioHomeButton{min-width:44px}
 html body.studio-workbench .studio-public-nav #studioHomeButton .wordmark{font-size:18px}
}
@media(max-width:370px){
 html body.studio-workbench .studio-public-nav #studioHomeButton .wordmark{font-size:16px}
}

/* La misma firma tipográfica en las páginas públicas añadidas después. */
@media(max-width:370px){
 html body.studio-workbench.studio-simple .studio-public-nav{padding-inline:8px;gap:4px}
 html body.studio-workbench.studio-simple .studio-public-nav .st-nav-group>a{padding-inline:0}
 html body.studio-workbench.studio-simple .studio-public-nav .st-nav-group>button{width:24px;min-width:24px;min-height:44px;padding-inline:2px}
}
html body :is(.header .brand,.seo-brand){
 font-family:"Geist",Arial,sans-serif;font-weight:800;font-style:normal;
 letter-spacing:-.055em;line-height:1;color:#f5f7f2;white-space:nowrap;gap:0;
}
html body :is(.header .brand,.seo-brand,.acceso-modal-marca,.apoyo-eyebrow,.in-demo-marca,.cocuyo-compose-heading) .o-viva{
 color:var(--cocuyo-marca-luz);font:inherit;letter-spacing:inherit;text-shadow:0 0 13px #aff33e38;
}


/* cocuyo-css: assets/css/comunidad-nav.css */
/* Colores de los tokens compartidos; no modifica la barra inferior móvil. */
.cn-community-entry{display:flex;align-items:center;align-self:center;flex:none;order:4}
.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--gris-niebla);font:550 13px/1.2 var(--fuente);white-space:nowrap;cursor:pointer}
.cn-community-toggle>svg{width:12px;height:12px;transition:transform var(--trans-rapida)}
.cn-community-toggle[aria-expanded=true]>svg{transform:rotate(180deg)}
.cn-header .cn-community-toggle:hover,.studio-public-nav .cn-community-toggle:hover,.cn-community-toggle[aria-expanded=true]{color:var(--blanco-luz);background:var(--negro-elevado)}
.cn-community-panel{position:fixed;z-index:var(--z-overlay,200);box-sizing:border-box;display:grid;grid-template-columns:1.15fr 1fr;gap:24px;padding:24px;border:1px solid var(--negro-borde);border-radius:16px;background:var(--negro-elevado);color:var(--blanco-luz);box-shadow:var(--sombra-2,0 18px 48px color-mix(in srgb,var(--negro-abismo) 85%,transparent));overflow:auto;overscroll-behavior:contain;font-family:var(--fuente)}
.cn-community-panel[hidden]{display:none!important}
.cn-community-panel *{box-sizing:border-box}
.cn-community-panel a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 8px;border-radius:8px;color:var(--gris-niebla);text-decoration:none;font-size:13px;line-height:1.4}
.cn-community-panel a:hover{background:var(--negro-abismo);color:var(--blanco-luz)}
.cn-community-panel a>svg{width:20px;height:20px;flex:none;color:var(--gris-humo)}
.cn-community-panel a>svg:last-child{width:14px;height:14px;margin-left:auto}
.cn-community-panel a>span{display:grid;gap:4px;min-width:0}
.cn-community-panel b{font-size:13px;font-weight:600;color:var(--blanco-luz)}
.cn-community-panel small{font-size:11px;color:var(--gris-humo);white-space:normal}
.cn-community-panel .cn-community-overview{position:relative;display:grid;gap:7px;margin-bottom:10px;padding:6px 8px 18px;border-bottom:1px solid var(--negro-borde);border-radius:0}
.cn-community-overview>b{font-size:17px!important}
.cn-community-overview>span{font-size:12px;color:var(--gris-humo)}
.cn-community-panel .cn-community-overview>svg{position:absolute;right:8px;top:8px;color:var(--verde-cocuyo)}
.cn-community-follow{padding-left:24px;border-left:1px solid var(--negro-borde)}
.cn-community-follow h2{margin:4px 8px 8px;font-size:12px;font-weight:650;color:var(--blanco-luz)}
.cn-community-follow p{margin:0 8px 12px;font-size:11px;color:var(--gris-humo)}
.cn-community-panel :is(a,button):focus-visible,.cn-community-toggle:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
/* Redes secundarias en una línea (Familia, 29-sep-2026): el menú no repite las siete. */
.cn-community-panel .cn-community-mas{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:6px 8px 0;font-size:11px;color:var(--gris-humo)}
.cn-community-panel .cn-community-mas a{display:inline-flex;min-height:44px;padding:0;gap:0;border-radius:4px;font-size:12px;color:var(--gris-niebla);text-decoration:underline;text-decoration-color:var(--negro-borde);text-underline-offset:4px}
.cn-community-panel .cn-community-mas>span{flex-basis:100%;margin-top:4px}
.cn-community-panel .cn-community-mas a:hover{background:none;color:var(--blanco-luz);text-decoration-color:currentColor}
@media(max-width:1180px){.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{padding-inline:8px;font-size:12px}}
@media(max-width:900px){.cn-nav.cn-has-community,.studio-public-nav .st-nav.cn-has-community{overflow-x:auto;scrollbar-width:none}.cn-has-community::-webkit-scrollbar{display:none}.cn-community-entry{justify-content:center}.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{padding-inline:6px;font-size:11px}.cn-community-toggle>svg{width:10px;height:10px}.cn-community-panel{gap:16px;padding:18px}.cn-community-follow{padding-left:16px}}
@media(max-width:450px){.cn-community-panel{grid-template-columns:1fr;gap:16px}.cn-community-follow{padding:16px 0 0;border-left:0;border-top:1px solid var(--negro-borde);display:grid;grid-template-columns:1fr 1fr;gap:0 6px}.cn-community-follow h2,.cn-community-follow p,.cn-community-follow .cn-community-mas{grid-column:1/-1}.cn-community-panel a{min-height:48px}.cn-community-follow a>svg:first-child{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.cn-community-toggle>svg{transition:none}}


/* cocuyo-css: assets/css/familia.css */
/* ============================================================
   COCUYO · FAMILIA — sistema de diseño de la web pública
   (dueño, 29-sep-2026: «Familia Cocuyo»; concepto aprobado en
   propuestas/familia/sistema.css, aligerado al promoverlo).
   ------------------------------------------------------------
   Una sola piel: cabecera, mega menú, menú ☰ móvil y pie comunes a
   todas las páginas públicas (fase 1) y los componentes que usarán
   las páginas al rediseñarse (fase 2).

   Acabado: ligero y limpio (Runway/Apple). Titulares Geist 500–550,
   cuerpo 400, pocas líneas (la superficie ya separa), sombras
   mínimas y la luz lima SOLO en la acción principal, muy suave.

   Reglas:
   - Colores y fuentes SOLO desde tokens.css (var()). Aquí solo hay
     tokens --f-* construidos sobre ellos. Sin colores sueltos.
   - Clases con prefijo f-: no chocan con el CSS de cada página.
   - La cabecera, la hoja ☰ y el pie se protegen de los estilos de la
     página (fuente, listas, botones, márgenes) porque conviven con
     hojas antiguas hasta la fase 2.
   - Móvil primero. Movimiento reducido: sin transiciones.
   ============================================================ */

:root {
  /* ---------- Superficies: negro con escalones muy finos ---------- */
  --f-fondo: var(--negro-abismo);
  --f-sup-1: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  --f-sup-2: color-mix(in srgb, var(--blanco-luz) 5.5%, var(--negro-abismo));
  --f-sup-3: color-mix(in srgb, var(--blanco-luz) 9%, var(--negro-abismo));
  --f-vidrio: color-mix(in srgb, var(--negro-abismo) 80%, transparent);
  /* Fondo de la cabecera y del menú lateral del móvil: el del Estudio en el móvil (≈ #0b0b0b). */
  --f-cajon-fondo: color-mix(in srgb, var(--blanco-luz) 2.4%, var(--negro-abismo));
  --f-linea: color-mix(in srgb, var(--blanco-luz) 6%, transparent);
  --f-linea-fuerte: color-mix(in srgb, var(--blanco-luz) 12%, transparent);

  /* ---------- Texto ---------- */
  --f-texto: var(--blanco-luz);
  --f-texto-2: color-mix(in srgb, var(--blanco-luz) 70%, var(--negro-abismo));
  --f-texto-3: color-mix(in srgb, var(--blanco-luz) 52%, var(--negro-abismo));

  /* ---------- Acento: lima SOLO para acción y estado activo ---------- */
  --f-lima: var(--verde-cocuyo);
  --f-lima-hover: var(--lima-clara);
  --f-lima-tinta: var(--tinta-sobre-verde);
  --f-lima-suave: color-mix(in srgb, var(--verde-cocuyo) 10%, transparent);
  --f-lima-linea: color-mix(in srgb, var(--verde-cocuyo) 32%, transparent);
  /* La única luz: el botón principal al pasar, apenas perceptible. */
  --f-luz: 0 0 18px color-mix(in srgb, var(--verde-cocuyo) 16%, transparent);

  /* ---------- Tipografía: Geist; escala fluida ---------- */
  --f-fuente: var(--fuente);
  --f-t-display: clamp(2.5rem, 1.4rem + 4.8vw, 5rem);
  --f-t-1: clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem);
  --f-t-2: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  --f-t-3: clamp(1.15rem, 1.08rem + .4vw, 1.4rem);
  --f-t-4: 1.0625rem;
  --f-t-cuerpo: 1rem;
  --f-t-lead: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --f-t-sm: .875rem;
  --f-t-xs: .75rem;
  --f-peso-display: 500;
  --f-peso-titulo: 550;
  --f-peso-cuerpo: 400;
  --f-peso-ui: 500;
  --f-tracking-display: -0.04em;
  --f-tracking-titulo: -0.025em;

  /* ---------- Espacio: base 4 px, más aire entre secciones ---------- */
  --f-e-1: 4px;  --f-e-2: 8px;  --f-e-3: 12px; --f-e-4: 16px; --f-e-5: 20px;
  --f-e-6: 24px; --f-e-8: 32px; --f-e-10: 40px; --f-e-12: 48px; --f-e-16: 64px;
  --f-seccion: clamp(88px, 5.5rem + 5vw, 168px);
  --f-gutter: 16px;
  --f-ancho: 1240px;
  --f-ancho-texto: 68ch;

  /* ---------- Forma ---------- */
  --f-r-control: 10px;
  --f-r-tarjeta: 16px;
  --f-r-media: 22px;
  --f-r-pill: 999px;

  /* ---------- Elevación mínima ---------- */
  --f-sombra-menu: 0 24px 48px color-mix(in srgb, var(--negro-abismo) 55%, transparent);

  /* ---------- Movimiento ---------- */
  --f-curva: var(--curva-suave);
  --f-rapido: 160ms var(--curva-suave);
  --f-medio: 300ms var(--curva-suave);

  /* ---------- Iconos de línea ---------- */
  --f-trazo: 1.5;

  --f-alto-cabecera: 64px;
}
@media (min-width: 960px) { :root { --f-gutter: 32px; } }

/* ============ Base (solo páginas ya migradas: <body class="familia">) ============ */
.familia {
  background: var(--f-fondo);
  color: var(--f-texto);
  font-family: var(--f-fuente);
  font-size: var(--f-t-cuerpo);
  font-weight: var(--f-peso-cuerpo);
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: clip;
}
.familia ::selection { background: var(--f-lima); color: var(--f-lima-tinta); }
.f-contenedor { width: min(100% - 2 * var(--f-gutter), var(--f-ancho)); margin-inline: auto; }
.f-seccion { padding-block: var(--f-seccion); }
.f-seccion--corta { padding-block: calc(var(--f-seccion) * .55); }
.f-seccion + .f-seccion { padding-top: 0; }
.f-separador { border: 0; border-top: 1px solid var(--f-linea); }
.f-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Tipografía ============ */
.f-display, .f-h1, .f-h2, .f-h3 { font-family: var(--f-fuente); font-weight: var(--f-peso-titulo); color: var(--f-texto); text-wrap: balance; margin: 0; }
.f-display { font-size: var(--f-t-display); font-weight: var(--f-peso-display); line-height: 1; letter-spacing: var(--f-tracking-display); }
.f-h1 { font-size: var(--f-t-1); font-weight: var(--f-peso-display); line-height: 1.05; letter-spacing: var(--f-tracking-titulo); }
.f-h2 { font-size: var(--f-t-2); line-height: 1.1; letter-spacing: var(--f-tracking-titulo); }
.f-h3 { font-size: var(--f-t-3); line-height: 1.25; letter-spacing: -0.015em; }
.f-h4 { font-size: var(--f-t-4); line-height: 1.3; font-weight: var(--f-peso-titulo); letter-spacing: -0.01em; margin: 0; }
.f-tenue { color: var(--f-texto-3); }
.f-lead { font-size: var(--f-t-lead); line-height: 1.55; color: var(--f-texto-2); max-width: 46ch; text-wrap: pretty; margin: 0; }
.f-texto { color: var(--f-texto-2); max-width: var(--f-ancho-texto); }
.f-pequeno { font-size: var(--f-t-sm); color: var(--f-texto-3); }
.f-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-t-xs); font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); }
.f-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--f-lima); }
.f-mono { font-family: var(--fuente-mono); font-size: .9em; }
.f-cabeza-seccion { display: grid; gap: var(--f-e-4); margin-bottom: var(--f-e-12); }
@media (min-width: 960px) { .f-cabeza-seccion--fila { grid-template-columns: 1fr auto; align-items: end; } }
.f-centro { text-align: center; justify-items: center; }
.f-centro .f-lead { margin-inline: auto; }

/* Wordmark: COCUYO con las dos O encendidas (ley de marca), sin halo. */
.f-marca { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-fuente); font-weight: 650; font-size: 1.125rem; letter-spacing: .07em; color: var(--f-texto); line-height: 1; text-decoration: none; white-space: nowrap; }
.f-marca .o-viva { color: var(--f-lima); text-shadow: none; }
.f-marca:focus-visible { border-radius: var(--f-r-control); }

/* ============ Botones ============ */
.f-btn {
  --alto: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto); padding: 0 20px; border-radius: var(--f-r-pill);
  font-family: var(--f-fuente); font-size: .9375rem; font-weight: var(--f-peso-ui); letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--f-rapido), color var(--f-rapido), border-color var(--f-rapido), transform var(--f-rapido), box-shadow var(--f-rapido);
}
.f-btn:focus-visible { border-radius: var(--f-r-pill); }
.f-btn:active { transform: scale(.98); }
.f-btn svg { width: 16px; height: 16px; flex: none; }
/* RTL: la flecha «siguiente» de los botones (p. ej. «ابدأ الإنشاء» del héroe) apunta
   a la izquierda, hacia donde se avanza en árabe y urdu (auditoría v338, idi-12). */
html[dir="rtl"] .f-btn svg:has(> use[href*="#i-siguiente"]) { transform: scaleX(-1); }
.f-btn.f-btn--primario { background: var(--f-lima); color: var(--f-lima-tinta); }
.f-btn.f-btn--primario:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
.f-btn.f-btn--claro { background: var(--f-texto); color: var(--negro-abismo); }
.f-btn.f-btn--claro:hover { background: color-mix(in srgb, var(--blanco-luz) 86%, var(--negro-abismo)); }
.f-btn.f-btn--secundario { background: var(--f-sup-2); color: var(--f-texto); }
.f-btn.f-btn--secundario:hover { background: var(--f-sup-3); }
.f-btn.f-btn--fantasma { background: transparent; color: var(--f-texto); border-color: var(--f-linea-fuerte); }
.f-btn.f-btn--fantasma:hover { background: var(--f-sup-2); }
.f-btn--sm { --alto: 36px; padding: 0 14px; font-size: .875rem; }
.f-btn--lg { --alto: 52px; padding: 0 26px; font-size: 1rem; }
.f-btn--bloque { width: 100%; }
.f-btn--icono { width: var(--alto); padding: 0; }
.f-btn[disabled], .f-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.f-enlace { display: inline-flex; align-items: center; gap: 6px; color: var(--f-texto); font-weight: var(--f-peso-ui); font-size: .9375rem; text-decoration: none; }
.f-enlace svg { width: 14px; height: 14px; transition: transform var(--f-rapido); }
.f-enlace:hover svg { transform: translateX(3px); }
/* RTL: las flechas de avance (icono «siguiente») de la cabecera, el menú ☰ y el
   pie apuntan a la izquierda, como el chevron del idioma (auditoría v338, MW-05). */
html[dir="rtl"] :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) svg.icono:has(> use[href*="#i-siguiente"]) { transform: scaleX(-1); }
html[dir="rtl"] :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-enlace:hover svg.icono:has(> use[href*="#i-siguiente"]) { transform: scaleX(-1) translateX(3px); }
.f-enlace:hover { color: var(--f-lima); }
.f-acciones { display: flex; flex-wrap: wrap; gap: var(--f-e-3); align-items: center; }

/* ============ Etiquetas ============ */
.f-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 9px; border-radius: var(--f-r-pill); font-size: .75rem; font-weight: var(--f-peso-ui); line-height: 1; color: var(--f-texto-2); background: var(--f-sup-2); white-space: nowrap; }
.f-chip--lima { color: var(--f-lima); background: var(--f-lima-suave); }
.f-chip--vidrio { background: var(--f-vidrio); backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); color: var(--f-texto); }
.f-chip--pronto { color: var(--f-texto-3); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
/* Insignias de los modelos (dueño, 11-oct-2026): TOP (el mejor), NEW (el más
   nuevo) y ECONÓMICO (el más barato), una de cada por medio. */
/*   Los mismos colores en todo Cocuyo: TOP rosa, NEW azul y ECONÓMICO lima. */
.f-chip--top, .f-chip--new, .f-chip--eco { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blanco-luz); }
.f-chip--top { background: var(--precio-rosa); }
.f-chip--new { background: var(--precio-azul); }
.f-chip--eco { color: var(--f-lima-tinta); background: var(--precio-lima); }
.f-punto-vivo { width: 6px; height: 6px; border-radius: 50%; background: var(--f-lima); }

/* ============ Media con clip ============ */
.f-media { position: relative; overflow: hidden; border-radius: var(--f-r-tarjeta); background: var(--f-sup-2); aspect-ratio: 16 / 10; isolation: isolate; }
.f-media > img, .f-media > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 700ms var(--f-curva); }
.f-media--cuadrada { aspect-ratio: 1; }
.f-media--vertical { aspect-ratio: 4 / 5; }
.f-media--cine { aspect-ratio: 16 / 9; }

/* ============================================================
   CABECERA COMÚN · mega menú · hoja ☰ · pie
   Protegidos de las hojas antiguas de cada página.
   ============================================================ */
/* Raíces: sin márgenes, bordes ni disposición heredados de hojas de página
   (p. ej. «footer { display:flex; padding: 30px 5vw }» de las SEO). */
.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio { margin: 0; border: 0; padding-inline: 0; font-size: 1rem; }
.f-cabecera, .f-pie { display: block; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) nav { display: block; gap: normal; font-size: inherit; color: inherit; }
/* text-align: start (no left): en árabe y urdu los títulos del menú ☰ y las
   columnas del pie van a la derecha, con sus elementos (auditoría v338, MW-05). */
.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio { font-family: var(--f-fuente); font-weight: var(--f-peso-cuerpo); line-height: 1.5; letter-spacing: -0.005em; color: var(--f-texto); text-align: start; -webkit-font-smoothing: antialiased; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) *, :where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) *::before, :where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) *::after { box-sizing: border-box; }
/* Reinicio sin peso (:where): cualquier clase f- de abajo manda sobre él. */
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(h2, h3, p) { margin: 0; font-size: inherit; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(a) { color: inherit; text-decoration: none; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(svg) { fill: none; stroke: currentColor; stroke-width: var(--f-trazo); stroke-linecap: round; stroke-linejoin: round; }
/* Iconos del sistema común (assets/icons/iconos.svg, scripts/iconos.mjs;
   helper assets/js/iconos.js). Trazo fino y color del texto; el tamaño lo
   fija cada contexto de arriba o estas tres medidas. */
.icono { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: var(--f-trazo, 1.5); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icono--16 { width: 16px; height: 16px; }
.icono--20 { width: 20px; height: 20px; }
.icono--24 { width: 24px; height: 24px; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(img, video) { display: block; max-width: none; }

.f-saltar { position: absolute; left: var(--f-gutter); top: -60px; z-index: calc(var(--z-overlay) + 1); padding: 10px 16px; border-radius: var(--f-r-pill); background: var(--f-lima); color: var(--f-lima-tinta); font: var(--f-peso-ui) .875rem/1 var(--f-fuente); text-decoration: none; }
.f-saltar:focus { top: 12px; }

/* ============ Cabecera ============ */
.f-cabecera {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  background: var(--f-vidrio);
  backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio);
  box-shadow: 0 1px 0 var(--f-linea);
}
.f-cabecera__fila { height: var(--f-alto-cabecera); display: flex; align-items: center; gap: var(--f-e-6); min-width: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav { display: none; }
.f-cabecera__fin { margin-left: auto; display: flex; align-items: center; gap: var(--f-e-2); min-width: 0; }
.f-cabecera__cta { --alto: 36px; padding: 0 16px; font-size: .875rem; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; flex: none; border-radius: var(--f-r-pill); color: var(--f-texto); }
.f-cabecera .f-menu-boton:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton svg { width: 20px; height: 20px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton:focus-visible { border-radius: var(--f-r-pill); }
/* Identidad (la de cada página: .cabecera-acciones). Login sigue en el DOM
   para la identidad pero no se ve: «Empieza a crear» es el único botón. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta { display: flex; align-items: center; gap: var(--f-e-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .cabecera-acciones { display: flex; align-items: center; gap: var(--f-e-2); margin: 0; padding: 0; flex-wrap: nowrap; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #btn-entrar-cabecera, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .saludo, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .cuenta-espera, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta [data-idioma-slot], :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .oculto { display: none !important; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine { display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: var(--f-sup-3); color: var(--f-texto); font: var(--f-peso-ui) .8125rem/1 var(--f-fuente); overflow: hidden; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine:hover { background: color-mix(in srgb, var(--blanco-luz) 14%, var(--negro-abismo)); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine:focus-visible { border-radius: 50%; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine img { width: 100%; height: 100%; object-fit: cover; }
/* Agente: solo con acceso confirmado (agente-beta.js pone data-agente-beta="si"). */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-agente { display: none; }
html[data-agente-beta="si"] .f-agente { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--f-r-pill); font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
html[data-agente-beta="si"] .f-agente:hover { color: var(--f-texto); background: var(--f-sup-2); }

@media (max-width: 380px) {
  .f-cabecera__fila { gap: var(--f-e-2); }
  .f-cabecera__fin { gap: var(--f-e-1); }
  .f-cabecera__cta { --alto: 34px; min-width: 0; padding: 4px 8px; font-size: .8125rem; line-height: 1.15; white-space: normal; text-align: center; }
  .f-cabecera .f-marca { font-size: 1rem; flex: none; }
  .f-cabecera .f-cuenta { flex: none; }
  html[data-agente-beta="si"] .f-cabecera .f-agente { display: none; }
}

@media (min-width: 1080px) {
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton { display: none; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--f-e-4); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__item { position: static; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace {
    display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px;
    border-radius: var(--f-r-pill); font-size: .875rem; font-weight: 450; color: var(--f-texto-2); white-space: nowrap;
    transition: color var(--f-rapido), background var(--f-rapido);
  }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace:focus-visible { border-radius: var(--f-r-pill); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace svg { width: 12px; height: 12px; opacity: .55; transition: transform var(--f-medio); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace:hover, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-expanded="true"] { color: var(--f-texto); background: var(--f-sup-2); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-expanded="true"] svg { transform: rotate(180deg); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-current="page"] { color: var(--f-texto); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--f-lima); margin-left: 3px; }
}
/* Ocho apartados desde el 7-oct-2026 (Útiles gratis): entre 1080 y 1279 px
   la barra se aprieta un poco para caber en los 20 idiomas. */
/* Ordenador: la barra ocupa todo el ancho, con 24 px a cada lado, como la de
   Crear (dueño, 11-oct-2026: «para que todo se vea ya parejo»): el logo y los
   menús no saltan al pasar de una página pública al Estudio. */
@media (min-width: 1080px) { .f-cabecera .f-cabecera__fila { width: 100%; max-width: none; padding-inline: 24px; } }
.f-nav__corto { display: none; }
html:is(:lang(ru), :lang(vi)) .f-nav__largo { display: none; }
html:is(:lang(ru), :lang(vi)) .f-nav__corto { display: inline; }
@media (min-width: 1080px) and (max-width: 1279px) {
  .f-cabecera__fila { gap: var(--f-e-3); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav { margin-left: 0; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace { padding: 0 7px; }
  /* El ruso es el idioma más largo: un punto menos de letra en esta franja. */
  html:lang(ru) :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace { font-size: .8125rem; padding: 0 5px; }
}

/* ============ Mega menú (columnas · destacado con clip) ============ */
.f-cabecera .f-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--f-alto-cabecera)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--f-fondo);
  box-shadow: 0 1px 0 var(--f-linea), var(--f-sombra-menu);
}
.f-cabecera .f-mega:not([hidden]) { animation: f-baja 240ms var(--f-curva); }
@keyframes f-baja { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Dueño, 30-sep-2026: «al hacer clic en Imagen o Video salían TODOS los
   modelos; mejor que siga así». Arriba, a todo lo ancho, todos los modelos
   agrupados por empresa (columnas que se reparten solas); debajo, una franja
   discreta con las Apps del medio, los útiles gratis y los enlaces. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--f-e-5); padding-block: var(--f-e-6) var(--f-e-6); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col h3, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel h3 { font-size: .6875rem; font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); }
/* Todas las columnas empiezan a la misma altura que el texto del panel de
   modelos (que lleva ese mismo relleno): los títulos quedan en una línea. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col { padding-top: var(--f-e-4); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col h3 { margin-bottom: var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col .f-mega__lista + h3 { margin-top: var(--f-e-6); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista a, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-mega__pronto {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 10px; margin-inline: -10px; border-radius: var(--f-r-control);
  font-size: .9063rem; color: var(--f-texto); transition: background var(--f-rapido);
}
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista a:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista a:focus-visible { border-radius: var(--f-r-control); }
/* Un nombre largo pasa a dos líneas antes que cortarse (idiomas, «Muy pronto»). */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__nombre { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-chip { margin-left: auto; height: 20px; padding: 0 7px; font-size: .6875rem; flex: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-mega__pronto { color: var(--f-texto-3); cursor: default; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--f-sup-2); color: var(--f-texto-2); overflow: hidden; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono svg { width: 16px; height: 16px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono img { width: 100%; height: 100%; object-fit: cover; }

/* Modelos (dueño, 29-sep-2026: «los modelos son muy importantes»): la primera
   columna, con la marca en verde Cocuyo, el nombre, una frase y «Top». La fila
   abre el editor con el modelo; el botón de la derecha, su ficha. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-logos-ia { position: absolute; width: 0; height: 0; overflow: hidden; }
/* La columna se ve primero: un panel apenas más claro. Su caja se alinea con
   el margen de la página y con la tarjeta destacada (misma línea de arriba),
   sin sobresalir; el texto va dentro, con su relleno. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos { padding: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupos { columns: 4 220px; column-gap: var(--f-e-6); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupo { break-inside: avoid; padding-bottom: var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupo h4 { margin: 0 0 2px; font-size: .75rem; font-weight: var(--f-peso-ui); letter-spacing: -0.005em; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-mega__lista .f-modelo__abrir { min-height: 44px; padding-block: 4px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-mega__icono { width: 28px; height: 28px; border-radius: 7px; background: var(--f-sup-1); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-mega__nombre { font-size: .875rem; -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-modelo__frase { font-size: .75rem; -webkit-line-clamp: 1; line-clamp: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-ia { color: var(--f-lima); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono.f-ia svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo { display: flex; align-items: center; margin-inline: -10px; border-radius: var(--f-r-control); transition: background var(--f-rapido); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo > a { margin-inline: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo > a:hover { background: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__abrir { flex: 1; min-width: 0; min-height: 50px; padding: 6px 4px 6px 10px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelo__txt { display: grid; gap: 1px; min-width: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelo__cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.3; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__cabeza .f-chip { margin-left: 0; }
/* La frase es el dato que distingue al modelo: si no cabe (móvil de 320 px),
   pasa a una segunda línea en vez de cortarse con puntos suspensivos. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelo__frase { font-size: .78rem; line-height: 1.35; color: var(--f-texto-3); text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__ficha { flex: none; justify-content: center; width: 36px; min-height: 36px; padding: 0; margin-right: 4px; color: var(--f-texto-3); opacity: 0; transition: opacity var(--f-rapido), color var(--f-rapido), background var(--f-rapido); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__ficha svg { width: 16px; height: 16px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo:hover .f-modelo__ficha,
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo:focus-within .f-modelo__ficha { opacity: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo > .f-modelo__ficha:hover { color: var(--f-texto); background: var(--f-sup-3); }
@media (hover: none) { :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__ficha { opacity: 1; } }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__ver { margin-top: var(--f-e-3); min-height: 32px; }
/* Franja discreta bajo los modelos: secciones en línea, enlaces pequeños. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, .6fr); gap: var(--f-e-3) var(--f-e-8); padding-top: var(--f-e-4); box-shadow: 0 -1px 0 var(--f-linea); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__col { padding-top: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__col h3 { margin-bottom: var(--f-e-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__col .f-mega__lista + h3 { margin-top: var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista { display: flex; flex-wrap: wrap; gap: 2px 4px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista :is(a, .f-mega__pronto) { min-height: 32px; gap: 7px; padding: 3px 9px 3px 4px; margin-inline: 0; font-size: .8125rem; color: var(--f-texto-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista a:hover { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__icono { width: 22px; height: 22px; border-radius: 6px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__icono svg { width: 13px; height: 13px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__nombre { -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista .f-chip { margin-left: 0; height: auto; padding: 0; background: none; font-size: .6875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista .f-chip--lima { color: var(--f-lima); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__pie { display: grid; align-content: start; justify-items: start; gap: 2px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__pie .f-enlace { min-height: 30px; font-size: .8125rem; }

/* Útiles gratis (dueño, 8-oct-2026: estilo Higgsfield). A la izquierda, los
   más buscados, cada uno con su icono propio (Nano Banana,
   assets/media/utiles/iconos/) y su categoría debajo; a la derecha, las
   categorías con su recuento real. Las dos, en dos columnas de cuatro filas.
   En la hoja ☰, las mismas filas en una columna.
   Ningún nombre se corta, en ningún idioma: los largos («Инструменты для
   изображений», «Transcrire un audio ou une vidéo en texte») pasan a una
   segunda línea, y en las categorías de la cabecera el recuento («37
   gratis») va debajo del nombre, no a su lado quitándole sitio (en la
   hoja ☰, con todo el ancho, sigue a su lado). */
#f-mega-utiles .f-mega__extra { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--f-e-10); padding-top: var(--f-e-2); box-shadow: none; }
#f-mega-utiles .f-mega__col h3 { margin-bottom: var(--f-e-3); }
#f-mega-utiles .f-mega__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
#f-mega-utiles .f-mega__col .f-mega__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--f-e-4); }
#f-mega-utiles .f-mega__lista a { min-height: 60px; gap: 12px; padding: 8px; margin-inline: -8px; border-radius: 14px; font-size: .875rem; color: var(--f-texto); }
#f-mega-utiles .f-mega__lista a:hover { background: var(--f-sup-2); }
#f-mega-utiles .f-mega__icono, #f-hoja-utiles .f-mega__icono { width: 44px; height: 44px; border-radius: 12px; background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto-2); }
#f-mega-utiles .f-mega__icono svg, #f-hoja-utiles .f-mega__icono svg { width: 18px; height: 18px; }
#f-mega-utiles .f-mega__lista a:hover .f-mega__icono { color: var(--f-texto); }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__txt { display: grid; gap: 1px; min-width: 0; }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__txt .f-mega__nombre { font-weight: var(--f-peso-ui); }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__lista .f-mega__nombre { display: block; overflow: visible; white-space: normal; text-overflow: clip; -webkit-line-clamp: none; line-clamp: none; overflow-wrap: break-word; hyphens: auto; text-wrap: pretty; }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__sub { font-size: .75rem; line-height: 1.35; color: var(--f-texto-3); }
#f-mega-utiles .f-mega__lista .f-chip { margin-left: 0; margin-inline-start: auto; }
/* Categoría: icono a la izquierda; nombre y, debajo, su recuento. */
#f-mega-utiles .f-mega__lista a:has(> .f-chip) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 12px; row-gap: 2px; }
#f-mega-utiles .f-mega__lista a:has(> .f-chip) > .f-mega__icono { grid-row: 1 / span 2; align-self: center; }
#f-mega-utiles .f-mega__lista a:has(> .f-chip) > .f-mega__nombre { align-self: end; }
#f-mega-utiles .f-mega__lista a:has(> .f-chip) > .f-chip { justify-self: start; align-self: start; margin: 0; }
#f-hoja-utiles .f-mega__lista a { min-height: 56px; gap: 12px; }
#f-hoja-utiles .f-mega__icono { width: 40px; height: 40px; border-radius: 11px; }

/* Apps: categorías en filas compactas + pocas Apps destacadas pequeñas. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__rejilla--apps { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--f-e-10); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--f-e-8); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; margin-inline: -10px; border-radius: var(--f-r-control); transition: background var(--f-rapido); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat:focus-visible { border-radius: var(--f-r-control); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__img { width: 36px; height: 36px; border-radius: 9px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__txt strong { display: block; font-size: .875rem; font-weight: var(--f-peso-ui); line-height: 1.3; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__txt span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; line-height: 1.35; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__n { flex: none; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f-e-4) var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app { position: relative; display: grid; gap: 7px; border-radius: 12px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app .f-media { aspect-ratio: 16 / 10; border-radius: 12px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:hover .f-media > * { transform: scale(1.04); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:focus-visible { outline: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:focus-visible .f-media { box-shadow: 0 0 0 2px var(--f-lima); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app > .f-chip { position: absolute; top: 6px; left: 6px; z-index: 1; height: 18px; padding: 0 6px; font-size: .625rem; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app .f-mega__nombre { font-size: .8125rem; color: var(--f-texto-2); -webkit-line-clamp: 1; line-clamp: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:hover .f-mega__nombre { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas { justify-content: space-between; margin: var(--f-e-4) 0 0; padding: 10px 14px; background: var(--f-sup-1); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas strong { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas > svg { width: 16px; height: 16px; color: var(--f-texto-3); flex: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas:hover > svg { color: var(--f-lima); }
@media (max-width: 1279px) {
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupos { columns: 3 200px; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__rejilla--apps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Hoja ☰: las empresas separan la lista larga sin cajas. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel .f-modelos__grupos { columns: auto; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel .f-modelos__grupo { padding-bottom: var(--f-e-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel .f-modelos__grupo h4 { margin: var(--f-e-2) 0 0 4px; }
/* ============ Menú «Tareas» de Imagen, Video y Audio (dueño, v340) ============
   Versión limpia (dueño, 11-oct-2026): panel flotante de 968 px de ancho bajo
   su botón; a la izquierda Modelos, Útiles gratis y las Apps del medio, más la
   tarjeta «Muy pronto»; a la derecha, solo nombres e imágenes. El alto es el
   del panel más alto de cada medio: al pasar por el riel no salta. Sin «Nuevo»:
   solo «Top» (rosa, como la cinta de Precios), «Beta» y «Muy pronto».
   navegacion-global.js pone --f-mega-x (alineado con el botón del menú).
   El mismo panel va en el desplegable de Crear (.f-tareas-estudio,
   estudio-explorar.js): sus reglas valen en las dos cabeceras. */
.f-cabecera .f-mega--tareas {
  left: var(--f-mega-x, var(--f-gutter)); right: auto; top: calc(100% + 8px);
  width: min(968px, calc(100vw - 32px)); max-height: none; overflow: visible;
  background: transparent; box-shadow: none;
}
/* El resto de la página se desenfoca detrás del panel (no recibe el puntero:
   al salir del panel el menú se cierra como siempre). */
.f-cabecera:has(> .f-mega--tareas:not([hidden]))::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100dvh; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--negro-abismo) 45%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: f-baja 240ms var(--f-curva);
}
:is(.f-cabecera, .f-tareas-estudio) :is(.f-tareas, .f-t-panel) { --f-t-fondo: color-mix(in srgb, var(--blanco-luz) 4.5%, var(--negro-abismo)); }
.f-tareas {
  display: grid; grid-template-columns: 262px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  max-height: calc(100dvh - var(--f-alto-cabecera) - 24px);
  border-radius: 22px; overflow: hidden;
  background: var(--f-t-fondo);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte), 0 30px 80px color-mix(in srgb, var(--negro-abismo) 70%, transparent);
}
/* Cifras aparte (nunca dentro de una frase traducida). */
:is(.f-cabecera, .f-tareas-estudio) .f-n { font-variant-numeric: tabular-nums; color: var(--f-texto-3); font-weight: var(--f-peso-cuerpo); }
/* Flechas y cheurones dibujados por el CSS (sin SVG repetido en cada página). */
:is(.f-cabecera, .f-tareas-estudio) :is(.f-t-fl, .f-t-ch) {
  flex: none; display: inline-block; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--f-t-mascara) center / contain no-repeat; mask: var(--f-t-mascara) center / contain no-repeat;
}
:is(.f-cabecera, .f-tareas-estudio) .f-t-fl { --f-t-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: transform var(--f-rapido); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-ch { --f-t-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-ch--atras, html[dir="rtl"] :is(.f-cabecera, .f-tareas-estudio) :is(.f-t-fl, .f-t-ch:not(.f-t-ch--atras)) { transform: scaleX(-1); }
html[dir="rtl"] :is(.f-cabecera, .f-tareas-estudio) .f-t-ch--atras { transform: none; }
:is(.f-cabecera, .f-tareas-estudio) a:hover > .f-t-fl { transform: translateX(3px); }
html[dir="rtl"] :is(.f-cabecera, .f-tareas-estudio) a:hover > .f-t-fl { transform: scaleX(-1) translateX(3px); }

/* ---- Riel de tareas ---- */
.f-t-riel { display: flex; flex-direction: column; min-height: 0; padding: 22px 12px 14px; background: color-mix(in srgb, var(--blanco-luz) 2.5%, var(--negro-abismo)); box-shadow: inset -1px 0 0 var(--f-linea); }
html[dir="rtl"] .f-t-riel { box-shadow: inset 1px 0 0 var(--f-linea); }
.f-t-riel__medio { margin: 0 0 12px 8px; font-size: .6875rem; font-weight: var(--f-peso-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--f-texto-3); }
.f-t-riel__lista { display: grid; gap: 2px; }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px 0 9px; border-radius: 14px;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--f-texto); text-align: start;
  transition: background var(--f-rapido);
}
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab[aria-selected="true"] { background: var(--f-sup-3); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab:focus-visible { border-radius: 14px; }
.f-t-tab__icono { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--f-sup-2); color: var(--f-texto-2); }
.f-t-tab__icono svg { width: 17px; height: 17px; }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab[aria-selected="true"] .f-t-tab__icono { background: var(--f-lima-suave); color: var(--f-lima); box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-t-tab__nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-t-tab__d { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--f-texto-3); }
.f-t-tab .f-n { font-size: .875rem; }
.f-t-tab__flecha { display: inline-flex; color: var(--f-texto-3); }
.f-t-tab[aria-selected="true"] .f-t-tab__flecha { color: var(--f-texto); }
.f-t-pronto {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 12px 9px 9px; border-radius: 16px; cursor: default;
  background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--blanco-luz) 2.5%, transparent) 9px 18px), var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
}
.f-t-pronto__img { width: 50px; height: 50px; flex: none; border-radius: 12px; overflow: hidden; background: var(--negro-abismo); }
.f-t-pronto__img img, .f-ti__i img { width: 100%; height: 100%; object-fit: cover; }
.f-t-pronto__txt { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.f-t-pronto__txt strong { font-size: .875rem; font-weight: 600; line-height: 1.25; }
:is(.f-cabecera, .f-tareas-estudio) .f-chip--pronto { height: 19px; padding: 0 7px; font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--f-texto); }

/* ---- Cuerpo y paneles ---- */
/* Los paneles comparten celda: los ocultos no se ven ni se tocan, pero miden. */
.f-t-cuerpo { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; }
.f-t-panel { grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 22px 26px 0; }
/* tokens.css esconde todo [hidden] con !important: aquí se mide igual. */
.f-tareas .f-t-panel[hidden] { display: grid !important; visibility: hidden; }
.f-t-panel > ul { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.f-t-ver { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: .875rem; font-weight: 600; color: var(--f-texto); white-space: nowrap; }
.f-t-ver:hover { color: var(--f-lima); }
.f-t-ver .f-n { color: inherit; font-weight: inherit; }
.f-t-lista { display: grid; gap: 1px; }
/* Fila: icono y nombre. */
.f-ti {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px;
  min-height: 42px; padding: 2px 8px; margin-inline: -8px; border-radius: 12px; transition: background var(--f-rapido);
}
a.f-ti:hover { background: var(--f-sup-2); }
a.f-ti:focus-visible { border-radius: 12px; }
.f-ti__i { grid-row: 1; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--f-sup-2); color: var(--f-texto-2); box-shadow: inset 0 0 0 1px var(--f-linea); }
.f-ti__i svg { width: 18px; height: 18px; }
.f-ti__n { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
:is(.f-cabecera, .f-tareas-estudio) .f-chip--beta { color: var(--f-texto); background: var(--f-sup-3); }
/* Insignias de los modelos: la cinta de Precios, en cursiva. TOP rosa; NEW y
   ECONÓMICO (dueño, 11-oct-2026), azul y lima. */
:is(.f-cabecera, .f-tareas-estudio) :is(.f-chip--top, .f-tareas .f-modelo .f-chip) {
  height: 18px; padding: 0 7px; border-radius: 5px; font-size: .625rem; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blanco-luz); background: var(--precio-rosa);
}
:is(.f-cabecera, .f-tareas-estudio) .f-tareas .f-modelo .f-chip--new { background: var(--precio-azul); }
:is(.f-cabecera, .f-tareas-estudio) .f-tareas .f-modelo .f-chip--eco { color: var(--f-lima-tinta); background: var(--precio-lima); }
/* Portadas de las Apps del medio. */
.f-t-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 10px; }
.f-t-resultado { display: grid; gap: 0; padding: 4px; border-radius: 14px; background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); transition: background var(--f-rapido); }
.f-t-resultado:hover { background: var(--f-sup-2); }
.f-t-resultado:focus-visible { border-radius: 14px; }
.f-t-resultado__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--f-sup-2); }
.f-t-resultado__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--f-curva); }
.f-t-resultado:hover .f-t-resultado__img img { transform: scale(1.05); }
.f-t-resultado__img .f-chip { position: absolute; top: 6px; left: 6px; }
html[dir="rtl"] .f-t-resultado__img .f-chip { left: auto; right: 6px; }
.f-t-resultado__nombre { padding: 8px 4px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; letter-spacing: -.01em; font-weight: 600; }
/* Filas de modelo dentro de los paneles. */
.f-tareas .f-modelo { position: relative; display: flex; align-items: center; margin-inline: -8px; border-radius: 12px; transition: background var(--f-rapido); }
.f-tareas .f-modelo:hover { background: var(--f-sup-2); }
.f-tareas .f-modelo__abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 5px 8px; border-radius: 12px; }
.f-tareas .f-modelo__abrir:focus-visible { border-radius: 12px; }
.f-tareas .f-modelo .f-mega__icono { width: 40px; height: 40px; border-radius: 11px; background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto); }
.f-tareas .f-modelo:has([data-f-top], .f-chip--top) .f-mega__icono, .f-tareas .f-modelo[data-f-top] .f-mega__icono { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-rosa) 45%, transparent); }
.f-tareas .f-modelo:has(.f-chip--new) .f-mega__icono { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-azul) 55%, transparent); }
.f-tareas .f-modelo:has(.f-chip--eco) .f-mega__icono { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-lima) 40%, transparent); }
.f-tareas .f-modelo .f-mega__icono.f-ia svg { width: 19px; height: 19px; }
.f-tareas .f-modelo .f-mega__nombre { font-size: .9375rem; font-weight: 600; -webkit-line-clamp: 1; line-clamp: 1; }
.f-t-ficha { flex: none; width: 34px; height: 34px; margin-inline-end: 6px; display: grid; place-items: center; border-radius: 9px; color: var(--f-texto-3); opacity: 0; transition: opacity var(--f-rapido); }
.f-t-ficha::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.f-modelo:hover .f-t-ficha, .f-modelo:focus-within .f-t-ficha, .f-t-ficha:focus-visible { opacity: 1; }
.f-t-ficha:hover { color: var(--f-texto); background: var(--f-sup-3); }
@media (hover: none) { .f-t-ficha { opacity: 1; } }

/* ---- Listas de Modelos y Útiles gratis, y «Ver todo» al pie ---- */
:is(.f-cabecera, .f-tareas-estudio) .f-t-modelos.f-mega__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2px 28px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline: 8px; margin-inline: -8px; }
.f-t-utiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 4px 28px; }
.f-t-utiles .f-ti { min-height: 52px; }
.f-t-utiles .f-ti__i { width: 42px; height: 42px; }
.f-t-ancho__pie { display: flex; align-items: center; gap: 16px; margin: 12px -14px 0; padding: 12px 14px 14px; box-shadow: 0 -1px 0 var(--f-linea); }
/* Video tiene 16 modelos: filas algo más bajas para que quepan en el panel. */
.f-tareas .f-t-modelos .f-modelo__abrir { min-height: 46px; padding-block: 3px; }
.f-tareas .f-t-modelos .f-mega__icono { width: 36px; height: 36px; }

@media (max-width: 1079px) { :is(.f-cabecera, .f-tareas-estudio) .f-mega { display: none !important; } }

/* ============ Móvil: la misma cabecera y el mismo menú lateral que el Estudio ============
   Dueño, 11-oct-2026 («todo lo que muestre el menú viejo debe mejorarse»):
   hasta 1079 px, la cabecera pública es la del Estudio en el móvil
   (estudio-movil.css, .hf-*): botón de panel a la izquierda, COCUYO en el
   centro y, a la derecha, «Entrar» (sin sesión) o «Mejorar» (con sesión),
   en lima. Crear cuenta, idioma, avatar y Precios no se ven arriba: van en el
   menú lateral, en la barra de abajo y en el pie. Mismos colores que el
   Estudio (su fondo casi negro y su gris). :not(#f) gana a cabecera-acceso.css y
   barra-inferior.css, que se cargan después. */
@media (max-width: 1079px) {
  html:not(#f) .f-cabecera { background: var(--f-cajon-fondo); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:not(#f) .f-cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: 100%; max-width: none; margin: 0; padding-inline: 10px 9px; }
  /* El menú de ordenador (vacío aquí) no ocupa una segunda fila de la rejilla:
     así ☰, el título y «Entrar» quedan centrados en los 56 px. */
  html:not(#f) .f-cabecera .f-nav-envoltura { display: none; }
  html:not(#f) .f-cabecera__fin { display: contents; }
  html:not(#f) .f-cabecera .f-menu-boton { grid-area: 1 / 1; justify-self: start; width: 32px; height: 32px; margin: 0; border-radius: 8px; color: var(--f-texto-3); }
  html:not(#f) .f-cabecera .f-menu-boton:hover { background: transparent; color: var(--f-texto); }
  html:not(#f) .f-cabecera .f-menu-boton svg { width: 20px; height: 20px; }
  html:not(#f) .f-cabecera .f-marca { grid-area: 1 / 2; font-size: 18px; letter-spacing: -.05em; }
  html:not(#f) .f-cabecera :is(.cy-acceso--entrar, .f-mejorar) {
    grid-area: 1 / 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 12px;
    border-radius: 999px; background: var(--precio-lima); color: var(--f-lima-tinta); box-shadow: none; font: 500 12px/16px var(--f-fuente); white-space: nowrap;
  }
  html:not(#f) .f-cabecera :is(.cy-acceso--entrar, .f-mejorar) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html:not(#f) .f-cabecera .f-mejorar svg { width: 14px; height: 14px; flex: none; }
  html:not(#f) .f-cabecera :is(.cy-acceso--alta, .cy-idioma-cab, .cy-cab-precios, .f-cuenta, .f-agente, .f-cabecera__cta) { display: none !important; }
  html:not(#f):not([data-cy-acceso="cuenta"]) .f-cabecera .f-mejorar, html:not(#f)[data-cy-acceso="cuenta"] .f-cabecera .cy-acceso--entrar { display: none !important; }
  /* Modelo de la app (dueño, 11-oct-2026: «todo compacto y perfecto en la
     app»): cabecera de 56 px como la de Crear y, en el centro, el nombre de
     la página («Útiles gratis», «Juegos», «Apps»), como Crear enseña
     «Creaciones». Ese nombre es el último paso de las migas (la página en
     la que estás), que se sube a la cabecera: sale ya escrito en el HTML,
     sin esperar a ningún script (nada cambia después del primer pintado).
     El resto de las migas no se ve. Sin migas, sigue COCUYO. */
  html:not(#f) { --f-alto-cabecera: 56px; }
  html:not(#f) body:has(> .f-cabecera) main :is(.migas, .apps-migas):has(> [aria-current]) {
    position: fixed; z-index: calc(var(--z-nav) + 1); inset-block-start: env(safe-area-inset-top, 0px); inset-inline: var(--f-titulo-ini, 104px) var(--f-titulo-fin, 104px);
    display: flex; justify-content: center; align-items: center; block-size: var(--f-alto-cabecera); margin: 0; padding: 0; pointer-events: none;
  }
  html:not(#f) body:has(> .f-cabecera) main :is(.migas, .apps-migas):has(> [aria-current]) > :not([aria-current]) { display: none; }
  html:not(#f) body:has(> .f-cabecera) main :is(.migas, .apps-migas) > [aria-current] {
    min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--f-texto); font: 500 16px/20px var(--f-fuente); letter-spacing: 0;
  }
  html:not(#f) body:has(> .f-cabecera):has(main :is(.migas, .apps-migas) > [aria-current]) > .f-cabecera .f-marca { visibility: hidden; }
  /* Hasta que llega <main> no se sabe si habrá nombre: sin logo, para que
     con una conexión lenta no salga COCUYO y luego cambie. */
  html:not(#f) body:has(> .f-cabecera):not(:has(main)) > .f-cabecera .f-marca { visibility: hidden; }
}
/* En el teléfono, las portadas de Útiles, Apps y Juegos (las pantallas de
   la app) llevan el mismo fondo que Crear (el de la cabecera y el menú
   lateral), sin la franja más clara arriba (revisión 11-oct-2026). Solo
   ellas: en las demás páginas con migas (guías, modelos, cada útil…) sus
   tarjetas se distinguen sobre el negro de siempre. */
@media (max-width: 767px) {
  html:not(#f) body:is(.utl-portada, .apps-portada):has(> .f-cabecera),
  html:not(#f) body:is(.utl-portada, .apps-portada):has(> .f-cabecera) > .f-pie,
  html:not(#f) body.jgp:has(> .f-cabecera):has(main .jgp-indice),
  html:not(#f) body.jgp:has(> .f-cabecera):has(main .jgp-indice) > .f-pie { background: var(--f-cajon-fondo); }
  /* Pie compacto (Iván: «todo compacto»): los mismos enlaces, en letra más
     pequeña y con menos aire; cada enlace sigue con 44 px para el dedo. */
  .f-pie { padding-block: var(--f-e-10) calc(var(--f-e-6) + env(safe-area-inset-bottom)); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__rejilla { gap: var(--f-e-6) var(--f-e-4); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--f-e-4); row-gap: var(--f-e-1); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca .f-marca { font-size: 18px; letter-spacing: -.05em; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca p { grid-column: 1 / -1; grid-row: 2; font-size: .8125rem; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca .f-pie__redes { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .f-pie h2 { margin-bottom: var(--f-e-1); }
  .f-pie ul { gap: 0; }
  .f-pie ul a, .f-pie ul button { font-size: .8125rem; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__base { margin-top: var(--f-e-6); padding-top: var(--f-e-4); font-size: .75rem; }
}
/* «Mejorar» es solo del móvil. */
.f-mejorar { display: none; }

/* ---- Menú lateral (id f-hoja; navegacion-global.js lo abre y lo cierra) ---- */
.f-cajon { position: fixed; inset: 0; z-index: calc(var(--z-nav) + 2); background: color-mix(in srgb, var(--negro-abismo) 50%, transparent); }
.f-cajon__panel {
  display: flex; flex-direction: column; width: min(327px, 87vw); height: 100%;
  padding: env(safe-area-inset-top, 0px) 0 calc(16px + env(safe-area-inset-bottom, 0px));
  border-right: 1px solid var(--f-linea); background: var(--f-cajon-fondo); color: var(--f-texto);
}
html[dir="rtl"] .f-cajon__panel { border-right: 0; border-left: 1px solid var(--f-linea); }
.f-cajon:not([hidden]) .f-cajon__panel { animation: f-cajon-entra .24s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] .f-cajon:not([hidden]) .f-cajon__panel { animation-name: f-cajon-entra-rtl; }
@keyframes f-cajon-entra { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes f-cajon-entra-rtl { from { transform: translateX(100%); } to { transform: none; } }
.f-cajon__cab { flex: none; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 10px 0 16px; }
html[dir="rtl"] .f-cajon__cab { padding: 0 16px 0 10px; }
.f-hoja .f-cajon__marca { font-size: 18px; letter-spacing: -.05em; }
.f-cajon__cerrar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--f-texto-3); }
.f-cajon__cerrar svg { width: 20px; height: 20px; }
.f-cajon__lista { flex: 1; display: grid; align-content: start; padding: 6px 16px 0; overflow: auto; overscroll-behavior: contain; }
.f-hoja .f-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px 6px 4px; border-radius: 10px; color: var(--f-texto); font: 500 16px/20px var(--f-fuente); text-align: start; }
.f-hoja .f-fila svg { flex: none; width: 24px; height: 24px; }
.f-hoja .f-fila:hover { background: color-mix(in srgb, var(--blanco-luz) 5%, transparent); }
/* La lima del menú lateral es la de la app (--precio-lima), como en Crear. */
.f-hoja .f-fila.is-actual { min-height: 44px; padding: 8px 10px 8px 8px; background: color-mix(in srgb, var(--precio-lima) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-lima) 12%, transparent); color: var(--precio-lima); font-weight: 600; }
.f-hoja .f-fila.is-actual svg { width: 20px; height: 20px; }
.f-hoja :is(.f-fila, .f-cajon__cerrar, .f-cajon__entrar, .f-cajon__cuenta):focus-visible { outline: 2px solid var(--precio-lima); outline-offset: -2px; }
.f-fila__txt { flex: 1; min-width: 0; }
.f-fila__chip { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--precio-lima); color: var(--f-lima-tinta); font: 500 12px/16px var(--f-fuente); }
.f-fila__valor { color: var(--f-texto-3); font-size: 14px; }
.f-cajon__pie { flex: none; padding: 16px 16px 0; border-top: 1px solid var(--f-linea); }
.f-cajon__t { font: 500 14px/18px var(--f-fuente); color: var(--f-texto); }
.f-hoja .f-cajon__s { margin: 4px 0 20px; font: 400 14px/18px var(--f-fuente); color: var(--f-texto-3); }
.f-cajon__entrar { display: grid; place-items: center; width: 100%; height: 48px; border-radius: 999px; background: var(--blanco-luz); color: var(--f-lima-tinta); font: 500 16px/18px var(--f-fuente); }
.f-cajon__cuenta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--blanco-luz) 5%, transparent); color: var(--f-texto); }
.f-cajon__avatar { display: grid; place-items: center; grid-auto-flow: column; gap: 3px; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--f-sup-3); }
.f-cajon__avatar i { width: 6px; height: 6px; border-radius: 50%; background: var(--precio-lima); box-shadow: 0 0 6px var(--precio-lima); }
.f-cajon__cuenta-txt { flex: 1; min-width: 0; font: 500 14px/18px var(--f-fuente); }
.f-cajon__cuenta svg { width: 16px; height: 16px; color: var(--f-texto-3); }
html[dir="rtl"] .f-cajon__cuenta svg { transform: scaleX(-1); }
/* Sin sesión, «Entrar»; con sesión (data-cy-acceso, cabecera-acceso.js), la cuenta. */
html[data-cy-acceso="cuenta"] .f-cajon__visitante, html:not([data-cy-acceso="cuenta"]) .f-cajon__cuenta { display: none; }
html.f-sin-scroll, html.f-sin-scroll body { overflow: hidden; }
@media (min-width: 1080px) { .f-hoja { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .f-cajon:not([hidden]) .f-cajon__panel { animation: none; } }

/* ============ Pie ============ */
.f-pie { position: relative; z-index: 1; background: var(--f-fondo); box-shadow: 0 -1px 0 var(--f-linea); padding-block: var(--f-e-16) calc(var(--f-e-8) + env(safe-area-inset-bottom)); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__rejilla { display: grid; gap: var(--f-e-10) var(--f-e-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca { grid-column: 1 / -1; display: grid; gap: var(--f-e-3); align-content: start; justify-items: start; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca p { color: var(--f-texto-3); font-size: .9375rem; max-width: 32ch; }
.f-pie h2 { font-size: .6875rem; font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); margin-bottom: var(--f-e-4); }
.f-pie ul { display: grid; gap: 4px; }
.f-pie ul a, .f-pie ul button { display: inline-flex; align-items: center; min-height: 32px; font-size: .9063rem; color: var(--f-texto-2); text-align: start; }
.f-pie ul a:hover, .f-pie ul button:hover { color: var(--f-texto); }
.f-pie ul a:focus-visible, .f-pie ul button:focus-visible { border-radius: var(--f-r-control); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--f-e-4); margin-top: var(--f-e-12); padding-top: var(--f-e-6); box-shadow: 0 -1px 0 var(--f-linea); font-size: .8125rem; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes { display: flex; gap: 4px; margin-top: var(--f-e-1); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--f-texto-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes a:hover { color: var(--f-texto); background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes svg { width: 18px; height: 18px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes a:focus-visible { border-radius: 50%; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; border-radius: var(--f-r-pill); background: var(--f-sup-1); gap: 2px; }
/* Con muchos idiomas el selector salta de línea en vez de desbordar el móvil. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma:has(> :nth-child(6)) { border-radius: var(--f-r-tarjeta); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma :is(button, a) { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--f-r-pill); font-size: .8125rem; color: var(--f-texto-3); font-weight: var(--f-peso-ui); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma :is(button, a):hover { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma [aria-pressed="true"], :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma [aria-current="true"] { background: var(--f-sup-3); color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma :is(button, a):focus-visible { border-radius: var(--f-r-pill); }
/* Idioma con bandera (dueño, 4-oct-2026): un botón en el pie abre una pantalla
   grande con los 20 idiomas. Los enlaces originales siguen en el HTML, ocultos. */
.f-bandera { flex: none; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--f-linea-fuerte); }
.f-pie .f-idioma-boton { display: inline-flex; align-items: center; gap: var(--f-e-2); min-height: 40px; padding: 0 var(--f-e-3) 0 var(--f-e-2); border-radius: var(--f-r-pill); background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto-2); font-size: .875rem; font-weight: var(--f-peso-ui); }
.f-pie .f-idioma-boton:hover { color: var(--f-texto); background: var(--f-sup-2); }
.f-pie .f-idioma-boton:focus-visible { border-radius: var(--f-r-pill); }
.f-pie .f-idioma-boton svg { width: 14px; height: 14px; }
.f-idiomas { width: min(880px, calc(100vw - 2 * var(--f-gutter))); max-height: min(720px, calc(100dvh - 2 * var(--f-gutter))); margin: auto; padding: var(--f-e-6); border: 0; border-radius: var(--f-r-media); background: var(--f-sup-1); color: var(--f-texto); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte), var(--f-sombra-menu); overflow: auto; overscroll-behavior: contain; }
.f-idiomas::backdrop { background: color-mix(in srgb, var(--negro-abismo) 72%, transparent); backdrop-filter: blur(6px); }
.f-idiomas[open] { animation: f-idiomas-entra var(--f-medio) both; }
@keyframes f-idiomas-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .f-idiomas[open] { animation: none; } }
.f-idiomas__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4); margin-bottom: var(--f-e-5); }
.f-pie .f-idiomas h2 { margin: 0; font-size: var(--f-t-3); font-weight: var(--f-peso-titulo); letter-spacing: var(--f-tracking-titulo); text-transform: none; color: var(--f-texto); }
.f-idiomas__cerrar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--f-texto-2); }
.f-idiomas__cerrar:hover { color: var(--f-texto); background: var(--f-sup-3); }
.f-idiomas__cerrar:focus-visible { border-radius: 50%; }
.f-idiomas__cerrar svg { width: 20px; height: 20px; }
.f-pie .f-idiomas__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--f-e-2); }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion { display: flex; line-height: 1.2; align-items: center; gap: var(--f-e-3); width: 100%; min-height: 52px; padding: 0 var(--f-e-4); border-radius: var(--f-r-tarjeta); background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto-2); font-size: .9375rem; font-weight: var(--f-peso-ui); text-align: start; }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion:hover { color: var(--f-texto); background: var(--f-sup-3); }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion:focus-visible { border-radius: var(--f-r-tarjeta); }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion:is([aria-current="true"], [aria-pressed="true"]) { color: var(--f-texto); background: var(--f-lima-suave); box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-idiomas__opcion .f-bandera { width: 32px; height: 24px; border-radius: 4px; }
@media (max-width: 520px) {
  .f-idiomas { padding: var(--f-e-4); }
  .f-pie .f-idiomas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-pie .f-idiomas__rejilla .f-idiomas__opcion { min-height: 48px; padding: 0 var(--f-e-3); gap: var(--f-e-2); font-size: .875rem; }
}
@media (min-width: 900px) {
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__rejilla { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca { grid-column: auto; }
}

/* ============ Páginas con la cabecera común ============
   La cabecera y el pie antiguos se quedan en el HTML solo como respaldo
   sin JavaScript (data-f-legado). Con el caparazón montado, fuera. */
html.f-caparazon [data-f-legado],
html.f-caparazon #intro-publica footer { display: none !important; }
/* Desde el primer pintado (dueño, 10-oct-2026: «al entrar se ven como 2»):
   navegacion-pronta.js, síncrono en el <head>, pone html.f-pronto cuando la
   cabecera común está en camino. Hasta que llega (html.f-caparazon) la de
   respaldo no se ve y en su sitio queda un hueco con la altura, el fondo y el
   filete de la cabecera común, pegado arriba como ella: nunca dos cabeceras
   ni saltos al montarse (navegacion-global.js la antepone a <body> en el mismo
   instante en que pone f-caparazon). Sin JavaScript no hay f-pronto y se ve la
   de respaldo; si la común no llega, navegacion-pronta.js quita f-pronto
   (al terminar de leer la página o, como tarde, 3,5 s después de verse). */
html.f-pronto:not(.f-caparazon) [data-f-legado],
html.f-pronto:not(.f-caparazon) #intro-publica footer { display: none !important; }
html.f-pronto:not(.f-caparazon) body::before {
  content: ""; display: block; position: sticky; top: 0; z-index: var(--z-nav);
  height: calc(var(--f-alto-cabecera) + env(safe-area-inset-top));
  background: var(--f-vidrio);
  backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio);
  box-shadow: 0 1px 0 var(--f-linea);
}
/* Botones de acceso ya escritos en la cabecera de las páginas generadas
   (data-cy-estatico, scripts/familia-caparazon.mjs accesoEstatico): se ven
   desde el primer pintado solo en el estado que navegacion-pronta.js anuncia
   en <html> (y que después confirman cabecera-acceso.js y barra-inferior.js).
   Sin JavaScript, o si esos scripts no llegan, no se ven y queda «Empieza a crear». */
html:not([data-cy-acceso="visitante"]) .f-cabecera .cy-acceso[data-cy-estatico],
html:not([data-cy-acceso]) .f-cabecera .cy-idioma-cab[data-cy-estatico],
html:not([data-cy-acceso="cuenta"]) .f-cabecera .cy-cab-precios[data-cy-estatico] { display: none !important; }
html.f-caparazon .cn-unified { padding-top: 0 !important; }
/* Conectores: su barra propia conserva solo «Mis conexiones» (el acceso a la
   gestión de la página), compacta bajo la cabecera común, hasta la fase 2. */
html.f-caparazon .cn-page > .cn-header { height: auto; min-height: 0; justify-content: flex-end; padding-block: var(--f-e-2); border-bottom: 0; }

/* ============================================================
   COMPONENTES (fase 2: páginas que se rediseñan con la familia)
   ============================================================ */

/* ============ Tarjeta ============ */
.f-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: var(--f-e-3);
  border-radius: calc(var(--f-r-tarjeta) + 6px); padding: 6px 6px var(--f-e-4);
  background: var(--f-sup-1); color: var(--f-texto); text-decoration: none;
  transition: background var(--f-rapido), transform var(--f-medio);
}
.f-tarjeta:hover { background: var(--f-sup-2); }
.f-tarjeta:hover .f-media > img, .f-tarjeta:hover .f-media > video { transform: scale(1.03); }
.f-tarjeta:focus-visible { border-radius: calc(var(--f-r-tarjeta) + 6px); }
.f-tarjeta__cuerpo { padding-inline: 10px; display: grid; gap: 4px; }
.f-tarjeta__titulo { font-size: var(--f-t-4); font-weight: var(--f-peso-titulo); letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.f-tarjeta__texto { font-size: .875rem; color: var(--f-texto-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-tarjeta__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .75rem; color: var(--f-texto-3); margin-top: 4px; }
.f-tarjeta__etiquetas { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; }
.f-tarjeta__ir { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--f-vidrio); backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); color: var(--f-texto); opacity: 0; transform: translateY(4px); transition: opacity var(--f-rapido), transform var(--f-medio); }
.f-tarjeta__ir svg { width: 14px; height: 14px; }
.f-tarjeta:hover .f-tarjeta__ir, .f-tarjeta:focus-visible .f-tarjeta__ir { opacity: 1; transform: none; }
.f-tarjeta--plana { padding: var(--f-e-6); gap: var(--f-e-3); border-radius: var(--f-r-media); }
.f-tarjeta--pronto { opacity: .7; }
.f-icono-caja { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--f-sup-2); color: var(--f-texto); }
.f-icono-caja svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: var(--f-trazo); stroke-linecap: round; stroke-linejoin: round; }
.f-icono-caja--lima { color: var(--f-lima); background: var(--f-lima-suave); }

/* ============ Rejillas ============ */
.f-rejilla { display: grid; gap: var(--f-e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-rejilla--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .f-rejilla--3, .f-rejilla--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-rejilla--2m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719px) { .f-rejilla--2m, .f-rejilla--1m { grid-template-columns: minmax(0, 1fr); } }
.f-carril { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--f-e-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--f-gutter); padding-bottom: 4px; margin-inline: calc(var(--f-gutter) * -1); padding-inline: var(--f-gutter); scrollbar-width: none; }
.f-carril::-webkit-scrollbar { display: none; }
.f-carril > * { scroll-snap-align: start; }
@media (min-width: 960px) { .f-carril { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* ============ Bento ============ */
.f-bento { display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
.f-bento__celda { position: relative; overflow: hidden; border-radius: var(--f-r-media); background: var(--f-sup-1); padding: var(--f-e-8); display: flex; flex-direction: column; gap: var(--f-e-2); min-height: 200px; }
.f-bento__celda .f-h3 { margin-top: auto; }
.f-bento__celda p { color: var(--f-texto-3); font-size: .9375rem; max-width: 40ch; margin: 0; }
.f-bento__celda--media { padding: 0; min-height: 320px; justify-content: flex-end; }
.f-bento__celda--media .f-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.f-bento__txt { position: relative; z-index: 1; padding: var(--f-e-8); display: grid; gap: 6px; }
.f-bento__celda--media .f-bento__txt { background: linear-gradient(to top, color-mix(in srgb, var(--negro-abismo) 88%, transparent) 20%, transparent); }
.f-bento__celda--media:hover .f-media > * { transform: scale(1.03); }
.f-bento__celda:focus-visible { border-radius: var(--f-r-media); }
.f-bento__cifra { font-size: clamp(2.6rem, 2rem + 3vw, 4.25rem); font-weight: var(--f-peso-display); letter-spacing: -0.045em; line-height: 1; }
.f-bento__cifra .lima { color: var(--f-lima); }
@media (min-width: 720px) {
  .f-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .f-bento__celda { grid-column: span 3; }
  .f-bento__celda.s2 { grid-column: span 2; }
  .f-bento__celda.s4 { grid-column: span 4; }
  .f-bento__celda.s6 { grid-column: span 6; }
  .f-bento__celda.r2 { grid-row: span 2; }
}
@media (max-width: 719px) {
  .f-bento__celda:not(.f-bento__celda--media) { min-height: 0; padding: var(--f-e-6); }
  .f-bento__celda--media { min-height: 260px; }
}

/* ============ Héroe ============ */
.f-heroe { position: relative; isolation: isolate; overflow: hidden; }
.f-heroe--video { min-height: min(88svh, 820px); display: grid; align-items: end; padding-block: calc(var(--f-e-16) * 1.5) var(--f-e-12); }
.f-heroe__fondo { position: absolute; inset: 0; z-index: -1; }
.f-heroe__fondo > video, .f-heroe__fondo > img, .f-heroe__fondo .f-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
.f-heroe__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--f-fondo) 2%, color-mix(in srgb, var(--negro-abismo) 50%, transparent) 45%, color-mix(in srgb, var(--negro-abismo) 25%, transparent)); }
.f-heroe__contenido { display: grid; gap: var(--f-e-6); max-width: 820px; }
.f-heroe--pagina { padding-block: clamp(64px, 4.5rem + 4vw, 136px) clamp(32px, 2rem + 2vw, 64px); }
@media (max-width: 719px) { .f-heroe--video { min-height: 0; padding-block: 200px 40px; } }

/* Barra de prompt */
.f-prompt { display: grid; gap: var(--f-e-3); padding: var(--f-e-3); border-radius: var(--f-r-media); background: var(--f-vidrio); backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); max-width: 720px; }
.f-prompt:focus-within { box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-prompt textarea { width: 100%; min-height: 56px; resize: none; background: transparent; border: 0; color: var(--f-texto); font-size: 1.0625rem; line-height: 1.45; padding: 8px 10px; }
.f-prompt textarea:focus-visible { box-shadow: none; outline: none; }
.f-prompt__barra { display: flex; align-items: center; gap: var(--f-e-2); flex-wrap: wrap; }
.f-prompt__barra .f-btn { margin-left: auto; }

/* ============ Pestañas ============ */
.f-tabs { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: var(--f-r-pill); background: var(--f-sup-1); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.f-tabs::-webkit-scrollbar { display: none; }
.f-tab { position: relative; z-index: 1; height: 36px; padding: 0 16px; border-radius: var(--f-r-pill); font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); white-space: nowrap; transition: color var(--f-rapido); display: inline-flex; align-items: center; gap: 6px; }
.f-tab:hover { color: var(--f-texto); }
.f-tab[aria-selected="true"], .f-tab[aria-current="true"] { color: var(--negro-abismo); }
.f-tab:focus-visible { border-radius: var(--f-r-pill); }
.f-tabs__indicador { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--f-r-pill); background: var(--f-texto); transition: transform var(--f-medio), width var(--f-medio); }

/* ============ Formularios ============ */
.f-campo { display: grid; gap: 6px; }
.f-campo label, .f-etiqueta { font-size: .8125rem; font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
.f-input, .f-select, .f-textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--f-r-control); background: var(--f-sup-1); border: 1px solid var(--f-linea-fuerte); color: var(--f-texto); font-size: .9375rem; transition: border-color var(--f-rapido), box-shadow var(--f-rapido); }
/* Los campos marcan el foco con su propio borde lima (como en Entrar): sin
   el contorno común encima, que dibujaría dos marcos a la vez. */
.f-input:focus-visible, .f-select:focus-visible, .f-textarea:focus-visible { outline: none; border-color: var(--f-lima); box-shadow: 0 0 0 3px var(--f-lima-suave); border-radius: var(--f-r-control); }
.f-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.f-ayuda { font-size: .75rem; color: var(--f-texto-3); }

/* ============ Precios ============ */
.f-segmento { display: inline-flex; padding: 4px; border-radius: var(--f-r-pill); background: var(--f-sup-1); gap: 4px; }
.f-segmento button { height: 34px; padding: 0 16px; border-radius: var(--f-r-pill); font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); display: inline-flex; align-items: center; gap: 6px; }
.f-segmento button[aria-pressed="true"] { background: var(--f-texto); color: var(--negro-abismo); }
.f-segmento button:focus-visible { border-radius: var(--f-r-pill); }
.f-planes { display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .f-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.f-plan { position: relative; display: flex; flex-direction: column; gap: var(--f-e-5); padding: var(--f-e-8) var(--f-e-6) var(--f-e-6); border-radius: var(--f-r-media); background: var(--f-sup-1); }
.f-plan--destacado { box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-plan__importe { font-size: clamp(2.4rem, 2rem + 1.4vw, 3.1rem); font-weight: var(--f-peso-display); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; color: var(--f-texto-2); }
.f-lista-check li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.f-lista-check svg { width: 18px; height: 18px; margin-top: 2px; color: var(--f-lima); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Preguntas (acordeón nativo) ============ */
.f-faq { display: grid; box-shadow: 0 -1px 0 var(--f-linea); }
.f-faq details { box-shadow: 0 1px 0 var(--f-linea); }
.f-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4); min-height: 64px; cursor: pointer; font-size: 1.0625rem; font-weight: var(--f-peso-ui); letter-spacing: -0.01em; }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 1.5px solid var(--f-texto-3); border-bottom: 1.5px solid var(--f-texto-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--f-medio); }
.f-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.f-faq summary:focus-visible { border-radius: var(--f-r-control); }
.f-faq p { color: var(--f-texto-2); padding: 0 0 var(--f-e-6); max-width: 62ch; margin: 0; }

/* ============ Sub-navegación de página ============ */
.f-subnav { position: sticky; top: calc(var(--f-alto-cabecera) + env(safe-area-inset-top)); z-index: 6; background: var(--f-vidrio); backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio); box-shadow: 0 1px 0 var(--f-linea); }
.f-subnav .f-contenedor { display: flex; gap: var(--f-e-1); overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.f-subnav a { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--f-r-pill); font-size: .8125rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); white-space: nowrap; }
.f-subnav a:hover { color: var(--f-texto); }
.f-subnav a[aria-current="true"] { color: var(--f-texto); background: var(--f-sup-2); }
.f-subnav a:focus-visible { border-radius: var(--f-r-pill); }
[id].f-ancla { scroll-margin-top: calc(var(--f-alto-cabecera) + 64px); }

/* ============ Banda CTA y pasos ============ */
.f-cta { position: relative; overflow: hidden; border-radius: calc(var(--f-r-media) + 8px); padding: clamp(48px, 2.5rem + 4vw, 112px) var(--f-e-6); text-align: center; display: grid; justify-items: center; gap: var(--f-e-5); background: var(--f-sup-1); }
.f-cta .f-lead { margin-inline: auto; }
.f-cta .f-acciones { justify-content: center; }
.f-luces { display: inline-flex; gap: 10px; }
.f-luces i { width: 10px; height: 10px; border-radius: 50%; background: var(--f-lima); }
.f-pasos { display: grid; gap: var(--f-e-4); counter-reset: paso; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .f-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-paso { counter-increment: paso; padding: var(--f-e-8) var(--f-e-6); border-radius: var(--f-r-media); background: var(--f-sup-1); display: grid; gap: var(--f-e-2); align-content: start; }
.f-paso::before { content: counter(paso, decimal-leading-zero); font-family: var(--fuente-mono); font-size: .75rem; color: var(--f-lima); }
.f-paso p { color: var(--f-texto-3); font-size: .9375rem; margin: 0; }

/* ============ Aparecer al hacer scroll (sutil) ============ */
.f-aparece { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--f-curva), transform 700ms var(--f-curva); }
.f-aparece.visto { opacity: 1; transform: none; }
html.sin-js .f-aparece { opacity: 1; transform: none; }

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  :is(.familia, .f-cabecera, .f-hoja, .f-pie) *, :is(.familia, .f-cabecera, .f-hoja, .f-pie) *::before, :is(.familia, .f-cabecera, .f-hoja, .f-pie) *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .f-mega:not([hidden]), .f-hoja:not([hidden]) { animation: none; }
  .f-aparece { opacity: 1; transform: none; }
  .f-tarjeta:hover .f-media > *, .f-bento__celda--media:hover .f-media > *, .f-destacado:hover .f-media > * { transform: none; }
}

/* ============================================================
   CONTROLES v340 EN LAS PÁGINAS PÚBLICAS (dueño, 11-oct-2026:
   «todos los útiles, juegos, apps… aún se ven en la versión vieja,
   intégralo a la versión nueva»). Lleva a Útiles, Apps, guías y
   Comunidad los mismos botones, chips, carriles y campos que
   controles-v340.css pone en Crear: lima con luz arriba y rebote al
   pulsar, secundarios con contorno fino, la opción elegida en lima
   suave y campos de radio 12 con su flecha propia.
   Solo cuerpo de página: la cabecera, el mega menú, la hoja ☰ y el
   pie (f-cabecera/f-hoja/f-pie, navegacion-global) no se tocan.
   Conectores y Precios conservan sus selectores de referencia.
   Los juegos llevan lo suyo en juegos.css (también sirve en Crear).
   ============================================================ */
:root {
  --c-r-campo: 12px;
  --c-r-pill: 999px;
  --c-muelle: cubic-bezier(.34, 1.56, .64, 1);
  --c-suave: cubic-bezier(.22, 1, .36, 1);
  --c-t-hundir: 90ms;
  --c-t-volver: 320ms;
  --c-t-color: 160ms;
  --c-hundir: scale(.96);
  --c-hundir-grande: scale(.975);
  --c-lima-relieve: linear-gradient(180deg, color-mix(in srgb, var(--lima-clara) 38%, var(--verde-cocuyo)) 0%, var(--verde-cocuyo) 58%);
  --c-lima-labio: inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--tinta-sobre-verde) 16%, transparent);
  --c-lima-halo: 0 8px 24px -10px color-mix(in srgb, var(--verde-cocuyo) 70%, transparent);
  --c-sombra-pulsado: inset 0 2px 4px color-mix(in srgb, var(--tinta-sobre-verde) 22%, transparent);
  /* Flecha de los desplegables, dibujada con dos degradados (sin colores sueltos). */
  --c-flecha: linear-gradient(45deg, transparent calc(50% - .75px), var(--f-texto-2) calc(50% - .75px), var(--f-texto-2) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(-45deg, transparent calc(50% - .75px), var(--f-texto-2) calc(50% - .75px), var(--f-texto-2) calc(50% + .75px), transparent calc(50% + .75px));
}

/* 1. Principal (lima): la acción que avanza. */
:is(.f-btn.f-btn--primario, .cta:not(.secondary), .uth-btn-primario):not(:is(.f-cabecera, .f-hoja, .f-pie) *) {
  border: 0;
  border-radius: var(--c-r-pill);
  background: var(--c-lima-relieve);
  background-color: var(--f-lima);
  color: var(--f-lima-tinta);
  box-shadow: var(--c-lima-labio);
  transition: transform var(--c-t-volver) var(--c-muelle), box-shadow var(--c-t-color) var(--c-suave), background-color var(--c-t-color) var(--c-suave), color var(--c-t-color) var(--c-suave);
}
:is(.f-btn.f-btn--primario, .cta:not(.secondary), .uth-btn-primario):not(:is(.f-cabecera, .f-hoja, .f-pie) *):hover:not(:disabled) {
  background: var(--f-lima-hover);
  box-shadow: var(--c-lima-labio), var(--c-lima-halo);
  transform: translateY(-1px);
  filter: none;
}
:is(.f-btn.f-btn--primario, .cta:not(.secondary), .uth-btn-primario):not(:is(.f-cabecera, .f-hoja, .f-pie) *):active:not(:disabled) {
  background: var(--f-lima);
  box-shadow: var(--c-sombra-pulsado);
  transform: var(--c-hundir-grande);
  transition-duration: var(--c-t-hundir);
}
/* Desactivado: gris legible, como «Generar» sin texto en Crear. */
.uth-btn-primario:disabled {
  opacity: 1;
  background: var(--f-sup-2);
  color: var(--f-texto-2);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transform: none;
}
/* Cargando (aria-busy): la franja de luz de Crear. */
:is(.uth-btn-primario, .f-btn--primario)[aria-busy="true"] {
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--blanco-luz) 32%, transparent) 50%, transparent 80%);
  background-color: var(--f-lima);
  background-size: 220% 100%;
  color: var(--f-lima-tinta);
  cursor: progress;
  animation: c-cargando-pag 1.3s linear infinite;
}
@keyframes c-cargando-pag { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* 2. Secundario y fantasma: contorno fino sobre la superficie. */
:is(.f-btn.f-btn--secundario, .f-btn.f-btn--fantasma, .cta.secondary, .uth-btn-fantasma, .uth-btn-icono, .ucal-copiar):not(:is(.f-cabecera, .f-hoja, .f-pie) *) {
  border: 0;
  background: var(--f-sup-1);
  color: var(--f-texto);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: transform var(--c-t-volver) var(--c-muelle), background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave), color var(--c-t-color) var(--c-suave);
}
:is(.f-btn.f-btn--secundario, .f-btn.f-btn--fantasma, .cta.secondary, .uth-btn-fantasma, .uth-btn-icono, .ucal-copiar):not(:is(.f-cabecera, .f-hoja, .f-pie) *):hover:not(:disabled) {
  background: var(--f-sup-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 18%, transparent);
  color: var(--f-texto);
}
:is(.f-btn, .cta, .uth-btn, .apps-flecha, .utl-flecha):not(:is(.f-cabecera, .f-hoja, .f-pie) *):active:not(:disabled) {
  transform: var(--c-hundir);
  transition-duration: var(--c-t-hundir);
}
.uth-btn-fantasma[aria-pressed="true"] {
  background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea);
  color: var(--f-texto);
}

/* 3. Carriles (segmentados): un carril con contorno fino y la opción
   elegida en lima suave (lima = lo activo), como Inicio/Final de Video. */
.uth-pastillas-op {
  gap: 2px;
  padding: 3px;
  border-radius: var(--c-r-pill);
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
}
.uth-pastillas-op { display: inline-flex; flex-wrap: wrap; justify-self: start; max-width: 100%; }
.uth-pastilla,
.ut-tabs button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--f-texto-2);
  transition: transform var(--c-t-volver) var(--c-muelle), background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave), color var(--c-t-color) var(--c-suave);
}
.uth-pastilla { border-radius: var(--c-r-pill); }
.uth-pastilla:hover:not(.is-desactivada),
.ut-tabs button:hover { background: var(--f-sup-2); color: var(--f-texto); }
.uth-pastilla.is-activa,
.ut-tabs button[aria-selected="true"] {
  background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea);
  color: var(--f-texto);
}
.uth-pastilla:active:not(.is-desactivada),
.ut-tabs button:active { transform: var(--c-hundir); transition-duration: var(--c-t-hundir); }
/* utiles.html: las tarjetas de cada útil (icono + dos líneas) son una
   rejilla, no un carril: cada una lleva la caja de los campos de Crear. */
.ut-tabs button { border-radius: var(--c-r-campo); background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.ut-tabs button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 18%, transparent); }
/* Carriles que ya existían (hubs de Útiles y Apps): solo cambia la elegida. */
.utl-tabs a[aria-current],
.apps-portada .apps-indice a[aria-current] {
  background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea);
  color: var(--f-texto);
}
.utl-tabs a[aria-current] > span { color: var(--f-texto-2); }

/* 4. Campos: caja de radio 12, contorno fino, más luz al pasar y anillo
   lima al escribir; los desplegables llevan la flecha de Crear. */
:is(.uth input:is([type=text], [type=url], [type=tel], [type=email], [type=number]), .uth select, .uth textarea, .f-input, .f-select, .f-textarea) {
  border: 0;
  border-radius: var(--c-r-campo);
  background-color: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  color: var(--f-texto);
  transition: background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave);
}
:is(.uth input:is([type=text], [type=url], [type=tel], [type=email], [type=number]), .uth select, .uth textarea, .f-input, .f-select, .f-textarea):hover:not(:disabled) {
  background-color: var(--f-sup-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 18%, transparent);
}
:is(.uth input:is([type=text], [type=url], [type=tel], [type=email], [type=number]), .uth select, .uth textarea, .f-input, .f-select, .f-textarea):focus-visible {
  outline: none;
  background-color: var(--f-sup-2);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea), 0 0 0 3px var(--f-lima-suave);
}
:is(.uth select, .f-select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: var(--c-flecha);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
:is(.uth select, .f-select) option { background: var(--f-sup-2); color: var(--f-texto); }
.uth input[type=color] { border: 0; border-radius: var(--c-r-campo); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.uth input[type=range] { accent-color: var(--f-lima); }
.uth-campo > label, .uth-pastillas legend { color: var(--f-texto-3); font-weight: var(--f-peso-ui, 500); }
/* Buscadores de los hubs: mismo contorno y anillo que los campos. */
.utl-buscar,
.apps-portada .apps-buscar {
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave);
}
.utl-buscar:hover,
.apps-portada .apps-buscar:hover { background: var(--f-sup-2); }
.utl-buscar:focus-within,
.apps-portada .apps-buscar:focus-within { background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-lima-linea), 0 0 0 3px var(--f-lima-suave); }

/* 5. Zona de soltar archivos: misma caja que las tarjetas de Crear,
   en lima suave al pasar y con el rebote al pulsar. */
.uth-drop { border-radius: var(--c-r-campo); transition: transform var(--c-t-volver) var(--c-muelle), border-color var(--c-t-color) var(--c-suave), background-color var(--c-t-color) var(--c-suave); }
.uth-drop:hover:not(:disabled) { border-color: var(--f-lima-linea); background: var(--f-lima-suave); }
.uth-drop:active:not(:disabled) { transform: var(--c-hundir-grande); transition-duration: var(--c-t-hundir); }

@media (prefers-reduced-motion: reduce) {
  :is(.f-btn, .cta, .uth-btn, .uth-pastilla, .ut-tabs button, .uth-drop):not(:is(.f-cabecera, .f-hoja, .f-pie) *) { transition: none; transform: none !important; animation: none !important; }
}


/* cocuyo-css: assets/css/estudio-familia.css */
/* ============================================================
   ESTUDIO · ACABADO FAMILIA COCUYO (dueño, 29-sep-2026)
   ------------------------------------------------------------
   El Estudio se viste igual que el resto de la web (familia.css y el
   concepto de propuestas/familia/estudio.html), con el acabado ligero
   tipo Runway/Apple: Geist 450–550 en titulares y navegación, cuerpo
   400, casi sin bordes, sombras mínimas, mucho aire, lima SOLO en la
   acción principal y en lo activo, y las dos O verdes sin halo.

   Qué NO cambia: el negro, «Esperando para crear», la posición de los
   paneles (Crear a la izquierda, resultados a la derecha), el Agente
   privado (data-agente-beta), los flujos, los ids, los data-atributos
   y los estados que pinta el JavaScript (saldo bajo, en marcha, etc.).

   Cómo se aplica: esta hoja es la ÚLTIMA capa del Estudio. El Estudio
   acumula muchas hojas con selectores largos (#mesa #headicons…), así
   que cada regla de aquí empieza por el prefijo
       body.studio-workbench:not(#f)
   El «:not(#f)» no filtra nada (no existe un #f): solo suma el peso de
   un id para quedar por encima de las capas anteriores sin recurrir a
   !important. Solo se usa !important donde una hoja anterior ya lo usa.

   Colores y letra: tokens --f-* del espejo de crear.html (los mismos
   valores que assets/css/familia.css). Sin colores sueltos.
   Movimiento reducido: sin transiciones ni animaciones al final.
   ============================================================ */

/* ============ Base: letra y titulares ============ */
/* Titulares en Geist (Fraunces queda fuera de los titulares). */
body.studio-workbench:not(#f) {
  --display: var(--fuente);
  font-weight: var(--f-peso-cuerpo);
  letter-spacing: -0.005em;
  font-kerning: normal;
}
body.studio-workbench:not(#f) :is(h1, .title, .hello, .bv-vacio h3, .hist-nada b) {
  font-family: var(--fuente);
  font-weight: var(--f-peso-display);
  letter-spacing: var(--f-tracking-titulo);
}
body.studio-workbench:not(#f) :is(h2, h3) { font-weight: var(--f-peso-titulo); letter-spacing: -0.015em; }

/* ============ Cabecera del Estudio (escritorio) ============ */
/* El mismo lenguaje que la cabecera común (.f-cabecera): 64 px, vidrio
   negro, una línea finísima debajo, enlaces 450 en gris que pasan a
   blanco, y el activo en blanco con un punto lima. */
@media (min-width: 901px) {
  html body.studio-workbench:not(#f) { --st-top: 64px; }
  body.studio-workbench:not(#f) .studio-public-nav {
    --cn-top: 64px;
    height: 64px;
    gap: var(--f-e-4);
    padding: 0 var(--f-e-6);
    border-bottom: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav { gap: 2px; align-items: center; height: auto; }
  body.studio-workbench:not(#f) .studio-public-nav .st-actions { gap: var(--f-e-2); }
}

/* Marca: COCUYO con las dos O encendidas, sin halo (ley de marca). */
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton { filter: none; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton:hover { filter: none; opacity: .86; }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton[aria-current="page"]::after { display: none; }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .wordmark {
  font-family: var(--fuente);
  font-weight: 650;
  font-size: 1.125rem;
  letter-spacing: .07em;
  line-height: 1;
  color: var(--f-texto);
}
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .o-viva { color: var(--f-lima); text-shadow: none; }

/* Enlaces del menú: Imagen · Video · Audio (con su flecha de modelos),
   Apps, Comunidad, Agente (solo con acceso), Creaciones, Proyectos y
   Precios. Todos con la misma pastilla. */
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--fuente);
  font-size: .875rem;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--f-texto-2);
  white-space: nowrap;
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing):hover {
  color: var(--f-texto);
  background: var(--f-sup-2);
}
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing, .st-nav-group > button):focus-visible {
  outline: 2px solid var(--f-lima);
  outline-offset: 2px;
}
/* Imagen · Video · Audio: enlace + flecha forman una sola pastilla. */
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group {
  align-items: center;
  height: 36px;
  border-radius: var(--f-r-pill);
  box-shadow: none;
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-right: 2px; }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:hover > a { color: var(--f-texto); background: transparent; }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button {
  width: 26px;
  height: 36px;
  padding: 0 6px 0 2px;
  border-radius: 0 var(--f-r-pill) var(--f-r-pill) 0;
  color: var(--f-texto-3);
  background: transparent;
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button:hover,
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button[aria-expanded="true"] { color: var(--f-texto); }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button > svg { width: 12px; height: 12px; opacity: .8; }
/* Activo: blanco y un punto lima (como la cabecera común). */
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .sn-agent-entry, .st-workspace-nav button, .st-pricing)[aria-current="page"] {
  color: var(--f-texto);
  background: transparent;
  box-shadow: none;
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:has(> a[aria-current="page"]) { box-shadow: none; }
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .sn-agent-entry, .st-workspace-nav button, .st-pricing)[aria-current="page"]::after,
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto::after {
  content: "";
  display: block;
  position: static;
  flex: none;
  width: 4px;
  height: 4px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--f-lima);
  box-shadow: none;
}
/* Hueco del punto reservado también en los no activos (dueño, 10-oct-2026: «se
   cambia la posición de arriba»): Imagen, Video y Audio no se mueven al cambiar de modo. */
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a:not([aria-current="page"])::after {
  content: "";
  display: block;
  position: static;
  flex: none;
  width: 4px;
  height: 4px;
  margin-left: 2px;
  background: none;
  transform: none;
  visibility: hidden;
}
/* Apps y Comunidad sin iconos de colores: la lima es para lo activo. */
body.studio-workbench:not(#f) .studio-public-nav .st-apps .ic { display: none; }
body.studio-workbench:not(#f) .studio-public-nav .cn-community-toggle > svg { width: 12px; height: 12px; opacity: .55; margin-left: -2px; }
/* Creaciones · Proyectos: separados por una línea fina, como la maqueta. */
body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav {
  gap: 2px;
  margin-left: var(--f-e-1);
  padding-left: var(--f-e-3);
  border-left: 0;
  box-shadow: inset 1px 0 0 var(--f-linea-fuerte);
  height: 18px;
  overflow: visible;
}
body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button svg { width: 16px; height: 16px; stroke-width: 1.5; }
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton .cpro-actual { color: var(--f-texto); font-weight: 450; }
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto > svg { color: inherit; }
/* Con sitio de sobra, texto sin iconos (como la cabecera común); entre
   901 y 1180 px quedan solo los iconos, como hasta ahora. */
@media (min-width: 1181px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button > svg { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button { width: 36px; padding: 0; justify-content: center; }
  body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto::after { display: none; }
  body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-pricing) { padding-inline: 9px; font-size: .8125rem; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-right: 1px; }
}

/* Precios: un enlace más, sin la pastilla «No caducan» (Familia, 29-sep). */
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-badge,
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-label > svg { display: none; }
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-label { gap: 0; }

/* Saldo: una pastilla fina con la cifra. El icono conserva sus colores de
   estado (rojo con poco saldo), que pinta estudio-creditos.css. */
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos {
  height: 36px;
  min-height: 36px;
  gap: 7px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos .credit-wallet-icon { width: 15px; height: 15px; flex-basis: 15px; stroke-width: 1.6; }
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos [data-credit-value] { font-size: .875rem; font-weight: var(--f-peso-ui); letter-spacing: 0; }

/* Ayuda, idioma y sesiones: iconos redondos y transparentes. */
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle) {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--f-texto-2);
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle):hover { color: var(--f-texto); background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle) svg { width: 18px; height: 18px; stroke-width: 1.5; }
body.studio-workbench:not(#f) .studio-public-nav .st-language summary {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  color: var(--f-texto-2);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: .02em;
}
body.studio-workbench:not(#f) .studio-public-nav .st-language summary:hover { color: var(--f-texto); background: var(--f-sup-2); }

/* Avatar: círculo gris con la inicial (como .f-cuenta #avatar-cine). */
body.studio-workbench:not(#f) .studio-public-nav #acct {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
body.studio-workbench:not(#f) .studio-public-nav #acct .av {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--f-sup-3);
  color: var(--f-texto);
  font-family: var(--fuente);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav #acct:hover .av,
body.studio-workbench:not(#f) .studio-public-nav #acct[aria-expanded="true"] .av { background: color-mix(in srgb, var(--blanco-luz) 14%, var(--negro-abismo)); }
body.studio-workbench:not(#f) .studio-public-nav #acct:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 2px; }

/* Visitante: «Empieza a crear» es el botón lima de la cabecera común. */
body.studio-workbench:not(#f) .studio-public-nav .st-guest .st-start {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-lima);
  color: var(--f-lima-tinta);
  font-family: var(--fuente);
  font-size: .875rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.005em;
  transition: background var(--f-rapido), box-shadow var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav .st-guest .st-start:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }

/* ============ Cabecera del Estudio (móvil) ============ */
@media (max-width: 900px) {
  body.studio-workbench:not(#f) .studio-public-nav {
    border-bottom: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .wordmark { font-size: 1rem; }
  /* El punto activo y la flecha caben junto al nombre completo. La rejilla
     heredada daba el mismo ancho a cada editor y recortaba «Imagen» junto
     a la marca; el mínimo global de los botones ensanchaba las flechas. */
  body.studio-workbench:not(#f) .studio-public-nav .st-nav { display: flex; align-items: center; gap: 0; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group { flex: 1 0 auto; min-width: max-content; height: 44px; justify-content: center; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { min-height: 44px; padding: 0 1px 0 8px; font-size: .8125rem; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button { width: var(--f-e-6); min-width: var(--f-e-6); padding: 0 4px 0 1px; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:has(> a[aria-current="page"]) { background: var(--f-sup-2); }
}
@media (max-width: 380px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-left: 6px; font-size: .75rem; }
  body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a)[aria-current="page"]::after { display: none; }
}

/* ============ Menú de modelos (la flecha de Imagen/Video/Audio) ============ */
body.studio-workbench:not(#f) .studio-public-nav .st-model-panel.cn-mega {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  background: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}
body.studio-workbench:not(#f) .cn-mega .cn-panel-heading { border-bottom: 0; box-shadow: 0 1px 0 var(--f-linea); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-heading h2 { font-weight: var(--f-peso-titulo); }
body.studio-workbench:not(#f) .cn-mega .cn-family { font-weight: 450; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .cn-mega .cn-family:is(:hover, [aria-expanded="true"]) { background: var(--f-sup-2); border-color: transparent; }
body.studio-workbench:not(#f) .cn-mega .cn-family-deck { border-left: 0; box-shadow: inset 1px 0 0 var(--f-linea); background: transparent; }
body.studio-workbench:not(#f) .cn-mega .cn-family-heading { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .cn-mega .cn-model { border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .cn-mega .cn-model:hover { background: var(--f-sup-2) !important; border-color: transparent !important; }
body.studio-workbench:not(#f) .cn-mega .cn-model b { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-footer { border-top: 0; box-shadow: 0 -1px 0 var(--f-linea); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-footer > :is(a, button) { font-weight: var(--f-peso-ui); }

/* ============ Panel Crear ============ */
/* Rótulo «CREAR»: la etiqueta pequeña en mayúsculas de la familia. */
body.studio-workbench:not(#f) #mesa .studio-editor-head > span:first-child {
  font-family: var(--fuente);
  font-size: .75rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-texto-3);
}
/* Modelo: la tarjeta con la marca en verde, sin borde marcado. */
body.studio-workbench:not(#f) #mesa #studioVideoModel .param {
  min-height: 56px;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-tarjeta);
  background: var(--f-sup-1);
  box-shadow: none;
  font-size: .9375rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.01em;
  transition: background var(--f-rapido), border-color var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #studioVideoModel .param:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #studioVideoModel .param .mrcbox {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: var(--f-r-control);
  background: var(--f-lima-suave);
  color: var(--f-lima);
}
/* Inicio / Final · Referencias: el segmento de la familia (pastilla,
   la opción elegida en blanco). */
body.studio-workbench:not(#f) #mesa .ref-mode-switch {
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea);
}
body.studio-workbench:not(#f) #mesa .ref-mode-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--fuente);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  color: var(--f-texto-3);
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa .ref-mode-switch button:hover { color: var(--f-texto); }
body.studio-workbench:not(#f) #mesa .ref-mode-switch button[aria-pressed="true"] { background: var(--f-texto); color: var(--negro-abismo); }
/* Añadir fotogramas / referencias: recuadro de puntos, sin relleno. */
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact {
  border: 1px dashed var(--f-linea-fuerte);
  border-radius: var(--f-r-tarjeta);
  background: transparent;
  box-shadow: none;
  font-weight: var(--f-peso-ui);
  transition: border-color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact:hover { border-color: var(--f-lima-linea); background: var(--f-lima-suave); }
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact .ref-orb { background: var(--f-sup-2); border-color: transparent; box-shadow: none; }
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact .ref-add-label { font-size: .8125rem; font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ref-mode-hint { font-size: .75rem; color: var(--f-texto-3); }
/* Descripción: campo de la familia (superficie apenas más clara). */
body.studio-workbench:not(#f) #mesa #ta {
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-tarjeta);
  background: var(--f-sup-1);
  box-shadow: none;
  font-weight: var(--f-peso-cuerpo);
  line-height: 1.5;
  transition: border-color var(--f-rapido), box-shadow var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #ta:hover { border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #ta:focus { border-color: var(--f-lima-linea); box-shadow: 0 0 0 3px var(--f-lima-suave); outline: 0; }
body.studio-workbench:not(#f) #mesa #ta:empty::before { color: var(--f-texto-3); }
/* Ayuda con el prompt · Mis referencias: chips de la familia. */
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-sup-2);
  color: var(--f-texto-2);
  font-family: var(--fuente);
  font-size: .75rem;
  font-weight: var(--f-peso-ui);
  text-decoration: none;
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry):hover { color: var(--f-texto); background: var(--f-sup-3); }
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry):focus-visible { outline: 2px solid var(--f-lima); outline-offset: 2px; }
body.studio-workbench:not(#f) #mesa #studioComposerActions { gap: 6px; }
/* Ajustes (formato, resolución, duración…): controles de 10 px de radio. */
body.studio-workbench:not(#f) #mesa #parambar .param {
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-control);
  background: var(--f-sup-1);
  box-shadow: none;
  font-weight: var(--f-peso-ui);
  transition: background var(--f-rapido), border-color var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #parambar .param:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #parambar .studio-param-label { font-weight: 450; color: var(--f-texto-3); }
body.studio-workbench:not(#f) #mesa #parambar .studio-param-value { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa #parambar .cost { font-weight: 450; }
body.studio-workbench:not(#f) #mesa #parambar .cost b { font-weight: var(--f-peso-ui); }

/* Generar: el botón principal de la familia (pastilla lima). El coste
   sigue dentro del botón; los estados del JS (en marcha, sin saldo,
   desactivado) conservan su lógica. */
body.studio-workbench:not(#f) #mesa #headicons .roundbtn,
body.studio-workbench:not(#f) #mesa .ap-gen {
  min-height: 52px;
  border: 0;
  border-radius: var(--f-r-pill);
  box-shadow: none;
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.005em;
  transition: background var(--f-rapido), box-shadow var(--f-rapido), transform var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:not(:disabled) { background: var(--f-lima); color: var(--f-lima-tinta); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:hover:not(:disabled),
body.studio-workbench:not(#f) #mesa .ap-gen:hover:not(:disabled) { background: var(--f-lima-hover); box-shadow: var(--f-luz); transform: none; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:active:not(:disabled),
body.studio-workbench:not(#f) #mesa .ap-gen:active:not(:disabled) { transform: scale(.98); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn::after { display: none; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn .rlbl { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn .studio-generate-cost { font-weight: 450; opacity: .72; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:focus-visible,
body.studio-workbench:not(#f) #mesa .ap-gen:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; }

/* ============ Vídeo en escritorio: columna Crear ============ */
/* Mismo negro que la página y una línea finísima hacia los resultados. */
@media (min-width: 1001px) {
  body.studio-workbench:not(#f)[data-studio-mode="video"] #mesa .mesa-in {
    background: var(--f-fondo);
    box-shadow: inset -1px 0 0 var(--f-linea);
  }
  body.studio-workbench:not(#f)[data-studio-mode="video"] #mesa #headicons {
    background: linear-gradient(to top, var(--f-fondo) 72%, transparent);
  }
}

/* ============ Imagen: barra de creación ============ */
/* Una tarjeta apenas más clara que el fondo, con su filete fino. */
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa .mesa-in {
  border: 0;
  border-radius: var(--f-r-media);
  background: var(--f-sup-1);
  box-shadow: 0 0 0 1px var(--f-linea), 0 24px 48px color-mix(in srgb, var(--negro-abismo) 55%, transparent);
}
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta { background: transparent; border-color: transparent; }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta:focus { box-shadow: none; border-color: transparent; }
/* La barra no tiene borde: el foco de teclado debe seguir siendo visible
   aunque el prompt conserve su superficie transparente. No cambia el tamaño. */
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa :is(#parambar .param, .image-ref-add) { background: var(--f-sup-2); border-color: transparent; }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa :is(#parambar .param, .image-ref-add):hover { background: var(--f-sup-3); }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa .image-ref-add { border-radius: var(--f-r-control); box-shadow: none; }

/* ============ Audio ============ */
body.studio-workbench:not(#f).audio-redesign #mesa .mesa-in {
  border: 0;
  background: var(--f-fondo);
  box-shadow: 0 0 0 1px var(--f-linea);
  border-radius: var(--f-r-media);
}
body.studio-workbench:not(#f) #mesa .audio-type-tabs button { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-voz { border-radius: var(--f-r-tarjeta); border-color: var(--f-linea); }
body.studio-workbench:not(#f) #mesa .ap-voz b { font-weight: var(--f-peso-titulo); letter-spacing: -0.02em; }
body.studio-workbench:not(#f) #mesa .ap-vozcambia { border-radius: var(--f-r-pill); font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-idioma select {
  min-height: 36px;
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-control);
  background-color: var(--f-sup-1);
  color: var(--f-texto);
  font-family: var(--fuente);
  font-weight: 450;
}
body.studio-workbench:not(#f) #mesa :is(.ap-rot, .ap-idioma > span) { font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
body.studio-workbench:not(#f) #mesa .ap-nota { color: var(--f-texto-3); }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila,
body.studio-workbench:not(#f) #mesa .ap-avwrap > .ap-fila {
  border-radius: var(--f-r-tarjeta);
  font-weight: 450;
}
body.studio-workbench:not(#f) #mesa #parambar .ap-fila { border: 1px solid var(--f-linea); background: var(--f-sup-1); box-shadow: none; }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila b { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-gen:not(:disabled) { background: var(--f-lima); color: var(--f-lima-tinta); }

/* ============ Resultados vacíos: «Esperando para crear» ============ */
/* Las dos luces del cocuyo, redondas y sin halo (como .f-luces). */
body.studio-workbench:not(#f) .ej-waiting-lights { gap: 10px; }
body.studio-workbench:not(#f) .ej-waiting-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: none;
  background: var(--f-lima);
  box-shadow: none;
}
body.studio-workbench:not(#f) .ej-waiting > p { color: var(--f-texto-3); font-weight: 450; letter-spacing: -0.005em; }

/* ============ Barra inferior del móvil ============ */
/* Proyectos · Apps · Creaciones · Precios · Cuenta: vidrio negro, iconos
   de línea y etiquetas pequeñas en gris; lo activo en blanco. */
@media (max-width: 900px) {
  body.studio-workbench:not(#f) .sm-nav {
    border-top: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 -1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) {
    border: 0;
    border-radius: var(--f-r-control);
    background: transparent;
    color: var(--f-texto-3);
    font-family: var(--fuente);
    font-size: .6875rem;
    font-weight: 450;
    letter-spacing: 0;
    transition: color var(--f-rapido), background var(--f-rapido);
  }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) :is(span, small) { font-weight: inherit; }
  body.studio-workbench:not(#f) .sm-nav .st-pricing .cn-pricing-label { color: inherit; font-weight: inherit; }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):hover,
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):is([aria-current="page"], [aria-expanded="true"], .on, .active) { color: var(--f-texto); }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) svg { width: 20px; height: 20px; stroke-width: 1.5; }
  body.studio-workbench:not(#f) .sm-nav .sm-apps .ic { color: inherit; }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):focus-visible { outline: 2px solid var(--f-lima); outline-offset: -2px; }
}

/* ============ Menú de cuenta y saldo ============ */
body.studio-workbench:not(#f) #accmenu {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  background: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}
body.studio-workbench:not(#f) #accmenu .mi { border-radius: var(--f-r-control); font-weight: 450; color: var(--f-texto-2); }
body.studio-workbench:not(#f) #accmenu .mi:hover { background: var(--f-sup-2); color: var(--f-texto); }
body.studio-workbench:not(#f) #accmenu .sec { border-top-color: var(--f-linea); }
body.studio-workbench:not(#f) #accmenu .acc-identidad strong { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .studio-wallet-panel {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  body.studio-workbench:not(#f) :is(.studio-public-nav *, .sm-nav > *, #mesa #ta, #mesa .param, #mesa .roundbtn, #mesa .ap-gen, #mesa .refbox, #mesa .ref-mode-switch button, #mesa .prompt-help-trigger, #mesa .ckit-entry) { transition: none; }
  body.studio-workbench:not(#f) :is(#mesa #headicons .roundbtn, #mesa .ap-gen):active:not(:disabled) { transform: none; }
  body.studio-workbench:not(#f) .ej-waiting-lights i { animation: none; opacity: .85; }
}

/* ===== Desplegable de Crear con el menú «Tareas» (dueño, 11-oct-2026: «para
   que todo se vea ya parejo») =====
   estudio-explorar.js dibuja dentro de #studioTopModels el mismo panel que la
   cabecera pública (familia-menu.js, CocuyoFamilia.tareas) y le pone
   --cn-menu-left. La caja la pone el propio panel (.f-tareas, familia.css):
   aquí solo se quita la del desplegable de antes. */
body.studio-workbench .studio-public-nav .st-model-panel.cn-mega.st-model-panel--tareas {
  width: min(968px, calc(100vw - 32px)); max-height: none; padding: 0; overflow: visible;
  border: 0; border-radius: 22px; background: transparent; box-shadow: none;
}
.st-model-panel--tareas .f-tareas { max-height: calc(100dvh - var(--cn-top, 72px) - 24px); }
.st-model-panel--tareas .cn-editor-status { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--f-sup-2); color: var(--f-texto); font-size: .875rem; }
.st-model-panel--tareas .cn-editor-status[hidden] { display: none; }


/* cocuyo-css: assets/css/estudio-voz-herramientas.css */
/* Audio · Cambiar voz y Traducir (30-sep-2026). Acabado Familia: superficies
   oscuras, líneas finas y lima solo para la acción (Generar) y lo activo.
   Tokens --f-* definidos en crear.html (espejo de familia.css). */

/* Con una herramienta abierta, el compositor de texto a voz se oculta: el
   panel trae sus propios pasos y su botón Generar. */
.composer.vh-activa > :not(.audio-type-tabs):not(.audio-form-heading):not(#vozHerramienta){display:none !important}
.audio-type-tabs button[data-audio-tool]:not(:disabled){cursor:pointer}
.audio-type-tabs button[data-audio-tool]:not(:disabled):not(.active):hover{color:var(--f-texto,#f8fafc)}
.audio-type-tabs button[data-audio-tool]:focus-visible{outline:2px solid var(--f-lima,#aff33e);outline-offset:-2px}

.vh{display:grid;gap:var(--f-e-4,16px);padding:var(--f-e-2,8px) 0 var(--f-e-1,4px);color:var(--f-texto,#f8fafc)}
.vh-cab h2{margin:0;font:var(--f-peso-titulo,550) 17px/1.25 var(--font);letter-spacing:var(--f-tracking-titulo,-.025em)}
.vh-cab p{margin:4px 0 0;color:var(--f-texto-2,#b4b6b0);font-size:13px;line-height:1.45}
.vh-pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--f-e-3,12px)}
.vh-paso{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--f-e-3,12px);padding:var(--f-e-4,16px);background:var(--f-sup-1,#0e0e0e);border:1px solid var(--f-linea,#1c1c1c);border-radius:var(--f-r-tarjeta,16px)}
.vh-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--f-linea-fuerte,#2b2b2b);color:var(--f-texto-2,#b4b6b0);font:600 12px/1 var(--font)}
.vh-cuerpo{min-width:0;display:grid;gap:10px}
.vh-cuerpo h3{margin:3px 0 0;font:var(--f-peso-ui,500) 14px/1.3 var(--font);color:var(--f-texto,#f8fafc)}
.vh-nota{margin:0;color:var(--f-texto-3,#8a8c86);font-size:12px;line-height:1.45}
.vh-soltar{display:grid;gap:10px;padding:14px;border:1px dashed var(--f-linea-fuerte,#2b2b2b);border-radius:var(--f-r-control,10px);background:var(--f-sup-2,#141414)}
.vh-soltar p{margin:0;color:var(--f-texto-2,#b4b6b0);font-size:12.5px;line-height:1.45}
.vh-acciones,.vh-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.vh-fila .vh-campo{flex:1 1 200px}
.vh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--f-r-control,10px);border:1px solid var(--f-linea-fuerte,#2b2b2b);background:var(--f-sup-3,#1a1a1a);color:var(--f-texto,#f8fafc);font:var(--f-peso-ui,500) 13px/1 var(--font);cursor:pointer}
.vh-btn:hover{border-color:var(--f-texto-3,#8a8c86)}
.vh-btn:focus-visible,.vh-generar:focus-visible,.vh-campo select:focus-visible,.vh-rango input:focus-visible,.vh-check input:focus-visible,.vh-enlace:focus-visible,.vh-ajustes summary:focus-visible{outline:2px solid var(--f-lima,#aff33e);outline-offset:2px}
.vh-btn.vh-principal:focus-within{outline:2px solid var(--f-lima,#aff33e);outline-offset:2px}
.vh-enlace{background:none;border:0;padding:0;color:var(--f-texto,#f8fafc);text-decoration:underline;font:inherit;cursor:pointer;justify-self:start}
.vh-archivo{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--f-linea-fuerte,#2b2b2b);border-radius:var(--f-r-control,10px);background:var(--f-sup-2,#141414)}
.vh-icono{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--f-sup-3,#1a1a1a);color:var(--f-texto-2,#b4b6b0)}
.vh-nombre{min-width:0;flex:1;display:grid;gap:2px}
.vh-nombre b{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-nombre small{color:var(--f-texto-3,#8a8c86);font-size:11.5px}
.vh-grabando b{font-variant-numeric:tabular-nums}
.vh-punto{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:vh-latido 1s ease-in-out infinite}
@keyframes vh-latido{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.vh-punto{animation:none}}
.vh-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vh-campo{display:grid;gap:6px;min-width:0}
.vh-campo span,.vh-rango span{color:var(--f-texto-2,#b4b6b0);font-size:12px}
.vh-campo select{width:100%;min-height:42px;padding:0 10px;border-radius:var(--f-r-control,10px);border:1px solid var(--f-linea-fuerte,#2b2b2b);background:var(--f-sup-2,#141414);color:var(--f-texto,#f8fafc);font:400 13px var(--font)}
.vh-ajustes{border-top:1px solid var(--f-linea,#1c1c1c);padding-top:8px}
.vh-ajustes summary{cursor:pointer;color:var(--f-texto-2,#b4b6b0);font-size:12.5px;min-height:32px;display:flex;align-items:center}
.vh-ajustes[open]{display:grid;gap:10px}
.vh-rango{display:grid;gap:6px}
.vh-rango span{display:flex;justify-content:space-between}
.vh-rango output{color:var(--f-texto,#f8fafc);font-variant-numeric:tabular-nums}
.vh-rango input{width:100%;accent-color:var(--f-lima,#aff33e)}
.vh-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--f-texto,#f8fafc);min-height:32px}
.vh-check input{width:18px;height:18px;accent-color:var(--f-lima,#aff33e)}
.vh-aviso{margin:0;padding:10px 12px;border-radius:var(--f-r-control,10px);background:color-mix(in srgb,#ef4444 12%,transparent);border:1px solid color-mix(in srgb,#ef4444 35%,transparent);color:#fecaca;font-size:12.5px;line-height:1.45}
.vh-generar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:0 18px;border:0;border-radius:var(--f-r-control,10px);background:var(--f-lima,#aff33e);color:var(--f-lima-tinta,#0a0a0a);font:600 14px/1 var(--font);cursor:pointer;box-shadow:var(--f-luz,none)}
.vh-generar:hover:not(:disabled){background:var(--f-lima-hover,#c4f76a)}
.vh-generar:disabled{background:var(--f-sup-3,#1a1a1a);color:var(--f-texto-3,#8a8c86);box-shadow:none;cursor:not-allowed;justify-content:center}
.vh-generar b{font-weight:600;white-space:nowrap}
@media(max-width:520px){
 .vh-paso{grid-template-columns:1fr;gap:8px;padding:14px}
 .vh-num{width:24px;height:24px}
 .vh-dos{grid-template-columns:1fr}
 .vh-acciones .vh-btn{flex:1 1 0}
}
@media(pointer:coarse){.vh-btn,.vh-campo select{min-height:44px}.vh-check{min-height:44px}}
/* La tarjeta de un doblaje de video (MP4) en Audio. */
#genout .jobcard .jmarco > video[controls]{width:100%;height:100%;object-fit:contain;background:#000}


/* cocuyo-css: assets/css/estudio-variantes.css */
.studio-variantes{display:grid;grid-template-columns:minmax(180px,1fr) minmax(80px,160px) auto;gap:16px;align-items:center;margin:0 0 16px;padding:14px 16px;border:1px solid var(--negro-borde);border-radius:14px;background:var(--negro-elevado);color:var(--texto-principal,var(--text));font-size:13px}
.studio-variantes b,.studio-variantes span{display:block}.studio-variantes span{margin-top:4px;font-size:12px;line-height:1.45;color:var(--texto-secundario,var(--muted))}.studio-variantes progress{width:100%;height:6px;accent-color:var(--verde-cocuyo)}
.studio-variantes-acciones{display:flex;gap:8px;flex-wrap:wrap}.studio-variantes button{min-height:38px;padding:8px 12px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo);color:inherit;font:inherit;cursor:pointer}.studio-variantes button:hover{border-color:var(--verde-cocuyo)}.studio-variantes button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
@media(max-width:680px){.studio-variantes{grid-template-columns:1fr;gap:10px}.studio-variantes button{min-height:44px}}
/* 28-sep-2026: display:grid le ganaba al atributo hidden y la barra seguía a la vista. */
.studio-variantes[hidden]{display:none!important}
/* Fuera de Imagen, una línea corta que lleva a Imagen. */
.studio-variantes.compacta{grid-template-columns:minmax(0,1fr) auto;padding:10px 14px;gap:12px}
@media(max-width:680px){.studio-variantes.compacta{grid-template-columns:1fr}}


/* cocuyo-css: assets/css/estudio-borrador.css */
/* Modo borrador de Imagen (30-sep-2026). Solo existe en la página si el
   servidor lo enciende (ESTUDIO_MODO_BORRADOR); apagado no hay ningún nodo. */
.studio-borrador{margin:12px 0 0;padding:12px 14px;border:1px solid var(--negro-borde);border-radius:14px;background:var(--negro-elevado);color:var(--blanco-luz);font-size:13px;max-width:100%;box-sizing:border-box}
.studio-borrador-cabeza{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.studio-borrador-cabeza>div:first-child{flex:1 1 240px;min-width:0}
.studio-borrador b{display:block}
.studio-borrador p{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--gris-niebla)}
.studio-borrador-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.studio-borrador button{min-height:38px;padding:8px 12px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo);color:inherit;font:inherit;cursor:pointer}
.studio-borrador button:hover{border-color:var(--verde-cocuyo)}
.studio-borrador button.pri{background:var(--verde-cocuyo);border-color:var(--verde-cocuyo);color:var(--tinta-sobre-verde);font-weight:600}
.studio-borrador button.pri:hover{background:var(--lima-clara)}
.studio-borrador button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.studio-borrador-listo{font-size:12px;color:var(--verde-cocuyo)}
.studio-borrador-nota{padding:8px 10px;border-radius:9px;background:var(--negro-abismo)}
.studio-borrador-lista{list-style:none;margin:12px 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,168px));gap:8px}
.studio-borrador-lista li{display:flex;flex-direction:column;gap:6px;min-width:0}
.studio-borrador-lista img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:var(--negro-abismo)}
.studio-borrador-lista button{font-size:12px;padding:6px 8px}
.studio-borrador-estado{display:grid;place-items:center;aspect-ratio:1;border:1px dashed var(--negro-borde);border-radius:9px;color:var(--gris-humo);font-size:12px}
@media(max-width:680px){.studio-borrador-lista{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-borrador button{min-height:44px}}


/* cocuyo-css: assets/css/estudio-prompt-ayuda.css */
/* Una entrada compacta, con las superficies negras y los tokens de Cocuyo. */
.prompt-help{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0;color:var(--blanco-luz);font:inherit}
.prompt-help[hidden],.prompt-help [hidden]{display:none!important}
.prompt-help button,.prompt-help-dialog button{font:inherit;font-size:12px;cursor:pointer}
.prompt-help-trigger,.prompt-help-undo{border:0;background:transparent;color:var(--gris-niebla);padding:5px 2px;text-align:left}
.prompt-help-trigger:hover,.prompt-help-undo:hover{color:var(--verde-cocuyo)}
.prompt-help-menu{position:absolute;z-index:30;top:100%;inset-inline-start:0;width:min(310px,calc(100vw - 48px));padding:10px;background:var(--negro-elevado);border:1px solid var(--negro-borde);border-radius:12px;box-shadow:0 8px 28px color-mix(in srgb,var(--negro-abismo) 70%,transparent)}
/* Colocado por estudio-prompt-ayuda.js respecto a la ventana (auditoría v338). */
.prompt-help-menu.prompt-help-menu--fija{position:fixed;z-index:1200;inset-inline-start:auto;overflow:auto;overscroll-behavior:contain}
.prompt-help-action{display:block;width:100%;padding:10px;border:0;border-radius:7px;background:transparent;text-align:left;color:var(--blanco-luz)}
.prompt-help-action:hover{background:var(--negro-borde)}
.prompt-help button:disabled,.prompt-help-dialog button:disabled{opacity:.48;cursor:default}
.prompt-help-refs{width:100%;margin:5px 0;padding:8px;border:1px solid var(--negro-borde);border-radius:7px;color:var(--blanco-luz);background:var(--negro-abismo);font:inherit;font-size:12px}
.prompt-help-note,.prompt-help-quota{font-size:11px;line-height:1.5;margin:8px 5px 2px;color:var(--gris-humo)}
.prompt-help-quota{color:var(--gris-niebla)}
.prompt-help-dialog{box-sizing:border-box;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--negro-borde);border-radius:16px;padding:22px;background:var(--negro-elevado);color:var(--blanco-luz);font-family:inherit}
.prompt-help-dialog::backdrop{background:color-mix(in srgb,var(--negro-abismo) 76%,transparent)}
.prompt-help-dialog h2{font-size:18px;line-height:1.3;margin:0 0 10px}
.prompt-help-notice{font-size:13px;line-height:1.5;color:var(--gris-niebla);margin:0 0 14px}
.prompt-help-label{display:block;font-size:12px;margin-bottom:6px;color:var(--gris-niebla)}
.prompt-help-output{box-sizing:border-box;width:100%;min-height:150px;max-height:45dvh;resize:vertical;border:1px solid var(--negro-borde);border-radius:10px;padding:12px;background:var(--negro-abismo);color:var(--blanco-luz);font:inherit;font-size:14px;line-height:1.5}
.prompt-help-original{margin-top:12px;font-size:12px;color:var(--gris-niebla)}
.prompt-help-original summary{cursor:pointer;padding:5px 0}
.prompt-help-original pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.5;max-height:150px;overflow:auto}
.prompt-help-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:20px}
.prompt-help-cancel,.prompt-help-apply{border:1px solid var(--negro-borde);border-radius:8px;padding:10px 14px;background:var(--negro-abismo);color:var(--blanco-luz)}
.prompt-help-apply{background:var(--verde-cocuyo);color:var(--negro-abismo);border-color:var(--verde-cocuyo)}
.prompt-help :focus-visible,.prompt-help-dialog :focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
@media(max-width:480px){.prompt-help-dialog{padding:18px}.prompt-help-actions button{min-height:42px}.prompt-help-trigger,.prompt-help-undo{min-height:32px}}


/* cocuyo-css: assets/css/estudio-referencias-kits.css */
.ckit-entry{display:inline-flex;align-items:center;min-height:44px;padding:5px 2px;border:0;border-radius:7px;background:transparent;color:var(--gris-niebla,#d2d2d2);font:550 12px var(--fuente,var(--font,sans-serif));cursor:pointer}
.ckit-dialog{box-sizing:border-box;width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:24px;margin:auto;border:1px solid var(--negro-borde,#262626);border-radius:18px;background:var(--negro-elevado,#121212);color:var(--blanco-luz,#f8fafc);font:400 14px/1.5 var(--fuente,var(--font,sans-serif));overflow:auto;overscroll-behavior:contain}
.ckit-dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}
.ckit-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 12px;border-bottom:1px solid var(--negro-borde,#262626)}
.ckit-dialog h2{font-size:18px;font-weight:650;letter-spacing:-.03em;margin:0}.ckit-dialog h3{font-size:19px;overflow-wrap:anywhere;margin:18px 0 6px}
.ckit-content{padding:16px 0 0}.ckit-content>p,.ckit-dialog form>p{font-size:12px;color:var(--gris-humo,#a1a1a1)}.ckit-dialog button{min-height:44px;padding:9px 12px;border:1px solid var(--negro-borde,#262626);border-radius:9px;background:var(--negro-abismo,#050505);color:inherit;font:inherit;cursor:pointer}.ckit-dialog header button{min-width:44px;font-size:24px;padding:0}
.ckit-dialog .ckit-primary{background:var(--verde-cocuyo,#aff33e);border-color:transparent;color:var(--negro-abismo,#050505);font-weight:650}.ckit-dialog button:disabled{opacity:.5;cursor:default}.ckit-dialog :is(button,input,select):focus-visible,.ckit-entry:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:3px}
.ckit-list{display:grid;gap:8px;margin-top:16px}.ckit-list>button{display:grid;text-align:left;gap:3px;overflow-wrap:anywhere}.ckit-list>button span{font-size:12px;color:var(--gris-humo,#a1a1a1)}.ckit-list strong{font-weight:600}.ckit-dialog form{display:grid;gap:10px;margin-top:16px}.ckit-dialog :is(input:not([type=radio]),select){box-sizing:border-box;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--negro-borde,#262626);border-radius:8px;background:var(--negro-abismo,#050505);color:inherit;font:inherit}.ckit-dialog fieldset{padding:12px;border:1px solid var(--negro-borde,#262626);border-radius:10px;margin:16px 0}.ckit-dialog fieldset label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px}.ckit-dialog input[type=radio]{accent-color:var(--verde-cocuyo,#aff33e)}.ckit-dialog ol{padding-left:22px;color:var(--gris-niebla,#d2d2d2);font-size:12px;max-height:180px;overflow:auto}.ckit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ckit-status{min-height:1.5em}.ckit-dialog .ckit-warning{color:var(--gris-niebla,#d2d2d2)}
@media(max-width:600px){.ckit-dialog{width:calc(100vw - 20px);max-height:94dvh;padding:18px}.ckit-dialog input:not([type=radio]),.ckit-dialog select{font-size:16px}}

.ckit-entry:hover{color:var(--verde-cocuyo,#aff33e)}
.ckit-dialog [hidden]{display:none!important}
/* 8-oct-2026: miniaturas del kit, «Aplicar las que caben» y Guardar sin referencias. */
.ckit-minis{display:flex;gap:6px;margin:10px 0 2px}
.ckit-minis>img,.ckit-minis>video,.ckit-minis>i{width:56px;height:56px;border-radius:9px;object-fit:cover;background:var(--negro-abismo,#050505);border:1px solid var(--negro-borde,#262626)}
.ckit-minis>i{display:block;background:linear-gradient(145deg,#aff33e22,#121212)}
.ckit-minis-cargando{min-height:58px}
.ckit-list>button .ckit-minis-lista{margin:0 0 4px}
.ckit-list>button .ckit-minis-lista>img,.ckit-list>button .ckit-minis-lista>video,.ckit-list>button .ckit-minis-lista>i{width:40px;height:40px;border-radius:7px}
.ckit-dialog .ckit-pista{margin:6px 0 0;font-size:12px;color:var(--gris-humo,#a1a1a1)}
.ckit-fuera{margin:10px 0;padding:10px 12px;border:1px solid color-mix(in srgb,#f59e0b 45%,transparent);border-radius:10px;font-size:12px;color:var(--gris-niebla,#d2d2d2)}
.ckit-fuera p{margin:0 0 4px}.ckit-fuera ul{margin:0;padding-left:18px}


/* cocuyo-css: assets/css/estudio-compositor-acciones.css */
/* Una línea discreta de funciones auxiliares; controles y resultados conservan su lugar. */
#studioComposerActions{grid-area:actions;grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;min-width:0;max-width:100%;margin:0;order:3}
#studioComposerActions[hidden]{display:none!important}
#studioComposerActions .prompt-help{margin:0;flex:0 1 auto;min-width:0}
#studioComposerActions :is(.prompt-help-trigger,.ckit-entry){white-space:nowrap;font-size:12px;min-height:32px;padding:4px 0}
body.studio-workbench #mesa #headicons .roundbtn[data-en-marcha]:not([data-en-marcha="0"]){flex-wrap:wrap;height:auto;gap:3px 8px}
/* contain:inline-size: la línea «N de M en marcha» no suma ancho propio, así la
   columna de Generar (max-content, abajo) no crece ni salta mientras se crea.
   El margen de -4px a cada lado compensa los 8px de hueco que añade esa línea;
   el botón la centra, así que sigue ocupando justo el ancho del contenido. */
body.studio-workbench #mesa #headicons .studio-generate-running:not([hidden]){flex-basis:100%;border:0;padding:0;margin:0 -4px;font-size:10px;line-height:1.2;text-align:center;contain:inline-size}
@media(min-width:1001px){
 /* Generar crece con su contenido (icono, texto y coste en cualquier idioma);
    168 px queda como mínimo. Antes la columna fija cortaba el coste por los bordes. */
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer{grid-template-columns:44px minmax(0,1fr) minmax(168px,max-content)}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer{grid-template-areas:"refs prompt prompt" "limit limit limit" "actions actions actions" "params params generate"}
 body.studio-workbench.modo-imagen:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="image"] #mesa .composer:has(.attchip){grid-template-areas:"refs refs refs" "prompt prompt prompt" "limit limit limit" "actions actions actions" "params params generate"}
}
@media(max-width:680px){#studioComposerActions{gap:0 14px}}
/* Objetivo táctil de 44 px en pantallas táctiles; el texto no cambia. */
@media(max-width:680px),(pointer:coarse){#studioComposerActions :is(.prompt-help-trigger,.ckit-entry){min-height:44px}}


/* cocuyo-css: assets/css/estudio-referencias-orden.css */
/* Controles de orden propios; no cambian el tamaño de las miniaturas. */
/* 9-oct-2026: el asa queda solo para teclado (flechas, Inicio/Fin y el panel
   «← Antes · Después →»); con el ratón o el dedo se arrastra la miniatura. */
#attrow .ref-orden-handle{position:absolute;z-index:4;top:3px;left:3px;display:grid;place-items:center;width:24px;height:24px;min-height:0;padding:5px;border:1px solid #ffffff24;border-radius:7px;background:#111e;color:#f5f5f5;opacity:0;pointer-events:none;user-select:none}
#attrow .ref-orden-handle:focus-visible{opacity:1}
#attrow .ref-orden-handle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;pointer-events:none}
#attrow .ref-orden-handle:focus-visible,#attrow .ref-orden-acciones button:focus-visible{outline:2px solid var(--studio-accent,#b8f36b);outline-offset:2px}
#attrow .ref-orden-handle.ref-orden-drag{cursor:grabbing;background:#26381c;color:#c7f78d}
#attrow .ref-orden-destino{outline:2px solid var(--studio-accent,#b8f36b);outline-offset:2px}
#attrow .ref-orden-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#attrow .ref-orden-acciones{flex:0 0 100%;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;padding:6px 0;color:var(--text,#f5f5f5);font-size:11px}
#attrow .ref-orden-acciones span{margin-right:4px}
#attrow .ref-orden-acciones button{min-height:40px;padding:7px 9px;border:1px solid var(--border2,#ffffff24);border-radius:8px;background:var(--surface2,#181818);color:inherit;font:inherit;cursor:pointer}
#attrow .ref-orden-acciones button:disabled{opacity:.4;cursor:default}
@media(pointer:coarse){#attrow .ref-orden-acciones button{min-height:44px}}
#attrow .attchip.ref-orden-drag{opacity:.4;cursor:grabbing}
#attrow .attchip.ref-orden-levantada{transform:scale(1.06);box-shadow:0 8px 22px #000a}
.ref-orden-fantasma{position:fixed;z-index:700;width:56px;height:56px;margin:-28px 0 0 -28px;border:2px solid var(--verde-cocuyo,#aff33e);border-radius:10px;overflow:hidden;background:#111;box-shadow:0 12px 30px #000c;pointer-events:none;transform:rotate(-4deg)}
.ref-orden-fantasma :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
body:has(.ref-orden-fantasma){cursor:grabbing}

/* Referencias como Higgsfield (8-oct-2026): subidas con % y ×, fichas que el
   modelo no admite, avisos con acción y selector numerado. */
#attrow .attchip.att-subiendo{display:grid;place-items:center;outline-offset:2px}
#attrow .attchip.att-subiendo:focus-visible{outline:2px solid var(--studio-accent,#b8f36b)}
#attrow .att-anillo{width:min(40px,64%);height:auto;aspect-ratio:1;transform:rotate(-90deg)}
#attrow .att-anillo circle{fill:none;stroke-width:3}
#attrow .att-anillo-pista{stroke:#ffffff1f}
#attrow .att-anillo-avance{stroke:var(--verde-cocuyo,#aff33e);stroke-linecap:round;transition:stroke-dasharray .2s ease}
#attrow .att-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:650;color:var(--text,#f5f5f5);font-variant-numeric:tabular-nums;pointer-events:none}
#attrow .att-cancelar{position:absolute;top:2px;right:2px;z-index:3;display:grid;place-items:center;width:20px;height:20px;min-height:0;padding:0;border:0;border-radius:50%;background:#000000b3;color:var(--text,#f5f5f5);cursor:pointer}
#attrow .att-cancelar .ic{width:12px;height:12px}
#attrow .att-cancelar:hover{background:#b91c1c}
#attrow .att-cancelar:focus-visible{outline:2px solid var(--studio-accent,#b8f36b);outline-offset:1px}
@media(pointer:coarse){#attrow .att-cancelar{width:28px;height:28px}}
#attrow .attchip.sobra img,#attrow .attchip.sobra video,#attrow .attchip.sobra .attico,.ref-frame-slot.sobra img{opacity:.38;filter:grayscale(.7)}
#attrow .attchip.sobra{border-color:color-mix(in srgb,#f59e0b 55%,transparent)}
/* En dos líneas si hace falta: en una sola, «No admitida» se cortaba («No admi…») en las miniaturas de 54 px (auditoría v338). */
.att-sobra{position:absolute;left:3px;right:3px;bottom:3px;z-index:2;padding:2px 2px;border-radius:6px;background:#000000c7;color:#fbbf24;font-size:9px;font-weight:650;letter-spacing:-.01em;line-height:1.15;text-align:center;white-space:normal;overflow-wrap:anywhere;hyphens:auto;overflow:hidden;pointer-events:none}
.ref-frame-slot.sobra{position:relative}
.ref-frame-slot.sobra .att-sobra{bottom:auto;top:4px}
/* Aviso de referencias con acción («Ajustar a …», «Deshacer»). */
#genstatus .genstatus-acciones{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:auto}
#genstatus .genstatus-accion{min-height:34px;padding:6px 12px;border:1px solid var(--verde-cocuyo,#aff33e);border-radius:999px;background:transparent;color:var(--verde-cocuyo,#aff33e);font:600 12.5px var(--fuente,var(--font,sans-serif));white-space:nowrap;cursor:pointer}
#genstatus .genstatus-accion:hover{background:var(--verde-cocuyo,#aff33e);color:var(--negro-abismo,#050505)}
#genstatus .genstatus-accion:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
@media(pointer:coarse){#genstatus .genstatus-accion{min-height:44px}}
/* Audio: las referencias de Imagen/Video se guardan, no cuentan aquí. */
.ref-audio-nota{margin:6px 2px 0;font-size:12px;line-height:1.45;color:var(--dim,#a1a1a1)}
.ref-audio-nota[hidden]{display:none}
/* Selector «Tu biblioteca»: número de orden y aviso propio. */
.bibpieza .bibnum{font-size:12px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
.bibpieza.bibno[aria-disabled="true"]{cursor:not-allowed}
.bibpieza.bibno[aria-disabled="true"]:hover{transform:none}
.bibaviso{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.4;color:#fbbf24}
.bibaviso[hidden]{display:none}
.bibpieza.bibno .bibno-txt{left:7px;right:auto;max-width:calc(100% - 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bibpieza.bibno[aria-disabled="true"] .bibmarca{display:none}

/* Soltar en toda la zona de crear (9-oct-2026, estudio-referencias-soltar.js):
   contorno discontinuo sobre lienzo y compositor, rótulo en el centro del
   lienzo y compositor con contorno lima de 2 px. No recibe eventos: los
   huecos de debajo se resaltan y reciben lo soltado. */
.ref-soltar-capa{position:fixed;z-index:460;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--verde-cocuyo,#aff33e) 70%,transparent);border-radius:18px;background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 4%,transparent);pointer-events:none}
.ref-soltar-capa[hidden]{display:none}
.ref-soltar-aviso{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;max-width:min(420px,calc(100% - 32px));padding:18px 24px;border:1px solid color-mix(in srgb,var(--verde-cocuyo,#aff33e) 45%,transparent);border-radius:16px;background:var(--negro-abismo,#050505);box-shadow:0 18px 50px #000b;text-align:center;color:var(--text,#f5f5f5)}
.ref-soltar-aviso svg{width:26px;height:26px;fill:none;stroke:var(--verde-cocuyo,#aff33e);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ref-soltar-aviso b{font:650 15px/1.35 var(--font,sans-serif);color:var(--verde-cocuyo,#aff33e)}
.ref-soltar-aviso span{font:500 12px/1.45 var(--font,sans-serif);color:var(--dim,#a1a1a1)}
.ref-soltar-aviso span:empty{display:none}
#mesa .composer.ref-soltar-zona{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
/* Huecos Inicio/Final: destino resaltado, ⇄ entre los dos y «Pasar a Primer fotograma». */
#mesa #refgrid .ref-frame-slot.ref-frame-destino :is(.ref-add-compact,.ref-frame-ver){border:2px solid var(--verde-cocuyo,#aff33e)!important;background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 10%,var(--surface2,#181818))!important}
#mesa #refgrid .ref-frame-slots{align-items:center}
#mesa #refgrid .ref-frame-slots>.ref-frame-slot{flex:1 1 0;min-width:0}
/* 10-oct-2026: el ⇄ flota sobre el hueco entre los dos fotogramas y no les
   quita ancho: «Primer fotograma» y «Último fotograma» conservan el tamaño de
   antes y su nombre en una línea (a 1001–1080 px se partía en dos y quedaba a
   la izquierda). El orden de teclado sigue siendo Primer · ⇄ · Último. */
#mesa #refgrid .ref-frame-slots:has(>.ref-frame-intercambiar){position:relative}
#mesa #refgrid .ref-frame-slots>.ref-frame-intercambiar{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--surface,#111)}
/* Auditoría v338: con un fotograma puesto, su ✕ (en la esquina, a 5 px del borde)
   quedaba bajo el ⇄ y un clic en el borde del ⇄ quitaba el fotograma. Con alguna
   ✕ a la vista, el hueco se abre lo justo para que el ⇄ no toque ninguna (el
   nombre de un fotograma puesto ya va en una línea, con «…» si no cabe). */
#mesa #refgrid .ref-frame-slots:has(>.ref-frame-intercambiar):has(.ref-frame-quitar){gap:26px}
@media(pointer:coarse){#mesa #refgrid .ref-frame-slots:has(>.ref-frame-intercambiar):has(.ref-frame-quitar){gap:34px}}
#mesa #refgrid .ref-frame-slot .ref-add-compact .ref-add-label{text-align:center}
#mesa #refgrid .ref-frame-intercambiar{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border:1px solid var(--border2,#ffffff24);border-radius:50%;background:var(--surface2,#181818);color:var(--text,#f5f5f5);cursor:pointer}
#mesa #refgrid .ref-frame-intercambiar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mesa #refgrid .ref-frame-intercambiar:not(:disabled):hover{border-color:var(--verde-cocuyo,#aff33e);color:var(--verde-cocuyo,#aff33e)}
#mesa #refgrid .ref-frame-intercambiar:disabled{color:color-mix(in srgb,var(--text,#f5f5f5) 35%,transparent);cursor:default}
#mesa #refgrid .ref-frame-intercambiar:focus-visible,#mesa #refgrid .ref-frame-pasar:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
#mesa #refgrid .ref-frame-pasar{flex:1 0 100%;justify-self:start;margin:2px 0 0;padding:6px 0;border:0;background:none;color:var(--verde-cocuyo,#aff33e);font:600 12px/1.4 var(--font,sans-serif);text-align:left;cursor:pointer}
#mesa #refgrid .ref-frame-pasar:hover{text-decoration:underline}
#mesa #refgrid button.ref-frame-ver[draggable="true"]{cursor:grab}
@media(pointer:coarse){#mesa #refgrid .ref-frame-intercambiar{width:36px;height:36px}#mesa #refgrid .ref-frame-pasar{min-height:44px}}
/* «Tu biblioteca»: límites del modelo en la cabecera, «Subir» primero y
   casilla a la vista al pasar el ratón (como el selector de Higgsfield). */
.bibtitulo{display:grid;gap:2px;min-width:0}
/* 9-oct-2026: los límites se leen enteros (hasta dos líneas, sin «…») y con
   contraste AA sobre el fondo del selector (#a1a1a1 sobre #121212: 7,4:1). */
.biblimites{font-size:11.5px;font-weight:500;line-height:1.35;color:#a1a1a1;white-space:normal;overflow-wrap:anywhere;max-width:min(560px,100%)}
.bibsubir{position:relative;aspect-ratio:1/1;align-self:start;min-width:0}
.bibsubir-boton{display:grid;place-content:center;justify-items:center;gap:6px;width:100%;height:100%;padding:10px;border:1px dashed var(--border2,#ffffff24);border-radius:13px;background:var(--surface,#111);color:var(--text,#f5f5f5);font-family:inherit;text-align:center;cursor:pointer;transition:.14s}
.bibsubir-boton .ic{width:24px;height:24px;color:var(--verde-cocuyo,#aff33e)}
.bibsubir-boton b{font-size:12.5px;font-weight:600;line-height:1.3}
.bibsubir-boton span{font-size:11px;line-height:1.35;color:#a1a1a1}
.bibsubir-boton:hover{border-color:var(--verde-cocuyo,#aff33e);background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 6%,var(--surface,#111))}
.bibsubir-boton:focus-visible{outline:2px solid var(--verde-cocuyo,#aff33e);outline-offset:2px}
.bibcaja.bib-soltar{border-color:var(--verde-cocuyo,#aff33e);box-shadow:0 0 0 2px var(--verde-cocuyo,#aff33e),0 34px 90px -28px #000d}
.bibpieza:focus-visible .bibmarca{opacity:1}
@media(hover:none){.bibmarca{opacity:1}}
@media(max-width:640px){.biblimites{max-width:none;white-space:normal}}
#bibmodal .bibcuenta{color:#a1a1a1}
#bibmodal .bibtitulo{flex:1 1 auto}
/* Avisos de error de referencias (9-oct-2026): en rojo y con icono, como en el
   móvil; los avisos con «Deshacer» o de progreso siguen neutros. */
body.studio-workbench #genstatus:is([data-aviso-refs="rechazo"],[data-aviso-refs="validacion"]){border-color:color-mix(in srgb,#ff5a52 45%,transparent)!important;background:color-mix(in srgb,#ff5a52 10%,#141414)!important;color:#ffc9c4!important}
body.studio-workbench #genstatus:is([data-aviso-refs="rechazo"],[data-aviso-refs="validacion"])::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#ff5a52;color:#140605;font:800 12px/18px var(--font,sans-serif);text-align:center}


/* cocuyo-css: assets/css/estudio-saldo-panel.css */
/* Saldo y utilidades discretas; el detalle sólo ocupa espacio al abrirse. */
body.studio-workbench .studio-public-nav .st-actions{gap:10px;flex-shrink:0}
@media(min-width:901px){body.studio-workbench.studio-simple .studio-public-nav{gap:14px;padding-inline:22px}body.studio-workbench .studio-public-nav .st-nav{flex-shrink:0}body.studio-workbench .studio-public-nav:has(.st-workspace-nav:not([hidden])) .st-youtube{display:none}}
.st-workspace-nav{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:12px;border-left:1px solid #ffffff12}
.st-workspace-nav[hidden]{display:none!important}
.st-workspace-nav button[aria-current="page"]{color:var(--lima,#c4f568);background:#b7f3420a}
.st-workspace-nav button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#acb3a4;font:500 12px var(--font,sans-serif);cursor:pointer}
.st-workspace-nav button:hover{background:#ffffff09;color:#f3f6ef}.st-workspace-nav button:focus-visible{outline:2px solid var(--lima,#c4f568);outline-offset:2px}
.st-workspace-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:901px) and (max-width:1180px){.st-workspace-nav button span{display:none}.st-workspace-nav{flex:none;margin-left:0;padding-left:6px}.st-workspace-nav button{width:40px;padding:0}body.studio-workbench .studio-public-nav .st-actions{gap:7px}}
@media(min-width:901px) and (max-width:1280px){body.studio-workbench .studio-public-nav .cn-pricing-badge{display:none}body.studio-workbench.studio-simple .studio-public-nav{gap:10px;padding-inline:16px}}
@media(min-width:901px) and (max-width:1100px){body.studio-workbench .studio-public-nav .studio-session-switch{display:none}}
@media(max-width:900px){.st-workspace-nav{display:none}}
body.studio-workbench.studio-simple .studio-public-nav #btnmascreditos{height:40px;min-height:40px;border-radius:10px;background:#191b19;border-color:#30342e;gap:8px;padding-inline:12px}
body.studio-workbench #btnmascreditos[aria-expanded=true]{border-color:#677b45;background:#22281c}
body.studio-workbench .studio-public-nav :is(.st-help,.st-library){display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border:1px solid #2b3029;border-radius:10px;background:#151815;color:#cbd0c6;cursor:pointer}
body.studio-workbench .studio-public-nav :is(.st-help,.st-library):hover{color:#f4f7f1;background:#23281e;border-color:#4b5940}
body.studio-workbench .studio-public-nav :is(.st-help,.st-library):focus-visible{outline:2px solid var(--lima,#c4f568);outline-offset:3px}
body.studio-workbench .studio-public-nav :is(.st-help,.st-library) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.studio-wallet-panel{position:fixed;z-index:9500;box-sizing:border-box;width:min(352px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;background:#141713;border:1px solid #333a2d;border-radius:18px;color:#f3f5ef;box-shadow:0 20px 70px #0009,0 1px 0 #ffffff08 inset;font-family:var(--font,sans-serif);animation:sw-enter .14s ease-out}
.studio-wallet-panel[hidden],.studio-wallet-panel [hidden]{display:none!important}
.studio-wallet-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.studio-wallet-panel h2{margin:0;font-size:13px;font-weight:500;color:#b0b8a7}
.studio-wallet-panel button{font:inherit;cursor:pointer;min-height:44px;border:1px solid #353d2e;background:#1c2119;color:#e8eddf;border-radius:10px}
.studio-wallet-panel button:disabled{cursor:wait;opacity:.6}
.studio-wallet-panel button:hover{background:#293220;border-color:#596943}
.studio-wallet-panel button:focus-visible{outline:2px solid var(--lima,#c4f568);outline-offset:3px}
.studio-wallet-panel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.studio-wallet-panel [data-wallet-close]{display:grid;place-items:center;width:44px;margin:-10px -10px -10px 0;border-color:transparent;background:transparent;color:#a7afa0}
.sw-balance{display:flex;align-items:baseline;gap:9px}.sw-balance strong{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1.2;font-variant-numeric:tabular-nums}.sw-balance>span{font-size:12px;color:#9ba692}
.sw-note{font-size:12px;color:#aebca0;margin:10px 0 20px;line-height:1.5}.sw-status{font-size:12px;line-height:1.5;color:#b5bdad;margin:0 0 14px}.sw-status:empty{display:none}
.studio-wallet-panel:is([data-credit-state=low],[data-credit-state=empty]) .sw-balance strong,.studio-wallet-panel:is([data-credit-state=low],[data-credit-state=empty]) .sw-status{color:#ff929a}
.sw-actions{display:flex;gap:8px}.sw-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:0 10px;font-size:12px;font-weight:550}
.sw-actions .sw-topup{background:var(--lima,#c4f568);border-color:var(--lima,#c4f568);color:#152008}.sw-actions .sw-topup:hover{background:#d4fc88;border-color:#d4fc88}
.sw-retry{width:100%;margin-top:9px;font-size:12px!important}
.sw-history{margin-top:20px;padding-top:16px;border-top:1px solid #2b3225}.sw-history h3{font-size:12px;font-weight:550;margin:0 0 12px}.sw-history p{font-size:12px;color:#a8b29e;line-height:1.5}.sw-history p:empty{display:none}.sw-history ol{list-style:none;margin:0;padding:0;max-height:250px;overflow:auto;overscroll-behavior:contain}.sw-history li{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 2px;border-bottom:1px solid #252c20;font-size:12px}.sw-history li:last-child{border-bottom:0}.sw-history li span{display:grid;gap:4px}.sw-history li b{font-weight:500}.sw-history small{font-size:11px;color:#9aa58e}.sw-history strong{font-weight:550;font-variant-numeric:tabular-nums}.sw-history .sw-positive{color:#c4f568}
@keyframes sw-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:900px){.studio-wallet-panel{top:auto!important;right:12px!important;left:12px;bottom:calc(var(--sm-bottom,76px) + env(safe-area-inset-bottom,0px) + 12px);width:auto;max-height:calc(100dvh - var(--st-top,64px) - var(--sm-bottom,76px) - env(safe-area-inset-bottom,0px) - 24px)}body.studio-workbench.studio-simple .studio-public-nav .st-library{display:none!important}}
@media(prefers-reduced-motion:reduce){.studio-wallet-panel{animation:none}}


/* cocuyo-css: assets/css/estudio-proyectos.css */
.cpro-dialog{box-sizing:border-box;width:min(1120px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:30px;border:1px solid #292a2a;border-radius:18px;background:#0c0d0d;color:#eee;font:14px/1.5 var(--font,var(--fuente,sans-serif));box-shadow:0 24px 100px #0009;overflow:auto;overscroll-behavior:contain}
.cpro-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.cpro-dialog *{box-sizing:border-box}.cpro-dialog button,.cpro-dialog input,.cpro-dialog select{font:inherit;color:inherit}.cpro-dialog button{cursor:pointer;min-height:44px;border:1px solid #333;background:#181919;border-radius:8px;padding:9px 14px}.cpro-dialog button:disabled{opacity:.5;cursor:wait}.cpro-dialog :is(button,input,select):focus-visible{outline:2px solid var(--lima,#c8f34a);outline-offset:3px}.cpro-dialog input,.cpro-dialog select{min-height:44px;border:1px solid #333;background:#111212;border-radius:8px;padding:10px 13px}.cpro-dialog input{width:100%;min-width:0}.cpro-dialog .cpro-primary{background:var(--lima,#c8f34a);border-color:transparent;color:#10120b;font-weight:600}.cpro-heading{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.cpro-heading p{font-size:10px;letter-spacing:.13em;color:#aaa;margin:0 0 8px}.cpro-heading h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.025em;margin:0 0 10px;overflow-wrap:anywhere}.cpro-heading span{color:#a7aaa8;font-size:13px}.cpro-heading>button{font-size:17px;min-width:44px;padding:8px}.cpro-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:24px}.cpro-search{flex:1;min-width:180px}.cpro-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cpro-dialog .cpro-card{padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#111212;border-color:#252626}.cpro-card:hover{border-color:#626560}.cpro-folder{width:100%;height:112px;display:grid;place-items:center;background:linear-gradient(125deg,#222522,#151715);color:#8e988a}.cpro-folder svg{width:43px;height:43px}.cpro-card>b{padding:14px 14px 0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:550}.cpro-card>small{padding:2px 14px 16px;color:#969b96}.cpro-add{padding:0 14px 14px;color:var(--lima,#c8f34a);font-size:12px}.cpro-empty{display:grid;justify-items:center;text-align:center;gap:12px;min-height:260px;align-content:center;color:#9ca39c;padding:24px}.cpro-empty>svg{width:46px;height:46px;color:#8d9b87}.cpro-empty h2{margin:0;color:#dedfdd;font-size:20px;font-weight:500}.cpro-empty p{margin:0;max-width:430px;font-size:13px}.cpro-status,.cpro-note{font-size:12px;color:#aeb9a7}.cpro-error{padding:14px 16px;border:1px solid #6a4939;border-radius:10px;margin-bottom:16px;color:#e8bfa8}.cpro-error p{margin:0 0 10px}.cpro-form{display:flex;align-items:end;gap:10px;padding:16px;background:#151716;border:1px solid #333;border-radius:10px;margin-bottom:18px}.cpro-form label{flex:1;display:grid;gap:6px;font-size:12px}.cpro-files{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cpro-file{overflow:hidden;border:1px solid #292a29;border-radius:10px;background:#121313}.cpro-dialog .cpro-preview{display:grid;place-items:center;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:0;background:#1b1e1b}.cpro-preview img{width:100%;height:100%;object-fit:cover}.cpro-file-icon{font-size:30px;color:#9ca797}.cpro-file>div{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px}.cpro-file>div>span{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cpro-file>div>button{flex:none;font-size:11px;padding:5px 9px;border:0;background:transparent;color:#b4b9b1}.cpro-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cpro-dialog [hidden]{display:none!important}
@media(max-width:900px){.cpro-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:24px}.cpro-grid,.cpro-files{grid-template-columns:repeat(3,minmax(0,1fr))}.cpro-dialog input,.cpro-dialog select{font-size:16px}}
@media(max-width:600px){.cpro-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0;padding:max(22px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}.cpro-heading{gap:12px;margin-bottom:24px}.cpro-heading span{font-size:12px}.cpro-toolbar{gap:8px}.cpro-search{flex-basis:100%}.cpro-toolbar label:has(select){flex:1}.cpro-toolbar select{width:100%}.cpro-grid,.cpro-files{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cpro-folder{height:100px}.cpro-form{flex-wrap:wrap;padding:12px}.cpro-form label{flex-basis:100%}.cpro-form button{flex:1}.cpro-file>div{flex-wrap:wrap}.cpro-file>div>span{width:100%}.cpro-file>div>button{margin-left:auto}.cpro-empty{padding:24px 8px;min-height:230px}}
.cpro-dialog button>svg{width:18px;height:18px;flex:none;vertical-align:middle}.cpro-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.cpro-file-icon svg{width:38px;height:38px}.cpro-form>p{flex:1;font-size:13px;margin:0;color:#d5c1b4}
.cpro-heading h1,.cpro-empty h2{font-family:inherit;font-weight:500}.cpro-updated{display:block;margin-top:3px;color:#737b73;font-size:10px}
/* Proyecto seleccionado (24-sep-2026): su nombre sustituye a «Proyectos» en la cabecera y la barra móvil. */
#studioProjectsButton .cpro-actual,[data-sm-projects] .cpro-actual{display:none}
#studioProjectsButton.cpro-con-proyecto>span:not(.cpro-actual),[data-sm-projects].cpro-con-proyecto>span:not(.cpro-actual){display:none!important}
#studioProjectsButton.cpro-con-proyecto .cpro-actual{display:inline-block;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle;color:var(--verde-cocuyo,#AFF33E);font-weight:600}
#studioProjectsButton.cpro-con-proyecto>svg{color:var(--verde-cocuyo,#AFF33E)}
[data-sm-projects].cpro-con-proyecto .cpro-actual{display:block;max-width:74px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--verde-cocuyo,#AFF33E)}
[data-sm-projects].cpro-con-proyecto>svg{color:var(--verde-cocuyo,#AFF33E)}
/* Vista de un proyecto: activo, filtros, más archivos y videos con primer fotograma. */
.cpro-folder{position:relative}.cpro-activo-badge{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:999px;background:var(--verde-cocuyo,#AFF33E);color:#10120b;font-size:11px;font-weight:700}
.cpro-dialog .cpro-card-activo{border-color:#4d6b25}
.cpro-filtros{display:flex;gap:6px;margin:-8px 0 18px}.cpro-dialog .cpro-filtros button{min-height:36px;padding:6px 14px;border-radius:999px;font-size:12.5px}.cpro-dialog .cpro-filtros button[aria-pressed="true"]{background:#e9ece6;color:#10120b;border-color:transparent;font-weight:600}
.cpro-more{display:flex;justify-content:center;margin-top:18px}
.cpro-dialog .cpro-preview{position:relative;overflow:hidden}.cpro-preview video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cpro-play{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#000a;color:#fff}.cpro-play svg{width:15px;height:15px}
.cpro-origen{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:999px;background:#000b;color:#dfe3dc;font-size:10.5px}
.cpro-empty .cpro-primary{display:inline-flex;align-items:center;gap:7px}
@media(max-width:600px){.cpro-filtros{margin:-4px 0 14px}}
.cpro-dialog .cpro-salir{margin-left:auto;background:transparent;border-color:transparent;color:#aeb4aa}.cpro-dialog .cpro-salir:hover{color:#e7eae4;border-color:#333}
/* Creaciones por proyecto (24-sep-2026). Colores solo con variables de
   tokens.css (las que crear.html define); medidas en px como el resto del Estudio.
   Conmutador «Este proyecto | Todas mis creaciones», vacío del proyecto con sus
   tres salidas, «Ver más», aviso mientras se eligen obras y bienvenida del lienzo. */
#pg-library .bv-ambito{display:flex;gap:4px;width:max-content;max-width:100%;margin:-6px 0 20px;padding:4px;border:1px solid var(--negro-borde);border-radius:12px;background:var(--negro-elevado)}
#pg-library .bv-ambito button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:0;border-radius:9px;background:transparent;color:var(--gris-niebla);font:600 14px/1.2 var(--fuente);cursor:pointer;transition:background .15s,color .15s}
#pg-library .bv-ambito button:hover{color:var(--blanco-luz);background:var(--pizarra)}
#pg-library .bv-ambito button[aria-pressed="true"]{background:var(--acento-fondo);color:var(--verde-cocuyo)}
#pg-library .bv-ambito button:focus-visible,#pg-library .bv-vacio-acciones button:focus-visible,#pg-library .bv-mas button:focus-visible,#pg-library .bv-anadir button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
#pg-library .bv-ambito button span{color:var(--gris-humo);font-variant-numeric:tabular-nums;font-weight:500}
#pg-library .bv-ambito .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pg-library .bv-vacio[data-bv-proyecto-vacio]{max-width:620px}
#pg-library .bv-vacio-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
#pg-library .bv-vacio-acciones button{margin:0;min-height:44px}
#pg-library .bv-mas{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0 32px;text-align:center}
#pg-library .bv-mas p{margin:0;color:var(--gris-niebla);font-size:14px}
#pg-library .bv-mas button{min-height:44px}
#pg-library .bv-anadir{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--verde-profundo);border-radius:12px;background:var(--acento-fondo);color:var(--blanco-luz)}
#pg-library .bv-anadir p{margin:0;font-size:14px;line-height:1.45}
#pg-library .bv-anadir button{flex:none;min-height:44px;padding:8px 16px}
/* Aviso de «Añadir desde mis creaciones»: recibe el foco al abrirse (tabindex -1). */
#pg-library .bv-anadir:focus{outline:none}
#pg-library .bv-anadir:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
/* Nombres de proyecto muy largos (sin espacios) no se salen de la pantalla. */
#pg-library .studio-assets-heading>div,.cpro-dialog .cpro-heading>div{min-width:0}
#pg-library .studio-assets-heading h1,#pg-library .bv-vacio h3,#pg-library .bv-anadir p,#pg-library .bv-vacio p{overflow-wrap:anywhere}
/* Lienzo de resultados dentro de un proyecto: la bienvenida lo nombra. */
body.studio-workbench .studio-proyecto-espera p{max-width:32rem}
body.studio-workbench .studio-proyecto-espera .studio-proyecto-espera-titulo{color:var(--blanco-luz);font-weight:600;font-size:17px;overflow-wrap:anywhere}
body.studio-workbench .studio-proyecto-espera .studio-proyecto-ver{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:9px 16px;border:1px solid var(--negro-borde);border-radius:10px;background:var(--negro-elevado);color:var(--blanco-luz);font:500 14px/1.3 var(--fuente);cursor:pointer}
body.studio-workbench .studio-proyecto-espera .studio-proyecto-ver:hover{background:var(--pizarra)}
body.studio-workbench .studio-proyecto-espera .studio-proyecto-ver:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
/* Ventana de proyectos: si fallan las vistas previas, aviso con «Reintentar». */
.cpro-dialog .cpro-vistas-error>svg{color:var(--peligro)}
.cpro-dialog .cpro-more.cpro-vistas-error{flex-direction:column;align-items:center;gap:8px}
.cpro-dialog .cpro-more.cpro-vistas-error p{margin:0;color:var(--gris-niebla);font-size:14px}
/* En táctil (hasta 900 px) el conmutador tiene la altura mínima cómoda de 44 px. */
@media(max-width:900px){#pg-library .bv-ambito button{min-height:44px}}
@media(max-width:600px){
 #pg-library .bv-ambito{width:100%}
 #pg-library .bv-ambito button{flex:1;min-width:0;padding:8px 10px;font-size:13px}
 #pg-library .bv-vacio-acciones{flex-direction:column;align-items:stretch}
 #pg-library .bv-anadir{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){#pg-library .bv-ambito button{transition:none}}
/* Portadas privadas: hasta cuatro obras recientes, sin reproducir medios. */
.cpro-dialog .cpro-card{border-radius:12px;transition:border-color .18s,background .18s}
.cpro-dialog .cpro-card:hover{border-color:var(--gris-humo);background:var(--negro-elevado)}
.cpro-cover{position:relative;display:block;width:100%;aspect-ratio:8/5;overflow:hidden;border-bottom:1px solid var(--negro-borde);background:var(--negro-elevado)}
.cpro-cover>[data-cpro-cover],.cpro-mosaic,.cpro-cover-empty{display:grid;width:100%;height:100%;min-width:0;min-height:0}
.cpro-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:var(--negro-abismo)}
.cpro-mosaic-1{grid-template-columns:1fr}
.cpro-mosaic-3,.cpro-mosaic-4{grid-template-rows:repeat(2,minmax(0,1fr))}
.cpro-mosaic-3>.cpro-cover-cell:first-child{grid-row:span 2}
.cpro-cover-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;color:var(--gris-humo);background:var(--negro-elevado)}
.cpro-cover-cell>svg{width:28px;height:28px;opacity:.7}
.cpro-cover-cell>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.cpro-card:hover .cpro-cover-cell>img{transform:scale(1.025)}
.cpro-cover-empty{position:relative;place-items:center;background:radial-gradient(ellipse at 50% 115%,var(--acento-fondo),transparent 75%);color:var(--gris-humo)}
.cpro-cover-empty>svg{width:42px;height:42px;stroke-width:1.25;opacity:.65}
.cpro-cover-audio{background:radial-gradient(ellipse at center,var(--acento-fondo),var(--negro-elevado) 75%);color:var(--verde-cocuyo)}
.cpro-cover-video{background:linear-gradient(135deg,var(--negro-elevado),var(--pizarra));color:var(--gris-niebla)}
.cpro-mosaic-1>.cpro-cover-cell>svg{width:42px;height:42px;stroke-width:1.4}
.cpro-cover .cpro-activo-badge{display:inline-flex;align-items:center;gap:5px;background:var(--negro-abismo);color:var(--verde-cocuyo);border:1px solid var(--negro-borde);box-shadow:0 2px 8px var(--negro-abismo);font-weight:600;font-size:10px;padding:3px 8px}
.cpro-cover .cpro-activo-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.cpro-card>b{font-size:14px;line-height:1.4}
.cpro-card>small{font-size:12px;line-height:1.5}
.cpro-card .cpro-updated{color:var(--gris-humo)}
.cpro-new-short{display:none}
@media(max-width:600px){.cpro-cover{aspect-ratio:4/3}.cpro-card>b{padding:12px 11px 0;font-size:13px}.cpro-card>small{padding:3px 11px 12px}.cpro-cover .cpro-activo-badge{top:7px;left:7px}.cpro-mosaic{gap:2px}.cpro-new-full{display:none}.cpro-new-short{display:inline}.cpro-toolbar label:has(select){min-width:100px}.cpro-toolbar>button{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.cpro-dialog .cpro-card,.cpro-cover-cell>img{transition:none}.cpro-card:hover .cpro-cover-cell>img{transform:none}}


/* cocuyo-css: assets/css/estudio-apps.css */
/* =====================================================================
   COCUYO — Apps del Estudio y orden de la navegación (24-sep-2026)
   Colores y superficies desde tokens.css (con respaldo por si faltara).
   ===================================================================== */

/* ---------------------------- Botón Apps ----------------------------- */
.st-nav>.st-apps{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0;font-size:14px;font-weight:550;color:var(--gris-niebla);position:relative}
.st-nav>.st-apps:hover{color:var(--blanco-luz)}
.st-nav>.st-apps:focus-visible{outline:2px solid var(--verde-cocuyo,#AFF33E);outline-offset:4px;border-radius:5px}
.st-nav>.st-apps .ic{width:18px;height:18px;color:var(--verde-cocuyo,#AFF33E)}
@media(max-width:900px){.st-nav>.st-apps{display:none!important}}
.sm-nav .sm-apps{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sm-nav .sm-apps .ic{color:var(--verde-cocuyo,#AFF33E)}

/* ------------------------------ Diálogo ------------------------------ */
/* Rediseño 30-sep-2026 (dueño: «todo pequeñito, organizado, a pantalla
   completa como el selector de modelos»). Hoja a pantalla completa:
   cabecera con título, buscador y cerrar; categorías a la izquierda
   (pestañas horizontales en el móvil) y una rejilla densa de tarjetas
   pequeñas. Acabado Familia: tokens --f-*, Geist 450–550, casi sin bordes;
   lima solo para lo activo. #cocuyoApps gana a las reglas antiguas del
   catálogo (plantillas-estudio.css) sin !important. */
#cocuyoApps.capps{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;
  background:var(--f-fondo,var(--negro-abismo));color:var(--f-texto,var(--blanco-luz));font-family:var(--font,inherit);font-weight:400;overflow:hidden;box-shadow:none}
#cocuyoApps.capps[open]{display:block;animation:capps-entra .2s var(--curva-suave,ease-out)}
#cocuyoApps.capps::backdrop{background:var(--f-fondo,var(--negro-abismo))}
@keyframes capps-entra{from{opacity:0;transform:scale(.992)}to{opacity:1;transform:none}}
#cocuyoApps .ic{width:16px;height:16px;flex:0 0 16px;stroke-width:1.5}
#cocuyoApps :is(button,a,input):focus-visible{outline:2px solid var(--f-lima,var(--verde-cocuyo));outline-offset:2px}
#cocuyoApps .capps-shell{display:grid;grid-template-columns:224px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;max-width:1680px;margin:0 auto}

/* Cabecera: título · buscador · cerrar (como el selector de modelos). */
#cocuyoApps .capps-head{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:14px 20px;box-shadow:0 1px 0 var(--f-linea)}
#cocuyoApps .capps-titulo{flex:0 0 204px;min-width:0}
#cocuyoApps .capps-titulo h2{margin:0;font-size:18px;font-weight:550;line-height:1.2;letter-spacing:-.02em;color:var(--f-texto)}
#cocuyoApps .capps-titulo p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#cocuyoApps .capps-search{flex:1 1 auto;max-width:640px;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border:0;border-radius:12px;background:var(--f-sup-2);box-shadow:none;color:var(--f-texto-3);transition:background var(--f-rapido,.16s)}
#cocuyoApps .capps-search:focus-within{background:var(--f-sup-3);box-shadow:0 0 0 1px var(--f-linea-fuerte);outline:0}
#cocuyoApps .capps-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--f-texto);font:inherit;font-size:14px;outline:none}
#cocuyoApps .capps-search input::placeholder{color:var(--f-texto-3)}
#cocuyoApps .capps-search input:focus-visible{outline:none}
#cocuyoApps .capps-close{margin-left:auto;display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:12px;background:transparent;color:var(--f-texto-2);cursor:pointer}
#cocuyoApps .capps-close:hover{background:var(--f-sup-2);color:var(--f-texto)}
#cocuyoApps .capps-close .ic{width:18px;height:18px;flex-basis:18px}

/* Categorías: lista lateral con icono fino y conteo. */
#cocuyoApps .capps-side{min-height:0;overflow:auto;padding:14px 12px 24px 16px;scrollbar-width:none}
#cocuyoApps .capps-side::-webkit-scrollbar{display:none}
#cocuyoApps .capps-chips{display:grid;gap:1px;margin:0;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
#cocuyoApps .capps-chips button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--f-texto-2);font:inherit;font-size:13.5px;font-weight:450;letter-spacing:-.005em;text-align:left;white-space:nowrap;cursor:pointer;transition:background var(--f-rapido,.16s),color var(--f-rapido,.16s)}
#cocuyoApps .capps-chips button:hover{background:var(--f-sup-1);color:var(--f-texto)}
#cocuyoApps .capps-chips button[aria-pressed="true"]{background:var(--f-sup-2);color:var(--f-texto);font-weight:500}
#cocuyoApps .capps-chips button .ic{color:var(--f-texto-3)}
#cocuyoApps .capps-chips button[aria-pressed="true"] .ic{color:var(--f-lima)}
#cocuyoApps .capps-chips button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#cocuyoApps .capps-chips button small{margin-left:auto;padding:0;background:none;font-size:11px;font-weight:450;font-variant-numeric:tabular-nums;color:var(--f-texto-3)}

/* Panel de resultados: desplazamiento propio. */
#cocuyoApps .capps-main{min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 28px 48px 20px;scrollbar-width:thin;scrollbar-color:var(--f-sup-3) transparent}
#cocuyoApps .capps-toolbar{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 14px}
#cocuyoApps .capps-actual{margin:0;font-size:20px;font-weight:550;line-height:1.2;letter-spacing:-.02em;color:var(--f-texto)}
#cocuyoApps .capps-resumen{margin:0;font-size:12px;color:var(--f-texto-3);font-variant-numeric:tabular-nums}
#cocuyoApps .capps-resumen:focus-visible{outline:2px solid var(--f-lima);outline-offset:3px;border-radius:4px}
#cocuyoApps .capps-subs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
#cocuyoApps .capps-subs button{height:30px;padding:0 12px;border:0;border-radius:999px;background:var(--f-sup-1);color:var(--f-texto-2);font:inherit;font-size:12.5px;font-weight:450;white-space:nowrap;cursor:pointer;transition:background var(--f-rapido,.16s),color var(--f-rapido,.16s)}
#cocuyoApps .capps-subs button:hover{background:var(--f-sup-2);color:var(--f-texto)}
#cocuyoApps .capps-subs button[aria-pressed="true"]{background:var(--f-texto);color:var(--negro-abismo);font-weight:500}

/* Secciones */
#cocuyoApps .capps-list{padding:0}
#cocuyoApps .capps-sec{margin:0 0 30px;animation:none}
#cocuyoApps .capps-sec-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
#cocuyoApps .capps-sec-head h3{margin:0;font-size:14px;font-weight:550;letter-spacing:-.01em;color:var(--f-texto)}
#cocuyoApps .capps-count{display:inline;min-width:0;height:auto;padding:0;border:0;background:none;font-size:12px;font-weight:450;font-variant-numeric:tabular-nums;color:var(--f-texto-3)}
#cocuyoApps .capps-ver{display:inline-flex;align-items:center;gap:4px;margin-left:auto;min-height:28px;padding:0 4px 0 8px;border:0;border-radius:8px;background:none;color:var(--f-texto-3);font:inherit;font-size:12px;cursor:pointer}
#cocuyoApps .capps-ver:hover{color:var(--f-texto);background:var(--f-sup-1)}
#cocuyoApps .capps-ver .ic{width:13px;height:13px;flex-basis:13px}

/* Rejilla densa de tarjetas pequeñas */
#cocuyoApps .capps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px 12px}
#cocuyoApps .capps-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;margin:0;padding:0;border:0;border-radius:12px;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transform:none;
  animation:capps-tarjeta .28s var(--curva-suave,ease-out) both;animation-delay:calc(var(--i,0) * 12ms)}
@keyframes capps-tarjeta{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#cocuyoApps .capps-card:hover,#cocuyoApps .capps-card:focus-visible{transform:none;box-shadow:none}
#cocuyoApps .capps-card:focus-visible{outline:none}
#cocuyoApps .capps-card:focus-visible .capps-thumb{box-shadow:0 0 0 2px var(--f-lima)}
#cocuyoApps .capps-thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--f-sup-2);isolation:isolate;transition:box-shadow var(--f-rapido,.16s)}
#cocuyoApps .capps-card:hover .capps-thumb{box-shadow:0 0 0 1px var(--f-linea-fuerte)}
#cocuyoApps .capps-thumb::after{content:none}
#cocuyoApps .capps-thumb :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;transition:transform .6s var(--curva-suave,ease-out)}
#cocuyoApps .capps-card:hover .capps-thumb :is(img,video){transform:scale(1.04)}
#cocuyoApps .capps-card[data-capps-plantilla] .capps-thumb img{object-fit:cover}
#cocuyoApps .capps-tags{position:absolute;top:6px;left:6px;z-index:1;display:flex;gap:4px}
#cocuyoApps .capps-tag{position:static;display:inline-flex;align-items:center;height:18px;padding:0 6px;border:0;border-radius:6px;background:color-mix(in srgb,var(--negro-abismo) 64%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--f-lima);font-size:10px;font-weight:550;line-height:1;letter-spacing:.01em;text-transform:none;box-shadow:none}
#cocuyoApps .capps-tag-beta{color:var(--f-texto)}
#cocuyoApps .capps-tag-off{color:var(--f-texto-2)}
#cocuyoApps .capps-tag-gratis{background:var(--f-lima);color:var(--f-lima-tinta,var(--negro-abismo))}
#cocuyoApps .capps-medio{position:absolute;right:6px;bottom:6px;top:auto;left:auto;z-index:1;height:18px;padding:0 6px;border:0;border-radius:6px;background:color-mix(in srgb,var(--negro-abismo) 64%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--f-texto-2);font-size:10px;font-weight:500;line-height:18px;opacity:0;transition:opacity var(--f-rapido,.16s)}
#cocuyoApps .capps-card:is(:hover,:focus-visible) .capps-medio{opacity:1}
#cocuyoApps .capps-local-art{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;min-height:0;height:auto;background:radial-gradient(120% 90% at 50% 20%,var(--f-sup-3),var(--f-sup-1));color:var(--f-texto-2);transition:color var(--f-rapido,.16s)}
#cocuyoApps .capps-local-art .ic{width:24px;height:24px;flex-basis:24px;stroke-width:1.3}
#cocuyoApps .capps-local-art i{font-style:normal;font-size:10.5px;color:var(--f-texto-3)}
#cocuyoApps .capps-card:hover .capps-local-art{color:var(--f-texto)}
#cocuyoApps .capps-body{display:grid;gap:1px;min-width:0;padding:0 2px}
#cocuyoApps .capps-body b{display:block;overflow:hidden;font-size:13px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--f-texto);white-space:nowrap;text-overflow:ellipsis}
#cocuyoApps .capps-body small{display:block;overflow:hidden;font-size:12px;line-height:1.4;color:var(--f-texto-3);white-space:nowrap;text-overflow:ellipsis;-webkit-line-clamp:unset}
/* Sin modelo disponible ahora: apagada, sin invitar a pulsar. */
#cocuyoApps .capps-card-off{cursor:default}
#cocuyoApps .capps-card-off .capps-thumb{opacity:.5}
#cocuyoApps .capps-card-off .capps-body b{color:var(--f-texto-2)}

/* Muy pronto: fichas pequeñas, sin portada ni enlace, al final. */
#cocuyoApps .capps-soon .capps-sec-head h3{color:var(--f-texto-2)}
#cocuyoApps .capps-grid-soon{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 8px}
#cocuyoApps .capps-card-soon{flex-direction:row;align-items:center;gap:10px;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;cursor:default;opacity:1;animation:none}
#cocuyoApps .capps-card-soon:hover{background:var(--f-sup-1)}
#cocuyoApps .capps-soon-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--f-sup-1);color:var(--f-texto-3)}
#cocuyoApps .capps-soon-ic .ic{width:14px;height:14px;flex-basis:14px}
#cocuyoApps .capps-card-soon .capps-body{padding:0}
#cocuyoApps .capps-card-soon .capps-body b{font-size:12.5px;font-weight:450;color:var(--f-texto-2)}
#cocuyoApps .capps-card-soon .capps-body small{font-size:11px}
/* Muy pronto agrupado por sector u ocasión (30-sep-2026): una fila discreta cada uno. */
#cocuyoApps .capps-soon-grupos{display:grid;gap:10px}
#cocuyoApps .capps-soon-grupo h4{margin:0 0 2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--f-texto-3)}
#cocuyoApps .capps-soon-grupo .capps-card-soon{min-height:36px;padding:4px 8px}
#cocuyoApps .capps-soon-grupo .capps-soon-ic{width:24px;height:24px}
#cocuyoApps .capps-soon-extra{margin-top:-18px}
#cocuyoApps .capps-pronto-list{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
#cocuyoApps .capps-pronto-list li{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px 0 8px;border:0;border-radius:8px;background:none;color:var(--f-texto-3);font-size:12px}
#cocuyoApps .capps-pronto-list li .ic{width:14px;height:14px;flex-basis:14px;color:var(--f-texto-3)}

/* Agente (solo con acceso): una fila compacta. */
#cocuyoApps .capps-agent{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 22px;padding:10px 14px;border:0;border-radius:12px;background:var(--f-sup-1);color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:none}
#cocuyoApps .capps-agent:hover{background:var(--f-sup-2)}
#cocuyoApps .capps-agent>.ic:first-child{color:var(--f-lima)}
#cocuyoApps .capps-agent>span{display:grid;gap:1px;flex:1;min-width:0}
#cocuyoApps .capps-agent b{font-size:13px;font-weight:550}
#cocuyoApps .capps-agent small{font-size:12px;color:var(--f-texto-3)}
#cocuyoApps .capps-agent>.ic:last-child{color:var(--f-texto-3)}

/* Vacío, «ver más», paginación y avisos */
#cocuyoApps .capps-empty{padding:48px 0;text-align:center;color:var(--f-texto-3);font-size:14px}
#cocuyoApps .capps-empty p{margin:0 0 12px}
#cocuyoApps .capps-mas{margin:0 0 24px}
#cocuyoApps .capps-todas{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--f-sup-2);color:var(--f-texto);font:inherit;font-size:13px;cursor:pointer}
#cocuyoApps .capps-todas:hover{background:var(--f-sup-3)}
#cocuyoApps .capps-paginacion{display:flex;justify-content:center;padding:4px 0 0}
#cocuyoApps .capps-paginacion[hidden]{display:none}
#cocuyoApps .capps-paginacion>div{display:flex;gap:6px}
#cocuyoApps .capps-paginacion button{min-width:96px;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--f-sup-2);color:var(--f-texto);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
#cocuyoApps .capps-paginacion button:not(:disabled):hover{background:var(--f-sup-3)}
#cocuyoApps .capps-paginacion button:disabled{opacity:.4;cursor:default}
#cocuyoApps .capps-status{margin:12px 0 0;font-size:13px;color:var(--f-texto-2)}
#cocuyoApps .capps-status:empty{display:none}

/* Móvil y tablet: cabecera en dos filas, pestañas horizontales y 2–3 columnas. */
@media (max-width:760px){
  #cocuyoApps .capps-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  #cocuyoApps .capps-head{flex-wrap:wrap;gap:10px;padding:12px 16px 10px;padding-top:max(12px,env(safe-area-inset-top,0px));box-shadow:none}
  #cocuyoApps .capps-titulo{flex:1 1 auto}
  #cocuyoApps .capps-titulo h2{font-size:19px}
  #cocuyoApps .capps-close{width:40px;height:40px;margin-right:-6px}
  #cocuyoApps .capps-search{order:3;flex:1 1 100%;max-width:none;height:42px}
  #cocuyoApps .capps-search input{font-size:16px}
  #cocuyoApps .capps-side{padding:0 0 10px;overflow-x:auto;overflow-y:hidden;box-shadow:0 1px 0 var(--f-linea);overscroll-behavior-x:contain}
  #cocuyoApps .capps-chips{display:flex;gap:6px;width:max-content;padding:0 16px}
  #cocuyoApps .capps-chips button{width:auto;min-height:36px;padding:0 12px;gap:6px;border-radius:999px;background:var(--f-sup-1);font-size:13px}
  #cocuyoApps .capps-chips button[aria-pressed="true"]{background:var(--f-texto);color:var(--negro-abismo)}
  #cocuyoApps .capps-chips button[aria-pressed="true"] :is(.ic,small){color:inherit}
  #cocuyoApps .capps-chips button .ic{display:none}
  #cocuyoApps .capps-chips button small{margin-left:2px}
  #cocuyoApps .capps-main{padding:14px 16px calc(32px + env(safe-area-inset-bottom,0px))}
  #cocuyoApps .capps-actual{font-size:17px}
  #cocuyoApps .capps-subs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:0 16px;scrollbar-width:none}
  #cocuyoApps .capps-subs::-webkit-scrollbar{display:none}
  #cocuyoApps .capps-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 10px}
  #cocuyoApps .capps-grid-soon{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  #cocuyoApps .capps-sec{margin-bottom:26px}
}
@media (max-width:420px){
  #cocuyoApps .capps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #cocuyoApps .capps-grid-soon{grid-template-columns:minmax(0,1fr)}
}
@media (hover:none){#cocuyoApps .capps-card:hover .capps-thumb :is(img,video){transform:none}}
@media (prefers-reduced-motion:reduce){
  #cocuyoApps.capps[open],#cocuyoApps .capps-card{animation:none}
  #cocuyoApps .capps-thumb,#cocuyoApps .capps-thumb :is(img,video),#cocuyoApps .capps-medio,#cocuyoApps .capps-local-art{transition:none}
  #cocuyoApps .capps-card:hover .capps-thumb :is(img,video){transform:none}
}

/* ------------------- Guía de la app encima del editor ---------------- */
.capps-guide{display:flex;align-items:center;gap:14px;margin:0 auto 10px;padding:10px 12px;max-width:960px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--verde-cocuyo) 28%,transparent);background:linear-gradient(110deg,var(--acento-fondo),var(--negro-abismo));color:var(--blanco-luz,#F8FAFC);animation:capps-entra .25s ease-out}
.capps-guide[hidden]{display:none}
.capps-guide-thumb{position:relative;flex:0 0 auto;width:112px;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.capps-guide-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.capps-guide-thumb .capps-badge{width:30px;height:30px;border-radius:9px;left:6px;bottom:6px}
.capps-guide-thumb .capps-badge .ic{width:15px;height:15px}
.capps-guide b{display:block;font-size:15px}
.capps-guide small{font-size:12px;color:var(--gris-humo,#94A3B8)}
.capps-guide ol{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:var(--gris-niebla,#CBD5E1)}
.capps-guide>div:nth-child(2){flex:1 1 auto;min-width:0}
.capps-guide-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.capps-guide-actions button[data-capps-otra]{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 35%,transparent);background:transparent;color:var(--verde-cocuyo,#AFF33E);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.capps-guide-close{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.capps-guide-close .ic{width:18px;height:18px}
@media (max-width:560px){.capps-guide-thumb{display:none}.capps-guide{align-items:flex-start}}

/* ------------- Orden de la navegación (dueño, 24-sep-2026) ------------ */
/* Biblioteca/Sesiones sale de la cabecera: se abre desde Proyectos. */
.studio-topbar .studio-session-switch,.studio-topbar #studioSessionToggle{display:none!important}
/* Menú de cuenta: sin «Planes del Estudio»; Idioma directo; sin Novedades. */
#accmenu [data-cocuyo-plan]{display:none!important}
#accmenu [data-account-section="preferences"]{display:none!important}
#accmenu .acc-language-directo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;min-height:44px}
body.studio-workbench #accmenu .acc-language.acc-language-directo{align-items:center;justify-content:flex-start;gap:11px;padding:4px 6px 4px 12px;min-height:44px}
body.studio-workbench #accmenu .acc-language-directo>[data-account-text="idioma"]{margin:0 auto 0 0;padding:0;font-size:13px;font-weight:inherit;line-height:1.3;align-self:center}
#accmenu .acc-language-icono{flex:none;opacity:.85}
/* Auditoría v338: abierta, la lista de idiomas ocupa todo el ancho del menú,
   debajo de «Idioma», en dos columnas legibles. Antes cabía en unos 240 px a la
   derecha: los nombres se partían letra a letra («Esp/añol», «Рус/ски/й»), la
   etiqueta bajaba al centro y la lista se salía por abajo. */
body.studio-workbench #accmenu .acc-language-directo:has(.cocuyo-idioma[open]){flex-wrap:wrap}
body.studio-workbench #accmenu .acc-language-directo:has(.cocuyo-idioma[open])>[data-idioma-slot]{flex:1 0 100%;min-width:0}
body.studio-workbench #accmenu .acc-language-directo .cocuyo-idioma-menu{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;margin:4px 0 0}
body.studio-workbench #accmenu .acc-language-directo .cocuyo-idioma-menu>button{min-height:36px;padding:7px 10px}
body.studio-workbench #accmenu .acc-language-directo .cocuyo-idioma-menu>button>span{overflow-wrap:normal}
/* En escritorio la Ayuda ya está arriba: no se repite en la cuenta. */
@media (min-width:901px){#accmenu #btnchat{display:none!important}}

/* ------------------- Móvil: textos y toques cómodos ------------------- */
@media (max-width:900px){
  .sm-nav [data-sm-text],.sm-nav span{font-size:12px!important}
  .sm-nav button,.sm-nav a{min-height:48px}
  .agente-beta{font-size:10.5px!important}
  .studio-topbar [data-top-models]{min-width:36px}
}
/* Almacenamiento compacto en la esquina de la cuenta (24-sep-2026): anillo + «0,4/10 GB». */
body.studio-workbench #accmenu .acc-identidad>div{flex:1 1 0;min-width:0}
#accmenu .acc-espacio{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:3px 9px 3px 4px;border:1px solid var(--border,#262626);border-radius:999px;background:var(--surface,#121212);color:var(--muted2,#9aa19a);font-size:11px;line-height:1;white-space:nowrap;cursor:default}
#accmenu .acc-espacio b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text,#e8ebe5)}
#accmenu .acc-espacio-anillo{width:24px;height:24px;flex:none}
#accmenu .acc-espacio-anillo circle{fill:none;stroke-width:3.2}
#accmenu .acc-espacio-anillo .fondo{stroke:#2c302b}
#accmenu .acc-espacio-anillo .uso{stroke:var(--lima,#AFF33E);stroke-linecap:round;transition:stroke-dasharray .4s ease}
#accmenu .acc-espacio-anillo g{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#accmenu .acc-espacio[data-nivel=alto] .uso{stroke:#f5c451}
#accmenu .acc-espacio[data-nivel=lleno] .uso{stroke:#ff818a}
#accmenu .acc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:900px){body.studio-workbench #accmenu .acc-identidad .em{grid-column:2}body.studio-workbench #accmenu .acc-identidad .acc-espacio{grid-column:3;grid-row:2;justify-self:end;align-self:center;margin-left:0}}

/* Móvil · ¿Qué quieres crear?: el clip ocupa el mismo hueco que la imagen. */
.sm-create-choice>video.clip-tarjeta{display:block;width:76px;height:82px;object-fit:cover;border-radius:12px;flex:none;background:var(--negro-elevado)}
@media(max-width:360px){.sm-create-choice>video.clip-tarjeta{width:58px;height:74px}}


/* cocuyo-css: assets/css/estudio-apps-guiadas.css */
/* Formularios independientes de Apps y cámara, con los tokens del Estudio. */
.cag-dialog{box-sizing:border-box;width:min(620px,calc(100vw - 32px));max-height:90dvh;margin:auto;padding:24px;border:1px solid var(--negro-borde);border-radius:18px;background:var(--negro-elevado);color:var(--blanco-luz);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px color-mix(in srgb,var(--negro-abismo) 60%,transparent);font:14px/1.5 var(--font,sans-serif)}
.cag-dialog::backdrop{background:color-mix(in srgb,var(--negro-abismo) 75%,transparent);backdrop-filter:blur(5px)}
.cag-dialog *{box-sizing:border-box}.cag-dialog [hidden]{display:none!important}
.cag-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.cag-heading h2{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.025em}.cag-heading>button{flex:none;font-size:24px;width:40px;padding:0!important}
.cag-dialog button,.cag-dialog input,.cag-dialog select,.cag-dialog textarea{font:inherit;color:inherit}.cag-dialog button{min-height:40px;padding:8px 13px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo);cursor:pointer}.cag-dialog button:disabled{opacity:.5;cursor:default}
.cag-dialog :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.cag-intro,.cag-note,.cag-reference>small{color:var(--gris-humo)}.cag-intro{margin:0 0 18px}.cag-note{font-size:12px;margin:12px 0}.cag-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:14px 0}.cag-field>span{font-weight:550}.cag-field small{font-weight:400;color:var(--gris-humo)}
.cag-field select,.cag-field textarea{min-height:42px;width:100%;padding:9px 11px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo)}.cag-field textarea{resize:vertical;min-height:76px;max-height:210px;line-height:1.45}
.cag-reference{margin:18px 0;padding:12px 14px;border:1px solid var(--negro-borde);border-radius:10px;min-width:0}.cag-reference legend{padding:0 5px;font-weight:550}.cag-reference p{overflow-wrap:anywhere;margin:0 0 10px}.cag-reference>small{display:block;font-size:12px;margin-top:8px}
.cag-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.cag-reference .cag-actions{justify-content:flex-start}.cag-dialog .cag-primary{background:var(--verde-cocuyo);border-color:var(--verde-cocuyo);color:var(--negro-abismo);font-weight:650}
.cag-settings{display:flex;gap:12px;align-items:flex-start}.cag-settings>.cag-field{flex:1}.cag-settings>.cag-field:first-child{flex:1.5}.cag-keep{display:flex;align-items:flex-start;gap:9px;margin:8px 0 14px}.cag-keep input{accent-color:var(--verde-cocuyo);margin-top:4px}
.cag-preview{margin:14px 0;padding:12px;border:1px solid var(--negro-borde);border-radius:10px;background:var(--negro-abismo)}.cag-preview summary{cursor:pointer}.cag-preview p,.cag-camera-copy{white-space:pre-wrap;overflow-wrap:anywhere}.cag-preview p{max-height:180px;overflow:auto;color:var(--gris-niebla);font-size:13px}.cag-camera-copy{padding:14px;background:var(--negro-abismo);border-radius:10px}
.cag-status{margin:12px 0 0;color:var(--gris-niebla);font-size:13px}.cag-status:empty{display:none}.cag-dialog .cag-cuenta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin:10px 0 0;padding:8px 18px;border:0;border-radius:999px;background:var(--verde-cocuyo);color:var(--negro-abismo);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.cag-dialog .cag-cuenta[hidden]{display:none}.cag-dialog .cag-cuenta:focus-visible{outline:2px solid var(--blanco-luz);outline-offset:2px}.cag-dialog[data-cag-visual] .cag-cuenta{position:relative;z-index:4}.cag-camera-trigger{white-space:nowrap}
.capps-thumb-guided{background:var(--negro-abismo)}.capps-thumb-guided .capps-local-art{height:100%;min-height:112px}.capps-guide-thumb.capps-thumb-guided .capps-local-art{min-height:0}.capps-guide-thumb.capps-thumb-guided .ic{width:34px;height:34px}
@media(max-width:600px){.cag-dialog{width:calc(100vw - 20px);padding:18px;max-height:94dvh}.cag-settings{flex-wrap:wrap;gap:0 10px}.cag-settings>.cag-field:first-child{flex-basis:100%}.cag-field select,.cag-field textarea{font-size:16px}.cag-actions>button{flex:1}.cag-heading h2{font-size:22px}}

.cag-reference-summary{display:flex;align-items:center;gap:12px;min-height:30px;overflow-wrap:anywhere;margin:0 0 12px}.cag-reference-summary>span{min-width:0}.cag-reference-media{display:block;flex:none;width:76px;height:76px;object-fit:cover;border:1px solid var(--negro-borde);border-radius:8px;background:var(--negro-abismo)}audio.cag-reference-media{width:100%;height:40px}.cag-reference-summary:has(audio){flex-wrap:wrap}.cag-reference-summary video{width:140px;height:88px}.cag-cost{padding:14px;border:1px solid var(--negro-borde);border-radius:10px;font-weight:600;background:var(--negro-abismo)}.cag-result{padding:12px;border-left:3px solid var(--verde-cocuyo);background:var(--negro-abismo)}.cag-submit{margin-top:16px}.cag-settings{flex-wrap:wrap}.cag-settings>.cag-field{flex-basis:120px}.cag-settings>.cag-field:first-child{flex-basis:100%}
@media(max-width:600px){.cag-submit>button{flex:1 1 auto}.cag-submit>[data-cag-new]{flex-basis:100%}.cag-reference .cag-actions>button{flex:1 1 auto}.cag-reference-media{width:60px;height:60px}}

.cag-reference{margin:10px 0;padding:10px 12px}.cag-reference-summary{margin-bottom:8px}.cag-options{margin:14px 0;border:1px solid var(--negro-borde);border-radius:10px;padding:10px 12px}.cag-options>summary{cursor:pointer;font-size:13px;color:var(--gris-niebla);overflow-wrap:anywhere}.cag-footer{position:sticky;bottom:-24px;margin:16px -24px -24px;padding:12px 24px 24px;background:var(--negro-elevado);border-top:1px solid var(--negro-borde);z-index:2}.cag-footer .cag-cost{padding:0;border:0;background:transparent;font-size:13px}.cag-footer .cag-submit{margin-top:10px}.cag-footer .cag-result{margin:10px 0;font-size:12px}.cag-intro{margin-bottom:12px}.cag-field{margin:10px 0}.cag-preview{margin:10px 0;padding:10px}.cag-note{margin:8px 0}
@media(max-width:600px){.cag-footer{bottom:-18px;margin-right:-18px;margin-left:-18px;margin-bottom:-18px;padding:12px 18px 18px}.cag-footer .cag-actions{gap:6px}}

/* =====================================================================
   Asistente de cada App (dueño, 30-sep-2026: «pasos guiados MUY simples»).
   Pantalla completa y limpia, cabecera mínima (← nombre ×), progreso
   «Paso 1 de 3» con segmentos finos, una pregunta grande por paso, el
   control grande y un solo botón principal fijo abajo.
   ===================================================================== */
.cag-dialog[data-cag-asistente]{position:fixed;inset:0;top:var(--cag-viewport-top,0px);width:100vw;max-width:100vw;height:var(--cag-viewport-height,100dvh);max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--negro-abismo);box-shadow:none;overflow:hidden;flex-direction:column;font-family:var(--fuente,sans-serif);color:var(--blanco-luz)}
.cag-dialog[data-cag-asistente][open]{display:flex;animation:cag-abre .22s cubic-bezier(.2,.8,.2,1) both}
.cag-dialog[data-cag-asistente]::backdrop{background:var(--negro-abismo)}
.cag-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Cabecera: ← atrás · nombre de la App · cerrar. */
[data-cag-asistente] .cag-heading{flex:none;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:0;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top,0px));border-bottom:1px solid color-mix(in srgb,var(--negro-borde) 70%,transparent)}
[data-cag-asistente] .cag-heading h2{margin:0;text-align:center;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-cag-asistente] .cag-heading>button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--blanco-luz);transition:background .15s}
[data-cag-asistente] .cag-heading>button:hover{background:var(--negro-elevado)}
[data-cag-asistente] .cag-heading svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-cag-asistente][data-cag-primero] .cag-atras{visibility:hidden}

/* Cuerpo: una columna centrada que se desplaza; el pie queda fijo. */
[data-cag-asistente]>[data-cag-body],[data-cag-asistente] form{flex:1;min-height:0;display:flex;flex-direction:column}
[data-cag-asistente] .cag-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:24px}
[data-cag-asistente] .cag-columna{position:relative;width:min(560px,100%);margin:0 auto;padding:24px 20px 40px}

/* Progreso mínimo: «Paso 1 de 3» y segmentos finos (se pulsan para volver). */
[data-cag-asistente] .cag-viaje{display:flex;align-items:center;gap:14px;margin:0 0 32px}
.cag-viaje-texto{flex:none;font-size:12px;font-weight:600;line-height:1;color:var(--gris-humo);font-variant-numeric:tabular-nums}
[data-cag-asistente] .cag-viaje ol{flex:1;display:grid;grid-template-columns:repeat(var(--cag-pasos),minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
[data-cag-asistente] .cag-viaje li{display:flex;min-width:0}
[data-cag-asistente] .cag-viaje button{display:flex;align-items:center;width:100%;min-height:24px;padding:0;border:0;border-radius:0;background:none;cursor:pointer}
[data-cag-asistente] .cag-viaje button:disabled{opacity:1;cursor:default}
[data-cag-asistente] .cag-viaje button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px;border-radius:4px}
.cag-viaje-seg{display:block;width:100%;height:3px;border-radius:3px;background:var(--negro-borde);transition:background-color .3s ease}
.cag-viaje .cag-hecho .cag-viaje-seg,.cag-viaje .cag-actual .cag-viaje-seg{background:var(--verde-cocuyo)}
.cag-viaje .cag-hecho button:hover .cag-viaje-seg{background:var(--lima-clara,var(--verde-cocuyo))}

/* Ejemplo pequeño de la App (su clip o portada), junto a la pregunta. */
[data-cag-asistente] .cag-ejemplo{position:absolute;top:80px;right:20px;width:72px;height:72px;margin:0;border-radius:18px;overflow:hidden;background:var(--negro-elevado);border:1px solid var(--negro-borde)}
.cag-ejemplo-media{display:block;width:100%;height:100%;object-fit:cover}
[data-cag-asistente] .cag-columna:has(>.cag-ejemplo) .cag-step:not(.cag-step-listo)>:is(.cag-step-title,.cag-step-sub){padding-right:88px}
[data-cag-asistente][data-cag-final] .cag-ejemplo{display:none}

/* Paso: una pregunta grande y humana, y el control grande debajo. */
[data-cag-asistente] .cag-step{min-width:0;margin:0}
.cag-step[hidden]{display:none!important}
[data-cag-asistente] .cag-step-title{margin:0;min-height:72px;display:flex;align-items:center;font-size:clamp(26px,3vw,32px);line-height:1.15;font-weight:650;letter-spacing:-.025em;color:var(--blanco-luz);outline:none;text-wrap:balance}
.cag-dialog[data-cag-asistente] .cag-step-title:is(:focus,:focus-visible){outline:none}
[data-cag-asistente] .cag-step-sub{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--gris-niebla)}
[data-cag-asistente] .cag-step-cuerpo{display:flex;flex-direction:column;gap:22px;margin-top:28px}

/* Texto libre: grande, con un ejemplo tocable. */
[data-cag-asistente] .cag-campo{display:flex;flex-direction:column;gap:10px;min-width:0}
[data-cag-asistente] .cag-field{margin:0;gap:8px}
[data-cag-asistente] .cag-field>span{font-size:14px;font-weight:600;color:var(--blanco-luz)}
[data-cag-asistente] .cag-field textarea{min-height:60px;padding:16px 18px;border:1.5px solid var(--negro-borde);border-radius:18px;background:var(--negro-elevado);font-size:17px;line-height:1.45;resize:none;transition:border-color .15s}
[data-cag-asistente] .cag-field textarea::placeholder{color:var(--gris-humo)}
[data-cag-asistente] .cag-field textarea:focus{border-color:var(--verde-cocuyo);outline:none}
[data-cag-asistente] .cag-campo:has(>.cag-field>.cag-sr) textarea{min-height:140px;font-size:18px}
[data-cag-asistente] .cag-field textarea[rows="6"]{min-height:200px}
[data-cag-asistente] .cag-ejemplo-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:38px;padding:7px 15px 7px 12px;border:1px solid var(--negro-borde);border-radius:999px;background:transparent;color:var(--gris-niebla);font-size:14px;line-height:1.3;text-align:left;transition:border-color .15s,color .15s}
[data-cag-asistente] .cag-ejemplo-chip:hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 55%,var(--negro-borde));color:var(--blanco-luz)}
.cag-ejemplo-chip svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--verde-cocuyo);stroke-width:1.8;stroke-linejoin:round}
.cag-ejemplo-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Opciones: tarjetas grandes de un toque (sin radios ni desplegables). */
[data-cag-asistente] .cag-choice-group{min-width:0;margin:0;padding:0;border:0}
[data-cag-asistente] .cag-choice-group>legend{display:block;width:100%;margin:0 0 12px;padding:0;font-size:14px;font-weight:600}
[data-cag-asistente] .cag-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
[data-cag-asistente] .cag-choice{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:64px;padding:14px 46px 14px 16px;border:1.5px solid var(--negro-borde);border-radius:18px;background:var(--negro-elevado);color:var(--blanco-luz);font-size:15px;line-height:1.3;font-weight:550;cursor:pointer;transition:border-color .15s,background-color .15s,transform .12s;-webkit-tap-highlight-color:transparent}
[data-cag-asistente] .cag-choice:active{transform:scale(.98)}
[data-cag-asistente] .cag-choice>input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
[data-cag-asistente] .cag-choice>span:not([class]){min-width:0;overflow-wrap:break-word;hyphens:auto}
/* Con icono: tarjeta vertical (icono arriba, nombre debajo). */
[data-cag-asistente] .cag-choice:has(>.cag-choice-icono){flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:92px;padding:14px 14px 16px}
[data-cag-asistente] .cag-choice:has(>.cag-choice-icono) .cag-choice-check{top:14px;margin-top:0}
.cag-choice-icono{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--negro-abismo);color:var(--gris-niebla);transition:color .15s}
.cag-choice-icono svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cag-choice-check{position:absolute;top:50%;right:14px;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;border:1.5px solid var(--negro-borde);border-radius:50%;color:transparent;transition:background-color .15s,border-color .15s}
.cag-choice-check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
[data-cag-asistente] .cag-choice:hover:not(:has(input:disabled)){border-color:color-mix(in srgb,var(--verde-cocuyo) 45%,var(--negro-borde))}
[data-cag-asistente] .cag-choice:has(input:checked){border-color:var(--verde-cocuyo);background:color-mix(in srgb,var(--verde-cocuyo) 8%,var(--negro-elevado))}
[data-cag-asistente] .cag-choice:has(input:checked) .cag-choice-check{border-color:var(--verde-cocuyo);background:var(--verde-cocuyo);color:var(--tinta-sobre-verde,var(--negro-abismo))}
[data-cag-asistente] .cag-choice:has(input:checked) .cag-choice-icono{color:var(--verde-cocuyo)}
[data-cag-asistente] .cag-choice:has(input:focus-visible){outline:2px solid var(--verde-cocuyo);outline-offset:3px}
[data-cag-asistente] .cag-choice:has(input:disabled){opacity:.5;cursor:default}
/* Tarjetas con imagen (acabado del retrato) y colores. */
[data-cag-asistente] .cag-choice:has(>img){flex-direction:column;align-items:stretch;gap:10px;padding:8px 8px 14px}
[data-cag-asistente] .cag-choice>img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--negro-abismo)}
[data-cag-asistente] .cag-choice:has(>img)>span:not([class]){padding:0 6px}
[data-cag-asistente] .cag-choice:has(>img) .cag-choice-check{top:16px;right:16px;margin-top:0;background:color-mix(in srgb,var(--negro-abismo) 60%,transparent)}
.cag-swatch-color{display:block;flex:none;width:26px;height:26px;border:1px solid var(--escarcha-borde);border-radius:50%;background:var(--cag-color,var(--negro-borde))}
.cag-swatch-color[data-cag-color="marino"]{--cag-color:var(--apps-traje-marino)}
.cag-swatch-color[data-cag-color="gris"]{--cag-color:var(--apps-traje-gris)}
.cag-swatch-color[data-cag-color="negro"]{--cag-color:var(--apps-traje-negro)}
.cag-swatch-color[data-cag-color="arena"],.cag-swatch-color[data-cag-color="calido"]{--cag-color:var(--apps-traje-beige)}
.cag-swatch-color[data-cag-color="lima"]{--cag-color:var(--verde-cocuyo)}
.cag-swatch-color[data-cag-color="neutro"]{--cag-color:var(--gris-niebla)}
/* Muestras sin nombres visibles; el radio conserva nombre, HEX y teclado. */
.cag-swatch-palette{display:flex;gap:0;overflow:hidden;border:1px solid var(--escarcha-borde);border-radius:12px;min-width:0;width:100%;height:46px}
.cag-swatch-palette .cag-swatch-color{flex:1;min-width:0;width:auto;height:100%;border:0;border-radius:0}
.cag-free-palettes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.cag-free-palettes>button{min-width:0;min-height:64px;padding:7px;border:1.5px solid var(--negro-borde);border-radius:14px;background:var(--negro-elevado)}.cag-free-palettes>button[aria-pressed="true"]{border-color:var(--verde-cocuyo);outline:1px solid var(--verde-cocuyo);outline-offset:1px}.cag-free-palettes .cag-swatch-palette{height:42px}
.cag-resumen-palette{display:flex;overflow:hidden;width:48px;height:16px;border:1px solid var(--escarcha-borde);border-radius:5px}.cag-resumen-palette i{flex:1}
[data-cag-asistente] .cag-choice.cag-swatch{justify-content:center;min-height:80px;padding:12px 12px 32px}
[data-cag-asistente] .cag-swatch .cag-choice-check{top:auto;bottom:6px;right:calc(50% - 9px);margin:0;width:18px;height:18px}
.cag-output{min-width:0;margin-top:18px}.cag-output h4{font-size:18px;margin:0 0 12px}.cag-result-media{display:grid;gap:14px}
.cag-result-card{min-width:0;border:1px solid var(--negro-borde);border-radius:16px;padding:12px;background:var(--negro-elevado)}.cag-result-card h5{font-size:14px;margin:0 0 10px}.cag-result-card p{overflow-wrap:anywhere;margin:8px 0;color:var(--gris-niebla)}
.cag-result-card figure{margin:0 0 12px;min-width:0}.cag-result-card figure:last-child{margin-bottom:0}.cag-result-card :is(img,video){display:block;width:100%;max-height:55dvh;object-fit:contain;border-radius:10px;background:var(--negro-abismo)}.cag-result-card audio{display:block;width:100%;max-width:100%}.cag-result-card figcaption{margin-top:10px}
.cag-result-card a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--negro-borde);border-radius:999px;color:var(--blanco-luz);text-decoration:none}.cag-result-card a:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
/* Voces: una tarjeta por voz, con su inicial. */
[data-cag-asistente] .cag-voces{max-height:min(320px,42vh);overflow-y:auto;padding:3px;margin:-3px}
.cag-voz-inicial{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--negro-abismo);color:var(--verde-cocuyo);font-size:14px;font-weight:700}
.cag-vacio{margin:0;color:var(--gris-humo);font-size:14px}

/* Subida: una zona enorme para tocar o arrastrar; miniatura grande al subir. */
[data-cag-asistente] .cag-drops{display:grid;gap:12px}
[data-cag-asistente] .cag-drops:not([data-cag-n="1"]){grid-template-columns:repeat(3,minmax(0,1fr))}
[data-cag-asistente] .cag-drops[data-cag-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-cag-asistente] .cag-drop{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"zona" "acciones" "limite";min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none}
.cag-drop-media{grid-area:zona;position:relative;display:grid;place-items:center;min-height:clamp(260px,42vh,420px);border:1.5px dashed color-mix(in srgb,var(--gris-humo) 55%,transparent);border-radius:26px;background:var(--negro-elevado);overflow:hidden;transition:border-color .15s,background-color .15s}
[data-cag-asistente] .cag-drops:not([data-cag-n="1"]) .cag-drop-media{min-height:0;aspect-ratio:1}
.cag-drop[data-lleno="true"] .cag-drop-media{border-style:solid;border-color:var(--negro-borde);background:var(--negro-abismo)}
.cag-drop-media>img,.cag-drop-media>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
[data-cag-asistente] .cag-drops:not([data-cag-n="1"]) .cag-drop-media>:is(img,video){object-fit:cover}
.cag-drop-media>audio{width:calc(100% - 32px)}
.cag-drop:hover:not([data-lleno="true"]) .cag-drop-media,.cag-drop[data-cag-arrastre] .cag-drop-media{border-color:var(--verde-cocuyo);background:color-mix(in srgb,var(--verde-cocuyo) 6%,var(--negro-elevado))}
[data-cag-asistente] .cag-drop-boton{grid-area:zona;z-index:1;display:grid;place-items:center;align-self:stretch;justify-self:stretch;min-height:0;margin:0;padding:20px;border:0;border-radius:26px;background:transparent;color:var(--blanco-luz);text-align:center;cursor:pointer}
.cag-drop-vacio{display:flex;flex-direction:column;align-items:center;gap:10px}
.cag-drop-vacio strong{font-size:17px;line-height:1.3;font-weight:600}
.cag-drop-vacio small{font-size:13px;color:var(--gris-humo)}
.cag-drop-icono{display:grid;place-items:center;width:64px;height:64px;margin-bottom:4px;border-radius:50%;background:var(--verde-cocuyo);color:var(--tinta-sobre-verde,var(--negro-abismo));box-shadow:var(--glow-suave)}
.cag-drop-icono svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-cag-asistente] .cag-drops:not([data-cag-n="1"]) .cag-drop-icono{width:44px;height:44px}
[data-cag-asistente] .cag-drops:not([data-cag-n="1"]) .cag-drop-icono svg{width:20px;height:20px}
[data-cag-asistente] .cag-drops:not([data-cag-n="1"]) .cag-drop-vacio strong{font-size:14px}
.cag-drop-cambiar{display:none}
[data-cag-asistente] .cag-drop[data-lleno="true"] .cag-drop-boton{align-self:end;justify-self:start;min-height:40px;margin:12px;padding:8px 14px;border:1px solid var(--escarcha-borde);border-radius:999px;background:color-mix(in srgb,var(--negro-abismo) 72%,transparent);backdrop-filter:blur(10px)}
.cag-drop[data-lleno="true"] .cag-drop-vacio{display:none}
.cag-drop-subiendo{display:none}
[data-cag-asistente] .cag-drop-boton:disabled{opacity:1;cursor:progress}
.cag-drop[data-cag-subiendo] :is(.cag-drop-vacio,.cag-drop-cambiar){display:none!important}
.cag-drop[data-cag-subiendo] .cag-drop-subiendo{display:inline-flex;flex-direction:column;align-items:center;gap:12px;font-size:15px;font-weight:600}
.cag-drop[data-cag-subiendo] .cag-drop-boton{align-self:stretch!important;justify-self:stretch!important;margin:0!important;border:0!important;border-radius:26px!important;background:color-mix(in srgb,var(--negro-abismo) 55%,transparent)!important}
.cag-giro{width:34px;height:34px;border:3px solid color-mix(in srgb,var(--verde-cocuyo) 25%,transparent);border-top-color:var(--verde-cocuyo);border-radius:50%;animation:cag-gira .8s linear infinite}
@keyframes cag-gira{to{transform:rotate(360deg)}}
.cag-drop[data-lleno="true"] .cag-drop-cambiar{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.cag-drop-cambiar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cag-drop-acciones{grid-area:acciones;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin-top:10px}
.cag-drop-limite{grid-area:limite;display:block;margin-top:8px;text-align:center;color:var(--peligro);font-size:13px}
.cag-drop-limite:empty{display:none}

/* Enlaces discretos: Mis creaciones, Quitar, Textos… */
[data-cag-asistente] .cag-enlace{min-height:40px;padding:6px 6px;border:0;border-radius:8px;background:none;color:var(--gris-niebla);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gris-niebla) 45%,transparent);text-underline-offset:4px}
[data-cag-asistente] .cag-enlace:hover{color:var(--blanco-luz)}

/* Plegables pequeños: «Más detalles» y «Ajustes». */
[data-cag-asistente] .cag-options{margin:0;padding:0;border:0;border-radius:0;background:none}
[data-cag-asistente] .cag-options>summary,[data-cag-asistente] .cag-preview>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 2px;list-style:none;color:var(--gris-niebla);font-size:14px;font-weight:500;cursor:pointer}
[data-cag-asistente] :is(.cag-options,.cag-preview)>summary::-webkit-details-marker{display:none}
[data-cag-asistente] :is(.cag-options,.cag-preview)>summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
[data-cag-asistente] :is(.cag-options,.cag-preview)[open]>summary::after{margin-top:3px;transform:rotate(-135deg)}
[data-cag-asistente] :is(.cag-options,.cag-preview)>summary:hover{color:var(--blanco-luz)}
[data-cag-asistente] .cag-mas[open]{display:flex;flex-direction:column;gap:16px}
[data-cag-asistente] .cag-step-listo .cag-options:not(.cag-mas){align-self:center;text-align:left;width:100%}
[data-cag-asistente] .cag-step-listo .cag-options:not(.cag-mas)>summary{display:flex;justify-content:center;width:100%}
[data-cag-asistente] .cag-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px;padding:16px;border:1px solid var(--negro-borde);border-radius:18px;background:var(--negro-elevado)}
[data-cag-asistente] .cag-settings>.cag-field{margin:0}
[data-cag-asistente] .cag-settings>.cag-field:first-child{grid-column:1/-1}
[data-cag-asistente] .cag-settings>.cag-field>span{font-size:12px;font-weight:600;color:var(--gris-niebla)}
[data-cag-asistente] .cag-settings select{min-height:46px;padding:10px 12px;border:1px solid var(--negro-borde);border-radius:12px;background:var(--negro-abismo);font-size:15px}
[data-cag-asistente] .cag-preview{margin:12px 0 0;padding:0;border:0;background:none}
[data-cag-asistente] .cag-preview[open]>p{margin:4px 0 12px;max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--gris-niebla);font-size:13px;line-height:1.6}
[data-cag-asistente] .cag-preview .cag-field textarea{min-height:60px;font-size:15px}

/* «Listo para crear»: miniatura grande, pastillas y la idea en corto. */
[data-cag-asistente] .cag-step-listo{text-align:center}
[data-cag-asistente] .cag-step-listo .cag-step-title{justify-content:center;min-height:0}
[data-cag-asistente] .cag-step-listo .cag-step-sub{display:none}
.cag-resumen{display:flex;flex-direction:column;align-items:center;gap:18px}
.cag-resumen-archivos{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.cag-resumen-archivo{position:relative;width:min(260px,64vw);aspect-ratio:1;margin:0;border:1px solid var(--negro-borde);border-radius:26px;overflow:hidden;background:var(--negro-elevado)}
.cag-resumen-archivos[data-cag-n="1"] .cag-resumen-archivo{width:auto;height:min(280px,34vh);max-width:100%;aspect-ratio:var(--cag-aspecto,1)}
.cag-resumen-archivos[data-cag-n="2"] .cag-resumen-archivo{width:min(170px,40vw)}
.cag-resumen-archivos:is([data-cag-n="3"],[data-cag-n="4"],[data-cag-n="5"]) .cag-resumen-archivo{width:min(120px,28vw);border-radius:18px}
.cag-resumen-archivo>img,.cag-resumen-archivo>video,.cag-resumen-media{display:block;width:100%;height:100%;object-fit:cover}
.cag-resumen-audio{display:grid;place-items:center;width:100%;height:100%;color:var(--verde-cocuyo);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--verde-cocuyo) 16%,transparent),transparent 65%)}
.cag-resumen-audio svg{width:30%;height:30%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.cag-resumen-etiqueta{position:absolute;top:10px;left:10px;padding:4px 9px;border:1px solid var(--escarcha-borde);border-radius:999px;background:color-mix(in srgb,var(--negro-abismo) 65%,transparent);backdrop-filter:blur(8px);font-size:11px;font-weight:600;line-height:1.2}
.cag-resumen-ajustes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.cag-resumen-ajustes li{padding:7px 14px;border:1px solid var(--negro-borde);border-radius:999px;background:var(--negro-elevado);font-size:14px;line-height:1.2;font-weight:550}
.cag-resumen-ajustes:empty{display:none}
.cag-resumen-lista{display:flex;flex-direction:column;gap:4px;max-width:46ch;margin:0;padding:0;list-style:none;color:var(--gris-niebla);font-size:15px;line-height:1.45;overflow-wrap:anywhere}
[data-cag-asistente] .cag-step-listo .cag-note{max-width:46ch;margin:0 auto;color:var(--gris-humo);font-size:13px;line-height:1.5}

/* Pie fijo: un solo botón principal, grande y al alcance del pulgar. */
[data-cag-asistente] .cag-footer{position:static;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;padding:12px 20px;padding-bottom:max(16px,env(safe-area-inset-bottom,0px));border-top:1px solid color-mix(in srgb,var(--negro-borde) 70%,transparent);background:var(--negro-abismo);z-index:2}
[data-cag-asistente] .cag-footer>*{width:min(520px,100%)}
[data-cag-asistente] .cag-footer .cag-submit{display:flex;flex-direction:column;gap:6px;margin:0}
[data-cag-asistente] .cag-footer .cag-submit>button{flex:none;width:100%}
[data-cag-asistente] .cag-primary{min-height:56px;padding:12px 24px;border:0;border-radius:999px;background:var(--verde-cocuyo);color:var(--tinta-sobre-verde,var(--negro-abismo));font-size:17px;font-weight:650;letter-spacing:-.01em;transition:filter .15s,transform .12s,opacity .15s,box-shadow .2s}
[data-cag-asistente] .cag-primary:hover:not(:disabled){filter:brightness(1.06)}
[data-cag-asistente] .cag-primary:active:not(:disabled){transform:scale(.98)}
[data-cag-asistente] .cag-primary:disabled{opacity:.35;cursor:not-allowed}
[data-cag-asistente] .cag-generar:not(:disabled){box-shadow:var(--glow-medio)}
[data-cag-asistente] .cag-footer :is(.cag-status,.cag-pista){margin:0;text-align:center;font-size:13px;line-height:1.45;color:var(--gris-niebla)}
[data-cag-asistente] .cag-footer :is(.cag-status,.cag-pista):empty{display:none}
[data-cag-asistente] .cag-footer .cag-result{padding:0;border:0;background:none;margin:0;text-align:center;font-size:15px;line-height:1.45;font-weight:550}
[data-cag-asistente] .cag-footer .cag-cuenta{width:min(520px,100%);min-height:48px;margin:0}
[data-cag-asistente] .cag-nota-cobro{margin:0;text-align:center;font-size:12px;line-height:1.4;color:var(--gris-humo)}
[data-cag-asistente] .cag-extra-acciones{display:flex;justify-content:center;gap:4px 18px;flex-wrap:wrap}
[data-cag-asistente] .cag-extra-acciones:empty{display:none}
[data-cag-asistente][data-cag-enviado]:not([data-cag-enviado=""]) .cag-nota-cobro{display:none}
[data-cag-asistente]:not([data-cag-final]) .cag-solo-final,[data-cag-asistente][data-cag-final] .cag-solo-antes{display:none!important}
[data-cag-asistente][data-cag-keyboard="true"] :is(.cag-nota-cobro,.cag-pista){display:none}

/* Transiciones cortas: deslizar + fundido según la dirección. */
[data-cag-asistente] .cag-step.cag-entra{animation:cag-entra-adelante .26s cubic-bezier(.2,.8,.2,1) both}
[data-cag-asistente][data-cag-dir="atras"] .cag-step.cag-entra{animation-name:cag-entra-atras}
@keyframes cag-entra-adelante{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes cag-entra-atras{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes cag-fundido{from{opacity:0}to{opacity:1}}
@keyframes cag-abre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .cag-step.cag-entra,.cag-dialog[data-cag-dir="atras"] .cag-step.cag-entra{animation:cag-fundido .12s linear both}
 .cag-viaje-seg,.cag-choice,.cag-choice-check,.cag-primary{transition:none}
 .cag-dialog[data-cag-asistente][open]{animation:none}
 [data-cag-asistente] :is(.cag-choice,.cag-primary):active{transform:none}
}

/* Escritorio: tarjetas de tres en fila cuando son tres o seis. */
@media(min-width:601px){
 [data-cag-asistente] .cag-choices:is([data-cag-n="3"],[data-cag-n="6"]){grid-template-columns:repeat(3,minmax(0,1fr))}
 [data-cag-asistente] .cag-choices:has(>.cag-swatch),[data-cag-asistente] .cag-choices[data-cag-n="4"]:has(>.cag-swatch){grid-template-columns:repeat(4,minmax(0,1fr))}
 [data-cag-asistente] .cag-columna{padding-top:40px}
}
/* Móvil (390 px): márgenes de 16 px y todo al alcance del pulgar. */
@media(max-width:600px){
 [data-cag-asistente] .cag-columna{padding:18px 16px 32px}
 [data-cag-asistente] .cag-viaje{margin-bottom:24px}
 [data-cag-asistente] .cag-ejemplo{top:64px;right:16px;width:60px;height:60px;border-radius:16px}
 [data-cag-asistente] .cag-columna:has(>.cag-ejemplo) .cag-step:not(.cag-step-listo)>:is(.cag-step-title,.cag-step-sub){padding-right:72px}
 [data-cag-asistente] .cag-step-title{min-height:60px;font-size:27px}
 [data-cag-asistente] .cag-step-cuerpo{margin-top:22px;gap:20px}
 [data-cag-asistente] .cag-field textarea,[data-cag-asistente] .cag-settings select{font-size:16px}
 [data-cag-asistente] .cag-choice{min-height:60px;padding:12px 40px 12px 14px;font-size:14px;gap:10px}
 [data-cag-asistente] .cag-choice-check{right:12px}
 [data-cag-asistente] .cag-choice-icono{width:32px;height:32px;border-radius:10px}
 [data-cag-asistente] .cag-choices:has(>.cag-swatch){grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-cag-asistente] .cag-choices:is([data-cag-n="3"],[data-cag-n="5"]):not(:has(.cag-choice-icono,img,.cag-swatch-color)){grid-template-columns:minmax(0,1fr)}
 [data-cag-asistente] .cag-choice:has(>.cag-choice-icono){flex-direction:row;align-items:center;justify-content:flex-start;min-height:60px;padding:10px 12px}
 [data-cag-asistente] .cag-choice:has(>.cag-choice-icono) .cag-choice-check{display:none}
 .cag-drop-media{min-height:clamp(240px,40vh,360px)}
 [data-cag-asistente] .cag-drops:not([data-cag-n="1"]){grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-cag-asistente] .cag-footer{padding:10px 16px;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
}

/* Acabado local: dimensiones y texto exacto antes de descargar. */
.cas-dialog{width:min(880px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(var(--cag-viewport-height,100dvh) - 32px);font-family:var(--fuente,sans-serif);scroll-padding-top:80px}
.cas-dialog .cag-heading{position:sticky;top:-24px;z-index:3;margin:-24px -24px 0;padding:22px 24px 16px;background:var(--negro-elevado);border-bottom:1px solid var(--negro-borde)}
.cas-dialog .cag-heading>button{min-width:44px;min-height:44px;border-radius:12px}
.cas-dialog .cag-intro{margin:16px 0 20px;line-height:1.55}
.cas-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start;gap:24px}
.cas-config{min-width:0}
.cas-config>.cag-field:first-child{margin-top:0}
.cas-config .cag-field>span{font-weight:600}
.cas-config .cag-field>small{overflow-wrap:anywhere}
.cas-config .cag-field>output{color:var(--gris-niebla);font-size:12px;font-variant-numeric:tabular-nums}
.cas-config .cag-field input{width:100%;min-width:0;min-height:44px;accent-color:var(--verde-cocuyo)}
.cas-config .cag-field input[type="file"]{padding:7px;border:1px solid var(--negro-borde);border-radius:10px;background:var(--negro-abismo);font-size:12px}
.cas-config .cag-field input[type="file"]::file-selector-button{min-height:34px;margin-right:8px;padding:6px 9px;border:1px solid var(--negro-borde);border-radius:7px;background:var(--negro-elevado);color:var(--blanco-luz);font:inherit;cursor:pointer}
.cas-config .cag-field input[type="range"]{padding:0;cursor:pointer}
.cas-preview{position:sticky;top:84px;min-width:0;margin:0;padding:14px;border:1px solid var(--negro-borde);border-radius:16px;background:var(--negro-abismo)}
.cas-preview canvas{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px;background:var(--negro-elevado)}
.cas-empty{display:grid;place-items:center;min-height:220px;margin:0;padding:24px;border:1px dashed var(--negro-borde);border-radius:10px;color:var(--gris-humo);text-align:center;font-size:13px;line-height:1.6}
.cas-guides{margin:12px 0 0;color:var(--gris-humo);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.cas-exact{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--verde-cocuyo);border-radius:0 9px 9px 0;background:var(--negro-abismo);color:var(--gris-niebla);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.cas-dialog .cag-footer{position:static;margin-top:20px}
.cas-dialog .cag-footer button{min-height:44px;border-radius:11px}
.cas-status{margin:0 0 10px;color:var(--gris-niebla);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.cas-status:empty{display:none}
.cas-dialog[data-cag-keyboard="true"]{position:fixed;top:calc(var(--cag-viewport-top,0px) + 16px);margin-top:0;margin-bottom:0}
.cas-dialog[data-cag-keyboard="true"] .cas-preview{position:static}
@media(max-width:700px){
  .cas-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .cas-preview{position:static;order:-1}
  .cas-empty{min-height:140px}
}
@media(max-width:600px){
  .cas-dialog{left:16px;right:auto;margin-left:0;margin-right:0;width:calc(100vw - 32px);padding:16px;border-radius:18px;max-height:calc(var(--cag-viewport-height,100dvh) - 32px)}
  .cas-dialog .cag-heading{top:-16px;margin:-16px -16px 0;padding:16px 16px 12px;gap:10px}
  .cas-dialog .cag-heading h2{font-size:22px;overflow-wrap:anywhere}
  .cas-dialog .cag-intro{font-size:13px;margin:14px 0 16px}
  .cas-preview{padding:10px;border-radius:13px}
  .cas-dialog .cag-footer{margin-right:-16px;margin-left:-16px;margin-bottom:-16px;padding:12px 16px max(16px,env(safe-area-inset-bottom,0px))}
  .cas-dialog .cag-footer .cag-actions{gap:8px}
  .cas-dialog .cag-footer .cag-actions>button{flex:1 1 108px}
  .cas-config .cag-field input[type="file"]{font-size:13px}
}
@media(max-height:500px){.cas-preview{position:static}}
/* En pantallas táctiles no se arrastra: sólo «Toca para subir». */
@media(hover:none){[data-cag-asistente] .cag-drops[data-cag-n="1"] .cag-drop-vacio small{display:none}}
/* Enlace del aviso final a un útil gratis (p. ej. Stickers de tu mascota → Crear stickers para WhatsApp). */
.cag-note-enlace{color:var(--verde-cocuyo);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cag-note-enlace:hover,.cag-note-enlace:focus-visible{color:var(--blanco-luz)}

/* =====================================================================
   Molde de las Apps (dueño, 6-oct-2026; referencia Ideogram): una sola
   pantalla. Cabecera «Apps / Nombre ⌄» que abre el catálogo, todos los
   campos a la vista, un único botón fijo «Crear · N créditos» y el
   resultado en su panel: a la derecha en escritorio, debajo en el móvil.
   ===================================================================== */
[data-cag-una] .cag-heading{grid-template-columns:minmax(0,1fr) 44px;padding-left:16px}
[data-cag-una] .cag-heading h2{text-align:left;font-size:inherit}
[data-cag-una] .cag-cambiar{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:6px 10px 6px 12px;border:1px solid var(--negro-borde);border-radius:12px;background:var(--negro-elevado);color:var(--blanco-luz);font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color .15s}
[data-cag-una] .cag-cambiar:hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 45%,var(--negro-borde))}
[data-cag-una] .cag-cambiar svg{flex:none;width:16px;height:16px;color:var(--gris-humo)}
.cag-cambiar-apps,.cag-cambiar-sep{flex:none;color:var(--gris-humo);font-weight:500}
.cag-cambiar-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Campos: etiquetas pequeñas en lugar de preguntas gigantes. */
[data-cag-una] .cag-columna{width:100%;max-width:none;padding:20px 20px 28px;display:flex;flex-direction:column;gap:22px}
[data-cag-una] .cag-step-title{min-height:0;font-size:14px;line-height:1.35;font-weight:600;letter-spacing:0}
[data-cag-una] .cag-titulo-oculto>.cag-step-title{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-cag-una] .cag-step-sub{margin-top:4px;font-size:13px;color:var(--gris-humo)}
[data-cag-una] .cag-step-cuerpo{margin-top:10px;gap:18px}
[data-cag-una] .cag-titulo-oculto>.cag-step-cuerpo{margin-top:0}
[data-cag-una] .cag-field>span{font-size:14px}
[data-cag-una] .cag-field textarea{min-height:52px;padding:12px 14px;border-width:1px;border-radius:14px;font-size:15px}
[data-cag-una] .cag-campo:has(>.cag-field>.cag-sr) textarea{min-height:110px;font-size:15px}
[data-cag-una] .cag-choice{min-height:52px;padding:10px 40px 10px 14px;border-width:1px;border-radius:14px;font-size:14px}
[data-cag-una] .cag-choice-check{right:12px}
[data-cag-una] .cag-drop-media{min-height:clamp(150px,24vh,220px);border-radius:18px}
[data-cag-una] .cag-drop-boton{border-radius:18px}
[data-cag-una] .cag-drop-icono{width:48px;height:48px}
[data-cag-una] .cag-drop-icono svg{width:22px;height:22px}
[data-cag-una] .cag-drop-vacio strong{font-size:15px}

/* Ajustes siempre a la vista; el modelo sólo si hay que cambiarlo. */
[data-cag-una] .cag-ajustes-una>summary{display:none!important}
[data-cag-una] .cag-ajustes-una .cag-settings{margin:0;padding:0;border:0;background:none}
[data-cag-una]:not([data-cag-modelo-visible]) [data-cag-modelo-campo]{display:none}
[data-cag-una] .cag-step-listo{text-align:left}
[data-cag-una] .cag-step-listo .cag-note{max-width:none;margin:0}

/* Resultado: panel propio con el ejemplo de la App mientras no hay envío. */
[data-cag-una] .cag-lado{min-width:0;padding:20px}
[data-cag-una] .cag-lado .cag-output{margin:0}
[data-cag-una] .cag-lado .cag-result-media{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cag-lado-vacio{position:relative;width:min(100%,520px);margin:0 auto;border:1px solid var(--negro-borde);border-radius:18px;overflow:hidden;background:var(--negro-elevado)}
.cag-lado-vacio:empty{display:none}
.cag-lado-media{display:block;width:100%;max-height:60dvh;object-fit:cover}

/* Pie: un solo botón ancho, siempre visible. */
[data-cag-una] .cag-footer{align-items:stretch;padding:12px 20px;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
[data-cag-una] .cag-footer>*{width:100%}
[data-cag-una] .cag-footer .cag-cuenta{width:100%}
/* Sin cuenta (auditoría v338): «Crear cuenta gratis» y «Entrar», juntos y en vez de «Reintentar». */
.cag-dialog .cag-cuenta-acciones{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.cag-dialog .cag-cuenta-acciones[hidden]{display:none}
.cag-dialog .cag-cuenta-acciones .cag-cuenta{flex:1 1 0;min-width:0;margin:0}
.cag-dialog .cag-cuenta.cag-cuenta-entrar{background:transparent;color:var(--blanco-luz,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blanco-luz,#fff) 28%,transparent)}
.cag-dialog .cag-cuenta.cag-cuenta-entrar:hover{box-shadow:inset 0 0 0 1px var(--blanco-luz,#fff)}
[data-cag-asistente] .cag-footer .cag-cuenta-acciones{width:min(520px,100%);margin:0}
[data-cag-una] .cag-footer .cag-cuenta-acciones{width:100%}
.cag-dialog .cag-nota-cobro[hidden]{display:none}
/* Saldo que no alcanza (adentro óptimo, 6-oct-2026): el botón lima pasa a
   «Faltan N créditos · Recargar»; debajo, el saldo y que el borrador sigue. */
[data-cag-una] .cag-saldo{margin:0;text-align:center;font-size:12px;line-height:1.4;color:var(--gris-niebla);font-variant-numeric:tabular-nums}
[data-cag-una] .cag-saldo[hidden],[data-cag-una][data-cag-faltan] .cag-nota-cobro{display:none}

/* Escritorio: ajustes a la izquierda (con el botón al pie) y resultado a la derecha. */
@media(min-width:900px){
 [data-cag-una] form{display:grid;grid-template-columns:minmax(360px,460px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"campos lado" "pie lado"}
 [data-cag-una] .cag-scroll{grid-area:campos;border-right:1px solid color-mix(in srgb,var(--negro-borde) 70%,transparent)}
 [data-cag-una] .cag-footer{grid-area:pie;border-right:1px solid color-mix(in srgb,var(--negro-borde) 70%,transparent)}
 [data-cag-una] .cag-lado{grid-area:lado;overflow-y:auto;overscroll-behavior:contain;padding:28px}
 [data-cag-una] .cag-columna{padding:24px 24px 32px}
}
/* Móvil y tableta: todo en una columna que se desplaza; el botón queda abajo. */
@media(max-width:899px){
 [data-cag-una] form{display:block;overflow-y:auto;overscroll-behavior:contain}
 [data-cag-una] .cag-scroll{overflow:visible}
 [data-cag-una] .cag-lado{padding:0 16px 20px}
 [data-cag-una] .cag-lado-vacio{display:none}
 [data-cag-una] .cag-footer{position:sticky;bottom:0}
}
@media(max-width:600px){
 [data-cag-una] .cag-columna{padding:16px 16px 22px;gap:20px}
 [data-cag-una] .cag-heading{padding-left:12px}
 [data-cag-una] .cag-cambiar{font-size:14px}
 [data-cag-una] .cag-lado .cag-result-media{grid-template-columns:minmax(0,1fr)}
}
/* Móvil (dueño, 6-oct-2026: «nadie arrastra en un móvil»): la zona de subir
   es sólo el icono; el botón conserva su nombre accesible. */
@media(max-width:899px),(hover:none){
 [data-cag-una] .cag-drop-vacio :is(strong,small){display:none}
 [data-cag-una] .cag-drops[data-cag-n="1"] .cag-drop-media{min-height:112px}
 [data-cag-una] .cag-drop-vacio{gap:0}
 [data-cag-una] .cag-drop-icono{margin:0}
}


/* cocuyo-css: assets/css/plantillas-estudio.css */
/* Sólo el catálogo de Apps: no cambia cabecera ni navegación. */
.capps-colecciones{display:flex;gap:.5rem;padding:1rem 1.75rem 0;max-width:560px}
.capps-colecciones button{min-height:44px;flex:1;padding:.6rem .9rem;border:1px solid var(--negro-borde);border-radius:999px;background:color-mix(in srgb,var(--negro-elevado) 70%,var(--negro-abismo));color:var(--gris-niebla);font:inherit;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.capps-colecciones button:hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 55%,var(--negro-borde));color:var(--blanco-luz)}
.capps-colecciones button[aria-pressed="true"]{background:var(--verde-cocuyo);color:var(--tinta-sobre-verde);border-color:var(--verde-cocuyo)}
.capps-colecciones button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.capps .capps-plantilla-pronto{cursor:default;opacity:1;min-width:0}
.capps-plantilla-pronto .capps-thumb{background:var(--negro-elevado)}
.capps-plantilla-pronto .capps-local-art{color:var(--gris-humo)}
.capps-plantilla-pronto .capps-tag{background:var(--negro-borde);color:var(--gris-niebla)}
.capps-plantilla-pronto b,.capps-plantilla-pronto small{overflow-wrap:anywhere}
@media(max-width:600px){.capps-colecciones{padding:.8rem 1rem 0;max-width:none}.capps-colecciones button{font-size:14px}}

/* Los diseños pendientes no muestran una portada simulada: una ficha
   tranquila, del mismo alto que sus vecinas, con «Muy pronto» arriba. */
.capps .capps-plantilla-pronto{flex-direction:column;align-items:stretch;gap:0;padding:0;border-style:dashed;border-color:var(--negro-borde);background:transparent;animation:none;transform:none;box-shadow:none}
.capps-plantilla-pronto .capps-thumb{aspect-ratio:auto;padding:12px 14px 0;background:transparent}
.capps-plantilla-pronto .capps-thumb::after,.capps-plantilla-pronto .capps-local-art{display:none}
.capps-plantilla-pronto .capps-tag{position:static;display:inline-block;font-size:10px;line-height:1.5;border:1px solid var(--negro-borde)}
.capps-plantilla-pronto .capps-body{padding:10px 14px 14px}
.capps-plantilla-pronto .capps-body b{color:var(--gris-niebla)}
.capps-plantilla-pronto .capps-meta i{color:var(--gris-humo);border-color:var(--negro-borde)}
/* Plantillas con portada: se ven enteras, en su proporción real (como Picsart). */
.capps-card[data-capps-plantilla] .capps-thumb{aspect-ratio:var(--plantilla-ratio,4 / 5);background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--verde-cocuyo) 8%,transparent),transparent 70%),var(--negro-abismo)}
.capps-card[data-capps-plantilla] .capps-thumb img{object-fit:contain;filter:none}
.capps-card[data-capps-plantilla] .capps-thumb video{object-fit:cover}
.capps-card[data-capps-plantilla] .capps-thumb::after{display:none}

/* La galería crea como máximo 48 tarjetas; los controles siguen fuera de ella. */
.capps-paginacion{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:0 1.75rem .8rem}
.capps-tools .capps-paginacion{padding:.1rem 0 0}
.capps-paginacion p:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.capps-paginacion p{margin:0;color:var(--gris-niebla);font-size:.875rem;overflow-wrap:anywhere}
.capps-paginacion>div{display:flex;gap:.5rem}
.capps-paginacion button{min-height:40px;min-width:88px;padding:.5rem .95rem;border:1px solid var(--negro-borde);border-radius:999px;background:color-mix(in srgb,var(--negro-elevado) 70%,var(--negro-abismo));color:var(--blanco-luz);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color .15s}
.capps-paginacion button:not(:disabled):hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 55%,var(--negro-borde))}
.capps-paginacion button:disabled{opacity:.5;cursor:default}
.capps-paginacion button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.capps-pronto-list{display:flex;flex-wrap:wrap;gap:.65rem;list-style:none;margin:0;padding:0}
.capps-pronto-list li{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border:1px dashed var(--negro-borde);border-radius:999px;color:var(--gris-niebla);font-size:.875rem}
.capps-pronto-list li .ic{width:16px;height:16px;flex:none;color:var(--gris-humo)}
@media(max-width:600px){.capps-paginacion{padding:0 1rem .8rem;gap:.5rem}.capps-paginacion p{font-size:.8125rem;flex:1 1 150px}.capps-paginacion button{min-width:0;min-height:44px;padding:.45rem .8rem;font-size:.8125rem}}

/* Una categoría corta conserva el total y evita dos botones sin acción. */
.capps-paginacion>div:has(button:first-child:disabled):has(button:last-child:disabled){display:none}

/* Asistente de Plantillas (30-sep-2026): ¿Dónde lo vas a usar? · Elige un
   diseño · Qué escribir. Tarjetas grandes; la silueta muestra la proporción. */
[data-cag-asistente] .cag-choices.cpl-usos-lista{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
[data-cag-asistente] .cag-choice.cpl-usos{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;min-height:150px;padding:16px 16px 18px}
[data-cag-asistente] .cag-choice.cpl-usos .cag-choice-check{top:16px;margin-top:0}
.cpl-forma{display:block;flex:none;height:56px;aspect-ratio:var(--cpl-forma,1 / 1);max-width:100px;border:2px solid var(--gris-niebla);border-radius:6px;background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--gris-niebla) 22%,transparent) 58% 66%,transparent 66% 74%,color-mix(in srgb,var(--gris-niebla) 22%,transparent) 74% 80%,transparent 80%);transition:border-color .15s}
[data-cag-asistente] .cag-choice:has(input:checked) .cpl-forma{border-color:var(--verde-cocuyo)}
.cpl-texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.cpl-texto b{font-size:15px;line-height:1.25;font-weight:650;overflow-wrap:break-word}
.cpl-texto small{color:var(--gris-niebla);font-size:13px;line-height:1.35;font-weight:450}
[data-cag-asistente] .cag-choices.cpl-galeria-lista{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
[data-cag-asistente] .cag-choice.cpl-galeria{flex-direction:column;align-items:stretch;gap:10px;padding:8px 8px 12px}
[data-cag-asistente] .cag-choice.cpl-galeria>img{aspect-ratio:3 / 4;object-fit:cover;border-radius:12px;width:100%;height:auto}
[data-cag-asistente] .cag-choice.cpl-galeria .cpl-texto{padding:0 6px}
[data-cag-asistente] .cag-choice.cpl-galeria .cag-choice-check{top:16px;right:16px;margin-top:0;background:color-mix(in srgb,var(--negro-abismo) 60%,transparent)}
.cpl-campo .cag-field{gap:6px}
.cpl-ayuda{display:block;color:var(--gris-niebla);font-size:13px;line-height:1.4;font-weight:400}
.cpl-ejemplos{display:flex;flex-wrap:wrap;gap:8px}
[data-cag-asistente] .cpl-ejemplos .cag-ejemplo-chip{align-self:auto}
.cpl-variar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0}
.cpl-variar button{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.cpl-variar button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cpl-variar small{color:var(--gris-niebla);font-size:13px}
@media(max-width:600px){
 [data-cag-asistente] .cag-choices.cpl-usos-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-cag-asistente] .cag-choice.cpl-usos{min-height:132px;padding:14px 12px 16px;gap:12px}
 .cpl-forma{height:46px}
 [data-cag-asistente] .cag-choices.cpl-galeria-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cpl-texto b{font-size:14px}
 .cpl-texto small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.cpl-forma{transition:none}}

/* Kit «Tu marca» (plantillas de negocio): se guarda solo en este navegador. */
.cpl-marca{margin-top:14px;border:1px solid var(--negro-borde);border-radius:14px;background:color-mix(in srgb,var(--negro-elevado) 60%,transparent)}
.cpl-marca>summary{display:flex;flex-direction:column;gap:2px;padding:12px 14px;cursor:pointer;list-style:none;border-radius:14px}
.cpl-marca>summary::-webkit-details-marker{display:none}
.cpl-marca>summary:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
.cpl-marca-titulo{font-weight:650;font-size:15px;color:var(--blanco-luz)}
.cpl-marca-titulo::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--verde-cocuyo);vertical-align:1px}
.cpl-marca>summary small{color:var(--gris-niebla);font-size:13px;line-height:1.35}
.cpl-marca-cuerpo{display:grid;gap:12px;padding:0 14px 14px}
.cpl-marca-campo{display:grid;gap:6px;font-size:14px;color:var(--gris-niebla)}
.cpl-marca-campo input{min-height:44px;width:100%;box-sizing:border-box;padding:.55rem .75rem;border:1px solid var(--negro-borde);border-radius:10px;background:var(--negro-abismo);color:var(--blanco-luz);font:inherit;font-size:15px}
.cpl-marca-campo input:focus-visible,.cpl-marca-color input:focus-visible,.cpl-marca-usar input:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
.cpl-marca-colores{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;border:0;min-width:0}
.cpl-marca-colores legend{padding:0;margin-bottom:6px;font-size:14px;color:var(--gris-niebla)}
.cpl-marca-color{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--blanco-luz)}
.cpl-marca-color input[type="checkbox"],.cpl-marca-usar input{width:20px;height:20px;accent-color:var(--verde-cocuyo);flex:none}
.cpl-marca-color input[type="color"]{width:44px;height:36px;padding:2px;border:1px solid var(--negro-borde);border-radius:8px;background:var(--negro-abismo);cursor:pointer}
.cpl-marca-usar{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--blanco-luz)}
.cpl-marca-logo,.cpl-marca-nota,.cpl-marca-estado{margin:0;color:var(--gris-niebla);font-size:13px;line-height:1.4}
.cpl-marca-estado:empty{display:none}
.cpl-marca-estado{color:var(--verde-cocuyo)}
.cpl-marca-acciones{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.cpl-marca-acciones button{min-height:44px}
.cpl-marca-acciones button[disabled]{opacity:.5;cursor:default}
.cpl-marca-guardar{font-weight:650}
@media(max-width:600px){.cpl-marca-cuerpo{padding:0 12px 12px}.cpl-marca>summary{padding:12px}}

/* La tarjeta de una plantilla enseña su primer diseño entero (con sus textos):
   dentro de la caja común 16:10 del hub, sin recortar, sobre un fondo tranquilo. */
#cocuyoApps .capps-card[data-capps-plantilla] .capps-thumb{background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--verde-cocuyo) 7%,transparent),transparent 70%),var(--negro-abismo)}
#cocuyoApps .capps-card[data-capps-plantilla] .capps-thumb img{object-fit:contain}


/* cocuyo-css: assets/css/plantillas-texto.css */
/* Textos exactos: todos los colores proceden de los tokens del Estudio. */
.cpt-dialog{box-sizing:border-box;width:min(840px,calc(100vw - 24px));max-height:94dvh;margin:auto;padding:24px;border:1px solid var(--negro-borde);border-radius:18px;background:var(--negro-elevado);color:var(--blanco-luz);overflow:auto;overscroll-behavior:contain;font:14px/1.5 var(--font,var(--fuente,system-ui,sans-serif));box-shadow:0 24px 90px color-mix(in srgb,var(--negro-abismo) 75%,transparent)}
.cpt-dialog::backdrop{background:color-mix(in srgb,var(--negro-abismo) 80%,transparent)}
.cpt-dialog *{box-sizing:border-box}.cpt-dialog [hidden]{display:none!important}
.cpt-heading h2{margin:0;font-size:25px;line-height:1.2}.cpt-subtitle{margin:6px 0 16px;color:var(--verde-cocuyo);overflow-wrap:anywhere}
.cpt-note{color:var(--gris-niebla);font-size:13px}.cpt-file,.cpt-field{display:flex;flex-direction:column;gap:7px;margin:14px 0;min-width:0}
.cpt-file input{max-width:100%;min-height:44px;font:inherit;color:inherit;padding:8px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo)}
.cpt-file input::file-selector-button{font:inherit;color:var(--blanco-luz);background:var(--negro-elevado);border:1px solid var(--negro-borde);border-radius:7px;padding:6px 10px;margin-right:10px;cursor:pointer}
.cpt-filename{font-size:12px;color:var(--gris-humo);overflow-wrap:anywhere}.cpt-filename:empty{display:none}
.cpt-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cpt-field>span{font-weight:600}.cpt-field textarea{width:100%;min-height:88px;padding:10px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo);color:var(--blanco-luz);font:inherit;line-height:1.45;resize:vertical}.cpt-field textarea[aria-invalid=true]{border-color:var(--peligro)}.cpt-field small{color:var(--gris-humo)}
.cpt-dialog :is(button,input,textarea):focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.cpt-preview{display:grid;place-items:center;min-height:140px;padding:12px;border:1px solid var(--negro-borde);border-radius:12px;background:var(--negro-abismo);color:var(--gris-niebla)}
.cpt-preview canvas{display:block;width:auto;height:auto;max-width:100%;max-height:54dvh;object-fit:contain}.cpt-preview>p{margin:14px;text-align:center}
.cpt-exact{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cpt-status{color:var(--gris-niebla);font-size:13px;overflow-wrap:anywhere}.cpt-status:empty{display:none}
.cpt-actions{position:sticky;bottom:-24px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:16px -24px -24px;padding:14px 24px 24px;border-top:1px solid var(--negro-borde);background:var(--negro-elevado)}.cpt-actions button{min-height:44px;font:inherit;padding:10px 16px;border-radius:10px;cursor:pointer}.cpt-actions button:disabled{opacity:.5;cursor:default}
@media(max-width:600px){.cpt-dialog{width:calc(100vw - 16px);padding:16px}.cpt-heading h2{font-size:22px}.cpt-fields{grid-template-columns:1fr;gap:0}.cpt-field{margin:8px 0}.cpt-field textarea{min-height:70px;font-size:16px}.cpt-actions{bottom:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:-16px;padding:12px 16px 16px}.cpt-actions button{flex:1}.cpt-preview{padding:6px}.cpt-preview canvas{max-height:50dvh}}

/* El botón visible sigue el idioma del Estudio, también en otros sistemas. */
.cpt-file{position:relative;display:block;min-height:52px;padding:14px;border:1px solid var(--negro-borde);border-radius:10px;background:var(--negro-abismo);cursor:pointer}
.cpt-file>span{display:block;pointer-events:none}
.cpt-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cpt-file:focus-within{outline:2px solid var(--verde-cocuyo);outline-offset:3px}


/* cocuyo-css: assets/css/estudio-agente-lotes.css */
.agente-attachments-heading{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-width:0}.agente-attachments-heading strong{font-size:12px;font-weight:550;overflow-wrap:anywhere}.agente-beta{display:inline-flex;align-items:center;flex:none;padding:3px 6px;border:1px solid #b0ed733d;border-radius:5px;color:#c1e89f;font:500 10px/1 var(--font);letter-spacing:0;text-transform:none}.agente-photo-count{margin-left:auto;flex:none;font-size:11px;color:#aeb8a6;font-variant-numeric:tabular-nums}
.agente-attachments{margin:12px 0 16px;min-width:0}.agente-attachments-tools{display:flex;flex-wrap:wrap;gap:7px}.agente-attachments-tools button,.agente-task-format select{min-height:36px;border:1px solid #ffffff24;background:#1b2118;color:#dfead6;border-radius:8px;padding:7px 10px;font:500 11px/1.3 var(--font);cursor:pointer}.agente-attachments-tools [aria-pressed=true]{border-color:#aff33e7a;color:#cbedaa;background:#aff33e0d}
.agente-attachments small{display:block;margin:9px 0;color:#aeb8a6;font:12px/1.5 var(--font)}.agente-attachments-list{display:flex;gap:9px;overflow:auto;max-width:100%;padding:10px 0 5px}.agente-attachments-list figure{position:relative;flex:0 0 74px;min-width:0;margin:0}.agente-attachments-list img{width:74px;height:68px;object-fit:cover;border-radius:9px;background:#1d211b}.agente-attachments-list figcaption{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#aeb8a6;margin-top:4px}.agente-attachments-list button{position:absolute;right:-3px;top:-3px;width:24px;height:24px;border:1px solid #ffffff55;border-radius:50%;color:white;background:#171c14;font-size:15px;cursor:pointer}.agente-task-format{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font-size:12px;color:#d8e2cf}
.agente-prepare-batch{width:100%;min-height:44px;margin-top:16px;border:1px solid #aff33e;border-radius:10px;background:#aff33e;color:#132207;padding:11px 15px;font:600 13px/1.4 var(--font);cursor:pointer}
.agente-task-dialog{width:min(570px,calc(100vw - 28px));max-height:calc(100dvh - 36px);box-sizing:border-box;overflow:auto;border:1px solid #ffffff24;border-radius:20px;padding:25px;background:radial-gradient(ellipse at top right,#aff33e0c,transparent 65%),#121610;color:#e5eddf;box-shadow:0 24px 100px #0008}.agente-task-dialog::backdrop{background:#020501bd;backdrop-filter:blur(5px)}.agente-task-close{position:absolute;top:12px;right:12px;border:0;background:transparent;color:#c4cebd;font-size:26px;cursor:pointer;width:36px;height:36px}.agente-task-kicker{color:#b2d393;font-size:10px;letter-spacing:.09em;margin:0 35px 10px 0}.agente-task-dialog h2{font-size:23px;line-height:1.3;letter-spacing:-.03em;font-weight:550;margin:0 28px 9px 0;overflow-wrap:anywhere}.agente-task-state{color:#b7c3ad;font-size:12px;margin:0 0 18px}.agente-task-budget{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:15px 0;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}.agente-task-budget span{font-size:10px;color:#aeb9a4}.agente-task-budget b{display:block;color:#e6f4d9;font-size:18px;font-weight:550;margin-top:7px;font-variant-numeric:tabular-nums}
.agente-task-sample{margin:18px 0;display:grid;place-items:center;border-radius:13px;background:#080a07;overflow:hidden}.agente-task-sample img,.agente-task-sample video{display:block;max-width:100%;max-height:min(34svh,300px);object-fit:contain}.agente-task-notice,.agente-task-error{font-size:12px;line-height:1.65;color:#b9c4b0}.agente-task-error:not(:empty){color:#f2bd9c;padding:10px;border:1px solid #eeac7538;border-radius:8px}.agente-task-dialog details{font-size:12px}.agente-task-dialog summary{padding:12px 0;cursor:pointer}.agente-task-results{list-style:none;padding:0;max-height:200px;overflow:auto}.agente-task-results li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #ffffff12}.agente-task-results a{color:#c3e99f;text-underline-offset:3px}.agente-task-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.agente-task-actions button{min-height:43px;flex:1;padding:10px 13px;border:1px solid #aff33e;border-radius:9px;background:#aff33e;color:#142308;font:600 12px/1.35 var(--font);cursor:pointer}.agente-task-actions .secondary{background:transparent;border-color:#ffffff24;color:#ccd7c1}.agente-task-actions button:disabled,.agente-attachments button:disabled,.agente-prepare-batch:disabled{opacity:.45;cursor:default}.agente-task-dialog :is(button,summary,a):focus-visible,.agente-attachments :is(button,select):focus-visible,.agente-prepare-batch:focus-visible{outline:2px solid #aff33e;outline-offset:3px}
.cocuyo-agent-upgrade{padding:14px;border:1px solid #aff33e35;border-radius:12px;color:#d4e5c4;font-size:13px;line-height:1.6}.cocuyo-energy-refill{min-height:36px;border:1px solid #aff33e45;border-radius:8px;background:transparent;color:#cdeaaf;font:550 12px var(--font);padding:8px 11px;cursor:pointer}
@media(max-width:700px){.agente-task-dialog{padding:21px 17px;border-radius:16px}.agente-task-budget{gap:8px}.agente-task-budget b{font-size:17px}.agente-task-actions{flex-direction:column}.agente-attachments-tools button{min-height:44px}.agente-task-sample img,.agente-task-sample video{max-height:min(34svh,280px)}}

.agente-attachments{padding:14px;border:1px solid #ffffff16;border-radius:13px;background:#10150fd9;box-sizing:border-box}.agente-attachments-tools button{min-height:44px}.agente-attachments-tools [data-repeat]{margin-left:auto}.agente-repeat-summary{display:flex;align-items:center;gap:12px;margin-top:13px;padding-top:13px;border-top:1px solid #ffffff12}.agente-repeat-summary p{min-width:0;margin:0;color:#aeb8a6;font:12px/1.5 var(--font)}.agente-repeat-summary b{display:block;color:#dae8cd;font-weight:550;margin-bottom:3px}.agente-repeat-demo{position:relative;flex:0 0 70px;height:50px;overflow:hidden}.agente-repeat-demo i{position:absolute;top:8px;left:3px;width:26px;height:32px;border:1px solid #a6da6c55;border-radius:5px;background:#1b2717;transform:rotate(-7deg);animation:agente-photo-repeat 2.8s ease-in-out 3}.agente-repeat-demo i::before{content:'';position:absolute;left:5px;top:16px;width:14px;height:9px;background:#80b744;clip-path:polygon(0 100%,40% 0,65% 55%,82% 25%,100% 100%)}.agente-repeat-demo i::after{content:'';position:absolute;top:6px;left:15px;width:4px;height:4px;border-radius:50%;background:#d5edb9}.agente-repeat-demo i:nth-child(2){left:17px;top:5px;transform:rotate(0);animation-delay:.35s}.agente-repeat-demo i:nth-child(3){left:31px;top:8px;transform:rotate(7deg);animation-delay:.7s}.agente-repeat-demo span{position:absolute;right:0;bottom:0;color:#b4ef77;font-size:20px;background:#10150f;border-radius:50%;line-height:1}.agente-task-format{flex-wrap:wrap}.agente-task-format select{min-width:0;max-width:100%;min-height:44px;flex:1 1 150px}.agente-attachments .agente-photo-limits{font-size:10px;color:#94a08a}.agente-attachments-list:empty{display:none}.agente-task-panel{min-width:0;color:#e5eddf}.agente-task-panel h2{font:550 21px/1.3 var(--font);letter-spacing:-.02em;margin:0 0 12px;overflow-wrap:anywhere}.agente-task-panel details{font-size:12px}.agente-task-panel summary{padding:12px 0;cursor:pointer}.agente-task-panel :is(button,summary,a):focus-visible{outline:2px solid #aff33e;outline-offset:3px}
@keyframes agente-photo-repeat{0%,100%{border-color:#a6da6c55;filter:brightness(1)}35%{border-color:#b4ef77;filter:brightness(1.4)}}
@media(max-width:380px){.agente-attachments{padding:11px}.agente-attachments-tools{gap:6px}.agente-attachments-tools [data-repeat]{margin-left:0;flex-basis:100%}.agente-repeat-summary{gap:9px}.agente-task-format select{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.agente-repeat-demo i{animation:none}}

.cocuyo-energy-refill:disabled{opacity:.45;cursor:not-allowed}.cocuyo-energy-refill:focus-visible{outline:2px solid #aff33e;outline-offset:3px}


/* cocuyo-css: assets/css/estudio-agente-panel.css */
/* One Agent entry, with creation and owned task progress in the same dialog. */
#cocuyoChat .cocuyo-agent-tabs{display:flex;gap:5px;margin:0;padding:20px 64px 14px 25px;border-bottom:1px solid #ffffff14;background:#10150e;position:sticky;top:0;z-index:1}
#cocuyoChat .cocuyo-agent-tabs button{min-height:40px;padding:9px 17px;border:1px solid transparent;border-radius:10px;background:transparent;color:#aebaa6;font:550 13px/1.3 var(--font);cursor:pointer;white-space:nowrap}
#cocuyoChat .cocuyo-agent-tabs [aria-selected=true]{background:#aff33e13;border-color:#aff33e3b;color:#d1efb5}
#cocuyoChat [role=tabpanel][hidden]{display:none!important}
#cocuyoChat [data-cocuyo-tareas]{padding:23px 25px;min-height:190px;outline:none}
#cocuyoChat .cocuyo-chat-close{z-index:3}
#cocuyoEnergy{position:relative}
#cocuyoEnergy .cocuyo-energy-name{display:inline-flex;align-items:center;gap:5px}
#cocuyoEnergy .cocuyo-working-lights{display:inline-flex;gap:3px;align-items:center}
#cocuyoEnergy[data-tarea=true] .cocuyo-working-lights i{display:block;width:4px;height:4px;border-radius:50%;background:#a9ed62;box-shadow:0 0 5px #a9ed6255;opacity:.9}
@media(prefers-reduced-motion:no-preference){#cocuyoEnergy .cocuyo-working-lights i{animation:cocuyo-working-light 1.4s ease-in-out infinite alternate}#cocuyoEnergy .cocuyo-working-lights i+ i{animation-delay:.45s}@keyframes cocuyo-working-light{from{opacity:.3}to{opacity:1}}}
#cocuyoComposer .cocuyo-pilot-status:not(:empty){padding:12px 14px;border:1px solid #bed78b38;border-radius:10px;background:#a9d3650a;color:#d0ddc2;line-height:1.55;overflow-wrap:anywhere}
#cocuyoComposer .cocuyo-pilot-status:focus-visible{outline:2px solid #aff33e;outline-offset:3px}
@media(max-width:600px){#cocuyoChat .cocuyo-agent-tabs{padding:16px 54px 12px 16px;gap:2px}#cocuyoChat .cocuyo-agent-tabs button{padding:9px 13px;font-size:12px}#cocuyoChat [data-cocuyo-tareas]{padding:18px 16px}}