/* [Pulso-Supabase] 🎨 Pulso Estudio (public/estudio.js y public/estudio-gif.js): pantalla completa tipo estudio (riel de herramientas, panel,
   lienzo y tira del historial), celular y computador, claro y oscuro (variables de estilos.css). Respeta 🎨 Animaciones (html.cf-quieto) y
   prefers-reduced-motion: lo único que se mueve es el giro de «cargando», más lento. */
.es { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--bg); color: var(--t1); --es-a: #f43f5e; --es-a2: #a855f7; --es-grad: linear-gradient(135deg, var(--es-a), var(--es-a2)); }
.es[hidden] { display: none; }
html.es-abierto { overflow: hidden; }
html.es-abierto #cf-toast.cf-toast, html.es-abierto .cf-toast { z-index: 9800; }
.es .es-sub { color: var(--t2); font-size: 13px; }
.es button { font: inherit; }
.es :focus-visible { outline: 2px solid var(--es-a2); outline-offset: 2px; }

/* encabezado */
.es-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--es-a2) 9%, var(--surface)), color-mix(in srgb, var(--es-a) 3%, var(--surface))); }
.es-logo { width: 38px; height: 38px; display: block; border-radius: 28%; box-shadow: 0 10px 24px -12px var(--es-a2); flex: none; }
.es-logo svg { display: block; width: 100%; height: 100%; border-radius: 28%; } /* 🎨 (paq36) el SVG trae su cuadro con el degradado de Pulso */
.es-tit { display: flex; flex-direction: column; min-width: 0; }
.es-tit b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.es-tit small { font-size: 12px; color: var(--t2); white-space: nowrap; }
.es-esp { flex: 1; }
.es-prodsw { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 420px; height: 44px; padding: 4px 12px 4px 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); cursor: pointer; text-align: left; margin-left: 10px; }
.es-prodsw:hover { border-color: color-mix(in srgb, var(--es-a2) 45%, var(--border)); }
.es-prodsw img, .es-prodsw .es-prod-sin { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bg); display: grid; place-items: center; }
.es-prodsw-t { display: flex; flex-direction: column; min-width: 0; }
.es-prodsw-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-prodsw-t small { font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-prodsw-f { color: var(--t2); margin-left: 2px; }
.es-pill { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--green-bd); background: var(--green-bg); color: var(--green); font-size: 13px; cursor: pointer; white-space: nowrap; }
.es-pill b { font-variant-numeric: tabular-nums; }
.es-pill-ambar { border-color: var(--amber-bd); background: var(--amber-bg); color: var(--amber); }
.es-pill-rojo { border-color: var(--red-bd); background: var(--red-bg); color: var(--red); }
.es-volver { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--rs); border: 1px solid var(--border); background: var(--surface); color: var(--t1); font-weight: 600; cursor: pointer; white-space: nowrap; }

/* cuerpo: riel de herramientas + área de trabajo */
.es-main { flex: 1; display: flex; min-height: 0; }
.es-rail { width: 86px; flex: none; border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 8px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.es-rail-g { display: flex; flex-direction: column; gap: 2px; }
/* 🧭 (31-oct, pul4d) la barra en 4 grupos plegables (Crear · Retocar · Ideas y datos · Cuenta) y 🏠 Inicio arriba. Abierto: el nombre del
   grupo como título pequeño (▾ pliega); plegado: un botón con el ícono y el nombre del grupo (▸ lo abre). */
.es-rail { gap: 8px; }
.es-rail-g { border-top: 1px solid var(--border); padding-top: 8px; }
.es .es-rail-h { display: flex; align-items: center; gap: 3px; width: 100%; min-height: 28px; padding: 2px 4px; border: 0; border-radius: 8px; background: none; color: var(--t2); cursor: pointer;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: left; line-height: 1.1; }
.es-rail-h:hover { background: var(--bg); color: var(--t1); }
.es-rail-h[aria-disabled="true"] { cursor: default; }
.es-rail-h[aria-disabled="true"]:hover { background: none; color: var(--t2); }
.es-rail-h[aria-disabled="true"] .es-rail-hf { visibility: hidden; }
.es-rail-hi { display: none; }
.es-rail-ht { flex: 1; min-width: 0; }
.es-rail-hf { flex: none; font-size: 10px; }
.es .es-rail-cerr .es-rail-h { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 2px; border-radius: 12px; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 700; text-align: center;
  background: color-mix(in srgb, var(--es-a2) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
.es .es-rail-cerr .es-rail-h:hover { color: var(--t1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--es-a2) 45%, var(--border)); }
.es-rail-cerr .es-rail-hi { display: block; font-size: 20px; line-height: 1; }
.es-rail-cerr .es-rail-ht { flex: none; }
.es-rail-cerr .es-rail-hf { display: none; }
.es-rail-cerr .es-rail-ht::after { content: ' ▸'; }
.es-rb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 8px 2px; border: 0; border-radius: 12px; background: none; color: var(--t2); cursor: pointer; }
.es-rb:hover { background: var(--bg); color: var(--t1); }
.es-rb.on { background: color-mix(in srgb, var(--es-a2) 13%, var(--surface)); color: var(--t1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--es-a2) 40%, transparent); }
.es-rb-i { font-size: 20px; line-height: 1; }
.es-rb-t { font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; }
.es-rb .es-n { position: absolute; top: 3px; right: 6px; }
.es-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--es-a2); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.es-work { flex: 1; min-width: 0; min-height: 0; }
.es-work-herr { display: grid; grid-template-columns: minmax(320px, 370px) 1fr; }
.es-work-pag { overflow-y: auto; }
.es-pag { max-width: 1180px; margin: 0 auto; padding: 16px 18px 48px; padding-bottom: max(48px, env(safe-area-inset-bottom)); }

/* panel de la herramienta */
.es-panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.es-panel > .es-aviso { margin: 10px 14px 0; }
.es-panel-c { flex: 1; overflow-y: auto; padding: 12px 16px 16px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.es-ph { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.es-ph b { font-size: 17px; font-weight: 800; }
.es-panel-pie { border-top: 1px solid var(--border); padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.es-lbl { display: block; font-size: 12px; font-weight: 800; color: var(--t2); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.es-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.es-lbl-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.es-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; cursor: pointer; }
.es-check input { width: 18px; height: 18px; accent-color: var(--es-a2); flex: none; }
.es .cf-input { width: 100%; }
.es textarea.cf-input { resize: vertical; min-height: 0; padding-top: 8px; padding-bottom: 8px; line-height: 1.4; }
.es-prompt { font-size: 14px; }
.es-modelo { font-weight: 600; }
.es-opts { margin-top: 6px; }
.es-nota-m { margin: 12px 0 0; }
.es-bases { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.es-base { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border-radius: 12px; border: 2px solid transparent; background: var(--bg); overflow: hidden; cursor: pointer; color: var(--t2); }
.es-base img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-base.on { border-color: var(--es-a2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-a2) 22%, transparent); }
.es-base i { position: absolute; left: 3px; bottom: 3px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: rgba(10, 12, 24, .7); color: #fff; }
.es-base-sin { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; border: 1px dashed var(--border-2); }
.es-base-sin small { font-size: 10px; font-weight: 700; }
.es-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.es-preset { min-height: 40px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.25; }
.es-preset:hover { border-color: color-mix(in srgb, var(--es-a2) 40%, var(--border)); }
.es-preset.on { border-color: transparent; background: var(--es-grad); color: #fff; box-shadow: 0 8px 18px -10px var(--es-a2); }
.es-ia { display: flex; flex-direction: column; gap: 4px; min-width: 240px; flex: 1; }
.es-link { border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; font-size: 13px; }

/* piezas comunes */
.es-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); padding: 14px 16px; margin-bottom: 14px; }
.es-card > b { display: block; font-size: 15px; margin-bottom: 4px; }
.es-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.es-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.es-chip { min-height: var(--h-sm, 28px); padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--surface); color: var(--t1); font-size: 13px; cursor: pointer; white-space: nowrap; }
.es-chip.on { border-color: var(--es-a2); background: color-mix(in srgb, var(--es-a2) 14%, var(--surface)); font-weight: 700; }
.es-mini { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; min-width: 36px; height: 36px; padding: 0 9px; border-radius: var(--rs); border: 1px solid var(--border); background: var(--surface); color: var(--t1); cursor: pointer; text-decoration: none; font-size: 15px; }
.es-mini:hover { border-color: var(--border-2); }
.es-mini.on { border-color: var(--amber-bd); background: var(--amber-bg); }
.es-mini-txt { font-size: 13px; font-weight: 600; }
.es-mini:disabled { opacity: .6; cursor: default; }
.es-aviso { padding: 9px 12px; border-radius: var(--rs); font-size: 13px; margin: 8px 0; }
.es-aviso-ambar { background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--t1); }
.es-vacio { padding: 36px 16px; text-align: center; }
.es-cargando { padding: 40px 16px; text-align: center; color: var(--t2); display: flex; gap: 10px; align-items: center; justify-content: center; }
.es-giro { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: es-giro .8s linear infinite; vertical-align: -3px; }
@keyframes es-giro { to { transform: rotate(360deg); } }
html.cf-quieto .es-giro { animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) { .es-giro { animation-duration: 2.4s; } }
.es-det { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 12px; }
.es-det summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--t2); }
.es-det[open] summary { margin-bottom: 8px; }
.es-ang { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--accent-bg); color: var(--accent); white-space: nowrap; }
.es-ang-dolor { background: var(--red-bg); color: var(--red); }
.es-ang-beneficio { background: var(--green-bg); color: var(--green); }
.es-ang-antesdespues { background: color-mix(in srgb, #8b5cf6 16%, var(--surface)); color: color-mix(in srgb, #8b5cf6 80%, var(--t1)); }
.es-ang-oferta { background: var(--amber-bg); color: var(--amber); }
.es-est { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--t2); border: 1px solid var(--border); white-space: nowrap; }
.es-est-listo { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.es-est-fallo { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.es-est-generando, .es-est-cola { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.es-tag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(10, 12, 24, .7); color: #fff; font-size: 12px; font-weight: 700; }

/* costo y botón de generar */
.es-cot { display: flex; flex-direction: column; gap: 4px; }
.es-cot > div:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.es-cot small { font-size: 12px; color: var(--t2); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.es-cot b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.es-cot-mal b { color: var(--red); }
.es-cot.es-cot-mal:not(:has(b)) { color: var(--red); font-size: 13px; }
.es-cot.es-cot-pista { color: var(--t2); font-size: 13px; line-height: 1.4; }
.es-cot-motivo { margin-top: 4px; padding: 8px 10px; border-radius: var(--rs); background: var(--red-bg); border: 1px solid var(--red-bd); font-size: 13px; }
.es-cadena { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--t2); }
.es-cad-1 { font-weight: 700; color: var(--t1); }
.es-gen { width: 100%; min-height: 46px; font-size: 15px; }
.es .cf-btn-primary.es-gen:not(:disabled) { background: var(--es-grad); border-color: transparent; box-shadow: 0 12px 26px -14px var(--es-a2); }
/* (28-oct) deshabilitado se ve deshabilitado: gris y sin degradado; la razón va justo arriba (pista, error o tope) */
.es .cf-btn-primary.es-gen:disabled { background: var(--border); border-color: var(--border-2); color: var(--t2); box-shadow: none; opacity: 1; cursor: not-allowed; }
.es-ver[data-es="visor"] { cursor: zoom-in; }

/* ⛶ visor a pantalla completa (deslizar o ← → entre las piezas del historial) */
.es-visor { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: rgba(4, 6, 14, .96); color: #fff; }
.es-visor-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
.es-visor-h b { font-variant-numeric: tabular-nums; }
.es-visor-h span { flex: 1; min-width: 0; font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-visor-b { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 17px; cursor: pointer; text-decoration: none; flex: none; }
.es-visor-m { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 56px max(16px, env(safe-area-inset-bottom)); }
.es-visor-m { position: relative; }
.es-visor-m img, .es-visor-m video { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; border-radius: 10px; }
.es-visor-n { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.es-visor-ant { left: 8px; } .es-visor-sig { right: 8px; }

/* 🖼️ lienzo */
.es-lz { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.es-stage { flex: 1; min-height: 0; overflow: auto; display: flex; padding: 18px; justify-content: center; align-items: flex-start;
  background: radial-gradient(circle, color-mix(in srgb, var(--t2) 22%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--bg); }
.es-vac { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 420px; }
.es-vac b { font-size: 16px; }
.es-vac-ico { font-size: 54px; width: 110px; height: 110px; border-radius: 30px; display: grid; place-items: center; background: color-mix(in srgb, var(--es-a2) 10%, var(--surface)); border: 1px dashed var(--border-2); }
.es-vac-img { position: relative; max-width: min(380px, 100%); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.es-vac-img img { display: block; width: 100%; max-height: 52vh; object-fit: contain; }
.es-vac-prod { padding: 18px; }
.es-pieza { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.es-pieza-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-ver { display: flex; justify-content: center; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.es-ver img, .es-ver video { display: block; max-width: 100%; max-height: calc(100vh - 330px); min-height: 200px; object-fit: contain; }
.es-ver-tablero { background: repeating-conic-gradient(color-mix(in srgb, var(--t2) 14%, var(--surface)) 0 25%, var(--surface) 0 50%) 0 0 / 22px 22px; }
.es-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.es-gen-v { position: relative; width: min(100%, 520px); aspect-ratio: var(--es-ar, 1 / 1); max-height: calc(100vh - 300px); margin: 0 auto; border-radius: 18px; overflow: hidden; display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--es-a) 14%, var(--surface)), color-mix(in srgb, var(--es-a2) 18%, var(--surface))); border: 1px solid var(--border); }
.es-gen-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(.8); opacity: .45; transform: scale(1.1); }
.es-gen-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; max-width: 360px; }
.es-gen-c small { color: var(--t2); font-size: 13px; }
.es-gen-mal { background: var(--red-bg); aspect-ratio: auto; min-height: 220px; }
.es-salto { color: var(--amber) !important; font-weight: 700; }
.es-anillo { --p: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--es-a2) calc(var(--p) * 1%), color-mix(in srgb, var(--t2) 18%, transparent) 0); }
.es-anillo b { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* comparar con cortina */
.es-cmp-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.es-cmp-h .es-mini { margin-left: auto; }
.es-stage:has(.es-cmp-h) { flex-direction: column; align-items: stretch; }
.es-cortina { position: relative; width: min(100%, 640px); aspect-ratio: var(--es-ar, 1 / 1); max-height: calc(100vh - 300px); margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.es-cortina > img, .es-cortina-a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.es-cortina-a { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--c)) 0 0); background: var(--surface); }
.es-cortina-l { position: absolute; top: 0; bottom: 0; left: var(--c); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.es-cortina-r { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.es-tag-b { left: auto; right: 10px; }
.es-cmp-g { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); width: 100%; }
.es-cmp-g figure { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.es-cmp-g img, .es-cmp-g video { width: 100%; max-height: 40vh; object-fit: contain; background: var(--bg); }
.es-cmp-g figcaption { padding: 6px 10px; font-size: 12px; color: var(--t2); }
/* 📱 vista del anuncio */
.es-movil { width: 330px; max-width: 100%; margin: 0 auto; padding: 10px; border-radius: 36px; background: #0b0d18; box-shadow: var(--shadow); }
.es-movil-p { border-radius: 28px; overflow: hidden; background: #fff; color: #111; }
.es-ad-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.es-ad-h b { display: block; font-size: 13px; } .es-ad-h small { font-size: 11px; color: #666; }
.es-ad-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--es-grad); }
.es-ad-t { margin: 0; padding: 0 12px 8px; font-size: 13px; line-height: 1.35; }
.es-ad-m { aspect-ratio: var(--es-ar, 1 / 1); background: #eee; max-height: 470px; overflow: hidden; }
.es-ad-m img, .es-ad-m video { width: 100%; height: 100%; object-fit: cover; display: block; max-height: none; min-height: 0; }
.es-ad-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #f2f3f5; font-size: 13px; }
.es-ad-cta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.es-ad-cta b { flex: none; padding: 6px 10px; border-radius: 8px; background: #e4e6eb; font-size: 12px; }
/* tira del historial */
.es-tira { flex: none; border-top: 1px solid var(--border); background: var(--surface); padding: 8px 14px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.es-tira-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.es-tira-h b { font-size: 13px; }
.es-tira-h .es-mini { margin-left: auto; height: 30px; }
.es-tira-l { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.es-tz { position: relative; flex: none; height: 84px; aspect-ratio: var(--es-ar, 1 / 1); max-width: 150px; min-width: 52px; padding: 0; border-radius: 12px; border: 2px solid transparent; background: var(--bg); overflow: hidden; cursor: pointer; display: grid; place-items: center; color: var(--t2); }
.es-tz img, .es-tz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-tz.on { border-color: var(--es-a2); }
.es-tz-cmp { border-color: var(--amber); }
.es-tz em { position: absolute; left: 4px; bottom: 3px; font-style: normal; font-size: 12px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.es-tz-fav { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 12px; }
.es-tz-n { position: absolute; top: 3px; left: 4px; font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 6px; background: var(--amber); color: #111; }
.es-tz-p { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--amber); }
.es-tz-generando, .es-tz-cola { background: var(--amber-bg); }

/* 🧾 capa (producto, confirmar) */
.es-capa { position: absolute; inset: 0; z-index: 5; background: rgba(5, 8, 20, .55); display: flex; align-items: center; justify-content: center; padding: 14px; }
.es-capa[hidden] { display: none; }
.es-hoja { width: min(560px, 100%); max-height: calc(100% - 20px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); box-shadow: var(--shadow); overflow: hidden; }
.es-hoja-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.es-hoja-h b { font-size: 16px; }
.es-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--t1); cursor: pointer; flex: none; }
.es-hoja-c { overflow-y: auto; padding: 10px 16px 14px; }
.es-hoja-pie { border-top: 1px solid var(--border); padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.es-buscar { margin-bottom: 10px; }
.es-bot { margin-bottom: 12px; }
.es-bot-n { display: block; font-size: 12px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .03em; margin: 4px 4px 6px; }
.es-prod { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--rs); background: none; color: var(--t1); text-align: left; cursor: pointer; }
.es-prod:hover { background: var(--bg); }
.es-prod.on { border-color: color-mix(in srgb, var(--es-a2) 45%, var(--border)); background: color-mix(in srgb, var(--es-a2) 9%, var(--surface)); }
.es-prod img, .es-prod .es-prod-sin { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bg); display: grid; place-items: center; }
.es-prod span:last-child { display: flex; flex-direction: column; min-width: 0; }
.es-prod b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-prod small { font-size: 12px; color: var(--t2); }
.es-apagado { opacity: .65; }
.es-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.es-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.es-lista li:first-child { border-top: 0; }
.es-lista b { font-variant-numeric: tabular-nums; text-align: right; }

/* 💡 ideas */
.es-pedir-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.es-pedir-h b { font-size: 15px; }
.es-nota { margin-top: 10px; }
.es-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.es-idea { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.es-idea-h { display: flex; align-items: center; justify-content: space-between; }
.es-gancho { width: 100%; border: 0; background: none; color: var(--t1); font: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; resize: none; padding: 2px 0; }
.es-idea-p { margin: 0; }
.es-copy { display: flex; flex-direction: column; gap: 8px; }
.es-copy label, .es-idea .es-det label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--t2); }
.es-copy2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.es-cuenta { font-weight: 500; margin-left: 4px; }
.es-pasa { color: var(--red); font-weight: 700; }
.es-idea .es-det label { margin-bottom: 8px; }
.es-idea-acc { display: flex; gap: 8px; margin-top: 4px; }
.es-idea-acc .cf-btn { flex: 1; }

/* 🗂️ galería */
.es-gal-f { justify-content: space-between; margin: 0 0 14px; }
.es-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.es-pz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); overflow: hidden; display: flex; flex-direction: column; }
.es-pz-m { position: relative; height: 240px; padding: 0; border: 0; overflow: hidden; background: var(--bg); display: grid; place-items: center; cursor: zoom-in; width: 100%; color: var(--t2); }
.es-pz-m img, .es-pz-m video { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-pz-fav { position: absolute; top: 8px; right: 8px; font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.es-gal-est { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 22px; }
.es-gal-est small { font-size: 13px; }
.es-pz-i { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.es-pz-t { display: flex; gap: 6px; flex-wrap: wrap; }
.es-pz-g { font-size: 14px; line-height: 1.3; }
.es-pz-err { color: var(--red); font-size: 12px; }
.es-nota-pie { margin-top: 16px; }

/* 💵 gasto */
.es-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.es-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r, 14px); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.es-kpi small { font-size: 12px; color: var(--t2); font-weight: 700; }
.es-kpi b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.es-kpi-mal b { color: var(--red); }
.es-barra { height: 10px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 4px 0 16px; }
.es-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--amber) 70%, var(--red)); background-size: 300px 100%; }
.es-pre { font-weight: 700; color: var(--t2); }
.es-tope { width: 140px !important; }

/* 🔑 proveedores */
.es-pvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.es-pv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.es-pv-on { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); box-shadow: inset 0 3px 0 var(--green); }
.es-pv-pronto { opacity: .9; }
.es-pv-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-pv-h b { font-size: 15px; margin-right: auto; }
.es-pv-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--bg); }
.es-pv .es-sub { color: var(--t2); font-size: 13px; }   /* (también en 🔌 Conexiones, fuera de .es) */
.es-pv > .es-sub { margin: 0; }
.es-pv-m { display: flex; flex-wrap: wrap; gap: 4px; }
.es-pv-m span { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); color: var(--t1); }
.es-pv-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 0; }
.es-mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 3px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); letter-spacing: .04em; }
.es-pv-in { display: flex; gap: 6px; }
.es-pv-in .cf-input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.es-pv-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.es-prueba { font-size: 12.5px; padding: 6px 9px; border-radius: 10px; }
.es-prueba.ok { background: var(--green-bg); color: var(--green); }
.es-prueba.mal { background: var(--red-bg); color: var(--red); }
.es-pv-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: auto; }
.es-pv-links a { color: var(--accent); font-weight: 600; }
.es-orden { margin-top: 12px; }
.es-orden-t { display: block; font-size: 13px; margin-bottom: 6px; }
.es-orden ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.es-orden li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.es-orden li:first-child { border-top: 0; }
.es-orden li.es-off { opacity: .55; }
.es-orden li.es-nolisto .es-orden-x b { text-decoration: none; }
.es-orden-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--bg); }
.es-orden li:not(.es-off):first-child .es-orden-n, .es-orden li:not(.es-off) .es-orden-n:not(:empty) { background: color-mix(in srgb, var(--es-a2) 16%, var(--surface)); color: var(--t1); }
.es-orden-i { font-size: 18px; }
.es-orden-x { flex: 1; min-width: 0; font-size: 13px; }
.es-orden-x small { display: block; }
.es-orden .es-mini { min-width: 32px; height: 32px; padding: 0; }
.es-sw { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.es-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.es-sw > span[aria-hidden] { width: 40px; height: 24px; border-radius: 99px; background: var(--border-2); position: relative; transition: background .15s; }
.es-sw > span[aria-hidden]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.es-sw input:checked + span[aria-hidden] { background: var(--es-a2); }
.es-sw input:checked + span[aria-hidden]::after { transform: translateX(16px); }
.es-sw input:focus-visible + span[aria-hidden] { outline: 2px solid var(--es-a2); outline-offset: 2px; }
html.cf-quieto .es-sw > span[aria-hidden], html.cf-quieto .es-sw > span[aria-hidden]::after { transition: none; }
.cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.es-costos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.es-costos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.es-pvs-cx { margin-top: 10px; }

/* 🎞️ GIF liviano (public/estudio-gif.js): dentro de Estudio o como ventana (Vitrina) */
.gf-capa { position: fixed; inset: 0; z-index: 9500; background: rgba(5, 8, 20, .6); display: flex; align-items: center; justify-content: center; padding: 14px; }
.gf-capa .gf { width: min(980px, 100%); max-height: calc(100vh - 28px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; color: var(--t1); }
.gf-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.gf-h b { font-size: 16px; } .gf-h .es-x { margin-left: auto; }
.gf-c { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 16px; overflow-y: auto; }
.es-gif-c { padding: 0; overflow: hidden; } .es-gif-c .gf-c { padding: 14px 16px 18px; }
.gf-fuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.gf-f { position: relative; aspect-ratio: 1; padding: 0; border-radius: 12px; border: 2px solid transparent; background: var(--bg); overflow: hidden; cursor: pointer; }
.gf-f img, .gf-f video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-f b { position: absolute; left: 4px; bottom: 3px; font-size: 13px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.gf-f i { position: absolute; top: 4px; right: 4px; font-style: normal; min-width: 20px; height: 20px; border-radius: 99px; background: var(--es-a2, #a855f7); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.gf-f.on { border-color: var(--es-a2, #a855f7); box-shadow: 0 0 0 3px color-mix(in srgb, #a855f7 22%, transparent); }
.gf-rango { display: grid; gap: 8px; }
.gf-rango label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--t2); }
.gf-rango input { flex: 1; accent-color: #a855f7; }
.gf-2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.gf-2 .cf-input { flex: 1; min-width: 160px; }
.gf-der { display: flex; flex-direction: column; gap: 12px; }
.gf-vista { position: relative; display: grid; place-items: center; min-height: 260px; border-radius: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--t2) 22%, transparent) 1px, transparent 1.4px) 0 0 / 20px 20px, var(--bg); border: 1px solid var(--border); padding: 12px; }
.gf-vista canvas { max-width: 100%; max-height: 52vh; border-radius: 12px; box-shadow: var(--shadow); }
.gf-vacio { position: absolute; color: var(--t2); font-size: 13px; }
.gf-play { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(10, 12, 24, .7); color: #fff; font-size: 24px; cursor: pointer; }
.gf-pie { display: flex; flex-direction: column; gap: 8px; }
.gf-crear { min-height: 46px; background: linear-gradient(135deg, #f43f5e, #a855f7) !important; border-color: transparent !important; color: #fff !important; }
.gf-peso { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); }
.gf-peso b { font-size: 20px; font-variant-numeric: tabular-nums; } .gf-peso span { font-size: 13px; color: var(--t2); } .gf-peso small { font-size: 13px; font-weight: 700; }
.gf-peso.ok { background: var(--green-bg); border-color: var(--green-bd); } .gf-peso.ok small { color: var(--green); }
.gf-peso.medio { background: var(--amber-bg); border-color: var(--amber-bd); } .gf-peso.medio small { color: var(--amber); }
.gf-peso.mal { background: var(--red-bg); border-color: var(--red-bd); } .gf-peso.mal small { color: var(--red); }
.gf-acc { display: flex; gap: 8px; flex-wrap: wrap; } .gf-acc .cf-btn { flex: 1; justify-content: center; text-decoration: none; white-space: nowrap; } .gf-acc .cf-btn-primary { flex-basis: 100%; min-height: 44px; }

/* ícono de línea del botón (como los demás módulos del encabezado) */
/* (30-oct, paq36) lienzo con la línea de pulso y un destello, como Vitrina y Cobros */
html.cf-hx-listo #cf-app .cf-header-actions [data-ico="estudio"]::before, .cf-mmenu-ico[data-ico="estudio"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5.5%2015.5h3l1.4-3.2%202.4%205.6%201.4-2.4h4.8%22%2F%3E%3Cpath%20d%3D%22M17%206.8v3M15.5%208.3h3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5.5%2015.5h3l1.4-3.2%202.4%205.6%201.4-2.4h4.8%22%2F%3E%3Cpath%20d%3D%22M17%206.8v3M15.5%208.3h3%22%2F%3E%3C%2Fsvg%3E"); }

/* 💻 computador mediano: la tira del historial se queda abajo; el panel un poco más angosto */
@media (max-width: 1100px) and (min-width: 760px) { .es-work-herr { grid-template-columns: 320px 1fr; } .es-tit small { display: none; } }

/* 📱 celular: herramientas arriba en una fila, el lienzo y la tira, el panel y el botón de generar fijo abajo */
@media (max-width: 759px) {
  .es-top { gap: 8px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  .es-logo { width: 32px; height: 32px; }
  .es-tit, .es-ocultar-sm, .es-volver span:last-child { display: none; }
  .es-prodsw { flex: 1; max-width: none; margin-left: 0; height: 42px; }
  .es-esp { display: none; }
  .es-volver { padding: 0 10px; }
  .es-pill { padding: 0 10px; }
  .es-main { flex-direction: column; }
  .es-rail { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); padding: 6px 8px; gap: 6px; }
  .es-rail-g { flex-direction: row; gap: 2px; flex: none; border-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: 6px; }
  .es-rail-g:not(.es-rail-cerr) .es-rail-h { display: none; }   /* (🧭 abierto en el celular: sin título, los botones del grupo y su línea) */
  .es .es-rail-cerr .es-rail-h { width: 64px; min-height: 56px; padding: 6px 2px; }
  .es-rail-cerr .es-rail-hi { font-size: 18px; }
  .es-rb { width: 62px; flex: none; padding: 6px 2px; }
  .es-rb-i { font-size: 18px; }
  .es-work-herr { display: flex; flex-direction: column; overflow-y: auto; }
  /* (28-oct) primero los controles (prompt, modelo y Generar fijo abajo); la pieza y el historial después: al generar, la pantalla baja sola al lienzo */
  .es-panel { order: 1; flex: none; border-right: 0; }
  .es-lz { order: 2; flex: none; border-top: 1px solid var(--border); }
  .es-visor-m { padding: 6px 6px max(14px, env(safe-area-inset-bottom)); }
  .es-visor-n { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); transform: none; }
  .es-panel-c { overflow: visible; padding: 10px 14px 14px; }
  .es-panel-pie { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -10px 24px -18px rgba(0,0,0,.5); }
  .es-stage { flex: none; min-height: 300px; max-height: 58vh; padding: 12px; }
  .es-ver img, .es-ver video { max-height: 40vh; min-height: 160px; }
  .es-gen-v, .es-cortina { height: 40vh; max-height: none; width: auto; max-width: 100%; }
  .es-gen-mal { height: auto; }
  .es-vac-img img { max-height: 34vh; }
  .es-tira { padding: 6px 12px 8px; }
  .es-tz { height: 64px; }
  .es-acc { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .es-acc > * { flex: none; }
  .es-pag { padding: 12px 12px 40px; }
  .es-ideas { grid-template-columns: 1fr; }
  .es-gal { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .es-pz-m { height: 180px; }
  .es-kpis { grid-template-columns: repeat(2, 1fr); }
  .es-capa { padding: 0; align-items: flex-end; }
  .es-hoja { width: 100%; max-height: 90%; border-radius: 18px 18px 0 0; }
  .es-copy2 { grid-template-columns: 1fr; }
  .es-pvs { grid-template-columns: 1fr; }
  .es-orden li { flex-wrap: wrap; }
  .es-orden-x { flex-basis: calc(100% - 70px); }
  .gf-c { grid-template-columns: 1fr; }
  .gf-der { order: -1; }
  .gf-capa { padding: 0; align-items: flex-end; }
  .gf-capa .gf { max-height: 94vh; border-radius: 18px 18px 0 0; }
  .gf-vista { min-height: 200px; }
}
@media (max-width: 400px) { .es-gal { grid-template-columns: 1fr; } .es-presets { grid-template-columns: 1fr 1fr; } }

/* ── 🏆💬🗣️📦🚦 Estudio 2 (28-oct, public/estudio-ganadores.js) ── */
.eg-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.eg-cab > div:first-child { min-width: 0; }
.eg-cab b { display: block; }
.eg-cab > .es-mini, .eg-cab > .eg-barra { flex: none; }
.eg-res { margin: 0 0 10px; }
.eg-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.eg-ad { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl, 18px); padding: 12px; min-width: 0; }
.eg-ad.eg-gana { border-color: var(--green-bd); box-shadow: inset 0 0 0 1px var(--green-bd); }
.eg-ad.eg-cansa { border-color: var(--amber-bd); }
.eg-ad-m { position: relative; flex: none; width: 92px; height: 116px; border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.eg-ad-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-cinta { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 11px; font-weight: 800; text-align: center; padding: 3px 0; background: var(--green); color: #fff; }
.eg-ad-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eg-ad-t b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.eg-gancho { display: block; font-size: 13px; font-style: italic; color: var(--t1); padding: 6px 10px; border-left: 3px solid var(--es-a2, var(--accent)); background: var(--bg); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.eg-gancho::before, .eg-gancho::after { content: ''; }
.eg-ks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.eg-k { background: var(--bg); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.eg-k small { font-size: 11px; color: var(--t2); font-weight: 700; }
.eg-k b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eg-k b small { font-size: 11px; font-weight: 600; }
.eg-k-bien b { color: var(--green); }
.eg-k-mal b { color: var(--red); }
.eg-cansado { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--amber-bg); border: 1px solid var(--amber-bd); font-size: 13px; }
.eg-cansado small { color: var(--t1); }
.eg-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.eg-gls { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.eg-gl ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eg-gl li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.eg-gl li:last-child { border-bottom: 0; }
.eg-gl li span { overflow-wrap: anywhere; }
.eg-bases .es-base { width: 76px; height: 96px; }
.eg-guion { width: 100%; resize: vertical; min-height: 90px; font: inherit; }
.eg-ideas-c { margin-top: 6px; }
.eg-kit .eg-cab { margin-bottom: 8px; }
.eg-barra { flex: none; width: 120px; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; margin-top: 6px; }
.eg-barra i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .4s; }
.eg-rol { margin-top: 6px; }
.eg-tira { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.eg-tz { position: relative; flex: none; width: 58px; height: 58px; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eg-tz img, .eg-tz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-sem { position: absolute; right: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); }
.eg-sem-verde { background: var(--green); } .eg-sem-amarillo { background: var(--amber); } .eg-sem-rojo { background: var(--red); }
.eg-rev-verde { color: var(--green); } .eg-rev-amarillo { color: var(--amber); } .eg-rev-rojo { color: var(--red); }
.eg-rev-c { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); margin-bottom: 8px; }
.eg-rev-c b { font-size: 22px; font-variant-numeric: tabular-nums; }
.eg-items { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.eg-items li { padding: 6px 8px; border-radius: 8px; background: var(--bg); overflow-wrap: anywhere; }
.eg-items .eg-grave { background: var(--red-bg); } .eg-items .eg-ojo { background: var(--amber-bg); }
#eg-gif { min-height: 200px; }
@media (max-width: 700px) {
  .eg-ads, .eg-gls { grid-template-columns: 1fr; }
  .eg-ad-m { width: 76px; height: 96px; }
  .eg-barra { width: 80px; }
}
/* 📋🪝 (29-oct) Estudio tanda 2: paquete para subir (public/estudio-pauta.js) y ganchos nuevos al clonar */
.eg-gnl { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.eg-gn { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 6px; border-radius: 10px; background: var(--bg); opacity: .65; }
.eg-gn.on { opacity: 1; }
.eg-gn textarea { flex: 1; min-width: 0; resize: vertical; font: inherit; }
.eg-gn small { flex-basis: 100%; }
.ep-crs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.ep-crs-g { flex-wrap: wrap; overflow: visible; }
.ep-cr { position: relative; flex: none; width: 72px; height: 90px; padding: 0; border-radius: 10px; border: 2px solid var(--border); background: var(--bg); overflow: hidden; cursor: pointer; opacity: .55; }
.ep-cr.on, .ep-crs-g .ep-cr { opacity: 1; border-color: var(--es-a2, var(--accent)); }
.ep-cr img, .ep-cr video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-cr i { position: absolute; left: 3px; bottom: 3px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; }
.ep-cr u { position: absolute; left: 3px; top: 3px; text-decoration: none; font-size: 12px; }
.ep-cr .eg-sem { position: absolute; }
.ep-cg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 110px; }
.ep-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 760px) { .ep-cols { grid-template-columns: minmax(0, 1fr); } }
.ep-l ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.ep-t { font-size: 13px; padding: 6px 8px; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.ep-t.ep-rojo { background: var(--red-bg); } .ep-t.ep-amarillo { background: var(--amber-bg); }
.ep-tx { white-space: pre-wrap; }
.ep-t textarea { width: 100%; resize: vertical; font: inherit; }
.ep-nota { color: var(--t1); font-size: 12px; }
.ep-acc { display: flex; gap: 6px; justify-content: flex-end; }
.ep-bts { flex-wrap: wrap; }
.ep-sem { flex: none; font-weight: 800; font-size: 13px; }
.ep-sem.ep-verde { color: var(--green); } .ep-sem.ep-amarillo { color: var(--amber); } .ep-sem.ep-rojo { color: var(--red); }
.ep-pubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.ep-pub { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ep-peg { width: 100%; resize: vertical; font: inherit; }
.ep-sw { align-items: flex-start; gap: 8px; margin: 8px 0; }
.ep-sw span { display: flex; flex-direction: column; gap: 2px; }

/* 🧠 (30-oct, estudio33) lo que entiende Estudio del producto · 🧪 revisar antes de gastar */
.es-ctx-c { margin: 6px 0 0; min-height: 0; }
.es-ctx-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--t2); margin-bottom: 8px; }
.es-ctx-l textarea { font-size: 13px; resize: vertical; min-height: 44px; }
.es-ctx-b { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.es-rev-l { margin-top: 6px; font-size: 12px; color: var(--t2); overflow-wrap: anywhere; }
.es-rev-l.es-rev-ojo { color: var(--amber); }
.es-rev-l.es-rev-mal { color: var(--red); font-weight: 700; }
.es-rev { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); min-width: 0; }
.es-rev-av { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.es-rev-av li { font-size: 13px; padding: 6px 8px; border-radius: 8px; overflow-wrap: anywhere; }
.es-rev-av .es-rev-mal { background: var(--red-bg); color: var(--red); }
.es-rev-av .es-rev-ojo { background: var(--amber-bg); color: var(--t1); border: 1px solid var(--amber-bd); }
.es-rev-res li { font-size: 13px; }
.es-rev-res li span { flex: 0 0 auto; max-width: 45%; color: var(--t2); }
.es-rev-res li b { text-align: right; overflow-wrap: anywhere; min-width: 0; font-weight: 600; }
.es-rev-pf { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 220px; overflow: auto; background: var(--surface); padding: 8px; border-radius: 8px; margin: 0 0 6px; }
@media (max-width: 420px) { .es-rev-res li { flex-direction: column; gap: 2px; } .es-rev-res li span { max-width: none; } .es-rev-res li b { text-align: left; } }
/* 📸 (30-oct) foto oficial del producto, dentro de «🧠 Lo que entiende Estudio» */
.es-foto-of{border:1px dashed var(--cf-borde,#cbd5e1);border-radius:12px;padding:10px 12px;margin:8px 0 10px}.es-foto-of b{display:block;font-size:.92rem}
.es-foto-of-f{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}.es-foto-of-f img{width:84px;height:84px;object-fit:contain;border-radius:10px;background:repeating-conic-gradient(#f1f5f9 0 25%,#fff 0 50%) 0 0/16px 16px}
.es-foto-of-v{font-size:.82rem;opacity:.75;flex:1 1 160px}.es-foto-of-b{display:inline-flex;gap:8px;align-items:center}

/* 🏠 (31-oct, pul4d) «¿Qué quieres hacer hoy?»: las tareas comunes en tarjetas grandes que llevan a las herramientas de siempre */
.es-ini { max-width: 940px; margin: 8px auto 0; }
.es-ini-cab h2 { margin: 6px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.es-ini-cab .es-sub { margin: 0 0 16px; font-size: 14px; }
.es-ini-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.es-ini-c { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 16px; border-radius: var(--r-xl, 18px); border: 1px solid var(--border); background: var(--surface); color: var(--t1); cursor: pointer; text-align: left; }
.es-ini-c:hover { border-color: color-mix(in srgb, var(--es-a2) 50%, var(--border)); background: color-mix(in srgb, var(--es-a2) 5%, var(--surface)); }
.es-ini-i { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 27px; background: color-mix(in srgb, var(--es-a2) 12%, var(--surface)); }
.es-ini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.es-ini-t b { font-size: 16px; font-weight: 800; }
.es-ini-t small { font-size: 13px; color: var(--t2); line-height: 1.35; }
.es-ini-f { flex: none; color: var(--t2); font-size: 18px; }
.es-ini-mas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.es .es-ini-m { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font-size: 14px; font-weight: 600; cursor: pointer; }
.es-ini-m:hover { border-color: color-mix(in srgb, var(--es-a2) 45%, var(--border)); }
:where(html:not(.cf-clasico)) .es-ini-i { background: linear-gradient(135deg, color-mix(in srgb, var(--es-a) 16%, var(--surface)), color-mix(in srgb, var(--es-a2) 18%, var(--surface))); }
@media (max-width: 759px) {
  .es-ini-cab h2 { font-size: 21px; }
  .es-ini-g { grid-template-columns: 1fr; gap: 10px; }
  .es-ini-c { min-height: 80px; padding: 12px 14px; gap: 12px; }
  .es-ini-i { width: 46px; height: 46px; font-size: 24px; border-radius: 14px; }
}

/* ⭐ (31-oct, pul4d) el motor recomendado para esta tarea, debajo del selector de Modelo */
.es-reco { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: var(--t1); background: color-mix(in srgb, var(--es-a2) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--es-a2) 28%, var(--border)); }
.es-reco-ok { background: var(--green-bg); border-color: var(--green-bd); }
.es-reco-no { color: var(--t2); background: none; }
.es .es-reco .es-link { display: flex; align-items: center; width: max-content; min-height: 36px; margin-top: 6px; padding: 0 14px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface); font-size: 13px; font-weight: 700; text-decoration: none; }
.es .es-reco-no .es-link { display: inline-flex; margin: 0 0 0 4px; min-height: 30px; padding: 0 10px; }
@media (max-width: 759px) { .es .es-reco .es-link { min-height: 44px; } }